/* HST UI — main.css (bundled: core + components + compat) */
@font-face {
  font-family: "Vazirmatn";
  src:
    url("../font/Vazir.woff2") format("woff2"),
    url("../font/Vazir.woff") format("woff"),
    url("../font/Vazir.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   HST UI — TeacherShow design system
   Single source of truth. Flat, low-specificity, token-driven.
   RTL-first (Farsi). One class per element (BEM). No redundant stacks.
   ========================================================================== */

/* ---- 1. Design tokens -------------------------------------------------- */
:root {
  /* Brand — teal */
  --hst-accent: #0d9488;
  --hst-accent-rgb: 13, 148, 136;
  --hst-accent-hover: #0f766e;
  --hst-accent-press: #0c5650;
  --hst-accent-soft: #d2f3ec;
  --hst-accent-softer: #f0faf7;
  --hst-on-accent: #ffffff;

  /* Status (calmer, more harmonious tints) */
  --hst-danger: #dc2647;
  --hst-danger-hover: #be123c;
  --hst-danger-soft: #fde7ec;
  --hst-success: #167a3c;
  --hst-success-soft: #ddf3e4;
  --hst-warning: #b25b08;
  --hst-warning-soft: #fcefd9;
  --hst-info: #2563c9;
  --hst-info-soft: #e3ecfb;

  /* Neutral surfaces & text (cool neutral to pair with teal) */
  --hst-bg: #eef2f6;
  --hst-surface: #ffffff;
  --hst-surface-2: #f4f7fa;
  --hst-surface-3: #e9eef3;
  --hst-ink: #16212e;
  --hst-ink-2: #44525f;
  --hst-muted: #6b7886;
  --hst-faint: #9ba7b3;

  /* Borders (crisper hairlines) */
  --hst-border: #e6ebf0;
  --hst-border-strong: #d2dae1;
  --hst-ring: rgba(var(--hst-accent-rgb), 0.32);

  /* Radius */
  --hst-r-xs: 8px;
  --hst-r-sm: 10px;
  --hst-r: 12px;
  --hst-r-lg: 16px;
  --hst-r-xl: 22px;
  --hst-r-pill: 999px;

  /* Spacing scale (tuned slightly tighter for a denser, data-first feel) */
  --hst-1: 4px;
  --hst-2: 8px;
  --hst-3: 12px;
  --hst-4: 14px;
  --hst-5: 18px;
  --hst-6: 22px;
  --hst-7: 28px;
  --hst-8: 36px;

  /* Shadows (softer, more diffuse, lower-opacity — modern depth) */
  --hst-shadow-sm:
    0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 1px rgba(16, 24, 40, 0.03);
  --hst-shadow-1:
    0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 2px rgba(16, 24, 40, 0.03);
  --hst-shadow-2:
    0 2px 4px -1px rgba(16, 24, 40, 0.05), 0 10px 24px -8px rgba(16, 24, 40, 0.09);
  --hst-shadow-3:
    0 10px 22px -8px rgba(16, 24, 40, 0.12),
    0 28px 60px -18px rgba(16, 24, 40, 0.18);

  /* Type */
  --hst-font: "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;
  --hst-fs-xs: 12px;
  --hst-fs-sm: 13px;
  --hst-fs: 14px;
  --hst-fs-md: 15.5px;
  --hst-fs-lg: 18px;
  --hst-fs-xl: 23px;

  /* Motion tokens */
  --hst-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hst-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --hst-ease-emph: cubic-bezier(0.2, 0.8, 0.2, 1);
  --hst-dur-fast: 150ms;
  --hst-dur: 220ms;
  --hst-dur-slow: 340ms;
  --hst-trans: var(--hst-dur) var(--hst-ease);

  /* Aliases added in redesign (safety for tokens referenced but never defined
     in the original file — keeps every var() resolvable). */
  --hst-text: var(--hst-ink);
  --hst-accent-2: var(--hst-accent-hover);
}

/* ---- 1.1. Color themes -----------------------------------------------
   These themes override the design tokens on the app shell, so every page,
   form, table, modal, card, header, login screen and landing section follows
   one coherent palette.
   ---------------------------------------------------------------------- */
:where(
  .hst-shell,
  .hst-jdp-modal,
  .hst-schedule-global-modal
)[data-hst-theme="blue"],
body.hst-theme-blue {
  --hst-accent: #2563eb;
  --hst-accent-rgb: 37, 99, 235;
  --hst-accent-hover: #1d4ed8;
  --hst-accent-press: #1e3a8a;
  --hst-accent-soft: #d8e6fd;
  --hst-accent-softer: #f0f5ff;
  --hst-bg: #eef3fb;
  --hst-surface: #ffffff;
  --hst-surface-2: #f5f8fd;
  --hst-surface-3: #e7eef8;
  --hst-ink: #16213a;
  --hst-ink-2: #42526d;
  --hst-muted: #6e7e98;
  --hst-faint: #9aa8ba;
  --hst-border: #e3eaf6;
  --hst-border-strong: #ccd8ec;
  --hst-ring: rgba(var(--hst-accent-rgb), 0.32);
}

:where(
  .hst-shell,
  .hst-jdp-modal,
  .hst-schedule-global-modal
)[data-hst-theme="violet"],
body.hst-theme-violet {
  --hst-accent: #7c3aed;
  --hst-accent-rgb: 124, 58, 237;
  --hst-accent-hover: #6d28d9;
  --hst-accent-press: #5b21b6;
  --hst-accent-soft: #e9e3fc;
  --hst-accent-softer: #f6f3ff;
  --hst-bg: #f3f0fa;
  --hst-surface: #ffffff;
  --hst-surface-2: #f9f7fe;
  --hst-surface-3: #ece6f8;
  --hst-ink: #221a35;
  --hst-ink-2: #514567;
  --hst-muted: #786d8b;
  --hst-faint: #a79db7;
  --hst-border: #e7e1f3;
  --hst-border-strong: #d3c8e9;
  --hst-ring: rgba(var(--hst-accent-rgb), 0.32);
}

:where(
  .hst-shell,
  .hst-jdp-modal,
  .hst-schedule-global-modal
)[data-hst-theme="rose"],
body.hst-theme-rose {
  --hst-accent: #e11d48;
  --hst-accent-rgb: 225, 29, 72;
  --hst-accent-hover: #be123c;
  --hst-accent-press: #9f1239;
  --hst-accent-soft: #fcdde4;
  --hst-accent-softer: #fff4f7;
  --hst-bg: #f8eef1;
  --hst-surface: #ffffff;
  --hst-surface-2: #fff8fa;
  --hst-surface-3: #f5e7ec;
  --hst-ink: #34202a;
  --hst-ink-2: #674653;
  --hst-muted: #8c7480;
  --hst-faint: #b49daa;
  --hst-border: #f0dee4;
  --hst-border-strong: #e1c4ce;
  --hst-ring: rgba(var(--hst-accent-rgb), 0.32);
}

:where(
  .hst-shell,
  .hst-jdp-modal,
  .hst-schedule-global-modal
)[data-hst-theme="slate"],
body.hst-theme-slate {
  --hst-accent: #334155;
  --hst-accent-rgb: 51, 65, 85;
  --hst-accent-hover: #1f2937;
  --hst-accent-press: #111827;
  --hst-accent-soft: #dde4ec;
  --hst-accent-softer: #f4f7fa;
  --hst-bg: #edf1f5;
  --hst-surface: #ffffff;
  --hst-surface-2: #f6f9fc;
  --hst-surface-3: #eaf0f5;
  --hst-ink: #111827;
  --hst-ink-2: #374151;
  --hst-muted: #6b7280;
  --hst-faint: #9ca3af;
  --hst-border: #e6ecf2;
  --hst-border-strong: #d0d9e2;
  --hst-ring: rgba(var(--hst-accent-rgb), 0.32);
}

:where(
  .hst-shell,
  .hst-jdp-modal,
  .hst-schedule-global-modal
)[data-hst-theme="teal"],
body.hst-theme-teal {
  /* Explicit current/default theme; keeps backward compatibility and makes
     the selected theme visible in markup/debugging. */
  --hst-accent: #0d9488;
  --hst-accent-rgb: 13, 148, 136;
  --hst-accent-hover: #0f766e;
  --hst-accent-press: #0c5650;
  --hst-accent-soft: #d2f3ec;
  --hst-accent-softer: #f0faf7;
  --hst-ring: rgba(var(--hst-accent-rgb), 0.32);
}

/* ---- 2. Scope reset (only inside the app shell) ------------------------ */
.hst-shell,
.hst-shell *,
.hst-shell *::before,
.hst-shell *::after {
  box-sizing: border-box;
}

.hst-shell {
  font-family: var(--hst-font);
  font-size: var(--hst-fs);
  line-height: 1.6;
  color: var(--hst-ink);
  background: var(--hst-bg);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
  scroll-behavior: smooth;
}

html:has(.hst-landing) {
  scroll-padding-top: 90px;
}

.hst-shell h1,
.hst-shell h2,
.hst-shell h3,
.hst-shell h4,
.hst-shell p,
.hst-shell figure {
  margin: 0;
}
/* Pin heading sizes so a host theme's large h1/h2/h3 styles can't bleed in */
.hst-shell h1 {
  font-size: var(--hst-fs-xl);
  font-weight: 800;
  line-height: 1.25;
}
.hst-shell h2 {
  font-size: var(--hst-fs-lg);
  font-weight: 700;
  line-height: 1.3;
}
.hst-shell h3 {
  font-size: var(--hst-fs-md);
  font-weight: 700;
  line-height: 1.35;
}
.hst-shell h4 {
  font-size: var(--hst-fs);
  font-weight: 700;
  line-height: 1.4;
}
.hst-shell img {
  max-width: 100%;
  display: block;
}
.hst-shell a {
  color: inherit;
  text-decoration: none;
}
.hst-shell :focus-visible {
  outline: 3px solid var(--hst-ring);
  outline-offset: 2px;
  border-radius: var(--hst-r-xs);
}

/* ---- 3. Layout --------------------------------------------------------- */
.hst-shell {
  padding: var(--hst-5) var(--hst-4) var(--hst-8);
  display: flex;
  flex-direction: column;
  gap: var(--hst-5);
}

/* Inline SVG icons */
.hst-shell .ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hst-page {
  display: flex;
  flex-direction: column;
  gap: var(--hst-5);
}
.hst-stack {
  display: flex;
  flex-direction: column;
  gap: var(--hst-4);
}

.hst-grid {
  display: grid;
  gap: var(--hst-4);
}
.hst-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hst-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---- 4. Card ----------------------------------------------------------- */
.hst-card {
  background: var(--hst-surface);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-lg);
  box-shadow: var(--hst-shadow-1);
  overflow: clip;
}
.hst-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hst-4);
  padding: var(--hst-4) var(--hst-5);
  border-bottom: 1px solid var(--hst-border);
  background: var(--hst-surface);
}
.hst-card__header h3 {
  font-size: var(--hst-fs-lg);
  font-weight: 700;
}
.hst-card__header p {
  font-size: var(--hst-fs-sm);
  color: var(--hst-muted);
}
.hst-card__body {
  padding: var(--hst-5);
  display: flex;
  flex-direction: column;
  gap: var(--hst-4);
}
.hst-card__footer {
  padding: var(--hst-4) var(--hst-5);
  border-top: 1px solid var(--hst-border);
  display: flex;
  gap: var(--hst-4);
  justify-content: flex-start;
}

/* ---- 5. Buttons -------------------------------------------------------- */
.hst-btn {
  --_bg: var(--hst-accent);
  --_bg-hover: var(--hst-accent-hover);
  --_fg: var(--hst-on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hst-2);
  font: inherit;
  font-weight: 600;
  font-size: var(--hst-fs-sm);
  line-height: 1;
  padding: 10px 16px;
  min-height: 40px;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid transparent;
  border-radius: var(--hst-r-xs);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
  transition:
    background var(--hst-trans),
    transform var(--hst-trans),
    box-shadow var(--hst-trans);
}
.hst-btn:hover {
  background: var(--_bg-hover);
  box-shadow: 0 4px 12px -3px rgba(16, 24, 40, 0.18);
}
.hst-btn:active {
  transform: translateY(1px);
}
.hst-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hst-btn--danger {
  --_bg: var(--hst-danger);
  --_bg-hover: var(--hst-danger-hover);
}
.hst-btn--ghost {
  --_fg: var(--hst-ink-2);
  background: var(--hst-surface);
  border-color: var(--hst-border-strong);
}
.hst-btn--ghost:hover {
  background: var(--hst-surface-2);
}
.hst-btn--soft {
  --_fg: var(--hst-accent-press);
  background: var(--hst-accent-soft);
}
.hst-btn--soft:hover {
  background: color-mix(
    in srgb,
    var(--hst-accent-soft) 70%,
    var(--hst-accent) 30%
  );
}
.hst-btn--sm {
  min-height: 34px;
  padding: 7px 13px;
  font-size: var(--hst-fs-xs);
}
.hst-btn--block {
  width: 100%;
}

.hst-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hst-2);
}

/* ---- 6. Forms ---------------------------------------------------------- */
.hst-form {
  display: flex;
  flex-direction: column;
  gap: var(--hst-4);
}
.hst-form__row {
  display: grid;
  gap: var(--hst-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hst-field {
  display: flex;
  flex-direction: column;
  gap: var(--hst-2);
}
.hst-field > span,
.hst-field > label {
  font-size: var(--hst-fs-sm);
  font-weight: 600;
  color: var(--hst-ink-2);
}

.hst-shell input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.hst-shell select,
.hst-shell textarea {
  font: inherit;
  font-size: var(--hst-fs);
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
  color: var(--hst-ink);
  background: var(--hst-surface);
  border: 1px solid var(--hst-border-strong);
  border-radius: var(--hst-r-xs);
  transition:
    border-color var(--hst-trans),
    box-shadow var(--hst-trans);
}
.hst-shell textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.7;
}
.hst-shell select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2374828f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: left 12px center;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  padding-left: 38px;
}
.hst-shell input:focus,
.hst-shell select:focus,
.hst-shell textarea:focus {
  outline: none;
  border-color: var(--hst-accent);
  box-shadow: 0 0 0 3px var(--hst-ring);
}

/* Theme-aware focus ring: override WordPress/browser hardcoded focus colors. */
.hst-shell
  :is(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .hst-field
  ):focus,
.hst-shell
  :is(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .hst-field
  ):focus-visible,
.wp-admin
  .hst-shell
  :is(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ):focus {
  outline: none !important;
  border-color: var(--hst-accent) !important;
  box-shadow: 0 0 0 3px var(--hst-ring) !important;
}
.hst-shell input[type="checkbox"]:focus-visible,
.hst-shell input[type="radio"]:focus-visible {
  outline: 3px solid var(--hst-ring) !important;
  outline-offset: 2px;
}
.hst-shell input::placeholder,
.hst-shell textarea::placeholder {
  color: var(--hst-faint);
}
.hst-shell input:disabled,
.hst-shell select:disabled {
  background: var(--hst-surface-3);
  color: var(--hst-muted);
  cursor: not-allowed;
}

.hst-form__section {
  font-size: var(--hst-fs-sm);
  font-weight: 700;
  color: var(--hst-ink-2);
  display: flex;
  align-items: center;
  gap: var(--hst-4);
  margin-top: var(--hst-1);
}
.hst-form__section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hst-border);
}

/* Choice list (radios / checkboxes as chips) */
.hst-choice-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hst-2);
}
.hst-choice-list[hidden] {
  display: none;
}
.hst-choice-list label {
  display: inline-flex;
  align-items: center;
  gap: var(--hst-2);
  padding: 8px 14px;
  border: 1px solid var(--hst-border-strong);
  border-radius: var(--hst-r-pill);
  background: var(--hst-surface);
  cursor: pointer;
  font-size: var(--hst-fs-sm);
  transition: all var(--hst-trans);
}
.hst-choice-list label:hover {
  border-color: var(--hst-accent);
  background: var(--hst-accent-softer);
}
.hst-choice-list input {
  accent-color: var(--hst-accent);
  width: 16px;
  height: 16px;
}
.hst-choice-list label p {
  margin: 0;
}
.hst-choice-list label:has(input:checked) {
  border-color: var(--hst-accent);
  background: var(--hst-accent-soft);
  color: var(--hst-accent-press);
  font-weight: 600;
}

/* ---- 7. Alerts / notices ---------------------------------------------- */
.hst-alert {
  font-size: var(--hst-fs-sm);
  color: var(--hst-ink-2);
  background: var(--hst-surface-2);
  border: 1px solid var(--hst-border);
  border-inline-start: 3px solid var(--hst-border-strong);
  border-radius: var(--hst-r-xs);
  padding: 12px 14px!important;
}
.hst-alert--info {
  background: var(--hst-info-soft);
  border-inline-start-color: var(--hst-info);
}
.hst-alert--success {
  background: var(--hst-success-soft);
  border-inline-start-color: var(--hst-success);
}
.hst-alert--warning {
  background: var(--hst-warning-soft);
  border-inline-start-color: var(--hst-warning);
}
.hst-alert--danger {
  background: var(--hst-danger-soft);
  border-inline-start-color: var(--hst-danger);
}

/* ---- 8. Tables --------------------------------------------------------- */
.hst-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r);
  background: var(--hst-surface);
}
.hst-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--hst-fs);
  text-align: right;
}
.hst-table thead th {
  position: sticky;
  top: 0;
  background: var(--hst-surface-2);
  color: var(--hst-muted);
  font-size: var(--hst-fs-sm);
  font-weight: 700;
  padding: 11px 16px;
  border-bottom: 1px solid var(--hst-border-strong);
  white-space: nowrap;
}
.hst-table tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--hst-surface-3);
  vertical-align: middle;
}
.hst-table tbody tr:last-child td {
  border-bottom: 0;
}
.hst-table tbody tr {
  transition: background var(--hst-trans);
}
.hst-table tbody tr:hover {
  background: var(--hst-accent-softer);
}
.hst-table td.hst-actions {
  white-space: nowrap;
}

/* ---- 9. Chips & compact lists ----------------------------------------- */
.hst-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  font-size: var(--hst-fs-xs);
  font-weight: 600;
  color: var(--hst-accent-press);
  background: var(--hst-accent-soft);
  border-radius: var(--hst-r-pill);
}
.hst-chip--light {
  color: var(--hst-ink-2);
  background: var(--hst-surface-3);
  font-weight: 500;
}
.hst-chip--danger {
  color: var(--hst-danger);
  background: var(--hst-danger-soft);
}
.hst-chip--success {
  color: var(--hst-success);
  background: var(--hst-success-soft);
}

.hst-compact-list {
  display: flex;
  flex-direction: column;
  gap: var(--hst-2);
  align-items: flex-start;
}
.hst-compact-list__preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hst-compact-more summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--hst-fs-xs);
  font-weight: 600;
  color: var(--hst-accent);
}
.hst-compact-more summary::-webkit-details-marker {
  display: none;
}
.hst-compact-more__panel {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.hst-muted {
  color: var(--hst-muted);
}

/* ---- 10. Header -------------------------------------------------------- */
.hst-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hst-4);
  padding: var(--hst-4) var(--hst-5);
  background: var(--hst-surface);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-xl);
  box-shadow: var(--hst-shadow-1);
}
.hst-header__user {
  display: flex;
  align-items: center;
  gap: var(--hst-4);
  min-width: 0;
}
.hst-avatar {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: var(--hst-r-pill);
  border: 2px solid var(--hst-accent-soft);
  background: var(--hst-surface-2);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  flex: none;
}
.hst-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hst-avatar span {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: color-mix(in srgb, var(--hst-accent) 82%, transparent);
  padding: 1px 0;
  text-align: center;
  opacity: 0;
  transition: opacity var(--hst-trans);
}
.hst-avatar:hover span {
  opacity: 1;
}
.hst-header__name {
  font-size: var(--hst-fs-md);
  font-weight: 700;
  line-height: 1.3;
}
.hst-header__role {
  font-size: var(--hst-fs-xs);
  color: var(--hst-muted);
}

.hst-header__nav {
  display: flex;
  align-items: center;
  gap: var(--hst-4);
}
.hst-header__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--hst-fs-sm);
  font-weight: 600;
  color: var(--hst-ink-2);
  padding: 8px 12px;
  border-radius: var(--hst-r-xs);
  transition:
    background var(--hst-trans),
    color var(--hst-trans);
}
.hst-header__link:hover {
  background: var(--hst-accent-softer);
  color: var(--hst-accent-press);
}
.hst-header__link-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
}
.hst-header__link-icon svg {
  width: 18px;
  height: 18px;
}
.hst-header__divider {
  width: 1px;
  height: 22px;
  background: var(--hst-border);
}

.hst-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--hst-2);
  padding: 8px 12px;
  background: var(--hst-surface-2);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-pill);
  font: inherit;
  font-size: var(--hst-fs-sm);
  font-weight: 600;
  color: var(--hst-ink-2);
  cursor: pointer;
  transition: all var(--hst-trans);
}
.hst-bell:hover {
  border-color: var(--hst-accent);
  color: var(--hst-accent-press);
}
.hst-bell__icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}
.hst-bell__icon img,
.hst-bell__icon svg {
  width: 18px;
  height: 18px;
}
.hst-bell__count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--hst-danger);
  border-radius: var(--hst-r-pill);
}
.hst-bell__count[hidden] {
  display: none;
}

/* ---- 11. Dashboard tiles ---------------------------------------------- */
.hst-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--hst-4);
}
.hst-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hst-3);
  padding: var(--hst-5) var(--hst-4);
  text-align: center;
  background: var(--hst-surface);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-lg);
  box-shadow: var(--hst-shadow-1);
  color: var(--hst-ink);
  position: relative;
  isolation: isolate;
  transition:
    transform var(--hst-trans),
    box-shadow var(--hst-trans),
    border-color var(--hst-trans);
}
.hst-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    var(--hst-accent-softer),
    transparent 62%
  );
  opacity: 0;
  transition: opacity var(--hst-trans);
}
.hst-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--hst-shadow-2);
  border-color: var(--hst-accent-soft);
}
.hst-tile:hover::before {
  opacity: 1;
}
.hst-tile__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--hst-r);
  background: var(--hst-accent-soft);
  transition: background var(--hst-trans);
}
.hst-tile:hover .hst-tile__icon {
  background: color-mix(
    in srgb,
    var(--hst-accent-soft) 60%,
    var(--hst-accent) 40%
  );
}
.hst-tile__icon img,
.hst-tile__icon svg {
  width: 27px;
  height: 27px;
}
.hst-tile__icon .ico {
  color: var(--hst-accent-press);
}
.hst-tile span {
  font-size: var(--hst-fs-md);
  font-weight: 700;
}

/* ---- 12. Filters bar --------------------------------------------------- */
.hst-filters {
  display: grid;
  grid-template-columns: 1.6fr repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--hst-4);
  align-items: end;
  padding: var(--hst-4);
  background: var(--hst-surface-2);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r);
  margin-bottom: var(--hst-4);
}
.hst-filters__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hst-filters__field label {
  font-size: var(--hst-fs-xs);
  font-weight: 700;
  color: var(--hst-muted);
}
.hst-filters__actions {
  display: flex;
  align-items: center;
  gap: var(--hst-4);
  grid-column: 1 / -1;
}
.hst-filters__count {
  font-size: var(--hst-fs-xs);
  color: var(--hst-muted);
}

/* ---- 13. Modal / dialog ------------------------------------------------ */
.hst-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  padding: var(--hst-4);
  background: rgba(15, 28, 36, 0.5);
  backdrop-filter: blur(3px);
}
.hst-modal.is-open,
.hst-modal[data-open] {
  display: grid;
}
.hst-modal__panel {
  width: min(560px, 100%);
  max-height: 90vh;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--hst-surface);
  border-radius: var(--hst-r-lg);
  box-shadow: var(--hst-shadow-3);
  overflow: clip;
  animation: hst-modal-enter var(--hst-dur-slow, 360ms)
    var(--hst-ease-soft, ease);
}
@keyframes hst-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
.hst-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hst-4);
  padding: var(--hst-4) var(--hst-5);
  border-bottom: 1px solid var(--hst-border);
}
.hst-modal__header h3 {
  font-size: var(--hst-fs-lg);
  font-weight: 700;
}
.hst-modal__header p {
  font-size: var(--hst-fs-sm);
  color: var(--hst-muted);
  margin-top: 2px;
}
.hst-modal__body {
  padding: var(--hst-5);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--hst-4);
}
.hst-modal__footer {
  display: flex;
  gap: var(--hst-4);
  justify-content: flex-start;
  padding: var(--hst-4) var(--hst-5);
  border-top: 1px solid var(--hst-border);
  background: var(--hst-surface-2);
}
.hst-modal__close {
  font: inherit;
  font-size: 24px;
  line-height: 1;
  color: var(--hst-muted);
  background: none;
  border: 0;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: var(--hst-r-xs);
  flex: none;
  transition:
    background var(--hst-trans),
    color var(--hst-trans);
}
.hst-modal__close:hover {
  background: var(--hst-surface-3);
  color: var(--hst-ink);
}

/* Notification list inside modal */
.hst-note-list {
  display: flex;
  flex-direction: column;
  gap: var(--hst-2);
}
.hst-note {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hst-4);
  padding: var(--hst-4) var(--hst-4);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r);
  background: var(--hst-surface);
}
.hst-note.is-unread {
  border-inline-start: 3px solid var(--hst-accent);
  background: var(--hst-accent-softer);
}
.hst-note__title {
  display: flex;
  align-items: center;
  gap: var(--hst-2);
}
.hst-note__title strong {
  font-size: var(--hst-fs);
}
.hst-note__title span {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--hst-r-pill);
  background: var(--hst-surface-3);
  color: var(--hst-muted);
}
.hst-note.is-unread .hst-note__title span {
  background: var(--hst-accent-soft);
  color: var(--hst-accent-press);
}
.hst-note p {
  font-size: var(--hst-fs-sm);
  color: var(--hst-muted);
  margin-top: 4px;
}
.hst-note__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  flex: none;
}
.hst-note__actions a,
.hst-note__actions button {
  font: inherit;
  font-size: var(--hst-fs-xs);
  font-weight: 600;
  color: var(--hst-accent);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 2px 4px;
}

/* ---- 14. Toast, loader, utilities ------------------------------------- */
.hst-loader {
  display: grid;
  place-items: center;
  padding: var(--hst-7);
}
.hst-loader img {
  width: 48px;
  height: 48px;
  animation: hst-spin 1s linear infinite;
}
@keyframes hst-spin {
  to {
    transform: rotate(360deg);
  }
}

.hst-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;
}

/* ===== components ===== */
/* ==========================================================================
   HST UI — page components supplement
   Load AFTER hst-ui.css. Covers toolbars, stats, status badges, schedule
   grid, seat labels, assignments, notices, profile, admin, etc.
   All selectors are scoped under .hst-shell and kept flat (one class deep).
   ========================================================================== */

/* ---- Toolbar (filter/action row above tables) -------------------------- */
.hst-shell .hst-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--hst-4);
  align-items: end;
  padding: var(--hst-4);
  background: var(--hst-surface-2);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r);
  margin-bottom: var(--hst-4);
}
.hst-shell .hst-toolbar__action {
  display: flex;
  align-items: end;
  gap: var(--hst-2);
  flex-wrap: wrap;
}
.hst-shell .hst-toolbar__action.hst-btn-group {
  grid-column: 1 / -1;
}
.hst-shell .hst-schedule-page .hst-toolbar__action {
  grid-column: 1 / -1;
}
.hst-shell .hst-toolbar__grow {
  grid-column: 1 / -1;
}

/* ---- Stat row ---------------------------------------------------------- */
.hst-shell .hst-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--hst-4);
  margin-bottom: var(--hst-4);
}
.hst-shell .hst-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--hst-4) var(--hst-4);
  background: var(--hst-surface-2);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r);
}
.hst-shell .hst-stat span {
  font-size: var(--hst-fs-xs);
  color: var(--hst-muted);
}
.hst-shell .hst-stat strong {
  font-size: var(--hst-fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---- Status badge ------------------------------------------------------ */
.hst-shell .hst-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  font-size: var(--hst-fs-xs);
  font-weight: 700;
  border-radius: var(--hst-r-pill);
  background: var(--hst-surface-3);
  color: var(--hst-ink-2);
  white-space: nowrap;
}
.hst-shell .hst-status--success,
.hst-shell .hst-status--complete,
.hst-shell .hst-status--published,
.hst-shell .hst-status--done,
.hst-shell .hst-status--reviewed,
.hst-shell .hst-status--submitted {
  background: var(--hst-success-soft);
  color: var(--hst-success);
}
.hst-shell .hst-status--warning,
.hst-shell .hst-status--partial,
.hst-shell .hst-status--pending,
.hst-shell .hst-status--scheduled {
  background: var(--hst-warning-soft);
  color: var(--hst-warning);
}
.hst-shell .hst-status--danger,
.hst-shell .hst-status--missing,
.hst-shell .hst-status--closed,
.hst-shell .hst-status--cancelled,
.hst-shell .hst-status--needs_revision {
  background: var(--hst-danger-soft);
  color: var(--hst-danger);
}
.hst-shell .hst-status--muted,
.hst-shell .hst-status--no_students,
.hst-shell .hst-status--draft {
  background: var(--hst-surface-3);
  color: var(--hst-muted);
}

/* ---- Progress bar (score audit) --------------------------------------- */
.hst-shell .hst-progress {
  display: inline-block;
  vertical-align: middle;
  width: 84px;
  height: 8px;
  border-radius: var(--hst-r-pill);
  background: var(--hst-surface-3);
  overflow: hidden;
}
.hst-shell .hst-progress__bar {
  display: block;
  height: 100%;
  background: var(--hst-accent);
  border-radius: inherit;
}
.hst-shell .hst-progress[data-status="complete"] .hst-progress__bar {
  background: var(--hst-success);
}
.hst-shell .hst-progress[data-status="partial"] .hst-progress__bar {
  background: var(--hst-warning);
}
.hst-shell .hst-progress[data-status="missing"] .hst-progress__bar {
  background: var(--hst-danger);
}

/* ---- Switch (term status toggle) -------------------------------------- */
.hst-shell .hst-switch {
  display: inline-flex;
  cursor: pointer;
}
.hst-shell .hst-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.hst-shell .hst-switch__slider {
  width: 42px;
  height: 24px;
  border-radius: var(--hst-r-pill);
  background: var(--hst-border-strong);
  position: relative;
  transition: background var(--hst-trans);
}
.hst-shell .hst-switch__slider::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  left: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--hst-shadow-1);
  transition: transform var(--hst-trans);
}
.hst-shell .hst-switch input:checked + .hst-switch__slider {
  background: var(--hst-accent);
}
.hst-shell .hst-switch input:checked + .hst-switch__slider::after {
  transform: translateX(-18px);
}
.hst-shell .hst-switch input:focus-visible + .hst-switch__slider {
  outline: 3px solid var(--hst-ring);
  outline-offset: 2px;
}

/* Single-column define form (academic pages, after removing decorative media) */
.hst-shell .hst-define-grid {
  width: 100%;
}

/* ---- Inline check / checkline ----------------------------------------- */
.hst-shell .hst-check,
.hst-shell .hst-checkline {
  display: flex;
  align-items: center;
  gap: var(--hst-2);
  font-size: var(--hst-fs-sm);
  color: var(--hst-ink-2);
  cursor: pointer;
}
.hst-shell .hst-check input,
.hst-shell .hst-checkline input {
  accent-color: var(--hst-accent);
  width: 17px;
  height: 17px;
  flex: none;
}
.hst-shell .hst-checkline--compact {
  font-size: var(--hst-fs-xs);
}

.hst-shell .hst-link {
  color: var(--hst-accent);
  font-weight: 600;
}
.hst-shell .hst-link:hover {
  text-decoration: underline;
}
.hst-shell .hst-kicker {
  font-size: var(--hst-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hst-accent);
}
.hst-shell .hst-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hst-4);
  flex-wrap: wrap;
}
.hst-shell .hst-media {
  margin: 0;
  border-radius: var(--hst-r);
  overflow: clip;
  background: var(--hst-surface-2);
  display: grid;
  place-items: center;
}
.hst-shell .hst-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hst-shell .hst-table-empty {
  text-align: center;
  color: var(--hst-muted);
  padding: var(--hst-6);
}
.hst-shell .hst-warnings:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--hst-2);
}

/* ---- Grid variants ----------------------------------------------------- */
.hst-shell .hst-grid--cards {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* ---- Definition list (profile) ---------------------------------------- */
.hst-shell .hst-deflist {
  display: flex;
  flex-direction: column;
}
.hst-shell .hst-deflist__row {
  display: flex;
  justify-content: space-between;
  gap: var(--hst-4);
  padding: var(--hst-4) 0;
  border-bottom: 1px solid var(--hst-surface-3);
}
.hst-shell .hst-deflist__row:last-child {
  border-bottom: 0;
}
.hst-shell .hst-deflist dt {
  color: var(--hst-muted);
  font-size: var(--hst-fs-sm);
  margin: 0;
}
.hst-shell .hst-deflist dd {
  margin: 0;
  font-weight: 600;
}

/* ---- Profile hero ------------------------------------------------------ */
.hst-shell .hst-profile-hero {
  background: linear-gradient(
    135deg,
    var(--hst-accent-soft),
    var(--hst-surface) 70%
  );
}
.hst-shell .hst-profile-hero__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hst-5);
  flex-wrap: wrap;
}
.hst-shell .hst-profile-hero__name {
  font-size: var(--hst-fs-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.hst-shell .hst-profile-hero__subtitle {
  font-size: var(--hst-fs-sm);
  color: var(--hst-ink-2);
  max-width: 52ch;
  margin-top: 6px;
}

/* ---- Teacher availability grid ---------------------------------------- */
.hst-shell .hst-availability {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--hst-4);
}
.hst-shell .hst-availability__day {
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r);
  overflow: clip;
  background: var(--hst-surface);
}
.hst-shell .hst-availability__name {
  font-size: var(--hst-fs-sm);
  font-weight: 700;
  text-align: center;
  padding: var(--hst-2);
  background: var(--hst-surface-2);
  border-bottom: 1px solid var(--hst-border);
}
.hst-shell .hst-availability__shifts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--hst-4);
}
.hst-shell .hst-availability__shifts label {
  display: flex;
  align-items: center;
  gap: var(--hst-2);
  font-size: var(--hst-fs-xs);
  cursor: pointer;
}
.hst-shell .hst-availability__shifts input {
  accent-color: var(--hst-accent);
}
.hst-shell .hst-availability__shifts p {
  margin: 0;
}

/* ---- Toggle cards (score months) -------------------------------------- */
.hst-shell .hst-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--hst-4);
}
.hst-shell .hst-toggle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--hst-4) var(--hst-4);
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--hst-border-strong);
  border-radius: var(--hst-r);
  background: var(--hst-surface);
  transition: all var(--hst-trans);
}
.hst-shell .hst-toggle-card input {
  accent-color: var(--hst-accent);
}
.hst-shell .hst-toggle-card span {
  font-weight: 700;
}
.hst-shell .hst-toggle-card small {
  font-size: var(--hst-fs-xs);
  color: var(--hst-muted);
}
.hst-shell .hst-toggle-card.is-active {
  border-color: var(--hst-accent);
  background: var(--hst-accent-softer);
}
.hst-shell .hst-toggle-card.is-active small {
  color: var(--hst-accent-press);
}

/* ---- Invoice cards (tuition) ------------------------------------------ */
.hst-shell .hst-invoice {
  display: flex;
  flex-direction: column;
  gap: var(--hst-4);
  padding: var(--hst-5);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-lg);
  background: var(--hst-surface);
  box-shadow: var(--hst-shadow-1);
}
.hst-shell .hst-invoice.is-pending {
  border-inline-start: 3px solid var(--hst-warning);
}
.hst-shell .hst-invoice.is-paid {
  border-inline-start: 3px solid var(--hst-success);
}
.hst-shell .hst-invoice__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hst-2);
}
.hst-shell .hst-invoice__head h3 {
  font-size: var(--hst-fs-md);
  font-weight: 700;
}
.hst-shell .hst-invoice__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--hst-fs-sm);
  color: var(--hst-ink-2);
}

/* ---- Assignment item --------------------------------------------------- */
.hst-shell .hst-assignment {
  display: flex;
  flex-direction: column;
  gap: var(--hst-4);
  padding: var(--hst-5);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-lg);
  background: var(--hst-surface);
}
.hst-shell .hst-assignment__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hst-4);
}
.hst-shell .hst-assignment__head h4 {
  font-size: var(--hst-fs-md);
  font-weight: 700;
}
.hst-shell .hst-assignment__desc {
  font-size: var(--hst-fs-sm);
  color: var(--hst-ink-2);
}
.hst-shell .hst-assignment__desc p {
  margin: 0 0 6px;
}
.hst-shell .hst-assignment__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hst-2) var(--hst-4);
  font-size: var(--hst-fs-sm);
  color: var(--hst-muted);
}
.hst-shell .hst-assignment__feedback {
  font-size: var(--hst-fs-sm);
  padding: var(--hst-4) var(--hst-4);
  background: var(--hst-accent-softer);
  border-radius: var(--hst-r-xs);
  color: var(--hst-ink-2);
}
.hst-shell .hst-assignment__submissions {
  border-top: 1px dashed var(--hst-border);
  padding-top: var(--hst-4);
}
.hst-shell .hst-assignment-review-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hst-2);
}
.hst-shell .hst-assignment-review-form textarea {
  grid-column: 1 / -1;
}

/* ---- Exam cards (student) --------------------------------------------- */
.hst-shell .hst-exam-card {
  display: flex;
  flex-direction: column;
  gap: var(--hst-4);
  padding: var(--hst-5);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-lg);
  background: var(--hst-surface);
  box-shadow: var(--hst-shadow-1);
  border-top: 3px solid var(--hst-accent);
}
.hst-shell .hst-exam-card strong {
  font-size: var(--hst-fs-md);
}
.hst-shell .hst-exam-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hst-2);
}
.hst-shell .hst-exam-card__meta span {
  font-size: var(--hst-fs-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--hst-r-pill);
  background: var(--hst-surface-3);
  color: var(--hst-ink-2);
}
.hst-shell .hst-exam-card__desc {
  font-size: var(--hst-fs-sm);
  color: var(--hst-muted);
}

/* ---- Full notice cards (notifications page) --------------------------- */
.hst-shell .hst-notice-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hst-4);
  padding: var(--hst-4) var(--hst-5);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-lg);
  background: var(--hst-surface);
}
.hst-shell .hst-notice-card.is-unread {
  border-inline-start: 3px solid var(--hst-accent);
  background: var(--hst-accent-softer);
}
.hst-shell .hst-notice-card--success {
  border-inline-start: 3px solid var(--hst-success);
}
.hst-shell .hst-notice-card--warning {
  border-inline-start: 3px solid var(--hst-warning);
}
.hst-shell .hst-notice-card--danger {
  border-inline-start: 3px solid var(--hst-danger);
}
.hst-shell .hst-notice-card__title {
  display: flex;
  align-items: center;
  gap: var(--hst-2);
}
.hst-shell .hst-notice-card__title h4 {
  font-size: var(--hst-fs-md);
  font-weight: 700;
}
.hst-shell .hst-notice-card__message {
  font-size: var(--hst-fs-sm);
  color: var(--hst-ink-2);
  margin: 6px 0;
}
.hst-shell .hst-notice-card__message p {
  margin: 0 0 6px;
}
.hst-shell .hst-notice-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hst-2) var(--hst-4);
  font-size: var(--hst-fs-xs);
  color: var(--hst-muted);
}
.hst-shell .hst-notice-card__actions {
  flex: none;
}

/* ---- User picker (notifications) -------------------------------------- */
.hst-shell .hst-user-picker {
  display: flex;
  flex-direction: column;
  gap: var(--hst-4);
  padding: var(--hst-4);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r);
  background: var(--hst-surface-2);
}
.hst-shell .hst-user-picker-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hst-shell .hst-user-picker-results {
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-xs);
  background: var(--hst-surface);
  max-height: 220px;
  overflow-y: auto;
}

/* ---- Legend ------------------------------------------------------------ */
.hst-shell .hst-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hst-4);
  margin-top: var(--hst-4);
}
.hst-shell .hst-legend__dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--hst-fs-xs);
  color: var(--hst-ink-2);
}
.hst-shell .hst-legend__dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hst-border-strong);
}
.hst-shell .hst-attendance-status-present::before {
  background: var(--hst-success);
}
.hst-shell .hst-attendance-status-absent::before {
  background: var(--hst-danger);
}
.hst-shell .hst-attendance-status-late::before {
  background: var(--hst-warning);
}
.hst-shell .hst-attendance-status-excused::before {
  background: var(--hst-info);
}

/* ---- Avatar cropper ---------------------------------------------------- */
.hst-shell .hst-avatar-cropper {
  display: flex;
  flex-direction: column;
  gap: var(--hst-4);
  align-items: center;
}
.hst-shell .hst-avatar-cropper__preview {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--hst-surface-3);
}
.hst-shell .hst-avatar-cropper__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- User avatar cell (people lists/tables) ---------------------------- */
/* Theme-aware: the placeholder uses accent tokens, so it follows the active
   colour theme rather than a fixed colour. */
.hst-shell .hst-user-avatar {
  --hst-avatar-size: 32px;
  display: inline-grid;
  place-items: center;
  width: var(--hst-avatar-size);
  height: var(--hst-avatar-size);
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--hst-surface-2);
  vertical-align: middle;
}
.hst-shell .hst-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hst-shell .hst-user-avatar--placeholder {
  background: var(--hst-accent-soft);
  color: var(--hst-accent);
}
.hst-shell .hst-user-avatar--placeholder svg {
  width: 62%;
  height: 62%;
}
/* Avatar + name pairing inside one cell. */
.hst-shell .hst-user-id {
  display: inline-flex;
  align-items: center;
  gap: var(--hst-3);
  min-width: 0;
}
.hst-shell .hst-user-id__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- "My teachers" cards (student gets to know their teachers) --------- */
.hst-shell .hst-teacher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--hst-4);
}
.hst-shell .hst-teacher-card {
  display: flex;
  flex-direction: column;
  gap: var(--hst-3);
  padding: var(--hst-5);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-lg);
  background: var(--hst-surface);
  box-shadow: var(--hst-shadow-1);
}
.hst-shell .hst-teacher-card__head {
  display: flex;
  align-items: center;
  gap: var(--hst-3);
}
.hst-shell .hst-teacher-card__id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hst-shell .hst-teacher-card__name {
  font-weight: 800;
  color: var(--hst-ink);
  font-size: var(--hst-fs-md);
}
.hst-shell .hst-teacher-card__lessons {
  font-size: var(--hst-fs-sm);
  color: var(--hst-accent);
  font-weight: 600;
}
.hst-shell .hst-teacher-card__bio {
  margin: 0;
  color: var(--hst-ink-2);
  font-size: var(--hst-fs-sm);
  line-height: 1.8;
}
.hst-shell .hst-teacher-card__bio--empty {
  color: var(--hst-faint);
  font-style: italic;
}

/* ==========================================================================
   Dashboard overview (KPI stats + glance widgets above the navigation tiles)
   Shown on the role dashboards to make better use of wide screens.
   ========================================================================== */
.hst-shell .hst-dash-overview {
  display: flex;
  flex-direction: column;
  gap: var(--hst-5);
  margin-bottom: var(--hst-6);
}

/* ---- KPI stat cards ---------------------------------------------------- */
.hst-shell .hst-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--hst-4);
}
.hst-shell .hst-stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--hst-4);
  padding: var(--hst-4) var(--hst-5);
  background: var(--hst-surface);
  border: 1px solid var(--hst-border);
  border-inline-start: 4px solid var(--hst-stat-color, var(--hst-accent));
  border-radius: var(--hst-r-lg);
  box-shadow: var(--hst-shadow-1);
  transition: transform var(--hst-dur-fast, 0.18s) var(--hst-ease, ease),
    box-shadow var(--hst-dur-fast, 0.18s) var(--hst-ease, ease);
}
.hst-shell .hst-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--hst-shadow-2);
}
.hst-shell .hst-stat-card__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--hst-r);
  background: var(--hst-stat-soft, var(--hst-accent-soft));
  color: var(--hst-stat-color, var(--hst-accent));
}
.hst-shell .hst-stat-card__icon .ico,
.hst-shell .hst-stat-card__icon svg {
  width: 22px;
  height: 22px;
}
.hst-shell .hst-stat-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hst-shell .hst-stat-card__value {
  font-size: var(--hst-fs-xl);
  font-weight: 800;
  color: var(--hst-ink);
  line-height: 1.25;
  white-space: nowrap;
}
.hst-shell .hst-stat-card__value--text {
  font-size: var(--hst-fs-md);
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  line-height: 1.4;
}
.hst-shell .hst-stat-card__label {
  font-size: var(--hst-fs-sm);
  color: var(--hst-muted);
  white-space: nowrap;
}

/* Tone palette — drives the accent bar + icon chip via local vars. */
.hst-shell .hst-stat-card--accent  { --hst-stat-color: var(--hst-accent);  --hst-stat-soft: var(--hst-accent-soft); }
.hst-shell .hst-stat-card--info    { --hst-stat-color: var(--hst-info);    --hst-stat-soft: var(--hst-info-soft); }
.hst-shell .hst-stat-card--success { --hst-stat-color: var(--hst-success); --hst-stat-soft: var(--hst-success-soft); }
.hst-shell .hst-stat-card--danger  { --hst-stat-color: var(--hst-danger);  --hst-stat-soft: var(--hst-danger-soft); }
.hst-shell .hst-stat-card--muted   { --hst-stat-color: var(--hst-border-strong, var(--hst-muted)); --hst-stat-soft: var(--hst-surface-2); }
.hst-shell .hst-stat-card--muted .hst-stat-card__icon { color: var(--hst-muted); }
/* The danger tone gets a tinted background to draw attention when > 0.
   A solid rgba fallback is declared first for browsers without color-mix()
   support (notably older iOS Safari), then color-mix() refines it where
   available. */
.hst-shell .hst-stat-card--danger {
  background: rgba(239, 68, 68, 0.12);
  background: color-mix(in srgb, var(--hst-danger-soft) 60%, var(--hst-surface));
}
.hst-shell .hst-stat-card--danger .hst-stat-card__value {
  color: var(--hst-danger);
}

/* Clickable stat cards link to their management page. */
.hst-shell a.hst-stat-card--link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.hst-shell a.hst-stat-card--link:hover {
  border-color: var(--hst-stat-color, var(--hst-accent));
}
.hst-shell a.hst-stat-card--link:focus-visible {
  outline: 2px solid var(--hst-stat-color, var(--hst-accent));
  outline-offset: 2px;
}

/* ---- Glance widgets (notifications / exams) ---------------------------- */
.hst-shell .hst-dash-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--hst-4);
}
.hst-shell .hst-dash-widget {
  margin: 0;
}
.hst-shell .hst-dash-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hst-shell .hst-dash-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hst-3);
  padding: var(--hst-3) 0;
  border-bottom: 1px solid var(--hst-border);
}
.hst-shell .hst-dash-list__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.hst-shell .hst-dash-list__item:first-child {
  padding-top: 0;
}
.hst-shell .hst-dash-list__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 600;
  color: var(--hst-ink);
  min-width: 0;
  flex: 1 1 auto;
}
.hst-shell .hst-dash-list__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hst-shell .hst-dash-list__title small {
  font-weight: 400;
  font-size: var(--hst-fs-xs);
  color: var(--hst-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hst-shell .hst-dash-list__meta {
  display: flex;
  align-items: center;
  gap: var(--hst-2);
  flex-shrink: 0;
}
.hst-shell .hst-dash-list__date {
  font-size: var(--hst-fs-xs);
  color: var(--hst-muted);
  white-space: nowrap;
}
.hst-shell .hst-empty-note {
  color: var(--hst-muted);
  font-size: var(--hst-fs-sm);
  padding: var(--hst-2) 0;
}

/* ---- Avatar review (manager dashboard) --------------------------------- */
.hst-shell .hst-avatar-review {
  margin-bottom: var(--hst-6);
}
.hst-shell .hst-avatar-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  gap: var(--hst-4);
}
.hst-shell .hst-avatar-review-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hst-2);
  margin: 0;
  padding: var(--hst-4);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-lg);
  background: var(--hst-surface);
  box-shadow: var(--hst-shadow-1);
  transition: opacity var(--hst-dur-fast, 0.18s) var(--hst-ease, ease);
}
.hst-shell .hst-avatar-review-card.is-working {
  opacity: 0.6;
}
.hst-shell .hst-avatar-review-img {
  width: 96px;
  height: 96px;
  border-radius: var(--hst-r);
  overflow: hidden;
  background: var(--hst-surface-2);
  border: 1px solid var(--hst-border);
}
.hst-shell .hst-avatar-review-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hst-shell .hst-avatar-review-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  min-width: 0;
  max-width: 100%;
}
.hst-shell .hst-avatar-review-name {
  font-weight: 700;
  color: var(--hst-ink);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hst-shell .hst-avatar-review-role {
  font-size: var(--hst-fs-xs);
  color: var(--hst-muted);
}
.hst-shell .hst-avatar-review-actions {
  display: flex;
  gap: var(--hst-2);
  width: 100%;
  margin-top: var(--hst-1);
}
.hst-shell .hst-avatar-review-actions .hst-btn {
  flex: 1 1 0;
}

/* ---- Header avatar "pending approval" badge ---------------------------- */
.hst-shell .hst-avatar--pending {
  position: relative;
}
.hst-shell .hst-avatar__pending-badge {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  background: var(--hst-warning, #f59e0b);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  padding: 2px 0;
  line-height: 1.2;
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

/* ==========================================================================
   Report cards — professional academic report layout (screen + print).
   Theme-aware: uses accent tokens so it follows the active colour theme.
   ========================================================================== */

.hst-shell .hst-rc__toolbar {
  margin-top: var(--hst-4);
  display: flex;
  justify-content: flex-end;
}

.hst-shell .hst-report-cards-area {
  display: flex;
  flex-direction: column;
  gap: var(--hst-5);
  margin-top: var(--hst-5);
}

.hst-shell .hst-report-card {
  background: var(--hst-surface);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-lg);
  box-shadow: var(--hst-shadow-1);
  padding: var(--hst-6);
  color: var(--hst-ink);
}

/* Header: school name + document title + term */
.hst-shell .hst-rc__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hst-4);
  padding-bottom: var(--hst-4);
  border-bottom: 2px solid var(--hst-accent);
  margin-bottom: var(--hst-4);
}
.hst-shell .hst-rc__school {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hst-shell .hst-rc__school-name {
  font-size: var(--hst-fs-lg);
  font-weight: 800;
  color: var(--hst-accent);
}
.hst-shell .hst-rc__doc-title {
  font-size: var(--hst-fs-sm);
  color: var(--hst-muted);
}
.hst-shell .hst-rc__term {
  font-size: var(--hst-fs-sm);
  color: var(--hst-ink-2);
}

/* Student meta row */
.hst-shell .hst-rc__student {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hst-3) var(--hst-6);
  margin-bottom: var(--hst-4);
  font-size: var(--hst-fs-sm);
}
.hst-shell .hst-rc__label {
  color: var(--hst-muted);
}

/* The grades grid */
.hst-shell .hst-rc__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--hst-fs-sm);
}
.hst-shell .hst-rc__table th,
.hst-shell .hst-rc__table td {
  border: 1px solid var(--hst-border);
  padding: var(--hst-2) var(--hst-3);
  text-align: center;
  white-space: nowrap;
}
.hst-shell .hst-rc__table thead th {
  background: var(--hst-accent-soft);
  color: var(--hst-accent-press, var(--hst-accent));
  font-weight: 700;
}
.hst-shell .hst-rc__lesson-col {
  text-align: start;
  min-width: 9rem;
}
.hst-shell .hst-rc__lesson-name {
  display: block;
  font-weight: 700;
}
.hst-shell .hst-rc__teacher {
  display: block;
  color: var(--hst-muted);
  font-size: var(--hst-fs-xs);
  font-weight: 400;
}
.hst-shell .hst-rc__avg-col {
  background: var(--hst-surface-2);
  font-weight: 700;
}
.hst-shell .hst-rc__table tfoot td {
  background: var(--hst-accent-soft);
  color: var(--hst-accent-press, var(--hst-accent));
  font-weight: 800;
}

/* Summary footer: verdict badge + signature lines */
.hst-shell .hst-rc__summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--hst-4);
  margin-top: var(--hst-5);
}
.hst-shell .hst-rc__verdict {
  font-size: var(--hst-fs-sm);
}
.hst-shell .hst-rc__badge {
  display: inline-block;
  margin-inline-start: var(--hst-2);
  padding: 3px 12px;
  border-radius: var(--hst-r-pill);
  background: var(--hst-accent);
  color: var(--hst-on-accent, #fff);
  font-weight: 700;
}
.hst-shell .hst-rc__signs {
  display: flex;
  gap: var(--hst-7);
  color: var(--hst-muted);
  font-size: var(--hst-fs-sm);
}
.hst-shell .hst-rc__signs span {
  border-top: 1px dashed var(--hst-border-strong);
  padding-top: var(--hst-2);
  min-width: 8rem;
  text-align: center;
}

/* ==========================================================================
   Weekly schedule grid (builder + readonly)
   ========================================================================== */
.hst-shell .hst-schedule-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: var(--hst-4);
  align-items: start;
}
.hst-shell .hst-schedule-layout > * {
  min-width: 0;
}
.hst-shell .hst-schedule-bank-card {
  position: sticky;
  top: var(--hst-4);
}
.hst-shell .hst-schedule-layout .hst-card__body {
  overflow-x: auto;
}
/* Any schedule grid (editor OR read-only my-schedule) scrolls horizontally inside its card instead of overflowing */
.hst-shell .hst-schedule-page .hst-card {
  min-width: 0;
}
.hst-shell .hst-schedule-page .hst-card__body {
  overflow-x: auto;
}

.hst-shell .hst-schedule-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--hst-4);
  margin-bottom: var(--hst-4);
}
.hst-shell .hst-schedule-option-card {
  padding: var(--hst-4);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r);
  background: var(--hst-surface-2);
  display: flex;
  flex-direction: column;
  gap: var(--hst-2);
}
.hst-shell .hst-schedule-option-card:last-child {
  grid-column: 1 / -1;
}
.hst-shell .hst-schedule-option-title {
  font-size: var(--hst-fs-sm);
  font-weight: 700;
  color: var(--hst-ink-2);
}
.hst-shell .hst-schedule-blocked-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--hst-2);
}
.hst-shell .hst-schedule-blocked-day strong {
  font-size: var(--hst-fs-xs);
  display: block;
  margin-bottom: 4px;
}

.hst-shell .hst-schedule-grid {
  display: grid;
  grid-template-columns: 64px repeat(5, minmax(96px, 1fr));
  gap: 6px;
  min-width: 660px;
}
.hst-shell .hst-schedule-grid--readonly {
  min-width: 620px;
}
.hst-shell .hst-schedule-grid-head {
  font-size: var(--hst-fs-sm);
  font-weight: 700;
  text-align: center;
  padding: var(--hst-4) var(--hst-2);
  background: var(--hst-accent-soft);
  color: var(--hst-accent-press);
  border-radius: var(--hst-r-xs);
  display: grid;
  place-items: center;
}
.hst-shell .hst-schedule-blocked-day {
  padding: var(--hst-2);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-xs);
  background: var(--hst-surface);
}
.hst-shell .hst-schedule-shift-label {
  display: grid;
  place-items: center;
  font-size: var(--hst-fs-xs);
  font-weight: 700;
  color: var(--hst-muted);
  background: var(--hst-surface-2);
  border-radius: var(--hst-r-xs);
}
.hst-shell .hst-schedule-slot {
  min-height: 72px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1.5px dashed var(--hst-border-strong);
  border-radius: var(--hst-r-xs);
  background: var(--hst-surface-2);
  transition:
    border-color var(--hst-trans),
    background var(--hst-trans);
}
.hst-shell .hst-schedule-slot.is-drop-target {
  border-color: var(--hst-accent);
  background: var(--hst-accent-softer);
}
.hst-shell .hst-schedule-slot--readonly {
  border-style: solid;
}
.hst-shell .hst-schedule-slot-empty {
  font-size: var(--hst-fs-xs);
  color: var(--hst-faint);
  margin: auto;
}
.hst-shell .hst-schedule-bank {
  display: flex;
  flex-direction: column;
  gap: var(--hst-2);
  max-height: 460px;
  overflow-y: auto;
}
.hst-shell .hst-schedule-bank-tools {
  margin-bottom: var(--hst-4);
}

.hst-shell .hst-schedule-entry {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px;
  border-radius: var(--hst-r-xs);
  background: var(--hst-accent-soft);
  color: var(--hst-accent-press);
  border-inline-start: 3px solid var(--hst-accent);
}
.hst-shell .hst-schedule-entry strong {
  font-size: var(--hst-fs-xs);
  font-weight: 700;
}
.hst-shell .hst-schedule-entry span {
  font-size: 11px;
  color: var(--hst-ink-2);
}
.hst-shell .hst-schedule-entry small {
  font-size: 10px;
  color: var(--hst-muted);
}
.hst-shell .hst-schedule-entry--odd {
  background: var(--hst-info-soft);
  border-inline-start-color: var(--hst-info);
  color: var(--hst-info);
}
.hst-shell .hst-schedule-entry--even {
  background: var(--hst-warning-soft);
  border-inline-start-color: var(--hst-warning);
  color: var(--hst-warning);
}
.hst-shell .hst-schedule-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--hst-4);
  font-size: var(--hst-fs-xs);
  color: var(--hst-muted);
}
.hst-shell .hst-schedule-card {
  padding: 8px 10px;
  border-radius: var(--hst-r-xs);
  background: var(--hst-surface);
  border: 1px solid var(--hst-border);
  cursor: grab;
}
.hst-shell .hst-schedule-card:active {
  cursor: grabbing;
}

/* ==========================================================================
   Seat labels (screen + print)
   ========================================================================== */
.hst-shell .hst-seat-toggles {
  gap: var(--hst-2) var(--hst-4);
}
.hst-shell .hst-seat-filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--hst-4);
}
.hst-shell .hst-seat-options {
  margin-top: var(--hst-4);
}
.hst-shell .hst-seat-print-header {
  text-align: center;
  margin-bottom: var(--hst-5);
  padding-bottom: var(--hst-4);
  border-bottom: 2px solid var(--hst-accent-soft);
}
.hst-shell .hst-seat-print-header h2 {
  font-size: var(--hst-fs-xl);
  font-weight: 800;
}
.hst-shell .hst-seat-print-header p {
  color: var(--hst-muted);
  font-size: var(--hst-fs-sm);
}

.hst-shell .hst-seat-label-grid {
  display: grid;
  gap: var(--hst-4);
}
.hst-shell .hst-seat-cols-1 {
  grid-template-columns: 1fr;
}
.hst-shell .hst-seat-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.hst-shell .hst-seat-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.hst-shell .hst-seat-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.hst-shell .hst-seat-label-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  min-height: 150px;
  padding: var(--hst-5) var(--hst-4);
  border: 1px solid var(--hst-border-strong);
  border-radius: var(--hst-r-lg);
  background: var(--hst-surface);
  overflow: hidden;
}
.hst-shell .hst-seat-label-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 5px;
  background: var(--hst-accent);
}
.hst-shell .hst-seat-size-compact .hst-seat-label-card {
  min-height: 110px;
  padding: var(--hst-4);
  gap: 3px;
}
.hst-shell .hst-seat-size-large .hst-seat-label-card {
  min-height: 200px;
  padding: var(--hst-7) var(--hst-5);
  gap: 8px;
}
.hst-shell .hst-seat-label-card h3 {
  font-size: var(--hst-fs-lg);
  font-weight: 800;
  line-height: 1.35;
}
.hst-shell .hst-seat-size-compact .hst-seat-label-card h3 {
  font-size: var(--hst-fs-md);
}
.hst-shell .hst-seat-size-large .hst-seat-label-card h3 {
  font-size: var(--hst-fs-xl);
}
.hst-shell .hst-seat-label-card p {
  line-height: 1.4;
  margin: 0;
}
.hst-shell .hst-seat-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.hst-shell .hst-seat-logo svg {
  width: 42px;
  height: 42px;
}
.hst-shell .hst-seat-number {
  font-size: var(--hst-fs-xs);
  font-weight: 700;
  white-space: nowrap;
  color: var(--hst-accent-press);
  background: var(--hst-accent-soft);
  padding: 3px 12px;
  border-radius: var(--hst-r-pill);
  margin-top: 2px;
}
.hst-shell .hst-seat-class {
  font-size: var(--hst-fs-sm);
  font-weight: 600;
  color: var(--hst-ink-2);
}
.hst-shell .hst-seat-exam-date,
.hst-shell .hst-seat-phone,
.hst-shell .hst-seat-note {
  font-size: var(--hst-fs-xs);
  color: var(--hst-muted);
}

/* ==========================================================================
   Admin settings screen (WP admin context — own namespace)
   ========================================================================== */
.hst-admin {
  max-width: 1080px;
}
.hst-admin .hst-admin__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hst-5);
  padding: var(--hst-6) var(--hst-7);
  border-radius: var(--hst-r-xl);
  background: linear-gradient(
    135deg,
    var(--hst-accent),
    var(--hst-accent-press)
  );
  color: #fff;
  margin-bottom: var(--hst-5);
}
.hst-admin .hst-admin__hero h1 {
  font-size: var(--hst-fs-xl);
  font-weight: 800;
  margin: 4px 0;
  color: #fff;
}
.hst-admin .hst-admin__hero p {
  font-size: var(--hst-fs-sm);
  opacity: 0.9;
  color: #fff;
}
.hst-admin .hst-admin__hero .hst-kicker {
  color: rgba(255, 255, 255, 0.85);
}
.hst-admin .hst-admin__hero img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}
.hst-admin .hst-form > .hst-card {
  margin-bottom: var(--hst-4);
}

/* Admin tabs */
.hst-admin__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--hst-5);
  padding: 6px;
  background: var(--hst-surface);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-lg);
  box-shadow: var(--hst-shadow-1);
  position: sticky;
  top: 8px;
  z-index: 5;
}
.hst-admin__tab {
  flex: 1 1 auto;
  min-width: max-content;
  font: inherit;
  font-size: var(--hst-fs-sm);
  font-weight: 700;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--hst-r-xs);
  background: transparent;
  color: var(--hst-ink-2);
  cursor: pointer;
  transition:
    background var(--hst-trans),
    color var(--hst-trans);
}
.hst-admin__tab:hover {
  background: var(--hst-surface-2);
  color: var(--hst-accent-press);
}
.hst-admin__tab.is-active {
  background: var(--hst-accent);
  color: #fff;
}

.hst-theme-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--hst-4);
}
.hst-theme-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 116px;
  padding: var(--hst-4);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r);
  background: var(--hst-surface);
  cursor: pointer;
  transition:
    border-color var(--hst-trans),
    background var(--hst-trans),
    transform var(--hst-trans),
    box-shadow var(--hst-trans);
}
.hst-theme-card:hover {
  transform: translateY(-1px);
  border-color: var(--hst-border-strong);
  box-shadow: var(--hst-shadow-1);
}
.hst-theme-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.hst-theme-card.is-active,
.hst-theme-card:has(input:checked) {
  border-color: var(--hst-accent);
  background: var(--hst-accent-softer);
  box-shadow: 0 0 0 3px var(--hst-ring);
}
.hst-theme-card__swatches {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hst-theme-card__swatches i {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--hst-border);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.hst-theme-card strong {
  font-size: var(--hst-fs-sm);
  color: var(--hst-ink);
}
.hst-theme-card small {
  font-size: var(--hst-fs-xs);
  color: var(--hst-muted);
  line-height: 1.5;
}

.hst-admin__panel {
  animation: none;
}
.hst-admin__panel .hst-card:last-child {
  margin-bottom: 0;
}

/* Sticky save bar */
.hst-admin__save-bar {
  position: sticky;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--hst-4);
  flex-wrap: wrap;
  margin-top: var(--hst-5);
  padding: var(--hst-4) var(--hst-4);
  background: color-mix(in srgb, var(--hst-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-lg);
  box-shadow: var(--hst-shadow-2);
}

.hst-admin code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: var(--hst-surface-3);
  padding: 1px 6px;
  border-radius: 5px;
  direction: ltr;
  display: inline-block;
}
.hst-admin .hst-logo-field {
  display: flex;
  flex-direction: column;
  gap: var(--hst-2);
}
.hst-admin .hst-logo-field > span {
  font-size: var(--hst-fs-sm);
  font-weight: 600;
  color: var(--hst-ink-2);
}
.hst-admin .hst-logo-field__row {
  display: flex;
  align-items: center;
  gap: var(--hst-4);
  flex-wrap: wrap;
}
.hst-admin .hst-logo-field__preview {
  height: 56px;
  max-width: 200px;
  width: auto;
  object-fit: contain;
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-xs);
  background: var(--hst-surface-2);
  padding: 6px 10px;
}

/* Inline explanatory hint under a settings toggle. */
.hst-admin .hst-admin__hint {
  margin: calc(var(--hst-2) * -1) 0 var(--hst-3);
  padding-inline-start: 1.75rem;
  color: var(--hst-muted);
  font-size: var(--hst-fs-sm);
  line-height: 1.7;
}
.hst-admin .hst-admin__hint code {
  font-size: 0.85em;
}

/* ==========================================================================
   13. Landing / home page ([hst_home])
   ========================================================================== */
.hst-shell .hst-btn--lg {
  min-height: 54px;
  padding: 0 30px;
  font-size: var(--hst-fs-md);
  border-radius: var(--hst-r);
}
.hst-shell .hst-btn--invert {
  background: #fff;
  color: var(--hst-accent-press);
}
.hst-shell .hst-btn--invert:hover {
  background: rgba(255, 255, 255, 0.9);
}

/* Landing buttons: cohesive teal system look + animated arrow */
.hst-landing .hst-btn {
  border-radius: var(--hst-r-pill);
}
/* Force readable text colors even when the theme styles <a> globally (incl. !important) */
.hst-landing a.hst-btn,
.hst-landing a.hst-btn:hover {
  color: #fff !important;
  text-decoration: none;
}
.hst-landing a.hst-btn--ghost {
  color: var(--hst-ink-2) !important;
}
.hst-landing a.hst-btn--ghost:hover {
  color: var(--hst-accent-press) !important;
}
.hst-landing a.hst-btn--invert {
  color: var(--hst-accent-press) !important;
}
.hst-landing .hst-btn__arrow {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform var(--hst-trans);
}
.hst-landing .hst-btn:hover .hst-btn__arrow {
  transform: translateX(-4px);
}
.hst-landing .hst-btn:not(.hst-btn--ghost):not(.hst-btn--invert) {
  box-shadow: 0 8px 20px -8px
    color-mix(in srgb, var(--hst-accent) 60%, transparent);
}
.hst-landing .hst-btn--lg:not(.hst-btn--ghost):hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px
    color-mix(in srgb, var(--hst-accent) 60%, transparent);
}
.hst-landing .hst-btn--invert {
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.35);
}
.hst-landing .hst-btn--ghost {
  background: var(--hst-surface);
}
.hst-landing .hst-btn--ghost:hover {
  background: var(--hst-surface-2);
  border-color: var(--hst-accent);
  color: var(--hst-accent-press);
}

.hst-landing {
  max-width: 1200px;
  gap: 0;
  padding-bottom: 0;
}

/* ---- Top bar ---- */
.hst-landing__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hst-4);
  padding: var(--hst-4) var(--hst-5);
  margin-bottom: var(--hst-6);
  background: color-mix(in srgb, var(--hst-surface) 80%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-pill);
  box-shadow: var(--hst-shadow-1);
  position: sticky;
  top: var(--hst-4);
  z-index: 20;
}
.hst-landing__brand {
  display: flex;
  align-items: center;
  gap: var(--hst-2);
  text-decoration: none !important;
  color: inherit;
}
a.hst-landing__brand {
  transition: opacity var(--hst-trans);
}
a.hst-landing__brand:hover {
  opacity: 0.85;
}
a.hst-landing__brand .hst-landing__brand-name {
  color: var(--hst-ink) !important;
}
.hst-landing__logo {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--hst-r-xs);
  background: var(--hst-accent);
  color: #fff;
}
.hst-landing__logo svg {
  width: 22px;
  height: 22px;
}
.hst-landing__logo--img {
  background: none;
  padding: 0;
  width: auto;
  height: 40px;
  border-radius: var(--hst-r-xs);
  overflow: hidden;
}
.hst-landing__logo--img img {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
}
.hst-landing__foot .hst-landing__logo--img {
  height: 32px;
}
.hst-landing__foot .hst-landing__logo--img img {
  height: 32px;
}
.hst-landing__brand-name {
  font-size: var(--hst-fs-md);
  font-weight: 800;
}
.hst-landing__nav {
  display: flex;
  align-items: center;
  gap: var(--hst-4);
}
.hst-landing__nav-link {
  font-size: var(--hst-fs-sm);
  font-weight: 600;
  color: var(--hst-ink-2) !important;
  text-decoration: none !important;
  padding: 6px 4px;
  transition: color var(--hst-trans);
}
.hst-landing__nav-link:hover {
  color: var(--hst-accent-press) !important;
}
.hst-landing__nav-link:hover {
  color: var(--hst-accent-press);
}

.hst-landing__hello {
  font-size: var(--hst-fs-sm);
  color: var(--hst-muted);
}

/* ---- Hero ---- */
.hst-landing__hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--hst-7);
  align-items: center;
  padding: clamp(28px, 5vw, 64px);
  margin-bottom: var(--hst-6);
  border-radius: var(--hst-r-xl);
  border: 1px solid var(--hst-border);
  background:
    radial-gradient(
      120% 120% at 88% 8%,
      var(--hst-accent-soft) 0%,
      transparent 42%
    ),
    radial-gradient(
      90% 90% at 6% 96%,
      var(--hst-accent-softer) 0%,
      transparent 46%
    ),
    var(--hst-surface);
}
.hst-landing__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(var(--hst-border) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%);
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}
.hst-landing__hero-text {
  position: relative;
  z-index: 1;
}
.hst-landing__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--hst-fs-xs);
  font-weight: 700;
  color: var(--hst-accent-press);
  background: var(--hst-accent-soft);
  padding: 6px 14px;
  border-radius: var(--hst-r-pill);
}
.hst-landing__eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hst-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hst-accent) 25%, transparent);
}
.hst-landing__hero-text h1 {
  font-size: clamp(30px, 4.4vw, 50px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: var(--hst-4) 0 var(--hst-4);
}
.hst-landing__hero-text h1 span {
  color: var(--hst-accent);
}
.hst-landing__hero-text p {
  font-size: var(--hst-fs-md);
  color: var(--hst-ink-2);
  line-height: 1.85;
  max-width: 46ch;
  text-wrap: pretty;
}
.hst-landing__cta {
  margin-top: var(--hst-5);
  display: flex;
  align-items: center;
  gap: var(--hst-4);
  flex-wrap: wrap;
}
.hst-landing__link-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: var(--hst-fs-sm);
  color: var(--hst-accent-press);
}
.hst-landing__link-cta span {
  transition: transform var(--hst-trans);
}
.hst-landing__link-cta:hover span {
  transform: translateX(-4px);
}
.hst-landing__assurances {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hst-2) var(--hst-5);
  margin-top: var(--hst-6);
  padding: 0;
  list-style: none;
}
.hst-landing__assurances li {
  position: relative;
  padding-inline-start: 22px;
  font-size: var(--hst-fs-sm);
  color: var(--hst-ink-2);
}
.hst-landing__assurances li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  top: -1px;
  width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
  color: var(--hst-accent-press);
  background: var(--hst-accent-soft);
  border-radius: 50%;
}

/* ---- Hero product mockup ---- */
.hst-landing__hero-art {
  position: relative;
  z-index: 1;
  min-height: 320px;
  display: grid;
  place-items: center;
}
.hst-landing__window {
  width: 100%;
  max-width: 380px;
  background: var(--hst-surface);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-lg);
  box-shadow: var(--hst-shadow-3);
  overflow: hidden;
  transform: rotate(-1deg);
}
.hst-landing__window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  background: var(--hst-surface-2);
  border-bottom: 1px solid var(--hst-border);
}
.hst-landing__window-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hst-border-strong);
}
.hst-landing__window-bar span:nth-child(1) {
  background: #f0707f;
}
.hst-landing__window-bar span:nth-child(2) {
  background: #f3c14e;
}
.hst-landing__window-bar span:nth-child(3) {
  background: #4fc28a;
}
.hst-landing__window-bar em {
  margin-inline-start: auto;
  font-style: normal;
  font-size: var(--hst-fs-xs);
  color: var(--hst-muted);
}
.hst-landing__window-body {
  padding: var(--hst-4);
  display: flex;
  flex-direction: column;
  gap: var(--hst-4);
}
.hst-landing__mock-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hst-landing__mock-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--hst-accent),
    var(--hst-accent-press)
  );
  flex: none;
}
.hst-landing__mock-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hst-landing__mock-lines b {
  height: 8px;
  width: 60%;
  border-radius: 4px;
  background: var(--hst-surface-3);
}
.hst-landing__mock-lines i {
  height: 6px;
  width: 38%;
  border-radius: 3px;
  background: var(--hst-surface-3);
}
.hst-landing__mock-bell {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--hst-accent-soft);
  color: var(--hst-accent-press);
}
.hst-landing__mock-bell svg {
  width: 15px;
  height: 15px;
}
.hst-landing__mock-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.hst-landing__mock-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: var(--hst-r-xs);
  background: var(--hst-surface-2);
}
.hst-landing__mock-tile span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--hst-accent-soft);
  color: var(--hst-accent-press);
}
.hst-landing__mock-tile span svg {
  width: 15px;
  height: 15px;
}
.hst-landing__mock-tile small {
  font-size: 8.5px;
  color: var(--hst-muted);
}
.hst-landing__mock-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.hst-landing__mock-stat {
  padding: 10px 12px;
  border-radius: var(--hst-r-xs);
  border: 1px solid var(--hst-border);
  background: var(--hst-surface);
}
.hst-landing__mock-stat b {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--hst-ink);
}
.hst-landing__mock-stat i {
  font-size: 9px;
  font-style: normal;
  color: var(--hst-muted);
}
.hst-landing__mock-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 56px;
  padding: 10px 12px;
  border-radius: var(--hst-r-xs);
  background: var(--hst-surface-2);
}
.hst-landing__mock-bars span {
  flex: 1;
  height: var(--v);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(var(--hst-accent), var(--hst-accent-soft));
}
.hst-landing__chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  background: var(--hst-surface);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-pill);
  box-shadow: var(--hst-shadow-2);
  font-size: var(--hst-fs-xs);
  font-weight: 700;
  color: var(--hst-ink-2);
}
.hst-landing__chip svg {
  width: 16px;
  height: 16px;
  stroke: var(--hst-accent-press);
  fill: none;
  stroke-width: 1.8;
}
.hst-landing__chip--1 {
  inset-block-start: 8px;
  inset-inline-start: -6px;
}
.hst-landing__chip--2 {
  inset-block-end: 14px;
  inset-inline-end: -6px;
}

/* ---- Stats strip ---- */
.hst-landing__strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hst-4);
  padding: var(--hst-5) var(--hst-6);
  margin-bottom: var(--hst-7);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-lg);
  background: var(--hst-surface);
}
.hst-landing__strip div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
}
.hst-landing__strip strong {
  font-size: var(--hst-fs-xl);
  font-weight: 800;
  color: var(--hst-accent-press);
}
.hst-landing__strip span {
  font-size: var(--hst-fs-sm);
  color: var(--hst-muted);
}

/* ---- Section head ---- */
.hst-landing__section-head {
  text-align: center;
  margin-bottom: var(--hst-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hst-2);
}
.hst-landing__section-head h2 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 6px;
}
.hst-landing__section-head p {
  font-size: var(--hst-fs-md);
  color: var(--hst-muted);
  max-width: 52ch;
  line-height: 1.7;
}

/* ---- Features ---- */
.hst-landing__features {
  margin-bottom: var(--hst-7);
}
.hst-landing__feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--hst-4);
}
.hst-landing__feature {
  padding: var(--hst-6) var(--hst-5);
  background: var(--hst-surface);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-lg);
  transition:
    transform var(--hst-trans),
    box-shadow var(--hst-trans),
    border-color var(--hst-trans);
}
.hst-landing__feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--hst-shadow-2);
  border-color: var(--hst-accent);
}
.hst-landing__feature-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--hst-r);
  background: var(--hst-accent-soft);
  color: var(--hst-accent-press);
  margin-bottom: var(--hst-4);
}
.hst-landing__feature-icon svg {
  width: 27px;
  height: 27px;
}
.hst-landing__feature h3 {
  font-size: var(--hst-fs-lg);
  font-weight: 700;
  margin-bottom: 8px;
}
.hst-landing__feature p {
  font-size: var(--hst-fs-sm);
  color: var(--hst-muted);
  line-height: 1.75;
  text-wrap: pretty;
}

/* ---- Roles ---- */
.hst-landing__roles {
  margin-bottom: var(--hst-7);
}
.hst-landing__role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--hst-4);
}
.hst-landing__role {
  display: flex;
  flex-direction: column;
  gap: var(--hst-4);
  padding: var(--hst-6) var(--hst-5);
  background: var(--hst-surface);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-lg);
  transition:
    border-color var(--hst-trans),
    box-shadow var(--hst-trans);
}
.hst-landing__role:hover {
  border-color: var(--hst-accent);
  box-shadow: var(--hst-shadow-2);
}
.hst-landing__role-head {
  display: flex;
  align-items: center;
  gap: var(--hst-4);
}
.hst-landing__role-icon {
  width: 50px;
  height: 50px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--hst-r);
  background: linear-gradient(
    135deg,
    var(--hst-accent),
    var(--hst-accent-press)
  );
  color: #fff;
}
.hst-landing__role-icon svg {
  width: 26px;
  height: 26px;
  stroke: #fff;
}
.hst-landing__role-head h3 {
  font-size: var(--hst-fs-lg);
  font-weight: 700;
}
.hst-landing__role-head p {
  font-size: var(--hst-fs-sm);
  color: var(--hst-muted);
  margin-top: 2px;
}
.hst-landing__role-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--hst-2);
  border-top: 1px solid var(--hst-border);
  padding-top: var(--hst-4);
}
.hst-landing__role-list li {
  position: relative;
  padding-inline-start: 24px;
  font-size: var(--hst-fs-sm);
  color: var(--hst-ink-2);
  line-height: 1.5;
}
.hst-landing__role-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--hst-accent-soft);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23115e57' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---- Steps ---- */
.hst-landing__steps {
  margin-bottom: var(--hst-7);
}
.hst-landing__step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--hst-4);
  counter-reset: hst-step;
}
.hst-landing__step {
  position: relative;
  padding: var(--hst-6) var(--hst-5) var(--hst-5);
  background: var(--hst-surface);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-lg);
}
.hst-landing__step-num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--hst-4);
  font-size: var(--hst-fs-lg);
  font-weight: 800;
  color: var(--hst-accent-press);
  background: var(--hst-accent-soft);
  border-radius: 50%;
}
.hst-landing__step h3 {
  font-size: var(--hst-fs-md);
  font-weight: 700;
  margin-bottom: 6px;
}
.hst-landing__step p {
  font-size: var(--hst-fs-sm);
  color: var(--hst-muted);
  line-height: 1.7;
  text-wrap: pretty;
}

/* ---- CTA band ---- */
.hst-landing__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hst-5);
  flex-wrap: wrap;
  padding: clamp(28px, 4vw, 52px);
  margin-bottom: var(--hst-6);
  border-radius: var(--hst-r-xl);
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--hst-accent),
    var(--hst-accent-press)
  );
  box-shadow: var(--hst-shadow-3);
}
.hst-landing__band-text h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
}
.hst-landing__band-text p {
  margin-top: 8px;
  font-size: var(--hst-fs-md);
  opacity: 0.92;
  max-width: 52ch;
  line-height: 1.7;
}

/* ---- Footer ---- */
.hst-landing__foot {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--hst-5);
  padding: clamp(24px, 4vw, 40px);
  margin-top: var(--hst-2);
  margin-bottom: var(--hst-5);
  color: var(--hst-muted);
  font-size: var(--hst-fs-sm);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-xl);
  background:
    radial-gradient(
      80% 110% at 100% 0%,
      var(--hst-accent-soft) 0%,
      transparent 45%
    ),
    linear-gradient(180deg, var(--hst-surface), var(--hst-surface-2));
  box-shadow: var(--hst-shadow-1);
}
.hst-landing__foot::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
  background-image: radial-gradient(var(--hst-border) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 22%,
    #000 78%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 22%,
    #000 78%,
    transparent
  );
}
.hst-landing__foot-main,
.hst-landing__foot-bottom {
  position: relative;
  z-index: 1;
}
.hst-landing__foot-main {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(170px, 0.65fr) minmax(
      180px,
      0.75fr
    );
  gap: clamp(20px, 4vw, 44px);
  align-items: start;
}
.hst-landing__foot-brand {
  display: flex;
  flex-direction: column;
  gap: var(--hst-4);
  min-width: 0;
}
.hst-landing__foot .hst-landing__brand {
  width: fit-content;
}
.hst-landing__foot .hst-landing__brand span {
  font-weight: 800;
  color: var(--hst-ink);
}
.hst-landing__foot .hst-landing__logo {
  width: 38px;
  height: 38px;
}
.hst-landing__foot .hst-landing__logo svg {
  width: 21px;
  height: 21px;
}
.hst-landing__foot .hst-landing__logo--img {
  height: 38px;
}
.hst-landing__foot .hst-landing__logo--img img {
  height: 38px;
}
.hst-landing__foot-brand p {
  max-width: 58ch;
  color: var(--hst-ink-2);
  line-height: 1.85;
  margin: 0;
  text-wrap: pretty;
}
.hst-landing__foot-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hst-2);
  margin-top: 2px;
}
.hst-landing__foot-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-pill);
  background: color-mix(in srgb, var(--hst-surface) 86%, transparent);
  color: var(--hst-ink-2);
  font-weight: 700;
}
.hst-landing__foot-badges svg {
  width: 15px;
  height: 15px;
  stroke: var(--hst-accent-press);
}
.hst-landing__foot-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.hst-landing__foot-col h3 {
  font-size: var(--hst-fs-sm);
  font-weight: 800;
  color: var(--hst-ink);
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hst-landing__foot-col h3::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hst-accent);
  box-shadow: 0 0 0 4px var(--hst-accent-soft);
}
.hst-landing__foot-col a,
.hst-landing__foot-col span {
  color: var(--hst-muted) !important;
  text-decoration: none !important;
  line-height: 1.6;
  transition:
    color var(--hst-trans),
    transform var(--hst-trans);
}
.hst-landing__foot-col a:hover {
  color: var(--hst-accent-press) !important;
  transform: translateX(-3px);
}
.hst-landing__foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hst-4);
  flex-wrap: wrap;
  padding-top: var(--hst-4);
  border-top: 1px solid var(--hst-border);
}
.hst-landing__foot-note {
  color: var(--hst-ink-2);
  font-weight: 700;
}
.hst-landing__foot-copy {
  color: var(--hst-muted);
}

/* ==========================================================================
   Minimal home (shown when the built-in landing is disabled in settings)
   ========================================================================== */
.hst-shell .hst-home-mini {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: var(--hst-7) var(--hst-4);
}
.hst-shell .hst-home-mini__card {
  width: 100%;
  max-width: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hst-4);
  padding: var(--hst-7) var(--hst-6);
  background: var(--hst-surface);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-lg);
  box-shadow: var(--hst-shadow-2);
}
.hst-shell .hst-home-mini__logo {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--hst-r);
  background: var(--hst-accent-soft);
  color: var(--hst-accent);
}
.hst-shell .hst-home-mini__logo svg { width: 34px; height: 34px; }
.hst-shell .hst-home-mini__logo--img {
  background: transparent;
  overflow: hidden;
}
.hst-shell .hst-home-mini__logo--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hst-shell .hst-home-mini__title {
  font-size: var(--hst-fs-xl);
  font-weight: 800;
  margin: 0;
}
.hst-shell .hst-home-mini__sub {
  color: var(--hst-muted);
  margin: 0;
}

/* ==========================================================================
   14. Login page ([hst_login])
   ========================================================================== */
.hst-login {
  max-width: 1000px;
  min-height: 80vh;
  display: grid;
  place-items: center;
}
.hst-login__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  overflow: hidden;
  background: var(--hst-surface);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-xl);
  box-shadow: var(--hst-shadow-3);
}
/* Brand aside (decorative, teal) */
.hst-login__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--hst-5);
  padding: var(--hst-7);
  color: #fff;
  overflow: hidden;
  background: linear-gradient(
    150deg,
    var(--hst-accent),
    var(--hst-accent-press)
  );
}
.hst-login__aside::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.18) 1px,
    transparent 1px
  );
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(
    120% 80% at 100% 0%,
    #000,
    transparent 60%
  );
  mask-image: radial-gradient(120% 80% at 100% 0%, #000, transparent 60%);
}
.hst-login__aside-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--hst-2);
}
.hst-login__aside-brand {
  font-size: var(--hst-fs-md);
  font-weight: 800;
}
.hst-login__aside-mid {
  position: relative;
  z-index: 1;
  margin-top: auto;
}
.hst-login__aside-badge {
  display: inline-block;
  font-size: var(--hst-fs-xs);
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--hst-r-pill);
  background: rgba(255, 255, 255, 0.18);
  margin-bottom: var(--hst-4);
}
.hst-login__aside-mid h2 {
  font-size: var(--hst-fs-xl);
  font-weight: 800;
  line-height: 1.3;
}
.hst-login__aside-mid p {
  margin-top: var(--hst-2);
  font-size: var(--hst-fs-sm);
  opacity: 0.9;
  line-height: 1.8;
}
.hst-login__aside-list {
  position: relative;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--hst-4);
}
.hst-login__aside-list li {
  display: flex;
  align-items: center;
  gap: var(--hst-2);
  font-size: var(--hst-fs-sm);
  font-weight: 600;
}
.hst-login__aside-list li span {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--hst-r-xs);
  background: rgba(255, 255, 255, 0.16);
}
.hst-login__aside-list li span svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.8;
}
.hst-login__aside-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--hst-fs-xs);
  opacity: 0.85;
  padding-top: var(--hst-4);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.hst-login__aside-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
.hst-login__logo {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--hst-r-xs);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.hst-login__logo svg {
  width: 22px;
  height: 22px;
}
.hst-login__logo--img {
  background: rgba(255, 255, 255, 0.92);
  padding: 4px;
}
.hst-login__logo--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Form side */
.hst-login__main {
  padding: clamp(28px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  gap: var(--hst-4);
}
.hst-login__brand {
  display: none;
  align-items: center;
  gap: var(--hst-2);
  text-decoration: none !important;
  color: var(--hst-ink);
  font-weight: 800;
}
.hst-login__brand .hst-login__logo {
  background: var(--hst-accent);
}
.hst-login__head h1 {
  font-size: var(--hst-fs-xl);
  font-weight: 800;
}
.hst-login__head p {
  margin-top: 6px;
  font-size: var(--hst-fs-sm);
  color: var(--hst-muted);
}
.hst-login__alert {
  padding: 12px 14px;
  border-radius: var(--hst-r-xs);
  background: var(--hst-danger-soft);
  color: var(--hst-danger);
  border-inline-start: 3px solid var(--hst-danger);
  font-size: var(--hst-fs-sm);
  font-weight: 600;
}
.hst-login__alert--info {
  margin-top: var(--hst-3, 10px);
  background: var(--hst-accent-soft, #ccfbf1);
  color: var(--hst-accent-press, #0f766e);
  border-inline-start-color: var(--hst-accent, #0d9488);
}
.hst-login__form {
  display: flex;
  flex-direction: column;
  gap: var(--hst-4);
}
.hst-login [hidden],
.hst-login__form[hidden],
.hst-login__otp-code-field[hidden],
.hst-login__otp-msg[hidden],
.hst-login__otp-resend[hidden] {
  display: none !important;
}

.hst-login__password {
  position: relative;
}

.hst-login__password input[type="password"],
.hst-login__password input[type="text"] {
  padding-left: 50px;
  padding-right: 14px;
}

.hst-login__toggle {
  position: absolute;
  left: 12px;
  right: auto;
  bottom: 10px;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--hst-ink-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background var(--hst-dur-fast) var(--hst-ease), color var(--hst-dur-fast) var(--hst-ease);
}

.hst-login__toggle:hover,
.hst-login__toggle:focus-visible {
  background: var(--hst-accent-soft);
  color: var(--hst-accent);
  outline: none;
}

.hst-login__toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hst-login__toggle .hst-login__toggle-eye-off {
  display: none;
}

.hst-login__toggle.is-visible .hst-login__toggle-eye {
  display: none;
}

.hst-login__toggle.is-visible .hst-login__toggle-eye-off {
  display: block;
}
.hst-login__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hst-4);
  flex-wrap: wrap;
}
.hst-login__remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--hst-fs-sm);
  color: var(--hst-ink-2);
  cursor: pointer;
}
.hst-login__remember input {
  accent-color: var(--hst-accent);
  width: 16px;
  height: 16px;
}
.hst-login__forgot {
  font-size: var(--hst-fs-sm);
  font-weight: 600;
  color: var(--hst-accent-press);
}
.hst-login a.hst-btn,
.hst-login a.hst-btn:hover {
  color: #fff !important;
  text-decoration: none;
}
.hst-login a.hst-btn--ghost {
  color: var(--hst-ink-2) !important;
}
.hst-login .hst-btn {
  border-radius: var(--hst-r-pill);
}
.hst-login__foot {
  text-align: center;
  font-size: var(--hst-fs-sm);
}
.hst-login__foot a {
  color: var(--hst-muted);
}

/* Login method tabs (password / OTP) */
.hst-login__methods {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: var(--hst-surface-2);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-pill);
}
.hst-login__method {
  flex: 1;
  font: inherit;
  font-size: var(--hst-fs-sm);
  font-weight: 700;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--hst-r-pill);
  background: transparent;
  color: var(--hst-ink-2);
  cursor: pointer;
  transition:
    background var(--hst-trans),
    color var(--hst-trans);
}
.hst-login__method.is-active {
  background: var(--hst-accent);
  color: #fff;
}
.hst-login__otp-msg {
  background: var(--hst-info-soft);
  color: var(--hst-info);
  border-inline-start-color: var(--hst-info);
}
.hst-login__otp-msg.is-ok {
  background: var(--hst-success-soft);
  color: var(--hst-success);
  border-inline-start: 3px solid var(--hst-success);
}
.hst-login__otp-resend {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--hst-fs-sm);
  font-weight: 600;
  color: var(--hst-accent-press);
  padding: 4px;
}
.hst-login__otp-resend:disabled {
  color: var(--hst-muted);
  cursor: default;
}

/* ===== compatibility ===== */
/* ==========================================================================
   HST UI — compatibility layer (CORRECTED for the real plugin JS)
   Styles every class the plugin scripts QUERY, INJECT, or TOGGLE.
   Load order: hst-ui.css → hst-ui-components.css → hst-ui-compat.css
   (bundled together into assets/css/main.css).
   ========================================================================== */

/* ---- Body scroll lock when a modal is open ----------------------------- */
body.hst-modal-open,
body.hst-jdp-modal-open {
  overflow: hidden;
}

/* ---- Loader (HST.loader toggles .show-loader) -------------------------- */
.hst-shell .hst-loader,
.hst-loader {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  place-items: center;
  padding: 0;
  background: rgba(15, 28, 36, 0.45);
  backdrop-filter: blur(2px);
}
.hst-shell .hst-loader.show-loader,
.hst-loader.show-loader {
  display: grid;
}
.hst-loader img {
  width: 54px;
  height: 54px;
  animation: hst-spin 1s linear infinite;
}
.hst-loader__spinner {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: hst-spin 1s linear infinite;
}

/* ---- Toasts (HST.toast builds .hst-toast.hst-toast-<type> with icon + msg + close) */
.hst-toast-container {
  position: fixed;
  inset-block-start: var(--hst-5, 18px);
  inset-inline: 0;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hst-2, 8px);
  padding: 0 var(--hst-4, 14px);
  pointer-events: none;
  font-family: var(--hst-font, "Vazirmatn", Tahoma, sans-serif);
}
.hst-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--hst-3, 12px);
  width: 100%;
  max-width: 440px;
  padding: 13px 16px;
  border-radius: var(--hst-r, 14px);
  border: 1px solid var(--hst-border, #e2e8f3);
  border-inline-start: 4px solid var(--hst-toast-accent, var(--hst-ink));
  background: var(--hst-surface, #fff);
  color: var(--hst-ink, #1b2733);
  font-size: var(--hst-fs-sm, 13px);
  font-weight: 600;
  line-height: 1.6;
  box-shadow: var(--hst-shadow-3, 0 10px 30px rgba(16, 24, 40, 0.16));
  direction: rtl;
  animation: hst-toast-enter var(--hst-dur, 240ms) var(--hst-ease-soft, ease);
}
.hst-toast__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--hst-toast-accent, var(--hst-ink));
}
.hst-toast__icon svg {
  width: 20px;
  height: 20px;
}
.hst-toast__msg {
  flex: 1 1 auto;
  min-width: 0;
  /* Long messages wrap cleanly on multiple lines instead of overflowing. */
  word-break: break-word;
  overflow-wrap: anywhere;
}
.hst-toast-success {
  --hst-toast-accent: var(--hst-success, #15803d);
}
.hst-toast-error {
  --hst-toast-accent: var(--hst-danger, #e11d48);
}
.hst-toast-warning {
  --hst-toast-accent: var(--hst-warning, #b45309);
}
.hst-toast-info {
  --hst-toast-accent: var(--hst-info, #1d4ed8);
}
.hst-toast-close {
  flex: none;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  color: var(--hst-muted, #6b7886);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  margin-top: 1px;
  opacity: 0.7;
  transition: opacity var(--hst-dur-fast, 0.18s) ease;
}
.hst-toast-close:hover {
  opacity: 1;
  color: var(--hst-ink, #1b2733);
}

/* On phones the toast spans the screen width (with margin) so long Persian
   messages read on tidy multiple lines rather than a cramped narrow box. */
@media (max-width: 560px) {
  .hst-toast-container {
    inset-block-start: var(--hst-4, 14px);
  }
  .hst-toast {
    max-width: 100%;
  }
}

/* ---- Modal show convention: scripts add .is-active --------------------- */
.hst-shell .hst-modal.is-active {
  display: grid;
}
.hst-modal__backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
}
/* JS-targeted inner nodes (also keep BEM look from core) */
.hst-shell .hst-modal-title {
  font-size: var(--hst-fs-lg);
  font-weight: 700;
}
.hst-shell .hst-modal-text {
  color: var(--hst-ink-2);
}
.hst-shell .hst-modal-text:empty,
.hst-shell .hst-modal-content:empty {
  display: none;
}
.hst-shell .hst-modal-content {
  display: flex;
  flex-direction: column;
  gap: var(--hst-4);
}
.hst-shell .hst-modal-input {
  width: 100%;
}
.hst-shell .hst-delete-warning {
  padding: var(--hst-2) 0;
}
.hst-shell .text-danger,
.hst-delete-warning .text-danger {
  color: var(--hst-danger);
  font-weight: 600;
}

/* Legacy modal vocabulary (used by the Jalali datepicker overlay it injects) */
.hst-modal-box {
  width: min(560px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--hst-surface, #fff);
  border-radius: var(--hst-r-lg, 16px);
  box-shadow: var(--hst-shadow-3, 0 18px 48px rgba(16, 24, 40, 0.2));
  overflow: clip;
}
.hst-modal-header,
.hst-notification-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hst-border, #e2e7ec);
}
.hst-modal-body,
.hst-notification-modal-body {
  padding: 20px;
  overflow-y: auto;
}
.hst-modal-footer,
.hst-notification-modal-footer {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--hst-border, #e2e7ec);
  background: var(--hst-surface-2, #f6f8fa);
}
.hst-modal-close,
.hst-notification-modal-close {
  font: inherit;
  font-size: 24px;
  line-height: 1;
  color: var(--hst-muted, #74828f);
  background: none;
  border: 0;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex: none;
}
.hst-modal-close:hover,
.hst-notification-modal-close:hover {
  background: var(--hst-surface-3, #eef1f5);
  color: var(--hst-ink, #1b2733);
}

/* ---- List filters: count + auto-injected empty row & pagination -------- */
.hst-shell .hst-filter-count {
  font-size: var(--hst-fs-xs);
  color: var(--hst-muted);
}
.hst-shell .hst-filter-empty-row td {
  text-align: center;
  color: var(--hst-muted);
  padding: var(--hst-6);
}
.hst-shell .hst-list-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hst-2);
  margin-top: var(--hst-4);
  flex-wrap: wrap;
}
.hst-shell .hst-list-pagination[hidden] {
  display: none;
}
.hst-shell .hst-page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hst-shell .hst-page-number,
.hst-shell .hst-page-prev,
.hst-shell .hst-page-next {
  min-width: 36px;
  min-height: 36px;
  padding: 6px 10px;
  font: inherit;
  font-size: var(--hst-fs-sm);
  font-weight: 600;
  border: 1px solid var(--hst-border-strong);
  border-radius: var(--hst-r-xs);
  background: var(--hst-surface);
  color: var(--hst-ink-2);
  cursor: pointer;
  transition: all var(--hst-trans);
}
.hst-shell .hst-page-number:hover,
.hst-shell .hst-page-prev:not(:disabled):hover,
.hst-shell .hst-page-next:not(:disabled):hover {
  border-color: var(--hst-accent);
  color: var(--hst-accent-press);
}
.hst-shell .hst-page-number.is-active {
  background: var(--hst-accent);
  color: #fff;
  border-color: transparent;
}
.hst-shell .hst-page-prev:disabled,
.hst-shell .hst-page-next:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.hst-shell .hst-page-dots {
  color: var(--hst-muted);
  padding: 0 4px;
}

/* ---- Teacher lesson picker (injected by hst-teachers / hst-edit-teachers) */
.hst-shell .hst-teacher-lesson-picker {
  display: flex;
  flex-direction: column;
  gap: var(--hst-4);
  width: 100%;
}
.hst-shell .hst-teacher-lesson-tools {
  display: flex;
  align-items: center;
  gap: var(--hst-4);
  flex-wrap: wrap;
}
.hst-shell .hst-teacher-lesson-search {
  flex: 1;
  min-width: 200px;
  height: 44px;
}
.hst-shell .hst-teacher-lesson-select-all,
.hst-shell .hst-teacher-lesson-count {
  font-size: var(--hst-fs-sm);
  color: var(--hst-ink-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.hst-shell .hst-teacher-lesson-group {
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r);
  overflow: clip;
  background: var(--hst-surface);
}
.hst-shell .hst-teacher-lesson-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hst-2);
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  background: var(--hst-surface-2);
  font-weight: 700;
  font-size: var(--hst-fs-sm);
}
.hst-shell .hst-teacher-lesson-group > summary::-webkit-details-marker {
  display: none;
}
.hst-shell .hst-teacher-lesson-group > summary small {
  color: var(--hst-muted);
  font-weight: 600;
}
.hst-shell .hst-teacher-lesson-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--hst-4);
}
.hst-shell .hst-teacher-lesson-card {
  display: flex;
  align-items: center;
  gap: var(--hst-2);
  padding: 8px 12px;
  border: 1px solid var(--hst-border-strong);
  border-radius: var(--hst-r-xs);
  background: var(--hst-surface);
  cursor: pointer;
  transition: all var(--hst-trans);
}
.hst-shell .hst-teacher-lesson-card:hover {
  border-color: var(--hst-accent);
  background: var(--hst-accent-softer);
}
.hst-shell .hst-teacher-lesson-card input {
  accent-color: var(--hst-accent);
  width: 16px;
  height: 16px;
  flex: none;
}
.hst-shell .hst-teacher-lesson-card:has(input:checked) {
  border-color: var(--hst-accent);
  background: var(--hst-accent-soft);
}
.hst-shell .hst-teacher-lesson-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}
.hst-shell .hst-teacher-lesson-main small {
  color: var(--hst-muted);
  font-size: var(--hst-fs-xs);
}
.hst-shell .hst-teacher-lesson-meta {
  display: flex;
  gap: 6px;
}
.hst-shell .hst-teacher-lesson-meta span {
  font-size: 11px;
  font-weight: 600;
  color: var(--hst-ink-2);
  background: var(--hst-surface-3);
  padding: 2px 8px;
  border-radius: var(--hst-r-pill);
}
.hst-shell .unit-box {
  display: flex;
  align-items: center;
  gap: var(--hst-2);
  flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-xs);
  background: var(--hst-surface-2);
}
.hst-shell .unit-box .lesson-name {
  font-weight: 700;
  font-size: var(--hst-fs-sm);
  margin-inline-end: var(--hst-2);
}
.hst-shell .unit-box label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--hst-fs-sm);
}

/* ---- User picker (notifications) -------------------------------------- */
.hst-shell .hst-user-picker-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hst-shell .hst-user-picker-empty {
  font-size: var(--hst-fs-sm);
  color: var(--hst-muted);
}
.hst-shell .hst-user-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: var(--hst-r-pill);
  background: var(--hst-accent-soft);
  color: var(--hst-accent-press);
}
.hst-shell .hst-user-picker-chip-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.hst-shell .hst-user-picker-chip-info small {
  font-size: 10px;
  color: var(--hst-muted);
}
.hst-shell .hst-user-picker-remove {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.hst-shell .hst-user-picker-results {
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-xs);
  background: var(--hst-surface);
  max-height: 240px;
  overflow-y: auto;
}
.hst-shell .hst-user-picker-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hst-2);
  width: 100%;
  text-align: start;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--hst-surface-3);
  background: none;
  cursor: pointer;
  font: inherit;
}
.hst-shell .hst-user-picker-result:hover {
  background: var(--hst-accent-softer);
}
.hst-shell .hst-user-picker-result.is-selected {
  background: var(--hst-accent-soft);
  color: var(--hst-accent-press);
  font-weight: 600;
}
.hst-shell .hst-user-picker-result small {
  color: var(--hst-muted);
  font-size: var(--hst-fs-xs);
}
.hst-shell .hst-notification-targets[hidden] {
  display: none;
}

/* ---- Header notification items (re-rendered by hst-header-notifications) */
.hst-shell .hst-header-notification-list {
  display: flex;
  flex-direction: column;
  gap: var(--hst-2);
}
.hst-shell .hst-header-notification-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hst-4);
  padding: var(--hst-4) var(--hst-4);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r);
  background: var(--hst-surface);
}
.hst-shell .hst-header-notification-item.is-unread {
  border-inline-start: 3px solid var(--hst-accent);
  background: var(--hst-accent-softer);
}
.hst-shell .hst-header-notification-title-row {
  display: flex;
  align-items: center;
  gap: var(--hst-2);
}
.hst-shell .hst-header-notification-title-row strong {
  font-size: var(--hst-fs);
}
.hst-shell .hst-header-notification-title-row span {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--hst-r-pill);
  background: var(--hst-surface-3);
  color: var(--hst-muted);
}
.hst-shell
  .hst-header-notification-item.is-unread
  .hst-header-notification-title-row
  span {
  background: var(--hst-accent-soft);
  color: var(--hst-accent-press);
}
.hst-shell .hst-header-notification-main p {
  font-size: var(--hst-fs-sm);
  color: var(--hst-muted);
  margin-top: 4px;
}
.hst-shell .hst-header-notification-item-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  flex: none;
}
.hst-shell .hst-header-notification-item-actions a,
.hst-shell .hst-header-notification-item-actions button {
  font: inherit;
  font-size: var(--hst-fs-xs);
  font-weight: 600;
  color: var(--hst-accent);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 2px 4px;
}
.hst-shell .hst-header-notification-empty {
  font-size: var(--hst-fs-sm);
  color: var(--hst-muted);
  text-align: center;
  padding: var(--hst-5);
}

/* ---- Avatar cropper (hst-profile.js) ----------------------------------- */
.hst-shell .hst-avatar-cropper[hidden] {
  display: none;
}
.hst-shell .hst-avatar-cropper {
  display: flex;
  flex-direction: column;
  gap: var(--hst-4);
  align-items: center;
  width: 100%;
}
.hst-shell .hst-avatar-preview {
  position: relative;
  width: 224px;
  height: 224px;
  max-width: 100%;
  border-radius: var(--hst-r);
  overflow: hidden;
  background: var(--hst-surface-3);
  touch-action: none;
  cursor: grab;
}
.hst-shell .hst-avatar-preview.is-dragging {
  cursor: grabbing;
}
/* JS sizes & transforms this img directly — must use PHYSICAL left/top because
   the cropper math assumes translate(-50%,-50%) from the left edge (RTL would flip it) */
.hst-shell .hst-avatar-preview img {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  max-width: none;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
/* circular crop frame */
.hst-shell .hst-avatar-preview span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78%;
  height: 78%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(15, 28, 36, 0.45);
  pointer-events: none;
  z-index: 2;
}
.hst-shell [data-hst-avatar-save].is-loading {
  opacity: 0.7;
  pointer-events: none;
}

/* ---- Standardized busy/loading state for action buttons --------------- */
.hst-shell .hst-btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  opacity: 0.85;
}
.hst-shell .hst-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: #fff;
  animation: hst-btn-spin 0.6s linear infinite;
}
.hst-shell .hst-btn--soft.is-loading::after,
.hst-shell .hst-btn--ghost.is-loading::after {
  color: var(--hst-accent, #0d9488);
}
@keyframes hst-btn-spin {
  to { transform: rotate(360deg); }
}

/* ---- Full-page loading state for edit pages --------------------------- */
.hst-shell .hst-edit-page {
  position: relative;
}
.hst-shell .hst-edit-page__overlay {
  display: none;
}
.hst-shell .hst-edit-page.is-loading .hst-edit-page__overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hst-3, 12px);
  background: var(--hst-bg, #fff);
  border-radius: var(--hst-r-lg, 16px);
  color: var(--hst-muted, #64748b);
  font-size: var(--hst-fs-sm, 0.9rem);
}
.hst-shell .hst-edit-page.is-loading > .hst-card {
  visibility: hidden;
}
.hst-shell .hst-edit-page__overlay .hst-loader__spinner {
  width: 38px;
  height: 38px;
}

/* ---- Stronger unread indicator: a pulsing accent dot ------------------ */
.hst-shell .hst-notice-card.is-unread .hst-notice-card__title h4,
.hst-shell .hst-header-notification-item.is-unread .hst-header-notification-title-row strong {
  position: relative;
  padding-inline-start: 16px;
}
.hst-shell .hst-notice-card.is-unread .hst-notice-card__title h4::before,
.hst-shell .hst-header-notification-item.is-unread .hst-header-notification-title-row strong::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hst-accent, #0d9488);
  box-shadow: 0 0 0 0 var(--hst-accent, #0d9488);
  animation: hst-unread-pulse 2s ease-out infinite;
}
@keyframes hst-unread-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.45); }
  70%  { box-shadow: 0 0 0 6px rgba(13, 148, 136, 0); }
  100% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0); }
}

/* ==========================================================================
   Weekly schedule — JS-injected cards, drag states, progress
   ========================================================================== */
.hst-shell .hst-schedule-bank {
  display: flex;
  flex-direction: column;
  gap: var(--hst-2);
  max-height: 460px;
  overflow-y: auto;
}
.hst-shell .hst-schedule-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 28px 8px 10px;
  border-radius: var(--hst-r-xs);
  background: var(--hst-accent-soft);
  color: var(--hst-accent-press);
  border-inline-start: 3px solid var(--hst-accent);
  cursor: grab;
  user-select: none;
}
.hst-shell .hst-schedule-card:active {
  cursor: grabbing;
}
.hst-shell .hst-schedule-card.is-dragging {
  opacity: 0.5;
}
.hst-shell .hst-schedule-card strong {
  font-size: var(--hst-fs-xs);
  font-weight: 700;
}
.hst-shell .hst-schedule-card span {
  font-size: 11px;
  color: var(--hst-ink-2);
}
.hst-shell .hst-schedule-card small {
  font-size: 10px;
  color: var(--hst-muted);
}
.hst-shell .hst-schedule-card--odd {
  background: var(--hst-info-soft);
  border-inline-start-color: var(--hst-info);
  color: var(--hst-info);
}
.hst-shell .hst-schedule-card--even {
  background: var(--hst-warning-soft);
  border-inline-start-color: var(--hst-warning);
  color: var(--hst-warning);
}
.hst-shell .hst-schedule-bank-item {
  cursor: grab;
}
.hst-shell .hst-schedule-remove,
.hst-shell #hst-schedule-remove,
.hst-shell .hst-close-button {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(225, 29, 72, 0.12);
  color: var(--hst-danger);
  border: 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.hst-shell .hst-schedule-remove:hover,
.hst-shell #hst-schedule-remove:hover {
  background: var(--hst-danger);
  color: #fff;
}
.hst-shell .hst-schedule-week-type {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.hst-shell .hst-schedule-week-type span {
  font-size: 10px;
  color: var(--hst-muted);
}
.hst-shell .hst-schedule-week-select {
  font-size: var(--hst-fs-xs);
  padding: 4px 6px;
}
.hst-shell .hst-schedule-slot.is-drag-allowed,
.hst-shell .hst-schedule-slot.is-drag-over {
  border-color: var(--hst-accent);
  background: var(--hst-accent-softer);
}
.hst-shell .hst-schedule-slot.is-drag-denied {
  border-color: var(--hst-danger);
  background: var(--hst-danger-soft);
}
.hst-shell .hst-schedule-progress {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-start: 20px;
  z-index: 1100;
  width: min(360px, calc(100vw - 40px));
  display: flex;
  flex-direction: column;
  gap: var(--hst-2);
  padding: var(--hst-4);
  border-radius: var(--hst-r-lg);
  background: var(--hst-surface);
  box-shadow: var(--hst-shadow-3);
  border: 1px solid var(--hst-border);
}
.hst-shell .hst-schedule-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hst-2);
  font-size: var(--hst-fs-sm);
}
.hst-shell .hst-schedule-progress-text {
  color: var(--hst-muted);
  font-size: var(--hst-fs-xs);
}
.hst-shell .hst-schedule-progress-track {
  height: 8px;
  border-radius: var(--hst-r-pill);
  background: var(--hst-surface-3);
  overflow: hidden;
}
.hst-shell .hst-schedule-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--hst-accent);
  border-radius: inherit;
  transition: width var(--hst-dur-slow, 360ms) var(--hst-ease-soft, ease);
}
.hst-shell .hst-schedule-progress-cancel {
  align-self: flex-start;
}

/* ---- Score entry inputs (hst-enter-scores injects rows) ---------------- */
.hst-shell .hst-score-input {
  max-width: 110px;
  text-align: center;
}
.hst-shell .hst-score-description {
  width: 100%;
}
.hst-shell #hst-score-form.is-readonly input {
  background: var(--hst-surface-3);
  pointer-events: none;
}
.hst-shell #hst-score-form[hidden],
.hst-shell #hst-score-summary[hidden] {
  display: none;
}

/* ---- Attendance (rows injected by hst-attendance.js; status is a <select>) */
.hst-shell .hst-attendance-row td {
  vertical-align: middle;
}
.hst-shell .hst-attendance-student {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--hst-3);
}
.hst-shell .hst-attendance-student__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.hst-shell .hst-attendance-student small {
  color: var(--hst-muted);
  font-size: var(--hst-fs-xs);
}
.hst-shell .hst-attendance-status {
  min-width: 130px;
}
.hst-shell .hst-attendance-late {
  max-width: 90px;
  text-align: center;
}
.hst-shell .hst-attendance-note {
  width: 100%;
}
.hst-shell .hst-attendance-empty {
  text-align: center;
  color: var(--hst-muted);
  padding: var(--hst-6);
}

/* ---- .hst-notice (injected by several scripts) alias to alert ---------- */
.hst-shell .hst-notice {
  font-size: var(--hst-fs-sm);
  color: var(--hst-ink-2);
  background: var(--hst-surface-2);
  border: 1px solid var(--hst-border);
  border-inline-start: 3px solid var(--hst-border-strong);
  border-radius: var(--hst-r-xs);
  padding: 12px 14px;
}

/* ---- Admin screen (WP wp-admin wraps our shell) ----------------------- */
.wp-admin .hst-shell * {
  box-sizing: border-box;
}
/* WordPress resets some form control styles — re-assert ours on the settings page */
.wp-admin .hst-shell select,
.wp-admin .hst-shell input[type="text"],
.wp-admin .hst-shell input[type="url"],
.wp-admin .hst-shell input[type="password"],
.wp-admin .hst-shell input[type="number"],
.wp-admin .hst-shell textarea {
  min-height: 44px;
  box-shadow: none;
}
.wp-admin .hst-shell textarea {
  min-height: 90px;
}
.wp-admin #wpcontent {
  padding-inline-start: 0;
}

/* ---- Grade entry: student avatar in the name cell --------------------- */
.hst-shell .hst-score-name__inner {
  display: inline-flex;
  align-items: center;
  gap: var(--hst-3, 10px);
}
.hst-shell .hst-score-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--hst-surface-3, #eef2f5);
}
.hst-shell .hst-score-avatar--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--hst-fs-sm, 0.85rem);
  font-weight: 700;
  color: var(--hst-accent, #0d9488);
  background: var(--hst-accent-soft, #ccfbf1);
}

/* ==========================================================================
   Jalali datepicker (hst-jalali-datepicker.js injects its own overlay)
   ========================================================================== */
.hst-jdp-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  place-items: center;
  padding: 16px;
  font-family: var(--hst-font, "Vazirmatn", Tahoma, sans-serif);
  direction: rtl;
  color: var(--hst-ink);
}
.hst-jdp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 28, 36, 0.5);
  backdrop-filter: blur(3px);
  animation: hst-fade var(--hst-dur, 240ms) var(--hst-ease, ease);
}
.hst-jdp.hst-modal-box {
  position: relative;
  z-index: 1;
  width: min(360px, 100%);
  animation: hst-modal-enter var(--hst-dur-slow, 360ms)
    var(--hst-ease-soft, ease);
}
@keyframes hst-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.hst-jdp-modal-title {
  font-size: var(--hst-fs-lg, 19px);
  font-weight: 700;
}
.hst-jdp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.hst-jdp-head strong {
  font-size: var(--hst-fs-md, 16px);
  font-weight: 700;
}
.hst-jdp-nav {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--hst-border-strong, #cdd5dd);
  background: var(--hst-surface, #fff);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--hst-ink-2, #44525f);
}
.hst-jdp-nav:hover {
  border-color: var(--hst-accent, #0d9488);
  color: var(--hst-accent-press, #115e57);
}
.hst-jdp-weekdays,
.hst-jdp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.hst-jdp-weekdays {
  margin-bottom: 6px;
}
.hst-jdp-weekdays span {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--hst-muted, #74828f);
}
.hst-jdp-day {
  aspect-ratio: 1;
  border: 0;
  border-radius: 8px;
  background: var(--hst-surface-2, #f6f8fa);
  cursor: pointer;
  font: inherit;
  font-size: var(--hst-fs-sm, 13px);
  color: var(--hst-ink, #1b2733);
  transition:
    background var(--hst-trans),
    color var(--hst-trans),
    transform var(--hst-trans),
    box-shadow var(--hst-trans);
}
.hst-jdp-day:hover {
  background: var(--hst-accent-soft, #d3faf2);
}
.hst-jdp-day.is-empty {
  background: none;
  cursor: default;
}
.hst-jdp-day.is-disabled {
  background: none;
  color: var(--hst-faint, #c2cdd6);
  cursor: not-allowed;
  opacity: 0.45;
  text-decoration: line-through;
}
.hst-jdp-day.is-disabled:hover {
  background: none;
}
.hst-jdp-day.is-today {
  box-shadow: inset 0 0 0 1px var(--hst-accent, #0d9488);
  color: var(--hst-accent-press, #115e57);
  font-weight: 700;
}
.hst-jdp-day.is-selected {
  background: var(--hst-accent, #0d9488);
  color: #fff;
  font-weight: 700;
}
.hst-jdp-time {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.hst-jdp-time label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--hst-fs-xs, 12px);
  color: var(--hst-muted, #74828f);
}
.hst-jdp-time input,
.hst-jdp input[type="text"],
.hst-jdp input[type="number"] {
  width: 90px;
  height: 42px;
  padding: 0 12px;
  font: inherit;
  font-size: var(--hst-fs-sm, 13px);
  color: var(--hst-ink, #1b2733);
  background: var(--hst-surface, #fff);
  border: 1px solid var(--hst-border-strong, #cdd5dd);
  border-radius: var(--hst-r-xs, 8px);
  text-align: center;
  -moz-appearance: textfield;
}
.hst-jdp-time input::-webkit-outer-spin-button,
.hst-jdp-time input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.hst-jdp-time input:focus,
.hst-jdp input:focus {
  outline: none;
  border-color: var(--hst-accent, #0d9488);
  box-shadow: 0 0 0 3px
    var(--hst-ring, rgba(var(--hst-accent-rgb, 13, 148, 136), 0.3));
}
.hst-jdp-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
/* Footer buttons use .hst-btn but live outside .hst-shell — restyle here */
.hst-jdp .hst-btn,
.hst-jdp-today,
.hst-jdp-apply {
  flex: 1;
  min-height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: 600;
  font-size: var(--hst-fs-sm, 13px);
  border-radius: var(--hst-r-xs, 8px);
  cursor: pointer;
  border: 1px solid var(--hst-border-strong, #cdd5dd);
  background: var(--hst-surface-2, #f6f8fa);
  color: var(--hst-ink-2, #44525f);
  transition:
    background var(--hst-trans),
    border-color var(--hst-trans),
    color var(--hst-trans),
    box-shadow var(--hst-trans);
}
.hst-jdp .hst-btn:hover,
.hst-jdp-today:hover {
  background: var(--hst-surface-3, #eef1f5);
}
.hst-jdp .hst-jdp-apply {
  background: var(--hst-accent, #0d9488);
  border-color: transparent;
  color: #fff;
}
.hst-jdp .hst-jdp-apply:hover {
  background: var(--hst-accent-press, #115e57);
}

/* Final theme overrides for the Jalali calendar modal, which is appended to <body>. */
.hst-jdp-modal .hst-modal-box,
.hst-jdp-modal .hst-notification-modal-box {
  background: var(--hst-surface) !important;
  color: var(--hst-ink) !important;
  border-color: var(--hst-border) !important;
}
.hst-jdp-modal .hst-modal-header,
.hst-jdp-modal .hst-notification-modal-header {
  background: linear-gradient(
    180deg,
    var(--hst-surface),
    var(--hst-surface-2)
  ) !important;
  border-bottom-color: var(--hst-border) !important;
}
.hst-jdp-modal .hst-modal-footer,
.hst-jdp-modal .hst-notification-modal-footer {
  background: var(--hst-surface-2) !important;
  border-top-color: var(--hst-border) !important;
}
.hst-jdp-modal .hst-jdp-nav:hover,
.hst-jdp-modal .hst-jdp-day.is-today {
  border-color: var(--hst-accent) !important;
  color: var(--hst-accent-press) !important;
}
.hst-jdp-modal .hst-jdp-day:hover {
  background: var(--hst-accent-soft) !important;
}
.hst-jdp-modal .hst-jdp-day.is-selected,
.hst-jdp-modal .hst-jdp-apply {
  background: var(--hst-accent) !important;
  border-color: transparent !important;
  color: var(--hst-on-accent) !important;
}
.hst-jdp-modal .hst-jdp-apply:hover {
  background: var(--hst-accent-press) !important;
}
.hst-jdp-modal :is(input, button):focus,
.hst-jdp-modal :is(input, button):focus-visible {
  outline: none !important;
  border-color: var(--hst-accent) !important;
  box-shadow: 0 0 0 3px var(--hst-ring) !important;
}

/* Live class status widget — aligned with TeacherShow UI system */
.hst-live-class-card {
  margin: 0;
}

.hst-live-class-card .hst-card__header {
  align-items: center;
}

.hst-live-class-card__title {
  min-width: 0;
}

.hst-live-class-card__eyebrow {
  display: block;
  margin-bottom: var(--hst-1);
  color: var(--hst-muted);
  font-size: var(--hst-fs-xs);
  font-weight: 600;
}

.hst-live-class-card h3 {
  margin: 0;
  color: var(--hst-ink);
  font-size: var(--hst-fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hst-live-class-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 11px;
  border-radius: var(--hst-r-pill);
  border: 1px solid transparent;
  font-size: var(--hst-fs-xs);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.hst-live-class-status i {
  width: 8px;
  height: 8px;
  border-radius: var(--hst-r-pill);
  background: currentColor;
}

.hst-live-class-status--active {
  color: var(--hst-success);
  background: var(--hst-success-soft);
}

.hst-live-class-status--free {
  color: var(--hst-warning);
  background: var(--hst-warning-soft);
}

.hst-live-class-status--idle {
  color: var(--hst-muted);
  background: var(--hst-surface-3);
  border-color: var(--hst-border);
}

.hst-live-class-now {
  display: flex;
  align-items: center;
  gap: var(--hst-4);
  padding: var(--hst-4);
  border-radius: var(--hst-r);
  background: var(--hst-surface-2);
  border: 1px solid var(--hst-border);
}

.hst-live-class-now strong {
  display: block;
  margin-bottom: var(--hst-1);
  color: var(--hst-ink);
  font-size: var(--hst-fs-md);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.hst-live-class-now p {
  margin: 0;
  color: var(--hst-muted);
  font-size: var(--hst-fs-sm);
  line-height: 1.8;
}

.hst-live-class-pulse {
  position: relative;
  width: 12px;
  height: 12px;
  min-width: 12px;
  border-radius: var(--hst-r-pill);
  background: var(--hst-muted);
  color: var(--hst-muted);
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
}

.hst-live-class-pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid currentColor;
  opacity: 0.4;
  animation: hst-live-pulse 1.45s ease-out infinite;
}

.hst-live-class-pulse--active {
  background: var(--hst-success);
  color: var(--hst-success);
}

.hst-live-class-pulse--free {
  background: var(--hst-warning);
  color: var(--hst-warning);
}

.hst-live-class-pulse--idle {
  background: var(--hst-muted);
  color: var(--hst-muted);
}

.hst-live-class-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hst-2);
}

.hst-live-class-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: var(--hst-r-pill);
  background: var(--hst-surface-3);
  color: var(--hst-ink-2);
  border: 1px solid var(--hst-border);
  font-size: var(--hst-fs-xs);
  font-weight: 600;
}

.hst-live-class-list {
  display: grid;
  gap: var(--hst-2);
}

.hst-live-class-item {
  display: grid;
  grid-template-columns: minmax(110px, 0.75fr) minmax(160px, 1fr) auto;
  align-items: center;
  gap: var(--hst-4);
  padding: 10px 12px;
  border-radius: var(--hst-r);
  border: 1px solid var(--hst-border);
  background: var(--hst-surface);
  transition:
    background var(--hst-trans),
    border-color var(--hst-trans);
}

.hst-live-class-item:hover {
  background: var(--hst-accent-softer);
  border-color: var(--hst-accent-soft);
}

.hst-live-class-item strong {
  color: var(--hst-ink);
  font-size: var(--hst-fs-sm);
  font-weight: 800;
}

.hst-live-class-item span {
  color: var(--hst-ink-2);
  font-size: var(--hst-fs-sm);
}

.hst-live-class-item small {
  justify-self: end;
  padding: 4px 9px;
  border-radius: var(--hst-r-pill);
  background: var(--hst-accent-soft);
  color: var(--hst-accent-press);
  font-size: var(--hst-fs-xs);
  font-weight: 700;
  white-space: nowrap;
}

@keyframes hst-live-pulse {
  0% {
    transform: scale(0.7);
    opacity: 0.55;
  }
  80%,
  100% {
    transform: scale(1.75);
    opacity: 0;
  }
}

/* ==========================================================================
   HST Safe Motion System — smooth interactions without touching landing footer
   -------------------------------------------------------------------------- */
.hst-shell,
.hst-modal,
.hst-jdp-modal,
.hst-toast-container {
  --hst-motion-y-sm: 2px;
  --hst-motion-y: 6px;
  --hst-motion-scale: 0.985;
}

@keyframes hst-modal-enter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes hst-modal-leave {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
}
@keyframes hst-toast-enter {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes hst-toast-leave {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-12px) scale(0.97);
  }
}
@keyframes hst-soft-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Only interactive/control elements get global timing; layout/footer blocks are intentionally excluded. */
.hst-shell
  :where(
    a,
    button,
    input,
    select,
    textarea,
    .hst-btn,
    .hst-tile,
    .hst-bell,
    .hst-badge,
    .hst-header__link,
    .hst-tabs__btn,
    .hst-tab,
    .hst-login__method,
    .hst-table tbody tr,
    .hst-admin__nav a,
    .hst-admin__tab,
    .hst-note,
    .hst-list-item,
    .hst-schedule-cell,
    .hst-jdp-day
  ),
.hst-landing
  :where(
    a,
    button,
    .hst-btn,
    .hst-landing__feature,
    .hst-landing__role,
    .hst-landing__nav-link,
    .hst-landing__link-cta span
  ) {
  transition-timing-function: var(--hst-ease, ease) !important;
}

.hst-shell
  :where(
    .hst-card,
    .hst-panel,
    .hst-section,
    .hst-admin__section,
    .hst-stat,
    .hst-live-class-card
  ) {
  animation: hst-soft-in var(--hst-dur-slow, 360ms) var(--hst-ease-soft, ease)
    both;
}

.hst-shell
  :where(
    .hst-btn,
    .hst-tile,
    .hst-card-action,
    .hst-header__link,
    .hst-bell,
    .hst-admin__nav a,
    .hst-login__method
  ):hover,
.hst-landing
  :where(
    .hst-btn,
    .hst-landing__feature,
    .hst-landing__role,
    .hst-landing__nav-link
  ):hover {
  transition-duration: var(--hst-dur, 240ms) !important;
}

.hst-shell :where(.hst-btn, .hst-tile, .hst-card-action, .hst-bell):active,
.hst-landing :where(.hst-btn):active {
  transform: translateY(1px) scale(0.995);
}

.hst-shell :where(input, select, textarea, .hst-input, .hst-select) {
  transition:
    border-color var(--hst-trans),
    box-shadow var(--hst-trans),
    background-color var(--hst-trans),
    color var(--hst-trans),
    transform var(--hst-trans) !important;
}
.hst-shell :where(input, select, textarea, .hst-input, .hst-select):focus {
  transform: translateY(-1px);
}

.hst-shell :where(.hst-modal__panel, .hst-modal-content, .hst-modal-box) {
  will-change: transform, opacity;
}
.hst-modal.is-active
  :where(.hst-modal__panel, .hst-modal-content, .hst-modal-box) {
  animation: hst-modal-enter var(--hst-dur-slow, 360ms)
    var(--hst-ease-soft, ease) both;
}
.hst-modal.is-closing
  :where(.hst-modal__panel, .hst-modal-content, .hst-modal-box) {
  animation: hst-modal-leave var(--hst-dur, 240ms) var(--hst-ease, ease) both;
}
.hst-toast {
  will-change: transform, opacity;
  transition:
    opacity var(--hst-trans),
    transform var(--hst-trans),
    box-shadow var(--hst-trans);
}
.hst-toast.is-leaving {
  animation: hst-toast-leave var(--hst-dur, 240ms) var(--hst-ease, ease) both !important;
}
.hst-jdp-modal .hst-jdp-day:hover,
.hst-shell .hst-jdp-day:hover {
  transform: translateY(-1px);
}

/* Keep professional footer layout from the previous footer patch intact. */
.hst-landing__foot,
.hst-landing__foot *,
.hst-landing__foot *::before,
.hst-landing__foot *::after {
  animation-name: none;
}

/* ==========================================================================
   HST landing footer visibility fixes
   --------------------------------------------------------------------------
   Keep the footer brand mark bright and keep inverted CTA text readable on hover.
*/
.hst-landing a.hst-btn--invert,
.hst-landing a.hst-btn--invert:hover,
.hst-landing a.hst-btn--invert:focus,
.hst-landing a.hst-btn--invert:active {
  color: var(--hst-accent-press) !important;
}
.hst-landing a.hst-btn--invert svg,
.hst-landing a.hst-btn--invert:hover svg,
.hst-landing a.hst-btn--invert:focus svg {
  stroke: currentColor !important;
}
.hst-landing__foot .hst-landing__brand > span.hst-landing__logo {
  color: #fff !important;
  background: linear-gradient(
    135deg,
    var(--hst-accent),
    var(--hst-accent-press)
  );
  box-shadow: 0 10px 24px -14px var(--hst-accent);
}
.hst-landing__foot .hst-landing__brand > span.hst-landing__logo svg {
  color: #fff !important;
  stroke: currentColor !important;
}
.hst-landing__foot
  .hst-landing__brand
  > span:not(.hst-landing__logo):not(.hst-landing__logo--img) {
  font-weight: 800;
  color: var(--hst-ink) !important;
}

.hst-user-picker__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--hst-2);
  flex-wrap: wrap;
}

/* ---- Checklist polish: consistent spacing and post-guide cleanup -------- */
.hst-shell .hst-card__body > :last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
.hst-shell .hst-form > .hst-student-lessons-section,
.hst-shell .hst-form > #lesson-checkboxes:not([hidden]),
.hst-shell .hst-form > #unit-checkboxes:not([hidden]) {
  margin-top: calc(var(--hst-2) * -1);
}
.hst-shell .hst-student-lessons-section {
  display: flex;
  flex-direction: column;
  gap: var(--hst-4);
}
.hst-shell .hst-student-lessons-section[hidden] {
  display: none !important;
}
.hst-shell #lesson-checkboxes:empty,
.hst-shell #unit-checkboxes:empty {
  display: none !important;
}
.hst-shell #unit-checkboxes:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--hst-2);
}
.hst-shell .unit-box + .unit-box {
  margin-top: 0;
}

/* Weekly schedule manager spacing alignment */
.hst-shell .hst-schedule-page .hst-card__body {
  gap: var(--hst-4);
}
.hst-shell .hst-schedule-page .hst-toolbar {
  margin-bottom: 0;
}
.hst-shell .hst-schedule-options {
  margin-top: 0;
  margin-bottom: 0;
  gap: var(--hst-4);
}
.hst-shell .hst-schedule-option-card {
  min-height: 0;
}
.hst-shell .hst-schedule-blocked-grid {
  margin-top: var(--hst-2);
}
.hst-shell .hst-schedule-bank-tools {
  margin-bottom: 0;
}
.hst-shell .hst-schedule-bank {
  margin-top: 0;
}
.hst-shell .hst-schedule-bank > .hst-alert:first-child {
  margin-top: 0;
}

/* Score audit summary spacing */
.hst-shell .hst-score-audit-summary,
.hst-shell .hst-card__body > .hst-stat-row {
  margin-block: 0;
}
.hst-shell .hst-card__body > .hst-stat-row + * {
  margin-top: 0;
}

/* Exams: after removing the smart guide, the form should use full width. */
.hst-shell .hst-exam-form-layout {
  grid-template-columns: minmax(0, 1fr);
}
.hst-shell .hst-exams-page .hst-grid--1 > .hst-card {
  width: 100%;
}

/* Seat labels spacing cleanup */
.hst-shell .hst-seat-filter-bar {
  margin-bottom: 0;
}
.hst-shell .hst-seat-options {
  margin-top: 0;
}
.hst-shell .hst-seat-toggles {
  margin-top: 0;
}
.hst-shell .hst-seat-actions {
  margin-top: 0;
}
.hst-shell .hst-seat-summary {
  margin-bottom: 0;
}
.hst-shell .hst-seat-summary + * {
  margin-top: 0;
}

/* Dashboard bottom padding consistency inside the shell. */
.hst-shell > .hst-page:has(.hst-dashboard) {
  padding-bottom: var(--hst-5);
}
.hst-shell .hst-dashboard {
  margin-bottom: 0;
}

/* ---- Checklist v2: global schedule modal + score audit spacing -------- */
.hst-shell .hst-schedule-global-modal {
  z-index: 1200;
}
.hst-shell .hst-schedule-global-panel {
  width: min(680px, 100%);
}
.hst-shell .hst-schedule-global-modal .hst-schedule-progress {
  position: static;
  inset: auto;
  z-index: auto;
  width: 100%;
  box-shadow: none;
}
.hst-shell .hst-schedule-global-modal .hst-schedule-global-note {
  margin: 0;
}
.hst-shell .hst-schedule-global-result {
  display: flex;
  flex-direction: column;
  gap: var(--hst-2);
}
.hst-shell .hst-schedule-global-result[hidden] {
  display: none !important;
}
.hst-shell .hst-schedule-global-close:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.hst-shell .hst-score-audit-page .hst-card__body {
  gap: var(--hst-4);
}
.hst-shell .hst-score-audit-page .hst-stat-row {
  margin-block: var(--hst-2) 0;
}
.hst-shell .hst-score-audit-page .hst-stat-row + .hst-alert,
.hst-shell .hst-score-audit-page .hst-stat-row + .hst-filters {
  margin-top: var(--hst-2);
}
.hst-shell .hst-score-audit-page .hst-filters {
  margin-bottom: 0;
}
.hst-shell .hst-score-audit-page .hst-filters + .hst-table-wrap {
  margin-top: 0;
}

/* ---- Global schedule modal: overflow hardening (consolidated) ----------
   Box-model safety only. Sizing, padding and small-screen layout live in the
   canonical block below ("Make the schedule planner generated modal ..."). */
.hst-schedule-global-modal.hst-modal {
  box-sizing: border-box;
  overflow-x: hidden;
}
.hst-schedule-global-modal .hst-modal__panel,
.hst-schedule-global-modal .hst-schedule-global-panel {
  box-sizing: border-box;
}
.hst-schedule-global-modal .hst-modal__body,
.hst-schedule-global-modal .hst-modal__header,
.hst-schedule-global-modal .hst-modal__footer,
.hst-schedule-global-modal .hst-schedule-progress,
.hst-schedule-global-modal .hst-schedule-global-result,
.hst-schedule-global-modal .hst-alert {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.hst-schedule-global-modal .hst-modal__footer .hst-btn {
  white-space: normal;
}

/* ---- Admin + modal + settings cleanup patch --------------------------- */
.hst-shell--app,
.hst-shell--admin {
  min-height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
}

.hst-theme-card.is-active {
  pointer-events: auto;
}
.hst-theme-card input:checked + .hst-theme-card__swatches ~ strong {
  color: var(--hst-accent-press);
}

[data-sms-providers][hidden] {
  display: none !important;
}
.hst-sms-settings .hst-form__row {
  align-items: start;
}

.hst-header-notification-modal .hst-btn:disabled,
[data-hst-mark-all-header-notifications]:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none !important;
}

.hst-seat-labels-page .hst-seat-print-area > .hst-alert,
.hst-seat-labels-page .hst-seat-print-area > .hst-alert.hst-alert {
  width: 100%;
  grid-column: 1 / -1;
  display: block;
}

/* Make the schedule planner generated modal use the same modal system as the rest of TeacherShow. */
.hst-schedule-global-modal.hst-modal {
  font-family: var(--hst-font, Vazir, Tahoma, Arial, sans-serif);
  color: var(--hst-ink);
  direction: rtl;
  padding: var(--hst-5);
  place-items: center;
  background: rgba(15, 28, 36, 0.52);
  backdrop-filter: blur(3px);
}
.hst-schedule-global-modal .hst-modal__panel,
.hst-schedule-global-modal .hst-schedule-global-panel {
  width: min(640px, calc(100vw - 32px));
  max-height: min(86vh, 720px);
  margin: 0 auto;
  border-radius: var(--hst-r-lg);
  background: var(--hst-surface, #fff);
  box-shadow: var(--hst-shadow-3);
  border: 1px solid var(--hst-border);
  overflow: hidden;
}
.hst-schedule-global-modal .hst-modal__header,
.hst-schedule-global-modal .hst-modal__body,
.hst-schedule-global-modal .hst-modal__footer {
  padding: var(--hst-5);
}
.hst-schedule-global-modal .hst-modal__body {
  gap: var(--hst-4);
}
.hst-schedule-global-modal .hst-modal__footer {
  justify-content: flex-start;
  gap: var(--hst-3);
  flex-wrap: wrap;
}
.hst-schedule-global-modal .hst-modal__footer .hst-btn {
  min-height: 40px;
  font-family: inherit;
}

/* ---- Global schedule modal: themed progress bar instead of status text ---- */
.hst-schedule-global-modal .hst-schedule-global-progress {
  display: flex;
  flex-direction: column;
  gap: var(--hst-3);
  padding: var(--hst-4);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r);
  background: linear-gradient(180deg, var(--hst-surface), var(--hst-surface-2));
  box-shadow: var(--hst-shadow-sm);
}
.hst-schedule-global-modal .hst-schedule-global-progress[hidden] {
  display: none !important;
}
.hst-schedule-global-modal .hst-schedule-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hst-3);
}
.hst-schedule-global-modal .hst-schedule-progress-title {
  color: var(--hst-text);
  font-size: var(--hst-fs-sm);
  font-weight: 800;
}
.hst-schedule-global-modal .hst-schedule-progress-percent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 28px;
  padding: 0 var(--hst-3);
  border-radius: var(--hst-r-pill);
  color: var(--hst-accent);
  background: var(--hst-accent-soft);
  font-size: var(--hst-fs-xs);
  font-weight: 900;
  direction: ltr;
}
.hst-schedule-global-modal .hst-schedule-progress-track {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: var(--hst-r-pill);
  background: var(--hst-surface-3);
}
.hst-schedule-global-modal .hst-schedule-progress-bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--hst-accent),
    var(--hst-accent-2, var(--hst-accent))
  );
  box-shadow:
    0 0 0 1px rgba(var(--hst-accent-rgb), 0.08),
    0 8px 18px rgba(var(--hst-accent-rgb), 0.18);
  transition: width var(--hst-dur-slow, 360ms) var(--hst-ease-soft, ease);
}
.hst-schedule-global-modal .hst-schedule-progress-hint {
  margin: 0;
  color: var(--hst-muted);
  font-size: var(--hst-fs-xs);
  line-height: 1.9;
}

/* ---- Schedule modal hardening: keep backdrop and controls consistent ---- */
.hst-schedule-global-modal.hst-modal.is-open {
  display: grid;
  background: rgba(15, 28, 36, 0.52);
  backdrop-filter: blur(3px);
}
.hst-schedule-global-modal .hst-modal__panel,
.hst-schedule-global-modal .hst-schedule-global-panel {
  background: var(--hst-surface, #fff) !important;
  color: var(--hst-ink, #1b2733);
  box-shadow: var(--hst-shadow-3);
}
.hst-schedule-global-modal .hst-modal__header,
.hst-schedule-global-modal .hst-modal__footer {
  background: var(--hst-surface-2, #f6f8fa);
}
.hst-schedule-global-modal .hst-modal__body {
  background: var(--hst-surface, #fff);
}
.hst-schedule-global-modal .hst-modal__close {
  display: inline-grid;
  place-items: center;
  font-family: inherit;
  font-size: 24px;
  line-height: 1;
  width: 34px;
  height: 34px;
  padding: 0;
}
.hst-schedule-global-modal .hst-schedule-progress {
  display: flex;
  flex-direction: column;
  gap: var(--hst-3);
  padding: var(--hst-4);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r);
  background: var(--hst-surface-2);
}
.hst-schedule-global-modal .hst-schedule-progress[hidden] {
  display: none !important;
}
.hst-schedule-global-modal .hst-schedule-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hst-3);
  font-size: var(--hst-fs-sm);
}
.hst-schedule-global-modal .hst-schedule-progress-percent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 28px;
  padding: 0 var(--hst-3);
  border-radius: var(--hst-r-pill);
  color: var(--hst-accent-press);
  background: var(--hst-accent-soft);
  font-weight: 800;
}
.hst-schedule-global-modal .hst-schedule-progress-track {
  height: 8px;
  border-radius: var(--hst-r-pill);
  background: var(--hst-surface-3);
  overflow: hidden;
}
.hst-schedule-global-modal .hst-schedule-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--hst-accent);
  transition: width var(--hst-dur-slow, 360ms) var(--hst-ease-soft, ease);
}
.hst-schedule-global-modal .hst-schedule-progress-hint {
  margin: 0;
  color: var(--hst-muted);
  font-size: var(--hst-fs-xs);
}

/* ---- Admin typography hardening ---------------------------------------
   WordPress admin applies its own heading font with high specificity. Keep
   every title inside TeacherShow settings on the plugin font. */
.wp-admin .hst-shell,
.wp-admin
  .hst-shell
  :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .hst-card__title,
    .hst-section__title,
    .hst-section-title,
    .hst-admin__hero,
    .hst-admin__hero *,
    .hst-admin__tab,
    .hst-form__label,
    .hst-label,
    .hst-btn,
    button,
    input,
    select,
    textarea
  ) {
  font-family: var(
    --hst-font,
    "Vazirmatn",
    Tahoma,
    Arial,
    sans-serif
  ) !important;
}

.wp-admin
  .hst-shell
  :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .hst-card__title,
    .hst-section__title,
    .hst-section-title
  ) {
  letter-spacing: 0;
}

/* ---- iOS mobile hardening -------------------------------------------------
   Prevent Safari input auto-zoom, keep compact cards inside their borders, and
   make the Jalali date modal fit very small iPhones. */
.hst-shell,
.hst-landing,
.hst-modal,
.hst-jdp-modal {
  -webkit-text-size-adjust: 100%;
}

.hst-shell :where(input, select, textarea, button),
.hst-landing :where(input, select, textarea, button),
.hst-modal :where(input, select, textarea, button),
.hst-jdp-modal :where(input, select, textarea, button) {
  font-size: max(16px, 1em);
}

.hst-shell
  :where(
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="number"],
    input[type="tel"],
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    select,
    textarea
  ),
.hst-jdp-modal
  :where(input[type="number"], input[type="text"], select, textarea) {
  font-size: 16px !important;
  transform: translateZ(0);
}

.hst-shell
  :where(
    .hst-card,
    .hst-panel,
    .hst-section,
    .hst-stat,
    .hst-tile,
    .hst-card-action,
    .hst-quick-action,
    .hst-dashboard-card,
    .hst-admin__section,
    .hst-notice-card
  ) {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.hst-shell
  :where(
    .hst-card *,
    .hst-panel *,
    .hst-section *,
    .hst-stat *,
    .hst-tile *,
    .hst-card-action *,
    .hst-quick-action *,
    .hst-dashboard-card *,
    .hst-admin__section *,
    .hst-notice-card *
  ) {
  min-width: 0;
}

.hst-shell
  :where(
    .hst-card,
    .hst-panel,
    .hst-section,
    .hst-stat,
    .hst-tile,
    .hst-card-action,
    .hst-quick-action,
    .hst-dashboard-card,
    .hst-admin__section,
    .hst-notice-card
  )
  :where(h1, h2, h3, h4, p, span, small, strong, a, button) {
  overflow-wrap: anywhere;
}

.hst-shell
  :where(
    .hst-grid,
    .hst-dashboard-grid,
    .hst-stats-grid,
    .hst-actions-grid,
    .hst-quick-actions,
    .hst-cards-grid
  ) {
  min-width: 0;
}

.hst-shell
  :where(
    .hst-grid,
    .hst-dashboard-grid,
    .hst-stats-grid,
    .hst-actions-grid,
    .hst-quick-actions,
    .hst-cards-grid
  )
  > * {
  min-width: 0;
  max-width: 100%;
}

.hst-jdp-modal {
  display: grid;
  padding: max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
  overflow: hidden;
}

.hst-jdp.hst-modal-box,
.hst-jdp-modal .hst-modal-box,
.hst-jdp-modal .hst-notification-modal-box {
  width: min(360px, calc(100vw - 16px)) !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100dvh - 16px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.hst-jdp-days,
.hst-jdp-weekdays {
  min-width: 0;
}

.hst-jdp-day {
  min-width: 0;
  min-height: 34px;
  font-size: 14px;
}

/* Keep filter reset buttons usable on iPhone; do not let browser/utility resets collapse them. */
.hst-shell .hst-filter-reset,
.hst-shell [data-hst-filter-reset],
.hst-shell [data-hst-seat-reset] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hst-2);
  min-height: 34px;
  padding: 7px 13px !important;
  border-radius: var(--hst-r-xs);
  line-height: 1.2;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ==========================================================================
   15. REDESIGN REFINEMENT LAYER (2026) — modern-calm evolution
   --------------------------------------------------------------------------
   Loaded last. Refines the existing system WITHOUT renaming any class,
   touching any data-hst-* hook, changing the DOM, or breaking the five
   themes / RTL.
     15.1  Farsi typography corrections
     15.2  Surface & component polish
     15.3  Comprehensive RTL responsive system (down to ~320px / iPhone 6s)
     15.4  prefers-reduced-motion
   ========================================================================== */

/* ---- 15.1 Farsi typography ---------------------------------------------
   Arabic-script text must never be letter-spaced: positive tracking breaks
   cursive joining, negative tracking (used on some headings in the original)
   cramps the script. LTR numerals/code keep their own flow. */
.hst-shell,
.hst-shell :where(h1, h2, h3, h4, h5, h6, p, span, strong, small, a, button,
  label, th, td, summary, li, dt, dd),
.hst-jdp-modal,
.hst-jdp-modal :where(strong, span, button),
.hst-schedule-global-modal,
.hst-schedule-global-modal :where(h1, h2, h3, h4, p, span, strong, small),
.hst-toast,
.hst-modal-box :where(h1, h2, h3, h4, p, span, strong) {
  letter-spacing: normal;
}
.hst-shell .hst-kicker {
  letter-spacing: normal;
  text-transform: none;
}

/* ---- 15.2 Surface & component polish -----------------------------------
   Calmer, flatter surfaces; crisp hairlines; subtle, diffuse depth. */
.hst-shell .hst-card {
  border-radius: var(--hst-r-lg);
  box-shadow: var(--hst-shadow-1);
}
.hst-shell .hst-card__footer {
  background: var(--hst-surface-2);
}
.hst-shell .hst-filters,
.hst-shell .hst-toolbar,
.hst-shell .hst-stat {
  background: var(--hst-surface-2);
  border-color: var(--hst-border);
}
.hst-shell .hst-chip,
.hst-shell .hst-status {
  line-height: 1.5;
}
.hst-shell .hst-header {
  border-radius: var(--hst-r-lg);
  box-shadow: var(--hst-shadow-1);
}
.hst-shell .hst-bell {
  background: var(--hst-surface-2);
}
.hst-shell input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.hst-shell select,
.hst-shell textarea {
  border-color: var(--hst-border-strong);
  border-radius: var(--hst-r-sm);
}
.hst-shell .hst-tile {
  border-radius: var(--hst-r-lg);
}
.hst-shell .hst-modal__panel {
  border: 1px solid var(--hst-border);
}
.hst-shell .hst-modal__header {
  background: var(--hst-surface);
}
.hst-shell .hst-table tbody tr:hover {
  background: var(--hst-accent-softer);
}
.hst-shell .hst-dashboard {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* ---- 15.3 Responsive system --------------------------------------------
   Mobile-first hardening. Everything stays inside the viewport with usable
   hit targets down to the smallest supported width (~320px / iPhone 6s). */
@media (max-width: 1024px) {
  .hst-shell .hst-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hst-shell .hst-schedule-layout {
    grid-template-columns: 1fr;
  }
  .hst-shell .hst-schedule-bank-card {
    position: static;
  }
}

@media (max-width: 920px) {
  .hst-login__card {
    grid-template-columns: 1fr;
  }
  .hst-login__aside {
    display: none;
  }
  .hst-login__brand {
    display: inline-flex;
  }
  .hst-landing__hero {
    grid-template-columns: 1fr;
    gap: var(--hst-6);
    padding: clamp(22px, 5vw, 40px);
  }
  .hst-landing__hero-art {
    min-height: 0;
    margin-top: var(--hst-2);
  }
  .hst-landing__foot-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .hst-shell {
    padding: var(--hst-4) var(--hst-3) var(--hst-7);
    gap: var(--hst-4);
  }
  .hst-shell .hst-grid--2,
  .hst-shell .hst-grid--3 {
    grid-template-columns: 1fr;
  }
  .hst-shell .hst-form__row,
  .hst-shell .hst-assignment-review-form {
    grid-template-columns: 1fr;
  }
  .hst-shell .hst-filters,
  .hst-shell .hst-toolbar,
  .hst-shell .hst-seat-filter-bar {
    grid-template-columns: 1fr;
  }
  .hst-shell .hst-theme-picker {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  .hst-shell .hst-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hst-landing__nav .hst-landing__nav-link {
    display: none;
  }
  .hst-admin .hst-admin__hero {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hst-4);
    padding: var(--hst-5);
  }
  .hst-shell .hst-seat-cols-3,
  .hst-shell .hst-seat-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .hst-shell .hst-header {
    flex-wrap: wrap;
    row-gap: var(--hst-3);
    padding: var(--hst-3) var(--hst-4);
  }
  .hst-shell .hst-header__nav {
    width: 100%;
    justify-content: flex-end;
    gap: var(--hst-3);
  }
  .hst-shell .hst-bell__label,
  .hst-shell .hst-header__link-text {
    display: none;
  }
  .hst-shell .hst-header__link {
    padding: 8px;
  }
  .hst-landing__band {
    flex-direction: column;
    align-items: flex-start;
  }
  .hst-landing__chip {
    display: none;
  }
  .hst-shell .hst-live-class-item {
    grid-template-columns: 1fr;
    gap: var(--hst-1);
  }
  .hst-shell .hst-live-class-item small {
    justify-self: start;
  }
  .hst-shell .hst-card__body {
    padding: var(--hst-4);
  }
  .hst-shell .hst-card__header,
  .hst-shell .hst-card__footer {
    padding: var(--hst-3) var(--hst-4);
  }
}

@media (max-width: 520px) {
  .hst-modal {
    padding: var(--hst-3);
    align-items: end;
  }
  .hst-modal__panel {
    width: 100%;
    max-height: 92vh;
  }
  .hst-shell .hst-modal__header,
  .hst-shell .hst-modal__body,
  .hst-shell .hst-modal__footer {
    padding: var(--hst-4);
  }
  .hst-shell .hst-modal__footer {
    flex-wrap: wrap;
  }
  .hst-shell .hst-modal__footer .hst-btn {
    flex: 1 1 auto;
  }
  .hst-shell .hst-dashboard {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: var(--hst-3);
  }
  .hst-shell .hst-stat-row {
    grid-template-columns: 1fr;
  }
  .hst-shell .hst-card__footer {
    flex-wrap: wrap;
  }
  .hst-landing__foot-main,
  .hst-landing__foot-bottom {
    grid-template-columns: 1fr;
  }
  .hst-landing__foot-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hst-2);
  }
  .hst-shell .hst-seat-cols-2,
  .hst-shell .hst-seat-cols-3,
  .hst-shell .hst-seat-cols-4 {
    grid-template-columns: 1fr;
  }
  .hst-shell .hst-btn-group .hst-btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 400px) {
  .hst-shell {
    padding: var(--hst-3) 12px var(--hst-6);
  }
  .hst-shell .hst-dashboard {
    grid-template-columns: 1fr 1fr;
  }
  .hst-shell .hst-theme-picker {
    grid-template-columns: 1fr 1fr;
  }
  .hst-landing__strip {
    padding: var(--hst-4);
  }
  .hst-landing__strip strong {
    font-size: var(--hst-fs-lg);
  }
}

@media (max-width: 360px) {
  .hst-shell {
    padding: var(--hst-3) 10px var(--hst-6);
    gap: var(--hst-3);
  }
  .hst-shell .hst-card__body {
    padding: var(--hst-3);
  }
  .hst-shell .hst-header__user {
    gap: var(--hst-2);
  }
  .hst-shell .hst-avatar {
    width: 42px;
    height: 42px;
  }
  .hst-shell .hst-tile {
    padding: var(--hst-4) var(--hst-2);
  }
  .hst-shell .hst-tile__icon {
    width: 46px;
    height: 46px;
  }
}

/* ---- 15.4 Reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hst-shell *,
  .hst-shell *::before,
  .hst-shell *::after,
  .hst-landing *,
  .hst-modal *,
  .hst-jdp-modal *,
  .hst-schedule-global-modal *,
  .hst-toast,
  .hst-toast-container * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hst-live-class-pulse::after {
    animation: none !important;
  }
}

/* ---- 15.5 Issue fixes (post-redesign) ---------------------------------- */

/* Students/teachers list: the class column must not collapse to a vertical
   one-character-per-line stack on narrow screens. Keep chip text on a single
   line and let the table itself scroll horizontally inside .hst-table-wrap.
   (The earlier mobile rule sets overflow-wrap:anywhere on .hst-card spans,
   which broke chips per character; chips are explicitly excluded here.) */
.hst-shell .hst-table .hst-chip,
.hst-shell .hst-compact-list .hst-chip {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}
.hst-shell .hst-table td .hst-compact-list,
.hst-shell .hst-table td .hst-compact-list__preview {
  flex-wrap: nowrap;
}
.hst-shell .hst-table td:has(.hst-compact-list) {
  white-space: nowrap;
  min-width: 8.5rem;
}

/* Notifications user picker: keep the "clear selection" button on its own row,
   visually separated from the search input instead of stuck to it. */
.hst-shell .hst-user-picker__head {
  display: flex;
  flex-direction: column;
  gap: var(--hst-3);
}
.hst-shell .hst-user-picker__head > .hst-field {
  margin: 0;
}
.hst-shell .hst-user-picker__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--hst-2);
  flex-wrap: wrap;
}

/* ---- 15.7 Global table long-text handling ------------------------------ */
/* Across ALL plugin tables, cells must not collapse into vertical
   one-character-per-line stacks (a recurring RTL issue when the table is
   squeezed on narrow screens). Give cells a sensible minimum width so the
   table grows and .hst-table-wrap scrolls horizontally instead, and stop
   per-character breaking. Long free-text cells (descriptions) may wrap on
   spaces but are capped so one cell can't dominate. */
.hst-shell .hst-table tbody td,
.hst-shell .hst-table thead th {
  overflow-wrap: normal;
  word-break: keep-all;
}
.hst-shell .hst-table tbody td {
  min-width: 10rem;
}
/* Title-like cells (exam title, lesson, class names) stay on one line and the
   table scrolls; this prevents the "آز/مو/ن" vertical breakup seen on mobile. */
.hst-shell .hst-exam-table td strong,
.hst-shell .hst-exam-table th {
  white-space: nowrap;
}
.hst-shell .hst-exam-table td {
  min-width: 6rem;
}
/* Free-text/description columns: allow wrapping on spaces, cap the width so a
   long note doesn't stretch the row unreasonably, keep it readable. */
.hst-shell .hst-table td.hst-cell-text,
.hst-shell .hst-table td[data-cell="text"] {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 10rem;
  max-width: 22rem;
}
/* Make every horizontal table scroll feel intentional on touch devices. */
.hst-shell .hst-table-wrap {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* ---- 15.8 Smooth scrolling (match the landing page feel) --------------- */
.hst-shell,
.hst-shell .hst-table-wrap,
.hst-shell .hst-schedule-scroll,
.hst-modal__body {
  scroll-behavior: smooth;
}

/* ---- 15.9 iOS / small-screen card overflow guard ----------------------- */
/* On iOS Safari some cards spilled past their rounded border because children
   (long unbroken tokens, inputs, grids) forced intrinsic width. Constrain
   card content to the card box and let long content wrap rather than overflow. */
.hst-shell .hst-card {
  overflow-wrap: anywhere;
}
.hst-shell .hst-card,
.hst-shell .hst-stat-card,
.hst-shell .hst-tile {
  max-width: 100%;
}
.hst-shell .hst-card__body > * {
  min-width: 0;
  max-width: 100%;
}
/* Inputs and selects must never exceed their container (a common iOS cause of
   horizontal card overflow). */
.hst-shell .hst-card input,
.hst-shell .hst-card select,
.hst-shell .hst-card textarea {
  max-width: 100%;
  box-sizing: border-box;
}

/* ---- 15.10 Score entry: mobile-friendly stacked cards ------------------ */
/* Score entry is a high-value, frequent task. On phones the 3-column table is
   cramped, so we transform each student row into a clean stacked card with
   labels. Desktop keeps the table. */
@media (max-width: 640px) {
  .hst-shell .hst-score-table,
  .hst-shell .hst-score-table thead,
  .hst-shell .hst-score-table tbody,
  .hst-shell .hst-score-table tr,
  .hst-shell .hst-score-table td {
    display: block;
    width: 100%;
  }
  .hst-shell .hst-score-table thead {
    display: none; /* labels come from data-label */
  }
  .hst-shell .hst-score-table {
    border: 0;
  }
  .hst-shell .hst-score-table tbody tr {
    background: var(--hst-surface);
    border: 1px solid var(--hst-border);
    border-radius: var(--hst-r);
    padding: var(--hst-3) var(--hst-4);
    margin-bottom: var(--hst-3);
    box-shadow: var(--hst-shadow-1);
  }
  .hst-shell .hst-score-table tbody tr:hover {
    background: var(--hst-surface);
  }
  .hst-shell .hst-score-table td {
    border: 0 !important;
    padding: var(--hst-2) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hst-3);
  }
  /* Show the column label before each field. */
  .hst-shell .hst-score-table td::before {
    content: attr(data-label);
    font-size: var(--hst-fs-sm);
    color: var(--hst-muted);
    font-weight: 600;
    flex-shrink: 0;
  }
  /* Student name row reads as the card title. */
  .hst-shell .hst-score-table td.hst-score-name {
    font-weight: 800;
    font-size: var(--hst-fs-md);
    color: var(--hst-ink);
    border-bottom: 1px solid var(--hst-border) !important;
    padding-bottom: var(--hst-3);
    margin-bottom: var(--hst-2);
  }
  .hst-shell .hst-score-table td.hst-score-name::before {
    content: ""; /* the name itself is the heading */
  }
  /* Score and description inputs share the same width on mobile so the
     fields line up visually (each sits in its own label→input flex row). */
  .hst-shell .hst-score-table td.hst-score-input-cell,
  .hst-shell .hst-score-table td[data-label="نمره از ۲۰"],
  .hst-shell .hst-score-table td[data-label="توضیح کوتاه"] {
    align-items: center;
  }
  .hst-shell .hst-score-input,
  .hst-shell .hst-score-description {
    flex: 0 0 60%;
    width: 60%;
    max-width: 60%;
    min-width: 0;
    box-sizing: border-box;
    text-align: center;
  }
}

/* ---- 15.11 Assignments: item cards + nicer file uploader --------------- */
/* The student/teacher assignment markup uses .hst-assignment-item but only
   .hst-assignment was styled, so items rendered unstyled and cramped. Give the
   items real card styling and spacing. */
.hst-shell .hst-assignment-item {
  display: flex;
  flex-direction: column;
  gap: var(--hst-4);
  padding: var(--hst-5);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-r-lg);
  background: var(--hst-surface);
  box-shadow: var(--hst-shadow-1);
}
.hst-shell .hst-assignments-page .hst-stack {
  gap: var(--hst-4);
}

/* Styled file uploader (used for assignment submission), inspired by the
   profile avatar uploader: a clickable drop-zone with icon + filename. */
.hst-shell .hst-file-drop {
  display: flex;
  align-items: center;
  gap: var(--hst-3);
  padding: var(--hst-4);
  border: 1.5px dashed var(--hst-border-strong);
  border-radius: var(--hst-r);
  background: var(--hst-surface-2);
  cursor: pointer;
  transition: border-color var(--hst-dur-fast, 0.18s) var(--hst-ease, ease),
    background var(--hst-dur-fast, 0.18s) var(--hst-ease, ease);
}
.hst-shell .hst-file-drop:hover {
  border-color: var(--hst-accent);
  background: var(--hst-accent-softer);
}
.hst-shell .hst-file-drop.is-filled {
  border-style: solid;
  border-color: var(--hst-accent);
  background: var(--hst-accent-soft);
}
.hst-shell .hst-file-drop__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--hst-r);
  background: var(--hst-accent-soft);
  color: var(--hst-accent);
}
.hst-shell .hst-file-drop__icon svg { width: 20px; height: 20px; }
.hst-shell .hst-file-drop__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hst-shell .hst-file-drop__text strong {
  font-size: var(--hst-fs-sm);
  font-weight: 700;
  color: var(--hst-ink);
}
.hst-shell .hst-file-drop__text small {
  font-size: var(--hst-fs-xs);
  color: var(--hst-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Visually hide the native file input but keep it accessible/clickable. */
.hst-shell .hst-file-drop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.hst-shell .hst-assignment-submit-form {
  display: flex;
  flex-direction: column;
  gap: var(--hst-3);
  margin-top: var(--hst-2);
}
.hst-shell .hst-assignment-submit-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--hst-3);
}

/* ---- Filter bar (tuition payments + reusable) -------------------------- */
.hst-shell .hst-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hst-3);
  margin-bottom: var(--hst-4);
}
.hst-shell .hst-filter-bar .hst-field {
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
}
.hst-shell .hst-filter-bar__actions {
  flex: 0 0 auto;
}

/* ---- Tuition payment modal: gateway radio cards ------------------------ */
.hst-shell .hst-pay-gateways {
  display: flex;
  flex-direction: column;
  gap: var(--hst-3);
  margin-top: var(--hst-3);
}
.hst-shell .hst-pay-gateway {
  display: flex;
  align-items: flex-start;
  gap: var(--hst-3);
  padding: var(--hst-4);
  border: 1.5px solid var(--hst-border);
  border-radius: var(--hst-r);
  cursor: pointer;
  transition: border-color var(--hst-dur-fast, 0.18s) var(--hst-ease, ease),
    background var(--hst-dur-fast, 0.18s) var(--hst-ease, ease);
}
.hst-shell .hst-pay-gateway:hover {
  border-color: var(--hst-accent);
  background: var(--hst-accent-softer);
}
.hst-shell .hst-pay-gateway:has(input:checked) {
  border-color: var(--hst-accent);
  background: var(--hst-accent-soft);
}
.hst-shell .hst-pay-gateway input {
  margin-top: 3px;
  accent-color: var(--hst-accent);
  flex-shrink: 0;
}
.hst-shell .hst-pay-gateway__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hst-shell .hst-pay-gateway__title {
  font-weight: 700;
  color: var(--hst-ink);
}
.hst-shell .hst-pay-gateway__desc {
  font-size: var(--hst-fs-sm);
  color: var(--hst-muted);
}