:root {
  --primary: #1a5f4a;
  --primary-deep: #0f3d31;
  --accent: #c9a227;
  --accent-soft: color-mix(in srgb, var(--accent) 48%, #fff);
  --ink: #14231e;
  --muted: #5a6f67;
  --theme-text-strong: var(--primary-deep);
  --paper: #f7f3ea;
  --paper-2: #efe8d8;
  --danger: #a33b3b;
  --ok: #1f7a4d;
  --info: #315f86;
  --warm: #a97118;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-strong: #fffaf0;
  --primary-faint: color-mix(in srgb, var(--primary) 8%, transparent);
  --primary-soft: color-mix(in srgb, var(--primary) 14%, transparent);
  --primary-glass: color-mix(in srgb, var(--primary) 26%, transparent);
  --accent-faint: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-soft-bg: color-mix(in srgb, var(--accent) 18%, transparent);
  --line: color-mix(in srgb, var(--primary) 11%, transparent);
  --shadow: 0 18px 50px color-mix(in srgb, var(--primary-deep) 18%, transparent);
  --radius: 18px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: var(--radius);
  --radius-pill: 999px;
  --control-height: 2.85rem;
  --control-height-sm: 2.35rem;
  --touch-target: 2.75rem;
  --font-body: "Cairo", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-heading: var(--font-body);
  --font-display: var(--font-heading);
  --font-print-heading: "Amiri", "Noto Naskh Arabic", serif;
  --font-numeric: var(--font-body);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --text-xs: 0.8rem;
  --text-sm: 0.88rem;
  --text-md: 0.96rem;
  --text-lg: 1.12rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.72rem;
  --text-page-title: clamp(1.55rem, 1.18rem + 1.2vw, 2.15rem);
  --text-section-title: clamp(1.2rem, 1.04rem + 0.55vw, 1.45rem);
  --text-card-title: clamp(1rem, 0.94rem + 0.25vw, 1.12rem);
  --text-body: var(--text-md);
  --text-label: 0.88rem;
  --text-caption: var(--text-xs);
  --text-button: 0.92rem;
  --text-table-head: 0.84rem;
  --text-table-body: 0.88rem;
  --text-stat-value: clamp(1.45rem, 1.1rem + 1.05vw, 2rem);
  --line-height-tight: 1.3;
  --line-height-heading: 1.4;
  --line-height-normal: 1.65;
  --line-height-relaxed: 1.8;
  --shadow-xs: 0 5px 14px color-mix(in srgb, var(--primary-deep) 7%, transparent);
  --shadow-sm: 0 10px 24px color-mix(in srgb, var(--primary-deep) 10%, transparent);
  --shadow-md: 0 14px 34px color-mix(in srgb, var(--primary-deep) 14%, transparent);
  --shadow-lg: var(--shadow);
  --focus-ring: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent);
  --elevation-0: none;
  --elevation-1: var(--shadow-xs);
  --elevation-2: var(--shadow-sm);
  --elevation-3: var(--shadow-md);
  --elevation-4: var(--shadow-lg);
  --surface-pad-sm: var(--space-3);
  --surface-pad-md: var(--space-4);
  --surface-pad-lg: var(--space-5);
  --surface-pad-xl: var(--space-6);
  --surface-gap-sm: var(--space-2);
  --surface-gap-md: var(--space-3);
  --surface-gap-lg: var(--space-4);
  --motion-instant: 0ms;
  --motion-micro: 150ms;
  --motion-fast: 140ms;
  --motion-exit: 180ms;
  --motion-snap: 190ms;
  --motion-control: 200ms;
  --motion-base: 220ms;
  --motion-hold: 250ms;
  --motion-soft: 280ms;
  --motion-medium: 300ms;
  --motion-slow: 360ms;
  --motion-rise: 380ms;
  --motion-page: 420ms;
  --motion-morph: 480ms;
  --motion-pop: 520ms;
  --motion-overlay: 550ms;
  --motion-sheen: 720ms;
  --motion-pulse: 900ms;
  --motion-pulse-strong: 1050ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-press: cubic-bezier(0.2, 0, 0, 1);
  --ease-linear: linear;
  --ease-enter: var(--ease-emphasized);
  --ease-exit: var(--ease-standard);
  --ease-soft: ease;
  --motion-hover-duration: var(--motion-micro);
  --motion-hover-ease: var(--ease-standard);
  --motion-press-duration: var(--motion-fast);
  --motion-press-ease: var(--ease-press);
  --motion-focus-duration: var(--motion-control);
  --motion-focus-ease: var(--ease-standard);
  --motion-modal-in-duration: var(--motion-slow);
  --motion-modal-in-ease: var(--ease-emphasized);
  --motion-modal-out-duration: var(--motion-exit);
  --motion-modal-out-ease: var(--ease-standard);
  --motion-dropdown-duration: var(--motion-base);
  --motion-dropdown-ease: var(--ease-emphasized);
  --motion-toast-duration: var(--motion-base);
  --motion-toast-ease: var(--ease-emphasized);
  --motion-loading-duration: var(--motion-page);
  --motion-loading-ease: var(--ease-linear);
  --motion-page-duration: var(--motion-page);
  --motion-page-ease: var(--ease-emphasized);
  --motion-hover: var(--motion-hover-duration) var(--motion-hover-ease);
  --motion-press: var(--motion-press-duration) var(--motion-press-ease);
  --motion-focus: var(--motion-focus-duration) var(--motion-focus-ease);
  --motion-modal-in: var(--motion-modal-in-duration) var(--motion-modal-in-ease);
  --motion-modal-out: var(--motion-modal-out-duration) var(--motion-modal-out-ease);
  --motion-dropdown: var(--motion-dropdown-duration) var(--motion-dropdown-ease);
  --motion-toast: var(--motion-toast-duration) var(--motion-toast-ease);
  --motion-loading: var(--motion-loading-duration) var(--motion-loading-ease);
  --motion-page-enter: var(--motion-page-duration) var(--motion-page-ease);
  --toast-enter-delay: 80ms;
  --toast-dwell: 4000ms;
  --toast-dwell-error: 5200ms;
  --toast-leave: 240ms;
  --danger-bg: color-mix(in srgb, var(--danger) 12%, #fff);
  --ok-bg: color-mix(in srgb, var(--ok) 12%, #fff);
  --info-bg: color-mix(in srgb, var(--info) 12%, #fff);
  --warm-bg: color-mix(in srgb, var(--warm) 12%, #fff);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
html {
  font-family: var(--font-body);
  letter-spacing: normal;
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: normal;
  font-variant-numeric: proportional-nums;
}
:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: normal;
}
:where(input, select, textarea, button) {
  font-family: var(--font-body);
  letter-spacing: normal;
}
:where(.stat .value, .stat-card .value, .stat strong, .stat-card strong, .money, .amount, .metric, .numeric, [dir="ltr"]) {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(201, 162, 39, 0.18), transparent 55%),
    linear-gradient(145deg, var(--primary-deep) 0%, var(--primary) 48%, #246b56 100%);
}
.auth-brand {
  position: relative;
  color: #fff;
  padding: clamp(2rem, 5vw, 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.auth-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 20%, rgba(10, 30, 24, 0.55) 100%),
    url("../img/platform-logo.7927a910df7e.svg") center 28% / min(42vw, 280px) no-repeat;
  opacity: 0.95;
  z-index: -1;
  animation: brandRise 1.1s ease-out both;
}
.auth-brand::after {
  content: "";
  position: absolute;
  inset: auto -10% -20% 40%;
  height: 55%;
  background: radial-gradient(circle at center, rgba(201, 162, 39, 0.28), transparent 68%);
  z-index: -1;
  animation: glowPulse 4.5s ease-in-out infinite;
}
.brand-kicker {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--accent-soft);
  margin-bottom: 0.75rem;
  animation: fadeUp 0.7s ease both 0.15s;
}
.brand-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.25;
  margin: 0 0 0.75rem;
  font-weight: 700;
  animation: fadeUp 0.8s ease both 0.25s;
}
.brand-lead {
  max-width: 28rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
  margin: 0;
  animation: fadeUp 0.8s ease both 0.4s;
}
.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background:
    linear-gradient(180deg, rgba(247, 243, 234, 0.96), rgba(239, 232, 216, 0.98));
}
.auth-card {
  width: min(100%, 420px);
  animation: fadeUp 0.75s ease both 0.2s;
}
.auth-card h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  margin: 0 0 0.35rem;
}
.auth-card p {
  margin: 0 0 1.5rem;
  color: var(--muted);
}
.register-credentials {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: #e8f6ee;
  border: 1px solid rgba(31, 122, 77, 0.2);
  color: var(--ok);
  display: grid;
  gap: 0.65rem;
}
.register-credentials-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.75rem;
}
.register-credentials dt {
  margin: 0;
  font-weight: 700;
  font-size: 0.92rem;
  color: color-mix(in srgb, var(--ok) 78%, #000);
}
.register-credentials dd {
  margin: 0;
  min-width: 0;
  font-size: 0.98rem;
  color: var(--ink);
  word-break: break-word;
}
.register-credentials code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--theme-text-strong);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  padding: 0.15rem 0.45rem;
}
.register-portal-hint {
  margin: 1rem 0 0 !important;
  font-size: 0.9rem;
  line-height: 1.55;
  word-break: break-word;
}
.field { margin-bottom: 1rem; }
.field label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 0.95rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid rgba(26, 95, 74, 0.22);
  background: #fff;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  font: inherit;
  transition:
    border-color var(--motion-focus),
    box-shadow var(--motion-focus),
    background-color var(--motion-focus);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.field textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: 1.7;
}
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 12px;
  padding: 0.9rem 1.25rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform var(--motion-press),
    background var(--motion-hover),
    border-color var(--motion-hover),
    color var(--motion-hover),
    box-shadow var(--motion-hover),
    min-width var(--motion-base) var(--ease-standard),
    opacity var(--motion-hover);
  will-change: transform;
}
.btn-primary:not(.is-busy):not(.is-navigating)::after,
.btn-danger:not(.is-busy):not(.is-navigating)::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -55%;
  width: 42%;
  transform: skewX(-18deg) translateX(0);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) {
  .btn-primary:not(.is-busy):not(.is-navigating):hover::after,
  .btn-danger:not(.is-busy):not(.is-navigating):hover::after {
    opacity: 1;
    animation: buttonSheen var(--motion-sheen) var(--ease-standard) both;
  }
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.992); }
.btn.is-pressing,
.btn-sm.is-pressing,
.chip.is-pressing,
.quick-action-card.is-pressing,
.dashboard-task.is-pressing,
.health-item.is-pressing,
.setup-step.is-pressing,
.command-item.is-pressing,
.mobile-bottom-item.is-pressing,
.mobile-sheet-action.is-pressing,
.portal-bottom-nav a.is-pressing,
.portal-card.is-pressing,
.subnav a.is-pressing,
.att-opt.is-pressing span,
.inline-check.is-pressing,
.nav-list a.is-pressing {
  transform: translateY(1px) scale(0.992);
  box-shadow: var(--shadow-xs);
}
a.is-navigating {
  position: relative;
  pointer-events: none;
  opacity: 0.84;
  filter: saturate(0.94);
}
body.navigation-is-locked :is(.main, .portal-main, .auth-card) a:not([target]):not([href^="#"]) {
  cursor: progress;
}
body.navigation-is-locked :is(.main, .portal-main, .auth-card) a:not(.is-navigating):not([target]):not([href^="#"]) {
  pointer-events: none;
}
a.is-navigating:is(.btn, .btn-sm, .quick-action-card, .dashboard-task, .health-item, .setup-step, .command-item, .mobile-bottom-item, .mobile-sheet-action, .portal-card, .subnav a, .nav-list a)::after {
  content: "";
  width: 0.52rem;
  height: 0.52rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.78;
  box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 24%, transparent);
  animation: premiumPulse var(--motion-pulse) var(--ease-soft) infinite;
}
.quick-action-card.is-navigating::after,
.dashboard-task.is-navigating::after,
.health-item.is-navigating::after,
.setup-step.is-navigating::after,
.portal-card.is-navigating::after {
  position: absolute;
  inset-block-start: 0.85rem;
  inset-inline-end: 0.85rem;
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.62;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: saturate(0.84);
}
.disabled-tooltip-wrap {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  cursor: help;
}
.disabled-tooltip-wrap > .btn,
.disabled-tooltip-wrap > button {
  pointer-events: none;
}
.btn-primary {
  width: 100%;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: #fff;
  box-shadow: var(--elevation-2);
}
.btn-ghost {
  background: transparent;
  color: var(--primary);
  border: 1px solid rgba(26, 95, 74, 0.25);
}
.alert {
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.alert-error {
  background: #f8e8e8;
  color: var(--danger);
  border: 1px solid rgba(163, 59, 59, 0.2);
}
.alert-ok {
  background: #e8f6ee;
  color: var(--ok);
  border: 1px solid rgba(31, 122, 77, 0.2);
}
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 260px 1fr;
  background:
    radial-gradient(900px 400px at 100% 0%, rgba(201, 162, 39, 0.12), transparent 50%),
    linear-gradient(180deg, #f8f5ee 0%, #efe8d8 100%);
}
.sidebar {
  background: linear-gradient(180deg, var(--primary-deep), var(--primary));
  color: #fff;
  padding: 1.5rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.35rem 0.4rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.sidebar-brand img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px;
}
.sidebar-brand strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.3;
}
.sidebar-brand span {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.72);
}
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.nav-list a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.86);
  transition:
    background var(--motion-base) var(--ease-standard),
    color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    transform var(--motion-fast) var(--ease-press);
}
.nav-icon {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 10px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: currentColor;
}
.nav-icon svg,
.page-title-icon svg,
.btn-icon svg,
.empty-visual svg {
  width: 1rem;
  height: 1rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-list a:hover,
.nav-list a.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.nav-list a.active,
.nav-list a[aria-current="page"] {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 82%, #fff);
}
html[dir="rtl"] .nav-list a.active,
html[dir="rtl"] .nav-list a[aria-current="page"] {
  box-shadow: inset -3px 0 0 color-mix(in srgb, var(--accent) 82%, #fff);
}
.nav-list a:hover .nav-icon,
.nav-list a.active .nav-icon {
  background: rgba(255, 255, 255, 0.16);
}
.nav-list a.soon {
  opacity: 0.55;
  cursor: default;
}
.main {
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
  animation: fadeUp 0.55s ease both;
}
.topbar h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.page-title-icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 14px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  color: var(--theme-text-strong);
  background: linear-gradient(160deg, var(--primary-faint), color-mix(in srgb, var(--accent) 12%, transparent));
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
}
.page-title-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.topbar p {
  margin: 0.2rem 0 0;
  color: var(--muted);
}
.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  flex: 0 1 auto;
  max-width: min(100%, 36rem);
}
.topbar-actions .btn,
.topbar-actions .btn-ghost,
.topbar-actions .btn-primary {
  width: auto !important;
  min-height: 2.65rem;
  padding-inline: 1.15rem;
  white-space: nowrap;
  flex: 0 0 auto;
}
.topbar-actions form {
  display: flex;
  align-items: center;
  margin: 0;
}
.topbar-actions .topbar-logout {
  margin-inline-start: 0.1rem;
  padding-inline-start: 0.55rem;
  border-inline-start: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
}
.student-detail-topbar {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) auto;
  align-items: center;
  column-gap: 1.35rem;
  row-gap: 0.9rem;
}
.student-detail-heading {
  min-width: 0;
}
.student-detail-heading p {
  max-width: 46rem;
}
.student-detail-toolbar {
  max-width: none;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.8rem;
  direction: ltr;
}
.student-detail-toolbar .theme-switcher {
  flex: 0 0 auto;
}
.student-detail-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.55rem;
  direction: rtl;
}
.student-detail-actions .btn {
  width: auto !important;
  min-height: 2.8rem;
  padding-inline: 1rem !important;
  border-radius: 14px;
  white-space: nowrap;
}
.student-detail-actions .student-action-primary {
  min-width: 6.7rem;
}
.student-detail-actions .student-action-list {
  min-width: 5.8rem;
}
@media (max-width: 1180px) {
  .student-detail-topbar {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .student-detail-toolbar {
    width: 100%;
    justify-content: space-between;
  }
  .student-detail-actions {
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
@media (max-width: 640px) {
  .student-detail-toolbar {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.7rem;
    direction: rtl;
  }
  .student-detail-toolbar .theme-switcher {
    width: auto !important;
    justify-self: start;
  }
  .student-detail-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 0.55rem !important;
  }
  .student-detail-actions .btn {
    width: 100% !important;
    min-width: 0;
  }
  .student-detail-actions .student-action-primary {
    grid-column: 1 / -1;
  }
}
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--surface-pad-lg) var(--surface-pad-xl);
  box-shadow: var(--elevation-2);
  animation: fadeUp 0.65s ease both 0.08s;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.stat {
  position: relative;
  overflow: hidden;
  padding: var(--surface-pad-md) var(--surface-pad-lg);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #fff, rgba(247, 243, 234, 0.9));
  border: 1px solid var(--line);
  box-shadow: var(--elevation-1);
  animation: fadeUp 0.6s ease both;
}
.stat::before {
  content: "";
  position: absolute;
  inset-block-start: 0.9rem;
  inset-inline-end: 1rem;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 14px;
  background: var(--primary-faint);
  border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
}
.stat::after {
  content: "";
  position: absolute;
  inset-block-start: 1.52rem;
  inset-inline-end: 1.62rem;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--primary);
  opacity: 0.9;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='M12 5 3 9l9 4 9-4-9-4Z M6 11v4.5c1.7 1.6 3.7 2.5 6 2.5s4.3-.9 6-2.5V11'/%3E%3C/svg%3E") center / contain no-repeat;
}
.stat-absence::before { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.stat-absence::after {
  background: var(--danger);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='M8 3v4 M16 3v4 M4.5 8h15 M4.5 5h15v15h-15z M8.5 14h7'/%3E%3C/svg%3E");
}
.stat-fees::before { background: color-mix(in srgb, var(--warm) 12%, transparent); }
.stat-fees::after {
  background: var(--warm);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='M4 7.5h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4.8a2 2 0 0 1-2-2v-7.8a2 2 0 0 1 1.5-1.9L16 4.5 M16.5 13h.1'/%3E%3C/svg%3E");
}
.stat-revenue::before { background: color-mix(in srgb, var(--info) 12%, transparent); }
.stat-revenue::after {
  background: var(--info);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='M5 19V5 M5 19h15 M9 16v-5 M13 16V8 M17 16v-7'/%3E%3C/svg%3E");
}
.stat:nth-child(2) { animation-delay: 0.08s; }
.stat:nth-child(3) { animation-delay: 0.16s; }
.stat .label { color: var(--muted); font-size: 0.9rem; }
.stat .value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin-top: 0.2rem;
  color: var(--theme-text-strong);
}
.muted { color: var(--muted); }
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.color-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.color-row input[type="color"] {
  width: 48px;
  height: 42px;
  border: 0;
  background: transparent;
  padding: 0;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes brandRise {
  from { opacity: 0; transform: scale(1.06) translateY(12px); }
  to { opacity: 0.95; transform: scale(1) translateY(0); }
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50% { opacity: 0.9; transform: translateY(-10px); }
}
@keyframes premiumPulse {
  0% {
    transform: scale(1);
    opacity: 0.85;
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 28%, transparent);
  }
  70% {
    transform: scale(1);
    opacity: 0.45;
    box-shadow: 0 0 0 0.55rem color-mix(in srgb, currentColor 0%, transparent);
  }
  100% {
    transform: scale(1);
    opacity: 0.85;
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 0%, transparent);
  }
}
@keyframes premiumToastIn {
  from {
    opacity: 0;
    transform: translateY(0.45rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
}
.subnav a {
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(26, 95, 74, 0.12);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
  transition:
    background var(--motion-hover),
    color var(--motion-hover),
    border-color var(--motion-hover),
    box-shadow var(--motion-hover),
    transform var(--motion-press);
}
.subnav a:hover,
.subnav a.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.subnav a:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}
.section-title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(26, 95, 74, 0.1);
  color: var(--theme-text-strong);
  font-size: 0.9rem;
  font-weight: 600;
  transition:
    transform var(--motion-press),
    background var(--motion-hover),
    box-shadow var(--motion-hover),
    color var(--motion-hover);
}
button.chip,
a.chip {
  cursor: pointer;
}
button.chip:hover,
a.chip:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}
.chip small { opacity: 0.7; font-weight: 500; }
.chip-soft { background: rgba(201, 162, 39, 0.16); color: #7a6210; }
.badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(90, 111, 103, 0.12);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}
.badge-ok {
  background: rgba(31, 122, 77, 0.14);
  color: var(--ok);
}
.table-wrap { overflow-x: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.data-table th,
.data-table td {
  text-align: right;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid rgba(26, 95, 74, 0.1);
  vertical-align: top;
}
.data-table th {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.85rem;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-start;
}
.btn-sm {
  width: auto;
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
  border-radius: 10px;
}
.tree-stage { margin-bottom: 1.25rem; }
.tree-stage h3 {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  color: var(--theme-text-strong);
}
.tree-grade {
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.55rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(26, 95, 74, 0.08);
}
.tree-grade-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
}
select {
  width: 100%;
  border: 1px solid rgba(26, 95, 74, 0.22);
  color: var(--ink);
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) left calc(1rem + 1px) center / 0.44rem 0.44rem no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) left 1rem center / 0.44rem 0.44rem no-repeat,
    linear-gradient(180deg, #fff, color-mix(in srgb, #fff 92%, var(--primary-faint)));
  border-radius: 12px;
  padding: 0.85rem 1rem 0.85rem 2.25rem;
  font: inherit;
  appearance: none;
  cursor: pointer;
  transition:
    border-color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    background-color var(--motion-base) var(--ease-standard),
    background-position var(--motion-base) var(--ease-standard),
    background-size var(--motion-base) var(--ease-standard),
    transform var(--motion-fast) var(--ease-press),
    color var(--motion-base) var(--ease-standard);
}
html[dir="rtl"] select {
  background-position:
    left calc(1rem + 1px) center,
    left 1rem center,
    0 0;
  padding: 0.85rem 1rem 0.85rem 2.25rem;
}
.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}
.check-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(26, 95, 74, 0.1);
  cursor: pointer;
}
.search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
}
.student-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--theme-text-strong);
}
.students-mobile-list {
  display: none;
}
.students-mobile-card {
  display: block;
  padding: 0.95rem 1rem;
  border-radius: 16px;
  background: linear-gradient(160deg, #fff, rgba(247, 243, 234, 0.92));
  border: 1px solid rgba(26, 95, 74, 0.08);
  box-shadow: 0 10px 24px rgba(15, 61, 49, 0.08);
}
.students-mobile-card + .students-mobile-card {
  margin-top: 0.75rem;
}
.students-mobile-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.students-mobile-card-main {
  min-width: 0;
  flex: 1;
}
.students-mobile-link {
  width: 100%;
  min-width: 0;
}
.students-mobile-title {
  min-width: 0;
}
.students-mobile-name {
  display: block;
  line-height: 1.45;
}
.students-mobile-subtitle {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.8rem;
}
.students-mobile-meta {
  display: grid;
  gap: 0.7rem;
}
.students-mobile-meta-item {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}
.students-mobile-meta-item strong,
.students-mobile-meta-item code {
  overflow-wrap: anywhere;
}
.students-mobile-empty {
  padding: 0.2rem 0.1rem 0;
}
.table-wrap-stacked {
  overflow: visible;
  margin-inline: 0;
  padding-bottom: 0;
}
.responsive-table td > form,
.responsive-table td > .actions,
.responsive-table td > .btn,
.responsive-table td > .btn-sm {
  width: 100%;
}
.responsive-table td .student-link {
  width: 100%;
  min-width: 0;
}
.responsive-table td strong,
.responsive-table td code {
  overflow-wrap: anywhere;
}
.avatar,
.avatar-fallback {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 95, 74, 0.12);
  color: var(--primary);
  font-weight: 700;
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(26, 95, 74, 0.08);
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  font-size: 0.88rem;
}
.profile-head {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.25rem;
}
.profile-photo,
.profile-photo-fallback {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  object-fit: cover;
  flex-shrink: 0;
}
.profile-photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--primary), var(--primary-deep));
  color: #fff;
  font-family: var(--font-display);
  font-size: 2rem;
}
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
.info-grid span {
  display: block;
  font-size: 0.85rem;
}
.info-grid strong {
  display: block;
  margin-top: 0.15rem;
}
.qr-image {
  width: min(100%, 220px);
  margin: 0.75rem 0;
  border-radius: 16px;
  background: #fff;
  padding: 0.75rem;
  border: 1px solid rgba(26, 95, 74, 0.1);
}
.stack-list {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 1.1rem;
}
.stack-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--surface-gap-md);
  padding: var(--surface-pad-sm) var(--surface-pad-sm);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--line);
  box-shadow: var(--elevation-0);
}
.mini-title {
  margin: 1rem 0 0.75rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--theme-text-strong);
}
.inline-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.25rem;
}
.inline-checks label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.35rem;
  padding: 0.28rem 0.48rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  color: var(--muted);
  transition:
    color var(--motion-hover),
    background-color var(--motion-hover),
    box-shadow var(--motion-hover),
    transform var(--motion-press);
}
.inline-checks label:has(input:checked),
.inline-check:has(input:checked) {
  color: var(--theme-text-strong);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent);
}
.inline-checks label:hover,
.inline-check:hover {
  transform: translateY(-1px);
}
.inline-checks input[type="checkbox"],
.inline-check input[type="checkbox"],
.inline-checks input[type="radio"],
.inline-check input[type="radio"] {
  width: 1.08rem;
  height: 1.08rem;
  accent-color: var(--primary);
  cursor: pointer;
}
.choice-soft-change {
  animation: choiceSoftChange var(--motion-page) var(--ease-emphasized) both;
}
.att-opt.choice-soft-change span {
  animation: choiceSoftChange var(--motion-slow) var(--ease-emphasized) both;
}
.lifecycle-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 1rem 0 1.25rem;
}
.life-form {
  padding: 0.9rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(26, 95, 74, 0.08);
}
.life-form .btn {
  width: 100%;
  margin-top: 0.35rem;
}
@media (max-width: 960px) {
  .lifecycle-actions { grid-template-columns: 1fr; }
}
.msg-preview {
  white-space: pre-wrap;
  position: relative;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 88%, var(--primary-faint)), color-mix(in srgb, #fff 96%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius: var(--radius-md);
  padding: 0.92rem 1rem;
  margin: 0.55rem 0 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ink);
  box-shadow: var(--shadow-xs);
  transition:
    border-color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-standard);
}
.msg-preview:hover {
  border-color: color-mix(in srgb, var(--primary) 18%, transparent);
  box-shadow: var(--shadow-sm);
}
.att-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.att-opt {
  position: relative;
  cursor: pointer;
}
.att-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.att-opt span {
  display: inline-block;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(26, 95, 74, 0.18);
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  transition:
    transform var(--motion-press),
    background var(--motion-hover),
    border-color var(--motion-hover),
    color var(--motion-hover),
    box-shadow var(--motion-hover);
}
.att-opt:hover span,
.att-opt input:focus-visible + span {
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}
.att-opt input:checked + span {
  color: #fff;
  border-color: transparent;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary-deep) 12%, transparent);
}
.att-present input:checked + span { background: var(--primary); }
.att-absent input:checked + span { background: #b33b3b; }
.att-late input:checked + span { background: #b07d14; }
.att-excused input:checked + span { background: #3a6ea5; }
.att-late {
  width: 5.5rem;
  padding: 0.4rem 0.55rem;
}
.attendance-sheet td input[name^="note_"] {
  min-width: 8rem;
}
@media (max-width: 900px) {
  .att-status { flex-direction: column; align-items: flex-start; }
}
.portal-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 0%, rgba(201, 162, 39, 0.14), transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(26, 95, 74, 0.12), transparent 45%),
    linear-gradient(180deg, #f7faf8 0%, #eef5f1 100%);
}
.portal-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(26, 95, 74, 0.1);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
}
.portal-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.portal-brand img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.portal-brand strong {
  display: block;
  font-family: var(--font-display);
  color: var(--theme-text-strong);
}
.portal-brand span,
.portal-nav a {
  color: var(--muted);
  font-size: 0.92rem;
}
.portal-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.portal-nav a.active {
  color: var(--primary);
  font-weight: 700;
}
.portal-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
}
.portal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.portal-head h1 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--theme-text-strong);
}
.portal-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.9rem;
}
.portal-card {
  display: block;
  padding: 1.1rem 1.15rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(26, 95, 74, 0.1);
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard);
}
.portal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(26, 95, 74, 0.1);
}
.portal-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 34%, transparent);
}
.portal-card-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--theme-text-strong);
  margin-bottom: 0.25rem;
}
.portal-card-meta {
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: 0.92rem;
}
.portal-card-fee {
  margin-top: 0.7rem;
  font-size: 0.95rem;
}
.saas-landing {
  min-height: 100vh;
  background:
    radial-gradient(900px 420px at 90% 0%, rgba(201, 162, 39, 0.16), transparent 55%),
    linear-gradient(160deg, #0f3d31 0%, #1a5f4a 45%, #245f4c 100%);
  color: #fff;
}
.saas-hero {
  padding: clamp(2.5rem, 8vw, 5.5rem) 1.25rem 2rem;
}
.saas-hero-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  animation: fadeUp 0.7s ease both;
}
.saas-logo {
  width: 88px;
  height: 88px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  padding: 8px;
  object-fit: contain;
}
.saas-kicker {
  color: var(--accent-soft);
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  margin: 0 0 0.75rem;
}
.saas-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin: 0 0 0.85rem;
  line-height: 1.25;
}
.saas-lead {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.08rem;
  margin: 0 auto 1.5rem;
  max-width: 36rem;
}
.saas-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1rem;
}
.saas-cta .btn { width: auto; min-width: 10rem; }
.saas-cta-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.saas-note {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  margin: 0;
}
.saas-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
}
.saas-features > div {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 1.2rem 1.25rem;
  animation: fadeUp 0.65s ease both;
}
.saas-features h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 0.45rem;
}
.saas-features p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
}
@media (max-width: 800px) {
  .saas-features { grid-template-columns: 1fr; }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.year-chip {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(201, 162, 39, 0.35);
  color: #fff;
  font-size: 0.92rem;
}
.year-chip-label {
  font-size:var(--text-caption);
  color: var(--accent-soft);
  letter-spacing: 0.04em;
}
.year-chip strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.year-chip a {
  color: var(--accent-soft);
  font-size: 0.85rem;
  text-decoration: underline;
  margin-top: 0.2rem;
}
.year-chip-warn {
  border-color: rgba(255, 180, 120, 0.45);
  background: rgba(163, 59, 59, 0.28);
}
.global-search {
  position: relative;
  margin: 0 0 0.25rem;
}
.global-search input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  border-radius: 12px;
  padding: 0.65rem 0.85rem;
  font: inherit;
}
.global-search input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.global-search input:focus {
  outline: 2px solid rgba(201, 162, 39, 0.55);
  outline-offset: 1px;
}
.command-trigger {
  width: 100%;
  min-height: 2.7rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.08);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background var(--motion-exit) var(--ease-soft), border-color var(--motion-exit) var(--ease-soft);
}
.command-trigger:hover,
.command-trigger:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.22);
}
.command-trigger kbd {
  min-width: 3.2rem;
  padding: 0.15rem 0.42rem;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(0, 0, 0, 0.15);
  font: 700 0.74rem var(--font-body);
  text-align: center;
}
.search-results {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 0.35rem);
  z-index: 40;
  max-height: min(60vh, 360px);
  overflow: auto;
  background: #fff;
  color: var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(26, 95, 74, 0.12);
  padding: 0.4rem;
  opacity: 0;
  transform: translateY(4px) scale(0.996);
  transition:
    opacity var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}
.search-results.is-loading,
.search-results.is-rendered {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.search-results.is-loading {
  display: grid;
  gap: 0.55rem;
}
.search-loading {
  display: grid;
  gap: 0.55rem;
  padding: 0.2rem;
}
.search-loading .skeleton {
  min-height: 2.65rem;
  border-radius: 14px;
}
.search-group-label {
  font-size:var(--text-caption);
  color: var(--muted);
  padding: 0.4rem 0.55rem 0.15rem;
}
.search-item {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  animation: premiumRowIn var(--motion-slow) var(--ease-emphasized) both;
  animation-delay: var(--row-delay, 0ms);
  transition:
    background var(--motion-hover),
    box-shadow var(--motion-hover),
    transform var(--motion-press);
}
.search-item:hover,
.search-item.active {
  background: rgba(26, 95, 74, 0.08);
  transform: translateY(-1px);
}
.search-item.active {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 38%),
    color-mix(in srgb, var(--primary) 8%, transparent);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--primary) 70%, var(--accent));
}
html[dir="rtl"] .search-item.active {
  background:
    linear-gradient(270deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 38%),
    color-mix(in srgb, var(--primary) 8%, transparent);
  box-shadow: inset -3px 0 0 color-mix(in srgb, var(--primary) 70%, var(--accent));
}
.search-item-title {
  font-weight: 600;
  color: var(--theme-text-strong);
}
.search-item-meta {
  font-size: 0.82rem;
  color: var(--muted);
}
.search-empty {
  padding: 0.85rem;
  color: var(--muted);
  font-size: 0.9rem;
  border-radius: 12px;
  background: var(--primary-faint);
  text-align: center;
}
.nav-toggle {
  display: none;
  position: fixed;
  top: 0.85rem;
  inset-inline-start: 0.85rem;
  z-index: 60;
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--primary-deep);
  box-shadow: 0 8px 24px rgba(15, 61, 49, 0.28);
  cursor: pointer;
}
.nav-backdrop {
  display: none;
}
.badge-archive {
  background: #efe8d8;
  color: #6a5a3a;
  border: 1px solid rgba(106, 90, 58, 0.2);
}
.badge-current {
  background: #e8f6ee;
  color: var(--ok);
  border: 1px solid rgba(31, 122, 77, 0.22);
}
.archive-note {
  margin-bottom: 1.1rem;
  padding: 0.9rem 1.05rem;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.14), transparent);
  border: 1px solid rgba(201, 162, 39, 0.28);
  color: var(--theme-text-strong);
}
@media (max-width: 960px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand {
    min-height: auto;
    justify-content: flex-end;
    padding: 1.35rem 1.15rem 1.15rem;
  }
  .auth-brand::before {
    background-size: min(42vw, 130px);
    background-position: center 12%;
    opacity: 0.88;
  }
  .auth-brand::after { display: none; }
  .brand-kicker { margin-bottom: 0.4rem; }
  .brand-title {
    font-size: clamp(1.55rem, 6.5vw, 2.05rem);
    margin-bottom: 0.45rem;
  }
  .brand-lead {
    font-size: 0.9rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .auth-panel {
    padding: 1.1rem 1rem calc(1.75rem + env(safe-area-inset-bottom, 0px));
    align-items: flex-start;
  }
  .auth-card { width: 100%; max-width: none; }
  .auth-card h1 { font-size: 1.45rem; }
  .auth-card > p { margin-bottom: 1.1rem; font-size: 0.92rem; }
  .app-shell {
    grid-template-columns: 1fr;
    padding-top: env(safe-area-inset-top, 0);
  }
  .app-shell::before {
    content: "";
    position: fixed;
    top: 0;
    inset-inline: 0;
    height: calc(3.35rem + env(safe-area-inset-top, 0px));
    background: linear-gradient(180deg, var(--primary-deep), var(--primary));
    box-shadow: 0 8px 22px rgba(15, 61, 49, 0.22);
    z-index: 45;
    pointer-events: none;
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: calc(0.55rem + env(safe-area-inset-top, 0px));
    inset-inline-start: 0.75rem;
    min-height: 2.35rem;
    padding: 0.45rem 1rem;
    font-size: 0.92rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: none;
  }
  .main {
    padding: calc(4.1rem + env(safe-area-inset-top, 0px)) 0.85rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
  }
  .topbar h1 {
    font-size: 1.45rem;
    line-height: 1.3;
  }
  .topbar p {
    font-size: 0.9rem;
  }
  .topbar > form,
  .topbar > div:last-child,
  .topbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
  }
  .topbar .btn,
  .topbar .btn-ghost,
  .topbar-actions .btn,
  .topbar-actions .btn-ghost,
  .topbar-actions .btn-primary {
    width: auto !important;
    flex: 1 1 auto;
    min-height: 2.55rem;
    justify-content: center;
  }
  .topbar-actions .topbar-logout {
    border-inline-start: 0;
    padding-inline-start: 0;
    margin-inline-start: 0;
    flex: 1 1 100%;
  }
  .topbar-actions .topbar-logout .btn {
    width: 100% !important;
  }
  .panel {
    padding: 1rem 0.9rem;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(15, 61, 49, 0.1);
  }
  .section-title {
    font-size: 1.2rem;
  }
  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-bottom: 1rem;
  }
  .stat {
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
  }
  .stat .value {
    font-size: 1.45rem;
  }
  .grid-2,
  .grid-3,
  .check-grid,
  .lifecycle-actions {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .profile-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .info-grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  .stack-item {
    flex-direction: column;
    align-items: stretch;
  }
  .stack-item .btn,
  .stack-item .btn-sm,
  .stack-item .actions,
  .stack-item form {
    width: 100%;
  }
  .search-bar > * {
    flex: 1 1 100% !important;
    min-width: 0;
  }
  .search-bar > div:not(.field),
  .search-bar > p,
  .search-bar > a,
  .search-bar > form {
    width: 100%;
  }
  .search-bar .btn,
  .search-bar .btn-ghost,
  .search-bar .btn-sm {
    width: 100% !important;
  }
  .portal-nav form,
  .portal-nav .btn {
    width: 100% !important;
  }
  .panel p[style*="display:flex"] {
    display: grid !important;
    gap: 0.55rem !important;
  }
  .panel p[style*="display:flex"] .btn,
  .panel p[style*="display:flex"] .btn-ghost,
  .panel p[style*="display:flex"] .btn-sm {
    width: 100% !important;
  }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(88vw, 300px);
    max-width: 300px;
    z-index: 55;
    transform: translateX(110%);
    transition: transform var(--motion-hold) var(--ease-soft);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.15rem 0.95rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.25);
  }
  .sidebar:focus {
    outline: none;
  }
  html[dir="rtl"] .sidebar {
    inset: 0 0 0 auto;
    transform: translateX(110%);
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.25);
  }
  .app-shell.nav-open .sidebar {
    transform: translateX(0);
  }
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 30, 24, 0.48);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(0);
    transition:
      opacity var(--motion-base) var(--ease-standard),
      backdrop-filter var(--motion-base) var(--ease-standard);
  }
  .app-shell.nav-open .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(2px);
  }
  .nav-list a {
    padding: 0.85rem 0.95rem;
    font-size: 0.98rem;
  }
  .global-search input {
    font-size: 16px;
    min-height: 2.7rem;
  }
  .field label { font-size: 0.92rem; }
  .field input,
  .field select,
  .field textarea,
  select {
    font-size: 16px;
    padding: 0.8rem 0.9rem;
    min-height: 2.75rem;
    border-radius: 12px;
  }
  .field select,
  select {
    padding-inline-start: 0.9rem;
    padding-inline-end: 2.25rem;
    background-position:
      left calc(1rem + 1px) center,
      left 0.96rem center,
      0 0;
  }
  html[dir="rtl"] :is(.field select, select) {
    padding-inline-start: 0.9rem;
    padding-inline-end: 2.25rem;
    background-position:
      left calc(1rem + 1px) center,
      left 0.96rem center,
      0 0;
  }
  .field textarea { min-height: 7rem; }
  .btn {
    min-height: 2.7rem;
    padding: 0.8rem 1.05rem;
  }
  .btn:hover { transform: none; }
  .btn-sm {
    min-height: 2.35rem;
    padding: 0.5rem 0.85rem;
  }
  .actions {
    gap: 0.45rem;
  }
  .actions .btn,
  .actions .btn-sm {
    flex: 1 1 calc(50% - 0.45rem);
    justify-content: center;
  }
  .students-table-desktop {
    display: none;
  }
  .students-mobile-list {
    display: block;
  }
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: -0.15rem;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
  }
  .data-table {
    min-width: 480px;
    font-size: 0.88rem;
  }
  .data-table th,
  .data-table td {
    padding: 0.65rem 0.45rem;
    white-space: nowrap;
  }
  .data-table td .muted {
    white-space: normal;
    max-width: 11rem;
  }
  .table-wrap-stacked {
    overflow: visible;
    margin-inline: 0;
    padding-bottom: 0;
  }
  .responsive-table {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
  }
  .responsive-table thead {
    display: none;
  }
  .responsive-table,
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table td {
    display: block;
    width: 100%;
  }
  .responsive-table tbody {
    display: grid;
    gap: 0.8rem;
  }
  .responsive-table tr {
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(160deg, #fff, rgba(247, 243, 234, 0.92));
    border: 1px solid rgba(26, 95, 74, 0.08);
    box-shadow: 0 10px 24px rgba(15, 61, 49, 0.08);
  }
  .responsive-table td {
    min-width: 0;
    border: 0;
    border-bottom: 1px solid rgba(26, 95, 74, 0.08);
    padding: 0.72rem 0.9rem;
    white-space: normal;
  }
  .responsive-table td:last-child {
    border-bottom: 0;
  }
  .responsive-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.18rem;
    color: var(--muted);
    font-size:var(--text-caption);
    font-weight: 700;
  }
  .responsive-table td[colspan] {
    padding: 0.95rem 0.9rem;
    text-align: center;
  }
  .responsive-table td[colspan]::before {
    display: none;
  }
  .responsive-table td input,
  .responsive-table td select,
  .responsive-table td textarea {
    width: 100%;
    min-width: 0 !important;
  }
  .responsive-table td .btn,
  .responsive-table td .btn-sm {
    width: 100% !important;
  }
  .responsive-table td .actions {
    justify-content: stretch;
  }
  .chip {
    font-size: 0.78rem;
    margin: 0.1rem 0.1rem 0.1rem 0;
  }
  .archive-note {
    font-size: 0.9rem;
    padding: 0.8rem 0.9rem;
  }
  .att-status {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .att-opt span {
    padding: 0.4rem 0.7rem;
    font-size: 0.8rem;
  }
  .attendance-sheet td input[name^="note_"] {
    min-width: 6rem;
    font-size: 16px;
  }
  .portal-top {
    padding: 0.85rem 0.9rem;
    gap: 0.65rem;
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .portal-brand strong {
    font-size: 1rem;
  }
  .portal-nav {
    width: 100%;
    justify-content: flex-start;
  }
  .portal-main {
    padding: 0.85rem;
  }
  .portal-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    margin-bottom: 1rem;
  }
  .portal-head h1 {
    font-size: 1.35rem;
  }
  .portal-cards {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .portal-card {
    padding: 1rem 0.95rem;
  }
  .portal-card:hover {
    transform: none;
  }
  .saas-hero {
    padding: 2.2rem 1rem 1.5rem;
  }
  .saas-logo {
    width: 72px;
    height: 72px;
  }
  .saas-hero h1 {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
  }
  .saas-lead {
    font-size: 0.98rem;
  }
  .saas-cta {
    flex-direction: column;
  }
  .saas-cta .btn {
    width: 100%;
    min-width: 0;
  }
  .saas-features {
    grid-template-columns: 1fr;
    padding: 0 1rem 2.25rem;
    gap: 0.75rem;
  }
}
@media (max-width: 640px) {
  .stats {
    grid-template-columns: 1fr;
  }
  .stat .value {
    font-size: 1.55rem;
  }
  .topbar h1 {
    font-size: 1.32rem;
  }
  .panel {
    padding: 0.9rem 0.8rem;
    border-radius: 12px;
  }
  .students-mobile-card {
    padding: 0.9rem 0.85rem;
    border-radius: 14px;
  }
  .students-mobile-card-top {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }
  .students-mobile-card-top .badge {
    align-self: flex-start;
  }
  .responsive-table tr {
    border-radius: 14px;
  }
  .responsive-table td {
    padding: 0.68rem 0.82rem;
  }
  .data-table {
    min-width: 420px;
    font-size: 0.84rem;
  }
  .actions .btn,
  .actions .btn-sm {
    flex: 1 1 100%;
  }
  .brand-lead { -webkit-line-clamp: 2; }
  .tree-grade-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .color-row {
    flex-direction: column;
  }
}
@media (max-width: 960px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
  body {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.45), transparent 14rem),
      linear-gradient(180deg, #f9f6ef 0%, #eee7d8 100%);
  }
  .main,
  .portal-main {
    width: 100%;
    max-width: 100%;
  }
  .topbar {
    padding: 0.95rem 0.95rem 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(26, 95, 74, 0.08);
    box-shadow: 0 8px 22px rgba(15, 61, 49, 0.08);
  }
  .topbar h1,
  .portal-head h1 {
    overflow-wrap: anywhere;
  }
  .topbar p,
  .portal-head p,
  .panel > p,
  .muted {
    overflow-wrap: anywhere;
  }
  .main .btn,
  .main .btn-ghost,
  .main .btn-primary,
  .portal-main .btn,
  .portal-nav .btn,
  .auth-card .btn {
    width: 100% !important;
    max-width: 100%;
  }
  .main .btn,
  .portal-main .btn,
  .auth-card .btn {
    border-radius: 14px;
  }
  .btn-sm {
    min-height: 2.55rem;
  }
  .panel {
    border-color: rgba(26, 95, 74, 0.08);
    background: rgba(255, 255, 255, 0.82);
  }
  .panel + .panel,
  .grid-2 + .panel,
  .stats + .panel {
    margin-top: 1rem;
  }
  .search-bar {
    gap: 0.85rem;
  }
  .search-bar .field {
    width: 100%;
  }
  .search-bar [style*="align-self:end"] {
    align-self: stretch !important;
  }
  .field {
    margin-bottom: 0.85rem;
  }
  .field:last-child {
    margin-bottom: 0;
  }
  .field label {
    color: var(--theme-text-strong);
  }
  .field input,
  .field select,
  .field textarea,
  select {
    width: 100%;
    max-width: 100%;
    box-shadow: 0 2px 0 rgba(26, 95, 74, 0.03);
  }
  .stats {
    align-items: stretch;
  }
  .stat {
    min-width: 0;
  }
  .stat .label,
  .stat .value {
    overflow-wrap: anywhere;
  }
  .stack-item > *,
  .profile-head > *,
  .portal-brand > *,
  .student-link > * {
    min-width: 0;
  }
  .avatar,
  .avatar-fallback {
    width: 42px;
    height: 42px;
  }
  .responsive-table {
    min-width: 0 !important;
  }
  .responsive-table td::before {
    letter-spacing: 0;
  }
  .responsive-table td .actions,
  .responsive-table td form {
    display: grid;
    gap: 0.45rem;
  }
  .attendance-sheet,
  .mobile-scroll-table {
    min-width: 620px;
  }
  .table-wrap:not(.table-wrap-stacked) {
    border-radius: 14px;
    background: rgba(255,255,255,0.58);
    border: 1px solid rgba(26, 95, 74, 0.08);
    padding: 0.25rem;
  }
  .student-detail-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem !important;
  }
  .student-detail-actions .btn {
    min-height: 2.75rem;
    padding-inline: 0.7rem !important;
  }
  .student-detail-actions .btn:first-child {
    grid-column: 1 / -1;
  }
  .student-profile {
    overflow: hidden;
    padding-top: 0;
  }
  .student-profile .profile-head {
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
    margin: 0 -0.9rem 1rem;
    padding: 1rem 0.9rem;
    background:
      linear-gradient(135deg, rgba(26, 95, 74, 0.13), rgba(201, 162, 39, 0.1)),
      rgba(255,255,255,0.52);
    border-bottom: 1px solid rgba(26, 95, 74, 0.08);
  }
  .student-profile .profile-photo,
  .student-profile .profile-photo-fallback {
    width: 74px;
    height: 74px;
    border-radius: 18px;
  }
  .student-profile .profile-head > div:last-child {
    min-width: 0;
  }
  .student-profile .section-title {
    font-size: 1.25rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .student-profile .info-grid {
    display: grid;
    gap: 0.6rem;
  }
  .student-profile .info-grid > div {
    padding: 0.72rem 0.8rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(26, 95, 74, 0.07);
  }
  .student-profile .info-grid strong {
    overflow-wrap: anywhere;
  }
  .student-qr-panel {
    text-align: center;
  }
  .student-qr-panel .qr-image {
    margin-inline: auto;
    width: min(72vw, 210px);
  }
  .student-support-grid {
    gap: 1rem;
  }
  .student-support-grid .stack-item {
    background: rgba(255,255,255,0.78);
  }
  .student-support-grid .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .student-lifecycle-panel .life-form {
    border-radius: 14px;
    background: rgba(255,255,255,0.76);
  }
}
@media (max-width: 640px) {
  .main {
    padding-inline: 0.75rem;
  }
  .topbar {
    border-radius: 14px;
    padding: 0.85rem;
  }
  .panel {
    padding: 0.9rem 0.85rem;
  }
  .stats {
    gap: 0.7rem;
  }
  .stat {
    padding: 0.85rem;
  }
  .responsive-table {
    min-width: 0 !important;
    font-size: 0.9rem;
  }
  .responsive-table tbody {
    gap: 0.7rem;
  }
  .responsive-table tr,
  .students-mobile-card {
    box-shadow: 0 8px 18px rgba(15, 61, 49, 0.075);
  }
  .responsive-table td {
    padding: 0.72rem 0.8rem;
  }
  .responsive-table td::before {
    font-size:var(--text-caption);
  }
  .attendance-sheet,
  .mobile-scroll-table {
    min-width: 560px;
  }
  .student-detail-actions {
    grid-template-columns: 1fr 1fr;
  }
  .student-detail-actions .btn {
    font-size: 0.9rem;
  }
  .student-profile .profile-head {
    margin-inline: -0.85rem;
    padding-inline: 0.85rem;
  }
  .student-profile .profile-photo,
  .student-profile .profile-photo-fallback {
    width: 66px;
    height: 66px;
    border-radius: 16px;
  }
  .student-support-grid .actions {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 380px) {
  .main {
    padding-inline: 0.7rem;
  }
  .nav-toggle {
    font-size: 0.85rem;
    padding-inline: 0.85rem;
  }
  .btn {
    font-size: 0.92rem;
  }
}
.dashboard-action-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
  margin-bottom: 1.25rem;
}
.dashboard-action-panel {
  display: flex;
  flex-direction: column;
}
.dashboard-action-title {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: 1.28rem;
  line-height: 1.35;
  color: var(--theme-text-strong);
}
.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: auto 0 0;
}
.dashboard-actions .btn {
  width: auto;
  min-height: 2.55rem;
  padding-inline: 1.15rem;
}
.dashboard-main {
  display: grid;
  gap: 1.15rem;
}
.dashboard-role {
  display: inline-flex;
  margin-bottom: 0.35rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: var(--primary-faint);
  color: var(--theme-text-strong);
  font-size: 0.82rem;
  font-weight:var(--font-weight-semibold, 600);
}
.dashboard-layout-grid,
.dashboard-focus-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
  grid-auto-flow: dense;
}
.dashboard-layout-grid > *,
.dashboard-focus-grid > * {
  min-width: 0;
}
.dashboard-focus-grid.dashboard-no-setup {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.dashboard-layout-grid > .dashboard-today:only-child,
.dashboard-focus-grid > .dashboard-today:only-child {
  grid-column: 1 / -1;
}
.dashboard-layout-grid > .dashboard-today,
.dashboard-focus-grid > .dashboard-today {
  grid-column: span 8;
}
.dashboard-layout-grid > .dashboard-copilot-card,
.dashboard-layout-grid > .dashboard-setup,
.dashboard-focus-grid > .dashboard-copilot-card,
.dashboard-focus-grid > .dashboard-setup {
  grid-column: span 4;
}
.dashboard-layout-grid.dashboard-density-starter > .dashboard-copilot-card,
.dashboard-focus-grid.dashboard-density-starter > .dashboard-copilot-card {
  grid-column: span 8;
}
.dashboard-layout-grid.dashboard-no-setup.dashboard-no-copilot > .dashboard-today {
  grid-column: 1 / -1;
}
.dashboard-layout-wide,
.dashboard-layout-grid > .dashboard-quick-panel,
.dashboard-layout-grid > .dashboard-panel-expanded {
  grid-column: 1 / -1;
}
.dashboard-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.95rem;
}
.dashboard-section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--theme-text-strong);
  line-height: 1.35;
}
.dashboard-section-head p {
  margin: 0.18rem 0 0;
  color: var(--muted);
}
.dashboard-copilot-hero,
.dashboard-tasks-full,
.dashboard-quick-panel {
  width: 100%;
}
.dashboard-copilot-hero {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.94), rgba(255,255,255,0.78)),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
}
.dashboard-brief-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 0.8rem;
}
.dashboard-balanced-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
.dashboard-balanced-row > :only-child {
  grid-column: 1 / -1;
}
.ai-command-center {
  position: relative;
  overflow: visible;
}
.ai-command-page {
  gap: 1.1rem;
}
.ai-command-page-note {
  margin: 0;
}
.ai-command-entry {
  display: grid;
  gap: 0.9rem;
}
.ai-command-entry-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  z-index: 1;
}
.ai-command-entry-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}
.dashboard-copilot-card {
  display: grid;
  align-content: space-between;
  gap: 0.9rem;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78)),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
}
.copilot-main-advice {
  display: grid;
  gap: 0.55rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 16px;
  background: rgba(255,255,255,0.72);
}
.copilot-main-advice span,
.copilot-mini-activity span,
.dashboard-insight span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight:var(--font-weight-semibold, 600);
}
.copilot-main-advice strong {
  color: var(--theme-text-strong);
  font-size: 1.08rem;
  line-height: 1.45;
}
.copilot-main-advice p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}
.copilot-mini-activity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.copilot-mini-activity strong {
  color: var(--theme-text-strong);
}
.dashboard-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.8rem;
}
.dashboard-insight {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.05rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.78);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--primary-deep) 6%, transparent);
  color: var(--ink);
  transition: transform var(--motion-exit) var(--ease-soft), border-color var(--motion-exit) var(--ease-soft), background var(--motion-exit) var(--ease-soft);
}
.dashboard-insight:hover {
  transform: translateY(-1px);
  border-color: var(--primary-soft);
  background: #fff;
}
.dashboard-insight strong {
  color: var(--theme-text-strong);
  font-size: clamp(1.35rem, 1rem + 0.8vw, 2rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.number-soft-count {
  font-variant-numeric: tabular-nums;
}
.number-soft-count.is-counting {
  animation: numberSoftCount 0.62s var(--ease-standard) both;
}
.dashboard-insight small {
  color: var(--muted);
  line-height: 1.55;
}
.dashboard-insight-warning {
  border-color: color-mix(in srgb, var(--warm) 22%, var(--line));
  background: color-mix(in srgb, var(--warm-bg) 70%, #fff);
}
.dashboard-insight-ok {
  border-color: color-mix(in srgb, var(--ok) 15%, var(--line));
}
.dashboard-adaptive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 1rem;
  align-items: start;
  grid-auto-flow: dense;
}
.dashboard-adaptive-grid > .dashboard-health-panel:first-child:last-child,
.dashboard-panel-expanded {
  grid-column: 1 / -1;
}
.dashboard-layout-grid > .dashboard-health-panel {
  grid-column: span 8;
}
.dashboard-adaptive-grid > .dashboard-health-panel {
  grid-column: span 2;
}
.dashboard-layout-grid > .dashboard-empty-help,
.dashboard-layout-grid > .panel:not(.dashboard-today):not(.dashboard-copilot-card):not(.dashboard-setup):not(.dashboard-quick-panel):not(.dashboard-health-panel):not(.dashboard-empty-help) {
  grid-column: span 4;
}
.dashboard-adaptive-grid .dashboard-empty-help {
  grid-column: span 1;
}
.ai-command-center::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 28%),
    radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 24%);
  pointer-events: none;
}
.ai-command-head,
.ai-command-form,
.ai-command-result {
  position: relative;
  z-index: 1;
}
.ai-command-overlay[hidden],
.ai-command-status-shell[hidden],
.ai-command-result[hidden] {
  display: none !important;
}
body.ai-command-overlay-open {
  overflow: hidden;
  overscroll-behavior: contain;
}
body.ai-command-overlay-open .app-shell {
  filter: blur(10px) saturate(0.92);
  transform: scale(0.992);
  transform-origin: center top;
  transition: filter var(--motion-page) var(--ease-soft), transform var(--motion-page) var(--ease-soft);
}
.app-shell {
  transition: filter var(--motion-page) var(--ease-soft), transform var(--motion-page) var(--ease-soft);
}
.ai-command-form {
  display: grid;
  gap: 0.95rem;
}
.ai-command-input-wrap textarea {
  min-height: 112px;
  background: rgba(255, 255, 255, 0.88);
}
.ai-command-actions {
  display: grid;
  gap: 0.75rem;
}
.ai-command-samples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ai-command-sample {
  cursor: pointer;
  border: 0;
}
.ai-command-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 2vw, 2rem);
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 26%),
    linear-gradient(180deg, color-mix(in srgb, var(--primary-deep) 18%, rgba(255,255,255,0.2)), color-mix(in srgb, var(--primary-deep) 54%, rgba(255,255,255,0.12))),
    rgba(9, 22, 35, 0.18);
  backdrop-filter: blur(18px) saturate(1.05);
}
.ai-command-status {
  position: relative;
  width: min(96vw, 980px);
  min-height: min(56vh, 620px);
  max-height: min(92vh, 860px);
  overflow: auto;
  border-radius: 34px;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, rgba(255,255,255,0.55));
  background:
    linear-gradient(180deg, rgba(255,255,255,0.985), rgba(255,255,255,0.945)),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 6%, #fff), color-mix(in srgb, var(--accent) 5%, #fff));
  box-shadow:
    0 38px 110px color-mix(in srgb, var(--primary-deep) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.8);
  transition: transform var(--motion-overlay) var(--ease-standard), opacity var(--motion-overlay) var(--ease-soft), box-shadow var(--motion-overlay) var(--ease-soft);
}
.ai-command-status:focus {
  outline: none;
}
.ai-command-status[data-state="result"] {
  width: min(92vw, 760px);
  min-height: 0;
  max-height: min(88vh, 720px);
  border-radius: 26px;
}
.ai-command-status::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 24%),
    radial-gradient(circle at 88% 22%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 28%);
  opacity: 0.9;
}
.ai-command-status::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(34px - 1px);
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.52);
}
.ai-command-close {
  position: absolute;
  inset-block-start: 1.2rem;
  inset-inline-end: 1.2rem;
  z-index: 3;
  width: 3rem;
  height: 3rem;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, rgba(255,255,255,0.52));
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  color: var(--theme-text-strong);
  font-size: 1.45rem;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--primary-deep) 14%, transparent);
}
.ai-command-status-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 1.45rem;
  align-items: center;
  padding: 2rem 2rem 1rem;
  transition: opacity var(--motion-overlay) var(--ease-soft), transform var(--motion-overlay) var(--ease-standard), filter var(--motion-overlay) var(--ease-soft);
  position: relative;
  z-index: 1;
}
.ai-command-status-visual {
  position: relative;
  width: 184px;
  height: 184px;
  border-radius: 42px;
  display: grid;
  place-items: center;
  margin-inline: auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, #fff 88%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 90%, #fff), var(--primary-deep));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    0 24px 54px color-mix(in srgb, var(--primary-deep) 26%, transparent);
  transition: border-radius var(--motion-morph) var(--ease-soft), transform var(--motion-morph) var(--ease-soft), box-shadow var(--motion-morph) var(--ease-soft), background var(--motion-morph) var(--ease-soft);
}
.ai-command-orbit {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  animation: aiCommandOrbit 3.6s linear infinite;
}
.ai-command-orbit-one {
  width: 140px;
  height: 140px;
}
.ai-command-orbit-two {
  width: 102px;
  height: 102px;
  animation-duration: 2.8s;
  animation-direction: reverse;
}
.ai-command-orbit-three {
  width: 68px;
  height: 68px;
  animation-duration: 2s;
}
.ai-command-core {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  box-shadow:
    0 0 0 12px rgba(255,255,255,0.1),
    0 0 0 28px rgba(255,255,255,0.06);
  animation: aiCommandPulse 1.4s ease-in-out infinite;
  transition: opacity var(--motion-medium) var(--ease-soft), transform var(--motion-medium) var(--ease-soft);
}
.ai-command-status-mark {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  color: #fff;
  opacity: 0;
  transform: scale(0.55);
  transition: opacity var(--motion-soft) var(--ease-soft), transform var(--motion-rise) var(--ease-standard), background var(--motion-medium) var(--ease-soft);
}
.ai-command-status-mark svg {
  width: 38px;
  height: 38px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ai-command-status-body {
  display: grid;
  gap: 0.8rem;
}
.ai-command-status-body strong {
  font-size: clamp(1.5rem, 1.2rem + 0.7vw, 1.95rem);
  line-height: 1.35;
  color: var(--theme-text-strong);
}
.ai-command-status-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.85;
  font-size: 1.05rem;
}
.ai-command-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 0.35rem;
}
.ai-command-step {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  background: rgba(255,255,255,0.88);
  border: 1px solid color-mix(in srgb, var(--primary) 10%, rgba(255,255,255,0.65));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.52);
  opacity: 0.74;
  transform: translateY(0);
  transition:
    opacity var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}
.ai-command-step strong {
  font-size: 0.98rem;
}
.ai-command-step-dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #c8d0cf;
  flex: 0 0 auto;
  transition:
    transform var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}
.ai-command-step-active {
  opacity: 1;
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow:
    0 12px 30px color-mix(in srgb, var(--accent) 12%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.58);
}
.ai-command-step-active .ai-command-step-dot {
  background: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent);
  animation: aiCommandStepBreathe 1.1s ease-in-out infinite;
}
.ai-command-step-done {
  opacity: 1;
  background: color-mix(in srgb, var(--ok) 7%, rgba(255,255,255,0.92));
  border-color: color-mix(in srgb, var(--ok) 18%, transparent);
}
.ai-command-step-done .ai-command-step-dot {
  background: var(--ok);
  transform: scale(1.25);
}
.ai-command-step-done .ai-command-step-dot::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-inline-start: 2px solid #fff;
  border-block-end: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
  transform-origin: center;
}
.ai-command-result {
  margin-top: 1rem;
  transition: opacity var(--motion-overlay) var(--ease-soft), transform var(--motion-overlay) var(--ease-standard);
}
.ai-command-modal-result {
  margin-top: 0;
  padding: 0 2rem 2rem;
  position: relative;
  z-index: 1;
}
.ai-command-status[data-state="result"] .ai-command-modal-result {
  padding: 1.35rem;
}
.ai-command-status[data-state="result"] .ai-command-card-head {
  padding-inline-end: 3.3rem;
}
.ai-command-card {
  padding: 1.45rem 1.5rem;
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, rgba(255,255,255,0.7));
  background:
    linear-gradient(180deg, rgba(255,255,255,0.985), rgba(255,255,255,0.95)),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, #fff), #fff);
  box-shadow:
    0 22px 52px color-mix(in srgb, var(--primary-deep) 10%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.76);
}
.ai-command-modal-result .ai-command-card {
  animation: aiCommandResultIn var(--motion-page) var(--ease-standard);
}
.ai-command-status[data-state="processing"] .ai-command-status-mark {
  opacity: 0;
  transform: scale(0.55);
}
.ai-command-status[data-state="processing"] .ai-command-core {
  opacity: 1;
}
.ai-command-status[data-state="resolved"] .ai-command-status-visual,
.ai-command-status[data-state="transitioning"] .ai-command-status-visual {
  border-radius: 44px;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, #fff 92%, transparent), transparent 46%),
    linear-gradient(135deg, color-mix(in srgb, var(--ok) 92%, #fff), color-mix(in srgb, var(--primary) 80%, #fff));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    0 22px 50px color-mix(in srgb, var(--ok) 24%, transparent);
}
.ai-command-status[data-state="resolved"] .ai-command-orbit,
.ai-command-status[data-state="transitioning"] .ai-command-orbit {
  animation-play-state: paused;
  opacity: 0.18;
}
.ai-command-status[data-state="resolved"] .ai-command-core,
.ai-command-status[data-state="transitioning"] .ai-command-core {
  opacity: 0;
  transform: scale(0.4);
  animation: none;
}
.ai-command-status[data-state="resolved"] .ai-command-status-mark,
.ai-command-status[data-state="transitioning"] .ai-command-status-mark {
  opacity: 1;
  transform: scale(1);
  background: rgba(255,255,255,0.24);
  animation: aiCommandCheckPop var(--motion-pop) var(--ease-standard);
}
.ai-command-status[data-state="transitioning"] .ai-command-status-shell {
  opacity: 0;
  transform: translateY(-22px) scale(0.98);
  filter: blur(4px);
}
.ai-command-status[data-state="transitioning"] .ai-command-modal-result {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
}
.ai-command-status[data-state="result"] .ai-command-modal-result {
  animation: aiCommandSurfaceSettle var(--motion-slow) var(--ease-emphasized) both;
}
.ai-command-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}
.ai-command-card p {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.85;
}
.ai-command-result-details {
  margin: 0;
  padding-inline-start: 1.35rem;
  display: grid;
  gap: 0.65rem;
  font-size: 1rem;
  line-height: 1.8;
}
.ai-command-result-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.1rem;
}
.ai-command-result-links .btn {
  width: auto;
  min-width: 9rem;
}
.ai-command-note {
  padding: 0.8rem 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.8);
}
.ai-command-note.warn {
  background: var(--warm-bg);
  color: var(--warm);
  border-color: color-mix(in srgb, var(--warm) 22%, transparent);
}
.ai-command-note.info {
  background: var(--info-bg);
  color: var(--info);
  border-color: color-mix(in srgb, var(--info) 20%, transparent);
}
.ai-command-note.danger {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 20%, transparent);
}
.ai-command-note p {
  margin: 0.3rem 0 0.65rem;
}
@keyframes aiCommandPulse {
  0%, 100% {
    transform: scale(0.9);
    opacity: 0.72;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}
@keyframes aiCommandOrbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes aiCommandResultIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes aiCommandCheckPop {
  0% {
    opacity: 0;
    transform: scale(0.52);
  }
  65% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes aiCommandStepBreathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent);
  }
  50% {
    transform: scale(1.18);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 8%, transparent);
  }
}
@keyframes aiCommandSurfaceSettle {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.986);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.dashboard-task-list,
.setup-steps,
.health-grid {
  display: grid;
  gap: 0.65rem;
}
.dashboard-task,
.setup-step,
.health-item,
.quick-action-card {
  min-width: 0;
  display: grid;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  transition: background var(--motion-exit) var(--ease-soft), border-color var(--motion-exit) var(--ease-soft), transform var(--motion-exit) var(--ease-soft);
}
.dashboard-task:hover,
.setup-step:hover,
.health-item:hover,
.quick-action-card:hover {
  transform: translateY(-1px);
  background: #fff;
  border-color: var(--primary-soft);
}
.dashboard-task {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
}
.dashboard-task-dot,
.health-state,
.setup-step > span {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  background: var(--info);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--info) 12%, transparent);
}
.dashboard-task strong,
.setup-step strong,
.health-item strong,
.quick-action-card strong {
  display: block;
  color: var(--theme-text-strong);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.dashboard-task small,
.setup-step small,
.health-item small,
.quick-action-card span {
  display: block;
  margin-top: 0.12rem;
  color: var(--muted);
  line-height: 1.55;
}
.dashboard-task em,
.setup-step em,
.health-item em,
.quick-action-card em {
  color: var(--primary);
  font-style: normal;
  font-weight:var(--font-weight-semibold, 600);
  white-space: nowrap;
}
.dashboard-task-danger .dashboard-task-dot,
.health-danger .health-state {
  background: var(--danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 13%, transparent);
}
.dashboard-task-warning .dashboard-task-dot,
.health-warning .health-state,
.setup-step-warning > span {
  background: var(--warm);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warm) 14%, transparent);
}
.dashboard-task-ok .dashboard-task-dot,
.health-ok .health-state,
.setup-step-done > span {
  background: var(--ok);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 13%, transparent);
}
.setup-score {
  min-width: 3.7rem;
  text-align: center;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
}
.setup-meter {
  height: 0.65rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--primary-faint);
  border: 1px solid var(--line);
  margin-bottom: 0.9rem;
}
.setup-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.setup-step {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.72rem 0.8rem;
  border-radius: 13px;
}
.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}
.quick-action-card {
  align-content: space-between;
  padding: 0.95rem;
  border-radius: 14px;
}
.quick-action-card em {
  justify-self: start;
  padding: 0.35rem 0.72rem;
  border-radius: 999px;
  background: var(--primary-faint);
}
.health-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.health-item {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.82rem 0.9rem;
  border-radius: 14px;
}
.dashboard-secondary-grid {
  margin-bottom: 0;
}
.workflow-guide {
  margin-bottom: 1.25rem;
}
.readiness-panel {
  margin-bottom: 1.25rem;
  border-color: var(--line);
}
.readiness-panel-blocking {
  background: linear-gradient(180deg, rgba(255, 247, 247, 0.95), rgba(255, 255, 255, 0.8));
}
.readiness-panel-warning {
  background: linear-gradient(180deg, rgba(255, 252, 242, 0.96), rgba(255, 255, 255, 0.8));
}
.readiness-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.95rem;
}
.readiness-panel-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--theme-text-strong);
}
.readiness-panel-head p {
  margin: 0.2rem 0 0;
  color: var(--muted);
}
.readiness-list {
  display: grid;
  gap: 0.65rem;
}
.readiness-list.compact {
  margin-top: 0.75rem;
}
.readiness-sublist {
  margin-top: 1rem;
}
.readiness-sublist > strong {
  display: block;
  color: var(--theme-text-strong);
  margin-bottom: 0.15rem;
}
.readiness-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.82rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}
.readiness-item strong {
  display: block;
  color: var(--theme-text-strong);
  line-height: 1.35;
}
.readiness-item small {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  line-height: 1.55;
}
.readiness-item em {
  color: var(--primary);
  font-style: normal;
  font-weight:var(--font-weight-semibold, 600);
  white-space: nowrap;
}
.readiness-dot {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  margin-top: 0.25rem;
  background: color-mix(in srgb, var(--primary) 35%, #fff);
}
.readiness-item-blocking .readiness-dot {
  background: var(--danger);
}
.readiness-item-warning .readiness-dot {
  background: var(--warm);
}
.workflow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.95rem;
}
.workflow-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--theme-text-strong);
}
.workflow-head p {
  margin: 0.18rem 0 0;
  color: var(--muted);
}
.workflow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}
.workflow-step,
.workflow-action,
.empty-state {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}
.workflow-step {
  padding: 0.85rem;
  display: grid;
  gap: 0.35rem;
}
.workflow-step strong {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-size: 0.9rem;
}
.workflow-step span {
  color: var(--theme-text-strong);
  font-weight:var(--font-weight-semibold, 600);
  line-height: 1.35;
}
.workflow-step small {
  color: var(--muted);
  line-height: 1.55;
}
.workflow-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
}
.workflow-action {
  padding: 0.9rem;
  display: grid;
  gap: 0.35rem;
  min-height: 7.6rem;
  align-content: space-between;
}
.workflow-action strong {
  color: var(--theme-text-strong);
  line-height: 1.35;
}
.workflow-action span {
  color: var(--muted);
  line-height: 1.5;
}
.workflow-action em {
  color: var(--primary);
  font-style: normal;
  font-weight:var(--font-weight-semibold, 600);
}
.empty-state {
  padding: var(--surface-pad-lg);
  text-align: center;
  display: grid;
  gap: var(--surface-gap-md);
  justify-items: center;
  box-shadow: var(--elevation-0);
}
.empty-state h3 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--theme-text-strong);
}
.empty-state p {
  margin: 0;
  color: var(--muted);
  max-width: 34rem;
}
.empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
  margin-top: 0.2rem;
}
.workflow-submit-row {
  margin-top: 1rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.stat {
  position: relative;
  overflow: hidden;
}
.stat::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--primary);
  opacity: 0.72;
}
.stat-absence::after { background: var(--danger); }
.stat-fees::after { background: var(--warm); }
.stat-revenue::after { background: var(--info); }
.badge {
  border: 1px solid rgba(90, 111, 103, 0.12);
}
.data-table tbody tr {
  transition:
    background var(--motion-hover),
    box-shadow var(--motion-hover),
    opacity var(--motion-hover);
}
.data-table tbody tr:hover {
  background: var(--primary-faint);
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in srgb, #fff 72%, transparent),
    var(--focus-ring);
  transition:
    box-shadow var(--motion-focus),
    border-color var(--motion-focus),
    transform var(--motion-press);
}
.sidebar :where(a, button, input):focus-visible,
.mobile-bottom-nav :where(a, button):focus-visible,
.portal-bottom-nav :where(a, button):focus-visible {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.72),
    0 0 0 5px color-mix(in srgb, var(--accent) 45%, transparent);
}
:where(.quick-action-card, .dashboard-task, .health-item, .setup-step, .command-item, .mobile-bottom-item):focus-visible {
  transform: translateY(-1px);
}
:where(button, .btn, .btn-sm, input, select, textarea) {
  -webkit-tap-highlight-color: transparent;
}
.main .btn,
.portal-main .btn,
.saas-cta .btn,
.topbar .btn,
.panel .btn {
  min-height: var(--control-height);
  border-radius: var(--radius-md);
}
.main .btn-sm,
.portal-main .btn-sm,
.panel .btn-sm,
.data-table .btn-sm {
  min-height: var(--control-height-sm);
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
}
.app-shell .btn-primary,
.portal-shell .btn-primary,
.saas-shell .btn-primary {
  width: auto;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: #fff;
  box-shadow: var(--elevation-2);
}
.btn-primary:hover {
  box-shadow: var(--elevation-3);
}
.btn-ghost {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--theme-text-strong);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}
.btn-ghost:hover {
  background: var(--primary-faint);
  border-color: color-mix(in srgb, var(--primary) 34%, transparent);
}
.btn-danger {
  color: #fff;
  background: linear-gradient(135deg, var(--danger), color-mix(in srgb, var(--danger) 72%, #000));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--danger) 18%, transparent);
}
.btn-soft {
  color: var(--theme-text-strong);
  background: var(--primary-faint);
  border: 1px solid color-mix(in srgb, var(--primary) 13%, transparent);
}
.field {
  display: grid;
  gap: 0.35rem;
  position: relative;
  border-radius: var(--radius-md);
  transition:
    background-color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}
.field.field-is-active {
  background: color-mix(in srgb, var(--primary-faint) 36%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 4%, transparent);
}
.field label {
  color: var(--ink);
  line-height: 1.45;
}
.field input,
.field select,
.field textarea {
  min-height: var(--control-height);
  border-radius: var(--radius-md);
  border-color: color-mix(in srgb, var(--primary) 20%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: color-mix(in srgb, var(--primary) 34%, transparent);
}
.field select:hover,
select:hover {
  color: var(--theme-text-strong);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--primary) 8%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.field select:focus,
select:focus {
  color: var(--theme-text-strong);
}
.field.field-select-active {
  background: color-mix(in srgb, var(--accent) 7%, var(--primary-faint) 26%);
}
.field.field-select-active::before {
  opacity: 0.92;
  transform: scaleY(1);
}
.field.field-select-active > label {
  color: var(--theme-text-strong);
}
select.select-is-active:not(:disabled) {
  background-position:
    left calc(0.92rem + 1px) center,
    left 0.88rem center,
    0 0;
  background-size:
    0.5rem 0.5rem,
    0.5rem 0.5rem,
    auto;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
html[dir="rtl"] select.select-is-active:not(:disabled) {
  background-position:
    left calc(0.92rem + 1px) center,
    left 0.88rem center,
    0 0;
}
.select-choice-settled {
  animation: selectChoiceSettle 0.46s var(--ease-emphasized) both;
}
.field-select-committed {
  animation: fieldSelectCommitted var(--motion-pop) var(--ease-standard) both;
}
.field-has-error label {
  color: color-mix(in srgb, var(--danger) 78%, var(--ink));
}
.field-has-error :is(input, select, textarea),
:is(input, select, textarea)[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--danger) 64%, transparent);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--danger) 11%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.input-invalid-flash {
  animation: fieldValidationNudge var(--motion-slow) var(--ease-standard);
}
.field input::placeholder,
.field textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 72%, transparent);
}
.field input:disabled,
.field select:disabled,
.field textarea:disabled {
  color: color-mix(in srgb, var(--muted) 78%, transparent);
  background: color-mix(in srgb, var(--paper-2) 45%, #fff);
  cursor: not-allowed;
}
.field select:disabled,
select:disabled {
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) left calc(1rem + 1px) center / 0.44rem 0.44rem no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) left 1rem center / 0.44rem 0.44rem no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--paper-2) 45%, #fff), color-mix(in srgb, #fff 88%, var(--primary-faint)));
}
html[dir="rtl"] :is(.field select:disabled, select:disabled) {
  background-position:
    left calc(1rem + 1px) center,
    left 1rem center,
    0 0;
}
.field small,
.field-help {
  display: block;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}
.panel,
.stat,
.workflow-step,
.workflow-action,
.empty-state,
.portal-card,
.students-mobile-card,
.stack-item {
  border-color: var(--line);
}
.panel {
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-2);
}
.panel + .panel,
.grid-2 + .panel,
.grid-3 + .panel,
.stats + .panel,
.workflow-guide + .panel {
  margin-top: var(--space-5);
}
.section-title {
  color: var(--theme-text-strong);
  line-height: 1.35;
}
.table-wrap {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-strong) 70%, transparent);
  box-shadow: var(--elevation-0);
  overflow-x: auto;
}
.table-wrap .data-table {
  margin: 0;
}
.data-table {
  border-spacing: 0;
}
.data-table th,
.data-table td {
  line-height: 1.55;
}
.data-table th {
  letter-spacing: 0;
  white-space: nowrap;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 88%, var(--primary-faint)), color-mix(in srgb, #fff 76%, var(--surface)));
  border-bottom-color: color-mix(in srgb, var(--primary) 14%, transparent);
}
.data-table td {
  color: var(--ink);
  transition:
    background-color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    color var(--motion-base) var(--ease-standard);
}
.data-table tbody tr:hover td,
.data-table tbody tr:focus-within td {
  background-color: color-mix(in srgb, var(--primary-faint) 58%, transparent);
}
.data-table tbody tr:hover td:first-child,
.data-table tbody tr:focus-within td:first-child {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--primary) 64%, var(--accent));
}
html[dir="rtl"] .data-table tbody tr:hover td:first-child,
html[dir="rtl"] .data-table tbody tr:focus-within td:first-child {
  box-shadow: inset -3px 0 0 color-mix(in srgb, var(--primary) 64%, var(--accent));
}
.data-table td .muted,
.muted {
  color: var(--muted);
}
.actions {
  gap: var(--space-2);
  align-items: center;
}
.actions > * {
  transition:
    transform var(--motion-fast) var(--ease-press),
    opacity var(--motion-base) var(--ease-standard);
}
.actions > *:where(:hover, :focus-visible) {
  transform: translateY(-1px);
}
.badge,
.chip {
  border-radius: var(--radius-pill);
  line-height: 1.35;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.6rem;
}
.badge-danger,
.badge-error {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
}
.badge-warm,
.badge-warning {
  background: color-mix(in srgb, var(--warm) 14%, transparent);
  color: var(--warm);
  border-color: color-mix(in srgb, var(--warm) 22%, transparent);
}
.badge-info {
  background: color-mix(in srgb, var(--info) 14%, transparent);
  color: var(--info);
  border-color: color-mix(in srgb, var(--info) 22%, transparent);
}
.alert {
  border-radius: var(--radius-md);
  line-height: 1.6;
  border: 1px solid transparent;
  box-shadow: var(--elevation-0);
}
.alert-error {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 20%, transparent);
}
.alert-ok {
  background: var(--ok-bg);
  border-color: color-mix(in srgb, var(--ok) 20%, transparent);
}
.alert-info {
  background: var(--info-bg);
  color: var(--info);
  border-color: color-mix(in srgb, var(--info) 20%, transparent);
}
.alert-warning {
  background: var(--warm-bg);
  color: var(--warm);
  border-color: color-mix(in srgb, var(--warm) 22%, transparent);
}
.empty-state {
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 76%, transparent), color-mix(in srgb, var(--surface) 82%, transparent));
}
.empty-state h3 {
  line-height: 1.35;
}
.empty-actions .btn,
.empty-actions .btn-ghost,
.empty-actions .btn-primary {
  min-width: 8.5rem;
}
dialog,
.dialog,
.modal {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-strong);
  color: var(--ink);
  box-shadow: var(--elevation-4);
  animation: premiumModalIn var(--motion-modal-in) both;
  transform-origin: center;
}
dialog::backdrop,
.modal-backdrop {
  background: rgba(7, 24, 19, 0.42);
  backdrop-filter: blur(2px);
  animation: premiumBackdropIn var(--motion-base) var(--ease-standard) both;
}
.form-grid,
.filter-grid {
  align-items: end;
}
.subnav {
  gap: var(--space-2);
}
.subnav a {
  border-radius: var(--radius-md);
}
.subnav a.active,
.subnav a[aria-current="page"],
.mobile-bottom-item.active,
.mobile-bottom-item[aria-current="page"],
.portal-bottom-nav a.active,
.portal-bottom-nav a[aria-current="page"],
.portal-nav a.active,
.portal-nav a[aria-current="page"] {
  box-shadow:
    inset 0 -2px 0 color-mix(in srgb, var(--accent) 78%, #fff),
    var(--shadow-xs);
}
@media (min-width: 961px) {
  .panel .search-bar,
  .panel form.search-bar,
  .panel .form-grid,
  .panel .filter-grid {
    gap: var(--space-4);
  }
  .data-table tbody tr {
    transition: background var(--motion-micro) var(--ease-soft), box-shadow var(--motion-micro) var(--ease-soft);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-instant: 0.01ms;
    --motion-micro: 0.01ms;
    --motion-fast: 0.01ms;
    --motion-exit: 0.01ms;
    --motion-control: 0.01ms;
    --motion-base: 0.01ms;
    --motion-hold: 0.01ms;
    --motion-soft: 0.01ms;
    --motion-medium: 0.01ms;
    --motion-slow: 0.01ms;
    --motion-rise: 0.01ms;
    --motion-page: 0.01ms;
    --motion-morph: 0.01ms;
    --motion-overlay: 0.01ms;
    --motion-sheen: 0.01ms;
    --motion-pop: 0.01ms;
    --motion-snap: 0.01ms;
    --motion-pulse: 0.01ms;
    --motion-pulse-strong: 0.01ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
.command-backdrop,
.command-palette,
.smart-toast {
  display: none;
}
.command-backdrop[hidden],
.command-palette[hidden] {
  display: none !important;
}
.command-backdrop {
  position: fixed;
  inset: 0;
  z-index: 88;
  display: block;
  background: rgba(7, 24, 19, 0.44);
  backdrop-filter: blur(3px);
  animation: premiumBackdropIn var(--motion-base) var(--ease-standard) both;
}
.command-backdrop.is-closing {
  animation: premiumBackdropOut var(--motion-exit) var(--ease-standard) both;
}
.command-palette {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: start center;
  padding: calc(4rem + env(safe-area-inset-top, 0px)) 1rem 1rem;
  pointer-events: none;
}
.command-box {
  width: min(100%, 720px);
  max-height: min(78vh, 720px);
  display: grid;
  gap: var(--surface-gap-md);
  padding: var(--surface-pad-sm);
  border-radius: var(--radius-lg);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  box-shadow: var(--elevation-4);
  pointer-events: auto;
  overflow: hidden;
  animation: commandPaletteIn var(--motion-modal-in) both;
}
.command-box:focus {
  outline: none;
}
.command-palette.is-closing .command-box {
  animation: commandPaletteOut var(--motion-modal-out) both;
}
.command-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.15rem 0.2rem 0;
}
.command-head strong {
  display: block;
  color: var(--theme-text-strong);
  font-size: 1.15rem;
}
.command-head span {
  display: block;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}
.command-head button {
  width: 2.5rem;
  min-height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--theme-text-strong);
  background: var(--primary-faint);
  font: inherit;
  font-size: 1.25rem;
  cursor: pointer;
}
[data-command-input] {
  width: 100%;
  min-height: 3.35rem;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 16px;
  padding: 0.9rem 1rem;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 1.02rem;
}
[data-command-input]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.command-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.command-tools button {
  min-height: 2.35rem;
  padding: 0.42rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--theme-text-strong);
  background: var(--primary-faint);
  font: inherit;
  font-size: 0.85rem;
  font-weight:var(--font-weight-semibold, 600);
  cursor: pointer;
}
.command-results {
  display: grid;
  gap: 0.7rem;
  max-height: min(56vh, 520px);
  overflow: auto;
  padding: 0.1rem 0.1rem 0.35rem;
  overscroll-behavior: contain;
  opacity: 0.86;
  transform: translateY(3px);
  transition:
    opacity var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-standard);
}
.command-results.is-loading,
.command-results.is-rendered {
  opacity: 1;
  transform: translateY(0);
}
.command-group {
  display: grid;
  gap: 0.35rem;
  animation: premiumContentIn var(--motion-slow) var(--ease-emphasized) both;
}
.command-group-title {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight:var(--font-weight-semibold, 600);
  padding-inline: 0.2rem;
}
.command-item {
  min-height: 3.35rem;
  padding: 0.65rem 0.75rem;
  border-radius: 14px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.66);
  text-decoration: none;
  animation: premiumRowIn var(--motion-slow) var(--ease-emphasized) both;
  animation-delay: var(--row-delay, 0ms);
  transition:
    transform var(--motion-press),
    border-color var(--motion-hover),
    background var(--motion-hover),
    box-shadow var(--motion-hover),
    color var(--motion-hover);
}
.command-item:hover,
.command-item.active {
  color: var(--theme-text-strong);
  background: var(--primary-faint);
  border-color: color-mix(in srgb, var(--primary) 14%, transparent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}
.command-item.active {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%),
    var(--primary-faint);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--primary) 70%, var(--accent)),
    var(--shadow-xs);
}
html[dir="rtl"] .command-item.active {
  background:
    linear-gradient(270deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%),
    var(--primary-faint);
  box-shadow:
    inset -3px 0 0 color-mix(in srgb, var(--primary) 70%, var(--accent)),
    var(--shadow-xs);
}
.command-item strong,
.command-item small {
  display: block;
}
.command-item strong {
  line-height: 1.35;
}
.command-item small {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}
.command-item em {
  flex: 0 0 auto;
  min-width: 3.5rem;
  padding: 0.22rem 0.48rem;
  border-radius: var(--radius-pill);
  color: var(--theme-text-strong);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  font-size:var(--text-caption);
  font-style: normal;
  font-weight:var(--font-weight-semibold, 600);
  text-align: center;
}
.command-empty {
  padding: 1.25rem;
  border-radius: 16px;
  color: var(--muted);
  background: var(--primary-faint);
  text-align: center;
}
.command-results.is-loading {
  min-height: 11rem;
}
.command-skeleton-row {
  display: grid;
  gap: 0.4rem;
  padding: 0.75rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid color-mix(in srgb, var(--primary) 8%, transparent);
}
.command-skeleton-row .skeleton:first-child {
  width: 68%;
  min-height: 0.95rem;
}
.command-skeleton-row .skeleton:last-child {
  width: 42%;
  min-height: 0.78rem;
  opacity: 0.72;
}
.smart-toast {
  position: fixed;
  inset-inline: 50%;
  bottom: calc(1.15rem + env(safe-area-inset-bottom, 0px));
  z-index: 1185;
  width: max-content;
  min-width: min(92vw, 320px);
  max-width: min(92vw, 560px);
  min-height: 3.05rem;
  transform: translate(-50%, 0.8rem) scale(0.975);
  opacity: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.68rem 0.82rem;
  border-radius: var(--radius-pill);
  color: var(--theme-text-strong);
  background: color-mix(in srgb, #fff 92%, var(--info-bg));
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  box-shadow: var(--elevation-4);
  transition:
    opacity var(--motion-toast),
    transform var(--motion-toast),
    box-shadow var(--motion-toast);
}
html[dir="rtl"] .smart-toast {
  transform: translate(50%, 0.8rem) scale(0.98);
}
.smart-toast.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
html[dir="rtl"] .smart-toast.show {
  transform: translate(50%, 0) scale(1);
}
.smart-toast.is-leaving {
  opacity: 0;
  transform: translate(-50%, 0.45rem) scale(0.985);
}
html[dir="rtl"] .smart-toast.is-leaving {
  transform: translate(50%, 0.45rem) scale(0.985);
}
.smart-toast-icon {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: var(--radius-pill);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 10%, transparent);
}
.smart-toast-icon::after {
  content: "";
  width: 0.72rem;
  height: 0.42rem;
  border-inline-start: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -1px);
}
.smart-toast-message {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight:var(--font-weight-semibold, 600);
}
.smart-toast button {
  min-height: 2.1rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: var(--radius-pill);
  color: var(--primary);
  background: color-mix(in srgb, #fff 76%, var(--primary-faint));
  font: inherit;
  font-size: 0.82rem;
  font-weight:var(--font-weight-semibold, 600);
  cursor: pointer;
  transition:
    transform var(--motion-fast) var(--ease-press),
    background-color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}
.smart-toast button:hover,
.smart-toast button:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
  outline: none;
}
body.command-open {
  overflow: hidden;
  overscroll-behavior: contain;
}
@media (max-width: 960px) {
  .ai-command-overlay {
    padding:
      calc(0.75rem + env(safe-area-inset-top, 0px))
      0.75rem
      calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }
  .premium-confirm-overlay {
    padding:
      calc(1rem + env(safe-area-inset-top, 0px))
      0.85rem
      calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  .command-trigger kbd {
    display: none;
  }
  .command-palette {
    align-items: end;
    place-items: end stretch;
    padding:
      0.6rem
      0.6rem
      calc(0.6rem + env(safe-area-inset-bottom, 0px));
  }
  .command-box {
    width: 100%;
    max-height: calc(86vh - env(safe-area-inset-top, 0px));
    border-radius: 22px;
    padding: 0.75rem;
  }
  .command-results {
    max-height: 54vh;
  }
  .command-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .command-tools button {
    width: 100%;
  }
  .command-item {
    min-height: 3.65rem;
  }
}
@media (max-width: 420px) {
  .command-item {
    align-items: flex-start;
    flex-direction: column;
  }
  .command-item em {
    min-width: 0;
  }
  .smart-toast {
    border-radius: 16px;
    inset-inline: 0.65rem;
    width: auto;
    min-width: 0;
    max-width: none;
    transform: translateY(0.8rem);
  }
  html[dir="rtl"] .smart-toast,
  .smart-toast.show,
  html[dir="rtl"] .smart-toast.show,
  .smart-toast.is-leaving,
  html[dir="rtl"] .smart-toast.is-leaving {
    transform: translateY(0);
  }
}
@media (min-width: 961px) {
  body {
    background:
      linear-gradient(135deg, rgba(255, 250, 240, 0.75), rgba(241, 247, 244, 0.88)),
      var(--paper);
  }
  .app-shell {
    grid-template-columns: 278px minmax(0, 1fr);
    background:
      radial-gradient(760px 320px at 92% 0%, var(--accent-faint), transparent 55%),
      linear-gradient(180deg, #fbf8f1 0%, #f2efe4 100%);
  }
  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    padding: 1.35rem 1rem;
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--primary-deep) 96%, transparent),
        color-mix(in srgb, var(--primary) 96%, transparent)
      ),
      var(--primary);
  }
  .sidebar::-webkit-scrollbar {
    width: 8px;
  }
  .sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
  }
  .sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
    border-radius: 999px;
  }
  .sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.38);
  }
  .nav-list a {
    border: 1px solid transparent;
  }
  .nav-list a:hover,
  .nav-list a.active {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .main {
    width: min(100%, 1220px);
    margin-inline: auto;
    padding: 2rem clamp(1.6rem, 2.8vw, 2.5rem);
  }
  .topbar {
    padding: 1.1rem 1.25rem;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 12px 34px color-mix(in srgb, var(--primary-deep) 8%, transparent);
    backdrop-filter: blur(8px);
  }
  .dashboard-hero {
    align-items: flex-start;
  }
  .panel {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--primary-deep) 7.5%, transparent);
  }
  .panel:hover,
  .stat:hover {
    box-shadow: 0 16px 38px color-mix(in srgb, var(--primary-deep) 10%, transparent);
  }
  .dashboard-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .stat {
    min-height: 7.2rem;
    padding: 1.05rem 1.1rem 1rem;
    background: linear-gradient(160deg, #fff, var(--surface-strong));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--primary-deep) 6%, transparent);
  }
  .stat .label {
    font-size: 0.86rem;
  }
  .stat .value {
    font-size: 1.95rem;
  }
  .btn {
    border-radius: 11px;
  }
  .btn-primary {
    box-shadow: 0 9px 18px color-mix(in srgb, var(--primary-deep) 20%, transparent);
  }
  .btn-ghost {
    background: rgba(255, 255, 255, 0.56);
  }
  .data-table th {
    background: var(--primary-faint);
    color: var(--theme-text-strong);
  }
  .data-table th:first-child {
    border-start-start-radius: 10px;
  }
  .data-table th:last-child {
    border-start-end-radius: 10px;
  }
  .stack-item {
    background: rgba(255, 255, 255, 0.7);
  }
}
@media (max-width: 960px) {
  .ai-command-entry-body {
    align-items: stretch;
    flex-direction: column;
  }
  .ai-command-entry-body .btn {
    width: 100%;
  }
  .ai-command-overlay {
    padding: 0.9rem;
  }
  .ai-command-status {
    width: min(96vw, 720px);
    min-height: min(78vh, 720px);
    max-height: min(94vh, 860px);
    border-radius: 28px;
  }
  .ai-command-status[data-state="result"] {
    width: min(94vw, 680px);
    min-height: 0;
    max-height: 90vh;
  }
  .ai-command-close {
    inset-block-start: 0.9rem;
    inset-inline-end: 0.9rem;
  }
  .ai-command-status-shell {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 1.25rem 1.2rem 0.85rem;
  }
  .ai-command-status-visual {
    width: 150px;
    height: 150px;
  }
  .ai-command-orbit-one {
    width: 114px;
    height: 114px;
  }
  .ai-command-orbit-two {
    width: 84px;
    height: 84px;
  }
  .ai-command-orbit-three {
    width: 58px;
    height: 58px;
  }
  .ai-command-steps {
    grid-template-columns: 1fr;
  }
  .ai-command-modal-result {
    padding: 0 1.2rem 1.2rem;
  }
  .ai-command-status[data-state="result"] .ai-command-modal-result {
    padding: 1rem;
  }
  .dashboard-action-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    margin-bottom: 1rem;
  }
  .dashboard-action-panel {
    min-height: 0;
  }
  .dashboard-action-title {
    font-size: 1.18rem;
  }
  .dashboard-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.7rem;
  }
  .dashboard-actions .btn {
    width: 100% !important;
    min-width: 0;
    padding-inline: 0.75rem;
  }
  .topbar,
  .panel,
  .stat,
  .students-mobile-card,
  .responsive-table tr,
  .portal-card {
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.78);
  }
  .btn-primary {
    box-shadow: 0 8px 18px color-mix(in srgb, var(--primary-deep) 18%, transparent);
  }
  .btn-ghost {
    background: rgba(255, 255, 255, 0.58);
  }
  .subnav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    -webkit-overflow-scrolling: touch;
  }
  .subnav a {
    white-space: nowrap;
  }
  .stat::after {
    width: 3px;
  }
  .dashboard-main {
    gap: 0.9rem;
  }
  .dashboard-layout-grid,
  .dashboard-focus-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .dashboard-balanced-row {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .dashboard-brief-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-layout-grid > .dashboard-today,
  .dashboard-layout-grid > .dashboard-copilot-card,
  .dashboard-layout-grid.dashboard-density-starter > .dashboard-copilot-card,
  .dashboard-layout-grid > .dashboard-setup,
  .dashboard-layout-grid > .dashboard-health-panel,
  .dashboard-layout-grid > .dashboard-empty-help,
  .dashboard-layout-grid > .panel,
  .dashboard-layout-wide,
  .dashboard-focus-grid > .dashboard-today,
  .dashboard-focus-grid > .dashboard-copilot-card,
  .dashboard-focus-grid.dashboard-density-starter > .dashboard-copilot-card,
  .dashboard-focus-grid > .dashboard-setup,
  .dashboard-health-panel,
  .dashboard-empty-help {
    grid-column: 1 / -1;
  }
  .dashboard-section-head {
    align-items: stretch;
    flex-direction: column;
    gap: 0.55rem;
  }
  .dashboard-section-head h2 {
    font-size: 1.22rem;
  }
  .ai-command-overlay {
    padding: 0.9rem;
  }
  .ai-command-status {
    width: min(96vw, 720px);
    min-height: min(78vh, 720px);
    max-height: min(94vh, 860px);
  }
  .ai-command-close {
    inset-block-start: 0.9rem;
    inset-inline-end: 0.9rem;
  }
  .ai-command-status-shell {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 1.25rem 1.2rem 0.85rem;
  }
  .ai-command-status-visual {
    width: 150px;
    height: 150px;
  }
  .ai-command-orbit-one {
    width: 114px;
    height: 114px;
  }
  .ai-command-orbit-two {
    width: 84px;
    height: 84px;
  }
  .ai-command-orbit-three {
    width: 58px;
    height: 58px;
  }
  .ai-command-steps {
    grid-template-columns: 1fr;
  }
  .ai-command-modal-result {
    padding: 0 1.2rem 1.2rem;
  }
  .dashboard-task,
  .setup-step,
  .health-item {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .dashboard-task em,
  .setup-step em,
  .health-item em {
    grid-column: 2;
    justify-self: start;
    white-space: normal;
    padding: 0.18rem 0;
  }
  .quick-action-grid,
  .health-grid {
    grid-template-columns: 1fr;
  }
  .quick-action-card {
    min-height: 0;
    gap: 0.55rem;
  }
  .setup-score {
    align-self: flex-start;
  }
  .workflow-head {
    flex-direction: column;
    gap: 0.55rem;
  }
  .workflow-head h2 {
    font-size: 1.22rem;
  }
  .workflow-steps {
    grid-template-columns: 1fr;
  }
  .workflow-step {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.35rem 0.65rem;
  }
  .workflow-step small {
    grid-column: 2;
  }
  .workflow-actions-grid {
    grid-template-columns: 1fr;
  }
  .workflow-action {
    min-height: 0;
  }
  .empty-actions,
  .workflow-submit-row {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .workflow-submit-row {
    position: sticky;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 15;
    padding: 0.6rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--paper) 82%, rgba(255,255,255,0.88));
    border: 1px solid var(--line);
    box-shadow: 0 12px 34px color-mix(in srgb, var(--primary-deep) 13%, transparent);
  }
}
@media (max-width: 520px) {
  .dashboard-actions {
    grid-template-columns: 1fr;
  }
}
.telegram-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.telegram-status-item,
.telegram-steps > div {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  padding: 0.85rem 0.95rem;
}
.telegram-status-item {
  display: grid;
  gap: 0.18rem;
}
.telegram-status-item span {
  color: var(--muted);
  font-size: 0.86rem;
}
.telegram-status-item strong {
  color: var(--theme-text-strong);
  overflow-wrap: anywhere;
}
.telegram-status-item strong.ok {
  color: var(--ok);
}
.telegram-status-item strong.bad {
  color: var(--danger);
}
.telegram-steps {
  display: grid;
  gap: 0.7rem;
}
.telegram-steps > div {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.telegram-steps strong {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--primary);
  color: #fff;
}
.telegram-toolbox {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.telegram-link-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.telegram-advanced summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--theme-text-strong);
}
.ai-import-panel input[type="file"] {
  padding: 0.7rem;
  background: #fff;
}
.ai-import-table input[type="text"],
.ai-import-table input:not([type]) {
  width: 100%;
  min-width: 9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  font: inherit;
}
.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--theme-text-strong);
  white-space: nowrap;
}
.ai-import-actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1rem;
}
.ai-waiting,
.ai-waiting body {
  overflow: hidden;
}
.ai-wait-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background:
    radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 34%),
    color-mix(in srgb, var(--primary-deep) 32%, rgba(255,255,255,0.58));
  backdrop-filter: blur(11px);
}
.ai-wait-overlay[hidden] {
  display: none;
}
.ai-wait-card {
  width: min(100%, 520px);
  border-radius: 18px;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  box-shadow: 0 24px 80px color-mix(in srgb, var(--primary-deep) 24%, transparent);
  text-align: center;
  animation: aiWaitRise var(--motion-soft) var(--ease-soft) both;
}
.ai-job-panel {
  min-height: min(54vh, 460px);
  display: grid;
  place-items: center;
}
.schedule-ai-panel,
.schedule-ai-preview {
  margin-bottom: 1.25rem;
}
.schedule-ai-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.schedule-ai-form {
  display: grid;
  gap: 1rem;
}
.schedule-ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.schedule-ai-issues {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.schedule-ai-request-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.schedule-ai-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.schedule-ai-card {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--surface) 90%, #fff));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--primary-deep) 8%, transparent);
  cursor: pointer;
}
.schedule-ai-card input[type="checkbox"] {
  margin-top: 0.2rem;
}
.schedule-ai-card-main {
  display: grid;
  gap: 0.28rem;
}
.schedule-ai-card-main span,
.schedule-ai-card-main small {
  color: var(--muted);
}
.ai-job-card {
  box-shadow: none;
  border-color: var(--line);
}
.ai-wait-visual {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 0 auto 1rem;
  border-radius: 26px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 92%, #fff), var(--primary-deep));
  overflow: hidden;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--primary-deep) 22%, transparent);
}
.ai-wait-visual::before,
.ai-wait-visual::after {
  content: "";
  position: absolute;
  inset-inline: 18px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
}
.ai-wait-visual::before { top: 28px; }
.ai-wait-visual::after { top: 58px; width: 38px; }
.ai-wait-visual span {
  position: absolute;
  inset-inline: 14px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 70%, transparent);
  animation: aiScan 1.45s ease-in-out infinite;
}
.ai-wait-visual span:nth-child(1) { animation-delay: 0s; }
.ai-wait-visual span:nth-child(2) { animation-delay: 0.24s; opacity: 0.75; }
.ai-wait-visual span:nth-child(3) { animation-delay: 0.48s; opacity: 0.55; }
.ai-wait-copy h2 {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--theme-text-strong);
}
.ai-wait-copy p {
  margin: 0 auto 1rem;
  max-width: 28rem;
  color: var(--muted);
}
.ai-wait-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}
.ai-wait-steps div {
  position: relative;
  display: grid;
  gap: 0.25rem;
  padding: 0.7rem 0.55rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 7%, #fff);
  border: 1px solid var(--line);
  overflow: hidden;
  transition:
    transform var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    background-color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}
.ai-wait-steps div::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--motion-slow) var(--ease-emphasized);
}
.ai-wait-steps div.is-active {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 26%, transparent);
  background: color-mix(in srgb, var(--primary) 10%, #fff);
  box-shadow: var(--shadow-xs);
}
.ai-wait-steps div:first-child:not(.is-done):not(.is-active) {
  border-color: color-mix(in srgb, var(--primary) 20%, transparent);
}
.ai-wait-steps div.is-active::before {
  transform: scaleX(0.64);
  animation: aiStepPulse 1.2s ease-in-out infinite;
}
.ai-wait-steps div.is-done {
  border-color: color-mix(in srgb, var(--ok) 24%, transparent);
  background: color-mix(in srgb, var(--ok-bg) 76%, #fff);
}
.ai-wait-steps div.is-done::before {
  transform: scaleX(1);
}
.ai-wait-steps.has-error div.is-active {
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
  background: color-mix(in srgb, var(--danger-bg) 78%, #fff);
}
.ai-wait-steps strong {
  position: relative;
  z-index: 1;
  width: 1.65rem;
  height: 1.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.85rem;
  transition:
    background-color var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-standard);
}
.ai-wait-steps div.is-done strong {
  background: var(--ok);
  transform: scale(0.96);
}
.ai-wait-steps div.is-done strong::before {
  content: "✓";
}
.ai-wait-steps div.is-done strong {
  font-size: 0;
}
.ai-wait-steps div.is-done strong::before {
  font-size: 0.9rem;
}
.ai-wait-steps span {
  position: relative;
  z-index: 1;
  color: var(--theme-text-strong);
  font-weight: 700;
  font-size: 0.86rem;
}
.ai-progress {
  height: 0.72rem;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--primary) 9%, #fff);
  border: 1px solid var(--line);
}
.ai-progress span {
  display: block;
  height: 100%;
  min-width: 8%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width var(--motion-slow) var(--ease-emphasized);
}
@keyframes aiWaitRise {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes aiScan {
  0% { top: 12px; opacity: 0; }
  18% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: 76px; opacity: 0; }
}
@keyframes aiStepPulse {
  0%, 100% { opacity: 0.66; }
  50% { opacity: 1; }
}
@media (max-width: 960px) {
  .telegram-status {
    grid-template-columns: 1fr;
  }
  .telegram-steps > div {
    align-items: stretch;
  }
  .telegram-toolbox {
    display: grid;
    gap: 0.55rem;
  }
  .ai-import-actions {
    display: grid;
  }
  .ai-import-actions .btn {
    width: 100% !important;
  }
  .ai-wait-overlay {
    align-items: end;
    padding: 0.85rem;
    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }
  .ai-wait-card {
    width: 100%;
    border-radius: 18px 18px 16px 16px;
    padding: 1.15rem 1rem;
    text-align: right;
  }
  .ai-wait-visual {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    margin: 0 0 0.85rem auto;
  }
  .ai-wait-copy h2 {
    font-size: 1.35rem;
  }
  .ai-wait-copy p {
    max-width: none;
    font-size: 0.92rem;
  }
  .ai-wait-steps {
    grid-template-columns: 1fr;
  }
  .ai-wait-steps div {
    grid-template-columns: auto 1fr;
    align-items: center;
    text-align: right;
  }
  .ai-wait-steps strong {
    margin: 0;
  }
}
@media (max-width: 960px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }
  *,
  *::before,
  *::after {
    min-width: 0;
  }
  .app-shell,
  .main,
  .portal-shell,
  .portal-main,
  .auth-shell,
  .auth-panel,
  .topbar,
  .panel,
  .stats,
  .grid-2,
  .grid-3,
  .search-bar,
  .stack-list,
  .stack-item,
  .dashboard-action-grid,
  .portal-cards {
    max-width: 100%;
  }
  .main,
  .portal-main {
    overflow-x: clip;
  }
  .app-shell::before {
    height: calc(3.55rem + env(safe-area-inset-top, 0px));
  }
  .nav-toggle {
    min-width: 3.1rem;
    min-height: 2.45rem;
    touch-action: manipulation;
  }
  .sidebar {
    width: min(86vw, 320px);
    max-width: 320px;
    gap: 1rem;
    overscroll-behavior: contain;
  }
  .sidebar-brand {
    padding-bottom: 0.85rem;
  }
  .nav-list {
    gap: 0.25rem;
  }
  .nav-list a {
    min-height: 2.85rem;
    display: flex;
    align-items: center;
    padding: 0.78rem 0.9rem;
    border-radius: 12px;
  }
  .topbar {
    gap: 0.65rem;
    margin-bottom: 0.85rem;
  }
  .topbar > div,
  .topbar > form,
  .topbar > div:last-child {
    width: 100%;
    min-width: 0;
  }
  .topbar h1 {
    font-size: clamp(1.28rem, 5.5vw, 1.55rem);
    line-height: 1.38;
  }
  .topbar p {
    line-height: 1.65;
  }
  .section-title,
  .mini-title,
  .dashboard-action-title {
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .panel {
    margin-inline: 0;
    overflow: visible;
  }
  .panel > * {
    max-width: 100%;
  }
  .panel [style*="display:flex"],
  .topbar [style*="display:flex"] {
    max-width: 100%;
  }
  .stats,
  .dashboard-stats {
    grid-template-columns: 1fr;
  }
  .stat {
    display: grid;
    gap: 0.18rem;
    min-height: 5.6rem;
  }
  .stat .label {
    font-size: 0.86rem;
  }
  .stat .value {
    font-size: 1.55rem;
    line-height: 1.25;
  }
  .dashboard-action-panel {
    padding: 0.95rem 0.9rem;
  }
  .dashboard-actions,
  .student-detail-actions,
  .ai-import-actions,
  .telegram-toolbox,
  .telegram-link-actions,
  .actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.55rem !important;
    width: 100%;
  }
  .btn,
  .btn-sm,
  button,
  input[type="submit"] {
    min-height: 2.85rem;
    touch-action: manipulation;
  }
  .btn,
  .btn-sm,
  .actions .btn,
  .actions .btn-sm,
  .dashboard-actions .btn,
  .telegram-toolbox .btn,
  .telegram-link-actions .btn,
  .panel .btn {
    width: 100% !important;
    max-width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }
  .topbar .topbar-actions {
    width: 100%;
    max-width: 100%;
  }
  .topbar .topbar-actions > .btn {
    width: auto !important;
    flex: 1 1 calc(50% - 0.35rem);
    max-width: 100%;
    white-space: normal;
  }
  .topbar .topbar-actions .topbar-logout {
    flex: 1 1 100%;
  }
  .topbar .topbar-actions .topbar-logout .btn {
    width: 100% !important;
  }
  .ai-command-samples,
  .ai-command-result-links {
    flex-direction: column;
  }
  .ai-command-card,
  .ai-command-status {
    border-radius: 18px;
  }
  .ai-command-status-shell {
    padding: 1.15rem 1rem 0.8rem;
    gap: 1rem;
  }
  .ai-command-status-body strong {
    font-size: 1.22rem;
  }
  .field {
    width: 100%;
    margin-bottom: 0.95rem;
  }
  .field label {
    line-height: 1.45;
    margin-bottom: 0.42rem;
  }
  .main input:not([type="radio"]):not([type="checkbox"]):not([type="color"]),
  .main select,
  .main textarea,
  .portal-main input:not([type="radio"]):not([type="checkbox"]):not([type="color"]),
  .portal-main select,
  .portal-main textarea,
  .auth-card input:not([type="radio"]):not([type="checkbox"]):not([type="color"]),
  .auth-card select,
  .auth-card textarea {
    width: 100%;
    max-width: 100%;
    min-height: 2.95rem;
    font-size: 16px;
    line-height: 1.45;
  }
  input[type="color"] {
    width: 3.4rem;
    height: 2.8rem;
    flex: 0 0 auto;
  }
  .color-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.65rem;
  }
  .search-bar {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .search-bar > *,
  .search-bar > div,
  .search-bar > form,
  .search-bar > a,
  .search-bar > button {
    width: 100% !important;
    max-width: 100%;
  }
  .subnav {
    display: flex !important;
    flex-wrap: wrap;
    overflow: visible;
    gap: 0.45rem;
    padding-bottom: 0;
  }
  .subnav a {
    flex: 1 1 calc(50% - 0.45rem);
    min-height: 2.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
  .table-wrap,
  .table-wrap:not(.table-wrap-stacked),
  .panel[style*="overflow-x"],
  .table-wrap[style*="overflow-x"] {
    overflow: visible !important;
    margin-inline: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    max-width: 100%;
  }
  .data-table.responsive-table,
  .attendance-sheet.responsive-table,
  .mobile-scroll-table.responsive-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
  }
  .data-table.responsive-table thead {
    display: none;
  }
  .data-table.responsive-table,
  .data-table.responsive-table tbody,
  .data-table.responsive-table tr,
  .data-table.responsive-table td {
    display: block;
    max-width: 100%;
  }
  .data-table.responsive-table tbody {
    display: grid;
    gap: 0.72rem;
  }
  .data-table.responsive-table tr {
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(160deg, #fff, rgba(247, 243, 234, 0.94));
    border: 1px solid var(--line);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--primary-deep) 7%, transparent);
  }
  .data-table.responsive-table td {
    min-width: 0 !important;
    width: 100% !important;
    white-space: normal !important;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 0.7rem 0.82rem;
    overflow-wrap: anywhere;
  }
  .data-table.responsive-table td:last-child {
    border-bottom: 0;
  }
  .data-table.responsive-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.2rem;
    color: var(--muted);
    font-size:var(--text-caption);
    font-weight:var(--font-weight-semibold, 600);
    line-height: 1.35;
  }
  .data-table.responsive-table td[data-label=""]::before,
  .data-table.responsive-table td[colspan]::before {
    display: none;
  }
  .data-table.responsive-table td > form,
  .data-table.responsive-table td > .actions {
    width: 100%;
  }
  .data-table.responsive-table td input:not([type="radio"]):not([type="checkbox"]),
  .data-table.responsive-table td select,
  .data-table.responsive-table td textarea {
    width: 100% !important;
    min-width: 0 !important;
  }
  .attendance-sheet.responsive-table tbody,
  .mobile-scroll-table.responsive-table tbody {
    gap: 0.85rem;
  }
  .attendance-sheet.responsive-table tr {
    padding: 0.85rem;
  }
  .attendance-sheet.responsive-table td {
    padding: 0;
    border-bottom: 0;
  }
  .attendance-sheet.responsive-table td:first-child {
    display: none;
  }
  .attendance-sheet.responsive-table td:nth-child(2) {
    padding: 0.65rem 0.7rem;
    border-radius: 12px;
    background: var(--primary-faint);
  }
  .attendance-sheet.responsive-table td:nth-child(2)::before {
    margin-bottom: 0.05rem;
  }
  .att-status {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }
  .att-opt {
    width: 100%;
  }
  .att-opt span {
    width: 100%;
    min-height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.55rem 0.5rem;
  }
  .mobile-scroll-table.responsive-table tr {
    padding: 0.78rem;
  }
  .mobile-scroll-table.responsive-table td {
    padding: 0.58rem 0;
    border-bottom: 1px solid var(--line);
  }
  .mobile-scroll-table.responsive-table td:first-child {
    padding: 0.65rem 0.7rem;
    border-radius: 12px;
    background: var(--primary-faint);
    border-bottom: 0;
  }
  .mobile-scroll-table.responsive-table td:last-child {
    border-bottom: 0;
  }
  .ai-import-table.responsive-table tr {
    padding: 0.75rem;
  }
  .ai-import-table.responsive-table td {
    padding: 0.52rem 0;
    border-bottom: 0;
  }
  .inline-check {
    min-height: 2.7rem;
    width: 100%;
    justify-content: flex-start;
    white-space: normal;
  }
  .portal-top {
    flex-direction: column;
    align-items: stretch;
  }
  .portal-brand {
    min-width: 0;
  }
  .portal-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    overflow: visible;
  }
  .portal-nav a,
  .portal-nav form,
  .portal-nav .btn {
    width: 100% !important;
    text-align: center;
  }
  .portal-card {
    min-height: 0;
  }
  .msg-preview,
  pre,
  code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .archive-note,
  .alert,
  .badge,
  .chip {
    overflow-wrap: anywhere;
  }
  .schedule-ai-head,
  .schedule-ai-actions {
    align-items: stretch;
  }
  .schedule-ai-head {
    flex-direction: column;
  }
  .schedule-ai-list {
    grid-template-columns: 1fr;
  }
  .schedule-ai-card {
    border-radius: 14px;
  }
}
@media (max-width: 640px) {
  .main {
    padding-top: calc(4.25rem + env(safe-area-inset-top, 0px));
    padding-inline: 0.72rem;
  }
  .topbar,
  .panel {
    border-radius: 13px;
  }
  .subnav a,
  .portal-nav {
    grid-template-columns: 1fr;
  }
  .subnav a {
    flex-basis: 100%;
  }
  .att-status {
    grid-template-columns: 1fr;
  }
  .data-table.responsive-table tbody {
    gap: 0.65rem;
  }
  .data-table.responsive-table td {
    padding-inline: 0.75rem;
  }
  .attendance-sheet.responsive-table tr,
  .mobile-scroll-table.responsive-table tr {
    padding: 0.72rem;
  }
}
.mobile-bottom-nav,
.mobile-quick-fab,
.mobile-sheet-backdrop,
.mobile-action-sheet,
.portal-bottom-nav {
  display: none;
}
@media (max-width: 960px) {
  .main {
    padding-bottom: calc(6.75rem + env(safe-area-inset-bottom, 0px));
  }
  .app-shell.nav-open .mobile-quick-fab,
  .app-shell.nav-open .mobile-bottom-nav {
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.75rem);
  }
  .mobile-bottom-nav {
    position: fixed;
    inset-inline: 0.65rem;
    bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(3.35rem, 1fr));
    gap: 0.3rem;
    padding: 0.42rem;
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
    box-shadow: 0 16px 42px color-mix(in srgb, var(--primary-deep) 20%, transparent);
    backdrop-filter: blur(18px);
    transition: opacity var(--motion-exit) var(--ease-soft), transform var(--motion-exit) var(--ease-soft);
  }
  .mobile-bottom-item {
    position: relative;
    appearance: none;
    border: 0;
    border-radius: 13px;
    min-width: 0;
    min-height: 3.2rem;
    padding: 0.3rem 0.18rem;
    display: inline-grid;
    place-items: center;
    gap: 0.16rem;
    color: var(--muted);
    background: transparent;
    text-decoration: none;
    font: inherit;
    font-size:var(--text-caption);
    font-weight:var(--font-weight-semibold, 600);
    line-height: 1.15;
    cursor: pointer;
    transition:
      color var(--motion-base) var(--ease-standard),
      background-color var(--motion-base) var(--ease-standard),
      transform var(--motion-fast) var(--ease-press),
      box-shadow var(--motion-base) var(--ease-standard);
  }
  .mobile-bottom-item::after {
    content: "";
    position: absolute;
    inset-inline: 50%;
    inset-block-end: 0.22rem;
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 999px;
    background: currentColor;
    opacity: 0;
    transform: translateX(50%) scale(0.55);
    transition:
      opacity var(--motion-base) var(--ease-standard),
      transform var(--motion-base) var(--ease-emphasized);
  }
  .mobile-bottom-item:active {
    transform: translateY(1px) scale(0.985);
  }
  .mobile-bottom-item.active {
    color: #fff;
    background: linear-gradient(180deg, var(--primary-deep), var(--primary));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--primary-deep) 18%, transparent);
  }
  .mobile-bottom-item.active::after {
    opacity: 0.86;
    transform: translateX(50%) scale(1);
  }
  .mobile-bottom-more {
    color: var(--theme-text-strong);
  }
  .mobile-bottom-icon {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: inherit;
    font-family: "Cairo", sans-serif;
    font-size: 0.82rem;
    line-height: 1;
    transition:
      background-color var(--motion-base) var(--ease-standard),
      transform var(--motion-base) var(--ease-emphasized);
  }
  .mobile-bottom-icon svg {
    width: 1rem;
    height: 1rem;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.15;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mobile-bottom-item.active .mobile-bottom-icon {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
  }
  .mobile-quick-fab {
    position: fixed;
    inset-inline-end: 0.9rem;
    bottom: calc(5.35rem + env(safe-area-inset-bottom, 0px));
    z-index: 72;
    min-height: 3.15rem;
    max-width: min(12rem, calc(100vw - 1.8rem));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #000));
    box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 32%, transparent);
    font: inherit;
    cursor: pointer;
    transition: transform var(--motion-exit) var(--ease-soft), opacity var(--motion-exit) var(--ease-soft);
  }
  .mobile-quick-fab span {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.18);
    font-size: 1.35rem;
    line-height: 1;
  }
  .mobile-quick-fab strong {
    font-size: 0.9rem;
    line-height: 1;
    white-space: nowrap;
  }
  .mobile-sheet-backdrop[hidden],
  .mobile-action-sheet[hidden] {
    display: none !important;
  }
  .mobile-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 78;
    display: block;
    background: rgba(7, 24, 19, 0.42);
    backdrop-filter: blur(2px);
    animation: premiumBackdropIn var(--motion-base) var(--ease-standard) both;
  }
  .mobile-sheet-backdrop.is-closing {
    animation: premiumBackdropOut var(--motion-exit) var(--ease-standard) both;
  }
  .mobile-action-sheet {
    position: fixed;
    inset-inline: 0.65rem;
    bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
    z-index: 80;
    display: block;
    padding: 0.55rem;
    border-radius: 22px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
    box-shadow: 0 22px 54px color-mix(in srgb, var(--primary-deep) 24%, transparent);
    animation: mobileSheetIn var(--motion-modal-in) both;
    will-change: transform, opacity;
  }
  .mobile-action-sheet:focus {
    outline: none;
  }
  .mobile-action-sheet.is-closing {
    animation: mobileSheetOut var(--motion-modal-out) both;
  }
  .mobile-sheet-handle {
    width: 2.8rem;
    height: 0.28rem;
    margin: 0.2rem auto 0.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 35%, transparent);
  }
  .mobile-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 0.25rem 0.75rem;
  }
  .mobile-sheet-head strong {
    display: block;
    color: var(--theme-text-strong);
    font-size: 1.05rem;
  }
  .mobile-sheet-head span {
    display: block;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.5;
  }
  .mobile-sheet-close {
    flex: 0 0 auto;
    width: 2.45rem;
    min-height: 2.45rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--theme-text-strong);
    background: var(--primary-faint);
    font: inherit;
    font-size: 1.25rem;
    cursor: pointer;
    transition:
      transform var(--motion-fast) var(--ease-press),
      border-color var(--motion-fast) var(--ease-standard),
      background var(--motion-fast) var(--ease-standard);
  }
  .mobile-sheet-close:hover,
  .mobile-sheet-close:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 22%, var(--line));
    background: color-mix(in srgb, var(--primary-faint) 72%, #fff);
  }
  .mobile-sheet-actions {
    display: grid;
    gap: 0.5rem;
  }
  .mobile-sheet-action {
    min-height: 3rem;
    padding: 0.78rem 0.9rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-strong);
    background: var(--primary-faint);
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
    text-decoration: none;
    font-weight:var(--font-weight-semibold, 600);
    line-height: 1.35;
    text-align: center;
    animation: mobileSheetActionIn var(--motion-slow) var(--ease-emphasized) both;
    animation-delay: var(--sheet-delay, 0ms);
    transition:
      transform var(--motion-fast) var(--ease-press),
      border-color var(--motion-fast) var(--ease-standard),
      background var(--motion-fast) var(--ease-standard),
      box-shadow var(--motion-fast) var(--ease-standard);
  }
  .mobile-sheet-action:hover,
  .mobile-sheet-action:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 22%, var(--line));
    box-shadow: var(--shadow-xs);
  }
  .mobile-sheet-action.primary {
    color: #fff;
    background: linear-gradient(180deg, var(--primary-deep), var(--primary));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary-deep) 16%, transparent);
  }
  body.mobile-sheet-open {
    overflow: hidden;
  }
  .portal-shell {
    padding-bottom: calc(5.9rem + env(safe-area-inset-bottom, 0px));
  }
  .portal-top .portal-nav {
    display: none;
  }
  .portal-bottom-nav {
    position: fixed;
    inset-inline: 0.7rem;
    bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.42rem;
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
    box-shadow: 0 16px 42px color-mix(in srgb, var(--primary-deep) 18%, transparent);
    backdrop-filter: blur(18px);
  }
  .portal-bottom-nav a,
  .portal-bottom-nav form,
  .portal-bottom-nav button {
    min-width: 0;
    width: 100%;
  }
  .portal-bottom-nav a,
  .portal-bottom-nav button {
    min-height: 3.15rem;
    padding: 0.28rem 0.2rem;
    border: 0;
    border-radius: 13px;
    display: inline-grid;
    place-items: center;
    gap: 0.15rem;
    color: var(--muted);
    background: transparent;
    text-decoration: none;
    font: inherit;
    font-size:var(--text-caption);
    font-weight:var(--font-weight-semibold, 600);
    line-height: 1.15;
    cursor: pointer;
  }
  .portal-bottom-nav a.active {
    color: #fff;
    background: linear-gradient(180deg, var(--primary-deep), var(--primary));
  }
  .portal-bottom-nav span {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: inherit;
    font-size: 0.82rem;
    line-height: 1;
  }
  .portal-bottom-nav svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .portal-bottom-nav a.active span {
    background: rgba(255, 255, 255, 0.16);
  }
}
@media (max-width: 390px) {
  .mobile-bottom-nav,
  .portal-bottom-nav {
    inset-inline: 0.45rem;
    gap: 0.22rem;
    padding: 0.32rem;
  }
  .mobile-bottom-item,
  .portal-bottom-nav a,
  .portal-bottom-nav button {
    font-size:var(--text-caption);
  }
  .mobile-bottom-icon,
  .portal-bottom-nav span {
    width: 1.28rem;
    height: 1.28rem;
    font-size:var(--text-caption);
  }
  .mobile-bottom-icon svg {
    width: 0.92rem;
    height: 0.92rem;
  }
}
::selection {
  color: #fff;
  background: color-mix(in srgb, var(--primary) 82%, #000);
}
html {
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
.page-loading-bar {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  z-index: 150;
  width: 100%;
  height: 3px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: right center;
  opacity: 0;
  background: linear-gradient(90deg, var(--accent), var(--primary), var(--primary-deep));
  box-shadow: var(--elevation-1);
}
.page-loading-bar.run {
  opacity: 1;
  animation: pageLoadRun 1.15s ease-out forwards;
}
.page-loading-bar.finish {
  opacity: 0;
  transform: scaleX(1);
  transition: opacity var(--motion-base) var(--ease-soft);
}
html.page-is-loading {
  cursor: progress;
}
body.page-enter-ready :is(.topbar, .panel, .stat, .stack-item, .quick-action-card, .dashboard-insight, .dashboard-balanced-row, .dashboard-quick-panel, .copilot-main-advice, .setup-step, .health-item, .dashboard-task, .portal-top, .portal-head, .portal-card, .auth-brand, .auth-card) {
  animation: premiumContentIn var(--motion-fast) var(--ease-emphasized) both;
  animation-delay: var(--enter-delay, 0ms);
}
body.page-enter-ready :is(.dashboard-brief-grid, .dashboard-task-list, .setup-steps, .health-grid, .dashboard-insights, .quick-action-grid) > * {
  animation-delay: var(--enter-delay, 0ms);
}
body.page-enter-ready form:not(.is-submitting):not([data-ai-command-form]):not([data-ai-import-form]) :is(.field, .inline-check, .inline-checks label, .att-opt, .workflow-submit-row, .empty-actions, .actions) {
  animation: formFieldIn var(--motion-slow) var(--ease-emphasized) both;
  animation-delay: var(--field-delay, 0ms);
}
body.page-is-leaving :is(.main, .portal-main, .auth-card) {
  opacity: 0.72;
  transform: translateY(6px) scale(0.997);
  transition:
    opacity var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-standard),
    filter var(--motion-base) var(--ease-standard);
  filter: saturate(0.96);
}
.main,
.portal-main,
.auth-card {
  will-change: auto;
}
@supports (content-visibility: auto) {
  .main > .panel,
  .main > .stats,
  .main > .grid-2,
  .main > .grid-3,
  .table-wrap,
  .portal-cards,
  .dashboard-insights,
  .quick-action-grid {
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
  }
  .data-table tbody tr,
  .students-mobile-card,
  .stack-item,
  .portal-card {
    contain: layout paint style;
  }
}
.btn.is-busy,
button.is-busy,
input[type="submit"].is-busy {
  position: relative;
  gap: 0.45rem;
  pointer-events: none;
  justify-content: center;
}
.btn.is-busy::before,
button.is-busy::before {
  content: "";
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  opacity: 0.86;
  animation: polishSpin 0.75s var(--ease-linear) infinite;
}
form.is-submitting {
  cursor: progress;
}
form.is-submitting :is(input, select, textarea):not([type="hidden"]):not([readonly]) {
  transition: opacity var(--motion-exit) var(--ease-soft);
}
form.is-submitting :is(input, select, textarea):not([type="hidden"]):not([readonly]) {
  opacity: 0.78;
}
:is(input, select, textarea) {
  transition:
    border-color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    background-color var(--motion-base) var(--ease-standard);
}
:is(input, select, textarea):focus {
  transform: none;
}
.field > label:not(:has(input, select, textarea)),
.field > .field-label {
  position: relative;
  width: max-content;
  max-width: 100%;
  padding-inline-end: 0.95rem;
}
.field.field-has-value > label {
  color: color-mix(in srgb, var(--theme-text-strong) 78%, var(--muted));
}
.field.field-has-value > label::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: 0;
  display: block;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 72%, var(--accent));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 10%, transparent);
  opacity: 0.8;
  transform: translateY(-50%) scale(0.92);
  transition:
    opacity var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-emphasized);
}
.input-has-value:not(:focus):not(:disabled):not([readonly]),
select.input-has-value:not(:focus):not(:disabled) {
  background-color: color-mix(in srgb, #fff 94%, var(--primary-faint));
}
:is(input, select, textarea):user-invalid {
  animation: fieldValidationNudge var(--motion-slow) var(--ease-standard);
}
.field-is-disabled label {
  color: color-mix(in srgb, var(--muted) 80%, var(--ink));
}
.control-is-disabled:not(select),
:is(input, textarea):disabled,
:is(input, textarea)[readonly] {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 82%, var(--paper)), color-mix(in srgb, #fff 92%, var(--primary-faint)));
  border-color: color-mix(in srgb, var(--primary) 8%, transparent);
  color: color-mix(in srgb, var(--muted) 82%, var(--ink));
  cursor: not-allowed;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 62%, transparent);
  transform: none;
}
select.control-is-disabled,
select:disabled {
  border-color: color-mix(in srgb, var(--primary) 8%, transparent);
  color: color-mix(in srgb, var(--muted) 82%, var(--ink));
  cursor: not-allowed;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 62%, transparent);
  transform: none;
}
.control-is-disabled:not(button) {
  animation: disabledSoftSettle var(--motion-slow) var(--ease-standard) both;
}
.alert-polished {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.55rem;
  box-shadow: var(--shadow-xs);
  animation: alertPolishIn var(--motion-slow) var(--ease-emphasized) both;
}
.alert[hidden],
.alert-polished[hidden] {
  display: none !important;
}
.alert-polished::before {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 0.86rem;
  font-weight:var(--font-weight-bold, 700);
  line-height: 1;
}
.alert-ok.alert-polished::before {
  content: "✓";
  color: #fff;
  background: var(--ok);
}
.alert-error.alert-polished::before {
  content: "!";
  color: #fff;
  background: var(--danger);
}
.alert-info.alert-polished::before {
  content: "i";
  color: #fff;
  background: var(--info);
}
.alert-warning.alert-polished::before {
  content: "!";
  color: #fff;
  background: var(--warm);
}
.alert-dismiss {
  width: 2rem;
  height: 2rem;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: inherit;
  background: color-mix(in srgb, #fff 70%, transparent);
  box-shadow: none;
  font: inherit;
  font-size: 1.1rem;
  font-weight:var(--font-weight-bold, 700);
  line-height: 1;
  cursor: pointer;
  opacity: 0.72;
  transition:
    opacity var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-press),
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}
.alert-dismiss:hover,
.alert-dismiss:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  background: color-mix(in srgb, #fff 88%, transparent);
  border-color: color-mix(in srgb, currentColor 22%, transparent);
}
.alert-polished.is-dismissing {
  opacity: 0;
  transform: translateY(-4px) scale(0.99);
  transition:
    opacity var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}
.completion-toast {
  position: fixed;
  inset-inline: 50%;
  bottom: calc(1.15rem + env(safe-area-inset-bottom, 0px));
  z-index: 1180;
  width: max-content;
  max-width: min(92vw, 520px);
  min-height: 3.05rem;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  gap: 0.65rem;
  padding: 0.68rem 0.92rem;
  border-radius: var(--radius-pill);
  color: var(--theme-text-strong);
  background: color-mix(in srgb, #fff 92%, var(--ok-bg));
  border: 1px solid color-mix(in srgb, var(--ok) 18%, transparent);
  box-shadow: var(--elevation-4);
  opacity: 0;
  transform: translate(-50%, 0.8rem) scale(0.975);
  transition:
    opacity var(--motion-toast),
    transform var(--motion-toast),
    box-shadow var(--motion-toast);
  pointer-events: none;
}
.completion-toast-timer {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--ok));
  opacity: 0.72;
  transform: scaleX(1);
  transform-origin: right center;
  animation: toastTimer var(--toast-dwell) var(--ease-linear) forwards;
}
.completion-toast-error .completion-toast-timer {
  background: linear-gradient(90deg, var(--warm), var(--danger));
  animation-duration: 5.2s;
}
html[dir="rtl"] .completion-toast {
  transform: translate(50%, 0.8rem) scale(0.975);
}
.completion-toast.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
html[dir="rtl"] .completion-toast.show {
  transform: translate(50%, 0) scale(1);
}
.completion-toast.is-leaving {
  opacity: 0;
  transform: translate(-50%, 0.45rem) scale(0.985);
}
html[dir="rtl"] .completion-toast.is-leaving {
  transform: translate(50%, 0.45rem) scale(0.985);
}
.completion-toast-error {
  color: color-mix(in srgb, var(--danger) 72%, var(--ink));
  background: color-mix(in srgb, #fff 90%, var(--danger-bg));
  border-color: color-mix(in srgb, var(--danger) 20%, transparent);
}
.completion-toast-icon {
  position: relative;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: var(--ok);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 10%, transparent);
}
.completion-toast-icon::after {
  content: "";
  width: 0.72rem;
  height: 0.42rem;
  border-inline-start: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -1px);
}
.completion-toast-error .completion-toast-icon {
  background: var(--danger);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 10%, transparent);
}
.completion-toast-error .completion-toast-icon::after {
  content: "!";
  width: auto;
  height: auto;
  border: 0;
  transform: none;
  font-size: 1rem;
  font-weight:var(--font-weight-bold, 700);
  line-height: 1;
}
.premium-tooltip {
  position: absolute;
  z-index: 1400;
  max-width: min(18rem, calc(100vw - 1.5rem));
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
  color: #fff;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-deep) 96%, #000), color-mix(in srgb, var(--primary) 82%, #000));
  border: 1px solid color-mix(in srgb, #fff 14%, transparent);
  box-shadow: var(--elevation-3);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transition:
    opacity var(--motion-dropdown),
    transform var(--motion-dropdown);
}
.premium-tooltip::after {
  content: "";
  position: absolute;
  inset-block-end: -5px;
  inset-inline-start: 50%;
  width: 0.62rem;
  height: 0.62rem;
  background: inherit;
  border-inline-end: 1px solid color-mix(in srgb, #fff 12%, transparent);
  border-block-end: 1px solid color-mix(in srgb, #fff 12%, transparent);
  transform: translateX(-50%) rotate(45deg);
}
html[dir="rtl"] .premium-tooltip::after {
  transform: translateX(50%) rotate(45deg);
}
.premium-tooltip[data-placement="bottom"]::after {
  inset-block-start: -5px;
  inset-block-end: auto;
  transform: translateX(-50%) rotate(225deg);
}
html[dir="rtl"] .premium-tooltip[data-placement="bottom"]::after {
  transform: translateX(50%) rotate(225deg);
}
.premium-tooltip.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(10px) scale(0.996);
  transition:
    opacity var(--motion-page) var(--ease-standard),
    transform var(--motion-page) var(--ease-emphasized),
    box-shadow var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.image-loading-soft {
  opacity: 0;
  filter: saturate(0.92) blur(3px);
  transform: scale(0.995);
  transition:
    opacity var(--motion-slow) var(--ease-standard),
    filter var(--motion-slow) var(--ease-standard),
    transform var(--motion-slow) var(--ease-emphasized);
}
.image-loading-soft.is-loaded {
  opacity: 1;
  filter: saturate(1) blur(0);
  transform: scale(1);
}
.image-loading-soft.is-loading-error {
  opacity: 0.72;
  filter: grayscale(0.35) saturate(0.75);
}
.target-soft-focus {
  animation: targetSoftFocus 1.15s var(--ease-standard) both;
}
.premium-confirm-open {
  overflow: hidden;
  overscroll-behavior: contain;
}
.command-backdrop,
.ai-command-overlay,
.premium-confirm-overlay,
.mobile-sheet-backdrop {
  overscroll-behavior: contain;
}
.command-box,
.ai-command-status,
.premium-confirm-card,
.mobile-action-sheet {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.premium-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1350;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2rem);
  background:
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 32%),
    color-mix(in srgb, var(--primary-deep) 36%, rgba(255,255,255,0.52));
  backdrop-filter: blur(12px) saturate(1.02);
  animation: premiumBackdropIn var(--motion-base) var(--ease-standard) both;
}
.premium-confirm-overlay[hidden] {
  display: none;
}
.premium-confirm-overlay.is-closing {
  animation: premiumBackdropOut var(--motion-exit) var(--ease-standard) both;
}
.premium-confirm-card {
  position: relative;
  width: min(100%, 520px);
  display: grid;
  gap: 1rem;
  padding: clamp(1.15rem, 3vw, 1.55rem);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 94%, var(--surface-strong)), color-mix(in srgb, #fff 88%, var(--paper)));
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  box-shadow: var(--elevation-4);
  animation: premiumConfirmIn var(--motion-modal-in) both;
}
.premium-confirm-card:focus {
  outline: none;
}
.premium-confirm-overlay.is-closing .premium-confirm-card {
  animation: premiumConfirmOut var(--motion-modal-out) both;
}
.premium-confirm-overlay.is-accepted .premium-confirm-card {
  border-color: color-mix(in srgb, var(--ok) 24%, transparent);
  box-shadow:
    0 30px 96px color-mix(in srgb, var(--ok) 16%, transparent),
    0 18px 64px color-mix(in srgb, var(--primary-deep) 18%, transparent);
  animation: confirmAcceptedPulse var(--motion-slow) var(--ease-emphasized) both;
}
.premium-confirm-close {
  position: absolute;
  inset-block-start: 0.85rem;
  inset-inline-start: 0.85rem;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, #fff 88%, var(--surface));
  color: var(--theme-text-strong);
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition:
    transform var(--motion-fast) var(--ease-press),
    box-shadow var(--motion-base) var(--ease-standard),
    background-color var(--motion-base) var(--ease-standard);
}
.premium-confirm-close:hover,
.premium-confirm-close:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
  outline: none;
}
.premium-confirm-icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1.05rem;
  display: inline-grid;
  place-items: center;
  color: color-mix(in srgb, var(--warm) 88%, var(--primary-deep));
  background: color-mix(in srgb, var(--warm-bg) 78%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warm) 16%, transparent);
}
.premium-confirm-icon::before {
  content: "!";
  width: 1.7rem;
  height: 1.7rem;
  border-radius: var(--radius-pill);
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: color-mix(in srgb, var(--warm) 88%, var(--primary-deep));
  font-weight:var(--font-weight-bold, 700);
  transition:
    background-color var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-emphasized);
}
.premium-confirm-overlay.is-accepted .premium-confirm-icon {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok-bg) 84%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 18%, transparent);
}
.premium-confirm-overlay.is-accepted .premium-confirm-icon::before {
  content: "✓";
  background: var(--ok);
  transform: scale(1.04);
}
.premium-confirm-overlay.is-accepted .premium-confirm-close,
.premium-confirm-overlay.is-accepted [data-confirm-cancel] {
  opacity: 0.48;
}
.premium-confirm-overlay.is-accepted [data-confirm-accept] {
  background: linear-gradient(135deg, var(--ok), color-mix(in srgb, var(--ok) 74%, var(--primary-deep)));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ok) 18%, transparent);
}
.premium-confirm-copy {
  padding-inline-start: 0.05rem;
}
.premium-confirm-copy h2 {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  color: var(--theme-text-strong);
  line-height: 1.25;
}
.premium-confirm-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}
.premium-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.premium-confirm-actions .btn {
  width: auto;
  min-width: 8.5rem;
}
@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    filter: none !important;
    text-shadow: none !important;
  }
  .page-loading-bar,
  .completion-toast,
  .completion-toast-timer,
  .smart-toast,
  .btn-primary:not(.is-busy):not(.is-navigating)::after,
  .btn-danger:not(.is-busy):not(.is-navigating)::after,
  .premium-tooltip,
  .premium-confirm-overlay,
  .surface-refresh-sheen,
  .surface-refresh-status,
  .alert-dismiss {
    display: none !important;
  }
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
  .image-loading-soft {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}
.panel,
.stat,
.quick-action-card,
.workflow-action,
.workflow-step,
.health-item,
.dashboard-task,
.stack-item {
  scroll-margin-top: 5rem;
}
.panel,
.stat,
.quick-action-card,
.workflow-action,
.workflow-step,
.health-item,
.dashboard-task,
.stack-item,
.dashboard-insight {
  transition:
    transform var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    background-color var(--motion-base) var(--ease-standard),
    opacity var(--motion-base) var(--ease-standard);
}
.panel:focus-within,
.quick-action-card:focus-visible,
.workflow-action:focus-visible,
.health-item:focus-visible,
.dashboard-task:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 34%, transparent);
}
.data-table tbody tr:focus-within {
  background: var(--primary-faint);
  box-shadow: inset 3px 0 0 var(--primary);
}
.table-wrap {
  transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}
.table-wrap,
.panel[style*="overflow-x"] {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary) 34%, transparent) transparent;
  overscroll-behavior-inline: contain;
}
.table-wrap::-webkit-scrollbar,
.panel[style*="overflow-x"]::-webkit-scrollbar,
.search-results::-webkit-scrollbar,
.command-results::-webkit-scrollbar,
.mobile-action-sheet::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.table-wrap::-webkit-scrollbar-track,
.panel[style*="overflow-x"]::-webkit-scrollbar-track,
.search-results::-webkit-scrollbar-track,
.command-results::-webkit-scrollbar-track,
.mobile-action-sheet::-webkit-scrollbar-track {
  background: transparent;
}
.table-wrap::-webkit-scrollbar-thumb,
.panel[style*="overflow-x"]::-webkit-scrollbar-thumb,
.search-results::-webkit-scrollbar-thumb,
.command-results::-webkit-scrollbar-thumb,
.mobile-action-sheet::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--primary) 28%, transparent);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.table-wrap::-webkit-scrollbar-thumb:hover,
.panel[style*="overflow-x"]::-webkit-scrollbar-thumb:hover,
.search-results::-webkit-scrollbar-thumb:hover,
.command-results::-webkit-scrollbar-thumb:hover,
.mobile-action-sheet::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--primary) 42%, transparent);
  background-clip: padding-box;
}
.table-wrap.has-horizontal-scroll,
.panel.has-horizontal-scroll {
  position: relative;
}
.table-wrap.has-horizontal-scroll::after,
.panel.has-horizontal-scroll::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 3.5rem;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-strong) 80%, transparent));
  opacity: 0.82;
  transition: opacity var(--motion-base) var(--ease-standard);
}
html[dir="rtl"] .table-wrap.has-horizontal-scroll::after,
html[dir="rtl"] .panel.has-horizontal-scroll::after {
  inset-inline-start: 0;
  inset-inline-end: auto;
  background: linear-gradient(270deg, transparent, color-mix(in srgb, var(--surface-strong) 80%, transparent));
}
.table-wrap.has-horizontal-scroll.is-scrolled-end::after,
.panel.has-horizontal-scroll.is-scrolled-end::after {
  opacity: 0;
}
.table-wrap,
.responsive-list,
.stack-list,
.grid-2,
.grid-3,
.stats {
  position: relative;
}
.is-refreshing {
  overflow: hidden;
  opacity: 0.72;
  transform: translateY(2px);
  transition:
    opacity var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-standard);
}
.surface-refresh-sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: translateX(110%);
  animation: surfaceRefreshSweep var(--motion-pulse) var(--ease-standard) infinite;
  will-change: transform;
}
.surface-refresh-status {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: min(15rem, calc(100% - 1.5rem));
  padding: 0.48rem 0.68rem;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: var(--radius-pill);
  color: var(--theme-text-strong);
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  box-shadow: var(--shadow-sm);
  font-size: 0.82rem;
  font-weight:var(--font-weight-bold, 700);
  line-height: 1.35;
  pointer-events: none;
  backdrop-filter: blur(10px) saturate(1.02);
  animation: premiumToastIn var(--motion-base) var(--ease-emphasized) both;
}
.surface-refresh-dot {
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 75%, var(--primary));
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 32%, transparent);
  animation: premiumPulse var(--motion-pulse-strong) var(--ease-soft) infinite;
}
.data-table tbody tr {
  animation: premiumRowIn var(--motion-slow) var(--ease-emphasized) both;
  animation-delay: var(--row-delay, 20ms);
}
.students-mobile-card,
.stack-list > .stack-item,
.quick-action-grid > .quick-action-card {
  animation-delay: var(--row-delay, 0ms);
}
.search-results,
.command-results,
.sidebar,
.mobile-action-sheet {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary) 44%, transparent) transparent;
}
.skeleton {
  min-height: 1rem;
  border-radius: var(--radius-sm);
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent),
    color-mix(in srgb, var(--primary) 9%, transparent);
  background-size: 180% 100%;
  animation: polishShimmer var(--motion-pulse-strong) var(--ease-soft) infinite;
  will-change: background-position;
  box-shadow: var(--elevation-0);
}
.polished-details {
  overflow: clip;
}
.polished-details summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  transition:
    color var(--motion-hover),
    background-color var(--motion-hover),
    transform var(--motion-press);
}
.polished-details summary::-webkit-details-marker {
  display: none;
}
.polished-details summary::after {
  content: "";
  width: 0.52rem;
  height: 0.52rem;
  flex: 0 0 auto;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  opacity: 0.68;
  transform: rotate(45deg);
  transition:
    opacity var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-emphasized);
}
.polished-details[open] summary::after {
  opacity: 0.92;
  transform: rotate(225deg) translate(-1px, -1px);
}
.polished-details summary:hover {
  color: var(--primary);
  transform: translateY(-1px);
}
.polished-details[open]:not(.is-closing),
.polished-details.is-opening {
  animation: detailsReveal var(--motion-slow) var(--ease-emphasized) both;
}
.polished-details.is-closing {
  animation: detailsHide var(--motion-snap) var(--ease-standard) both;
}
.control-soft-change {
  animation: controlSoftChange var(--motion-page) var(--ease-emphasized) both;
}
.surface-soft-change {
  animation: surfaceSoftChange var(--motion-pop) var(--ease-standard) both;
}
.input-is-typing {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--primary) 8%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent);
}
.file-field-polished {
  position: relative;
}
.native-file-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0.01;
  overflow: hidden;
  pointer-events: none;
}
.file-picker-surface {
  min-height: 4.3rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0.95rem;
  border: 1px dashed color-mix(in srgb, var(--primary) 24%, transparent);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 88%, var(--primary-faint)), color-mix(in srgb, #fff 94%, var(--accent-faint)));
  color: var(--theme-text-strong);
  cursor: pointer;
  transition:
    transform var(--motion-fast) var(--ease-press),
    border-color var(--motion-base) var(--ease-standard),
    background-color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}
.file-picker-surface:hover,
.file-picker-surface:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 42%, transparent);
  box-shadow: var(--focus-ring);
  transform: translateY(-1px);
  outline: none;
}
.file-picker-surface.has-file {
  border-style: solid;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 88%, var(--ok-bg)), color-mix(in srgb, #fff 96%, var(--primary-faint)));
}
.file-picker-icon {
  position: relative;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: var(--radius-sm);
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary-deep) 16%, transparent);
}
.file-picker-icon::before {
  content: "";
  width: 0.82rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-block-start: 0;
  border-radius: 0 0 4px 4px;
}
.file-picker-icon::after {
  content: "";
  position: absolute;
  width: 0.58rem;
  height: 0.58rem;
  border-inline-start: 2px solid currentColor;
  border-block-start: 2px solid currentColor;
  transform: translateY(-0.18rem) rotate(45deg);
}
.file-picker-copy {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}
.file-picker-copy strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.35;
}
.file-picker-copy small {
  min-width: 0;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.native-file-input:disabled + .file-picker-surface {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.subnav a,
.chip,
.inline-check,
.att-opt {
  transition:
    transform var(--motion-fast) var(--ease-press),
    color var(--motion-base) var(--ease-standard),
    background-color var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}
.subnav a:where(:hover, :focus-visible),
.chip:where(:hover, :focus-visible),
.inline-check:where(:hover, :focus-within),
.att-opt:where(:hover, :focus-within) {
  transform: translateY(-1px);
}
@keyframes pageLoadRun {
  0% {
    transform: scaleX(0);
  }
  55% {
    transform: scaleX(0.72);
  }
  100% {
    transform: scaleX(0.92);
  }
}
@keyframes polishSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes polishShimmer {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -120% 0;
  }
}
@keyframes viewFadeOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(6px) scale(0.996);
    filter: blur(1px);
  }
}
@keyframes viewFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.998);
    filter: blur(1px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes premiumContentIn {
  from {
    opacity: 1;
    transform: translateY(4px);
    filter: none;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: none;
  }
}
@keyframes formFieldIn {
  from {
    opacity: 1;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes premiumRowIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes surfaceRefreshSweep {
  from {
    transform: translateX(110%);
  }
  to {
    transform: translateX(-110%);
  }
}
@keyframes fieldValidationNudge {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-1px); }
  70% { transform: translateY(1px); }
}
@keyframes disabledSoftSettle {
  from {
    opacity: 0.78;
    transform: translateY(1px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes alertPolishIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes detailsReveal {
  from {
    opacity: 0.72;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes detailsHide {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0.55;
    transform: translateY(-3px);
  }
}
@keyframes controlSoftChange {
  0% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-1px);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes selectChoiceSettle {
  0% {
    transform: translateY(0);
    filter: saturate(1);
  }
  38% {
    transform: translateY(-1px);
    filter: saturate(1.08);
    box-shadow:
      0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }
  100% {
    transform: translateY(0);
    filter: saturate(1);
  }
}
@keyframes fieldSelectCommitted {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 0%, transparent);
  }
  48% {
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--ok) 9%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 0%, transparent);
  }
}
@keyframes numberSoftCount {
  0% {
    filter: saturate(0.9);
    text-shadow: 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent);
  }
  45% {
    filter: saturate(1.08);
    text-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 14%, transparent);
  }
  100% {
    filter: saturate(1);
    text-shadow: 0 0 0 transparent;
  }
}
@keyframes targetSoftFocus {
  0% {
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent),
      var(--shadow-lg);
    border-color: color-mix(in srgb, var(--primary) 14%, transparent);
  }
  34% {
    box-shadow:
      0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent),
      0 20px 58px color-mix(in srgb, var(--primary-deep) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  }
  100% {
    box-shadow: var(--shadow-lg);
    border-color: var(--line);
  }
}
@keyframes emptyVisualIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes toastTimer {
  to {
    transform: scaleX(0);
  }
}
@keyframes buttonSheen {
  from {
    transform: skewX(-18deg) translateX(0);
  }
  to {
    transform: skewX(-18deg) translateX(360%);
  }
}
@keyframes mobileSheetActionIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes choiceSoftChange {
  0% {
    transform: translateY(0) scale(0.99);
  }
  45% {
    transform: translateY(-1px) scale(1.018);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes surfaceSoftChange {
  0% {
    box-shadow: var(--shadow-xs);
  }
  45% {
    box-shadow: 0 16px 38px color-mix(in srgb, var(--primary-deep) 10%, transparent);
  }
  100% {
    box-shadow: var(--shadow-xs);
  }
}
@keyframes premiumModalIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes premiumConfirmIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.975);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes premiumConfirmOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
}
@keyframes confirmAcceptedPulse {
  0% {
    transform: translateY(0) scale(1);
  }
  48% {
    transform: translateY(-2px) scale(1.006);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes premiumBackdropIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(2px);
  }
}
@keyframes premiumBackdropOut {
  from {
    opacity: 1;
    backdrop-filter: blur(2px);
  }
  to {
    opacity: 0;
    backdrop-filter: blur(0);
  }
}
@keyframes commandPaletteIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes commandPaletteOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.99);
  }
}
@keyframes mobileSheetIn {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes mobileSheetOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(22px) scale(0.99);
  }
}
@media (hover: hover) {
  .quick-action-card,
  .workflow-action,
  .health-item,
  .dashboard-task,
  .stack-item,
  .dashboard-insight,
  .panel:hover {
    backface-visibility: hidden;
  }
  .quick-action-card:hover,
  .workflow-action:hover,
  .health-item:hover,
  .dashboard-task:hover,
  .dashboard-insight:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }
}
@media (max-width: 960px) {
  .page-loading-bar {
    height: 4px;
  }
  body.ai-command-overlay-open .app-shell {
    filter: blur(5px) saturate(0.96);
    transform: scale(0.996);
  }
  .ai-command-overlay {
    backdrop-filter: blur(10px) saturate(1.02);
  }
  .mobile-bottom-nav,
  .portal-bottom-nav {
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--primary-deep) 14%, transparent);
  }
  .completion-toast {
    box-shadow: 0 12px 34px color-mix(in srgb, var(--primary-deep) 16%, transparent);
  }
  .premium-tooltip {
    display: none;
  }
  .premium-confirm-overlay {
    padding: 1rem;
    backdrop-filter: blur(8px) saturate(1);
  }
  .premium-confirm-card {
    width: min(100%, 420px);
    border-radius: 16px;
  }
  .premium-confirm-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .premium-confirm-actions .btn {
    width: 100%;
    min-height: var(--touch-target);
  }
  .alert-polished {
    gap: 0.45rem;
  }
  .alert-polished::before {
    width: 1.3rem;
    height: 1.3rem;
    margin-top: 0.08rem;
  }
  .data-table tbody tr {
    animation-duration: 0.28s;
  }
  .data-table tbody tr:nth-child(n + 4) {
    animation-delay: 45ms;
  }
  .panel,
  .stat,
  .quick-action-card,
  .workflow-action,
  .workflow-step,
  .health-item,
  .dashboard-task,
  .stack-item,
  .dashboard-insight {
    transition-duration: var(--motion-exit);
  }
  .polished-details summary:hover,
  .subnav a:where(:hover, :focus-visible),
  .chip:where(:hover, :focus-visible),
  .inline-check:where(:hover, :focus-within),
  .att-opt:where(:hover, :focus-within) {
    transform: none;
  }
  .input-is-typing {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 7%, transparent);
  }
  .inline-checks label,
  .inline-check {
    min-height: 2.55rem;
  }
  .reveal-on-scroll {
    transform: translateY(6px);
  }
  .msg-preview:hover {
    box-shadow: var(--shadow-xs);
  }
  .file-picker-surface {
    min-height: 3.85rem;
    padding: 0.72rem 0.8rem;
    gap: 0.65rem;
  }
  .file-picker-icon {
    width: 2.05rem;
    height: 2.05rem;
  }
  .file-picker-copy strong {
    font-size: 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-enter-ready :is(.topbar, .panel, .stat, .stack-item, .quick-action-card, .dashboard-insight, .dashboard-balanced-row, .dashboard-quick-panel, .portal-top, .portal-head, .portal-card, .auth-brand, .auth-card),
  .data-table tbody tr,
  body.page-enter-ready form:not(.is-submitting):not([data-ai-command-form]):not([data-ai-import-form]) :is(.field, .inline-check, .inline-checks label, .att-opt, .workflow-submit-row, .empty-actions, .actions),
  .search-item,
  .command-item,
  .command-group,
  .search-results,
  .command-results,
  .surface-refresh-sheen,
  .polished-details[open]:not(.is-closing),
  .polished-details.is-opening,
  .polished-details.is-closing,
  .control-soft-change,
  .surface-soft-change,
  .select-choice-settled,
  .field-select-committed,
  .choice-soft-change,
  .att-opt.choice-soft-change span,
  .control-is-disabled:not(button),
  .alert-polished,
  .input-invalid-flash,
  .number-soft-count.is-counting,
  .command-backdrop,
  .command-palette .command-box,
  .mobile-sheet-backdrop,
  .mobile-action-sheet,
  .mobile-sheet-action,
  .completion-toast,
  .smart-toast,
  .premium-tooltip,
  .premium-confirm-overlay,
  .premium-confirm-card,
  .reveal-on-scroll,
  .image-loading-soft,
  .target-soft-focus,
  .empty-visual,
  dialog,
  .dialog,
  .modal,
  dialog::backdrop,
  .modal-backdrop,
  .page-loading-bar.run,
  .skeleton,
  .ai-wait-steps div.is-active::before,
  .btn.is-busy::before,
  button.is-busy::before {
    animation: none !important;
  }
  body.page-is-leaving :is(.main, .portal-main, .auth-card),
  :is(input, select, textarea):focus,
  .field::before,
  .reveal-on-scroll,
  .image-loading-soft,
  .smart-toast,
  .subnav a:where(:hover, :focus-visible),
  .chip:where(:hover, :focus-visible),
  .inline-check:where(:hover, :focus-within),
  .att-opt:where(:hover, :focus-within) {
    transform: none !important;
    filter: none !important;
  }
}
.btn-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  color: currentColor;
}
.btn-icon svg {
  width: 1rem;
  height: 1rem;
}
.nav-list a {
  letter-spacing: 0;
}
.nav-icon svg {
  width: 1rem;
  height: 1rem;
}
.stat {
  min-height: 7rem;
  padding-inline-end: 4.35rem;
}
.stat::before {
  content: "";
  position: absolute;
  inset-block-start: 0.95rem;
  inset-inline-end: 1rem;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 14px;
  background: var(--primary-faint);
  border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
}
.stat::after {
  content: "";
  position: absolute;
  inset-block-start: 1.58rem;
  inset-inline-start: auto;
  inset-inline-end: 1.62rem;
  inset-block-end: auto;
  width: 1.1rem;
  height: 1.1rem;
  opacity: 0.92;
  background: var(--primary);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='M12 5 3 9l9 4 9-4-9-4Z M6 11v4.5c1.7 1.6 3.7 2.5 6 2.5s4.3-.9 6-2.5V11'/%3E%3C/svg%3E") center / contain no-repeat;
}
.stat-absence::before { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.stat-absence::after {
  background: var(--danger);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='M8 3v4 M16 3v4 M4.5 8h15 M4.5 5h15v15h-15z M8.5 14h7'/%3E%3C/svg%3E");
}
.stat-fees::before { background: color-mix(in srgb, var(--warm) 12%, transparent); }
.stat-fees::after {
  background: var(--warm);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='M4 7.5h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4.8a2 2 0 0 1-2-2v-7.8a2 2 0 0 1 1.5-1.9L16 4.5 M16.5 13h.1'/%3E%3C/svg%3E");
}
.stat-revenue::before { background: color-mix(in srgb, var(--info) 12%, transparent); }
.stat-revenue::after {
  background: var(--info);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='M5 19V5 M5 19h15 M9 16v-5 M13 16V8 M17 16v-7'/%3E%3C/svg%3E");
}
.badge-ok {
  background: color-mix(in srgb, var(--ok) 13%, transparent);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 22%, transparent);
}
.badge-warning {
  background: color-mix(in srgb, var(--warm) 14%, transparent);
  color: var(--warm);
  border-color: color-mix(in srgb, var(--warm) 24%, transparent);
}
.badge-error {
  background: color-mix(in srgb, var(--danger) 13%, transparent);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
}
.badge-info {
  background: color-mix(in srgb, var(--info) 12%, transparent);
  color: var(--info);
  border-color: color-mix(in srgb, var(--info) 20%, transparent);
}
@media (min-width: 961px) {
  .table-wrap {
    overflow: hidden;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.42);
  }
  .data-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--primary) 3.2%, transparent);
  }
  .data-table tbody tr:hover {
    background: color-mix(in srgb, var(--accent) 9%, transparent);
  }
  .data-table td:first-child,
  .data-table th:first-child {
    padding-inline-start: 0.85rem;
  }
  .data-table td:last-child,
  .data-table th:last-child {
    padding-inline-end: 0.85rem;
  }
}
.empty-state-polished {
  padding-block: var(--surface-pad-lg);
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 88%, transparent), color-mix(in srgb, var(--surface) 86%, transparent));
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-0);
}
.empty-state-polished::after {
  content: none;
}
.empty-visual {
  position: relative;
  z-index: 1;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: var(--radius-lg);
  display: inline-grid;
  place-items: center;
  color: var(--theme-text-strong);
  background: linear-gradient(160deg, var(--primary-faint), color-mix(in srgb, var(--accent) 13%, transparent));
  border: 1px solid color-mix(in srgb, var(--primary) 13%, transparent);
  box-shadow: var(--elevation-1);
  animation: emptyVisualIn var(--motion-slow) var(--ease-emphasized) both;
  transition:
    transform var(--motion-base) var(--ease-emphasized),
    box-shadow var(--motion-base) var(--ease-standard);
}
.empty-state-polished:where(:hover, :focus-within) .empty-visual {
  transform: translateY(-1px);
  box-shadow: var(--elevation-2);
}
.empty-visual svg {
  width: 1.45rem;
  height: 1.45rem;
}
dialog,
.dialog,
.modal {
  animation: premiumModalIn var(--motion-slow) var(--ease-emphasized) both;
}
.settings-panel form {
  display: grid;
  gap: 1rem;
}
.settings-section {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.settings-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.95rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}
.settings-section-head strong {
  color: var(--theme-text-strong);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.35;
}
.settings-section-head span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
  max-width: 28rem;
}
.settings-actions {
  display: flex;
  justify-content: flex-start;
  padding-top: 0.15rem;
}
.staff-danger-zone {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--danger) 8%, transparent), transparent 48%),
    rgba(255, 255, 255, 0.72);
  border-color: color-mix(in srgb, var(--danger) 18%, var(--line));
}
.staff-danger-zone .section-title {
  color: color-mix(in srgb, var(--danger) 72%, var(--primary-deep));
}
@keyframes polishSheetRise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 960px) {
  .topbar h1 {
    gap: 0.5rem;
  }
  .page-title-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 12px;
  }
  .page-title-icon svg {
    width: 1.08rem;
    height: 1.08rem;
  }
  .stat {
    padding-inline-end: 4rem;
  }
  .settings-section {
    padding: 0.85rem;
    border-radius: 14px;
  }
  .settings-section-head {
    display: grid;
    gap: 0.25rem;
  }
  .settings-actions .btn {
    width: 100% !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .command-box,
  .mobile-action-sheet,
  dialog,
  .dialog,
  .modal {
    animation: none !important;
  }
}
.data-table .btn,
.data-table .btn-sm,
.data-table .btn-ghost,
.data-table .btn-primary {
  transition:
    transform var(--motion-press),
    background var(--motion-hover),
    border-color var(--motion-hover),
    color var(--motion-hover),
    box-shadow var(--motion-hover),
    opacity var(--motion-hover);
}
.data-table th {
  transition:
    color var(--motion-hover),
    background-color var(--motion-hover);
}
.data-table th:where(:hover, :focus-visible) {
  color: var(--theme-text-strong);
  background-color: color-mix(in srgb, var(--primary) 5%, transparent);
}
.data-table tbody tr:focus-within {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 70%, var(--primary));
}
html[dir="rtl"] .data-table tbody tr:focus-within {
  box-shadow: inset -3px 0 0 color-mix(in srgb, var(--accent) 70%, var(--primary));
}
.search-bar input,
.search-bar select,
.filter-grid input,
.filter-grid select,
.form-grid input,
.form-grid select,
.form-grid textarea {
  transition:
    border-color var(--motion-focus),
    box-shadow var(--motion-focus),
    background-color var(--motion-focus);
}
.search-bar input:focus,
.search-bar select:focus,
.filter-grid input:focus,
.filter-grid select:focus,
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.command-head button {
  transition:
    transform var(--motion-press),
    background var(--motion-hover),
    border-color var(--motion-hover),
    box-shadow var(--motion-hover),
    color var(--motion-hover);
}
.command-head button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}
.command-head button:active {
  transform: translateY(1px) scale(0.992);
}
[data-command-input] {
  transition:
    border-color var(--motion-focus),
    box-shadow var(--motion-focus),
    background-color var(--motion-focus);
}
.inline-checks input[type="checkbox"]:focus-visible,
.inline-check input[type="checkbox"]:focus-visible,
.inline-checks input[type="radio"]:focus-visible,
.inline-check input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}
.polished-details[open]:not(.is-closing),
.polished-details.is-opening {
  animation: detailsReveal var(--motion-modal-in) both;
}
.polished-details.is-closing {
  animation: detailsHide var(--motion-modal-out) both;
}
.input-is-typing {
  transition:
    box-shadow var(--motion-focus),
    border-color var(--motion-focus);
}
.input-invalid-flash {
  animation: fieldValidationNudge var(--motion-slow) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled):not([disabled]),
  .btn-sm:hover:not(:disabled):not([disabled]),
  button.chip:hover,
  a.chip:hover,
  .subnav a:hover,
  .command-item:hover,
  .search-item:hover,
  .att-opt:hover span {
    will-change: transform;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --toast-enter-delay: 0ms;
    --toast-dwell: 4000ms;
    --toast-dwell-error: 5200ms;
    --toast-leave: 0ms;
    --motion-sheen: 0.01ms;
  }
  .data-table tbody tr:focus-within,
  html[dir="rtl"] .data-table tbody tr:focus-within {
    box-shadow: none;
  }
  .btn,
  .btn-sm,
  .chip,
  .subnav a,
  .command-item,
  .search-item,
  .att-opt span,
  .polished-details summary {
    will-change: auto;
  }
}
.empty-state-foundation {
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
  padding: var(--surface-pad-xl) var(--surface-pad-lg);
  gap: var(--surface-gap-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 88%, transparent), color-mix(in srgb, var(--surface) 86%, transparent));
  box-shadow: var(--elevation-0);
}
.empty-state-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--theme-text-strong);
  line-height: 1.35;
}
.empty-state-copy {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
  max-width: 34rem;
}
.empty-state-foundation .empty-actions {
  margin-top: var(--surface-gap-sm);
  gap: var(--surface-gap-sm);
}
.empty-state-has-visual .empty-visual {
  margin-bottom: var(--space-1);
}
.workflow-step,
.workflow-action {
  padding: var(--surface-pad-sm);
  box-shadow: var(--elevation-0);
  border-radius: var(--radius-md);
}
.field {
  border-radius: var(--radius-md);
}
.field input,
.field select,
.field textarea,
.search-bar input,
.search-bar select,
.filter-grid input,
.filter-grid select {
  border-radius: var(--radius-md);
}
.command-skeleton-row {
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-0);
}
.search-loading .skeleton,
.command-skeleton-row .skeleton {
  border-radius: var(--radius-sm);
}
.btn,
.main .btn,
.panel .btn,
.topbar .btn {
  border-radius: var(--radius-md);
}
.main .btn-sm,
.panel .btn-sm,
.data-table .btn-sm {
  border-radius: var(--radius-sm);
}
.chip,
.badge,
.subnav a {
  border-radius: var(--radius-pill);
}
.smart-toast,
.completion-toast,
.command-box,
.premium-confirm-card,
dialog,
.dialog,
.modal {
  box-shadow: var(--elevation-4);
}
.premium-tooltip {
  box-shadow: var(--elevation-3);
  border-radius: var(--radius-sm);
}
.stat {
  box-shadow: var(--elevation-1);
  border-radius: var(--radius-lg);
}
.panel {
  box-shadow: var(--elevation-2);
  border-radius: var(--radius-lg);
}
.panel .section-title,
.panel > h2,
.panel > h3 {
  margin-top: 0;
}
.qr-image {
  border-radius: var(--radius-lg);
  border-color: var(--line);
  box-shadow: var(--elevation-0);
  padding: var(--surface-pad-sm);
}
.page-loading-bar {
  box-shadow: var(--elevation-1);
}
.btn.is-busy::before,
button.is-busy::before {
  border-radius: var(--radius-pill);
}
.dashboard-main {
  gap: var(--surface-gap-lg);
}
.dashboard-main .dashboard-hero {
  align-items: flex-start;
  gap: var(--surface-gap-md);
}
.dashboard-main .dashboard-role {
  border-radius: var(--radius-pill);
  background: var(--primary-faint);
  box-shadow: var(--elevation-0);
}
.dashboard-main .dashboard-section-head {
  gap: var(--surface-gap-md);
  margin-bottom: var(--surface-pad-md);
}
.dashboard-main .dashboard-section-head h2 {
  font-size: var(--text-xl);
}
.dashboard-main .dashboard-section-head p {
  font-size: var(--text-sm);
  line-height: 1.55;
}
.dashboard-main .dashboard-copilot-hero,
.dashboard-main .dashboard-tasks-full,
.dashboard-main .dashboard-quick-panel,
.dashboard-main .dashboard-setup,
.dashboard-main .dashboard-health-panel {
  box-shadow: var(--elevation-2);
}
.dashboard-main .dashboard-copilot-hero {
  background:
    linear-gradient(145deg, color-mix(in srgb, #fff 94%, transparent), color-mix(in srgb, var(--surface) 88%, transparent)),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
}
.dashboard-main .dashboard-brief-grid,
.dashboard-main .dashboard-task-list,
.dashboard-main .setup-steps,
.dashboard-main .health-grid,
.dashboard-main .quick-action-grid,
.dashboard-main .dashboard-insights {
  gap: var(--surface-gap-sm);
}
.dashboard-main .dashboard-balanced-row {
  gap: var(--surface-gap-lg);
}
.dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight) {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--elevation-0);
  transition:
    transform var(--motion-press),
    background var(--motion-hover),
    border-color var(--motion-hover),
    box-shadow var(--motion-hover),
    color var(--motion-hover);
}
.dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight):hover {
  transform: translateY(-1px);
  background: var(--surface-strong);
  border-color: color-mix(in srgb, var(--primary) 22%, transparent);
  box-shadow: var(--elevation-1);
}
.dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight):active,
.dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight).is-pressing {
  transform: translateY(1px) scale(0.992);
  box-shadow: var(--elevation-0);
}
.dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight):focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, #fff 72%, transparent),
    var(--focus-ring);
  transform: translateY(-1px);
}
.dashboard-main .copilot-main-advice {
  gap: var(--surface-gap-sm);
  padding: var(--surface-pad-md);
}
.dashboard-main .dashboard-task,
.dashboard-main .setup-step,
.dashboard-main .health-item {
  padding: var(--surface-pad-sm) var(--surface-pad-md);
}
.dashboard-main .quick-action-card {
  padding: var(--surface-pad-md);
  align-content: space-between;
  min-height: 7.5rem;
}
.dashboard-main .quick-action-card em {
  margin-top: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--primary-faint);
  transition:
    background var(--motion-hover),
    color var(--motion-hover);
}
.dashboard-main .quick-action-card:hover em,
.dashboard-main .quick-action-card:focus-visible em {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--theme-text-strong);
}
.dashboard-main .dashboard-insight {
  padding: var(--surface-pad-md);
  gap: var(--space-1);
}
.dashboard-main .dashboard-insight strong {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}
.dashboard-main .setup-meter {
  height: 0.55rem;
  margin-bottom: var(--surface-pad-md);
  background: var(--primary-faint);
  border: 1px solid var(--line);
  box-shadow: var(--elevation-0);
}
.dashboard-main .setup-meter span {
  transition: width var(--motion-slow) var(--ease-emphasized);
}
.dashboard-main .setup-score {
  border-radius: var(--radius-pill);
  box-shadow: var(--elevation-0);
}
.dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight).is-navigating {
  opacity: 0.88;
  pointer-events: none;
}
.dashboard-main .empty-state-foundation {
  margin-block: var(--surface-pad-sm);
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight),
  .dashboard-main .setup-meter span,
  .dashboard-main .quick-action-card em {
    transition-duration: 0.01ms !important;
  }
  .dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight):hover,
  .dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight):active,
  .dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight).is-pressing,
  .dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight):focus-visible {
    transform: none;
  }
}
.student-link {
  border-radius: var(--radius-sm);
  transition:
    color var(--motion-hover),
    transform var(--motion-press);
}
.student-link strong {
  transition: color var(--motion-hover);
}
.data-table tbody tr:hover .student-link strong,
.data-table tbody tr:focus-within .student-link strong,
.student-link:hover strong,
.student-link:focus-visible strong {
  color: var(--theme-text-strong);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--primary) 45%, transparent);
  text-underline-offset: 3px;
}
.student-link:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in srgb, #fff 72%, transparent),
    var(--focus-ring);
}
.student-link .avatar,
.student-link .avatar-fallback {
  transition:
    transform var(--motion-hover),
    box-shadow var(--motion-hover);
}
.data-table tbody tr:hover .student-link .avatar,
.data-table tbody tr:hover .student-link .avatar-fallback,
.students-mobile-card:hover .student-link .avatar,
.students-mobile-card:hover .student-link .avatar-fallback {
  transform: scale(1.03);
  box-shadow: var(--elevation-1);
}
.students-mobile-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-1);
  transition:
    transform var(--motion-press),
    background var(--motion-hover),
    border-color var(--motion-hover),
    box-shadow var(--motion-hover);
}
.students-mobile-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 22%, transparent);
  box-shadow: var(--elevation-2);
}
.students-mobile-card:active,
.students-mobile-card.is-pressing {
  transform: translateY(1px) scale(0.992);
  box-shadow: var(--elevation-0);
}
.students-mobile-card:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, #fff 72%, transparent),
    var(--focus-ring);
  transform: translateY(-1px);
}
.students-mobile-card.is-navigating {
  opacity: 0.88;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .students-mobile-card,
  .student-link,
  .student-link strong,
  .student-link .avatar,
  .student-link .avatar-fallback {
    transition-duration: 0.01ms !important;
  }
  .students-mobile-card:hover,
  .students-mobile-card:active,
  .students-mobile-card.is-pressing,
  .students-mobile-card:focus-visible,
  .data-table tbody tr:hover .student-link .avatar,
  .data-table tbody tr:hover .student-link .avatar-fallback,
  .students-mobile-card:hover .student-link .avatar,
  .students-mobile-card:hover .student-link .avatar-fallback {
    transform: none;
  }
}
.students-unified-title {
  min-width: 0;
}
.students-unified-subtitle {
  display: none;
}
.students-unified-table tbody tr {
  animation: none;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 1rem;
}
.pagination-summary {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}
.pagination-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}
.pagination-actions .btn-sm {
  min-width: 2.4rem;
}
@media (max-width: 960px) {
  .students-table-unified {
    overflow: visible;
    margin-inline: 0;
    padding-bottom: 0;
  }
  .students-unified-table tbody {
    gap: 0.75rem;
  }
  .students-unified-table .students-unified-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "student status"
      "number number"
      "grade grade"
      "phone phone";
    gap: 0.7rem 0.75rem;
    padding: 0.95rem 1rem;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(160deg, #fff, rgba(247, 243, 234, 0.92));
    border: 1px solid rgba(26, 95, 74, 0.08);
    box-shadow: 0 10px 24px rgba(15, 61, 49, 0.08);
    transition:
      transform var(--motion-press),
      background var(--motion-hover),
      border-color var(--motion-hover),
      box-shadow var(--motion-hover);
  }
  .students-unified-table .students-unified-row:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 22%, transparent);
    box-shadow: var(--elevation-2);
  }
  .students-unified-table .students-unified-row:active {
    transform: translateY(1px) scale(0.992);
    box-shadow: var(--elevation-0);
  }
  .students-unified-table .students-unified-row:focus-within {
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
    box-shadow:
      0 0 0 2px color-mix(in srgb, #fff 72%, transparent),
      var(--focus-ring);
  }
  .students-unified-table .students-unified-row > td {
    width: auto !important;
    padding: 0;
    border: 0;
  }
  .students-unified-table .students-unified-empty-row {
    overflow: visible;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .students-unified-table .students-unified-empty-row > td {
    padding: 0;
    border: 0;
  }
  .students-unified-student { grid-area: student; }
  .students-unified-number { grid-area: number; }
  .students-unified-grade { grid-area: grade; }
  .students-unified-phone { grid-area: phone; }
  .students-unified-status { grid-area: status; }
  .students-unified-table .students-unified-student::before,
  .students-unified-table .students-unified-status::before {
    display: none;
  }
  .students-unified-table .students-unified-status {
    align-self: start;
  }
  .students-unified-link {
    width: 100%;
    min-width: 0;
  }
  .students-unified-link::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
  }
  .students-unified-title strong,
  .students-unified-subtitle {
    display: block;
  }
  .students-unified-title strong {
    line-height: 1.45;
  }
  .students-unified-grade,
  .students-unified-phone {
    font-weight: 700;
  }
  .students-unified-subtitle {
    margin-top: 0.12rem;
    font-size: 0.8rem;
  }
}
@media (max-width: 640px) {
  .pagination {
    align-items: stretch;
    flex-direction: column;
  }
  .pagination-actions {
    justify-content: center;
  }
  .students-unified-table .students-unified-row {
    padding: 0.9rem 0.85rem;
    border-radius: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .students-unified-table .students-unified-row {
    transition-duration: 0.01ms !important;
  }
  .students-unified-table .students-unified-row:hover,
  .students-unified-table .students-unified-row:active {
    transform: none;
  }
}
.attendance-sheet tbody tr {
  transition:
    background var(--motion-hover),
    box-shadow var(--motion-hover);
}
.attendance-sheet tbody tr:hover td,
.attendance-sheet tbody tr:focus-within td {
  background-color: color-mix(in srgb, var(--primary-faint) 58%, transparent);
}
.attendance-sheet tbody tr:hover td:first-child,
.attendance-sheet tbody tr:focus-within td:first-child {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--primary) 64%, var(--accent));
}
html[dir="rtl"] .attendance-sheet tbody tr:hover td:first-child,
html[dir="rtl"] .attendance-sheet tbody tr:focus-within td:first-child {
  box-shadow: inset -3px 0 0 color-mix(in srgb, var(--primary) 64%, var(--accent));
}
.att-opt span {
  border-radius: var(--radius-pill);
  box-shadow: var(--elevation-0);
  min-height: 2rem;
  min-width: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform var(--motion-press),
    background var(--motion-hover),
    border-color var(--motion-hover),
    color var(--motion-hover),
    box-shadow var(--motion-hover);
}
.att-opt:hover span,
.att-opt input:focus-visible + span {
  transform: translateY(-1px);
  box-shadow: var(--elevation-1);
}
.att-opt.is-pressing span {
  transform: translateY(1px) scale(0.992);
  box-shadow: var(--elevation-0);
}
.att-opt input:checked + span {
  color: #fff;
  border-color: transparent;
  transform: translateY(-1px) scale(1.02);
  box-shadow: var(--elevation-2);
}
.att-opt input:focus-visible + span {
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in srgb, #fff 72%, transparent),
    var(--focus-ring),
    var(--elevation-1);
}
.att-opt input:checked:focus-visible + span {
  box-shadow:
    0 0 0 2px color-mix(in srgb, #fff 72%, transparent),
    var(--focus-ring),
    var(--elevation-2);
}
.attendance-sheet .att-late {
  border-radius: var(--radius-sm);
  transition:
    opacity var(--motion-hover),
    border-color var(--motion-focus),
    box-shadow var(--motion-focus),
    background-color var(--motion-focus);
}
.attendance-sheet .att-late:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.attendance-sheet td input[name^="note_"] {
  border-radius: var(--radius-sm);
  transition:
    border-color var(--motion-focus),
    box-shadow var(--motion-focus),
    background-color var(--motion-focus);
}
.attendance-sheet.attendance-bulk-applied tbody tr td {
  background-color: color-mix(in srgb, var(--primary) 5%, transparent);
  transition: background-color var(--motion-hover);
}
form.panel.is-submitting .attendance-sheet {
  opacity: 0.88;
  pointer-events: none;
  transition: opacity var(--motion-hover);
}
form.panel.is-submitting .workflow-submit-row .btn-primary.is-busy,
form.panel.is-submitting .workflow-submit-row .btn-primary {
  min-width: 8.5rem;
}
@media (max-width: 900px) {
  .att-opt span {
    min-height: 2.35rem;
    padding-inline: 0.85rem;
  }
  .att-status {
    gap: var(--surface-gap-sm);
  }
}
@media (prefers-reduced-motion: reduce) {
  .attendance-sheet tbody tr,
  .att-opt span,
  .attendance-sheet .att-late,
  .attendance-sheet td input[name^="note_"],
  .attendance-sheet.attendance-bulk-applied tbody tr td,
  form.panel.is-submitting .attendance-sheet {
    transition-duration: 0.01ms !important;
  }
  .att-opt:hover span,
  .att-opt.is-pressing span,
  .att-opt input:focus-visible + span,
  .att-opt input:checked + span {
    transform: none;
  }
}
.grades-sheet input[name^="score_"] {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
}
.grades-sheet input.score-out-of-range,
.grades-sheet input.score-out-of-range:focus {
  border-color: #b33b3b;
  background: color-mix(in srgb, #b33b3b 6%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, #b33b3b 14%, transparent);
}
.grades-sheet tbody tr.grade-row-edited td:first-child {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 78%, var(--primary));
}
html[dir="rtl"] .grades-sheet tbody tr.grade-row-edited td:first-child {
  box-shadow: inset -3px 0 0 color-mix(in srgb, var(--accent) 78%, var(--primary));
}
.grades-sheet .abs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--motion-hover);
}
.grades-sheet .abs-toggle:hover {
  color: var(--ink);
}
.grades-sheet .abs-toggle:has(input:checked) {
  color: #b33b3b;
}
@media (prefers-reduced-motion: reduce) {
  .grades-sheet .abs-toggle,
  .grades-sheet input[name^="score_"] {
    transition-duration: 0.01ms !important;
  }
}
.schedule-grid-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.schedule-grid {
  border-collapse: separate;
  border-spacing: 0;
}
.schedule-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--surface-strong) 94%, transparent);
  box-shadow: 0 1px 0 var(--line);
}
.schedule-grid .schedule-period-head,
.schedule-grid .schedule-period-cell {
  position: sticky;
  inset-inline-start: 0;
  z-index: 3;
  background: color-mix(in srgb, var(--surface-strong) 96%, transparent);
  box-shadow: 1px 0 0 var(--line);
}
html[dir="rtl"] .schedule-grid .schedule-period-head,
html[dir="rtl"] .schedule-grid .schedule-period-cell {
  box-shadow: -1px 0 0 var(--line);
}
.schedule-grid .schedule-period-head {
  z-index: 4;
}
.schedule-period-time {
  font-size: 0.8rem;
}
.schedule-slot {
  vertical-align: top;
  min-width: 7.5rem;
  transition: background var(--motion-hover);
}
.schedule-slot-empty {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.schedule-slot-placeholder {
  display: inline-block;
  opacity: 0.55;
}
.schedule-grid .schedule-day-head.is-today,
.schedule-grid .schedule-slot.is-today {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}
.schedule-grid .schedule-day-head.is-today {
  box-shadow:
    0 1px 0 var(--line),
    inset 0 -2px 0 color-mix(in srgb, var(--primary) 55%, var(--accent));
}
.schedule-grid .schedule-slot.is-current-period {
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent);
}
.schedule-lesson {
  display: grid;
  gap: 0.28rem;
  padding: var(--surface-pad-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
  box-shadow: var(--elevation-0);
  transition:
    transform var(--motion-press),
    background var(--motion-hover),
    border-color var(--motion-hover),
    box-shadow var(--motion-hover);
}
.schedule-lesson-subject {
  color: var(--theme-text-strong);
  line-height: 1.35;
}
.schedule-lesson-meta {
  font-size: 0.85rem;
  line-height: 1.45;
}
.schedule-lesson-room {
  display: block;
}
.schedule-lesson-actions {
  margin-top: 0.35rem;
}
.schedule-lesson:hover,
.schedule-lesson:focus-within {
  transform: translateY(-1px);
  background: var(--surface-strong);
  border-color: color-mix(in srgb, var(--primary) 22%, transparent);
  box-shadow: var(--elevation-1);
}
.schedule-lesson:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, #fff 72%, transparent),
    var(--focus-ring);
}
.schedule-lesson.is-pressing {
  transform: translateY(1px) scale(0.992);
  box-shadow: var(--elevation-0);
}
.schedule-ai-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--elevation-1);
  transition:
    transform var(--motion-press),
    background var(--motion-hover),
    border-color var(--motion-hover),
    box-shadow var(--motion-hover);
}
.schedule-ai-card:hover,
.schedule-ai-card:focus-within {
  transform: translateY(-1px);
  background: var(--surface-strong);
  border-color: color-mix(in srgb, var(--primary) 22%, transparent);
  box-shadow: var(--elevation-2);
}
.schedule-ai-card.is-pressing {
  transform: translateY(1px) scale(0.992);
  box-shadow: var(--elevation-0);
}
.schedule-ai-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  background: color-mix(in srgb, var(--primary-faint) 70%, var(--surface-strong));
}
@media (prefers-reduced-motion: reduce) {
  .schedule-slot,
  .schedule-lesson,
  .schedule-ai-card {
    transition-duration: 0.01ms !important;
  }
  .schedule-lesson:hover,
  .schedule-lesson:focus-within,
  .schedule-lesson.is-pressing,
  .schedule-ai-card:hover,
  .schedule-ai-card:focus-within,
  .schedule-ai-card.is-pressing {
    transform: none;
  }
}
.wa-settings-view {
  display: grid;
  gap: var(--surface-gap-md, 1.25rem);
}
.wa-panel {
  margin-bottom: 0;
}
.wa-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.wa-panel-head .section-title {
  margin-bottom: 0.25rem;
}
.wa-status-badge {
  flex-shrink: 0;
  align-self: center;
}
.wa-status-card {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
  background: rgba(255, 255, 255, 0.7);
  padding: 1rem 1.05rem;
  transition: border-color var(--motion-hover), background var(--motion-hover);
}
.wa-status-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--muted) 12%, #fff);
  color: var(--muted);
}
.wa-status-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wa-status-copy {
  display: grid;
  gap: 0.2rem;
}
.wa-status-copy strong {
  color: var(--theme-text-strong);
  font-size: 1.05rem;
}
.wa-status-copy span {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}
.wa-status-card.wa-tone-ok {
  border-color: color-mix(in srgb, var(--ok) 28%, var(--line));
  background: color-mix(in srgb, var(--ok) 7%, rgba(255, 255, 255, 0.92));
}
.wa-status-card.wa-tone-ok .wa-status-icon {
  background: color-mix(in srgb, var(--ok) 16%, #fff);
  color: var(--ok);
}
.wa-status-card.wa-tone-info {
  border-color: color-mix(in srgb, #2f6fed 28%, var(--line));
  background: color-mix(in srgb, #2f6fed 7%, rgba(255, 255, 255, 0.92));
}
.wa-status-card.wa-tone-info .wa-status-icon {
  background: color-mix(in srgb, #2f6fed 14%, #fff);
  color: #2f6fed;
}
.wa-status-card.wa-tone-warning {
  border-color: color-mix(in srgb, #b8860b 30%, var(--line));
  background: color-mix(in srgb, #c9a227 10%, rgba(255, 255, 255, 0.92));
}
.wa-status-card.wa-tone-warning .wa-status-icon {
  background: color-mix(in srgb, #c9a227 18%, #fff);
  color: #8a6a10;
}
.wa-status-card.wa-tone-danger {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
  background: color-mix(in srgb, var(--danger) 7%, rgba(255, 255, 255, 0.92));
}
.wa-status-card.wa-tone-danger .wa-status-icon {
  background: color-mix(in srgb, var(--danger) 14%, #fff);
  color: var(--danger);
}
.wa-status-card.wa-tone-muted .wa-status-icon {
  background: color-mix(in srgb, var(--primary) 8%, #fff);
  color: var(--primary);
}
.wa-qr-layout {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.wa-qr-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
  background: #fff;
  padding: 1rem;
  display: grid;
  place-items: center;
}
.wa-qr-mock {
  position: relative;
  width: 100%;
  max-width: 180px;
  color: var(--theme-text-strong);
}
.wa-qr-mock svg {
  width: 100%;
  height: auto;
  display: block;
}
.wa-qr-mock-label {
  position: absolute;
  inset-inline: 0.5rem;
  inset-block-end: 0.45rem;
  text-align: center;
  font-size:var(--text-caption);
  font-weight: 700;
  color: var(--muted);
  background: color-mix(in srgb, #fff 88%, transparent);
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
}
.wa-qr-meta {
  display: grid;
  gap: 0.85rem;
}
.wa-qr-actions,
.wa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.wa-inline-form {
  display: inline-flex;
  margin: 0;
}
.wa-connected-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 1rem;
}
.wa-session-grid code {
  font-size: 0.9rem;
}
.wa-future-card.is-disabled,
.workflow-action.wa-future-card.is-disabled {
  opacity: 0.72;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.15);
}
.wa-future-card em {
  color: var(--muted);
}
.wa-warning-banner {
  margin-bottom: 0;
}
.wa-health-link {
  margin: 0.25rem 0 0;
}
.wa-countdown strong {
  font-variant-numeric: tabular-nums;
}
@media (max-width: 800px) {
  .wa-qr-layout,
  .wa-connected-grid {
    grid-template-columns: 1fr;
  }
  .wa-panel-head {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wa-status-card {
    transition: none;
  }
}
.wa-qr-image {
  width: 100%;
  max-width: 180px;
  height: auto;
  display: block;
  border-radius: 8px;
}
.wa-qr-placeholder {
  min-height: 160px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
}
.wa-advanced {
  padding: 0;
  overflow: hidden;
}
.wa-advanced-summary {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.wa-advanced-summary::-webkit-details-marker {
  display: none;
}
.wa-advanced-summary::after {
  content: "⌄";
  margin-inline-start: auto;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  transition: transform var(--motion-hover);
}
.wa-advanced[open] > .wa-advanced-summary::after {
  transform: rotate(180deg);
}
.wa-advanced[open] > .wa-advanced-summary {
  border-bottom: 1px solid var(--line);
}
.wa-advanced-summary-copy {
  display: grid;
  gap: 0.16rem;
}
.wa-advanced-summary-copy strong {
  color: var(--ink);
  font-size: 1rem;
}
.wa-advanced-summary-copy small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
}
.wa-advanced-content {
  display: grid;
  gap: 1rem;
  padding: 1rem 1.15rem 1.15rem;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}
.wa-advanced-notice {
  border-inline-start: 3px solid color-mix(in srgb, var(--primary) 62%, var(--line));
  border-radius: var(--radius-sm, 10px);
  background: color-mix(in srgb, var(--primary) 5%, #fff);
  color: var(--muted);
  padding: 0.72rem 0.85rem;
  font-size: 0.88rem;
  line-height: 1.6;
}
.wa-advanced-actions,
.wa-advanced-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}
.wa-advanced-actions form {
  margin: 0;
}
.wa-advanced-actions .btn,
.wa-advanced-footer .btn {
  width: auto;
}
.wa-tech-section {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
  background: color-mix(in srgb, #fff 82%, var(--surface));
  padding: 1rem;
}
.wa-tech-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.wa-tech-head h3,
.wa-tech-table-head h4 {
  margin: 0;
  color: var(--theme-text-strong);
}
.wa-tech-head h3 {
  font-size: 1rem;
}
.wa-tech-head p,
.wa-tech-table-head span {
  margin: 0.18rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}
.wa-tech-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}
.wa-tech-item {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.28rem;
  padding: 0.72rem 0.78rem;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: var(--radius-md, 12px);
  background: var(--surface-strong);
}
.wa-tech-item > span {
  color: var(--muted);
  font-size: 0.78rem;
}
.wa-tech-item > strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.wa-tech-item code {
  display: inline-block;
  max-width: 100%;
  padding: 0.12rem 0.38rem;
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary) 7%, #fff);
  direction: ltr;
  unicode-bidi: isolate;
  white-space: normal;
  overflow-wrap: anywhere;
}
.wa-tech-item-wide {
  grid-column: span 2;
}
.wa-tech-table-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 0.55rem;
}
.wa-tech-table-head h4 {
  font-size: 0.92rem;
}
.wa-tech-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
}
.wa-support-dialog {
  width: min(480px, calc(100vw - 2rem));
  padding: 1.25rem;
  direction: rtl;
  text-align: right;
}
.wa-support-dialog[open] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}
.wa-support-dialog-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 18%, #fff);
  color: color-mix(in srgb, var(--accent) 82%, #6d5300);
  font-weight:var(--font-weight-bold, 700);
  font-size: 1.15rem;
}
.wa-support-dialog h3 {
  margin: 0 0 0.35rem;
  color: var(--ink);
  font-size: 1.08rem;
}
.wa-support-dialog p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  font-size: 0.9rem;
}
.wa-support-dialog-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.3rem;
}
.wa-support-dialog-actions .btn {
  width: auto;
}
@media (max-width: 900px) {
  .wa-tech-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wa-tech-item-wide {
    grid-column: span 2;
  }
}
@media (max-width: 560px) {
  .wa-advanced-summary,
  .wa-advanced-content {
    padding-inline: 0.9rem;
  }
  .wa-tech-grid {
    grid-template-columns: 1fr;
  }
  .wa-tech-item-wide {
    grid-column: auto;
  }
  .wa-support-dialog[open] {
    grid-template-columns: 1fr;
  }
  .wa-support-dialog-icon {
    width: 2rem;
    height: 2rem;
  }
  .wa-support-dialog-actions {
    grid-column: auto;
  }
}
.parent-notice-card {
  margin-bottom: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 38%),
    var(--surface);
}
.parent-notice-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.parent-notice-kicker {
  display: inline-block;
  margin-bottom: 0.35rem;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight:var(--font-weight-semibold, 600);
}
.parent-notice-form {
  display: grid;
  gap: 0.9rem;
}
.parent-notice-form textarea {
  min-height: 7rem;
  resize: vertical;
}
.parent-notice-preview {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 72%, #fff);
}
.parent-notice-preview > span {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight:var(--font-weight-semibold, 600);
}
.parent-notice-preview p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.85;
  font-weight: 650;
}
@media (max-width: 640px) {
  .parent-notice-head {
    flex-direction: column;
  }
  .parent-notice-card .workflow-submit-row {
    align-items: stretch;
  }
  .parent-notice-card .workflow-submit-row .btn {
    width: 100%;
  }
}
.communications-page {
  max-width: 1180px;
}
.communications-topbar {
  align-items: flex-start;
}
.page-kicker {
  display: inline-block;
  margin-bottom: 0.35rem;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight:var(--font-weight-semibold, 600);
  letter-spacing: 0.02em;
}
.communications-settings-btn {
  width: auto;
  white-space: nowrap;
}
.communications-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.comm-channel-card {
  position: relative;
  overflow: hidden;
  min-height: 270px;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.comm-channel-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  inset-inline-end: -70px;
  top: -70px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  pointer-events: none;
}
.comm-channel-card.needs-action {
  border-color: color-mix(in srgb, #b7791f 32%, var(--border));
}
.comm-channel-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.85rem;
  align-items: center;
}
.comm-channel-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  font-size: 1.05rem;
  font-weight:var(--font-weight-bold, 700);
}
.comm-channel-head h2 {
  margin: 0.1rem 0 0;
  font-size: 1.35rem;
}
.comm-eyebrow {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}
.comm-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight:var(--font-weight-semibold, 600);
}
.comm-status-pill.ready {
  color: #18794e;
  background: color-mix(in srgb, #2f9e6f 12%, var(--surface));
}
.comm-status-pill.warning {
  color: #8a5a00;
  background: color-mix(in srgb, #d99a1b 14%, var(--surface));
}
.comm-channel-message {
  margin: 1.1rem 0;
  color: var(--ink);
  line-height: 1.8;
}
.comm-channel-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.78rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.comm-channel-meta span {
  color: var(--muted);
  font-size: 0.82rem;
}
.comm-channel-meta strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.comm-card-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  font-weight:var(--font-weight-semibold, 600);
  text-decoration: none;
}
.comm-section {
  margin: 1.25rem 0;
  padding: 1.15rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}
.comm-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.comm-section-head h2 {
  margin: 0;
}
.comm-section-note {
  color: var(--muted);
  font-size: 0.8rem;
}
.comm-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}
.comm-stat {
  padding: 1rem;
  border-radius: 16px;
  background: var(--surface-soft, color-mix(in srgb, var(--surface) 90%, var(--ink)));
  border: 1px solid var(--border);
}
.comm-stat > span,
.comm-stat > small {
  display: block;
  color: var(--muted);
}
.comm-stat strong {
  display: block;
  margin: 0.25rem 0 0.15rem;
  font-size: 1.8rem;
  line-height: 1;
}
.comm-stat.good strong { color: #18794e; }
.comm-stat.waiting strong { color: #8a6a00; }
.comm-stat.bad strong { color: #b42318; }
.comm-issue-list {
  display: grid;
  gap: 0.7rem;
}
.comm-issue-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem;
  border: 1px solid color-mix(in srgb, #b42318 22%, var(--border));
  border-radius: 15px;
  background: color-mix(in srgb, #b42318 4%, var(--surface));
}
.comm-issue-main {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  min-width: 0;
}
.comm-issue-main p {
  margin: 0.22rem 0;
  color: var(--muted);
}
.comm-issue-symbol,
.comm-success-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-weight:var(--font-weight-bold, 700);
}
.comm-issue-symbol {
  color: #b42318;
  background: color-mix(in srgb, #b42318 11%, var(--surface));
}
.comm-success-mark {
  color: #18794e;
  background: color-mix(in srgb, #2f9e6f 12%, var(--surface));
}
.comm-recipient {
  color: var(--muted);
  font-size: 0.78rem;
}
.comm-empty-state {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  border-radius: 15px;
  background: color-mix(in srgb, #2f9e6f 5%, var(--surface));
}
.comm-empty-state p {
  margin: 0.2rem 0 0;
  color: var(--muted);
}
.comm-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}
.comm-action-card {
  display: grid;
  gap: 0.45rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  text-decoration: none;
  transition: transform var(--motion-hover), border-color var(--motion-hover), box-shadow var(--motion-hover);
}
.comm-action-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: var(--shadow-sm);
}
.comm-action-card span {
  color: var(--muted);
  line-height: 1.7;
}
.comm-action-card em {
  color: var(--accent);
  font-style: normal;
  font-weight:var(--font-weight-semibold, 600);
}
.comm-advanced {
  margin: 1rem 0 2rem;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 97%, var(--ink));
}
.comm-advanced summary {
  cursor: pointer;
  padding: 0.9rem 1rem;
  font-weight:var(--font-weight-semibold, 600);
}
.comm-advanced-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding: 0 1rem 1rem;
}
.comm-advanced-links a {
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 700;
}
@media (max-width: 900px) {
  .communications-hero,
  .comm-action-grid {
    grid-template-columns: 1fr;
  }
  .comm-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .communications-page {
    padding-inline: 0.7rem;
  }
  .communications-topbar {
    gap: 0.8rem;
  }
  .communications-settings-btn {
    width: 100%;
  }
  .comm-channel-card,
  .comm-section {
    border-radius: 17px;
    padding: 0.95rem;
  }
  .comm-channel-head {
    grid-template-columns: auto 1fr;
  }
  .comm-status-pill {
    grid-column: 1 / -1;
    width: max-content;
  }
  .comm-channel-meta {
    align-items: flex-start;
    flex-direction: column;
  }
  .comm-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }
  .comm-stat {
    padding: 0.8rem;
  }
  .comm-stat strong {
    font-size: 1.55rem;
  }
  .comm-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }
  .comm-issue-card {
    align-items: stretch;
    flex-direction: column;
  }
  .comm-issue-card form,
  .comm-issue-card .btn {
    width: 100%;
  }
  .comm-advanced-links {
    display: grid;
  }
}
.workflow-action-hint {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.65;
}
.attendance-approve-form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
.attendance-approve-form .btn {
  width: auto;
  padding-inline: 1.4rem;
}
.comm-action-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.comm-action-card {
  min-height: 148px;
  align-content: start;
}
.comm-action-card em {
  margin-top: auto;
}
@media (max-width: 1100px) {
  .comm-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .main {
    padding-inline: max(0.72rem, env(safe-area-inset-left, 0px));
  }
  .topbar h1 {
    overflow-wrap: anywhere;
  }
  .topbar-actions:not(.student-detail-toolbar),
  .student-detail-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .topbar-actions:not(.student-detail-toolbar) > *,
  .student-detail-actions > * {
    width: 100% !important;
    min-width: 0;
  }
  .topbar-actions > form {
    display: block;
  }
  .topbar-actions > form .btn {
    width: 100% !important;
  }
  .subnav {
    overflow-x: auto;
    flex-wrap: nowrap;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }
  .subnav::-webkit-scrollbar {
    display: none;
  }
  .subnav a {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
  .workflow-submit-row,
  .attendance-approve-form {
    gap: 0.55rem;
  }
  .workflow-submit-row .btn,
  .attendance-approve-form .btn {
    width: 100% !important;
    min-height: 3rem;
  }
  .workflow-action-hint {
    display: block;
    width: 100%;
    padding: 0.15rem 0.15rem 0;
    text-align: center;
    font-size: 0.78rem;
  }
  .attendance-approve-form {
    position: sticky;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 15;
    display: grid;
    grid-template-columns: 1fr;
    padding: 0.65rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--paper) 84%, rgba(255,255,255,0.9));
    box-shadow: var(--shadow-sm);
  }
  .attendance-sheet.responsive-table tbody,
  .grades-sheet.responsive-table tbody {
    gap: 0.7rem;
  }
  .attendance-sheet.responsive-table tr,
  .grades-sheet.responsive-table tr {
    border-radius: 15px;
  }
  .attendance-sheet.responsive-table td,
  .grades-sheet.responsive-table td {
    padding: 0.68rem 0.78rem;
  }
  .attendance-sheet .att-status {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .attendance-sheet .att-opt,
  .attendance-sheet .att-opt span {
    width: 100%;
  }
  .attendance-sheet .att-opt span {
    justify-content: center;
    min-height: 2.65rem;
  }
  .grades-sheet input[type="number"],
  .grades-sheet input[type="text"] {
    width: 100% !important;
  }
  .parent-notice-card {
    overflow: hidden;
  }
  .wa-pairing-form .workflow-submit-row {
    position: static;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .wa-pairing-code {
    font-size: clamp(1.35rem, 8vw, 2rem) !important;
    letter-spacing: 0.12em !important;
    overflow-wrap: anywhere;
  }
  .wa-support-dialog {
    max-width: calc(100vw - 1.25rem);
  }
  .parent-notice-preview {
    overflow-wrap: anywhere;
  }
  .communications-hero {
    gap: 0.7rem;
  }
  .comm-channel-card {
    min-height: 0;
  }
  .comm-card-action {
    min-height: 2.8rem;
    align-items: center;
  }
  .comm-stats-grid {
    gap: 0.55rem;
  }
  .comm-stat {
    min-width: 0;
  }
  .comm-stat > span,
  .comm-stat > small {
    line-height: 1.45;
  }
  .comm-action-grid {
    grid-template-columns: 1fr;
  }
  .comm-action-card {
    min-height: 0;
    padding: 0.9rem;
  }
  .comm-advanced summary {
    min-height: 2.9rem;
    display: flex;
    align-items: center;
  }
}
@media (max-width: 390px) {
  .topbar-actions:not(.student-detail-toolbar),
  .student-detail-actions,
  .comm-stats-grid {
    grid-template-columns: 1fr;
  }
  .attendance-sheet .att-status {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 961px) {
  .main {
    width: 100%;
    max-width: none;
  }
  .topbar {
    gap: 1.5rem;
  }
  .workflow-submit-row {
    align-items: center;
  }
  .workflow-submit-row .workflow-action-hint {
    max-width: 32rem;
  }
  .communications-page {
    width: min(100%, 1220px);
  }
  .comm-channel-card,
  .comm-section,
  .parent-notice-card {
    box-shadow: var(--shadow-xs);
  }
}
:root {
  color-scheme: light;
  --theme-bg: var(--paper);
  --theme-bg-soft: var(--paper-2);
  --theme-surface: var(--surface);
  --theme-surface-strong: var(--surface-strong);
  --theme-text: var(--ink);
  --theme-text-strong: var(--primary-deep);
  --theme-text-muted: var(--muted);
  --theme-border: var(--line);
  --theme-input-bg: #fff;
  --theme-overlay: rgba(255, 255, 255, 0.78);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b1220;
  --paper-2: #101a2d;
  --ink: #edf3f8;
  --muted: #9fb0c0;
  --surface: rgba(18, 29, 48, 0.88);
  --surface-strong: #152238;
  --line: rgba(148, 163, 184, 0.18);
  --danger: #ef7777;
  --ok: #55c98a;
  --info: #70a8d8;
  --warm: #e1aa54;
  --accent-soft: color-mix(in srgb, var(--accent) 58%, #fff);
  --primary-faint: color-mix(in srgb, var(--primary) 14%, transparent);
  --primary-soft: color-mix(in srgb, var(--primary) 22%, transparent);
  --primary-glass: color-mix(in srgb, var(--primary) 36%, transparent);
  --accent-faint: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-soft-bg: color-mix(in srgb, var(--accent) 22%, transparent);
  --shadow: 0 22px 58px rgba(0, 0, 0, 0.34);
  --shadow-xs: 0 5px 14px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 16px 38px rgba(0, 0, 0, 0.3);
  --focus-ring: 0 0 0 4px color-mix(in srgb, var(--primary) 28%, transparent);
  --danger-bg: color-mix(in srgb, var(--danger) 18%, transparent);
  --ok-bg: color-mix(in srgb, var(--ok) 18%, transparent);
  --info-bg: color-mix(in srgb, var(--info) 18%, transparent);
  --warm-bg: color-mix(in srgb, var(--warm) 18%, transparent);
  --theme-bg: var(--paper);
  --theme-bg-soft: var(--paper-2);
  --theme-surface: var(--surface);
  --theme-surface-strong: var(--surface-strong);
  --theme-text: var(--ink);
  --theme-text-strong: #edf3f8;
  --theme-text-muted: var(--muted);
  --theme-border: var(--line);
  --theme-input-bg: #111c2f;
  --theme-overlay: rgba(11, 18, 32, 0.78);
}
html[data-theme="dark"] body {
  background: var(--paper);
  color: var(--ink);
}
html[data-theme="dark"] .app-shell {
  background:
    radial-gradient(760px 320px at 92% 0%, color-mix(in srgb, var(--brand-accent) 6%, transparent), transparent 55%),
    linear-gradient(180deg, #0b1220 0%, #101827 100%);
}
html[data-theme="dark"] .main,
html[data-theme="dark"] .portal-shell,
html[data-theme="dark"] .portal-main {
  background-color: var(--paper);
}
html[data-theme="dark"] body.page-is-leaving :is(.main, .portal-main, .auth-card) {
  opacity: 1;
  filter: none;
  transform: translateY(2px) scale(0.999);
}
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .portal-top,
html[data-theme="dark"] .portal-bottom-nav,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .menu,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .data-table,
html[data-theme="dark"] .auth-panel,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .workflow-card,
html[data-theme="dark"] .dashboard-task,
html[data-theme="dark"] .copilot-main-advice,
html[data-theme="dark"] .setup-step {
  background-color: var(--surface-strong);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] .auth-panel {
  background: linear-gradient(180deg, #0d1727, #101a2d);
}
html[data-theme="dark"] .dashboard-main .dashboard-copilot-hero {
  background: linear-gradient(145deg, #152238, #121d30) !important;
  border-color: var(--line);
}
html[data-theme="dark"] .dashboard-main .dashboard-copilot-hero .dashboard-section-head h2,
html[data-theme="dark"] .dashboard-main .dashboard-copilot-hero .copilot-main-advice strong {
  color: var(--ink);
}
html[data-theme="dark"] .dashboard-main .dashboard-copilot-hero .dashboard-section-head p,
html[data-theme="dark"] .dashboard-main .dashboard-copilot-hero .copilot-main-advice span,
html[data-theme="dark"] .dashboard-main .dashboard-copilot-hero .copilot-main-advice p {
  color: var(--muted);
}
html[data-theme="dark"] .dashboard-main .dashboard-copilot-hero .copilot-main-advice {
  background: #111c2f;
  border-color: rgba(148, 163, 184, 0.2);
}
html[data-theme="dark"] .dashboard-main .dashboard-copilot-hero .copilot-main-advice:hover {
  background: #17253b;
  border-color: color-mix(in srgb, var(--brand-primary) 34%, rgba(148, 163, 184, 0.2));
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .input,
html[data-theme="dark"] .search-input {
  background-color: var(--theme-input-bg);
  color: var(--ink);
  border-color: rgba(148, 163, 184, 0.22);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #7f91a4;
}
html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td {
  border-color: var(--line);
}
html[data-theme="dark"] th {
  background-color: rgba(255, 255, 255, 0.035);
  color: #dbe5ee;
}
html[data-theme="dark"] tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.035);
}
html[data-theme="dark"] .muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .help,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .topbar p,
html[data-theme="dark"] .panel p {
  color: var(--muted);
}
html[data-theme="dark"] .btn-ghost {
  background-color: rgba(255, 255, 255, 0.035);
  color: var(--theme-text-strong);
  border-color: var(--brand-primary);
}
html[data-theme="dark"] .btn-ghost:hover,
html[data-theme="dark"] .btn-ghost:focus-visible {
  background-color: color-mix(in srgb, var(--brand-primary) 16%, var(--surface-strong));
  border-color: var(--brand-primary);
  color: var(--theme-text-strong);
}
html[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, var(--brand-primary-deep, var(--primary-deep)), var(--brand-primary, var(--primary)));
  box-shadow: 14px 0 42px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .nav-list a.active,
html[data-theme="dark"] .nav-list a[aria-current="page"] {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--brand-accent, var(--accent)) 82%, #fff);
}
html[dir="rtl"][data-theme="dark"] .nav-list a.active,
html[dir="rtl"][data-theme="dark"] .nav-list a[aria-current="page"] {
  box-shadow: inset -3px 0 0 color-mix(in srgb, var(--brand-accent, var(--accent)) 82%, #fff);
}
html[data-theme="dark"] .register-credentials {
  background: color-mix(in srgb, var(--ok) 12%, #101a2d);
  border-color: color-mix(in srgb, var(--ok) 26%, transparent);
}
html[data-theme="dark"] .register-credentials code {
  background: rgba(255, 255, 255, 0.06);
  color: #dce7f1;
}
html[data-theme="dark"] .subnav a {
  background: #18263d;
  border-color: rgba(148, 163, 184, 0.24);
  color: #d7e2ec;
}
html[data-theme="dark"] .subnav a:hover,
html[data-theme="dark"] .subnav a.active,
html[data-theme="dark"] .subnav a[aria-current="page"] {
  background: var(--brand-primary);
  border-color: var(--brand-accent);
  color: var(--brand-on-primary, #fff);
}
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .mini-title,
html[data-theme="dark"] .wa-panel-head .section-title,
html[data-theme="dark"] .wa-status-copy strong,
html[data-theme="dark"] .telegram-status-item strong {
  color: #edf3f8;
}
html[data-theme="dark"] .wa-status-card,
html[data-theme="dark"] .telegram-status-item,
html[data-theme="dark"] .telegram-steps > div {
  background: #18263d;
  border-color: rgba(148, 163, 184, 0.2);
}
html[data-theme="dark"] .wa-status-card.wa-tone-ok {
  background: color-mix(in srgb, var(--ok) 10%, #18263d);
  border-color: color-mix(in srgb, var(--ok) 38%, rgba(148, 163, 184, 0.2));
}
html[data-theme="dark"] .wa-status-card.wa-tone-info {
  background: color-mix(in srgb, var(--info) 10%, #18263d);
  border-color: color-mix(in srgb, var(--info) 38%, rgba(148, 163, 184, 0.2));
}
html[data-theme="dark"] .wa-status-card.wa-tone-warning {
  background: color-mix(in srgb, var(--warm) 11%, #18263d);
  border-color: color-mix(in srgb, var(--warm) 38%, rgba(148, 163, 184, 0.2));
}
html[data-theme="dark"] .wa-status-card.wa-tone-danger {
  background: color-mix(in srgb, var(--danger) 10%, #18263d);
  border-color: color-mix(in srgb, var(--danger) 38%, rgba(148, 163, 184, 0.2));
}
html[data-theme="dark"] .wa-status-icon,
html[data-theme="dark"] .wa-status-card.wa-tone-ok .wa-status-icon,
html[data-theme="dark"] .wa-status-card.wa-tone-info .wa-status-icon,
html[data-theme="dark"] .wa-status-card.wa-tone-warning .wa-status-icon,
html[data-theme="dark"] .wa-status-card.wa-tone-danger .wa-status-icon,
html[data-theme="dark"] .wa-status-card.wa-tone-muted .wa-status-icon {
  background: rgba(255, 255, 255, 0.07);
}
html[data-theme="dark"] .wa-status-copy span,
html[data-theme="dark"] .telegram-status-item span {
  color: #aebdca;
}
html[data-theme="dark"] .wa-connected-grid .telegram-status-item {
  background: #18263d;
}
html.theme-changing .theme-toggle-icon {
  animation: themeIconSwap 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes themeIconSwap {
  0% { transform: rotate(0deg) scale(1); opacity: 1; }
  45% { transform: rotate(90deg) scale(0.72); opacity: 0.2; }
  100% { transform: rotate(180deg) scale(1); opacity: 1; }
}
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] textarea {
  background: #111c2f !important;
  color: #edf3f8 !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  box-shadow: none;
}
html[data-theme="dark"] select {
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) left calc(1rem + 1px) center / 0.44rem 0.44rem no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) left 1rem center / 0.44rem 0.44rem no-repeat,
    #111c2f !important;
  color: #edf3f8 !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  box-shadow: none;
}
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] textarea:disabled,
html[data-theme="dark"] input[readonly],
html[data-theme="dark"] textarea[readonly] {
  background: #162238 !important;
  color: #aab9c7 !important;
  opacity: 1;
}
html[data-theme="dark"] select:disabled {
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) left calc(1rem + 1px) center / 0.44rem 0.44rem no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) left 1rem center / 0.44rem 0.44rem no-repeat,
    #162238 !important;
  color: #aab9c7 !important;
  opacity: 1;
}
html[data-theme="dark"] select option {
  background: #111c2f;
  color: #edf3f8;
}
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill {
  -webkit-text-fill-color: #edf3f8 !important;
  -webkit-box-shadow: 0 0 0 1000px #111c2f inset !important;
  caret-color: #edf3f8;
  transition: background-color 9999s ease-out 0s;
}
html[data-theme="dark"] .field,
html[data-theme="dark"] .search-bar .field,
html[data-theme="dark"] .filter-grid .field,
html[data-theme="dark"] .form-grid .field {
  color: var(--ink);
}
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .info-grid > div,
html[data-theme="dark"] .workflow-action,
html[data-theme="dark"] .workflow-step,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .stack-item,
html[data-theme="dark"] .readiness-item,
html[data-theme="dark"] .search-item,
html[data-theme="dark"] .search-results,
html[data-theme="dark"] .command-item,
html[data-theme="dark"] .command-skeleton-row,
html[data-theme="dark"] .ai-wait-card,
html[data-theme="dark"] .dashboard-insight,
html[data-theme="dark"] .health-item,
html[data-theme="dark"] .quick-action-card {
  background: var(--surface-strong);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .ai-wait-overlay {
  background:
    radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent 34%),
    rgba(3, 9, 18, 0.78);
}
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-ok,
html[data-theme="dark"] .alert-error,
html[data-theme="dark"] .alert-warning {
  color: var(--ink);
}
html[data-theme="dark"] .tree-grade,
html[data-theme="dark"] .check-item,
html[data-theme="dark"] .life-form,
html[data-theme="dark"] .msg-preview {
  background: linear-gradient(160deg, #152238, #111c2f);
  border-color: rgba(148, 163, 184, 0.2);
  color: var(--ink);
  box-shadow: none;
}
html[data-theme="dark"] .msg-preview:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 34%, rgba(148, 163, 184, 0.2));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
html[data-theme="dark"] .check-item:hover,
html[data-theme="dark"] .life-form:focus-within {
  border-color: color-mix(in srgb, var(--brand-primary) 30%, rgba(148, 163, 184, 0.2));
}
html[data-theme="dark"] .att-opt input:not(:checked) + span {
  background: #162238;
  border-color: rgba(148, 163, 184, 0.24);
  color: #c8d4df;
}
html[data-theme="dark"] .att-opt:hover input:not(:checked) + span,
html[data-theme="dark"] .att-opt input:not(:checked):focus-visible + span {
  background: #1a2941;
  border-color: color-mix(in srgb, var(--brand-primary) 34%, rgba(148, 163, 184, 0.24));
}
html[data-theme="dark"] .file-picker-surface {
  background: linear-gradient(180deg, #16243a, #111c2f);
  border-color: color-mix(in srgb, var(--brand-primary) 30%, rgba(148, 163, 184, 0.24));
  color: var(--ink);
}
html[data-theme="dark"] .file-picker-surface:hover,
html[data-theme="dark"] .file-picker-surface:focus-visible {
  background: linear-gradient(180deg, #1a2a43, #142136);
}
html[data-theme="dark"] .file-picker-surface.has-file {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ok) 12%, #16243a), #111c2f);
  border-color: color-mix(in srgb, var(--ok) 34%, rgba(148, 163, 184, 0.2));
}
html[data-theme="dark"] .archive-note {
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand-accent) 14%, transparent), transparent);
  border-color: color-mix(in srgb, var(--brand-accent) 30%, rgba(148, 163, 184, 0.18));
  color: var(--ink);
}
html[data-theme="dark"] .badge-archive {
  background: #1b2635;
  color: #d6c7a6;
  border-color: rgba(214, 199, 166, 0.2);
}
html[data-theme="dark"] .badge-current {
  background: color-mix(in srgb, var(--ok) 15%, transparent);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
}
html[data-theme="dark"] .chip-soft {
  background: color-mix(in srgb, var(--brand-accent) 16%, transparent);
  color: var(--accent-soft);
}
html[data-theme="dark"] .portal-shell {
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent 40%),
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--brand-primary) 12%, transparent), transparent 45%),
    linear-gradient(180deg, #0b1220 0%, #101a2d 100%);
}
html[data-theme="dark"] .portal-top {
  background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
  border-bottom-color: rgba(148, 163, 184, 0.18);
}
html[data-theme="dark"] .portal-card {
  background: linear-gradient(160deg, #152238, #111c2f);
  border-color: rgba(148, 163, 184, 0.2);
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .portal-card:hover,
html[data-theme="dark"] .portal-card:focus-visible {
  background: linear-gradient(160deg, #1a2941, #142136);
  border-color: color-mix(in srgb, var(--brand-primary) 34%, rgba(148, 163, 184, 0.2));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
}
html[data-theme="dark"] .portal-brand strong,
html[data-theme="dark"] .portal-head h1,
html[data-theme="dark"] .portal-card-title {
  color: var(--theme-text-strong);
}
html[data-theme="dark"] .ai-command-overlay {
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent 28%),
    linear-gradient(180deg, rgba(4, 10, 20, 0.72), rgba(4, 10, 20, 0.88));
  backdrop-filter: blur(18px) saturate(1.02);
}
html[data-theme="dark"] .ai-command-status {
  background:
    linear-gradient(180deg, rgba(21, 34, 56, 0.99), rgba(15, 26, 44, 0.98)),
    linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 9%, transparent), color-mix(in srgb, var(--brand-accent) 7%, transparent));
  border-color: rgba(148, 163, 184, 0.22);
  color: var(--ink);
  box-shadow:
    0 38px 110px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .ai-command-status::after {
  border-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .ai-command-close {
  background: #18263d;
  color: var(--ink);
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
}
html[data-theme="dark"] .ai-command-close:hover,
html[data-theme="dark"] .ai-command-close:focus-visible {
  background: #1d2e48;
}
html[data-theme="dark"] .ai-command-step {
  background: #111c2f;
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  color: var(--ink);
}
html[data-theme="dark"] .ai-command-step-active {
  background: color-mix(in srgb, var(--brand-accent) 8%, #111c2f);
  border-color: color-mix(in srgb, var(--brand-accent) 28%, rgba(148, 163, 184, 0.18));
}
html[data-theme="dark"] .ai-command-step-done {
  background: color-mix(in srgb, var(--ok) 10%, #111c2f);
  border-color: color-mix(in srgb, var(--ok) 28%, rgba(148, 163, 184, 0.18));
}
html[data-theme="dark"] .ai-command-card {
  background: linear-gradient(180deg, #152238, #111c2f);
  border-color: rgba(148, 163, 184, 0.2);
  color: var(--ink);
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .ai-command-status-body strong,
html[data-theme="dark"] .ai-command-step strong,
html[data-theme="dark"] .ai-command-card strong,
html[data-theme="dark"] .ai-command-card h2,
html[data-theme="dark"] .ai-command-card h3 {
  color: var(--theme-text-strong);
}
html[data-theme="dark"] .premium-confirm-overlay {
  background: rgba(3, 9, 18, 0.66);
}
html[data-theme="dark"] .premium-confirm-card {
  background: linear-gradient(180deg, #18263d, #111c2f);
  border-color: rgba(148, 163, 184, 0.22);
  color: var(--ink);
  box-shadow: 0 30px 96px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .premium-confirm-close {
  background: #1a2941;
  color: var(--ink);
  border-color: rgba(148, 163, 184, 0.2);
}
html[data-theme="dark"] .premium-confirm-icon {
  background: color-mix(in srgb, var(--warm) 12%, #18263d);
  color: var(--warm);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warm) 20%, transparent);
}
html[data-theme="dark"] .premium-confirm-overlay.is-accepted .premium-confirm-icon {
  background: color-mix(in srgb, var(--ok) 12%, #18263d);
  color: var(--ok);
}
html[data-theme="dark"] .premium-confirm-copy h2 {
  color: var(--theme-text-strong);
}
html[data-theme="dark"] .smart-toast,
html[data-theme="dark"] .completion-toast {
  background: color-mix(in srgb, var(--info) 8%, #18263d);
  color: var(--ink);
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.34);
}
html[data-theme="dark"] .completion-toast {
  background: color-mix(in srgb, var(--ok) 9%, #18263d);
  border-color: color-mix(in srgb, var(--ok) 28%, rgba(148, 163, 184, 0.2));
}
html[data-theme="dark"] .completion-toast-error {
  background: color-mix(in srgb, var(--danger) 10%, #18263d);
  color: #ffd6d6;
  border-color: color-mix(in srgb, var(--danger) 30%, rgba(148, 163, 184, 0.2));
}
html[data-theme="dark"] .smart-toast button {
  background: #111c2f;
  color: var(--ink);
  border-color: rgba(148, 163, 184, 0.2);
}
html[data-theme="dark"] .smart-toast button:hover,
html[data-theme="dark"] .smart-toast button:focus-visible {
  background: #1a2941;
  border-color: color-mix(in srgb, var(--brand-primary) 32%, rgba(148, 163, 184, 0.2));
}
html[data-theme="dark"] .wa-support-dialog-icon {
  background: color-mix(in srgb, var(--brand-accent) 14%, #18263d);
  color: var(--accent-soft);
}
.danger-confirm-panel {
  border-color: #e2b7b7;
  background: linear-gradient(135deg, #fff 0%, #fff7f7 100%);
}
.badge-error {
  background: #fde8e8;
  color: #9b1c1c;
  border: 1px solid rgba(155, 28, 28, 0.16);
}
html[data-theme="dark"] .danger-confirm-panel {
  border-color: color-mix(in srgb, var(--danger) 36%, rgba(148, 163, 184, 0.18));
  background: linear-gradient(145deg, color-mix(in srgb, var(--danger) 8%, #152238), #111c2f);
}
html[data-theme="dark"] .badge-error {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: #ffc7c7;
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}
.sidebar {
  color: var(--brand-on-primary);
}
.sidebar-brand {
  border-bottom-color: color-mix(in srgb, var(--brand-on-primary) 14%, transparent);
}
.sidebar-brand img {
  background: color-mix(in srgb, var(--brand-on-primary) 10%, transparent);
}
.sidebar-brand span {
  color: color-mix(in srgb, var(--brand-on-primary) 72%, transparent);
}
.nav-list a {
  color: color-mix(in srgb, var(--brand-on-primary) 86%, transparent);
}
.nav-list a:hover,
.nav-list a.active,
.nav-list a[aria-current="page"] {
  color: var(--brand-on-primary);
}
.nav-icon {
  background: color-mix(in srgb, var(--brand-on-primary) 9%, transparent);
}
.nav-list a:hover .nav-icon,
.nav-list a.active .nav-icon,
.nav-list a[aria-current="page"] .nav-icon {
  background: color-mix(in srgb, var(--brand-on-primary) 16%, transparent);
}
.btn-primary,
.app-shell .btn-primary,
.portal-shell .btn-primary,
.saas-shell .btn-primary,
.subnav a:hover,
.subnav a.active,
.subnav a[aria-current="page"],
.mobile-bottom-item.active,
.portal-bottom-nav a.active,
.mobile-sheet-action.primary {
  color: var(--brand-on-primary) !important;
}
.mobile-quick-fab {
  color: var(--brand-on-accent);
}
@media (max-width: 960px) {
  html[data-theme="dark"] .students-mobile-card,
  html[data-theme="dark"] .responsive-table tr {
    background: linear-gradient(160deg, #152238, #111c2f);
    border-color: rgba(148, 163, 184, 0.2);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
    color: var(--ink);
  }
  html[data-theme="dark"] .responsive-table td {
    border-bottom-color: rgba(148, 163, 184, 0.16);
  }
  html[data-theme="dark"] .responsive-table td::before {
    color: var(--muted);
  }
  html[data-theme="dark"] .table-wrap:not(.table-wrap-stacked) {
    background: #111c2f;
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: none;
  }
  html[data-theme="dark"] .student-profile .profile-head {
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 18%, transparent), color-mix(in srgb, var(--brand-accent) 10%, transparent)),
      #152238;
    border-bottom-color: rgba(148, 163, 184, 0.18);
  }
  html[data-theme="dark"] .student-profile .info-grid > div,
  html[data-theme="dark"] .student-support-grid .stack-item,
  html[data-theme="dark"] .student-lifecycle-panel .life-form {
    background: #111c2f;
    border-color: rgba(148, 163, 184, 0.18);
    color: var(--ink);
  }
  html[data-theme="dark"] .mobile-bottom-nav,
  html[data-theme="dark"] .portal-bottom-nav,
  html[data-theme="dark"] .mobile-action-sheet {
    background: color-mix(in srgb, var(--surface-strong) 94%, transparent);
    border-color: rgba(148, 163, 184, 0.22);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
  }
  html[data-theme="dark"] .mobile-sheet-backdrop {
    background: rgba(3, 9, 18, 0.62);
  }
  html[data-theme="dark"] .mobile-sheet-close,
  html[data-theme="dark"] .mobile-sheet-action {
    color: var(--ink);
    border-color: rgba(148, 163, 184, 0.18);
  }
  html[data-theme="dark"] .mobile-sheet-close:hover,
  html[data-theme="dark"] .mobile-sheet-close:focus-visible,
  html[data-theme="dark"] .mobile-sheet-action:hover,
  html[data-theme="dark"] .mobile-sheet-action:focus-visible {
    background: color-mix(in srgb, var(--surface-strong) 82%, var(--primary-faint));
  }
  html[data-theme="dark"] .mobile-bottom-item.active,
  html[data-theme="dark"] .portal-bottom-nav a.active,
  html[data-theme="dark"] .mobile-sheet-action.primary {
    background: linear-gradient(180deg, var(--brand-primary-deep), var(--brand-primary));
    color: var(--brand-on-primary);
  }
}
html.theme-view-transition::view-transition-old(root),
html.theme-view-transition::view-transition-new(root) {
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
html.theme-view-transition::view-transition-old(root) {
  animation-name: themeFadeOut;
}
html.theme-view-transition::view-transition-new(root) {
  animation-name: themeFadeIn;
}
@keyframes themeFadeOut {
  from { opacity: 1; filter: brightness(1); }
  to { opacity: 0.15; filter: brightness(0.92); }
}
@keyframes themeFadeIn {
  from { opacity: 0.15; filter: brightness(1.06); transform: scale(0.998); }
  to { opacity: 1; filter: brightness(1); transform: scale(1); }
}
html.theme-changing body,
html.theme-changing .main,
html.theme-changing .portal-shell,
html.theme-changing .panel,
html.theme-changing .card,
html.theme-changing .stat,
html.theme-changing .topbar,
html.theme-changing .sidebar,
html.theme-changing input,
html.theme-changing select,
html.theme-changing textarea,
html.theme-changing .btn,
html.theme-changing .theme-toggle,
html.theme-changing .subnav a,
html.theme-changing .table-wrap,
html.theme-changing .responsive-table tr,
html.theme-changing .students-mobile-card,
html.theme-changing .portal-top,
html.theme-changing .portal-card,
html.theme-changing .portal-bottom-nav,
html.theme-changing .mobile-bottom-nav,
html.theme-changing .mobile-action-sheet,
html.theme-changing .premium-confirm-card,
html.theme-changing .smart-toast,
html.theme-changing .completion-toast {
  transition:
    background-color 300ms cubic-bezier(0.22, 1, 0.36, 1),
    color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.theme-toggle-icon {
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
}
html.theme-changing .theme-toggle-icon,
html.theme-view-transition .theme-toggle-icon {
  transform: rotate(180deg) scale(1.08);
}
.theme-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 90;
}
.theme-only-actions,
.portal-theme-actions {
  margin-inline-start: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}
.portal-theme-actions {
  align-self: center;
}
.mobile-theme-slot {
  display: none;
}
.theme-toggle {
  min-width: 2.65rem;
  height: 2.65rem;
  padding: 0 0.78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 90%, transparent);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  font: inherit;
  transition: transform var(--motion-hover), background var(--motion-hover), border-color var(--motion-hover), box-shadow var(--motion-hover);
  backdrop-filter: blur(14px);
}
.theme-toggle:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
  box-shadow: var(--shadow-sm);
}
.theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--shadow-sm);
}
.theme-toggle-icon {
  font-size: 1.05rem;
  line-height: 1;
}
.theme-toggle-label {
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.theme-switcher-floating {
  position: fixed;
  inset-inline-end: 1rem;
  top: 1rem;
  z-index: 1200;
}
@media (max-width: 960px) {
  .portal-theme-actions {
    width: 100%;
    margin-inline-start: 0;
    align-self: stretch;
    justify-content: flex-start;
  }
  .mobile-theme-slot {
    position: fixed;
    top: calc(0.55rem + env(safe-area-inset-top, 0px));
    inset-inline-end: 0.75rem;
    z-index: 61;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
  }
  .mobile-theme-slot .theme-switcher {
    z-index: 1;
  }
  .mobile-theme-slot .theme-toggle {
    width: 2.35rem;
    min-width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border-radius: 999px;
    color: var(--brand-on-primary, #fff);
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: none;
    backdrop-filter: blur(12px);
  }
  .mobile-theme-slot .theme-toggle:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow: none;
  }
  .mobile-theme-slot .theme-toggle-label {
    display: none;
  }
  .mobile-theme-slot .theme-toggle-icon {
    font-size: 1.05rem;
  }
}
@media (max-width: 720px) {
  .theme-toggle-label { display: none; }
  .theme-toggle { width: 2.65rem; padding: 0; }
}
.wa-connected-account-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.wa-connected-card-copy {
  display: grid;
  gap: 0.42rem;
  min-width: 0;
}
.wa-account-switch-form {
  flex: 0 0 auto;
  margin: 0;
}
.wa-account-switch-btn {
  white-space: nowrap;
}
.wa-connected-state-card {
  align-content: start;
}
.wa-connected-state-note {
  display: block;
  max-width: 62ch;
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.7;
}
.wa-connected-state-note.bad {
  color: var(--danger);
}
@media (max-width: 720px) {
  .wa-connected-account-card {
    align-items: stretch;
    flex-direction: column;
  }
  .wa-account-switch-btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}
:root {
  --ui2-interactive-lift: -1px;
  --ui2-interactive-press-y: 1px;
  --ui2-interactive-press-scale: 0.985;
  --ui2-border-hover: color-mix(in srgb, var(--primary) 22%, var(--line));
  --ui2-surface-hover: color-mix(in srgb, var(--primary) 4%, var(--surface-strong));
  --ui2-row-hover: color-mix(in srgb, var(--primary) 5%, transparent);
  --ui2-control-bg: color-mix(in srgb, var(--surface-strong) 96%, transparent);
  --ui2-disabled-opacity: 0.56;
  --ui2-action-pad-inline: var(--space-5);
}
.u-w-auto { width: auto !important; }
.u-w-full { width: 100% !important; }
.u-span-all { grid-column: 1 / -1 !important; }
.u-self-end { align-self: end !important; }
.u-m-0 { margin: 0 !important; }
.u-mt-2 { margin-top: var(--space-2) !important; }
.u-mt-3 { margin-top: var(--space-3) !important; }
.u-mt-4 { margin-top: var(--space-4) !important; }
.u-mt-5 { margin-top: var(--space-5) !important; }
.u-mb-2 { margin-bottom: var(--space-2) !important; }
.u-mb-3 { margin-bottom: var(--space-3) !important; }
.u-mb-4 { margin-bottom: var(--space-4) !important; }
.u-mb-5 { margin-bottom: var(--space-5) !important; }
.u-block-start-4 { margin: var(--space-4) 0 0 !important; }
.u-action-inline { width: auto !important; padding-inline: var(--ui2-action-pad-inline) !important; }
.u-text-sm { font-size: var(--text-sm) !important; }
.text-caption { font-size: var(--text-caption) !important; line-height: var(--line-height-normal) !important; }
.u-inline { display: inline !important; }
.u-inline-flex { display: inline-flex !important; }
.u-pre-wrap { white-space: pre-wrap !important; }
.u-justify-start { justify-content: flex-start !important; }
.u-align-start { align-items: flex-start !important; }
.u-flex-1 { flex: 1 1 0 !important; }
.u-break-anywhere { overflow-wrap: anywhere !important; word-break: break-all !important; }
.u-list-compact { margin: var(--space-2) 0 0 !important; padding-inline-start: 1.1rem !important; }
.u-badge-list { margin-top: var(--space-2) !important; }
.u-badge-list .badge { margin: 0 var(--space-1) var(--space-1) 0 !important; }
.btn,
button,
[role="button"],
.workflow-action,
.quick-action-card,
.dashboard-task,
.dashboard-insight,
.health-item,
.setup-step,
.stack-item a,
.subnav a {
  -webkit-tap-highlight-color: transparent;
}
.btn,
.workflow-action,
.quick-action-card,
.dashboard-task,
.dashboard-insight,
.health-item,
.setup-step {
  transition:
    transform var(--motion-hover),
    box-shadow var(--motion-hover),
    border-color var(--motion-hover),
    background-color var(--motion-hover),
    color var(--motion-hover),
    opacity var(--motion-hover);
}
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):not([aria-disabled="true"]):hover,
  .workflow-action:hover,
  .quick-action-card:hover,
  .dashboard-task:hover,
  .dashboard-insight:hover,
  .health-item:hover,
  .setup-step:hover {
    transform: translateY(var(--ui2-interactive-lift));
  }
}
.btn:not(:disabled):not([aria-disabled="true"]):active,
.workflow-action:active,
.quick-action-card:active,
.dashboard-task:active,
.dashboard-insight:active,
.health-item:active,
.setup-step:active {
  transform: translateY(var(--ui2-interactive-press-y)) scale(var(--ui2-interactive-press-scale));
  transition-duration: var(--motion-press-duration);
  transition-timing-function: var(--motion-press-ease);
}
.btn:disabled,
.btn[aria-disabled="true"],
button:disabled,
[role="button"][aria-disabled="true"] {
  opacity: var(--ui2-disabled-opacity);
  transform: none !important;
  cursor: not-allowed;
}
:where(a, button, input, textarea, select, summary, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 72%, white);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
  transition:
    outline-color var(--motion-focus),
    box-shadow var(--motion-focus),
    border-color var(--motion-focus);
}
:where(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  background: var(--ui2-control-bg);
  transition:
    border-color var(--motion-focus),
    box-shadow var(--motion-focus),
    background-color var(--motion-focus);
}
:where(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  box-shadow: var(--focus-ring);
}
.panel {
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-2);
}
.card,
.stat,
.workflow-action,
.quick-action-card,
.dashboard-insight {
  border-radius: var(--radius-md);
}
@media (hover: hover) and (pointer: fine) {
  .workflow-action:hover,
  .quick-action-card:hover,
  .dashboard-insight:hover {
    border-color: var(--ui2-border-hover);
    box-shadow: var(--elevation-2);
  }
}
.table-wrap,
.table-container {
  box-shadow: var(--elevation-0);
  border-radius: var(--radius-md);
}
table tbody tr {
  transition: background-color var(--motion-hover);
}
@media (hover: hover) and (pointer: fine) {
  table tbody tr:hover {
    background: var(--ui2-row-hover);
  }
}
table tbody tr:focus-within {
  background: var(--ui2-row-hover);
}
.alert {
  box-shadow: var(--elevation-0);
  border-radius: var(--radius-md);
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
  .btn,
  .workflow-action,
  .quick-action-card,
  .dashboard-task,
  .dashboard-insight,
  .health-item,
  .setup-step,
  table tbody tr,
  :where(input, textarea, select) {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  .btn,
  .workflow-action,
  .quick-action-card,
  .dashboard-task,
  .dashboard-insight,
  .health-item,
  .setup-step {
    transform: none !important;
  }
}
:root {
  --ui2-sidebar-width: 17.4rem;
  --ui2-shell-border: color-mix(in srgb, var(--primary) 12%, transparent);
  --ui2-sidebar-line: rgba(255, 255, 255, 0.12);
  --ui2-nav-hover: rgba(255, 255, 255, 0.075);
  --ui2-nav-active: rgba(255, 255, 255, 0.115);
  --ui2-mobile-chrome-height: 3.6rem;
  --ui2-bottom-nav-offset: 0.62rem;
}
@media (min-width: 961px) {
  .app-shell {
    grid-template-columns: var(--ui2-sidebar-width) minmax(0, 1fr);
    align-items: start;
    min-height: 100dvh;
    background:
      radial-gradient(58rem 24rem at 102% -2%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%),
      linear-gradient(180deg, var(--theme-bg) 0%, var(--theme-bg-soft) 100%);
  }
  .sidebar {
    position: sticky;
    top: 0;
    height: 100dvh;
    min-height: 100dvh;
    padding: 1.05rem 0.86rem 1.15rem;
    gap: 1rem;
    isolation: isolate;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
    background:
      radial-gradient(24rem 15rem at 82% -4%, rgba(255,255,255,0.075), transparent 64%),
      linear-gradient(180deg, color-mix(in srgb, var(--primary-deep) 92%, #000), var(--primary));
    background-repeat: no-repeat;
    background-color: var(--primary);
    box-shadow: 10px 0 32px color-mix(in srgb, var(--primary-deep) 10%, transparent);
  }
  html[dir="rtl"] .sidebar {
    box-shadow: -10px 0 32px color-mix(in srgb, var(--primary-deep) 10%, transparent);
  }
  .sidebar::before {
    display: none;
  }
  .sidebar-brand {
    min-height: 4.25rem;
    gap: 0.7rem;
    padding: 0.35rem 0.45rem 0.9rem;
    border-bottom-color: var(--ui2-sidebar-line);
  }
  .sidebar-brand img {
    width: 48px;
    height: 48px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  }
  .sidebar-brand strong {
    font-size: 1.08rem;
    letter-spacing: 0;
  }
  .year-chip,
  .global-search,
  .command-trigger {
    margin-inline: 0.1rem;
  }
  .nav-list {
    position: relative;
    gap: 0.22rem;
    padding-block: 0.08rem 0.5rem;
  }
  .nav-list li {
    position: relative;
    z-index: 1;
  }
  .nav-list a {
    position: relative;
    z-index: 2;
    min-height: 2.82rem;
    padding: 0.66rem 0.78rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    box-shadow: none !important;
    color: rgba(255,255,255,0.79);
    transition:
      color var(--motion-hover),
      background-color var(--motion-hover),
      border-color var(--motion-hover),
      transform var(--motion-press);
  }
  .nav-list a:hover,
  .nav-list a:focus-visible {
    color: #fff;
    background: var(--ui2-nav-hover);
    border-color: rgba(255,255,255,0.08);
  }
  .nav-list a.active,
  .nav-list a[aria-current="page"] {
    color: #fff;
    background: var(--ui2-nav-active);
    border-color: rgba(255,255,255,0.1);
    font-weight:var(--font-weight-semibold, 600);
  }
  html.ui2-shell-ready .nav-list a.active,
  html.ui2-shell-ready .nav-list a[aria-current="page"] {
    background: transparent;
    border-color: transparent;
  }
  .nav-list a.active::after,
  .nav-list a[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset-inline-start: -0.33rem;
    top: 50%;
    width: 3px;
    height: 1.45rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent) 88%, #fff);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
    transform: translateY(-50%);
  }
  .nav-icon {
    width: 1.78rem;
    height: 1.78rem;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.065);
    transition:
      background-color var(--motion-hover),
      transform var(--motion-hover),
      box-shadow var(--motion-hover);
  }
  .nav-list a:hover .nav-icon,
  .nav-list a:focus-visible .nav-icon,
  .nav-list a.active .nav-icon,
  .nav-list a[aria-current="page"] .nav-icon {
    background: rgba(255,255,255,0.13);
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  }
  .ui2-nav-glide {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 0;
    height: 2.82rem;
    border-radius: var(--radius-md);
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.055), rgba(255,255,255,0.115));
    border: 1px solid rgba(255,255,255,0.085);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
    transform: translateY(0);
    transition:
      transform var(--motion-soft) var(--ease-emphasized),
      height var(--motion-control) var(--ease-standard),
      opacity var(--motion-micro) var(--ease-standard);
  }
  html[dir="rtl"] .ui2-nav-glide {
    background: linear-gradient(270deg, rgba(255,255,255,0.055), rgba(255,255,255,0.115));
  }
  .ui2-nav-glide.is-visible { opacity: 1; }
  .main {
    min-width: 0;
    padding: clamp(1.3rem, 2.55vw, 2.15rem);
  }
  .topbar {
    min-height: 4.35rem;
    margin-bottom: 1.45rem;
    padding-block: 0.15rem 0.88rem;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
    animation: none;
  }
  .topbar h1 {
    line-height: 1.2;
    letter-spacing:normal;
  }
  .topbar p {
    margin-top: 0.28rem;
    max-width: 68ch;
  }
}
.ui2-nav-toggle-icon {
  width: 1.15rem;
  height: 1.15rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}
.ui2-nav-toggle-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
@media (max-width: 960px) {
  .app-shell::before {
    height: calc(var(--ui2-mobile-chrome-height) + env(safe-area-inset-top, 0px));
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--primary-deep) 96%, #000), var(--primary));
    box-shadow: 0 8px 22px color-mix(in srgb, var(--primary-deep) 15%, transparent);
  }
  .main {
    padding-top: calc(var(--ui2-mobile-chrome-height) + 0.78rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(6.9rem + env(safe-area-inset-bottom, 0px));
  }
  .nav-toggle {
    gap: 0.42rem;
    top: calc(0.55rem + env(safe-area-inset-top, 0px));
    min-height: 2.45rem;
    padding: 0.45rem 0.78rem;
    color: #fff;
    background: rgba(255,255,255,0.11);
    border-color: rgba(255,255,255,0.19);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
    transition:
      background-color var(--motion-hover),
      border-color var(--motion-hover),
      transform var(--motion-press);
  }
  .nav-toggle:active { transform: translateY(1px) scale(0.985); }
  .sidebar {
    inset-block: 0;
    inset-inline-start: 0;
    width: min(90vw, 21rem);
    max-width: 21rem;
    padding: calc(1rem + env(safe-area-inset-top, 0px)) 0.9rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    gap: 1rem;
    border-start-end-radius: 1.45rem;
    border-end-end-radius: 1.45rem;
    border-inline-end: 1px solid rgba(255,255,255,0.1);
    background:
      radial-gradient(24rem 15rem at 82% -4%, rgba(255,255,255,0.075), transparent 64%),
      linear-gradient(180deg, color-mix(in srgb, var(--primary-deep) 92%, #000), var(--primary));
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.24) transparent;
    transform: translateX(105%);
    box-shadow: -14px 0 42px rgba(7,24,19,0.26);
    transition: transform var(--motion-modal-in) var(--ease-emphasized);
  }
  .sidebar::before {
    display: none;
  }
  .sidebar::-webkit-scrollbar {
    width: 0.38rem;
  }
  .sidebar::-webkit-scrollbar-track {
    background: transparent;
  }
  .sidebar::-webkit-scrollbar-thumb {
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.24);
  }
  html[dir="ltr"] .sidebar {
    transform: translateX(-105%);
    box-shadow: 14px 0 42px rgba(7,24,19,0.26);
  }
  .app-shell.nav-open .sidebar,
  html[dir="ltr"] .app-shell.nav-open .sidebar {
    transform: translateX(0);
  }
  .nav-backdrop {
    background: rgba(7,24,19,0.36);
    transition: opacity var(--motion-modal-out) var(--ease-standard);
  }
  .app-shell.nav-open .nav-backdrop {
    backdrop-filter: none;
  }
  .sidebar-brand {
    padding-bottom: 0.82rem;
  }
  .nav-list {
    gap: 0.22rem;
  }
  .nav-list a {
    min-height: 3rem;
    padding: 0.72rem 0.78rem;
    border-radius: var(--radius-md);
  }
  .mobile-bottom-nav {
    inset-inline: 0.7rem;
    bottom: calc(var(--ui2-bottom-nav-offset) + env(safe-area-inset-bottom, 0px));
    z-index: 70;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: none;
    gap: 0.2rem;
    padding: 0.38rem;
    border-radius: var(--radius-lg);
    overflow: visible;
    background: color-mix(in srgb, var(--theme-surface-strong) 96%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 13%, var(--theme-border));
    box-shadow: var(--elevation-3);
    backdrop-filter: blur(8px) saturate(1.02);
    isolation: isolate;
  }
  .mobile-bottom-item {
    z-index: 2;
    min-height: 3.35rem;
    padding: 0.28rem 0.12rem;
    border-radius: var(--radius-md);
    font-size:var(--text-caption);
    font-weight:var(--font-weight-semibold, 600);
    color: var(--muted);
    background: transparent;
    box-shadow: none;
  }
  .mobile-bottom-item::after { display: none; }
  .mobile-bottom-item.active,
  .mobile-bottom-item[aria-current="page"] {
    color: var(--theme-text-strong);
    background: color-mix(in srgb, var(--primary) 7%, transparent);
    box-shadow: none;
  }
  html.ui2-shell-ready .mobile-bottom-item.active,
  html.ui2-shell-ready .mobile-bottom-item[aria-current="page"] {
    background: transparent;
  }
  .mobile-bottom-icon {
    width: 1.62rem;
    height: 1.62rem;
    background: transparent;
  }
  .mobile-bottom-item.active .mobile-bottom-icon,
  .mobile-bottom-item[aria-current="page"] .mobile-bottom-icon {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    transform: translateY(-1px);
  }
  .ui2-mobile-glide {
    position: absolute;
    left: 0;
    top: 0.38rem;
    z-index: 1;
    height: calc(100% - 0.76rem);
    width: 3rem;
    border-radius: var(--radius-md);
    pointer-events: none;
    opacity: 0;
    background: color-mix(in srgb, var(--primary) 7%, var(--theme-surface-strong));
    border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
    box-shadow: var(--elevation-1);
    transform: translateX(0);
    transition:
      transform var(--motion-soft) var(--ease-emphasized),
      width var(--motion-control) var(--ease-standard),
      opacity var(--motion-micro) var(--ease-standard);
  }
  .ui2-mobile-glide.is-visible { opacity: 1; }
  .mobile-bottom-action {
    color: var(--brand-on-accent);
    transform: translateY(-0.42rem);
  }
  .mobile-bottom-action .mobile-bottom-icon {
    width: 2.45rem;
    height: 2.45rem;
    color: var(--brand-on-accent);
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #000));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 24%, transparent);
  }
  .mobile-bottom-action:active {
    transform: translateY(calc(-0.42rem + 1px)) scale(0.985);
  }
  .mobile-bottom-action[aria-expanded="true"] .mobile-bottom-icon {
    transform: rotate(45deg);
  }
  .mobile-bottom-more {
    color: var(--muted);
  }
  .mobile-action-sheet {
    inset-inline: 0.7rem;
    bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    padding: 0.65rem;
    border-radius: var(--radius-lg);
    background: var(--theme-surface-strong);
    border-color: color-mix(in srgb, var(--primary) 12%, var(--theme-border));
    box-shadow: var(--elevation-4);
  }
  .mobile-sheet-action {
    font: inherit;
    text-align: start;
  }
  button.mobile-sheet-action {
    width: 100%;
    border: 0;
    cursor: pointer;
  }
  .mobile-quick-fab { display: none !important; }
}
@media (max-width: 390px) {
  .mobile-bottom-nav {
    inset-inline: 0.5rem;
    gap: 0.08rem;
    padding-inline: 0.28rem;
  }
  .mobile-bottom-item {
    min-height: 3.25rem;
    font-size:var(--text-caption);
  }
  .mobile-bottom-icon {
    width: 1.52rem;
    height: 1.52rem;
  }
  .mobile-bottom-action .mobile-bottom-icon {
    width: 2.3rem;
    height: 2.3rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui2-nav-glide,
  .ui2-mobile-glide,
  .sidebar,
  .mobile-bottom-item,
  .mobile-bottom-action .mobile-bottom-icon {
    transition-duration: 0.01ms !important;
  }
}
:root {
  --ui2-control-h: var(--control-height, 2.8rem);
  --ui2-control-h-sm: var(--control-height-sm, 2.25rem);
  --ui2-component-radius: var(--radius-md, 14px);
  --ui2-component-radius-sm: var(--radius-sm, 10px);
  --ui2-component-border: color-mix(in srgb, var(--primary) 17%, var(--line));
  --ui2-component-border-hover: color-mix(in srgb, var(--primary) 32%, var(--line));
  --ui2-component-surface: color-mix(in srgb, var(--surface-strong) 86%, transparent);
  --ui2-component-surface-soft: color-mix(in srgb, var(--surface) 76%, transparent);
  --ui2-component-shadow: var(--elevation-1, var(--shadow-xs));
  --ui2-component-shadow-hover: var(--elevation-2, var(--shadow-sm));
  --ui2-choice-size: 1.16rem;
  --ui2-choice-gap: 0.58rem;
}
.btn,
.btn-sm,
button.btn,
a.btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ui2-control-h);
  border-radius: var(--ui2-component-radius);
  padding: 0.68rem 1.08rem;
  gap: 0.48rem;
  border: 1px solid transparent;
  font-size: var(--text-button);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: normal;
  text-decoration: none;
  isolation: isolate;
  transition:
    transform var(--motion-press),
    background-color var(--motion-hover),
    border-color var(--motion-hover),
    color var(--motion-hover),
    box-shadow var(--motion-hover),
    opacity var(--motion-hover);
}
.btn-sm {
  min-height: var(--ui2-control-h-sm);
  padding: 0.42rem 0.76rem;
  border-radius: var(--ui2-component-radius-sm);
  font-size: var(--text-sm);
}
.btn-primary,
.app-shell .btn-primary,
.portal-shell .btn-primary,
.saas-shell .btn-primary {
  color: var(--brand-on-primary, #fff);
  background: linear-gradient(145deg, var(--primary), var(--primary-deep));
  border-color: color-mix(in srgb, var(--primary-deep) 56%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 20%, transparent) inset,
    var(--elevation-2);
}
.btn-primary:where(:hover, :focus-visible) {
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 24%, transparent) inset,
    var(--elevation-3);
}
.btn-ghost {
  color: var(--theme-text-strong);
  background: var(--ui2-component-surface-soft);
  border-color: var(--ui2-component-border);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 35%, transparent) inset;
}
.btn-ghost:where(:hover, :focus-visible) {
  color: var(--theme-text-strong);
  background: color-mix(in srgb, var(--primary-faint) 72%, var(--surface));
  border-color: var(--ui2-component-border-hover);
  box-shadow: var(--ui2-component-shadow);
}
.btn-soft {
  color: var(--theme-text-strong);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 15%, var(--line));
}
.btn-soft:where(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--primary) 13%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 27%, var(--line));
  box-shadow: var(--ui2-component-shadow);
}
.btn-danger,
.ui2-confirm-danger [data-confirm-accept] {
  color: #fff;
  background: linear-gradient(145deg, var(--danger), color-mix(in srgb, var(--danger) 72%, #000));
  border-color: color-mix(in srgb, var(--danger) 56%, transparent);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--danger) 18%, transparent);
}
.btn:where(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(-1px);
}
.btn:active:not(:disabled):not([aria-disabled="true"]),
.btn.is-pressing:not(:disabled) {
  transform: translateY(1px) scale(0.985);
}
.btn:focus-visible,
.btn-sm:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--ui2-component-shadow);
}
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.68);
  transform: none !important;
  box-shadow: none;
}
.btn-icon {
  width: 1.12rem;
  height: 1.12rem;
  flex: 0 0 1.12rem;
  transition: transform var(--motion-base) var(--ease-emphasized);
}
.btn:where(:hover, :focus-visible) .btn-icon {
  transform: translateY(-0.5px);
}
.btn.is-busy,
button.is-busy,
input[type="submit"].is-busy {
  cursor: progress;
  opacity: 0.88;
}
.field {
  gap: 0.42rem;
  padding: 0.15rem;
  border-radius: calc(var(--ui2-component-radius) + 3px);
}
.field > label,
.field > .field-label {
  font-size: var(--text-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--theme-text-strong);
  transition: color var(--motion-focus);
}
.field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
:is(input, select, textarea).input {
  min-height: var(--ui2-control-h);
  border: 1px solid var(--ui2-component-border);
  border-radius: var(--ui2-component-radius);
  color: var(--ink);
  font-size: var(--text-body);
  line-height: var(--line-height-normal);
  letter-spacing: normal;
  background-color: var(--theme-input-bg, var(--surface-strong));
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 45%, transparent) inset;
  transition:
    border-color var(--motion-focus),
    box-shadow var(--motion-focus),
    background-color var(--motion-focus),
    color var(--motion-focus);
}
.field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):not(:disabled):hover {
  border-color: var(--ui2-component-border-hover);
}
.field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus,
.field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
  background-color: color-mix(in srgb, var(--theme-input-bg, var(--surface-strong)) 94%, var(--primary-faint));
}
.field.field-is-active > label {
  color: var(--primary);
}
.field > label:has(> input[type="checkbox"]),
.field > label:has(> input[type="radio"]) {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: var(--ui2-choice-gap);
  margin-bottom: 0;
  padding: .56rem .7rem;
  border: 1px solid var(--ui2-component-border);
  border-radius: var(--ui2-component-radius-sm);
  color: var(--ink);
  background: var(--ui2-component-surface-soft);
  cursor: pointer;
  transition: border-color var(--motion-hover), background-color var(--motion-hover), box-shadow var(--motion-hover);
}
.field > label:has(> input[type="checkbox"]):hover,
.field > label:has(> input[type="radio"]):hover {
  border-color: var(--ui2-component-border-hover);
  background: color-mix(in srgb, var(--primary) 5%, var(--surface-strong));
}
.field > label:has(> input:checked) {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-strong));
}
.field > label > input[type="checkbox"],
.field > label > input[type="radio"] {
  width: var(--ui2-choice-size) !important;
  min-width: var(--ui2-choice-size) !important;
  height: var(--ui2-choice-size) !important;
  min-height: var(--ui2-choice-size) !important;
  flex: 0 0 var(--ui2-choice-size);
  margin: 0 !important;
  padding: 0 !important;
  accent-color: var(--primary);
  box-shadow: none !important;
  cursor: pointer;
}
.field > label > input[type="checkbox"]:focus-visible,
.field > label > input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring) !important;
}
.field-help,
.field small:not(.ui2-field-error) {
  color: var(--muted);
  font-size: var(--text-caption);
  line-height: var(--line-height-normal);
}
.ui2-field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin-top: 0.05rem;
  color: var(--danger);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  animation: ui2FieldErrorIn var(--motion-base) var(--ease-emphasized) both;
}
.ui2-field-error::before {
  content: "!";
  width: 1.05rem;
  height: 1.05rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  margin-top: 0.08rem;
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--danger);
  font-size:var(--text-caption);
  font-weight:var(--font-weight-bold, 700);
}
.field-has-error {
  background: color-mix(in srgb, var(--danger) 4%, transparent);
}
.field-has-error > label {
  color: color-mix(in srgb, var(--danger) 84%, var(--ink));
}
.field-has-error :is(input, select, textarea),
:is(input, select, textarea)[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--danger) 62%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 10%, transparent);
}
@keyframes ui2FieldErrorIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}
.subnav {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.32rem;
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: calc(var(--radius-lg) - 2px);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--elevation-0);
}
.subnav a {
  position: relative;
  min-height: 2.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--muted);
  background: transparent;
  font-size: 0.88rem;
  font-weight:var(--font-weight-semibold, 600);
  white-space: nowrap;
  box-shadow: none;
  transition:
    color var(--motion-base) var(--ease-standard),
    background-color var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    transform var(--motion-press),
    box-shadow var(--motion-base) var(--ease-standard);
}
.subnav a:where(:hover, :focus-visible) {
  color: var(--theme-text-strong);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 12%, transparent);
  transform: translateY(-1px);
  box-shadow: none;
  outline: none;
}
.subnav a.active,
.subnav a[aria-current="page"] {
  color: var(--brand-on-primary, #fff);
  background: linear-gradient(145deg, var(--primary), var(--primary-deep));
  border-color: color-mix(in srgb, var(--primary-deep) 42%, transparent);
  box-shadow: var(--elevation-1);
}
.chip,
.badge {
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  line-height: 1.25;
  font-weight:var(--font-weight-semibold, 600);
}
.chip {
  min-height: 2rem;
  padding: 0.34rem 0.68rem;
  color: var(--theme-text-strong);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 12%, transparent);
  box-shadow: var(--elevation-0);
}
a.chip:where(:hover, :focus-visible),
button.chip:where(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--primary) 13%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 23%, transparent);
  box-shadow: var(--elevation-1);
  outline: none;
}
.badge {
  min-height: 1.65rem;
  padding: 0.25rem 0.58rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  border-color: color-mix(in srgb, var(--muted) 14%, transparent);
}
.badge-ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 20%, transparent); }
.badge-warning, .badge-warm { background: color-mix(in srgb, var(--warm) 12%, transparent); color: var(--warm); border-color: color-mix(in srgb, var(--warm) 20%, transparent); }
.badge-error, .badge-danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 20%, transparent); }
.badge-info { background: color-mix(in srgb, var(--info) 12%, transparent); color: var(--info); border-color: color-mix(in srgb, var(--info) 20%, transparent); }
.badge-archive { background: color-mix(in srgb, var(--muted) 10%, transparent); color: var(--muted); border-color: color-mix(in srgb, var(--muted) 16%, transparent); }
.alert[hidden],
.ui2-toast[hidden],
.completion-toast[hidden] {
  display: none !important;
}
.alert {
  position: relative;
  min-height: 3.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.72rem;
  padding: 0.82rem 3.15rem 0.82rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--ui2-component-surface);
  color: var(--ink);
  box-shadow: var(--elevation-0);
  line-height: 1.65;
}
html[dir="rtl"] .alert {
  padding: 0.82rem 0.95rem 0.82rem 3.15rem;
}
.ui2-alert-icon {
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 1.8rem;
  display: inline-grid;
  place-items: center;
  margin-top: 0.05rem;
  border-radius: 0.58rem;
  font-weight:var(--font-weight-bold, 700);
  font-size: 0.82rem;
  background: color-mix(in srgb, currentColor 11%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.alert-ok { color: color-mix(in srgb, var(--ok) 88%, var(--ink)); background: color-mix(in srgb, var(--ok-bg) 80%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 22%, var(--line)); }
.alert-info { color: color-mix(in srgb, var(--info) 88%, var(--ink)); background: color-mix(in srgb, var(--info-bg) 80%, var(--surface)); border-color: color-mix(in srgb, var(--info) 22%, var(--line)); }
.alert-warning { color: color-mix(in srgb, var(--warm) 86%, var(--ink)); background: color-mix(in srgb, var(--warm-bg) 80%, var(--surface)); border-color: color-mix(in srgb, var(--warm) 24%, var(--line)); }
.alert-error { color: color-mix(in srgb, var(--danger) 88%, var(--ink)); background: color-mix(in srgb, var(--danger-bg) 82%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 24%, var(--line)); }
.alert-dismiss {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0.68rem;
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: var(--radius-pill);
  color: currentColor;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  transform: translateY(-50%);
  opacity: 0.66;
}
.alert-dismiss:hover,
.alert-dismiss:focus-visible,
.alert-dismiss:active {
  transform: translateY(-50%);
  opacity: 1;
  background: color-mix(in srgb, currentColor 8%, var(--surface));
  outline: none;
}
.ui2-toast-region {
  position: fixed;
  inset-inline-end: 1rem;
  inset-block-end: 1rem;
  z-index: 1450;
  width: min(26rem, calc(100vw - 2rem));
  display: grid;
  gap: 0.58rem;
  pointer-events: none;
}
.ui2-toast,
.completion-toast {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.78rem 0.88rem;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: var(--radius-md);
  color: var(--ink);
  background: color-mix(in srgb, var(--surface-strong) 94%, transparent);
  box-shadow: var(--elevation-4);
  backdrop-filter: blur(16px) saturate(1.03);
}
.ui2-toast {
  pointer-events: auto;
  opacity: 0;
  transform: translateY(9px) scale(0.985);
  transition: opacity var(--motion-toast-duration) var(--motion-toast-ease), transform var(--motion-toast-duration) var(--motion-toast-ease);
}
.ui2-toast.show { opacity: 1; transform: translateY(0) scale(1); }
.ui2-toast.is-leaving { opacity: 0; transform: translateY(5px) scale(0.99); }
.ui2-toast-icon {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-grid;
  place-items: center;
  border-radius: 0.56rem;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  font-size: 0.82rem;
  font-weight:var(--font-weight-bold, 700);
}
.ui2-toast-ok { border-color: color-mix(in srgb, var(--ok) 22%, var(--line)); }
.ui2-toast-ok .ui2-toast-icon { color: var(--ok); background: color-mix(in srgb, var(--ok) 11%, transparent); }
.ui2-toast-error { border-color: color-mix(in srgb, var(--danger) 23%, var(--line)); }
.ui2-toast-error .ui2-toast-icon { color: var(--danger); background: color-mix(in srgb, var(--danger) 11%, transparent); }
.ui2-toast-warning { border-color: color-mix(in srgb, var(--warm) 23%, var(--line)); }
.ui2-toast-warning .ui2-toast-icon { color: var(--warm); background: color-mix(in srgb, var(--warm) 11%, transparent); }
.ui2-toast-info { border-color: color-mix(in srgb, var(--info) 23%, var(--line)); }
.ui2-toast-info .ui2-toast-icon { color: var(--info); background: color-mix(in srgb, var(--info) 11%, transparent); }
.ui2-toast-close {
  width: 1.85rem;
  height: 1.85rem;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}
.ui2-toast-close:where(:hover, :focus-visible) { color: var(--ink); background: color-mix(in srgb, var(--primary) 8%, transparent); outline: none; }
.premium-confirm-overlay {
  background: color-mix(in srgb, var(--primary-deep) 32%, rgba(7, 24, 19, 0.48));
  backdrop-filter: blur(8px) saturate(1.02);
}
.premium-confirm-card {
  width: min(100%, 31rem);
  gap: 1.05rem;
  padding: clamp(1.15rem, 3vw, 1.55rem);
  border-radius: calc(var(--radius-lg) + 2px);
  background: var(--surface-strong);
  border-color: color-mix(in srgb, var(--primary) 14%, var(--line));
  box-shadow: var(--elevation-4);
}
.premium-confirm-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
}
.premium-confirm-copy h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); }
.premium-confirm-copy p { color: var(--muted); }
.premium-confirm-actions { gap: 0.55rem; }
.premium-confirm-actions .btn { min-width: 7.6rem; }
.premium-confirm-overlay.ui2-confirm-danger .premium-confirm-icon {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger-bg) 84%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 20%, transparent);
}
.premium-confirm-overlay.ui2-confirm-danger .premium-confirm-icon::before {
  background: var(--danger);
}
.ui2-busy,
.btn.is-busy,
button.is-busy,
input[type="submit"].is-busy {
  position: relative;
  pointer-events: none;
  cursor: progress;
}
.ui2-busy-spinner,
.ui2-inline-spinner,
.btn.is-busy::before,
button.is-busy::before,
input[type="submit"].is-busy::before {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
  border-block-start-color: currentColor;
  border-radius: 50%;
  animation: ui2Spin .72s linear infinite;
}
.btn.is-busy::before,
button.is-busy::before,
input[type="submit"].is-busy::before {
  content: "";
  display: inline-block;
}
.ui2-busy-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes ui2Spin { to { transform: rotate(360deg); } }
.ui2-surface-loading {
  position: relative !important;
  min-height: 8.5rem;
  isolation: isolate;
  overflow: hidden;
}
.ui2-surface-loading > :not(.ui2-surface-loader) {
  opacity: .28;
  filter: saturate(.72);
  pointer-events: none;
  user-select: none;
  transition: opacity var(--motion-soft) var(--ease-standard), filter var(--motion-soft) var(--ease-standard);
}
.ui2-surface-loader {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  align-content: center;
  gap: 1rem;
  min-height: 8.5rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  color: var(--theme-text-strong);
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  backdrop-filter: blur(5px) saturate(.96);
  animation: ui2SurfaceLoaderIn var(--motion-base) var(--ease-emphasized) both;
}
.ui2-surface-loader-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  text-align: start;
}
.ui2-surface-loader-status > span:last-child {
  display: grid;
  gap: .12rem;
}
.ui2-surface-loader-status strong {
  color: var(--theme-text-strong);
  font-size: .94rem;
}
.ui2-surface-loader-status small {
  color: var(--muted);
  font-size: var(--text-caption);
}
.ui2-skeleton-stack {
  width: min(100%, 42rem);
  display: grid;
  gap: .62rem;
  margin-inline: auto;
}
.ui2-skeleton-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1.4fr) repeat(3, minmax(4rem, .65fr));
  gap: .65rem;
}
.ui2-skeleton-row > span {
  min-height: .88rem;
}
@keyframes ui2SurfaceLoaderIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ui2-confirm-overlay {
  position: fixed;
  z-index: 1600;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.ui2-confirm-overlay[hidden] { display: none !important; }
.ui2-confirm-overlay .premium-confirm-card {
  animation: ui2ConfirmIn var(--motion-modal-in-duration) var(--motion-modal-in-ease) both;
}
.ui2-confirm-overlay.is-closing {
  animation: ui2OverlayOut var(--motion-modal-out-duration) var(--motion-modal-out-ease) both;
}
.ui2-confirm-overlay.is-closing .premium-confirm-card {
  animation: ui2ConfirmOut var(--motion-modal-out-duration) var(--motion-modal-out-ease) both;
}
.ui2-confirm-overlay[data-tone="ok"] .premium-confirm-icon {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok-bg) 84%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 22%, transparent);
}
@keyframes ui2ConfirmIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ui2ConfirmOut {
  to { opacity: 0; transform: translateY(9px) scale(.985); }
}
@keyframes ui2OverlayOut { to { opacity: 0; } }
body.ui2-page-entering:not(.ui2-page-entered) :is(
  .app-shell .main,
  .portal-main,
  .platform-console-main,
  .account-hub-main,
  .account-workspace-main
) {
  opacity: 0;
  transform: translateY(8px);
}
body.ui2-page-entered :is(
  .app-shell .main,
  .portal-main,
  .platform-console-main,
  .account-hub-main,
  .account-workspace-main
) {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--motion-page-enter), transform var(--motion-page-enter);
}
body.ui2-page-leaving :is(
  .app-shell .main,
  .portal-main,
  .platform-console-main,
  .account-hub-main,
  .account-workspace-main
) {
  opacity: .42;
  transform: translateY(-5px);
  pointer-events: none;
  transition: opacity var(--motion-exit) var(--ease-standard), transform var(--motion-exit) var(--ease-standard);
}
.ui2-toast-copy {
  min-width: 0;
  display: grid;
  gap: .08rem;
}
.ui2-toast-copy strong {
  color: var(--theme-text-strong);
  font-size: .88rem;
}
.ui2-toast-copy span {
  overflow-wrap: anywhere;
}
.ui2-toast-ok .ui2-toast-icon {
  animation: ui2SuccessPop var(--motion-pop) var(--ease-emphasized) both;
}
.ui2-toast-error .ui2-toast-icon {
  animation: ui2ErrorNudge var(--motion-soft) var(--ease-standard) both;
}
@keyframes ui2SuccessPop {
  0% { transform: scale(.55); }
  58% { transform: scale(1.14); }
  100% { transform: scale(1); }
}
@keyframes ui2ErrorNudge {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(2px); }
  70% { transform: translateX(-2px); }
}
details.polished-details,
details.ui2-details,
details.telegram-advanced,
details.comm-advanced {
  border-radius: var(--radius-md);
}
.polished-details > summary,
.ui2-details > summary,
.telegram-advanced > summary,
.comm-advanced > summary {
  min-height: 2.7rem;
  padding: 0.62rem 0.72rem;
  border-radius: var(--radius-md);
  color: var(--theme-text-strong);
  cursor: pointer;
  font-weight:var(--font-weight-semibold, 600);
  user-select: none;
}
.polished-details > summary:where(:hover, :focus-visible),
.ui2-details > summary:where(:hover, :focus-visible),
.telegram-advanced > summary:where(:hover, :focus-visible),
.comm-advanced > summary:where(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  outline: none;
}
.mobile-sheet-action {
  min-height: 3rem;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--primary) 11%, var(--line));
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  font-weight:var(--font-weight-semibold, 600);
  transition:
    transform var(--motion-press),
    background-color var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}
.mobile-sheet-action:where(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 22%, var(--line));
  box-shadow: var(--elevation-1);
  outline: none;
}
.mobile-sheet-action.primary {
  color: var(--brand-on-primary, #fff);
  background: linear-gradient(145deg, var(--primary), var(--primary-deep));
  border-color: transparent;
}
.skeleton,
.ui2-skeleton {
  position: relative;
  overflow: hidden;
  min-height: 1rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 5%, transparent);
}
.skeleton::after,
.ui2-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 15%, color-mix(in srgb, #fff 55%, transparent) 50%, transparent 85%);
  transform: translateX(110%);
  animation: ui2SkeletonSweep 1.45s var(--ease-linear) infinite;
}
.ui2-skeleton-text { height: 0.9rem; }
.ui2-skeleton-title { height: 1.35rem; width: min(75%, 18rem); }
.ui2-skeleton-avatar { width: 2.8rem; height: 2.8rem; border-radius: var(--radius-pill); }
.ui2-skeleton-button { width: 7rem; height: var(--ui2-control-h); }
@keyframes ui2SkeletonSweep { to { transform: translateX(-110%); } }
.empty-state,
.empty-state-foundation,
.empty-state-polished {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.7rem;
  padding: clamp(1.35rem, 4vw, 2.2rem);
  border: 1px dashed color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 44%),
    color-mix(in srgb, var(--surface-strong) 88%, transparent);
  box-shadow: var(--elevation-0);
}
.empty-visual {
  width: 3.4rem;
  height: 3.4rem;
  display: inline-grid;
  place-items: center;
  border-radius: 1.05rem;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 13%, transparent);
  box-shadow: var(--elevation-1);
}
.empty-state-title,
.empty-state h3 {
  margin: 0;
  color: var(--theme-text-strong);
  font-family: var(--font-display);
}
.empty-state-copy,
.empty-state > p {
  max-width: 36rem;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}
.empty-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.25rem;
}
.ui2-message-details {
  align-items: flex-start;
  margin-bottom: 0.65rem;
}
.ui2-message-summary { cursor: pointer; list-style: none; flex: 1; width: 100%; }
.ui2-message-meta { font-size: 0.85rem; }
.ui2-message-body { flex: 1; width: 100%; margin-top: 0.75rem; }
.ui2-message-reply-label { margin-top: 0.5rem; font-weight:var(--font-weight-semibold, 600); }
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-soft,
html[data-theme="dark"] .subnav,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .mobile-sheet-action,
html[data-theme="dark"] .alert,
html[data-theme="dark"] .premium-confirm-card,
html[data-theme="dark"] .ui2-toast,
html[data-theme="dark"] .completion-toast,
html[data-theme="dark"] .empty-state {
  box-shadow: var(--elevation-0);
}
html[data-theme="dark"] .btn-ghost {
  color: var(--theme-text-strong);
  background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
  border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--line));
}
html[data-theme="dark"] .subnav {
  background: color-mix(in srgb, var(--surface-strong) 90%, transparent);
  border-color: var(--line);
}
html[data-theme="dark"] .subnav a {
  color: var(--muted);
  background: transparent;
  border-color: transparent;
}
html[data-theme="dark"] .subnav a:where(:hover, :focus-visible) {
  color: var(--ink);
  background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface-strong));
}
html[data-theme="dark"] .subnav a.active,
html[data-theme="dark"] .subnav a[aria-current="page"] {
  color: var(--brand-on-primary, #fff);
  background: linear-gradient(145deg, var(--brand-primary), var(--brand-primary-deep));
  border-color: color-mix(in srgb, var(--brand-accent) 46%, transparent);
}
html[data-theme="dark"] .premium-confirm-card,
html[data-theme="dark"] .ui2-toast,
html[data-theme="dark"] .completion-toast {
  background: color-mix(in srgb, var(--surface-strong) 96%, transparent);
  border-color: var(--line);
  box-shadow: var(--elevation-4);
}
html[data-theme="dark"] .empty-state {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--brand-accent) 5%, transparent), transparent 44%),
    color-mix(in srgb, var(--surface-strong) 94%, transparent);
  border-color: color-mix(in srgb, var(--brand-primary) 18%, var(--line));
}
@media (max-width: 960px) {
  .subnav {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    overflow: visible;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { flex: 0 0 auto; }
  .ui2-toast-region {
    inset-inline: 0.72rem;
    inset-block-end: calc(5.7rem + env(safe-area-inset-bottom, 0px));
    width: auto;
  }
  .premium-confirm-overlay { padding: 0.8rem; }
  .premium-confirm-card { width: min(100%, 30rem); }
}
@media (max-width: 520px) {
  .btn { min-height: 2.75rem; }
  .premium-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .premium-confirm-actions .btn { width: 100%; min-width: 0; }
  .alert { font-size: 0.9rem; }
  .ui2-surface-loader { padding: .9rem; }
  .ui2-surface-loader-status { justify-content: flex-start; }
  .ui2-skeleton-row { grid-template-columns: minmax(7rem, 1.3fr) minmax(4rem, .7fr); }
  .ui2-skeleton-row > :nth-child(n + 3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ui2-field-error,
  .ui2-toast,
  .skeleton::after,
  .ui2-skeleton::after,
  .ui2-busy-spinner,
  .ui2-inline-spinner,
  .ui2-confirm-overlay,
  .ui2-confirm-overlay .premium-confirm-card,
  .ui2-surface-loader,
  .ui2-toast-icon {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
  body.ui2-page-entering,
  body.ui2-page-entered,
  body.ui2-page-leaving {
    --motion-page-duration: 0ms;
  }
}
.app-shell .topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(1rem, 2.4vw, 2rem);
  row-gap: 0.85rem;
  direction: rtl;
}
.app-shell .topbar > :first-child:not(.topbar-actions) {
  min-width: 0;
  justify-self: stretch;
  text-align: start;
}
.app-shell .topbar > .topbar-actions {
  min-width: 0;
  width: max-content;
  max-width: min(48rem, 100%);
  margin: 0;
  justify-self: end;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.55rem;
  direction: rtl;
}
.app-shell .topbar-actions > * {
  margin-block: 0;
}
.app-shell .topbar-actions > form {
  margin: 0;
}
.app-shell .topbar-actions .topbar-logout {
  margin-inline-start: 0;
  padding-inline-start: 0;
  border-inline-start: 0;
}
.app-shell .topbar-actions .theme-switcher {
  flex: 0 0 auto;
  margin: 0;
}
.app-shell .topbar-actions .theme-toggle {
  min-height: 2.65rem;
  height: 2.65rem;
}
@media (max-width: 960px) {
  .app-shell .topbar {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .app-shell .topbar > .topbar-actions {
    grid-column: 1;
    width: 100%;
    max-width: none;
    justify-self: stretch;
    justify-content: flex-start;
  }
}
@media (max-width: 640px) {
  .app-shell .topbar {
    row-gap: 0.7rem;
  }
  .app-shell .topbar > .topbar-actions {
    gap: 0.55rem;
  }
}
:root {
  --pro-content-max: 1440px;
  --pro-sidebar-width: 18.25rem;
  --pro-page-gutter: clamp(1rem, 2.25vw, 2.25rem);
  --pro-card-radius: 20px;
  --pro-card-radius-sm: 15px;
  --pro-hairline: color-mix(in srgb, var(--primary) 10%, var(--line));
  --pro-hairline-strong: color-mix(in srgb, var(--primary) 18%, var(--line));
  --pro-surface: color-mix(in srgb, var(--surface-strong) 95%, transparent);
  --pro-surface-soft: color-mix(in srgb, var(--surface) 89%, transparent);
  --pro-shadow-1: 0 1px 2px color-mix(in srgb, var(--primary-deep) 5%, transparent),
                  0 8px 24px color-mix(in srgb, var(--primary-deep) 6%, transparent);
  --pro-shadow-2: 0 2px 4px color-mix(in srgb, var(--primary-deep) 5%, transparent),
                  0 16px 42px color-mix(in srgb, var(--primary-deep) 9%, transparent);
  --pro-shadow-3: 0 20px 60px color-mix(in srgb, var(--primary-deep) 16%, transparent);
  --pro-mobile-nav-height: 4.35rem;
}
html {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}
body {
  min-width: 320px;
  font-family: var(--font-body);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(900px 420px at 100% -8%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
    radial-gradient(800px 380px at -8% 104%, color-mix(in srgb, var(--primary) 5%, transparent), transparent 66%),
    var(--theme-bg);
}
::selection {
  color: var(--brand-on-primary, #fff);
  background: color-mix(in srgb, var(--primary) 78%, transparent);
}
.app-shell {
  min-height: 100dvh;
  background:
    radial-gradient(70rem 28rem at 100% -8%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
    linear-gradient(180deg, var(--theme-bg) 0%, color-mix(in srgb, var(--theme-bg-soft) 78%, var(--theme-bg)) 100%);
}
.main {
  min-width: 0;
}
.main > :last-child {
  margin-bottom: 0;
}
.topbar h1,
.section-title,
.dashboard-section-head h2,
.panel > h2,
.panel > h3,
.auth-card h1,
.portal-top h1 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  letter-spacing: normal;
}
.topbar h1 {
  color: var(--theme-text-strong);
  font-size: var(--text-page-title);
  line-height: var(--line-height-heading);
}
.topbar p {
  color: var(--muted);
  font-size: var(--text-body);
  line-height: var(--line-height-normal);
}
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.24) transparent;
}
.sidebar-brand img {
  object-fit: contain;
  border-radius: 16px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.13);
  padding: 4px;
}
.sidebar-brand strong {
  font-family: var(--font-display);
  font-weight:var(--font-weight-semibold, 600);
}
.sidebar-brand span {
  color: rgba(255,255,255,.68);
  letter-spacing: .01em;
}
.year-chip {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.global-search input {
  min-height: 2.72rem;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.global-search input::placeholder {
  color: rgba(255,255,255,.58);
}
.global-search input:focus {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 4px rgba(255,255,255,.07);
}
.command-trigger {
  min-height: 2.6rem;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.84);
}
.command-trigger:hover,
.command-trigger:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.18);
}
.command-trigger kbd {
  color: rgba(255,255,255,.72);
  border-color: rgba(255,255,255,.13);
  background: rgba(0,0,0,.1);
}
.nav-list a {
  font-weight: 700;
}
.nav-list a .nav-icon {
  border: 1px solid rgba(255,255,255,.05);
}
.panel,
.stat,
.card,
.settings-card,
.workflow-card,
.students-mobile-card,
.table-wrap,
.data-table,
.empty-state {
  border-color: var(--pro-hairline);
}
.panel {
  border-radius: var(--pro-card-radius);
  background: var(--pro-surface);
  box-shadow: var(--pro-shadow-1);
}
.stat,
.card,
.settings-card,
.workflow-card,
.students-mobile-card {
  border-radius: var(--pro-card-radius-sm);
  background: var(--pro-surface);
  box-shadow: var(--pro-shadow-1);
}
@media (hover: hover) and (pointer: fine) {
  .panel:hover {
    border-color: var(--pro-hairline-strong);
  }
}
.btn,
.btn-sm,
button.btn,
a.btn {
  border-radius: 13px;
  font-size: var(--text-button);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}
.btn-primary,
.app-shell .btn-primary,
.portal-shell .btn-primary,
.saas-shell .btn-primary {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--primary) 94%, #fff),
    color-mix(in srgb, var(--primary-deep) 96%, #000));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 8px 20px color-mix(in srgb, var(--primary-deep) 16%, transparent);
}
.btn-ghost {
  background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
  border-color: var(--pro-hairline-strong);
}
.field > label,
.field > .field-label {
  margin-bottom: .1rem;
  font-size: var(--text-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
}
.field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
:is(input, select, textarea).input,
.search-input {
  min-height: 2.95rem;
  border-radius: 13px;
  border-color: var(--pro-hairline-strong);
  background: color-mix(in srgb, var(--theme-input-bg, var(--surface-strong)) 97%, transparent);
}
textarea {
  line-height: var(--line-height-relaxed);
}
.app-shell .topbar {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--pro-hairline);
  border-radius: var(--pro-card-radius);
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  box-shadow: var(--pro-shadow-1);
  backdrop-filter: blur(14px) saturate(1.08);
}
.app-shell .topbar::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
  opacity: .92;
}
.dashboard-main {
  display: grid;
  gap: 1.1rem;
}
.dashboard-main .dashboard-hero {
  background:
    radial-gradient(34rem 16rem at 92% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 66%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--surface-strong) 96%, transparent),
      color-mix(in srgb, var(--primary) 3%, var(--surface-strong)));
}
.dashboard-main .dashboard-role {
  display: inline-flex;
  align-items: center;
  min-height: 1.85rem;
  padding: .25rem .68rem;
  margin-bottom: .35rem;
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-strong));
  font-size: .78rem;
  font-weight:var(--font-weight-semibold, 600);
}
.dashboard-main .dashboard-copilot-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(38rem 20rem at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 64%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--surface-strong) 97%, transparent),
      color-mix(in srgb, var(--primary) 4%, var(--surface-strong)));
}
.dashboard-main .dashboard-copilot-hero::after {
  content: "";
  position: absolute;
  inset-inline-end: -3rem;
  inset-block-end: -4rem;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  opacity: .6;
  pointer-events: none;
}
.dashboard-main .dashboard-section-head {
  position: relative;
  z-index: 1;
}
.dashboard-main .dashboard-section-head h2 {
  font-size: clamp(1.15rem, 1rem + .45vw, 1.48rem);
}
.dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight) {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  border-color: var(--pro-hairline);
  background: color-mix(in srgb, var(--surface-strong) 91%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight):hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 22%, var(--line));
    box-shadow: var(--pro-shadow-1);
  }
}
.dashboard-main .copilot-main-advice::before,
.dashboard-main .quick-action-card::before,
.dashboard-main .dashboard-insight::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: .8rem;
  width: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 76%, var(--accent));
  opacity: .7;
}
.dashboard-main .dashboard-task {
  min-height: 4.8rem;
  align-items: center;
}
.dashboard-main .dashboard-task strong,
.dashboard-main .quick-action-card strong,
.dashboard-main .copilot-main-advice strong {
  color: var(--theme-text-strong);
}
.dashboard-main .dashboard-task em,
.dashboard-main .quick-action-card em,
.dashboard-main .health-item em,
.dashboard-main .setup-step em {
  font-style: normal;
  font-weight:var(--font-weight-semibold, 600);
}
.dashboard-main .setup-meter {
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface-strong));
}
.dashboard-main .setup-meter span {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--accent) 72%, var(--primary)));
}
.table-wrap,
.table-container {
  overflow: auto;
  border: 1px solid var(--pro-hairline);
  border-radius: 16px;
  background: var(--pro-surface);
}
.data-table,
.table-wrap table,
.table-container table {
  border-spacing: 0;
}
.data-table th,
.table-wrap th,
.table-container th {
  font-size: var(--text-table-head);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
}
.data-table thead th,
.table-wrap thead th,
.table-container thead th {
  background: color-mix(in srgb, var(--primary) 5%, var(--surface-strong));
  color: var(--theme-text-strong);
}
.data-table tbody tr,
.table-wrap tbody tr,
.table-container tbody tr {
  transition: background-color var(--motion-hover), box-shadow var(--motion-hover);
}
@media (hover: hover) and (pointer: fine) {
  .data-table tbody tr:hover,
  .table-wrap tbody tr:hover,
  .table-container tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 4%, var(--surface-strong));
  }
}
.subnav {
  padding: .32rem;
  gap: .28rem;
  border-radius: 15px;
  border-color: var(--pro-hairline);
  background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
}
.subnav a {
  min-height: 2.42rem;
  padding-inline: .88rem;
  border-radius: 11px;
}
@media (min-width: 961px) {
  :root {
    --ui2-sidebar-width: var(--pro-sidebar-width);
  }
  .app-shell {
    grid-template-columns: var(--pro-sidebar-width) minmax(0, 1fr);
  }
  .sidebar {
    padding: 1.1rem .9rem 1.2rem;
    gap: .9rem;
    background:
      radial-gradient(25rem 16rem at 80% -5%, rgba(255,255,255,.09), transparent 62%),
      radial-gradient(22rem 18rem at 10% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 64%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--primary-deep) 96%, #000),
        color-mix(in srgb, var(--primary) 95%, var(--primary-deep)));
    border-inline-end: 1px solid rgba(255,255,255,.09);
    box-shadow: 14px 0 45px color-mix(in srgb, var(--primary-deep) 11%, transparent);
  }
  html[dir="rtl"] .sidebar {
    box-shadow: -14px 0 45px color-mix(in srgb, var(--primary-deep) 11%, transparent);
  }
  .sidebar-brand {
    min-height: 4.6rem;
    padding: .35rem .42rem .95rem;
  }
  .sidebar-brand img {
    width: 50px;
    height: 50px;
  }
  .nav-list {
    gap: .17rem;
  }
  .nav-list a {
    min-height: 2.92rem;
    padding: .64rem .72rem;
    border-radius: 12px;
    color: rgba(255,255,255,.78);
  }
  .nav-list a:hover,
  .nav-list a:focus-visible {
    background: rgba(255,255,255,.075);
    border-color: rgba(255,255,255,.075);
  }
  .nav-list a.active,
  .nav-list a[aria-current="page"] {
    color: #fff;
    background: linear-gradient(90deg, rgba(255,255,255,.13), rgba(255,255,255,.07));
    border-color: rgba(255,255,255,.11);
  }
  html[dir="rtl"] .nav-list a.active,
  html[dir="rtl"] .nav-list a[aria-current="page"] {
    background: linear-gradient(270deg, rgba(255,255,255,.13), rgba(255,255,255,.07));
  }
  .main {
    width: min(100%, var(--pro-content-max));
    margin-inline: auto;
    padding: 1.55rem var(--pro-page-gutter) 2.5rem;
  }
  .app-shell .topbar {
    min-height: 5.2rem;
    margin-bottom: 1.15rem;
    padding: 1.08rem 1.3rem;
  }
  .dashboard-main {
    gap: 1.15rem;
  }
  .panel {
    padding: clamp(1.05rem, 1.5vw, 1.42rem) clamp(1.1rem, 1.8vw, 1.6rem);
  }
  .dashboard-main .dashboard-brief-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
  }
  .dashboard-main .dashboard-insights {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
  }
  .dashboard-main .quick-action-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
  }
  .dashboard-main .dashboard-balanced-row {
    gap: 1.15rem;
  }
}
@media (max-width: 960px) {
  :root {
    --ui2-mobile-chrome-height: 3.85rem;
    --ui2-bottom-nav-offset: .55rem;
  }
  body {
    background: var(--theme-bg);
  }
  .app-shell::before {
    background:
      radial-gradient(20rem 8rem at 80% -30%, rgba(255,255,255,.12), transparent 70%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--primary-deep) 96%, #000),
        color-mix(in srgb, var(--primary) 94%, var(--primary-deep)));
    box-shadow: 0 8px 24px color-mix(in srgb, var(--primary-deep) 16%, transparent);
  }
  .main {
    width: 100%;
    padding-inline: max(.85rem, env(safe-area-inset-left, 0px));
    padding-top: calc(var(--ui2-mobile-chrome-height) + .72rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--pro-mobile-nav-height) + 2.1rem + env(safe-area-inset-bottom, 0px));
  }
  .nav-toggle {
    top: calc(.6rem + env(safe-area-inset-top, 0px));
    min-height: 2.55rem;
    border-radius: 12px;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.17);
    backdrop-filter: blur(8px);
  }
  .sidebar {
    width: min(88vw, 22rem);
    max-width: 22rem;
    padding: calc(1rem + env(safe-area-inset-top, 0px)) .9rem calc(1.15rem + env(safe-area-inset-bottom, 0px));
    border-start-end-radius: 24px;
    border-end-end-radius: 24px;
    background:
      radial-gradient(24rem 14rem at 80% -3%, rgba(255,255,255,.09), transparent 64%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--primary-deep) 96%, #000),
        color-mix(in srgb, var(--primary) 95%, var(--primary-deep)));
    box-shadow: -18px 0 55px rgba(8,20,16,.3);
  }
  .sidebar-brand img {
    width: 48px;
    height: 48px;
  }
  .nav-list a {
    min-height: 3.05rem;
    border-radius: 12px;
  }
  .app-shell .topbar {
    margin-bottom: .9rem;
    padding: 1rem 1rem 1.05rem;
    border-radius: 17px;
    background: var(--pro-surface);
    backdrop-filter: none;
  }
  .topbar h1 {
    font-size: clamp(1.38rem, 6vw, 1.8rem);
  }
  .topbar p {
    margin-top: .28rem;
    font-size: .88rem;
    line-height: 1.6;
  }
  .app-shell .topbar > .topbar-actions {
    padding-top: .72rem;
    border-top: 1px solid var(--pro-hairline);
  }
  .panel {
    padding: 1rem;
    border-radius: 17px;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--primary-deep) 6%, transparent);
  }
  .dashboard-main {
    gap: .82rem;
  }
  .dashboard-main .dashboard-section-head {
    margin-bottom: .8rem;
  }
  .dashboard-main .dashboard-section-head h2 {
    font-size: 1.16rem;
  }
  .dashboard-main .dashboard-section-head p {
    font-size: .82rem;
  }
  .dashboard-main .dashboard-brief-grid,
  .dashboard-main .dashboard-balanced-row {
    grid-template-columns: 1fr;
    gap: .7rem;
  }
  .dashboard-main .dashboard-insights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }
  .dashboard-main .quick-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }
  .dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight) {
    border-radius: 14px;
  }
  .dashboard-main .copilot-main-advice,
  .dashboard-main .quick-action-card,
  .dashboard-main .dashboard-insight {
    padding: .88rem;
  }
  .dashboard-main .dashboard-task,
  .dashboard-main .setup-step,
  .dashboard-main .health-item {
    padding: .78rem .85rem;
  }
  .mobile-bottom-nav {
    inset-inline: .65rem;
    bottom: calc(.55rem + env(safe-area-inset-bottom, 0px));
    min-height: var(--pro-mobile-nav-height);
    padding: .38rem;
    gap: .15rem;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
    border-radius: 20px;
    background: color-mix(in srgb, var(--surface-strong) 94%, transparent);
    box-shadow: 0 14px 42px color-mix(in srgb, var(--primary-deep) 17%, transparent);
    backdrop-filter: blur(16px) saturate(1.08);
  }
  .mobile-bottom-item {
    min-height: 3.4rem;
    border-radius: 13px;
    font-size:var(--text-caption);
    letter-spacing:normal;
  }
  .mobile-bottom-item.active,
  .mobile-bottom-item[aria-current="page"] {
    color: var(--primary);
  }
  .mobile-bottom-icon {
    width: 1.55rem;
    height: 1.55rem;
  }
  .mobile-bottom-action {
    transform: translateY(-.38rem);
  }
  .mobile-bottom-action .mobile-bottom-icon {
    width: 2.48rem;
    height: 2.48rem;
    border: 3px solid color-mix(in srgb, var(--surface-strong) 96%, transparent);
    background: linear-gradient(145deg,
      color-mix(in srgb, var(--accent) 94%, #fff),
      color-mix(in srgb, var(--accent) 78%, #000));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 28%, transparent);
  }
  .mobile-action-sheet {
    inset-inline: .65rem;
    padding: .72rem;
    border-radius: 22px;
    box-shadow: 0 26px 70px rgba(5,15,12,.28);
  }
  .mobile-sheet-action {
    min-height: 3.1rem;
    border-radius: 13px;
  }
  .subnav {
    margin-inline: -.1rem;
    padding: .28rem;
    border-radius: 14px;
  }
  .subnav a {
    min-height: 2.5rem;
    font-size: .82rem;
  }
  .table-wrap,
  .table-container {
    border-radius: 14px;
  }
}
@media (max-width: 640px) {
  .main {
    padding-inline: max(.72rem, env(safe-area-inset-left, 0px));
  }
  .app-shell .topbar {
    padding: .9rem;
    border-radius: 15px;
  }
  .app-shell .topbar > .topbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
  }
  .app-shell .topbar > .topbar-actions > *,
  .app-shell .topbar > .topbar-actions form,
  .app-shell .topbar > .topbar-actions .btn {
    min-width: 0;
    width: 100% !important;
  }
  .panel {
    padding: .9rem;
  }
  .dashboard-main .dashboard-insights,
  .dashboard-main .quick-action-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-main .quick-action-card {
    min-height: 0;
  }
  .dashboard-main .dashboard-task {
    min-height: 0;
  }
  .mobile-bottom-nav {
    inset-inline: .45rem;
    border-radius: 18px;
  }
  .mobile-bottom-item {
    font-size:var(--text-caption);
  }
  .btn,
  .btn-sm,
  .field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
  :is(input, select, textarea).input {
    min-height: 2.9rem;
  }
}
.comm-upgrade-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.15rem;
  align-items: start;
  overflow: hidden;
  padding: clamp(1.3rem, 3vw, 2.2rem);
  border: 1px solid color-mix(in srgb, var(--brand-primary, #1a5f4a) 24%, transparent);
  border-radius: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary, #1a5f4a) 10%, #fff), color-mix(in srgb, var(--brand-accent, #c9a227) 12%, #fff));
  box-shadow: 0 16px 36px rgba(22, 66, 57, .09);
}
.comm-upgrade-card::after {
  position: absolute;
  left: -5.5rem;
  bottom: -6rem;
  width: 15rem;
  height: 15rem;
  content: "";
  border: 1px solid color-mix(in srgb, var(--brand-primary, #1a5f4a) 18%, transparent);
  border-radius: 50%;
}
.comm-upgrade-icon {
  width: 4.2rem;
  height: 4.2rem;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(145deg, #1d9b69, #0a7053);
  box-shadow: 0 13px 24px rgba(15, 108, 76, .26);
  font-size: 1.8rem;
  font-weight:var(--font-weight-bold, 700);
}
.comm-upgrade-copy { position: relative; z-index: 1; }
.comm-upgrade-copy > span { color: #a16f09; font-size: .82rem; font-weight:var(--font-weight-bold, 700); }
.comm-upgrade-copy h2 { margin: .2rem 0 .55rem; color: var(--theme-text-strong, #163b32); font-size: clamp(1.35rem, 2.5vw, 1.8rem); }
.comm-upgrade-copy p { max-width: 53rem; margin: 0; color: var(--theme-text-muted, #657972); line-height: 1.85; }
.comm-upgrade-copy ul { display: flex; flex-wrap: wrap; gap: .55rem 1.2rem; margin: 1rem 0 1.25rem; padding: 0; list-style: none; color: var(--theme-text-strong, #163b32); font-size: .9rem; font-weight:var(--font-weight-semibold, 600); }
.comm-upgrade-copy li::before { margin-left: .4rem; color: var(--brand-primary, #1a5f4a); content: "✓"; }
html[data-theme="dark"] .comm-upgrade-card { background: color-mix(in srgb, var(--theme-surface, #182723) 88%, var(--brand-primary) 12%); }
@media (max-width: 560px) {
  .comm-upgrade-card { grid-template-columns: 1fr; border-radius: 20px; }
  .comm-upgrade-icon { width: 3.4rem; height: 3.4rem; border-radius: 16px; font-size: 1.45rem; }
  .comm-upgrade-copy .btn { width: 100%; }
}
html[data-theme="dark"] {
  --pro-hairline: rgba(148,163,184,.14);
  --pro-hairline-strong: rgba(148,163,184,.22);
  --pro-surface: color-mix(in srgb, var(--surface-strong) 94%, transparent);
  --pro-surface-soft: color-mix(in srgb, var(--surface) 93%, transparent);
  --pro-shadow-1: 0 1px 2px rgba(0,0,0,.14), 0 10px 28px rgba(0,0,0,.16);
  --pro-shadow-2: 0 2px 5px rgba(0,0,0,.18), 0 18px 45px rgba(0,0,0,.22);
  --pro-shadow-3: 0 24px 70px rgba(0,0,0,.34);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .app-shell {
  background:
    radial-gradient(60rem 26rem at 100% -8%, color-mix(in srgb, var(--brand-accent) 5%, transparent), transparent 62%),
    linear-gradient(180deg, #0b1220 0%, #0e1726 100%);
}
html[data-theme="dark"] .app-shell .topbar,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .workflow-card,
html[data-theme="dark"] .students-mobile-card,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .table-container {
  background: color-mix(in srgb, var(--surface-strong) 96%, transparent);
  border-color: var(--pro-hairline);
}
html[data-theme="dark"] .dashboard-main .dashboard-hero,
html[data-theme="dark"] .dashboard-main .dashboard-copilot-hero {
  background:
    radial-gradient(34rem 16rem at 92% 0%, color-mix(in srgb, var(--brand-accent) 6%, transparent), transparent 66%),
    linear-gradient(145deg, #152238, #111c2f);
}
html[data-theme="dark"] .dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight) {
  background: #111c2f;
  border-color: rgba(148,163,184,.16);
}
html[data-theme="dark"] .dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight):hover {
  background: #17253b;
  border-color: color-mix(in srgb, var(--brand-primary) 26%, rgba(148,163,184,.2));
}
html[data-theme="dark"] .data-table thead th,
html[data-theme="dark"] .table-wrap thead th,
html[data-theme="dark"] .table-container thead th {
  background: rgba(255,255,255,.035);
}
html[data-theme="dark"] .mobile-bottom-nav {
  background: color-mix(in srgb, #111c2f 94%, transparent);
  border-color: rgba(148,163,184,.18);
  box-shadow: 0 16px 44px rgba(0,0,0,.34);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panel,
  .dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight) {
    transition: none !important;
  }
}
:root {
  --pro-v2-content-max: 1540px;
  --pro-v2-sidebar: 19rem;
  --pro-v2-radius-xl: 28px;
  --pro-v2-radius-lg: 22px;
  --pro-v2-radius-md: 16px;
  --pro-v2-page-gap: clamp(.95rem, 1.5vw, 1.4rem);
  --pro-v2-shadow-soft: 0 1px 2px color-mix(in srgb, var(--primary-deep) 4%, transparent), 0 12px 34px color-mix(in srgb, var(--primary-deep) 8%, transparent);
  --pro-v2-shadow-card: 0 18px 48px color-mix(in srgb, var(--primary-deep) 10%, transparent);
  --pro-v2-shadow-float: 0 28px 70px color-mix(in srgb, var(--primary-deep) 18%, transparent);
}
body {
  background:
    radial-gradient(56rem 34rem at 88% -12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 68%),
    radial-gradient(50rem 34rem at -10% 110%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--theme-bg) 98%, #fff), var(--theme-bg-soft));
}
.app-shell {
  background:
    radial-gradient(52rem 28rem at 92% -8%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 68%),
    radial-gradient(44rem 34rem at 8% 108%, color-mix(in srgb, var(--primary) 6%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--theme-bg) 99%, #fff), var(--theme-bg-soft));
}
.panel,
.card,
.stat,
.settings-card,
.workflow-card,
.students-mobile-card,
.empty-state,
.table-wrap,
.table-container {
  border-color: color-mix(in srgb, var(--primary) 11%, var(--line));
}
.panel {
  border-radius: var(--pro-v2-radius-xl);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 98%, transparent), color-mix(in srgb, var(--surface) 94%, transparent));
  box-shadow: var(--pro-v2-shadow-soft);
}
.card,
.stat,
.settings-card,
.workflow-card,
.students-mobile-card {
  border-radius: var(--pro-v2-radius-lg);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--primary-deep) 7%, transparent);
}
.app-shell .topbar {
  border-radius: var(--pro-v2-radius-xl);
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  background:
    radial-gradient(26rem 10rem at 92% -24%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-strong) 98%, transparent), color-mix(in srgb, var(--primary) 3%, var(--surface-strong)));
  box-shadow: var(--pro-v2-shadow-soft);
}
.app-shell .topbar::before {
  width: 5px;
  inset-block: 1rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), var(--primary));
}
.topbar h1 {
  font-size: clamp(1.8rem, 2.35vw, 2.55rem);
  font-weight:var(--font-weight-bold, 700);
}
.topbar p {
  max-width: 72ch;
  font-size: .96rem;
}
.dashboard-main .dashboard-hero {
  min-height: 8rem;
  align-items: center;
  color: #fff;
  border-color: color-mix(in srgb, var(--primary) 72%, #fff 12%);
  background:
    radial-gradient(32rem 19rem at 88% -12%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 66%),
    radial-gradient(20rem 16rem at 8% 120%, rgba(255,255,255,.11), transparent 64%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--primary-deep) 96%, #000),
      color-mix(in srgb, var(--primary) 92%, var(--primary-deep)) 62%,
      color-mix(in srgb, var(--primary) 78%, var(--accent)));
  box-shadow: 0 22px 55px color-mix(in srgb, var(--primary-deep) 22%, transparent);
}
.dashboard-main .dashboard-hero::before {
  width: 5px;
  inset-block: 1.1rem;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff));
}
.dashboard-main .dashboard-hero h1,
.dashboard-main .dashboard-hero p {
  color: #fff;
}
.dashboard-main .dashboard-hero p {
  color: rgba(255,255,255,.78);
}
.dashboard-main .dashboard-role {
  margin-bottom: .55rem;
  color: var(--brand-on-accent, #111827);
  border-color: rgba(255,255,255,.22);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 96%, #fff), color-mix(in srgb, var(--accent) 82%, #fff));
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.dashboard-main .dashboard-hero .btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.dashboard-main .dashboard-hero .btn-ghost:hover,
.dashboard-main .dashboard-hero .btn-ghost:focus-visible {
  color: #fff;
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.17);
}
.dashboard-main {
  gap: var(--pro-v2-page-gap);
}
.dashboard-main .dashboard-copilot-hero {
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  background:
    radial-gradient(30rem 18rem at 95% -14%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 66%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-strong) 99%, transparent), color-mix(in srgb, var(--accent) 4%, var(--surface-strong)));
}
.dashboard-main .dashboard-copilot-hero::after {
  inset-inline-end: -2rem;
  inset-block-end: -5rem;
  width: 16rem;
  height: 16rem;
  border-width: 22px;
  border-color: color-mix(in srgb, var(--accent) 7%, transparent);
}
.dashboard-main .dashboard-tasks-full,
.dashboard-main .dashboard-quick-panel,
.dashboard-main .dashboard-setup,
.dashboard-main .dashboard-health-panel {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 99%, transparent), color-mix(in srgb, var(--surface) 94%, transparent));
}
.dashboard-main .dashboard-section-head {
  padding-bottom: .85rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 9%, var(--line));
}
.dashboard-main .dashboard-section-head h2 {
  font-size: clamp(1.22rem, 1rem + .65vw, 1.62rem);
  font-weight:var(--font-weight-bold, 700);
}
.dashboard-main .dashboard-section-head p {
  margin-top: .28rem;
}
.dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight) {
  border-radius: var(--pro-v2-radius-md);
  border-color: color-mix(in srgb, var(--primary) 10%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 99%, transparent), color-mix(in srgb, var(--surface) 94%, transparent));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-deep) 4%, transparent);
}
.dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight)::after {
  content: "";
  position: absolute;
  inset-inline-end: .78rem;
  inset-block-start: .78rem;
  width: .42rem;
  height: .42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 62%, var(--accent));
  opacity: .35;
}
.dashboard-main .copilot-main-advice {
  min-height: 9.4rem;
  padding: 1.05rem 1.1rem 1.05rem 1.25rem;
}
.dashboard-main .copilot-main-advice::before {
  inset-block: .9rem;
  width: 4px;
  background: linear-gradient(180deg, var(--accent), var(--primary));
}
.dashboard-main .dashboard-task {
  min-height: 5.2rem;
  padding: .9rem 1rem;
}
.dashboard-main .dashboard-task-dot {
  width: .8rem;
  height: .8rem;
  box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 8%, transparent);
}
.dashboard-main .dashboard-task em,
.dashboard-main .setup-step em,
.dashboard-main .health-item em,
.dashboard-main .quick-action-card em {
  border-radius: 999px;
  padding: .28rem .62rem;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}
.dashboard-main .dashboard-insights {
  gap: .9rem;
}
.dashboard-main .dashboard-insight {
  min-height: 8.2rem;
  padding: 1.15rem;
  align-content: center;
  border-top: 4px solid color-mix(in srgb, var(--primary) 68%, var(--accent));
}
.dashboard-main .dashboard-insight-warning {
  border-top-color: var(--warm);
}
.dashboard-main .dashboard-insight-ok {
  border-top-color: var(--ok);
}
.dashboard-main .dashboard-insight strong {
  margin-block: .18rem;
  font-size: clamp(1.6rem, 1.1rem + 1vw, 2.3rem);
  font-weight:var(--font-weight-bold, 700);
}
.dashboard-main .quick-action-card {
  min-height: 9rem;
  padding: 1.1rem;
}
.dashboard-main .quick-action-card::before {
  inset-block: .9rem;
  width: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight):hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
    box-shadow: var(--pro-v2-shadow-card);
  }
  .panel:hover {
    box-shadow: var(--pro-v2-shadow-card);
  }
}
.field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
:is(input, select, textarea).input,
.search-input {
  min-height: 3.12rem;
  border-radius: 15px;
  border-color: color-mix(in srgb, var(--primary) 15%, var(--line));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 48%, transparent);
}
.field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus,
.field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus-visible {
  border-color: color-mix(in srgb, var(--primary) 64%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 11%, transparent), 0 8px 20px color-mix(in srgb, var(--primary-deep) 7%, transparent);
}
.btn,
.btn-sm,
button.btn,
a.btn {
  border-radius: 15px;
  min-height: 2.92rem;
  padding-inline: 1.08rem;
}
.btn-primary,
.app-shell .btn-primary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 96%, #fff), color-mix(in srgb, var(--primary-deep) 98%, #000));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary-deep) 20%, transparent), inset 0 1px 0 rgba(255,255,255,.18);
}
.table-wrap,
.table-container {
  border-radius: var(--pro-v2-radius-lg);
  background: color-mix(in srgb, var(--surface-strong) 97%, transparent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--primary-deep) 6%, transparent);
}
.data-table thead th,
.table-wrap thead th,
.table-container thead th {
  padding-block: .9rem;
  color: var(--theme-text-strong);
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-strong));
  border-bottom-color: color-mix(in srgb, var(--primary) 13%, var(--line));
}
.data-table tbody td,
.table-wrap tbody td,
.table-container tbody td {
  padding-block: .86rem;
}
.subnav {
  padding: .38rem;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong) 94%, transparent);
  box-shadow: 0 7px 22px color-mix(in srgb, var(--primary-deep) 5%, transparent);
}
.subnav a {
  border-radius: 13px;
  font-weight:var(--font-weight-semibold, 600);
}
@media (min-width: 961px) {
  :root {
    --ui2-sidebar-width: var(--pro-v2-sidebar);
  }
  .app-shell {
    grid-template-columns: var(--pro-v2-sidebar) minmax(0, 1fr);
  }
  .main {
    width: min(100%, var(--pro-v2-content-max));
    padding: 1.8rem clamp(1.5rem, 2.4vw, 2.7rem) 3rem;
  }
  .sidebar {
    padding: 1.1rem .82rem 1.25rem;
    gap: .85rem;
    background:
      radial-gradient(22rem 16rem at 78% -5%, rgba(255,255,255,.12), transparent 64%),
      radial-gradient(20rem 22rem at 8% 108%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 66%),
      linear-gradient(165deg,
        color-mix(in srgb, var(--primary-deep) 98%, #000),
        color-mix(in srgb, var(--primary) 94%, var(--primary-deep)) 58%,
        color-mix(in srgb, var(--primary) 80%, #071a14));
    border-inline-end: 1px solid rgba(255,255,255,.1);
    box-shadow: 18px 0 55px color-mix(in srgb, var(--primary-deep) 16%, transparent);
  }
  html[dir="rtl"] .sidebar {
    box-shadow: -18px 0 55px color-mix(in srgb, var(--primary-deep) 16%, transparent);
  }
  .sidebar-brand {
    min-height: 5.15rem;
    margin: 0 .1rem .2rem;
    padding: .55rem .6rem 1rem;
    gap: .82rem;
  }
  .sidebar-brand img {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: rgba(255,255,255,.14);
    box-shadow: 0 10px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.12);
  }
  .sidebar-brand strong {
    font-size: 1.14rem;
    font-weight:var(--font-weight-bold, 700);
  }
  .year-chip {
    border-radius: 15px;
    padding: .72rem .8rem;
    background: rgba(255,255,255,.085);
  }
  .global-search input {
    min-height: 2.95rem;
    border-radius: 15px;
  }
  .command-trigger {
    min-height: 2.78rem;
    border-radius: 14px;
  }
  .nav-list {
    gap: .22rem;
  }
  .nav-list a {
    min-height: 3.18rem;
    padding: .7rem .72rem;
    border-radius: 15px;
    font-size: .91rem;
    color: rgba(255,255,255,.78);
  }
  .nav-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 11px;
    background: rgba(255,255,255,.075);
  }
  .nav-list a.active,
  .nav-list a[aria-current="page"] {
    color: #fff;
    background: linear-gradient(135deg, rgba(255,255,255,.17), rgba(255,255,255,.075));
    border-color: rgba(255,255,255,.15);
    box-shadow: 0 9px 24px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
  .nav-list a.active .nav-icon,
  .nav-list a[aria-current="page"] .nav-icon {
    color: var(--brand-on-accent, #111827);
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 96%, #fff), color-mix(in srgb, var(--accent) 80%, #fff));
    box-shadow: 0 7px 15px rgba(0,0,0,.16);
  }
  .app-shell .topbar {
    min-height: 6.2rem;
    padding: 1.25rem 1.45rem;
    margin-bottom: .2rem;
  }
  .dashboard-main .dashboard-hero {
    min-height: 8.7rem;
    padding: 1.55rem 1.65rem;
    margin-bottom: 0;
  }
  .dashboard-main .dashboard-brief-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
  .dashboard-main .dashboard-balanced-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }
  .dashboard-main .dashboard-insights,
  .dashboard-main .quick-action-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
  .panel {
    padding: 1.35rem 1.5rem;
  }
}
@media (max-width: 960px) {
  :root {
    --ui2-mobile-chrome-height: 4.25rem;
    --pro-mobile-nav-height: 4.75rem;
  }
  .app-shell::before {
    height: calc(var(--ui2-mobile-chrome-height) + env(safe-area-inset-top, 0px));
    background:
      radial-gradient(18rem 8rem at 85% -45%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 72%),
      linear-gradient(135deg, color-mix(in srgb, var(--primary-deep) 98%, #000), color-mix(in srgb, var(--primary) 92%, var(--primary-deep)));
    box-shadow: 0 10px 30px color-mix(in srgb, var(--primary-deep) 20%, transparent);
  }
  .main {
    padding-top: calc(var(--ui2-mobile-chrome-height) + .9rem + env(safe-area-inset-top, 0px));
    padding-inline: max(.85rem, env(safe-area-inset-left, 0px));
    padding-bottom: calc(var(--pro-mobile-nav-height) + 2rem + env(safe-area-inset-bottom, 0px));
  }
  .nav-toggle {
    top: calc(.7rem + env(safe-area-inset-top, 0px));
    min-height: 2.7rem;
    padding-inline: .9rem;
    border-radius: 15px;
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.24);
    box-shadow: 0 8px 20px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.09);
  }
  .sidebar {
    width: min(91vw, 23rem);
    max-width: 23rem;
    border-start-end-radius: 30px;
    border-end-end-radius: 30px;
    background:
      radial-gradient(24rem 14rem at 78% -4%, rgba(255,255,255,.12), transparent 64%),
      radial-gradient(20rem 20rem at 10% 110%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 68%),
      linear-gradient(165deg, color-mix(in srgb, var(--primary-deep) 98%, #000), color-mix(in srgb, var(--primary) 90%, var(--primary-deep)));
    box-shadow: -24px 0 70px rgba(4,17,13,.36);
  }
  .app-shell .topbar {
    border-radius: 22px;
    padding: 1.08rem 1.08rem 1.1rem;
  }
  .dashboard-main .dashboard-hero {
    min-height: 9.2rem;
    padding: 1.22rem 1.12rem;
    border-radius: 24px;
  }
  .dashboard-main .dashboard-hero h1 {
    font-size: clamp(1.55rem, 6vw, 2rem);
  }
  .dashboard-main .dashboard-hero .topbar-actions {
    border-top-color: rgba(255,255,255,.15);
  }
  .panel {
    border-radius: 22px;
    padding: 1.05rem;
  }
  .dashboard-main .dashboard-section-head {
    padding-bottom: .72rem;
    margin-bottom: .85rem;
  }
  .dashboard-main .dashboard-brief-grid,
  .dashboard-main .dashboard-balanced-row {
    grid-template-columns: 1fr;
    gap: .78rem;
  }
  .dashboard-main .dashboard-insights,
  .dashboard-main .quick-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .72rem;
  }
  .dashboard-main .dashboard-insight {
    min-height: 7.5rem;
  }
  .dashboard-main .quick-action-card {
    min-height: 8.2rem;
  }
  .mobile-bottom-nav {
    inset-inline: .7rem;
    bottom: calc(.65rem + env(safe-area-inset-bottom, 0px));
    min-height: var(--pro-mobile-nav-height);
    padding: .42rem;
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface-strong) 96%, transparent);
    border-color: color-mix(in srgb, var(--primary) 14%, var(--line));
    box-shadow: 0 20px 54px color-mix(in srgb, var(--primary-deep) 22%, transparent);
  }
  .mobile-bottom-item {
    min-height: 3.55rem;
    border-radius: 16px;
    font-size:var(--text-caption);
  }
  .mobile-bottom-item.active,
  .mobile-bottom-item[aria-current="page"] {
    color: var(--primary);
  }
  .mobile-bottom-item.active .mobile-bottom-icon,
  .mobile-bottom-item[aria-current="page"] .mobile-bottom-icon {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary-deep) 8%, transparent);
  }
  .mobile-bottom-action {
    transform: translateY(-.62rem);
  }
  .mobile-bottom-action .mobile-bottom-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-width: 4px;
    box-shadow: 0 13px 30px color-mix(in srgb, var(--accent) 34%, transparent);
  }
  .mobile-action-sheet {
    border-radius: 28px;
    padding: .85rem;
  }
  .mobile-sheet-action {
    min-height: 3.35rem;
    border-radius: 15px;
  }
}
@media (max-width: 640px) {
  .main {
    padding-inline: max(.68rem, env(safe-area-inset-left, 0px));
  }
  .dashboard-main {
    gap: .78rem;
  }
  .app-shell .topbar {
    border-radius: 20px;
  }
  .dashboard-main .dashboard-hero {
    min-height: 9.8rem;
    padding: 1.15rem 1rem;
  }
  .dashboard-main .dashboard-insights,
  .dashboard-main .quick-action-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-main .dashboard-insight,
  .dashboard-main .quick-action-card,
  .dashboard-main .copilot-main-advice {
    min-height: 0;
  }
  .dashboard-main .dashboard-task {
    align-items: flex-start;
  }
  .mobile-bottom-nav {
    inset-inline: .45rem;
    border-radius: 22px;
  }
  .topbar h1 {
    font-size: clamp(1.45rem, 7vw, 1.88rem);
  }
}
html[data-theme="dark"] body,
html[data-theme="dark"] .app-shell {
  background:
    radial-gradient(54rem 28rem at 92% -8%, color-mix(in srgb, var(--brand-accent) 8%, transparent), transparent 68%),
    radial-gradient(40rem 32rem at 4% 110%, color-mix(in srgb, var(--brand-primary) 9%, transparent), transparent 72%),
    linear-gradient(180deg, #09111d 0%, #0d1727 100%);
}
html[data-theme="dark"] .app-shell .topbar,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .workflow-card,
html[data-theme="dark"] .students-mobile-card,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .table-container {
  background: linear-gradient(180deg, color-mix(in srgb, #152238 97%, transparent), color-mix(in srgb, #111c2f 96%, transparent));
  border-color: rgba(148,163,184,.15);
  box-shadow: 0 14px 38px rgba(0,0,0,.2);
}
html[data-theme="dark"] .dashboard-main .dashboard-hero {
  color: #fff;
  background:
    radial-gradient(30rem 18rem at 88% -10%, color-mix(in srgb, var(--brand-accent) 24%, transparent), transparent 66%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-deep) 96%, #02070c), color-mix(in srgb, var(--brand-primary) 76%, #09111d));
  border-color: color-mix(in srgb, var(--brand-primary) 48%, rgba(148,163,184,.14));
}
html[data-theme="dark"] .dashboard-main .dashboard-copilot-hero {
  background:
    radial-gradient(30rem 18rem at 95% -14%, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent 66%),
    linear-gradient(145deg, #152238, #111c2f);
}
html[data-theme="dark"] .dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight) {
  background: linear-gradient(180deg, #142137, #101b2e);
  border-color: rgba(148,163,184,.15);
  box-shadow: 0 6px 18px rgba(0,0,0,.13);
}
html[data-theme="dark"] .dashboard-main :is(.copilot-main-advice, .dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight):hover {
  background: linear-gradient(180deg, #18283f, #132138);
  border-color: color-mix(in srgb, var(--brand-primary) 32%, rgba(148,163,184,.2));
}
html[data-theme="dark"] .mobile-bottom-nav {
  background: color-mix(in srgb, #111c2f 97%, transparent);
  border-color: rgba(148,163,184,.18);
}
.auth-v3 {
  --auth-ink: #12231d;
  --auth-muted: #66756f;
  --auth-green: var(--brand-primary, #1a5f4a);
  --auth-green-deep: color-mix(in srgb, var(--auth-green) 78%, #071713);
  --auth-gold: var(--brand-accent, #c9a227);
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--auth-ink);
  background:
    radial-gradient(46rem 30rem at 8% -12%, color-mix(in srgb, var(--auth-gold) 10%, transparent), transparent 68%),
    radial-gradient(44rem 28rem at 100% 100%, color-mix(in srgb, var(--auth-green) 8%, transparent), transparent 72%),
    #f4f5f1;
}
.auth-v3 * {
  box-sizing: border-box;
}
.auth-v3-header {
  width: min(100% - 2rem, 1500px);
  min-height: 5.4rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  z-index: 5;
}
.auth-v3-brand {
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  color: var(--auth-ink);
}
.auth-v3-brand-mark {
  width: 2.9rem;
  height: 2.9rem;
  flex: 0 0 2.9rem;
  display: grid;
  place-items: center;
  padding: .28rem;
  border: 1px solid rgba(20,55,44,.1);
  border-radius: 15px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 9px 25px rgba(20,55,44,.08);
}
.auth-v3-brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.auth-v3-brand > span:last-child {
  display: grid;
  gap: .02rem;
}
.auth-v3-brand strong {
  font-size: 1.03rem;
  font-weight:var(--font-weight-bold, 700);
  line-height: 1.25;
}
.auth-v3-brand small {
  color: var(--auth-muted);
  font-size:var(--text-caption);
  font-weight: 700;
}
.auth-v3-header-link {
  min-height: 2.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem 1rem;
  border: 1px solid rgba(18,35,29,.12);
  border-radius: 13px;
  color: var(--auth-ink);
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 22px rgba(18,35,29,.055);
  font-size: .86rem;
  font-weight:var(--font-weight-semibold, 600);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.auth-v3-header-link:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--auth-green) 28%, rgba(18,35,29,.12));
  background: #fff;
  box-shadow: 0 12px 28px rgba(18,35,29,.09);
}
.auth-v3-layout {
  width: min(100% - 2rem, 1500px);
  min-height: calc(100dvh - 6.4rem);
  margin-inline: auto;
  padding-bottom: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(26rem, .82fr);
  gap: clamp(1rem, 2vw, 1.7rem);
  align-items: stretch;
}
.auth-v3-register-layout {
  grid-template-columns: minmax(24rem, .78fr) minmax(35rem, 1.22fr);
}
.auth-v3-showcase {
  min-height: 42rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2rem, 4vw, 4.2rem);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 36px;
  color: #fff;
  background:
    radial-gradient(34rem 24rem at 14% 8%, rgba(255,255,255,.09), transparent 68%),
    radial-gradient(28rem 24rem at 100% 100%, color-mix(in srgb, var(--auth-gold) 24%, transparent), transparent 72%),
    linear-gradient(145deg, color-mix(in srgb, var(--auth-green-deep) 97%, #000), color-mix(in srgb, var(--auth-green) 94%, #0d2b22));
  box-shadow: 0 30px 80px color-mix(in srgb, var(--auth-green-deep) 19%, transparent);
  isolation: isolate;
}
.auth-v3-showcase::before,
.auth-v3-showcase::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.auth-v3-showcase::before {
  width: 26rem;
  height: 26rem;
  inset-inline-end: -12rem;
  top: -9rem;
}
.auth-v3-showcase::after {
  width: 18rem;
  height: 18rem;
  inset-inline-start: -8rem;
  bottom: -8rem;
}
.auth-v3-showcase-copy {
  max-width: 42rem;
}
.auth-v3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.05rem;
  color: color-mix(in srgb, var(--auth-gold) 78%, #fff);
  font-size: .82rem;
  font-weight:var(--font-weight-bold, 700);
}
.auth-v3-eyebrow i {
  width: .52rem;
  height: .52rem;
  border-radius: 50%;
  background: var(--auth-gold);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--auth-gold) 13%, transparent);
}
.auth-v3-showcase h1 {
  max-width: 13ch;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4.4vw, 4.7rem);
  font-weight:var(--font-weight-bold, 700);
  line-height: 1.12;
  letter-spacing:normal;
}
.auth-v3-showcase h1 em {
  color: color-mix(in srgb, var(--auth-gold) 78%, #fff);
  font-style: normal;
}
.auth-v3-showcase-copy > p {
  max-width: 39rem;
  margin: 1.25rem 0 0;
  color: rgba(255,255,255,.72);
  font-size: clamp(.94rem, 1.15vw, 1.08rem);
  line-height: 1.9;
}
.auth-v3-preview,
.auth-v3-onboarding {
  width: min(100%, 40rem);
  margin-inline: auto;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 23px;
  background: rgba(255,255,255,.085);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.065), 0 20px 45px rgba(0,0,0,.12);
  backdrop-filter: blur(18px);
}
.auth-v3-preview-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  padding: .15rem .1rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.auth-v3-preview-logo {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  padding: .28rem;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
}
.auth-v3-preview-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.auth-v3-preview-top > div {
  min-width: 0;
  display: grid;
}
.auth-v3-preview-top strong {
  font-size: .9rem;
}
.auth-v3-preview-top small {
  color: rgba(255,255,255,.55);
  font-size:var(--text-caption);
}
.auth-v3-preview-live {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .52rem;
  border-radius: 999px;
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.07);
  font-size:var(--text-caption);
  font-weight:var(--font-weight-semibold, 600);
}
.auth-v3-preview-live i {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: #7de4a3;
  box-shadow: 0 0 0 4px rgba(125,228,163,.11);
}
.auth-v3-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .62rem;
  margin: .85rem 0;
}
.auth-v3-preview-grid article {
  min-width: 0;
  display: grid;
  gap: .08rem;
  padding: .72rem;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 15px;
  background: rgba(255,255,255,.06);
}
.auth-v3-preview-grid span,
.auth-v3-preview-grid small {
  color: rgba(255,255,255,.55);
  font-size:var(--text-caption);
}
.auth-v3-preview-grid strong {
  margin-block: .08rem;
  font-size: 1.3rem;
  font-weight:var(--font-weight-bold, 700);
}
.auth-v3-preview-task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .68rem;
  padding: .62rem .15rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.auth-v3-preview-task > span {
  width: 1.85rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #e5f7eb;
  background: rgba(125,228,163,.12);
  font-size: .78rem;
  font-weight:var(--font-weight-bold, 700);
}
.auth-v3-preview-task > div {
  display: grid;
}
.auth-v3-preview-task strong {
  font-size: .78rem;
}
.auth-v3-preview-task small {
  color: rgba(255,255,255,.5);
  font-size:var(--text-caption);
}
.auth-v3-preview-task b {
  color: color-mix(in srgb, var(--auth-gold) 72%, #fff);
  font-size:var(--text-caption);
  font-weight:var(--font-weight-bold, 700);
}
.auth-v3-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.15rem;
  color: rgba(255,255,255,.68);
  font-size:var(--text-caption);
  font-weight: 700;
}
.auth-v3-benefits span {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
}
.auth-v3-benefits i {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: #dff7e7;
  background: rgba(125,228,163,.1);
  font-size:var(--text-caption);
  font-style: normal;
}
.auth-v3-form-panel {
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 2.6rem);
}
.auth-v3-card {
  width: min(100%, 31rem);
  padding: clamp(1.35rem, 3vw, 2.15rem);
  border: 1px solid rgba(18,35,29,.095);
  border-radius: 27px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 24px 70px rgba(20,55,44,.1), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(20px) saturate(1.04);
}
.auth-v3-register-card {
  width: min(100%, 47rem);
}
.auth-v3-card-head {
  margin-bottom: 1.35rem;
}
.auth-v3-card-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: .26rem .62rem;
  margin-bottom: .65rem;
  border: 1px solid color-mix(in srgb, var(--auth-green) 13%, transparent);
  border-radius: 999px;
  color: var(--auth-green);
  background: color-mix(in srgb, var(--auth-green) 6%, #fff);
  font-size:var(--text-caption);
  font-weight:var(--font-weight-bold, 700);
}
.auth-v3-card-head h2 {
  margin: 0;
  color: var(--auth-ink);
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.6vw, 2.15rem);
  font-weight:var(--font-weight-bold, 700);
  line-height: 1.25;
  letter-spacing:normal;
}
.auth-v3-card-head p {
  margin: .45rem 0 0;
  color: var(--auth-muted);
  font-size: .88rem;
  line-height: 1.7;
}
.auth-v3-form {
  display: grid;
  gap: .92rem;
}
.auth-v3-register-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: .9rem;
  row-gap: .72rem;
}
.auth-v3-span-2 {
  grid-column: 1 / -1;
}
.auth-v3-field-compact {
  width: min(100%, 20rem);
  justify-self: start;
}
.auth-v3 .field {
  min-width: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .38rem;
}
.auth-v3 .field label {
  margin: 0;
  color: #24372f;
  font-size: .83rem;
  font-weight:var(--font-weight-bold, 700);
}
.auth-v3-optional {
  margin-inline-start: .25rem;
  color: #89938f;
  font-size:var(--text-caption);
  font-weight: 700;
}
.auth-v3 .field input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
.auth-v3 .field select,
.auth-v3 .field textarea {
  width: 100%;
  min-height: 3.18rem;
  padding: .78rem .92rem;
  border: 1px solid rgba(28,62,50,.14);
  border-radius: 14px;
  outline: none;
  color: #172a23;
  background: rgba(249,250,247,.94);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
  font-family: inherit;
  font-size: .9rem;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.auth-v3 .field input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):hover,
.auth-v3 .field select:hover,
.auth-v3 .field textarea:hover {
  border-color: color-mix(in srgb, var(--auth-green) 26%, rgba(28,62,50,.14));
  background: #fff;
}
.auth-v3 .field input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):focus,
.auth-v3 .field select:focus,
.auth-v3 .field textarea:focus {
  border-color: color-mix(in srgb, var(--auth-green) 68%, rgba(28,62,50,.14));
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--auth-green) 10%, transparent), 0 8px 22px rgba(20,55,44,.06);
}
.auth-v3 .field input::placeholder {
  color: #9aa49f;
}
.auth-v3-field-note {
  color: #85908b;
  font-size:var(--text-caption);
  line-height: 1.5;
}
.auth-v3-color-control {
  min-height: 3.18rem;
  display: flex;
  align-items: center;
  gap: .72rem;
  padding: .5rem .65rem;
  border: 1px solid rgba(28,62,50,.14);
  border-radius: 14px;
  background: rgba(249,250,247,.94);
}
.auth-v3-color-control input[type="color"] {
  width: 2.45rem;
  height: 2.15rem;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.auth-v3-color-control span {
  color: var(--auth-muted);
  font-size:var(--text-caption);
  line-height: 1.5;
}
.auth-v3-submit,
.auth-v3 .btn.auth-v3-submit {
  width: 100%;
  min-height: 3.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: .12rem;
  padding: .74rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--auth-green-deep) 60%, transparent);
  border-radius: 15px;
  color: var(--brand-on-primary, #fff);
  background: linear-gradient(135deg, color-mix(in srgb, var(--auth-green) 96%, #fff), var(--auth-green-deep));
  box-shadow: 0 13px 30px color-mix(in srgb, var(--auth-green-deep) 19%, transparent), inset 0 1px 0 rgba(255,255,255,.18);
  font-size: .9rem;
  font-weight:var(--font-weight-bold, 700);
}
.auth-v3-submit b {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.11);
  font-size: 1rem;
  transition: transform .18s ease;
}
.auth-v3-submit:hover b {
  transform: translateX(-3px);
}
.auth-v3-divider {
  position: relative;
  margin: 1.2rem 0 1rem;
  display: grid;
  place-items: center;
}
.auth-v3-divider::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: rgba(18,35,29,.09);
}
.auth-v3-divider span {
  position: relative;
  padding-inline: .6rem;
  color: #9aa39f;
  background: rgba(255,255,255,.9);
  font-size:var(--text-caption);
  font-weight:var(--font-weight-semibold, 600);
}
.auth-v3-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1rem;
}
.auth-v3-links a {
  color: var(--auth-green);
  font-size:var(--text-caption);
  font-weight:var(--font-weight-semibold, 600);
}
.auth-v3-links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-v3-panel-note,
.auth-v3-terms {
  color: #7d8984;
  font-size:var(--text-caption);
  line-height: 1.7;
  text-align: center;
}
.auth-v3-terms {
  margin: 1rem 0 0;
}
.auth-v3-onboarding-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: rgba(255,255,255,.7);
  font-size:var(--text-caption);
  font-weight:var(--font-weight-semibold, 600);
}
.auth-v3-onboarding-head strong {
  color: color-mix(in srgb, var(--auth-gold) 75%, #fff);
}
.auth-v3-progress {
  height: .36rem;
  margin: .75rem 0 1rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.auth-v3-progress i {
  display: block;
  width: 34%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--auth-gold), color-mix(in srgb, var(--auth-gold) 62%, #fff));
}
.auth-v3-onboarding-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .72rem .3rem;
  border-top: 1px solid rgba(255,255,255,.075);
  opacity: .56;
}
.auth-v3-onboarding-step.active {
  opacity: 1;
}
.auth-v3-onboarding-step > b {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: color-mix(in srgb, var(--auth-gold) 78%, #fff);
  background: rgba(255,255,255,.08);
  font-size:var(--text-caption);
}
.auth-v3-onboarding-step > div {
  display: grid;
}
.auth-v3-onboarding-step strong {
  font-size: .8rem;
}
.auth-v3-onboarding-step small {
  color: rgba(255,255,255,.5);
  font-size:var(--text-caption);
}
.auth-v3-onboarding-step > span {
  color: rgba(255,255,255,.58);
  font-size:var(--text-caption);
  font-weight:var(--font-weight-semibold, 600);
}
.auth-v3-success {
  display: grid;
  grid-template-rows: auto 1fr;
}
.auth-v3-success-layout {
  width: min(100% - 2rem, 980px);
  margin-inline: auto;
  display: grid;
  place-items: center;
  padding: 2rem 0 4rem;
}
.auth-v3-success-card {
  width: min(100%, 48rem);
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 3.2rem);
  border: 1px solid rgba(18,35,29,.09);
  border-radius: 32px;
  background:
    radial-gradient(28rem 18rem at 100% 0%, color-mix(in srgb, var(--auth-gold) 8%, transparent), transparent 68%),
    rgba(255,255,255,.88);
  box-shadow: 0 28px 80px rgba(20,55,44,.11);
  text-align: center;
}
.auth-v3-success-icon {
  width: 4.8rem;
  height: 4.8rem;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ok) 20%, transparent);
  border-radius: 24px;
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 9%, #fff);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--ok) 12%, transparent);
  font-size: 1.9rem;
  font-weight:var(--font-weight-bold, 700);
}
.auth-v3-success-card h1 {
  max-width: 18ch;
  margin: .2rem auto 0;
  color: var(--auth-ink);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.3;
  font-weight:var(--font-weight-bold, 700);
}
.auth-v3-success-lead {
  max-width: 38rem;
  margin: .8rem auto 1.5rem;
  color: var(--auth-muted);
  font-size: .9rem;
  line-height: 1.8;
}
.auth-v3-success-credentials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin: 1.5rem 0;
  text-align: start;
}
.auth-v3-success-credentials > div {
  min-width: 0;
  display: grid;
  gap: .35rem;
  padding: .9rem;
  border: 1px solid rgba(18,35,29,.08);
  border-radius: 16px;
  background: #f7f8f5;
}
.auth-v3-success-credentials span {
  color: var(--auth-muted);
  font-size:var(--text-caption);
  font-weight:var(--font-weight-semibold, 600);
}
.auth-v3-success-credentials code,
.auth-v3-success-credentials strong {
  overflow-wrap: anywhere;
  color: var(--auth-ink);
  font-family: inherit;
  font-size: .84rem;
  font-weight:var(--font-weight-bold, 700);
}
.auth-v3-success-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}
.auth-v3-secondary-button {
  min-height: 3.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1rem;
  border: 1px solid rgba(18,35,29,.12);
  border-radius: 15px;
  color: var(--auth-ink);
  background: rgba(255,255,255,.82);
  font-size: .84rem;
  font-weight:var(--font-weight-bold, 700);
}
.auth-v3-success-next {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(18,35,29,.08);
  text-align: start;
}
.auth-v3-success-next span {
  color: var(--auth-green);
  font-size:var(--text-caption);
  font-weight:var(--font-weight-bold, 700);
}
.auth-v3-success-next p {
  margin: .25rem 0 0;
  color: var(--auth-muted);
  font-size: .78rem;
  line-height: 1.75;
}
@media (max-width: 1120px) {
  .auth-v3-layout,
  .auth-v3-register-layout {
    grid-template-columns: minmax(0, .9fr) minmax(27rem, 1.1fr);
  }
  .auth-v3-showcase {
    padding: 2rem;
  }
  .auth-v3-showcase h1 {
    font-size: clamp(2.25rem, 4.3vw, 3.7rem);
  }
}
@media (max-width: 900px) {
  .auth-v3-header {
    width: min(100% - 1.4rem, 760px);
    min-height: 4.8rem;
  }
  .auth-v3-layout,
  .auth-v3-register-layout {
    width: min(100% - 1.4rem, 760px);
    min-height: auto;
    grid-template-columns: 1fr;
    gap: .8rem;
  }
  .auth-v3-form-panel {
    order: 1;
    padding: .5rem 0 0;
  }
  .auth-v3-showcase {
    order: 2;
    min-height: auto;
    padding: 1.4rem;
    border-radius: 25px;
  }
  .auth-v3-showcase-copy {
    max-width: none;
  }
  .auth-v3-showcase h1 {
    max-width: none;
    font-size: clamp(1.9rem, 8vw, 3rem);
  }
  .auth-v3-preview,
  .auth-v3-onboarding {
    width: 100%;
  }
  .auth-v3-card,
  .auth-v3-register-card {
    width: 100%;
    border-radius: 24px;
  }
  .auth-v3-panel-note {
    display: none;
  }
}
@media (max-width: 600px) {
  .auth-v3-header {
    width: calc(100% - 1.1rem);
    min-height: 4.55rem;
  }
  .auth-v3-brand-mark {
    width: 2.6rem;
    height: 2.6rem;
    flex-basis: 2.6rem;
    border-radius: 13px;
  }
  .auth-v3-brand small {
    display: none;
  }
  .auth-v3-header-link {
    min-height: 2.45rem;
    padding-inline: .72rem;
    font-size:var(--text-caption);
  }
  .auth-v3-layout,
  .auth-v3-register-layout {
    width: calc(100% - 1.1rem);
  }
  .auth-v3-card,
  .auth-v3-register-card {
    padding: 1.08rem;
    border-radius: 21px;
  }
  .auth-v3-card-head {
    margin-bottom: 1rem;
  }
  .auth-v3-card-head h2 {
    font-size: 1.55rem;
  }
  .auth-v3-register-form {
    grid-template-columns: 1fr;
  }
  .auth-v3-field-compact {
    width: 100%;
  }
  .auth-v3-register-form .auth-v3-span-2 {
    grid-column: auto;
  }
  .auth-v3 .field input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
  .auth-v3 .field select,
  .auth-v3 .field textarea,
  .auth-v3-submit,
  .auth-v3 .btn.auth-v3-submit {
    min-height: 3.05rem;
  }
  .auth-v3-showcase {
    padding: 1.15rem;
    gap: 1.2rem;
  }
  .auth-v3-showcase-copy > p {
    margin-top: .7rem;
    font-size: .83rem;
    line-height: 1.7;
  }
  .auth-v3-preview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .4rem;
  }
  .auth-v3-preview-grid article {
    padding: .55rem .45rem;
  }
  .auth-v3-preview-grid strong {
    font-size: 1.05rem;
  }
  .auth-v3-benefits {
    display: grid;
    grid-template-columns: 1fr;
  }
  .auth-v3-success-layout {
    width: calc(100% - 1.1rem);
    padding: 1rem 0 2rem;
  }
  .auth-v3-success-card {
    padding: 1.2rem;
    border-radius: 24px;
  }
  .auth-v3-success-credentials,
  .auth-v3-success-actions {
    grid-template-columns: 1fr;
  }
}
html[data-theme="dark"] .auth-v3 {
  --auth-ink: #edf3f0;
  --auth-muted: #9eaea7;
  background:
    radial-gradient(42rem 28rem at 0% 0%, color-mix(in srgb, var(--brand-accent) 5%, transparent), transparent 68%),
    #0a1210;
}
html[data-theme="dark"] .auth-v3-brand,
html[data-theme="dark"] .auth-v3-card-head h2,
html[data-theme="dark"] .auth-v3-success-card h1,
html[data-theme="dark"] .auth-v3-success-credentials code,
html[data-theme="dark"] .auth-v3-success-credentials strong {
  color: var(--auth-ink);
}
html[data-theme="dark"] .auth-v3-brand-mark,
html[data-theme="dark"] .auth-v3-header-link,
html[data-theme="dark"] .auth-v3-card,
html[data-theme="dark"] .auth-v3-success-card {
  border-color: rgba(148,163,184,.14);
  background: rgba(18,29,25,.88);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
html[data-theme="dark"] .auth-v3 .field label {
  color: #dbe6e1;
}
html[data-theme="dark"] .auth-v3 .field input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .auth-v3 .field select,
html[data-theme="dark"] .auth-v3 .field textarea,
html[data-theme="dark"] .auth-v3-color-control,
html[data-theme="dark"] .auth-v3-success-credentials > div {
  color: #edf3f0 !important;
  border-color: rgba(148,163,184,.16) !important;
  background: #111d19 !important;
}
html[data-theme="dark"] .auth-v3-divider span {
  background: #121d19;
}
html[data-theme="dark"] .auth-v3-secondary-button {
  color: #edf3f0;
  border-color: rgba(148,163,184,.16);
  background: #111d19;
}
html:has(.saas-landing-v3),
body:has(.saas-landing-v3) {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
body:has(.saas-landing-v3) {
  position: relative;
}
.saas-landing-v3 {
  --landing-ink: #10231d;
  --landing-muted: #64746d;
  --landing-green: #0f5745;
  --landing-green-deep: #083a2e;
  --landing-gold: #d4ad49;
  --landing-paper: #f6f8f4;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  min-height: 100dvh;
  overflow: hidden;
  color: var(--landing-ink);
  background:
    radial-gradient(55rem 34rem at 92% -12%, rgba(212,173,73,.13), transparent 64%),
    radial-gradient(42rem 32rem at -10% 36%, rgba(15,87,69,.08), transparent 67%),
    var(--landing-paper);
}
.saas-landing-v3::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 31rem;
  pointer-events: none;
  background:
    linear-gradient(rgba(15,87,69,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,87,69,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
  animation: saasGridDrift 22s linear infinite;
}
.saas-landing-v3::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 34rem;
  height: 34rem;
  inset: 9rem auto auto -16rem;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,173,73,.14), rgba(212,173,73,0) 66%);
  filter: blur(2px);
  animation: saasAmbientFloat 11s ease-in-out infinite alternate;
}
.saas-site-header,
.saas-home,
.saas-footer-v3 {
  position: relative;
  z-index: 2;
}
.saas-site-header {
  width: min(100% - 3rem, 1320px);
  min-height: 5.75rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-inline-end: 6.9rem;
  border-bottom: 1px solid rgba(15,87,69,.1);
}
.saas-brand {
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  color: var(--landing-ink);
}
.saas-brand-mark {
  width: 3.05rem;
  height: 3.05rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: .3rem;
  border-radius: 15px;
  background: #fff;
  border: 1px solid rgba(15,87,69,.11);
  box-shadow: 0 8px 24px rgba(8,58,46,.09);
  animation: saasLogoBreathe 5s ease-in-out infinite;
}
.saas-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.saas-brand-copy { display: grid; line-height: 1.2; }
.saas-brand-copy strong { font-size: 1.08rem; font-weight:var(--font-weight-bold, 700); letter-spacing:normal; }
.saas-brand-copy small { margin-top: .23rem; color: var(--landing-muted); font-size:var(--text-caption); font-weight: 700; }
.saas-header-actions {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.saas-header-login,
.saas-header-start {
  min-height: 2.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem 1rem;
  border-radius: 12px;
  font-size: .86rem;
  font-weight:var(--font-weight-semibold, 600);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.saas-header-login {
  color: var(--landing-ink);
  border: 1px solid rgba(15,87,69,.14);
  background: rgba(255,255,255,.62);
}
.saas-header-start {
  color: #fff;
  background: var(--landing-green);
  box-shadow: 0 9px 22px rgba(8,58,46,.16);
}
@media (hover:hover) and (pointer:fine) {
  .saas-header-login:hover,
  .saas-header-start:hover,
  .saas-primary-action:hover,
  .saas-secondary-action:hover,
  .saas-final-cta > a:hover { transform: translateY(-2px); }
}
.saas-home {
  width: min(100% - 3rem, 1320px);
  margin-inline: auto;
}
.saas-hero-v3 {
  min-height: 43rem;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(32rem, 1.1fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5.5rem);
  padding: 4.8rem 0 5.3rem;
}
.saas-hero-copy-v3 { max-width: 37rem; }
.saas-eyebrow {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.2rem;
  padding: .42rem .75rem;
  border-radius: 999px;
  color: var(--landing-green);
  background: rgba(15,87,69,.07);
  border: 1px solid rgba(15,87,69,.1);
  font-size: .8rem;
  font-weight:var(--font-weight-semibold, 600);
}
.saas-eyebrow > span {
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: var(--landing-gold);
  box-shadow: 0 0 0 5px rgba(212,173,73,.12);
  animation: saasStatusPulse 2.4s ease-in-out infinite;
}
.saas-hero-copy-v3 h1 {
  margin: 0;
  color: var(--landing-ink);
  font-family: var(--font-body);
  font-size: clamp(3.3rem, 5.3vw, 5.55rem);
  font-weight:var(--font-weight-bold, 700);
  letter-spacing:normal;
  line-height: 1.03;
}
.saas-hero-copy-v3 h1 em {
  position: relative;
  display: inline-block;
  color: var(--landing-green);
  font-style: normal;
}
.saas-hero-copy-v3 h1 em::after {
  content: "";
  position: absolute;
  inset-inline: .05em;
  bottom: -.08em;
  height: .1em;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--landing-gold), rgba(212,173,73,.2));
}
.saas-lead-v3 {
  max-width: 34rem;
  margin: 1.65rem 0 0;
  color: var(--landing-muted);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.95;
}
.saas-cta-v3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .72rem;
  margin-top: 1.8rem;
}
.saas-primary-action,
.saas-secondary-action {
  min-height: 3.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  padding: .72rem 1.18rem;
  border-radius: 15px;
  font-size: .92rem;
  font-weight:var(--font-weight-bold, 700);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.saas-primary-action {
  color: #fff;
  background: linear-gradient(135deg, var(--landing-green), var(--landing-green-deep));
  box-shadow: 0 15px 35px rgba(8,58,46,.2), inset 0 1px 0 rgba(255,255,255,.14);
  position: relative;
  overflow: hidden;
}
.saas-primary-action::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.26) 48%, transparent 64%);
  transform: translateX(140%);
  animation: saasButtonSheen 4.6s ease-in-out infinite;
}
.saas-primary-action > * { position: relative; z-index: 1; }
.saas-primary-action b { font-size: 1.25rem; line-height: 1; }
.saas-secondary-action {
  color: var(--landing-ink);
  border: 1px solid rgba(15,87,69,.14);
  background: rgba(255,255,255,.7);
  box-shadow: 0 8px 22px rgba(8,58,46,.06);
}
.saas-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.15rem;
  margin-top: 1.45rem;
  color: #6d7b75;
  font-size:var(--text-caption);
  font-weight: 700;
}
.saas-trust-row span { display: inline-flex; align-items: center; gap: .34rem; }
.saas-trust-row i { color: var(--landing-green); font-style: normal; font-weight:var(--font-weight-bold, 700); }
.saas-product-stage {
  position: relative;
  min-width: 0;
  perspective: 1400px;
  isolation: isolate;
}
.saas-orbit {
  position: absolute;
  z-index: 0;
  border: 1px dashed rgba(15,87,69,.2);
  border-radius: 50%;
  pointer-events: none;
  animation: saasOrbit 20s linear infinite;
}
.saas-orbit i { position:absolute; width:.52rem; height:.52rem; border-radius:50%; background:var(--landing-gold); box-shadow:0 0 0 .34rem rgba(212,173,73,.13); }
.saas-orbit-a { width:25rem; height:25rem; inset:-5rem auto auto -6rem; }
.saas-orbit-a i { top:16%; right:2%; }
.saas-orbit-b { width:18rem; height:18rem; inset:auto -5rem -4rem auto; border-color:rgba(212,173,73,.23); animation-duration:16s; animation-direction:reverse; }
.saas-orbit-b i { bottom:13%; left:2%; background:#4fb285; box-shadow:0 0 0 .34rem rgba(79,178,133,.13); }
.saas-spark { position:absolute; z-index:1; color:var(--landing-gold); font-size:1rem; line-height:1; pointer-events:none; animation:saasSparkle 3.2s ease-in-out infinite; }
.saas-spark-a { top:8%; inset-inline-start:7%; }
.saas-spark-b { bottom:12%; inset-inline-end:2%; font-size:var(--text-caption); animation-delay:1.15s; }
.saas-particle { position:absolute; z-index:1; width:.42rem; height:.42rem; border-radius:50%; pointer-events:none; background:rgba(212,173,73,.85); box-shadow:0 0 0 .35rem rgba(212,173,73,.11); animation:saasParticleDrift 6s ease-in-out infinite; }
.saas-particle-a { top:26%; inset-inline-start:-2%; animation-delay:-1.4s; }
.saas-particle-b { bottom:9%; inset-inline-start:18%; width:.28rem; height:.28rem; background:rgba(79,178,133,.8); box-shadow:0 0 0 .28rem rgba(79,178,133,.11); animation-delay:-3.5s; }
.saas-particle-c { top:51%; inset-inline-end:-2%; width:.31rem; height:.31rem; animation-delay:-5s; }
.saas-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}
.saas-glow-one { width: 19rem; height: 19rem; inset: -5rem -3rem auto auto; background: rgba(212,173,73,.13); animation:saasGlowBreathe 7s ease-in-out infinite; }
.saas-glow-two { width: 24rem; height: 24rem; inset: auto auto -7rem -6rem; background: rgba(15,87,69,.1); animation:saasGlowBreathe 8.5s ease-in-out infinite reverse; }
.saas-product-window {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(8,58,46,.16);
  background: #fff;
  box-shadow: 0 40px 90px rgba(8,58,46,.19), 0 8px 28px rgba(8,58,46,.08);
  transform: rotateY(-2deg) rotateX(1deg);
  animation: saasProductFloat 7s ease-in-out infinite;
}
.saas-window-bar {
  min-height: 4.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1rem;
  color: #fff;
  background:
    radial-gradient(18rem 8rem at 90% -20%, rgba(212,173,73,.2), transparent 70%),
    linear-gradient(135deg, var(--landing-green-deep), var(--landing-green));
}
.saas-window-school { display: flex; align-items: center; gap: .65rem; }
.saas-window-school > div { display: grid; line-height: 1.25; }
.saas-window-school strong { font-size: .88rem; }
.saas-window-school small { margin-top: .18rem; color: rgba(255,255,255,.6); font-size:var(--text-caption); }
.saas-window-logo { width: 2.45rem; height: 2.45rem; display:grid; place-items:center; padding:.25rem; border-radius:11px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); }
.saas-window-logo img { width:100%; height:100%; object-fit:contain; }
.saas-live { display:inline-flex; align-items:center; gap:.4rem; padding:.34rem .55rem; border-radius:999px; background:rgba(255,255,255,.09); color:rgba(255,255,255,.82); font-size:var(--text-caption); font-weight:var(--font-weight-semibold, 600); }
.saas-live i { width:.42rem; height:.42rem; border-radius:50%; background:#64d694; box-shadow:0 0 0 4px rgba(100,214,148,.12); animation:saasLivePulse 1.8s ease-out infinite; }
.saas-window-body { min-height: 25.5rem; display:grid; grid-template-columns:4.15rem minmax(0,1fr); background:#f8faf8; }
.saas-preview-nav { display:flex; flex-direction:column; align-items:center; gap:.52rem; padding:.82rem .55rem; border-inline-end:1px solid #e8ece9; background:#fff; }
.saas-preview-nav span { width:2.45rem; height:2.45rem; display:grid; place-items:center; border-radius:11px; color:#86928d; font-size:1rem; font-weight:var(--font-weight-bold, 700); }
.saas-preview-nav span.active { color:var(--landing-green); background:rgba(15,87,69,.08); box-shadow:inset 0 0 0 1px rgba(15,87,69,.08); }
.saas-preview-main { min-width:0; padding:1rem; }
.saas-preview-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.saas-preview-heading > div { display:grid; }
.saas-preview-heading small { color:#8a9691; font-size:var(--text-caption); font-weight:700; }
.saas-preview-heading strong { margin-top:.16rem; color:#173128; font-size:.92rem; }
.saas-preview-heading > span { padding:.3rem .52rem; border-radius:9px; color:var(--landing-green); background:#fff; border:1px solid #e4e9e6; font-size:var(--text-caption); font-weight:var(--font-weight-semibold, 600); }
.saas-preview-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; margin-top:.9rem; }
.saas-preview-stats article { min-width:0; display:grid; gap:.14rem; padding:.8rem; border:1px solid #e6ebe8; border-radius:13px; background:#fff; box-shadow:0 5px 16px rgba(8,58,46,.035); }
.saas-preview-stats span { color:#84918b; font-size:var(--text-caption); font-weight:700; }
.saas-preview-stats strong { color:#16362a; font-size:1.35rem; line-height:1.2; font-weight:var(--font-weight-bold, 700); }
.saas-preview-stats small { color:#9aa49f; font-size:var(--text-caption); }
.saas-preview-lower { display:grid; grid-template-columns:1.08fr .92fr; gap:.65rem; margin-top:.65rem; }
.saas-preview-chart,.saas-preview-activity { min-width:0; padding:.85rem; border:1px solid #e6ebe8; border-radius:14px; background:#fff; }
.saas-preview-card-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.saas-preview-card-head strong { color:#173128; font-size:var(--text-caption); }
.saas-preview-card-head span { color:var(--landing-green); font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }
.saas-bars { height:8.3rem; display:flex; align-items:end; justify-content:space-between; gap:.36rem; padding-top:.85rem; }
.saas-bars i { flex:1; min-width:0; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,#2e8069,var(--landing-green)); opacity:.82; transform-origin:bottom; animation:saasBarBreathe 3.4s ease-in-out infinite; }
.saas-bars i:nth-child(2){animation-delay:.18s}.saas-bars i:nth-child(3){animation-delay:.36s}.saas-bars i:nth-child(4){animation-delay:.54s}.saas-bars i:nth-child(5){animation-delay:.72s}.saas-bars i:nth-child(6){animation-delay:.9s}.saas-bars i:nth-child(7){animation-delay:1.08s}
.saas-bars i:nth-child(1){height:42%}.saas-bars i:nth-child(2){height:58%}.saas-bars i:nth-child(3){height:49%}.saas-bars i:nth-child(4){height:77%}.saas-bars i:nth-child(5){height:66%}.saas-bars i:nth-child(6){height:88%}.saas-bars i:nth-child(7){height:72%}
.saas-bar-labels { display:flex; justify-content:space-between; margin-top:.35rem; color:#a4ada9; font-size:var(--text-caption); }
.saas-mini-task { display:flex; align-items:center; gap:.52rem; padding:.66rem 0; border-bottom:1px solid #edf0ee; }
.saas-mini-task:last-child { border-bottom:0; }
.saas-mini-task > i { width:1.45rem; height:1.45rem; display:grid; place-items:center; flex:0 0 auto; border-radius:7px; color:#9aa49f; background:#f3f6f4; font-style:normal; font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }
.saas-mini-task > i.ok { color:#187149; background:#e7f7ee; }
.saas-mini-task > div { min-width:0; display:grid; }
.saas-mini-task strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#273d35; font-size:var(--text-caption); }
.saas-mini-task small { margin-top:.1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#9aa49f; font-size:var(--text-caption); }
.saas-floating-card {
  position:absolute;
  z-index:3;
  min-width:12rem;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.68rem .75rem;
  border:1px solid rgba(15,87,69,.12);
  border-radius:14px;
  background:rgba(255,255,255,.93);
  box-shadow:0 18px 45px rgba(8,58,46,.15);
  backdrop-filter:blur(10px);
}
.saas-floating-card > span { width:2rem; height:2rem; display:grid; place-items:center; flex:0 0 auto; border-radius:9px; color:#fff; background:var(--landing-green); font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }
.saas-floating-card > div { display:grid; line-height:1.25; }
.saas-floating-card strong { color:#173128; font-size:var(--text-caption); }
.saas-floating-card small { margin-top:.15rem; color:#8b9892; font-size:var(--text-caption); }
.saas-floating-card-a { inset-inline-start:-2.2rem; bottom:3.2rem; }
.saas-floating-card-b { inset-inline-end:-1.4rem; top:5.8rem; }
.saas-floating-card-a { animation:saasCardFloat 5.5s ease-in-out infinite; }
.saas-floating-card-b { animation:saasCardFloat 6.2s ease-in-out infinite reverse; }
.saas-floating-card-b > span { color:#624d0f; background:#f5e7b5; }
@keyframes saasGridDrift { to { background-position:42px 42px,42px 42px; } }
@keyframes saasAmbientFloat { to { transform:translate3d(5rem,3rem,0) scale(1.12); } }
@keyframes saasLogoBreathe { 50% { transform:translateY(-2px); box-shadow:0 13px 28px rgba(8,58,46,.14); } }
@keyframes saasStatusPulse { 50% { box-shadow:0 0 0 8px rgba(212,173,73,0); transform:scale(1.08); } }
@keyframes saasButtonSheen { 15%,100% { transform:translateX(-140%); } 50% { transform:translateX(140%); } }
@keyframes saasOrbit { to { transform:rotate(360deg); } }
@keyframes saasSparkle { 50% { opacity:.22; transform:scale(.65) rotate(45deg); } }
@keyframes saasGlowBreathe { 50% { transform:scale(1.13); opacity:.58; } }
@keyframes saasProductFloat { 50% { transform:translateY(-9px) rotateY(-2deg) rotateX(1deg); } }
@keyframes saasLivePulse { 70% { box-shadow:0 0 0 8px rgba(100,214,148,0); } 100% { box-shadow:0 0 0 0 rgba(100,214,148,0); } }
@keyframes saasBarBreathe { 50% { transform:scaleY(.78); filter:saturate(1.2); } }
@keyframes saasCardFloat { 50% { transform:translateY(-8px); } }
@keyframes saasParticleDrift { 50% { transform:translate3d(9px,-15px,0) scale(.72); opacity:.35; } }
.saas-reveal { opacity:0; transform:translateY(26px); transition:opacity .68s var(--ease-emphasized) var(--reveal-delay,0ms),transform .68s var(--ease-emphasized) var(--reveal-delay,0ms); }
.saas-reveal[data-reveal="right"] { transform:translateX(30px); }
.saas-reveal[data-reveal="down"] { transform:translateY(-18px); }
.saas-reveal.is-visible { opacity:1; transform:translate3d(0,0,0); }
@media (min-width:821px) { .saas-plan-card-featured.saas-reveal.is-visible { transform:translateY(-.55rem); } }
.saas-capabilities { padding:5.2rem 0 5.6rem; border-top:1px solid rgba(15,87,69,.09); }
.saas-section-intro { max-width:42rem; margin-bottom:2rem; }
.saas-section-intro > span { color:var(--landing-green); font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }
.saas-section-intro h2 { margin:.45rem 0 0; color:var(--landing-ink); font-size:clamp(2rem,3vw,3rem); line-height:1.2; letter-spacing:normal; }
.saas-section-intro p { max-width:36rem; margin:.7rem 0 0; color:var(--landing-muted); line-height:1.8; font-size:.9rem; font-weight:600; }
.saas-feature-grid-v3 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; }
.saas-feature-v3 { position:relative; min-height:15.2rem; overflow:hidden; padding:1.3rem; border:1px solid rgba(15,87,69,.1); border-radius:20px; background:rgba(255,255,255,.72); box-shadow:0 12px 34px rgba(8,58,46,.045); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.saas-feature-v3::after { content:""; position:absolute; width:8rem; height:8rem; inset:auto -3.8rem -4.4rem auto; border-radius:50%; background:radial-gradient(circle,rgba(212,173,73,.15),transparent 67%); transition:transform .45s ease; }
.saas-feature-v3 > b { position:absolute; inset-inline-end:1.1rem; top:.85rem; color:rgba(15,87,69,.12); font-size:2rem; font-weight:var(--font-weight-bold, 700); }
.saas-feature-icon { width:3rem; height:3rem; display:grid; place-items:center; margin-bottom:1.5rem; border-radius:14px; color:var(--landing-green); background:rgba(15,87,69,.08); border:1px solid rgba(15,87,69,.08); font-size:1.15rem; font-weight:var(--font-weight-bold, 700); transition:transform .3s var(--ease-emphasized); }
.saas-feature-v3 h3 { margin:0; color:#173128; font-size:1.02rem; }
.saas-feature-v3 p { margin:.62rem 0 0; color:#74827c; font-size:.8rem; font-weight:600; line-height:1.8; }
@media (hover:hover) and (pointer:fine) { .saas-feature-v3:hover { transform:translateY(-5px); border-color:rgba(15,87,69,.18); box-shadow:0 20px 44px rgba(8,58,46,.09); } .saas-feature-v3:hover::after { transform:scale(1.65); } .saas-feature-v3:hover .saas-feature-icon { transform:rotate(-8deg) scale(1.08); } }
.saas-pricing { padding:5.6rem 0; border-top:1px solid rgba(15,87,69,.09); }
.saas-pricing-head { display:flex; align-items:end; justify-content:space-between; gap:2rem; }
.saas-pricing-note { flex:0 0 auto; margin-bottom:2rem; padding:.5rem .75rem; border:1px solid rgba(15,87,69,.12); border-radius:999px; color:#537168; background:rgba(255,255,255,.68); font-size:var(--text-caption); font-weight:var(--font-weight-semibold, 600); }
.saas-pricing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.saas-plan-card { position:relative; display:flex; flex-direction:column; min-height:31rem; padding:1.55rem; border:1px solid rgba(15,87,69,.12); border-radius:23px; background:rgba(255,255,255,.76); box-shadow:0 14px 38px rgba(8,58,46,.055); }
.saas-plan-card-featured { border-color:rgba(15,87,69,.42); background:linear-gradient(160deg,#f9fffb,#edf8f2); box-shadow:0 23px 48px rgba(8,58,46,.14); transform:translateY(-.55rem); }
.saas-plan-badge { position:absolute; top:-.78rem; inset-inline-start:1.35rem; padding:.34rem .72rem; border-radius:999px; color:#fff; background:var(--landing-green); box-shadow:0 8px 18px rgba(8,58,46,.18); font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }
.saas-plan-top > span { color:var(--landing-green); font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }
.saas-plan-top h3 { margin:.35rem 0 0; color:var(--landing-ink); font-size:1.55rem; }
.saas-plan-top p { min-height:3rem; margin:.35rem 0 0; color:#74827c; font-size:.8rem; font-weight:600; line-height:1.75; }
.saas-plan-price { display:grid; gap:.1rem; margin:1.35rem 0; padding:1.1rem 0; border-block:1px solid rgba(15,87,69,.1); }
.saas-plan-price strong { color:var(--landing-ink); font-size:2rem; line-height:1; letter-spacing:normal; }
.saas-plan-price span { color:#71837c; font-size:var(--text-caption); font-weight:var(--font-weight-semibold, 600); }
.saas-plan-card ul { display:grid; gap:.68rem; margin:0; padding:0; list-style:none; color:#38544b; font-size:.8rem; font-weight:700; }
.saas-plan-card li { display:flex; align-items:start; gap:.55rem; line-height:1.6; }
.saas-plan-card li::before { content:'✓'; flex:0 0 auto; color:#1a8354; font-weight:var(--font-weight-bold, 700); }
.saas-plan-card li.muted { color:#99a6a1; font-weight:600; }
.saas-plan-card li.muted::before { content:'—'; color:#a7b1ad; }
.saas-plan-card a { min-height:3rem; display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin-top:auto; padding:.7rem .9rem; border:1px solid rgba(15,87,69,.17); border-radius:13px; color:var(--landing-green); background:#fff; font-size:.82rem; font-weight:var(--font-weight-bold, 700); transition:transform .18s ease,background .18s ease; }
.saas-plan-card a:hover { transform:translateY(-2px); background:#f5fbf7; }
.saas-plan-card-featured a { color:#fff; border-color:var(--landing-green); background:var(--landing-green); }
.saas-plan-card-featured a:hover { background:#0c4939; }
.saas-final-cta { position:relative; min-height:18rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; overflow:hidden; margin-bottom:2.4rem; padding:2.4rem clamp(1.5rem,4vw,3.4rem); border-radius:28px; color:#fff; background:radial-gradient(28rem 18rem at 10% 0%,rgba(212,173,73,.22),transparent 70%),linear-gradient(135deg,#07382d,#0e5a46); box-shadow:0 28px 65px rgba(8,58,46,.18); }
.saas-final-cta::before { content:""; position:absolute; width:18rem; height:18rem; inset:-10rem auto auto 22%; border:1px solid rgba(255,255,255,.14); border-radius:50%; box-shadow:0 0 0 2.8rem rgba(255,255,255,.035),0 0 0 5.6rem rgba(255,255,255,.025); animation:saasOrbit 19s linear infinite reverse; }
.saas-final-cta > * { position:relative; z-index:1; }
.saas-final-cta > div { max-width:40rem; }
.saas-final-cta span { color:#e5cc80; font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }
.saas-final-cta h2 { margin:.45rem 0 0; font-size:clamp(2rem,3.4vw,3.4rem); line-height:1.2; letter-spacing:normal; }
.saas-final-cta p { margin:.65rem 0 0; color:rgba(255,255,255,.68); font-size:.88rem; }
.saas-final-cta > a { min-height:3.45rem; display:inline-flex; align-items:center; justify-content:center; gap:.8rem; flex:0 0 auto; padding:.75rem 1.25rem; border-radius:15px; color:#173128; background:#fff; box-shadow:0 12px 28px rgba(0,0,0,.16); font-size:.9rem; font-weight:var(--font-weight-bold, 700); transition:transform .18s ease; }
.saas-final-cta > a b { font-size:1.2rem; }
.saas-footer-v3 { width:min(100% - 3rem,1320px); min-height:5rem; margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; color:#7c8983; border-top:1px solid rgba(15,87,69,.09); font-size:var(--text-caption); font-weight:700; }
.saas-landing-v3 ~ .theme-switcher-floating .theme-toggle,
body:has(.saas-landing-v3) .theme-switcher-floating .theme-toggle {
  border-color: rgba(15,87,69,.14);
  background: rgba(255,255,255,.86);
  color: var(--landing-ink, #10231d);
  box-shadow: 0 8px 22px rgba(8,58,46,.09);
}
@media (max-width: 1100px) {
  .saas-hero-v3 { grid-template-columns:minmax(0,.9fr) minmax(26rem,1.1fr); gap:2rem; }
  .saas-hero-copy-v3 h1 { font-size:clamp(3rem,5.8vw,4.7rem); }
  .saas-floating-card-a { inset-inline-start:-.8rem; }
  .saas-floating-card-b { inset-inline-end:-.5rem; }
  .saas-feature-grid-v3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .saas-pricing-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
}
@media (max-width: 820px) {
  .saas-site-header { width:min(100% - 1.5rem,1320px); min-height:4.9rem; padding-inline-end:5.8rem; }
  .saas-brand-copy small { display:none; }
  .saas-header-login { display:none; }
  .saas-home { width:min(100% - 1.5rem,1320px); }
  .saas-hero-v3 { min-height:0; grid-template-columns:1fr; gap:3.2rem; padding:3rem 0 4.2rem; }
  .saas-hero-copy-v3 { max-width:40rem; }
  .saas-hero-copy-v3 h1 { font-size:clamp(3rem,12vw,4.8rem); }
  .saas-lead-v3 { max-width:39rem; }
  .saas-product-stage { width:min(100%,43rem); margin-inline:auto; }
  .saas-product-window { transform:none; }
  .saas-floating-card-a { inset-inline-start:-.3rem; bottom:2rem; }
  .saas-floating-card-b { inset-inline-end:-.2rem; top:4.6rem; }
  .saas-capabilities { padding:4rem 0; }
  .saas-pricing { padding:4rem 0; }
  .saas-pricing-head { align-items:start; flex-direction:column; gap:0; }
  .saas-pricing-note { margin:0 0 1.25rem; }
  .saas-pricing-grid { grid-template-columns:1fr; max-width:34rem; margin-inline:auto; }
  .saas-plan-card { min-height:0; }
  .saas-plan-card-featured { transform:none; }
  .saas-final-cta { align-items:flex-start; flex-direction:column; min-height:0; padding:2rem; }
  .saas-footer-v3 { width:min(100% - 1.5rem,1320px); }
}
@media (max-width: 560px) {
  .saas-site-header { padding-inline-end:5rem; }
  .saas-brand-mark { width:2.65rem; height:2.65rem; border-radius:13px; }
  .saas-brand-copy strong { font-size:.96rem; }
  .saas-header-start { min-height:2.5rem; padding-inline:.8rem; font-size:.78rem; }
  .saas-hero-v3 { padding-top:2.2rem; gap:2.5rem; }
  .saas-eyebrow { font-size:var(--text-caption); }
  .saas-hero-copy-v3 h1 { font-size:clamp(2.65rem,14vw,4rem); letter-spacing:normal; }
  .saas-lead-v3 { margin-top:1.3rem; font-size:.91rem; line-height:1.85; }
  .saas-cta-v3 { display:grid; grid-template-columns:1fr; }
  .saas-primary-action,.saas-secondary-action { width:100%; }
  .saas-trust-row { display:grid; grid-template-columns:1fr; gap:.5rem; }
  .saas-window-bar { min-height:4.2rem; }
  .saas-orbit-a { width:18rem; height:18rem; inset:-3rem auto auto -7rem; }
  .saas-orbit-b, .saas-spark-b { display:none; }
  .saas-window-body { min-height:22rem; grid-template-columns:3.25rem minmax(0,1fr); }
  .saas-preview-nav { gap:.35rem; padding:.62rem .35rem; }
  .saas-preview-nav span { width:2.15rem; height:2.15rem; }
  .saas-preview-main { padding:.72rem; }
  .saas-preview-heading strong { font-size:.8rem; }
  .saas-preview-stats { gap:.4rem; }
  .saas-preview-stats article { padding:.55rem; }
  .saas-preview-stats strong { font-size:1rem; }
  .saas-preview-stats small { display:none; }
  .saas-preview-lower { grid-template-columns:1fr; }
  .saas-preview-activity { display:none; }
  .saas-bars { height:6.7rem; }
  .saas-floating-card { display:none; }
  .saas-feature-grid-v3 { grid-template-columns:1fr; }
  .saas-feature-v3 { min-height:0; }
  .saas-final-cta { border-radius:22px; padding:1.55rem; }
  .saas-final-cta h2 { font-size:1.75rem; }
  .saas-final-cta > a { width:100%; }
  .saas-footer-v3 { min-height:6rem; align-items:flex-start; justify-content:center; flex-direction:column; gap:.35rem; }
  body:has(.saas-landing-v3) .theme-switcher-floating { top:.72rem; inset-inline-end:.72rem; }
  body:has(.saas-landing-v3) .theme-toggle-label { display:none; }
  body:has(.saas-landing-v3) .theme-toggle { width:2.5rem; min-width:2.5rem; padding:0; }
}
@media (prefers-reduced-motion: reduce) {
  .saas-landing-v3::before,
  .saas-landing-v3::after,
  .saas-brand-mark,
  .saas-eyebrow > span,
  .saas-primary-action::after,
  .saas-orbit,
  .saas-spark,
  .saas-particle,
  .saas-glow,
  .saas-product-window,
  .saas-live i,
  .saas-bars i,
  .saas-floating-card { animation: none !important; }
  .saas-final-cta::before { animation: none !important; }
  .saas-product-window { transform: none; }
}
.not-found-page {
  --not-found-ink: #122b22;
  --not-found-muted: #6e8078;
  --not-found-green: var(--brand-primary, #1a5f4a);
  --not-found-gold: var(--brand-accent, #c9a227);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--not-found-ink);
  background:
    radial-gradient(48rem 30rem at 4% -8%, color-mix(in srgb, var(--not-found-gold) 12%, transparent), transparent 68%),
    radial-gradient(42rem 30rem at 100% 100%, color-mix(in srgb, var(--not-found-green) 10%, transparent), transparent 70%),
    #f4f6f2;
}
.not-found-page * { box-sizing: border-box; }
.not-found-header {
  width: min(100% - 2rem, 1180px);
  min-height: 5.5rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  z-index: 2;
}
.not-found-brand {
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  color: var(--not-found-ink);
}
.not-found-brand-mark {
  width: 2.9rem;
  height: 2.9rem;
  flex: 0 0 2.9rem;
  display: grid;
  place-items: center;
  padding: .28rem;
  border: 1px solid rgba(20,55,44,.1);
  border-radius: 15px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 9px 25px rgba(20,55,44,.08);
}
.not-found-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.not-found-brand > span:last-child { display: grid; gap: .02rem; }
.not-found-brand strong { font-size: 1.03rem; font-weight:var(--font-weight-bold, 700); line-height: 1.25; }
.not-found-brand small { color: var(--not-found-muted); font-size:var(--text-caption); font-weight: 700; }
.not-found-login {
  min-height: 2.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem 1rem;
  border: 1px solid rgba(18,35,29,.12);
  border-radius: 13px;
  color: var(--not-found-ink);
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 22px rgba(18,35,29,.055);
  font-size: .86rem;
  font-weight:var(--font-weight-semibold, 600);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.not-found-login:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--not-found-green) 28%, rgba(18,35,29,.12));
  background: #fff;
  box-shadow: 0 12px 28px rgba(18,35,29,.09);
}
.not-found-main {
  width: min(100% - 2rem, 1180px);
  flex: 1;
  display: grid;
  place-items: center;
  margin-inline: auto;
  padding: 2rem 0 2.8rem;
}
.not-found-card {
  width: min(100%, 42rem);
  position: relative;
  overflow: hidden;
  padding: clamp(2.2rem, 6vw, 4.6rem) clamp(1.3rem, 5vw, 4.5rem);
  border: 1px solid rgba(20,55,44,.1);
  border-radius: 32px;
  background:
    radial-gradient(24rem 16rem at 50% -10%, color-mix(in srgb, var(--not-found-gold) 12%, transparent), transparent 70%),
    rgba(255,255,255,.84);
  box-shadow: 0 28px 80px rgba(20,55,44,.11);
  text-align: center;
}
.not-found-orbit {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--not-found-green) 14%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.not-found-orbit-one { width: 19rem; height: 19rem; top: -13.6rem; inset-inline-start: -9rem; }
.not-found-orbit-two { width: 14rem; height: 14rem; bottom: -10.8rem; inset-inline-end: -6rem; border-color: color-mix(in srgb, var(--not-found-gold) 18%, transparent); }
.not-found-icon {
  width: 4.9rem;
  height: 4.9rem;
  display: grid;
  place-items: center;
  margin: 0 auto 1.1rem;
  border: 1px solid color-mix(in srgb, var(--not-found-green) 16%, transparent);
  border-radius: 23px;
  color: var(--not-found-green);
  background: color-mix(in srgb, var(--not-found-green) 8%, #fff);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--not-found-green) 12%, transparent);
  font-size: 2.2rem;
  font-weight:var(--font-weight-bold, 700);
  line-height: 1;
}
.not-found-eyebrow {
  margin: 0;
  color: var(--not-found-green);
  font-size:var(--text-caption);
  font-weight:var(--font-weight-bold, 700);
  letter-spacing: .02em;
}
.not-found-card h1 {
  max-width: 18ch;
  margin: .5rem auto 0;
  color: var(--not-found-ink);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.24;
  letter-spacing:normal;
  font-weight:var(--font-weight-bold, 700);
}
.not-found-message {
  max-width: 31rem;
  margin: .85rem auto 0;
  color: var(--not-found-muted);
  font-size: .94rem;
  font-weight: 600;
  line-height: 1.9;
}
.not-found-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.75rem;
}
.not-found-primary,
.not-found-secondary {
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .72rem;
  padding: .72rem 1.1rem;
  border-radius: 15px;
  font-size: .87rem;
  font-weight:var(--font-weight-bold, 700);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.not-found-primary {
  color: var(--brand-on-primary, #fff);
  background: linear-gradient(135deg, color-mix(in srgb, var(--not-found-green) 96%, #fff), color-mix(in srgb, var(--not-found-green) 78%, #061c15));
  box-shadow: 0 12px 27px color-mix(in srgb, var(--not-found-green) 21%, transparent);
}
.not-found-primary b { font-size: 1.2rem; line-height: 1; }
.not-found-secondary { border: 1px solid rgba(18,35,29,.12); color: var(--not-found-ink); background: rgba(255,255,255,.76); }
.not-found-primary:hover, .not-found-secondary:hover { transform: translateY(-2px); }
.not-found-primary:hover { box-shadow: 0 16px 33px color-mix(in srgb, var(--not-found-green) 28%, transparent); }
.not-found-secondary:hover { border-color: color-mix(in srgb, var(--not-found-green) 25%, rgba(18,35,29,.12)); }
.not-found-footer {
  width: min(100% - 2rem, 1180px);
  min-height: 4.8rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid rgba(15,87,69,.09);
  color: var(--not-found-muted);
  font-size:var(--text-caption);
  font-weight: 700;
}
.not-found-footer > span:first-child { color: var(--not-found-green); font-weight:var(--font-weight-bold, 700); }
html[data-theme="dark"] .not-found-page {
  --not-found-ink: #edf3f0;
  --not-found-muted: #9eaea7;
  background:
    radial-gradient(42rem 28rem at 0% 0%, color-mix(in srgb, var(--not-found-gold) 5%, transparent), transparent 68%),
    #0a1210;
}
html[data-theme="dark"] .not-found-brand-mark,
html[data-theme="dark"] .not-found-login,
html[data-theme="dark"] .not-found-card,
html[data-theme="dark"] .not-found-secondary {
  border-color: rgba(148,163,184,.14);
  background-color: rgba(18,29,25,.88);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
html[data-theme="dark"] .not-found-card {
  background-image: radial-gradient(24rem 16rem at 50% -10%, color-mix(in srgb, var(--not-found-gold) 9%, transparent), transparent 70%);
}
@media (max-width: 600px) {
  .not-found-header,
  .not-found-main,
  .not-found-footer { width: calc(100% - 1.1rem); }
  .not-found-header { min-height: 4.55rem; }
  .not-found-brand-mark { width: 2.6rem; height: 2.6rem; flex-basis: 2.6rem; border-radius: 13px; }
  .not-found-brand small { display: none; }
  .not-found-login { min-height: 2.45rem; padding-inline: .72rem; font-size:var(--text-caption); }
  .not-found-main { padding: 1rem 0 1.5rem; }
  .not-found-card { border-radius: 24px; }
  .not-found-actions { display: grid; grid-template-columns: 1fr; }
  .not-found-primary, .not-found-secondary { width: 100%; }
  .not-found-footer { min-height: 4.3rem; font-size:var(--text-caption); }
}
html[data-theme="dark"] .saas-landing-v3 {
  --landing-ink: #eef5f1;
  --landing-muted: #9fafa8;
  --landing-paper: #0a1511;
  color: var(--landing-ink);
  background:
    radial-gradient(55rem 34rem at 92% -12%, rgba(212,173,73,.1), transparent 64%),
    radial-gradient(42rem 32rem at -10% 36%, rgba(38,139,110,.09), transparent 67%),
    #0a1511;
}
html[data-theme="dark"] .saas-brand { color:#eef5f1; }
html[data-theme="dark"] .saas-brand-mark,
html[data-theme="dark"] .saas-header-login,
html[data-theme="dark"] .saas-secondary-action,
html[data-theme="dark"] .saas-feature-v3 { background:rgba(18,38,31,.86); border-color:rgba(151,185,172,.12); color:#e8f1ed; }
html[data-theme="dark"] .saas-plan-card { background:rgba(18,38,31,.86); border-color:rgba(151,185,172,.14); }
html[data-theme="dark"] .saas-plan-card-featured { background:linear-gradient(160deg,#173b2f,#102f26); border-color:rgba(196,219,207,.3); }
html[data-theme="dark"] .saas-plan-top h3, html[data-theme="dark"] .saas-plan-price strong { color:#eef6f1; }
html[data-theme="dark"] .saas-plan-top p, html[data-theme="dark"] .saas-plan-price span, html[data-theme="dark"] .saas-plan-card ul { color:#b2c3bb; }
html[data-theme="dark"] .saas-pricing-note, html[data-theme="dark"] .saas-plan-card a { background:rgba(18,38,31,.86); border-color:rgba(151,185,172,.16); color:#dfece6; }
html[data-theme="dark"] .saas-plan-card-featured a { color:#fff; background:#1a7257; }
html[data-theme="dark"] .saas-hero-copy-v3 h1,
html[data-theme="dark"] .saas-section-intro h2 { color:#f1f7f4; }
html[data-theme="dark"] .saas-feature-v3 h3 { color:#e7f0ec; }
html[data-theme="dark"] .saas-lead-v3,
html[data-theme="dark"] .saas-section-intro p,
html[data-theme="dark"] .saas-feature-v3 p { color:#9eafa8; }
.ministerial-policy-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin-bottom: .15rem;
}
.ministerial-policy-option {
  min-height: 5.35rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  position: relative;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
  border-radius: 18px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface-strong) 94%, transparent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary-deep) 4%, transparent);
  cursor: pointer;
  transition: border-color var(--motion-hover), background-color var(--motion-hover), box-shadow var(--motion-hover), transform var(--motion-hover);
}
.ministerial-policy-option:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 32%, var(--line));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--primary-deep) 8%, transparent);
}
.ministerial-policy-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-strong));
}
.ministerial-policy-option input[type="checkbox"] {
  position: absolute;
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.ministerial-policy-switch {
  width: 2.7rem;
  height: 1.55rem;
  flex: 0 0 2.7rem;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--muted) 34%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 12%, var(--surface-strong));
  transition: background-color var(--motion-hover), border-color var(--motion-hover), box-shadow var(--motion-focus);
}
.ministerial-policy-switch::after {
  content: "";
  width: 1.08rem;
  height: 1.08rem;
  position: absolute;
  top: 50%;
  inset-inline-start: .18rem;
  border-radius: 50%;
  background: var(--surface-strong);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--primary-deep) 20%, transparent);
  transform: translateY(-50%);
  transition: inset-inline-start var(--motion-hover), inset-inline-end var(--motion-hover), background-color var(--motion-hover);
}
.ministerial-policy-option input:checked + .ministerial-policy-switch {
  border-color: var(--primary);
  background: var(--primary);
}
.ministerial-policy-option input:checked + .ministerial-policy-switch::after {
  inset-inline-start: calc(100% - 1.26rem);
  background: var(--brand-on-primary, #fff);
}
.ministerial-policy-option input:focus-visible + .ministerial-policy-switch {
  box-shadow: var(--focus-ring);
}
.ministerial-policy-copy { min-width: 0; display: grid; gap: .2rem; }
.ministerial-policy-copy strong { color: var(--theme-text-strong); font-size: .91rem; font-weight:var(--font-weight-bold, 700); line-height: 1.4; }
.ministerial-policy-copy small { color: var(--muted); font-size:var(--text-caption); font-weight: 600; line-height: 1.55; }
html[data-theme="dark"] .ministerial-policy-option {
  border-color: rgba(148,163,184,.17);
  background: color-mix(in srgb, #111c2f 94%, transparent);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}
html[data-theme="dark"] .ministerial-policy-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary) 54%, rgba(148,163,184,.17));
  background: color-mix(in srgb, var(--primary) 14%, #111c2f);
}
@media (max-width: 720px) {
  .ministerial-policy-options { grid-template-columns: 1fr; }
  .ministerial-policy-option { min-height: 4.85rem; }
}
.ministerial-selector {
  display: grid;
  grid-template-columns: minmax(12rem, 1.15fr) minmax(10rem, .85fr) auto;
  align-items: end;
  gap: 1rem;
}
.ministerial-selector .field {
  min-width: 0;
  margin: 0 !important;
}
.ministerial-selector .field::before { display: none; }
.ministerial-selector .field.field-is-active,
.ministerial-selector .field.field-select-active {
  background: transparent;
  box-shadow: none;
}
.ministerial-selector .field > label {
  display: block;
  margin-bottom: .48rem;
  color: var(--theme-text-strong);
  font-size: .88rem;
  font-weight:var(--font-weight-bold, 700);
}
.ministerial-selector select {
  width: 100% !important;
  min-width: 0;
  min-height: 3.2rem;
  padding-inline: 1rem 2.6rem;
  border-radius: 15px;
  font-weight:var(--font-weight-semibold, 600);
}
.ministerial-selector-action {
  display: flex;
  align-items: end;
}
.ministerial-selector-action .btn {
  min-width: 10.8rem;
  min-height: 3.2rem;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .ministerial-selector {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .8rem;
  }
  .ministerial-selector-action { grid-column: 1 / -1; }
  .ministerial-selector-action .btn { width: 100%; }
}
@media (max-width: 480px) {
  .ministerial-selector { grid-template-columns: 1fr; }
  .ministerial-selector-action { grid-column: auto; }
}
.ops-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .9rem;
}
.ops-filter-bar .field {
  min-width: 10.5rem;
  flex: 1 1 11.5rem;
  margin: 0 !important;
}
.ops-filter-bar .ops-filter-primary { flex-grow: 1.45; }
.ops-filter-bar .field > label {
  display: block;
  margin-bottom: .48rem;
  color: var(--theme-text-strong);
  font-size: .88rem;
  font-weight:var(--font-weight-bold, 700);
}
.ops-filter-bar :is(input:not([type="checkbox"]):not([type="radio"]), select) {
  width: 100% !important;
  min-width: 0;
  min-height: 3.15rem;
  border-radius: 15px;
  font-weight:var(--font-weight-bold, 700);
}
.ops-filter-action,
.ops-filter-bar > .u-self-end {
  flex: 0 0 auto;
  display: flex;
  align-items: end;
}
.ops-filter-action .btn,
.ops-filter-bar > .u-self-end .btn {
  min-width: 8.7rem;
  min-height: 3.15rem;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .ops-filter-bar { gap: .75rem; }
  .ops-filter-bar .field { flex-basis: calc(50% - .38rem); }
  .ops-filter-action,
  .ops-filter-bar > .u-self-end { flex: 1 0 100%; }
  .ops-filter-action .btn,
  .ops-filter-bar > .u-self-end .btn { width: 100%; }
}
@media (max-width: 480px) {
  .ops-filter-bar .field { flex-basis: 100%; }
}
.notification-settings-panel {
  overflow: hidden;
}
.notification-channel-list,
.notification-preference-grid {
  display: grid;
  gap: .8rem;
  margin-top: 1.25rem;
}
.notification-channel-item,
.notification-preference-item {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) minmax(12rem, .72fr) 8.25rem;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--theme-border, #dce8e3) 86%, transparent);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--theme-surface, #fff) 95%, var(--brand-primary) 5%), var(--theme-surface, #fff));
}
.notification-channel-name {
  display: flex;
  align-items: center;
  gap: .82rem;
  min-width: 0;
}
.notification-channel-name > div,
.notification-preference-item > div {
  display: grid;
  gap: .12rem;
  min-width: 0;
}
.notification-channel-name strong,
.notification-preference-item strong {
  color: var(--theme-text-strong, #173b33);
  font-size: 1rem;
  font-weight:var(--font-weight-bold, 700);
}
.notification-channel-name small,
.notification-preference-item small {
  color: var(--theme-text-muted, #70817b);
  font-size: .78rem;
  overflow-wrap: anywhere;
}
.notification-channel-icon {
  width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  color: var(--brand-primary, #1a5f4a);
  background: color-mix(in srgb, var(--brand-primary, #1a5f4a) 11%, transparent);
  font-weight:var(--font-weight-bold, 700);
}
.notification-channel-switch {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: .65rem;
  min-width: 0;
  cursor: pointer;
  user-select: none;
}
.notification-channel-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.notification-switch-track {
  width: 2.7rem;
  height: 1.5rem;
  position: relative;
  display: block;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #cbd8d3;
  transition: background .2s ease, box-shadow .2s ease;
}
.notification-switch-track i {
  position: absolute;
  top: .2rem;
  right: .2rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(14, 45, 38, .2);
  transition: transform .2s ease;
}
.notification-channel-switch input:checked + .notification-switch-track {
  background: var(--brand-primary, #1a5f4a);
}
.notification-channel-switch input:checked + .notification-switch-track i {
  transform: translateX(-1.2rem);
}
.notification-channel-switch input:focus-visible + .notification-switch-track {
  outline: 3px solid color-mix(in srgb, var(--brand-primary, #1a5f4a) 30%, transparent);
  outline-offset: 3px;
}
.notification-channel-switch > span:last-child {
  display: grid;
  gap: .08rem;
  color: var(--theme-text-strong, #173b33);
  line-height: 1.25;
}
.notification-channel-switch b { font-size: .9rem; }
.notification-channel-switch small { color: var(--theme-text-muted, #70817b); font-size:var(--text-caption); }
.notification-priority-field {
  display: grid;
  grid-template-columns: 1fr;
  gap: .28rem;
  margin: 0;
  color: var(--theme-text-muted, #70817b);
  font-size:var(--text-caption);
  font-weight:var(--font-weight-semibold, 600);
}
.notification-priority-field input {
  width: 100% !important;
  min-width: 0;
  min-height: 2.65rem;
  margin: 0 !important;
  padding-inline: .7rem;
  border-radius: 11px;
  text-align: center;
  font-weight:var(--font-weight-bold, 700);
}
.notification-preference-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.notification-preference-item {
  grid-template-columns: minmax(0, 1fr) 5.8rem auto;
  min-height: 5.3rem;
}
.notification-priority-field.compact input { min-height: 2.4rem; }
.notification-channel-switch.compact { justify-self: end; }
.notification-channel-switch.compact > span:last-child { display: block; white-space: nowrap; }
html[data-theme="dark"] .notification-channel-item,
html[data-theme="dark"] .notification-preference-item {
  background: color-mix(in srgb, var(--theme-surface, #182723) 93%, var(--brand-primary) 7%);
}
@media (max-width: 800px) {
  .notification-preference-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .notification-channel-item { grid-template-columns: 1fr 7.2rem; gap: .9rem; padding: .95rem; }
  .notification-channel-name { grid-column: 1 / -1; }
  .notification-channel-switch { justify-self: start; }
  .notification-priority-field { grid-column: 2; }
  .notification-preference-item { grid-template-columns: minmax(0, 1fr) 5.6rem; padding: .95rem; }
  .notification-channel-switch.compact { justify-self: start; grid-column: 1 / -1; }
}
:root {
  --ds-page-max: 1440px;
  --ds-page-pad-inline: clamp(1rem, 2.2vw, 2rem);
  --ds-page-pad-block: clamp(1.2rem, 2.4vw, 1.8rem);
  --ds-section-gap: var(--space-5);
  --ds-grid-gap: var(--space-4);
  --ds-card-pad: clamp(1rem, 1.45vw, 1.35rem);
  --ds-card-pad-compact: var(--space-4);
  --ds-card-radius: var(--radius-lg);
  --ds-card-radius-sm: var(--radius-md);
  --ds-card-border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  --ds-card-bg: color-mix(in srgb, var(--surface-strong) 94%, transparent);
  --ds-card-shadow: var(--elevation-1);
  --ds-card-shadow-raised: var(--elevation-2);
  --ds-table-pad: var(--space-4);
  --ds-action-gap: var(--space-3);
  --ds-control-h: var(--control-height);
  --ds-control-h-sm: var(--control-height-sm);
  --ds-title-size: var(--text-page-title);
  --ds-section-title-size: var(--text-section-title);
  --ds-card-title-size: var(--text-card-title);
  --ds-body-size: var(--text-body);
  --ds-small-size: var(--text-caption);
}
@media (min-width: 961px) {
  .main,
  .page-container {
    width: min(100%, var(--ds-page-max));
    margin-inline: auto;
    padding: var(--ds-page-pad-block) var(--ds-page-pad-inline) calc(var(--ds-page-pad-block) + .8rem);
  }
}
.main,
.page-container,
.platform-console-main,
.account-hub-main,
.account-workspace-main {
  display: grid;
  align-content: start;
  gap: var(--ds-section-gap);
}
.topbar,
.page-header,
.content-section,
.panel,
.card,
.form-card,
.table-card,
.settings-card,
.workflow-card,
.dashboard-tasks-full,
.dashboard-quick-panel,
.dashboard-setup,
.dashboard-health-panel,
.stat,
.stat-card,
.empty-state,
.empty-state-foundation,
.empty-state-polished {
  border: var(--ds-card-border);
  border-radius: var(--ds-card-radius);
  background: var(--ds-card-bg);
  box-shadow: var(--ds-card-shadow);
}
.panel,
.content-section,
.form-card,
.table-card,
.settings-card,
.workflow-card,
.dashboard-tasks-full,
.dashboard-quick-panel,
.dashboard-setup,
.dashboard-health-panel {
  padding: var(--ds-card-pad);
}
.card,
.stat,
.stat-card {
  min-width: 0;
  min-height: 0;
  padding: var(--ds-card-pad-compact);
  border-radius: var(--ds-card-radius-sm);
}
.app-shell .topbar,
.page-header {
  min-height: 0;
  margin-bottom: 0;
  padding: var(--ds-card-pad);
  align-items: center;
  gap: var(--ds-grid-gap);
}
.topbar h1,
.page-header h1 {
  min-width: 0;
  font-size: var(--ds-title-size);
  line-height: var(--line-height-heading);
  letter-spacing: normal;
}
.section-title,
.panel > h2,
.panel > h3,
.content-section > h2,
.content-section > h3,
.dashboard-section-head h2 {
  font-size: var(--ds-section-title-size);
  line-height: var(--line-height-heading);
  letter-spacing: normal;
}
.topbar p,
.page-header p,
.panel p,
.content-section p {
  max-width: 72ch;
}
.stats,
.stats-grid,
.dashboard-brief-grid,
.dashboard-insights,
.quick-action-grid,
.grid-2,
.grid-3,
.info-grid,
.school-facts,
.platform-kpis,
.platform-plan-summary {
  gap: var(--ds-grid-gap);
}
.stats,
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.stat,
.stat-card {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}
.stat .label,
.stat-card .label,
.stat span,
.stat-card span {
  color: var(--muted);
  font-size: var(--ds-small-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
}
.stat .value,
.stat-card .value,
.stat strong,
.stat-card strong {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  color: var(--theme-text-strong);
  font-size: var(--text-stat-value);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  overflow-wrap: anywhere;
}
.stat-value-lg,
.stat .stat-value-lg,
.stat-card .stat-value-lg {
  font-size: clamp(1.28rem, 1rem + .62vw, 1.45rem);
}
.stat-value-md,
.stat .stat-value-md,
.stat-card .stat-value-md {
  font-size: clamp(1.12rem, .98rem + .42vw, 1.3rem);
}
.stat-value-sm,
.stat .stat-value-sm,
.stat-card .stat-value-sm {
  font-size: clamp(1rem, .94rem + .25vw, 1.12rem);
}
.dashboard-main,
.dashboard-layout-grid,
.dashboard-focus-grid,
.dashboard-balanced-row,
.dashboard-adaptive-grid,
.dashboard-task-list,
.setup-steps,
.health-grid,
.workflow-steps,
.notification-channel-list,
.notification-preference-grid {
  gap: var(--ds-grid-gap);
}
.dashboard-main :is(.dashboard-task, .setup-step, .health-item, .quick-action-card, .dashboard-insight),
.workflow-step,
.stack-item,
.school-action-panel,
.school-fact {
  min-height: 0;
  padding: var(--ds-card-pad-compact);
  border-radius: var(--ds-card-radius-sm);
}
.dashboard-main .quick-action-card,
.dashboard-main .dashboard-insight {
  min-height: clamp(7rem, 11vw, 9rem);
}
.dashboard-main .dashboard-task,
.dashboard-main .setup-step,
.dashboard-main .health-item {
  min-height: 0;
}
.table-wrap,
.table-container,
.table-card {
  min-width: 0;
  max-width: 100%;
  border-radius: var(--ds-card-radius-sm);
  border: var(--ds-card-border);
  background: var(--ds-card-bg);
  box-shadow: var(--elevation-0);
}
.table-wrap {
  overflow-x: auto;
}
.table-wrap table,
.table-container table {
  width: 100%;
}
.table-min-560 { min-width: 560px; }
.table-min-620 { min-width: 620px; }
.table-min-720 { min-width: 720px; }
.table-min-1180 { min-width: 1180px; }
.iraqi-grade-table {
  min-width: 1180px;
}
.data-table th,
.table-wrap th,
.table-container th,
.data-table td,
.table-wrap td,
.table-container td {
  padding: .78rem .85rem;
  vertical-align: middle;
}
.data-table th,
.table-wrap th,
.table-container th {
  color: var(--theme-text-strong);
  font-size: var(--text-table-head);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
}
.data-table td,
.table-wrap td,
.table-container td {
  font-size: var(--text-table-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}
.data-table :is(td, th),
.table-wrap :is(td, th),
.table-container :is(td, th) {
  font-variant-numeric: tabular-nums;
}
.grade-score-input {
  min-width: 72px;
  max-width: 82px;
}
.grade-absence-toggle {
  display: block;
  font-size: var(--text-caption);
}
.grade-inline-note {
  font-size: var(--text-caption);
}
.table-cell-note {
  font-size: var(--text-table-body);
}
.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: .75rem;
}
.section-subtitle {
  margin: 1.25rem 0 .6rem;
  font-size: 1.05rem;
}
.workflow-action-selectable,
label.workflow-action {
  cursor: pointer;
}
.form-field-narrow {
  max-width: 420px;
}
.topbar-actions,
.actions,
.action-bar,
.workflow-submit-row,
.attendance-save-actions,
.schedule-ai-actions,
.wa-actions,
.wa-qr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-action-gap);
}
.topbar-actions :is(.btn, .btn-sm),
.actions :is(.btn, .btn-sm),
.action-bar :is(.btn, .btn-sm),
.workflow-submit-row :is(.btn, .btn-sm) {
  min-height: var(--ds-control-h);
  min-width: 0;
}
.btn,
.btn-sm,
button.btn,
a.btn,
.field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
:is(input, select, textarea).input,
.search-input {
  border-radius: var(--ds-card-radius-sm);
}
.field,
.ops-filter-bar .field {
  min-width: 0;
}
.ops-filter-bar {
  gap: var(--ds-grid-gap);
}
.ops-filter-bar :is(input:not([type="checkbox"]):not([type="radio"]), select),
.ops-filter-action .btn,
.ops-filter-bar > .u-self-end .btn {
  min-height: var(--ds-control-h);
  border-radius: var(--ds-card-radius-sm);
}
.empty-state,
.empty-state-foundation,
.empty-state-polished {
  padding: clamp(1.2rem, 3vw, 2rem);
}
html[data-theme="dark"] {
  --ds-card-border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--line));
  --ds-card-bg: color-mix(in srgb, var(--surface-strong) 92%, transparent);
  --ds-card-shadow: var(--elevation-0);
  --ds-card-shadow-raised: var(--elevation-1);
}
@media (max-width: 960px) {
  :root {
    --ds-section-gap: .85rem;
    --ds-grid-gap: .7rem;
    --ds-card-pad: .95rem;
    --ds-card-pad-compact: .85rem;
    --ds-title-size: clamp(1.32rem, 5.6vw, 1.78rem);
  }
  .main,
  .page-container,
  .platform-console-main,
  .account-hub-main,
  .account-workspace-main {
    gap: var(--ds-section-gap);
  }
  .app-shell .topbar,
  .page-header {
    align-items: start;
  }
  .stats,
  .stats-grid,
  .grid-2,
  .grid-3,
  .dashboard-brief-grid,
  .dashboard-balanced-row,
  .notification-preference-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .topbar-actions,
  .actions,
  .action-bar,
  .workflow-submit-row {
    justify-content: stretch;
  }
  .topbar-actions > *,
  .actions > *,
  .action-bar > *,
  .workflow-submit-row > * {
    min-width: 0;
  }
}
@media (max-width: 640px) {
  :root {
    --ds-section-gap: .72rem;
    --ds-grid-gap: .58rem;
    --ds-card-radius: 15px;
    --ds-card-radius-sm: 13px;
    --ds-card-pad: .9rem;
    --ds-card-pad-compact: .78rem;
  }
  .dashboard-main .quick-action-card,
  .dashboard-main .dashboard-insight {
    min-height: 0;
  }
}
.account-hub { min-height:100dvh; color:#173128; background:radial-gradient(48rem 28rem at 100% -10%,rgba(212,173,73,.13),transparent 68%),radial-gradient(42rem 26rem at 0% 100%,rgba(15,87,69,.08),transparent 70%),#f6f4ee; }
.account-hub-header { width:min(100% - 3rem,1320px); min-height:5.6rem; margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.account-hub .saas-brand { color:#173128; }
.account-hub-user { display:flex; align-items:center; gap:.7rem; color:#587068; font-size:.82rem; font-weight:var(--font-weight-semibold, 600); }
.account-hub-user-name { white-space:nowrap; }
.account-hub-actions { display:inline-flex; align-items:center; gap:.45rem; flex-wrap:nowrap; }
.account-hub-actions .theme-switcher { flex:0 0 auto; }
.account-hub-actions .theme-toggle,
.account-hub-actions > a,
.account-hub-actions button { min-height:2.55rem; height:2.55rem; white-space:nowrap; }
.account-hub-user form { margin:0; }.account-hub-user button { min-height:2.55rem; padding:.5rem .82rem; border:1px solid rgba(15,87,69,.13); border-radius:12px; color:#24483c; background:rgba(255,255,255,.7); font:inherit; font-weight:var(--font-weight-semibold, 600); cursor:pointer; }
.account-hub-main { width:min(100% - 3rem,1320px); margin-inline:auto; padding:2rem 0 4rem; }
.account-hub-hero { min-height:18rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; overflow:hidden; padding:clamp(1.6rem,4vw,3.5rem); border-radius:30px; color:#fff; background:radial-gradient(28rem 20rem at 2% 0%,rgba(212,173,73,.25),transparent 72%),linear-gradient(135deg,#07382d,#0e5a46); box-shadow:0 28px 65px rgba(8,58,46,.18); }
.account-hub-eyebrow { display:inline-flex; align-items:center; gap:.48rem; color:#e5cc80; font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }.account-hub-eyebrow i { width:.52rem; height:.52rem; border-radius:50%; background:#d4ad49; box-shadow:0 0 0 5px rgba(212,173,73,.14); }
.account-hub-hero h1 { margin:.65rem 0 0; font-size:clamp(2.3rem,4.4vw,4rem); line-height:1.15; letter-spacing:normal; }.account-hub-hero h1 em { color:#dfb64a; font-style:normal; }.account-hub-hero p { max-width:36rem; margin:1rem 0 0; color:rgba(255,255,255,.72); line-height:1.9; font-size:.92rem; font-weight:600; }
.account-hub-hero-stat { min-width:10rem; display:grid; gap:.25rem; padding:1.1rem 1.25rem; border:1px solid rgba(255,255,255,.15); border-radius:20px; background:rgba(255,255,255,.09); text-align:center; }.account-hub-hero-stat strong { color:#e5cc80; font-size:2.4rem; line-height:1; }.account-hub-hero-stat span { color:rgba(255,255,255,.75); font-size:var(--text-caption); font-weight:var(--font-weight-semibold, 600); }
.account-hub-alert { margin-top:1.25rem; padding:.85rem 1rem; border:1px solid rgba(24,113,73,.16); border-radius:14px; color:#1d6044; background:#eaf8ef; font-size:.86rem; font-weight:var(--font-weight-semibold, 600); }
.account-hub-section-head { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-top:3rem; margin-bottom:1.25rem; }.account-hub-section-head span { color:#2a7860; font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }.account-hub-section-head h2 { margin:.25rem 0 0; font-size:1.8rem; letter-spacing:normal; }
.account-hub-create { min-height:3rem; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1rem; border-radius:14px; color:#fff; background:#135943; box-shadow:0 13px 28px rgba(8,58,46,.16); font-size:.83rem; font-weight:var(--font-weight-bold, 700); }.account-hub-create span { color:#e5cc80; font-size:1.2rem; line-height:1; }
.account-school-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }.account-school-card,.account-school-add { min-height:20rem; border-radius:22px; }.account-school-card { display:flex; flex-direction:column; padding:1.35rem; border:1px solid rgba(15,87,69,.12); background:rgba(255,255,255,.78); box-shadow:0 14px 36px rgba(8,58,46,.055); }.account-school-card-top { display:flex; justify-content:space-between; align-items:center; gap:.7rem; }.account-school-mark { width:3.1rem; height:3.1rem; display:grid; place-items:center; border-radius:15px; color:#fff; background:var(--school-card-color,#135943); font-size:1.25rem; font-weight:var(--font-weight-bold, 700); }.account-school-status { display:inline-flex; align-items:center; gap:.35rem; color:#39705d; font-size:var(--text-caption); font-weight:var(--font-weight-semibold, 600); }.account-school-status i { width:.45rem; height:.45rem; border-radius:50%; background:#22a568; }.account-school-card h3 { margin:1.15rem 0 0; font-size:1.18rem; line-height:1.55; }.account-school-card p { margin:.18rem 0 0; color:#80928a; font-size:var(--text-caption); }.account-school-role { margin-top:1.15rem; padding:.48rem .65rem; border-radius:9px; color:#28654f; background:rgba(15,87,69,.07); font-size:var(--text-caption); font-weight:var(--font-weight-semibold, 600); }.account-school-card form { margin-top:auto; }.account-school-open { width:100%; min-height:2.85rem; display:flex; align-items:center; justify-content:space-between; margin-top:1.25rem; padding:.6rem .85rem; border:0; border-radius:12px; color:#fff; background:var(--school-card-color,#135943); font:inherit; font-size:.82rem; font-weight:var(--font-weight-bold, 700); cursor:pointer; }.account-school-open b { color:#e5cc80; font-size:1.2rem; }.account-school-links { display:flex; flex-wrap:wrap; gap:.5rem .8rem; margin-top:.85rem; }.account-school-links a { color:#2a7860; font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }
.account-school-add { display:grid; place-content:center; justify-items:center; gap:.45rem; padding:1rem; border:1.5px dashed rgba(15,87,69,.3); color:#2a7860; background:rgba(255,255,255,.38); text-align:center; }.account-school-add > span { width:3rem; height:3rem; display:grid; place-items:center; border-radius:50%; color:#fff; background:#1a7257; font-size:1.55rem; }.account-school-add strong { margin-top:.35rem; font-size:.92rem; }.account-school-add small { color:#7b8d85; font-size:var(--text-caption); font-weight:700; }
.account-empty-state { display:grid; justify-items:center; max-width:44rem; margin:1rem auto 0; padding:clamp(2rem,6vw,4.3rem) 1.5rem; border:1px solid rgba(15,87,69,.1); border-radius:28px; background:rgba(255,255,255,.72); box-shadow:0 18px 46px rgba(8,58,46,.06); text-align:center; }.account-empty-icon { width:4.4rem; height:4.4rem; display:grid; place-items:center; margin-bottom:1rem; border-radius:22px; color:#1a7257; background:rgba(15,87,69,.09); font-size:2rem; }.account-empty-state > span { color:#2a7860; font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }.account-empty-state h2 { margin:.45rem 0 0; font-size:clamp(1.4rem,3vw,2rem); }.account-empty-state p { max-width:29rem; margin:.65rem 0 1.4rem; color:#71837c; line-height:1.85; font-size:.88rem; font-weight:600; }
.account-workspace { min-height:100dvh; color:#173128; background:radial-gradient(48rem 28rem at 100% -10%,rgba(212,173,73,.13),transparent 68%),radial-gradient(42rem 26rem at 0% 100%,rgba(15,87,69,.08),transparent 70%),#f6f4ee; }.account-workspace-header,.account-workspace-main { width:min(100% - 3rem,1320px); margin-inline:auto; }.account-workspace-header { min-height:5.6rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }.account-workspace .saas-brand { color:#173128; }.account-workspace-back { min-height:2.65rem; display:inline-flex; align-items:center; padding:.55rem .85rem; border:1px solid rgba(15,87,69,.13); border-radius:12px; color:#28604d; background:rgba(255,255,255,.7); font-size:.8rem; font-weight:var(--font-weight-bold, 700); }.account-workspace-main { padding:1.6rem 0 4rem; }.account-workspace-hero { padding:clamp(1.5rem,3.5vw,2.8rem); border-radius:27px; color:#fff; background:radial-gradient(28rem 20rem at 2% 0%,rgba(212,173,73,.25),transparent 72%),linear-gradient(135deg,#07382d,#0e5a46); box-shadow:0 24px 58px rgba(8,58,46,.16); }.account-workspace-hero > span,.workspace-card-head > span { color:#e3c777; font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }.account-workspace-hero h1 { margin:.4rem 0 0; font-size:clamp(2rem,4vw,3.2rem); letter-spacing:normal; }.account-workspace-hero p { max-width:40rem; margin:.65rem 0 0; color:rgba(255,255,255,.73); line-height:1.8; font-size:.87rem; font-weight:600; }.account-workspace-alert { margin:1rem 0; padding:.8rem 1rem; border:1px solid rgba(24,113,73,.16); border-radius:13px; color:#1d6044; background:#eaf8ef; font-size:.83rem; font-weight:var(--font-weight-semibold, 600); }.account-workspace-alert.error { color:#932f2f; border-color:rgba(163,59,59,.2); background:#fff0f0; }.account-workspace-alert code { display:block; margin-top:.45rem; overflow-wrap:anywhere; direction:ltr; padding:.45rem .6rem; border-radius:8px; background:rgba(15,87,69,.08); }.account-workspace-grid { display:grid; grid-template-columns:minmax(19rem,.85fr) minmax(0,1.15fr); gap:1rem; margin-top:1rem; }.account-workspace-card { padding:1.35rem; border:1px solid rgba(15,87,69,.11); border-radius:21px; background:rgba(255,255,255,.78); box-shadow:0 13px 35px rgba(8,58,46,.05); }.workspace-card-head h2 { margin:.25rem 0 0; font-size:1.32rem; }.workspace-form { display:grid; gap:.85rem; margin-top:1.15rem; }.workspace-form > label { display:grid; gap:.35rem; color:#274d40; font-size:.8rem; font-weight:var(--font-weight-semibold, 600); }.workspace-form input,.workspace-form select { width:100%; min-height:2.85rem; padding:.6rem .75rem; border:1px solid rgba(15,87,69,.16); border-radius:11px; background:#fff; font:inherit; }.workspace-form fieldset { display:flex; flex-wrap:wrap; gap:.55rem .75rem; padding:.75rem; border:1px solid rgba(15,87,69,.13); border-radius:12px; }.workspace-form legend { padding-inline:.25rem; color:#527168; font-size:var(--text-caption); font-weight:var(--font-weight-semibold, 600); }.workspace-form fieldset label { display:inline-flex; align-items:center; gap:.35rem; color:#46665a; font-size:var(--text-caption); font-weight:700; }.workspace-form button,.workspace-plan button { min-height:2.9rem; display:flex; align-items:center; justify-content:space-between; padding:.65rem .85rem; border:0; border-radius:12px; color:#fff; background:#135943; font:inherit; font-size:.8rem; font-weight:var(--font-weight-bold, 700); cursor:pointer; }.workspace-form button b { color:#e5cc80; font-size:1.15rem; }.workspace-list { display:grid; gap:.65rem; margin-top:1rem; }.workspace-list article { display:flex; align-items:center; gap:.65rem; padding:.7rem; border-radius:13px; background:rgba(15,87,69,.045); }.workspace-avatar { width:2.45rem; height:2.45rem; display:grid; place-items:center; flex:0 0 auto; border-radius:12px; color:#fff; background:#1a7257; font-weight:var(--font-weight-bold, 700); }.workspace-avatar.muted { color:#6b8379; background:#e6eee9; }.workspace-list article > div { min-width:0; display:grid; gap:.08rem; }.workspace-list strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; }.workspace-list small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#70847c; font-size:var(--text-caption); }.workspace-list em { margin-inline-start:auto; color:#2a7860; font-size:var(--text-caption); font-style:normal; font-weight:var(--font-weight-semibold, 600); text-align:left; }.workspace-empty { margin:1rem 0 0; color:#7c8f87; font-size:.8rem; }.workspace-invites { margin-top:1rem; }.workspace-plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1.1rem; }.workspace-plan { display:flex; flex-direction:column; min-height:24rem; padding:1.35rem; border:1px solid rgba(15,87,69,.12); border-radius:21px; background:rgba(255,255,255,.78); box-shadow:0 13px 35px rgba(8,58,46,.05); }.workspace-plan.current { border-color:#1a7257; background:linear-gradient(160deg,#f9fffb,#edf8f2); box-shadow:0 20px 42px rgba(8,58,46,.12); }.workspace-plan > span { color:#2a7860; font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }.workspace-plan h2 { margin:.35rem 0 0; font-size:1.45rem; }.workspace-plan > div { display:grid; gap:.1rem; margin:1rem 0; padding:1rem 0; border-block:1px solid rgba(15,87,69,.1); }.workspace-plan > div strong { font-size:1.8rem; }.workspace-plan > div small { color:#73877f; font-size:var(--text-caption); font-weight:var(--font-weight-semibold, 600); }.workspace-plan ul { display:grid; gap:.55rem; margin:0; padding:0; list-style:none; color:#48655a; font-size:var(--text-caption); font-weight:700; }.workspace-plan li::before { content:'✓'; margin-inline-end:.45rem; color:#1a8354; }.workspace-plan form { margin-top:auto; padding-top:1rem; }.workspace-plan button { width:100%; justify-content:center; }.workspace-plan button:disabled { color:#527168; background:#e4eee8; cursor:default; }.workspace-footnote { margin:1rem 0 0; color:#71837c; font-size:var(--text-caption); text-align:center; }
@media (max-width:900px) { .account-hub-header,.account-hub-main { width:min(100% - 1.5rem,760px); }.account-hub-hero { min-height:0; align-items:start; flex-direction:column; }.account-hub-hero-stat { min-width:0; width:100%; grid-template-columns:auto 1fr; align-items:center; text-align:right; }.account-school-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) { .account-workspace-header,.account-workspace-main { width:min(100% - 1.5rem,760px); }.account-workspace-grid { grid-template-columns:1fr; }.workspace-plans { grid-template-columns:1fr; max-width:34rem; margin-inline:auto; }.workspace-plan { min-height:0; } }
@media (max-width:600px) { .account-hub-header { min-height:4.7rem; }.account-hub .saas-brand-copy small { display:none; }.account-hub-user > span { display:none; }.account-hub-main { padding-top:1rem; padding-bottom:2.5rem; }.account-hub-hero { padding:1.4rem; border-radius:22px; }.account-hub-hero h1 { font-size:2.25rem; }.account-hub-hero p { font-size:.83rem; }.account-hub-section-head { align-items:start; flex-direction:column; margin-top:2rem; }.account-hub-create { width:100%; }.account-school-grid { grid-template-columns:1fr; }.account-school-card,.account-school-add { min-height:0; }.account-school-add { min-height:11rem; }.account-empty-state { padding:2.2rem 1rem; border-radius:22px; } }
@media (max-width:600px) { .account-workspace-header,.account-workspace-main { width:calc(100% - 1rem); }.account-workspace-header { min-height:4.7rem; }.account-workspace .saas-brand-copy small { display:none; }.account-workspace-back { min-height:2.4rem; padding-inline:.65rem; font-size:var(--text-caption); }.account-workspace-main { padding-top:1rem; padding-bottom:2.5rem; }.account-workspace-hero { padding:1.35rem; border-radius:21px; }.account-workspace-hero h1 { font-size:1.85rem; }.account-workspace-hero p { font-size:.8rem; }.account-workspace-card { padding:1rem; border-radius:17px; }.workspace-form fieldset { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }.workspace-form button { min-height:3.1rem; }.workspace-list article { align-items:start; }.workspace-list em { max-width:5.6rem; font-size:var(--text-caption); } }
html[data-theme="dark"] .account-hub { color:#e8f1ed; background:radial-gradient(48rem 28rem at 100% -10%,rgba(212,173,73,.08),transparent 68%),#0c1914; } html[data-theme="dark"] .account-hub .saas-brand { color:#eef5f1; } html[data-theme="dark"] .account-hub-user button,html[data-theme="dark"] .account-school-card,html[data-theme="dark"] .account-empty-state { color:#dce9e3; border-color:rgba(151,185,172,.15); background:rgba(18,38,31,.86); } html[data-theme="dark"] .account-school-card h3,html[data-theme="dark"] .account-empty-state h2 { color:#eef6f1; } html[data-theme="dark"] .account-school-card p,html[data-theme="dark"] .account-empty-state p { color:#a9bbb3; } html[data-theme="dark"] .account-school-add { background:rgba(18,38,31,.48); }
html[data-theme="dark"] .account-workspace { color:#e8f1ed; background:radial-gradient(48rem 28rem at 100% -10%,rgba(212,173,73,.08),transparent 68%),#0c1914; } html[data-theme="dark"] .account-workspace .saas-brand { color:#eef5f1; } html[data-theme="dark"] .account-workspace-back,html[data-theme="dark"] .account-workspace-card,html[data-theme="dark"] .workspace-plan { color:#dce9e3; border-color:rgba(151,185,172,.15); background:rgba(18,38,31,.86); } html[data-theme="dark"] .workspace-plan.current { background:linear-gradient(160deg,#173b2f,#102f26); } html[data-theme="dark"] .workspace-form input,html[data-theme="dark"] .workspace-form select { color:#e7f0ec; border-color:rgba(151,185,172,.18); background:#102820; } html[data-theme="dark"] .workspace-list article { background:rgba(151,185,172,.08); } html[data-theme="dark"] .workspace-list small,html[data-theme="dark"] .workspace-footnote { color:#a9bbb3; }
.platform-console { min-height:100dvh; color:#173128; background:radial-gradient(42rem 26rem at 100% -8%,rgba(212,173,73,.15),transparent 70%),radial-gradient(44rem 28rem at 0% 100%,rgba(15,87,69,.09),transparent 70%),#f6f4ee; }
.platform-console-header,.platform-console-nav,.platform-console-main { width:min(100% - 3rem,1320px); margin-inline:auto; }
.platform-console-header { min-height:5.7rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.platform-console .saas-brand { color:#173128; }
.platform-console-owner { display:flex; align-items:center; gap:.7rem; color:#45675b; font-size:.79rem; font-weight:var(--font-weight-semibold, 600); }
.platform-console-owner form { margin:0; }.platform-console-owner button { min-height:2.45rem; padding:.5rem .8rem; border:1px solid rgba(15,87,69,.16); border-radius:11px; color:#1b5543; background:#fff; font:inherit; font-weight:var(--font-weight-bold, 700); cursor:pointer; }
.platform-console-nav { display:flex; align-items:center; gap:.35rem; overflow:auto; padding:.38rem; border:1px solid rgba(15,87,69,.11); border-radius:15px; background:rgba(255,255,255,.72); box-shadow:0 10px 26px rgba(8,58,46,.05); }
.platform-console-nav a { flex:0 0 auto; padding:.62rem .85rem; border-radius:10px; color:#5d786e; font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }.platform-console-nav a.active { color:#fff; background:#145a45; box-shadow:0 6px 14px rgba(12,77,59,.18); }
.platform-console-main { padding:1.25rem 0 4rem; }
.platform-console-hero { padding:clamp(1.55rem,3.5vw,2.8rem); border-radius:27px; color:#fff; background:radial-gradient(30rem 22rem at 3% 0%,rgba(212,173,73,.28),transparent 72%),linear-gradient(135deg,#07382d,#0e5a46); box-shadow:0 24px 58px rgba(8,58,46,.16); }.platform-console-hero.compact { padding:1.55rem 2rem; }.platform-console-hero > span,.platform-card-head > div > span { color:#e4ca79; font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }.platform-console-hero h1 { margin:.35rem 0 0; font-size:clamp(1.8rem,3.7vw,3rem); letter-spacing:normal; }.platform-console-hero p { max-width:46rem; margin:.55rem 0 0; color:rgba(255,255,255,.76); line-height:1.8; font-size:.86rem; font-weight:600; }
.platform-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; margin-top:1rem; }.platform-kpis article,.platform-console-card,.platform-plan-summary article { border:1px solid rgba(15,87,69,.11); border-radius:19px; background:rgba(255,255,255,.8); box-shadow:0 13px 35px rgba(8,58,46,.05); }.platform-kpis article { display:grid; gap:.25rem; padding:1.15rem; }.platform-kpis span { color:#57736a; font-size:var(--text-caption); font-weight:var(--font-weight-semibold, 600); }.platform-kpis strong { font-size:2rem; line-height:1.05; }.platform-kpis small { color:#789087; font-size:var(--text-caption); font-weight:700; }
.platform-console-grid { display:grid; grid-template-columns:1.02fr .98fr; gap:1rem; margin-top:1rem; }.platform-console-card { padding:1.25rem; margin-top:1rem; }.platform-console-grid .platform-console-card { margin-top:0; }.platform-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }.platform-card-head h2 { margin:.18rem 0 0; font-size:1.3rem; }.platform-card-head > a { color:#1e7459; font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }.platform-quick-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; margin-top:1rem; }.platform-quick-links a { position:relative; display:grid; gap:.2rem; padding:.85rem; border:1px solid rgba(15,87,69,.1); border-radius:13px; color:#1d4f3f; background:rgba(15,87,69,.035); }.platform-quick-links b { font-size:.8rem; }.platform-quick-links small { color:#748a81; font-size:var(--text-caption); font-weight:700; }.platform-quick-links em { position:absolute; left:.75rem; bottom:.65rem; color:#c69e34; font-style:normal; }.platform-event-list { display:grid; gap:.5rem; margin-top:1rem; }.platform-event-list > div { display:grid; grid-template-columns:7.8rem 1fr auto; gap:.6rem; align-items:center; padding:.65rem .7rem; border-radius:11px; background:rgba(15,87,69,.045); }.platform-event-list b { font-size:var(--text-caption); }.platform-event-list span { overflow:hidden; color:#59756b; font-size:var(--text-caption); text-overflow:ellipsis; white-space:nowrap; }.platform-event-list small { color:#8a9b95; font-size:var(--text-caption); }
.platform-table-wrap { overflow:auto; margin-top:1rem; }.platform-table-wrap table { width:100%; min-width:660px; border-collapse:collapse; text-align:right; }.platform-table-wrap th { padding:.7rem .65rem; color:#607b71; border-bottom:1px solid rgba(15,87,69,.12); font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }.platform-table-wrap td { padding:.8rem .65rem; border-bottom:1px solid rgba(15,87,69,.08); color:#365c4f; font-size:var(--text-caption); font-weight:700; vertical-align:middle; }.platform-table-wrap td strong { display:block; color:#173e31; font-size:.78rem; }.platform-table-wrap td small { display:block; margin-top:.18rem; color:#83958e; font-size:var(--text-caption); font-weight:700; }.platform-status { display:inline-flex; padding:.27rem .48rem; border-radius:99px; color:#716023; background:#f7e8b7; font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }.platform-status.active { color:#1d694d; background:#dff4e8; }.platform-status.suspended { color:#963e3e; background:#fde6e6; }.platform-row-actions { display:flex; flex-wrap:wrap; gap:.35rem; }.platform-row-actions form { margin:0; }.platform-row-actions button { padding:.42rem .62rem; border:0; border-radius:8px; color:#fff; background:#176147; font:inherit; font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); cursor:pointer; }.platform-row-actions button.quiet { color:#8c3a3a; background:#fbe9e9; }.platform-console-alert { margin-top:1rem; padding:.8rem 1rem; border:1px solid rgba(20,111,75,.18); border-radius:12px; color:#1f684c; background:#eaf8ef; font-size:.8rem; font-weight:var(--font-weight-semibold, 600); }.platform-console-alert.error { color:#923b3b; border-color:rgba(150,59,59,.18); background:#fff0f0; }
.platform-plan-form { display:grid; grid-template-columns:minmax(6rem,1fr) minmax(5.5rem,1fr) auto; gap:.35rem; align-items:center; }.platform-plan-form select { min-width:0; min-height:2rem; padding:.3rem .38rem; border:1px solid rgba(15,87,69,.15); border-radius:8px; color:#345c4e; background:#fff; font:inherit; font-size:var(--text-caption); font-weight:var(--font-weight-semibold, 600); }.platform-plan-form button { min-height:2rem; padding:.35rem .55rem; border:0; border-radius:8px; color:#fff; background:#176147; font:inherit; font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); cursor:pointer; }
.platform-plan-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.85rem; margin-top:1rem; }.platform-plan-summary article { display:grid; gap:.25rem; padding:1.1rem; }.platform-plan-summary span { color:#567369; font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }.platform-plan-summary strong { font-size:2rem; }.platform-plan-summary small,.platform-payment-note { color:#738981; font-size:var(--text-caption); font-weight:var(--font-weight-semibold, 600); }.platform-payment-note { padding:.35rem .5rem; border-radius:8px; background:#f4edda; color:#806827; }
.platform-security-card { max-width:720px; }.platform-security-form { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; margin-top:1rem; }.platform-security-form label { display:grid; gap:.35rem; color:#31594b; font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }.platform-security-form input { min-height:2.8rem; padding:.6rem .75rem; border:1px solid rgba(15,87,69,.16); border-radius:10px; background:#fff; font:inherit; }.platform-security-form small { color:#7c9088; font-size:var(--text-caption); }.platform-security-form button { grid-column:1/-1; min-height:2.9rem; border:0; border-radius:11px; color:#fff; background:#135943; font:inherit; font-size:.8rem; font-weight:var(--font-weight-bold, 700); cursor:pointer; }
@media (max-width:900px) { .platform-console-header,.platform-console-nav,.platform-console-main { width:min(100% - 1.5rem,760px); }.platform-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }.platform-console-grid { grid-template-columns:1fr; }.platform-plan-summary { grid-template-columns:1fr; }.platform-console-hero.compact { padding:1.35rem; }.platform-event-list > div { grid-template-columns:1fr auto; }.platform-event-list span { grid-column:1/-1; grid-row:2; }.platform-security-form { grid-template-columns:1fr; } }
@media (max-width:540px) { .platform-console-header { min-height:4.9rem; }.platform-console-owner > span { display:none; }.platform-console .saas-brand-copy small { display:none; }.platform-console-nav { flex-wrap:wrap; overflow:visible; border-radius:12px; }.platform-console-nav a { padding:.55rem .7rem; font-size:var(--text-caption); }.platform-kpis { grid-template-columns:1fr 1fr; gap:.55rem; }.platform-kpis article { padding:.9rem; }.platform-kpis strong { font-size:1.6rem; }.platform-quick-links { grid-template-columns:1fr; }.platform-console-card { padding:1rem; }.platform-console-hero h1 { font-size:1.75rem; } }
html[data-theme="dark"] .platform-console { color:#e8f1ed; background:radial-gradient(42rem 26rem at 100% -8%,rgba(212,173,73,.08),transparent 70%),#0c1914; } html[data-theme="dark"] .platform-console .saas-brand { color:#edf5f1; } html[data-theme="dark"] .platform-console-nav,html[data-theme="dark"] .platform-kpis article,html[data-theme="dark"] .platform-console-card,html[data-theme="dark"] .platform-plan-summary article { border-color:rgba(151,185,172,.15); background:rgba(18,38,31,.88); } html[data-theme="dark"] .platform-console-nav a { color:#b6c8c0; } html[data-theme="dark"] .platform-table-wrap td,html[data-theme="dark"] .platform-table-wrap td strong,html[data-theme="dark"] .platform-security-form label { color:#dbe9e3; } html[data-theme="dark"] .platform-security-form input,html[data-theme="dark"] .platform-console-owner button { color:#e7f0ec; border-color:rgba(151,185,172,.18); background:#102820; }
html[data-theme="dark"] .platform-plan-form select { color:#e7f0ec; border-color:rgba(151,185,172,.18); background:#102820; }
.platform-subscriptions-page { display:grid; gap:var(--ds-section-gap,1.25rem); }
.platform-subscriptions-filter { display:grid; grid-template-columns:minmax(14rem,1.25fr) minmax(14rem,1.25fr) repeat(2,minmax(10rem,.8fr)) auto; gap:var(--ds-grid-gap,1rem); align-items:end; margin-top:0; padding:var(--ds-card-pad,1rem); border:var(--ds-card-border,1px solid rgba(15,87,69,.12)); border-radius:var(--ds-card-radius,18px); background:var(--ds-card-bg,rgba(255,255,255,.86)); box-shadow:var(--ds-card-shadow,0 5px 14px rgba(8,58,46,.07)); }
.platform-subscriptions-filter label,.school-danger-form label { display:grid; gap:.35rem; color:var(--muted,#46665a); font-size:var(--text-xs,.78rem); line-height:1.45; font-weight:var(--font-weight-bold, 700); }
.platform-subscriptions-filter input,.platform-subscriptions-filter select,.school-control-form input,.school-control-form select,.school-danger-form input { width:100%; min-width:0; min-height:var(--control-height,2.85rem); padding:.58rem .7rem; border:1px solid color-mix(in srgb,var(--primary) 16%,var(--line)); border-radius:var(--radius-md,12px); color:var(--ink,#244b3e); background:var(--theme-input-bg,var(--surface-strong,#fff)); font:inherit; font-size:var(--text-sm,.88rem); }
.platform-filter-checks { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; grid-column:1/-2; }
.platform-filter-checks label { display:inline-flex; align-items:center; gap:.38rem; }
.platform-filter-checks input { width:1rem; min-height:1rem; accent-color:#176147; }
.platform-subscriptions-filter button,.school-control-form button,.school-danger-form button { min-height:var(--control-height,2.85rem); padding:.58rem .9rem; border:0; border-radius:var(--radius-md,12px); color:#fff; background:#176147; font:inherit; font-size:var(--text-sm,.88rem); font-weight:var(--font-weight-bold, 700); cursor:pointer; }
.platform-filter-submit { grid-column:-2/-1; grid-row:1/span 2; }
.school-control-card { min-height:0; overflow:hidden; padding:0; border:var(--ds-card-border,1px solid rgba(15,87,69,.12)); border-radius:var(--ds-card-radius,18px); background:var(--ds-card-bg,rgba(255,255,255,.86)); box-shadow:var(--ds-card-shadow,0 5px 14px rgba(8,58,46,.07)); }
.school-control-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:var(--ds-card-pad,1rem); border-bottom:1px solid rgba(15,87,69,.09); background:color-mix(in srgb,var(--primary) 4%,var(--surface-strong)); }
.school-control-title { display:flex; align-items:center; gap:.8rem; min-width:0; }
.school-control-mark { width:3.15rem; height:3.15rem; display:grid; place-items:center; flex:0 0 auto; border-radius:15px; color:#fff; background:#145a45; font-size:1.15rem; font-weight:var(--font-weight-bold, 700); box-shadow:0 10px 22px rgba(8,58,46,.15); }
.school-control-title h2 { margin:0; color:var(--theme-text-strong); font-size:var(--ds-section-title-size,1.25rem); line-height:1.45; letter-spacing:0; }
.school-control-title p { margin:.18rem 0 0; }
.school-control-title p,.school-control-status small,.school-fact span,.school-fact small { color:var(--muted,#7c9189); }
.school-control-status { display:flex; align-items:center; gap:.5rem; flex:0 0 auto; }
.school-control-status small,.school-fact span { font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }
.school-control-body { display:grid; gap:var(--ds-grid-gap,1rem); padding:var(--ds-card-pad,1rem); }
.school-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--ds-grid-gap,1rem); }
.school-fact,.school-action-panel,.platform-empty-subscriptions { border:var(--ds-card-border,1px solid rgba(15,87,69,.12)); border-radius:var(--ds-card-radius-sm,12px); background:var(--ds-card-bg,rgba(255,255,255,.86)); box-shadow:var(--elevation-0); }
.school-fact,.school-action-panel { min-height:0; padding:var(--ds-card-pad-compact,1rem); }
.school-fact strong { display:block; margin-top:.25rem; overflow-wrap:anywhere; color:var(--theme-text-strong); font-size:var(--text-sm,.88rem); line-height:1.65; }
.school-fact small { display:block; margin-top:.18rem; font-size:var(--text-caption); font-weight:700; line-height:1.55; }
.school-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ds-grid-gap,1rem); }
.school-action-panel>span { display:block; margin-bottom:.65rem; color:var(--muted,#6a8178); font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }
.school-control-form { display:grid; grid-template-columns:minmax(8rem,1fr) minmax(8rem,1fr) minmax(10rem,1.25fr) auto; gap:var(--space-3,.75rem); align-items:center; }
.school-control-form+.school-control-form { margin-top:.55rem; }
.school-control-form.compact { grid-template-columns:minmax(8rem,1fr) minmax(10rem,1.3fr) auto; }
.school-control-form.single { grid-template-columns:minmax(10rem,1fr) auto; }
.school-control-form button.quiet { color:#8b3c3c; background:#fbe8e8; }
.school-control-form button.gold { color:#624d13; background:#f1d77e; }
.school-control-details { border:1px solid rgba(15,87,69,.09); border-radius:var(--ds-card-radius-sm,12px); background:rgba(255,255,255,.58); }
.school-control-details summary { padding:.9rem 1rem; color:#245342; font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); cursor:pointer; }
.school-control-details[open] summary { border-bottom:1px solid rgba(15,87,69,.08); }
.school-details-content { display:grid; gap:var(--ds-grid-gap,1rem); padding:.9rem; overflow-x:auto; }
.school-override-row { display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:.65rem .75rem; border-radius:var(--ds-card-radius-sm,12px); background:rgba(15,87,69,.045); color:#42685a; font-size:var(--text-caption); font-weight:var(--font-weight-semibold, 600); }
.school-history { width:100%; min-width:38rem; border-collapse:collapse; }
.school-history th,.school-history td { padding:.65rem; border-bottom:1px solid rgba(15,87,69,.08); text-align:right; font-size:var(--text-caption); }
.school-history th { color:#657d74; font-weight:var(--font-weight-bold, 700); }
.school-history td { color:#3d6255; }
.school-danger { border-color:rgba(165,55,55,.2); background:#fff9f9; }
.school-danger summary { color:#963c3c; }
.school-danger-box { display:grid; grid-template-columns:minmax(0,1fr) minmax(20rem,.85fr); gap:1rem; align-items:start; padding:1rem; }
.school-danger-copy { padding:.85rem; border-radius:var(--ds-card-radius-sm,12px); color:#7e3b3b; background:#fff0f0; }
.school-danger-copy strong { display:block; font-size:.82rem; }
.school-danger-copy p { margin:.4rem 0 0; font-size:var(--text-caption); line-height:1.8; }
.school-danger-copy code { display:inline-block; margin-top:.55rem; padding:.32rem .5rem; border-radius:7px; color:#7b3030; background:#ffe1e1; direction:ltr; }
.school-danger-form { display:grid; gap:var(--ds-grid-gap,1rem); }
.school-danger-form button { background:#a43f3f; }
.platform-empty-subscriptions { padding:2rem; border-style:dashed; color:#6d827a; text-align:center; font-size:.82rem; font-weight:var(--font-weight-semibold, 600); }
html[data-theme="dark"] .platform-subscriptions-filter,html[data-theme="dark"] .school-control-card,html[data-theme="dark"] .school-action-panel,html[data-theme="dark"] .school-fact,html[data-theme="dark"] .school-control-details { border-color:color-mix(in srgb,var(--brand-primary) 22%,var(--line)); background:color-mix(in srgb,var(--surface-strong) 92%,transparent); box-shadow:var(--elevation-0); }
html[data-theme="dark"] .school-control-header { border-color:rgba(151,185,172,.13); background:rgba(151,185,172,.055); }
html[data-theme="dark"] .school-control-title h2,html[data-theme="dark"] .school-fact strong,html[data-theme="dark"] .school-control-details summary { color:#e3eee9; }
html[data-theme="dark"] .platform-subscriptions-filter input,html[data-theme="dark"] .platform-subscriptions-filter select,html[data-theme="dark"] .school-control-form input,html[data-theme="dark"] .school-control-form select,html[data-theme="dark"] .school-danger-form input { color:#e7f0ec; border-color:rgba(151,185,172,.18); background:#102820; }
html[data-theme="dark"] .school-danger { background:rgba(76,24,24,.28); }
@media (max-width:1050px) { .platform-subscriptions-filter { grid-template-columns:repeat(2,minmax(0,1fr)); } .platform-filter-checks,.platform-filter-submit { grid-column:1/-1; grid-row:auto; } .school-facts { grid-template-columns:repeat(2,minmax(0,1fr)); } .school-control-form,.school-control-form.compact { grid-template-columns:repeat(2,minmax(0,1fr)); } .school-control-form button { width:100%; } .school-danger-box { grid-template-columns:1fr; } }
@media (max-width:700px) { .platform-subscriptions-filter,.school-action-grid,.school-facts,.school-control-form,.school-control-form.compact,.school-control-form.single { grid-template-columns:minmax(0,1fr); } .platform-filter-checks { display:grid; } .school-control-header { display:grid; grid-template-columns:minmax(0,1fr); } .school-control-status,.platform-filter-submit,.school-control-form button { width:100%; } .school-control-status { justify-content:space-between; } .school-control-body { padding:.85rem; } .school-danger-box { padding:.8rem; } .school-history,.school-history tbody,.school-history tr,.school-history td { display:block; min-width:0; } .school-history thead { display:none; } .school-history tr { padding:.55rem 0; border-bottom:1px solid rgba(15,87,69,.08); } .school-history td { border:0; padding:.25rem 0; } }
.account-workspace-grid { align-items:start; }
.workspace-form fieldset { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; padding:.8rem; background:rgba(15,87,69,.025); }
.workspace-form fieldset label { min-height:2.45rem; padding:.45rem .55rem; border:1px solid rgba(15,87,69,.1); border-radius:10px; background:#fff; cursor:pointer; transition:border-color .18s ease,background .18s ease; }
.workspace-form fieldset label:hover { border-color:rgba(18,112,83,.32); background:#f4fbf7; }
.workspace-form fieldset input[type="checkbox"] { appearance:auto; width:1.05rem !important; min-width:1.05rem; min-height:1.05rem !important; height:1.05rem; margin:0; padding:0 !important; border:0; border-radius:4px; accent-color:#187254; }
html[data-theme="dark"] .workspace-form fieldset { background:rgba(151,185,172,.05); }.workspace-form fieldset label { color:#46665a; }html[data-theme="dark"] .workspace-form fieldset label { color:#dce9e3; border-color:rgba(151,185,172,.16); background:#102820; }
@media (max-width:500px) { .workspace-form fieldset { grid-template-columns:1fr; } }
.account-school-role { display:grid; gap:.12rem; }.account-school-role span { color:#6b877c; font-size:var(--text-caption); font-weight:var(--font-weight-semibold, 600); }.account-school-role strong { color:#28654f; font-size:var(--text-caption); }.account-school-role small { color:#94752a; font-size:var(--text-caption); font-weight:var(--font-weight-semibold, 600); }
html[data-theme="dark"] .account-school-role { background:rgba(151,185,172,.09); }.account-school-role strong { color:#28654f; }html[data-theme="dark"] .account-school-role strong { color:#d9ece3; }
.account-hub-user > a,.account-hub-actions > a { min-height:2.55rem; display:inline-flex; align-items:center; padding:.5rem .82rem; border:1px solid rgba(15,87,69,.13); border-radius:12px; color:#24483c; background:rgba(255,255,255,.7); font-size:.78rem; font-weight:var(--font-weight-bold, 700); }.account-profile-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; margin-top:1rem; }.account-profile-stats article { display:grid; gap:.25rem; padding:1.1rem; border:1px solid rgba(15,87,69,.11); border-radius:18px; background:rgba(255,255,255,.8); box-shadow:0 13px 35px rgba(8,58,46,.05); }.account-profile-stats span { color:#648077; font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }.account-profile-stats strong { color:#163e30; font-size:1.35rem; }.account-profile-stats small,.account-profile-details p { color:#71867d; font-size:var(--text-caption); font-weight:700; }.account-profile-details p { line-height:1.9; }.account-profile-details { margin-top:1rem; }
.account-hub-user .account-hub-plan { min-height:2.55rem; display:inline-flex; align-items:center; gap:.38rem; padding:.42rem .7rem; border-color:rgba(197,151,37,.34); color:#745916; background:linear-gradient(135deg,#fff8dd,#f7e8a9); white-space:nowrap; }.account-hub-plan span { font-size:var(--text-caption); font-weight:var(--font-weight-semibold, 600); }.account-hub-plan strong { font-size:var(--text-caption); font-weight:var(--font-weight-bold, 700); }
.account-hub-create.account-hub-limit { color:#715d1d; border-color:rgba(185,142,29,.25); background:#f7efd8; }
@media (max-width:900px) { .account-profile-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:500px) { .account-profile-stats { grid-template-columns:1fr; }.account-hub-user > a,.account-hub-actions > a { min-height:2.45rem; padding-inline:.68rem; font-size:var(--text-caption); } }
html[data-theme="dark"] .account-hub-user > a,html[data-theme="dark"] .account-hub-actions > a,html[data-theme="dark"] .account-profile-stats article { color:#dce9e3; border-color:rgba(151,185,172,.15); background:rgba(18,38,31,.86); } html[data-theme="dark"] .account-hub-user .account-hub-plan { color:#f1d37b; border-color:rgba(228,190,78,.28); background:rgba(117,86,15,.24); } html[data-theme="dark"] .account-profile-stats strong { color:#edf6f1; }
@media (max-width: 600px) {
  .auth-v3-header {
    min-height: 4.35rem;
    align-items: center;
  }
  .auth-v3-brand { min-width: 0; gap: .48rem; }
  .auth-v3-brand strong { font-size: .9rem; white-space: nowrap; }
  .auth-v3-header-link {
    max-width: 10.5rem;
    min-height: 2.45rem;
    padding-inline: .65rem;
    overflow: hidden;
    text-align: center;
    line-height: 1.35;
  }
  .auth-v3-layout,
  .auth-v3-register-layout {
    width: calc(100% - 1rem);
    gap: .7rem;
    padding-bottom: 1.25rem;
  }
  .auth-v3-form-panel { padding: 0; }
  .auth-v3-card,
  .auth-v3-register-card {
    padding: 1.12rem;
    border-radius: 19px;
  }
  .auth-v3-card-head { margin-bottom: .9rem; }
  .auth-v3-card-kicker { margin-bottom: .42rem; }
  .auth-v3-card-head h2 { font-size: 1.48rem; }
  .auth-v3-card-head p { margin-top: .32rem; font-size: .78rem; line-height: 1.65; }
  .auth-v3 .field { gap: .3rem; }
  .auth-v3 .field label { font-size: .82rem; }
  .auth-v3 .field input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
  .auth-v3 .field select { min-height: 3.15rem; font-size: 16px; }
  .auth-v3-submit,
  .auth-v3 .btn.auth-v3-submit { min-height: 3.2rem; margin-top: .2rem; }
  .auth-v3-terms { margin-top: .9rem; font-size:var(--text-caption); line-height: 1.65; }
  .auth-v3-showcase {
    min-height: 0;
    padding: 1.15rem;
    border-radius: 19px;
    gap: .95rem;
  }
  .auth-v3-showcase h1 { font-size: clamp(1.75rem, 9vw, 2.45rem); }
  .auth-v3-showcase-copy > p { display: none; }
  .auth-v3-onboarding { padding: .72rem; border-radius: 14px; }
  .auth-v3-onboarding-head { margin-bottom: .45rem; }
  .auth-v3-onboarding-step { min-height: 2.5rem; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: .45rem; }
  .auth-v3-onboarding-step > b { width: 1.55rem; height: 1.55rem; font-size:var(--text-caption); }
  .auth-v3-onboarding-step strong { font-size:var(--text-caption); }
  .auth-v3-onboarding-step small { font-size:var(--text-caption); }
  .auth-v3-onboarding-step > span { font-size:var(--text-caption); }
  .auth-v3-benefits { display: none; }
  .account-hub-header { width: calc(100% - 1rem); }
  .account-hub-user button { min-height: 2.45rem; padding-inline: .68rem; font-size:var(--text-caption); }
  .account-hub-main { width: calc(100% - 1rem); }
  .account-hub-hero { gap: 1.1rem; }
  .account-hub-hero-stat { padding: .85rem 1rem; border-radius:15px; }
  .account-hub-hero-stat strong { font-size: 1.9rem; }
  .account-hub-section-head h2 { font-size: 1.55rem; }
  .account-school-card { padding: 1.05rem; }
  .account-school-card h3 { font-size: 1.05rem; }
  .account-school-open { min-height: 3.1rem; }
  .account-school-links { gap: .75rem; }
  .account-school-links a { min-height: 2rem; display: inline-flex; align-items: center; font-size:var(--text-caption); }
  .account-empty-state { margin-top: .4rem; }
  .account-empty-state h2 { font-size: 1.32rem; }
}
@media (max-width: 360px) {
  .auth-v3-brand strong { font-size: .82rem; }
  .auth-v3-header-link { max-width: 8.6rem; font-size:var(--text-caption); }
  .auth-v3-showcase h1 { font-size: 1.65rem; }
  .auth-v3-onboarding-step > span { display: none; }
  .account-hub-hero h1 { font-size: 2rem; }
}
.auth-v3-layout > .auth-v3-card {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  width: min(100%, 34rem);
}
.auth-v3-layout > .auth-v3-card .auth-v3-form > label {
  display: grid;
  gap: .38rem;
  color: var(--auth-ink);
  font-weight:var(--font-weight-semibold, 600);
}
.auth-v3-layout > .auth-v3-card .auth-v3-form input:not([type="checkbox"]),
.auth-v3-layout > .auth-v3-card .auth-v3-form select {
  width: 100%;
  min-height: 3rem;
  padding: .72rem .85rem;
  border: 1px solid rgba(18,35,29,.16);
  border-radius: 12px;
  background: rgba(255,255,255,.92);
  color: var(--auth-ink);
  font: inherit;
}
.auth-v3-layout > .auth-v3-card .auth-v3-form input:focus,
.auth-v3-layout > .auth-v3-card .auth-v3-form select:focus {
  outline: 0;
  border-color: var(--auth-green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--auth-green) 14%, transparent);
}
.auth-v3-layout > .auth-v3-card .auth-v3-form .btn { width: 100%; min-height: 3.1rem; margin-top: .25rem; }
.auth-v3-layout > .auth-v3-card > h1 { margin-top: 0; color: var(--auth-ink); font-size: clamp(1.65rem, 4vw, 2.25rem); line-height: 1.3; }
.auth-v3-layout > .auth-v3-card > p { color: var(--auth-muted); }
main.page { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(1rem, 3vw, 3rem) 0 4rem; }
main.page .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
main.page .page-header h1 { margin: 0; font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.35; }
main.page .page-header p { margin: .35rem 0 0; color: var(--muted); }
main.page .card { margin: 1rem 0; padding: clamp(1rem, 3vw, 1.6rem); overflow: hidden; }
main.page .auth-v3-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
main.page .auth-v3-form label { display: grid; gap: .35rem; font-weight: 700; min-width: 0; }
main.page .auth-v3-form input, main.page .auth-v3-form select { min-width: 0; width: 100%; min-height: 2.9rem; border-radius: 10px; }
main.page .auth-v3-form fieldset { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .75rem 1rem; border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; }
main.page .auth-v3-form fieldset label { display: flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 600; }
main.page .auth-v3-form button { justify-self: start; min-height: 2.9rem; }
main.page table { width: 100%; border-collapse: collapse; }
main.page th, main.page td { padding: .8rem .65rem; text-align: right; vertical-align: middle; border-bottom: 1px solid var(--line); }
main.page th { color: var(--muted); font-size: .82rem; white-space: nowrap; }
main.page td form { display: inline-flex; margin: 0 0 .35rem .35rem; }
main.page td a { color: var(--primary); font-weight: 700; }
main.page code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; direction: ltr; text-align: left; padding: .45rem .6rem; border-radius: 8px; background: var(--primary-faint); }
@media (max-width: 680px) { main.page { width: min(100% - 1.1rem, 1120px); padding-bottom: 5rem; } main.page .page-header { flex-direction: column; } main.page .page-header > .btn { width: 100%; text-align: center; } main.page .auth-v3-form { grid-template-columns: 1fr; } main.page .auth-v3-form button { width: 100%; } main.page .card { border-radius: 14px; } main.page table, main.page thead, main.page tbody, main.page tr, main.page td { display: block; } main.page thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } main.page tr { padding: .8rem 0; border-bottom: 1px solid var(--line); } main.page td { border: 0; padding: .35rem 0; overflow-wrap: anywhere; } main.page td[data-label] { display: grid; grid-template-columns: minmax(6.5rem, 38%) 1fr; gap: .55rem; } main.page td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: .8rem; font-weight: 700; } main.page td[colspan] { display: block; text-align: center; } main.page td form { margin: 0; } }
@media (prefers-reduced-motion: reduce) { main.page * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
@media (max-width: 960px) {
  :root {
    --mobile-bottom-nav-space: calc(var(--pro-mobile-nav-height, 4.35rem) + 1.9rem + env(safe-area-inset-bottom, 0px));
    --mobile-sticky-action-bottom: calc(var(--mobile-bottom-nav-space) + .45rem);
  }
  body:has(.mobile-bottom-nav) .main {
    padding-bottom: max(7rem, calc(var(--mobile-bottom-nav-space) + 1.5rem));
  }
  .mobile-bottom-nav {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(4.35rem, 1fr);
    grid-template-columns: none !important;
    align-items: stretch;
    min-height: var(--pro-mobile-nav-height, 4.35rem);
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-bottom-nav::-webkit-scrollbar {
    display: none;
  }
  .mobile-bottom-item {
    min-width: 0;
    touch-action: manipulation;
    white-space: nowrap;
  }
  .mobile-bottom-item > span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-bottom-action {
    transform: none !important;
  }
  .mobile-bottom-action .mobile-bottom-icon {
    width: 2.25rem !important;
    height: 2.25rem !important;
    border-width: 2px !important;
  }
  .mobile-bottom-action:active {
    transform: translateY(1px) scale(.985) !important;
  }
  .mobile-action-sheet {
    bottom: calc(var(--mobile-bottom-nav-space) + .25rem) !important;
    max-height: min(70dvh, calc(100dvh - var(--mobile-bottom-nav-space) - 1.5rem));
    overflow-y: auto;
  }
  .workflow-submit-row,
  .attendance-approve-form {
    bottom: var(--mobile-sticky-action-bottom) !important;
    z-index: 60;
  }
  .table-wrap:not(:has(> table.responsive-table)),
  .table-wrap:not(:has(> .responsive-table)),
  .table-container:not(:has(> table.responsive-table)),
  .panel[style*="overflow-x"] {
    overflow-x: auto !important;
    overflow-y: hidden;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    padding-bottom: .35rem;
  }
  .table-wrap:not(:has(> table.responsive-table)) > table,
  .table-wrap:not(:has(> .responsive-table)) > table,
  .table-container:not(:has(> table.responsive-table)) > table,
  .panel[style*="overflow-x"] > table {
    min-width: max-content;
  }
  .table-wrap:has(> table.responsive-table),
  .table-wrap:has(> .responsive-table) {
    overflow: visible !important;
  }
  .mobile-scroll-table:not(.responsive-table),
  table.mobile-scroll-table:not(.responsive-table) {
    min-width: 42rem !important;
  }
}
@media (max-width: 640px) {
  .app-shell .topbar > .topbar-actions:not(.student-detail-toolbar),
  .topbar-actions:not(.student-detail-toolbar),
  .student-detail-actions {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)) !important;
    gap: .5rem;
    width: 100%;
  }
  .app-shell .topbar > .topbar-actions > *,
  .app-shell .topbar > .topbar-actions form,
  .app-shell .topbar > .topbar-actions .btn,
  .topbar-actions > *,
  .topbar-actions > form,
  .topbar-actions .btn,
  .student-detail-actions > * {
    min-width: 0;
    width: 100% !important;
  }
}
@media (max-width: 430px) {
  .app-shell .topbar > .topbar-actions:not(.student-detail-toolbar),
  .topbar-actions:not(.student-detail-toolbar),
  .student-detail-actions {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 600px) {
  .auth-v3-header {
    width: calc(100% - .9rem);
    min-height: 4rem;
    gap: .55rem;
  }
  .auth-v3-brand-mark {
    width: 2.45rem;
    height: 2.45rem;
    flex-basis: 2.45rem;
    border-radius: 12px;
  }
  .auth-v3-brand small {
    display: none;
  }
  .auth-v3-header-link {
    flex: 0 1 auto;
    max-width: 9.5rem;
    min-height: 2.45rem;
    padding-inline: .55rem;
    font-size:var(--text-caption);
    white-space: normal;
  }
  .auth-v3-layout,
  .auth-v3-register-layout {
    display: flex;
    flex-direction: column;
    min-height: auto;
    width: calc(100% - .9rem);
    gap: .65rem;
    padding-bottom: 1rem;
  }
  .auth-v3-form-panel {
    order: 1;
    padding: 0;
  }
  .auth-v3-showcase {
    order: 2;
    min-height: 0;
    padding: .9rem;
    gap: .65rem;
  }
  .auth-v3-showcase h1 {
    max-width: none;
    font-size: clamp(1.45rem, 7vw, 1.95rem);
    line-height: 1.22;
  }
  .auth-v3-eyebrow,
  .auth-v3-preview,
  .auth-v3-onboarding,
  .auth-v3-panel-note {
    display: none !important;
  }
}
@media (max-width: 540px) {
  .platform-console-main {
    padding-bottom: max(7rem, calc(var(--mobile-bottom-nav-space, 6.5rem) + 1.5rem));
  }
  .platform-card-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: .55rem;
  }
  .platform-card-head > a {
    width: 100%;
    min-height: 2.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(15,87,69,.06);
  }
  .platform-table-wrap {
    overflow: visible !important;
  }
  .platform-table-wrap table,
  .platform-table-wrap thead,
  .platform-table-wrap tbody,
  .platform-table-wrap tr,
  .platform-table-wrap td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .platform-table-wrap thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .platform-table-wrap tbody {
    display: grid;
    gap: .7rem;
  }
  .platform-table-wrap tr {
    padding: .85rem;
    border: 1px solid rgba(15,87,69,.1);
    border-radius: 14px;
    background: rgba(255,255,255,.72);
  }
  .platform-table-wrap td {
    display: grid;
    grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr);
    gap: .45rem;
    align-items: start;
    padding: .42rem 0;
    border-bottom: 1px solid rgba(15,87,69,.07);
    overflow-wrap: anywhere;
  }
  .platform-table-wrap td:last-child {
    border-bottom: 0;
  }
  .platform-table-wrap td::before {
    content: "بيان";
    color: #607b71;
    font-size:var(--text-caption);
    font-weight:var(--font-weight-bold, 700);
  }
  .platform-school-snapshot td:nth-child(1)::before { content: "المدرسة"; }
  .platform-school-snapshot td:nth-child(2)::before { content: "الخطة"; }
  .platform-school-snapshot td:nth-child(3)::before { content: "الحالة"; }
  .platform-school-snapshot td:nth-child(4)::before { content: "الطلاب"; }
  .platform-console-card:not(.platform-school-snapshot) .platform-table-wrap td:nth-child(1)::before { content: "الحساب / المدرسة"; }
  .platform-console-card:not(.platform-school-snapshot) .platform-table-wrap td:nth-child(2)::before { content: "الاشتراك / المالك"; }
  .platform-console-card:not(.platform-school-snapshot) .platform-table-wrap td:nth-child(3)::before { content: "الحالة / الخطة"; }
  .platform-console-card:not(.platform-school-snapshot) .platform-table-wrap td:nth-child(4)::before { content: "التاريخ / العدد"; }
  .platform-console-card:not(.platform-school-snapshot) .platform-table-wrap td:nth-child(5)::before { content: "إجراء"; }
  .platform-console-card:not(.platform-school-snapshot) .platform-table-wrap td:nth-child(6)::before { content: "إجراءات"; }
  .platform-plan-form {
    grid-template-columns: 1fr;
    gap: .45rem;
  }
  .platform-plan-form select,
  .platform-plan-form button,
  .platform-row-actions button {
    width: 100%;
    min-height: 2.65rem;
  }
  .platform-row-actions,
  .platform-row-actions form {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  html[data-theme="dark"] .platform-table-wrap tr {
    background: rgba(18,38,31,.86);
    border-color: rgba(151,185,172,.15);
  }
  html[data-theme="dark"] .platform-card-head > a {
    background: rgba(151,185,172,.08);
  }
}
@media (max-width: 360px) {
  .mobile-bottom-nav {
    grid-auto-columns: minmax(4rem, 1fr);
    inset-inline: .35rem !important;
    padding-inline: .24rem;
  }
  .mobile-bottom-item {
    font-size:var(--text-caption);
  }
  .auth-v3-brand strong {
    max-width: 8.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
:root {
  --account-page-max: var(--ds-page-max, 1440px);
  --account-page-gutter: clamp(1rem, 2.2vw, 2rem);
  --account-section-gap: var(--ds-section-gap, 1.25rem);
  --account-grid-gap: var(--ds-grid-gap, 1rem);
  --account-card-pad: var(--ds-card-pad, clamp(1rem, 1.45vw, 1.35rem));
  --account-card-radius: var(--ds-card-radius, var(--radius-lg));
  --account-card-radius-sm: var(--ds-card-radius-sm, var(--radius-md));
  --account-card-border: var(--ds-card-border, 1px solid color-mix(in srgb, var(--primary) 12%, var(--line)));
  --account-card-bg: var(--ds-card-bg, color-mix(in srgb, var(--surface-strong) 94%, transparent));
  --account-card-shadow: var(--ds-card-shadow, var(--elevation-1));
  --account-control-h: var(--ds-control-h, var(--control-height));
}
.account-hub-header,
.account-hub-main,
.account-workspace-header,
.account-workspace-main,
.platform-console-header,
.platform-console-main {
  width: min(100% - (var(--account-page-gutter) * 2), var(--account-page-max));
}
.account-hub-main,
.account-workspace-main,
.platform-console-main {
  display: grid;
  align-content: start;
  gap: var(--account-section-gap);
}
.account-hub-section-head,
.platform-card-head,
.platform-console-header,
.account-workspace-header,
.account-hub-header {
  gap: var(--account-grid-gap);
}
.account-school-grid,
.workspace-plans,
.platform-kpis,
.platform-plan-summary,
.platform-quick-links {
  gap: var(--account-grid-gap);
}
.account-school-card,
.account-school-add,
.account-empty-state,
.account-workspace-card,
.workspace-plan,
.platform-console-card,
.platform-kpis article,
.platform-plan-summary article {
  min-width: 0;
  min-height: 0;
  border: var(--account-card-border);
  border-radius: var(--account-card-radius);
  background: var(--account-card-bg);
  box-shadow: var(--account-card-shadow);
}
.account-school-card,
.account-school-add,
.account-workspace-card,
.workspace-plan,
.platform-console-card,
.platform-kpis article,
.platform-plan-summary article {
  padding: var(--account-card-pad);
}
.account-school-card,
.account-school-add,
.workspace-plan,
.platform-kpis article,
.platform-plan-summary article {
  border-radius: var(--account-card-radius-sm);
}
.account-school-card,
.workspace-plan {
  min-height: 0;
}
.account-hub-hero,
.account-workspace-hero,
.platform-console-hero {
  min-height: 0;
  border-radius: var(--account-card-radius);
  padding: clamp(1.35rem, 3vw, 2.35rem);
  box-shadow: var(--account-card-shadow);
}
.account-hub-hero h1,
.account-workspace-hero h1,
.platform-console-hero h1 {
  letter-spacing: 0;
  line-height: 1.22;
}
.account-hub-hero p,
.account-workspace-hero p,
.platform-console-hero p {
  max-width: 72ch;
}
.account-school-card-top,
.platform-row-actions,
.account-hub-actions,
.account-workspace-header,
.platform-console-header {
  min-width: 0;
}
.account-school-card p,
.account-school-card h3,
.account-school-role,
.platform-event-list span {
  overflow-wrap: anywhere;
}
.workspace-form input,
.workspace-form select,
.workspace-form button,
.workspace-plan button,
.platform-row-actions button,
.account-school-open,
.account-hub-create,
.account-workspace-back {
  min-height: var(--account-control-h);
  border-radius: var(--account-card-radius-sm);
}
.workspace-list article,
.platform-event-list > div,
.platform-quick-links a {
  border-radius: var(--account-card-radius-sm);
}
html[data-theme="dark"] {
  --account-card-border: var(--ds-card-border, 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--line)));
  --account-card-bg: var(--ds-card-bg, color-mix(in srgb, var(--surface-strong) 92%, transparent));
  --account-card-shadow: var(--elevation-0);
}
html[data-theme="dark"] .account-hub,
html[data-theme="dark"] .account-workspace,
html[data-theme="dark"] .platform-console {
  background: var(--theme-bg);
}
@media (max-width: 900px) {
  .account-hub-header,
  .account-hub-main,
  .account-workspace-header,
  .account-workspace-main,
  .platform-console-header,
  .platform-console-main {
    width: min(100% - 1.5rem, 760px);
  }
}
@media (max-width: 600px) {
  :root {
    --account-page-gutter: .5rem;
    --account-section-gap: .72rem;
    --account-grid-gap: .58rem;
    --account-card-pad: .9rem;
    --account-card-radius: 15px;
    --account-card-radius-sm: 13px;
  }
  .account-hub-header,
  .account-hub-main,
  .account-workspace-header,
  .account-workspace-main,
  .platform-console-header,
  .platform-console-main {
    width: calc(100% - 1rem);
  }
  .account-school-add {
    min-height: 8.5rem;
  }
  .account-hub-hero,
  .account-workspace-hero,
  .platform-console-hero {
    padding: 1.15rem;
  }
}
.school-settings-page { overflow-x:clip; }
.school-settings-hero { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1.15rem; }
.school-settings-hero-mark { width:4.25rem; height:4.25rem; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(255,255,255,.2); border-radius:20px; color:#fff; background:var(--school-card-color,#135943); box-shadow:0 15px 30px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.18); font-size:1.7rem; font-weight:var(--font-weight-bold,700); }
.school-settings-hero > div:nth-child(2) { min-width:0; }
.school-settings-shortcuts { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.48rem; }
.school-settings-shortcuts a { min-height:2.55rem; display:inline-flex; align-items:center; justify-content:center; padding:.52rem .82rem; border:1px solid rgba(255,255,255,.16); border-radius:12px; color:#fff; background:rgba(255,255,255,.08); font-size:var(--text-caption); font-weight:var(--font-weight-bold,700); transition:transform .18s ease,background-color .18s ease,border-color .18s ease; }
.school-settings-shortcuts a:hover { transform:translateY(-1px); border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.13); }
.school-settings-saved { display:flex; align-items:center; gap:.55rem; }
.school-settings-saved > span { width:1.5rem; height:1.5rem; display:grid; place-items:center; border-radius:50%; color:#fff; background:#25835a; font-weight:var(--font-weight-bold,700); }
.school-settings-layout { display:grid; grid-template-columns:minmax(0,1.42fr) minmax(18rem,.58fr); align-items:start; gap:1rem; margin-top:1rem; }
.school-settings-card,.school-settings-summary-card,.school-danger-zone { border-color:rgba(15,87,69,.13); background:rgba(255,255,255,.82); box-shadow:0 15px 38px rgba(8,58,46,.055); }
.school-settings-card-head { display:flex; align-items:start; justify-content:space-between; gap:1rem; }
.school-settings-card-head > div { min-width:0; }
.school-settings-badge { flex:0 0 auto; padding:.35rem .62rem; border:1px solid rgba(15,87,69,.12); border-radius:999px; color:#39705d!important; background:rgba(15,87,69,.06); font-size:var(--text-caption)!important; }
.school-settings-intro { max-width:48rem; margin:.62rem 0 0; color:#71837c; font-size:.82rem; font-weight:600; line-height:1.75; }
.school-settings-form { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.95rem; }
.school-settings-form > label { min-width:0; }
.school-settings-form > label > span { color:#274d40; font-size:.8rem; font-weight:var(--font-weight-bold,700); }
.school-settings-form > label > small { color:#7a8d85; font-size:var(--text-caption); font-weight:600; line-height:1.55; }
.school-settings-field-wide { grid-column:1 / -1; }
.school-settings-form input { min-height:3.15rem; padding:.72rem .82rem; border-radius:13px; transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease; }
.school-settings-form input:focus { outline:none; border-color:color-mix(in srgb,#135943 65%,rgba(15,87,69,.16)); box-shadow:0 0 0 4px rgba(19,89,67,.1); }
.school-settings-form-actions { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.25rem; padding-top:1rem; border-top:1px solid rgba(15,87,69,.1); }
.school-settings-form-actions > span { color:#74877f; font-size:var(--text-caption); font-weight:600; }
.school-settings-form-actions button { min-width:12rem; margin-inline-start:auto; }
.school-settings-summary-card { position:sticky; top:1rem; }
.school-settings-summary-list { display:grid; gap:.6rem; margin-top:1rem; }
.school-settings-summary-list > div { min-width:0; display:grid; gap:.16rem; padding:.72rem .78rem; border:1px solid rgba(15,87,69,.08); border-radius:13px; background:rgba(15,87,69,.045); }
.school-settings-summary-list span { color:#71877e; font-size:var(--text-caption); font-weight:var(--font-weight-semibold,600); }
.school-settings-summary-list strong { overflow-wrap:anywhere; color:#1d4437; font-size:.82rem; line-height:1.55; }
.school-settings-summary-card > p { margin:1rem 0 0; padding-top:.85rem; border-top:1px solid rgba(15,87,69,.09); color:#7a8b84; font-size:var(--text-caption); font-weight:600; line-height:1.7; }
.school-danger-zone { display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-top:1rem; padding:1.35rem; border-color:rgba(176,48,48,.2); background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,247,247,.92)); }
.school-danger-copy { min-width:0; }
.school-danger-copy > span { color:#a53838; font-size:var(--text-caption); font-weight:var(--font-weight-bold,700); }
.school-danger-copy h2 { margin:.28rem 0 0; color:#6e2424; font-size:1.25rem; }
.school-danger-copy p { max-width:54rem; margin:.45rem 0 0; color:#7c6262; font-size:.79rem; font-weight:600; line-height:1.75; }
.school-danger-button { min-height:3rem; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; flex:0 0 auto; padding:.65rem 1rem; border:1px solid rgba(166,42,42,.2); border-radius:13px; color:#fff; background:linear-gradient(135deg,#b73f3f,#8f2929); box-shadow:0 12px 25px rgba(143,41,41,.18); font:inherit; font-size:.82rem; font-weight:var(--font-weight-bold,700); cursor:pointer; transition:transform .18s ease,box-shadow .18s ease; }
.school-danger-button:hover { transform:translateY(-2px); box-shadow:0 16px 30px rgba(143,41,41,.24); }
.school-danger-button > span { width:1.35rem; height:1.35rem; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.13); font-size:1rem; }
.school-delete-modal[hidden] { display:none; }
.school-delete-modal { position:fixed; z-index:10050; inset:0; display:grid; place-items:center; padding:1rem; opacity:0; transition:opacity .24s ease; }
.school-delete-modal.is-open { opacity:1; }
.school-delete-backdrop { position:absolute; inset:0; background:rgba(7,24,20,.68); backdrop-filter:blur(8px) saturate(.92); }
.school-delete-dialog { --delete-dialog-width:35rem; --delete-stage-height:28.5rem; width:min(calc(100vw - 2rem),var(--delete-dialog-width)); min-height:var(--delete-stage-height); position:relative; z-index:1; overflow:hidden; padding:1.55rem; border:1px solid rgba(255,255,255,.65); border-radius:27px; color:#173128; background:linear-gradient(145deg,#fff,#fbfdfb); box-shadow:0 35px 100px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.9); opacity:0; transform:translateY(22px) scale(.965); transition:width .52s cubic-bezier(.22,1,.36,1),min-height .52s cubic-bezier(.22,1,.36,1),border-radius .52s cubic-bezier(.22,1,.36,1),opacity .28s ease,transform .52s cubic-bezier(.22,1,.36,1); }
.school-delete-modal.is-open .school-delete-dialog { opacity:1; transform:translateY(0) scale(1); }
.school-delete-dialog[data-state="loading"] { --delete-dialog-width:38rem; --delete-stage-height:23rem; border-radius:30px; }
.school-delete-dialog[data-state="success"] { --delete-dialog-width:29rem; --delete-stage-height:20.5rem; border-radius:34px; }
.school-delete-dialog[data-state="error"] { --delete-dialog-width:32rem; --delete-stage-height:22rem; }
.school-delete-close { position:absolute; z-index:3; top:.8rem; inset-inline-start:.8rem; width:2.2rem; height:2.2rem; display:grid; place-items:center; padding:0; border:1px solid rgba(15,87,69,.1); border-radius:50%; color:#61756d; background:#f0f5f2; font:inherit; font-size:1.35rem; line-height:1; cursor:pointer; transition:transform .18s ease,background-color .18s ease,color .18s ease,opacity .18s ease; }
.school-delete-close:hover { transform:rotate(5deg); color:#173d31; background:#e4efe9; }
.school-delete-dialog[data-state="loading"] .school-delete-close,.school-delete-dialog[data-state="success"] .school-delete-close { opacity:0; visibility:hidden; pointer-events:none; }
.school-delete-stage { min-height:calc(var(--delete-stage-height) - 3.1rem); display:grid; place-items:center; transition:min-height .52s cubic-bezier(.22,1,.36,1); }
.school-delete-panel { width:100%; grid-area:1 / 1; opacity:0; transform:translateY(12px) scale(.985); pointer-events:none; visibility:hidden; text-align:center; }
.school-delete-panel.is-active { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; visibility:visible; animation:schoolDeletePanelIn .42s cubic-bezier(.22,1,.36,1) both; }
@keyframes schoolDeletePanelIn { from { opacity:0; transform:translateY(14px) scale(.975); } to { opacity:1; transform:translateY(0) scale(1); } }
.school-delete-kicker { display:inline-block; margin-top:.65rem; color:#a06d18; font-size:var(--text-caption); font-weight:var(--font-weight-bold,700); }
.school-delete-panel h2 { margin:.38rem 0 0; color:#173128; font-size:clamp(1.45rem,3vw,1.9rem); line-height:1.35; }
.school-delete-panel > p { max-width:30rem; margin:.55rem auto 0; color:#6f817a; font-size:.82rem; font-weight:600; line-height:1.75; }
.school-delete-icon { width:4.2rem; height:4.2rem; display:grid; place-items:center; margin:0 auto; border-radius:21px; font-size:1.7rem; font-weight:var(--font-weight-bold,700); }
.school-delete-icon-danger,.school-delete-icon-error { color:#a83333; border:1px solid rgba(168,51,51,.16); background:#fff0f0; box-shadow:0 12px 28px rgba(168,51,51,.1); }
.school-delete-warning { display:grid; gap:.16rem; margin:1rem 0 .85rem; padding:.78rem .85rem; border:1px solid rgba(176,48,48,.13); border-radius:13px; color:#7c4c4c; background:#fff8f8; text-align:start; }
.school-delete-warning strong { color:#8c3030; font-size:.78rem; }
.school-delete-warning span { font-size:var(--text-caption); font-weight:600; line-height:1.6; }
.school-delete-form { display:grid; gap:.72rem; text-align:start; }
.school-delete-form > label:first-child { display:grid; gap:.35rem; color:#344f45; font-size:.78rem; font-weight:var(--font-weight-bold,700); }
.school-delete-form input[type="password"] { width:100%; min-height:3rem; padding:.68rem .78rem; border:1px solid rgba(15,87,69,.16); border-radius:12px; outline:none; color:#173128; background:#fff; font:inherit; }
.school-delete-form input[type="password"]:focus { border-color:#a63c3c; box-shadow:0 0 0 4px rgba(166,60,60,.09); }
.school-delete-ack { display:flex; align-items:flex-start; gap:.5rem; color:#6e7f78; font-size:var(--text-caption); font-weight:600; line-height:1.55; cursor:pointer; }
.school-delete-ack input { width:1.05rem; height:1.05rem; flex:0 0 auto; margin-top:.15rem; accent-color:#a63232; }
.school-delete-inline-error { margin:0!important; padding:.6rem .7rem; border:1px solid rgba(176,48,48,.16); border-radius:10px; color:#982f2f!important; background:#fff1f1; text-align:start; }
.school-delete-actions { display:flex; justify-content:center; gap:.6rem; margin-top:.25rem; }
.school-delete-actions button,.school-delete-success-action { min-height:2.9rem; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.62rem .95rem; border-radius:12px; font:inherit; font-size:.79rem; font-weight:var(--font-weight-bold,700); cursor:pointer; }
.school-delete-cancel { border:1px solid rgba(15,87,69,.13); color:#365f51; background:#f1f6f3; }
.school-delete-confirm { min-width:13rem; border:1px solid rgba(143,41,41,.18); color:#fff; background:linear-gradient(135deg,#b83f3f,#8f2929); box-shadow:0 10px 22px rgba(143,41,41,.17); }
.school-delete-confirm b { color:#ffd2a8; font-size:1rem; }
.school-delete-retry,.school-delete-success-action { border:1px solid #135943; color:#fff; background:#135943; }
.school-delete-loader { width:5.8rem; height:5.8rem; position:relative; display:grid; place-items:center; margin:0 auto; }
.school-delete-loader::before,.school-delete-loader::after,.school-delete-loader i { content:""; position:absolute; inset:0; border-radius:50%; }
.school-delete-loader::before { border:7px solid #e8efeb; }
.school-delete-loader::after { border:7px solid transparent; border-top-color:#17634d; border-inline-end-color:#d5aa42; animation:schoolDeleteSpin 1.05s linear infinite; }
.school-delete-loader i { inset:.72rem; border:1px solid rgba(15,87,69,.1); background:#f8fbf9; box-shadow:inset 0 0 0 5px rgba(15,87,69,.025); }
.school-delete-loader span { position:relative; z-index:2; color:#245c49; font-size:.9rem; font-weight:var(--font-weight-bold,700); }
@keyframes schoolDeleteSpin { to { transform:rotate(360deg); } }
.school-delete-progress { height:.58rem; overflow:hidden; margin:1.2rem 0 0; border-radius:999px; background:#e7eee9; box-shadow:inset 0 1px 2px rgba(0,0,0,.05); }
.school-delete-progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#17634d,#2a8b68,#d0a644); box-shadow:0 0 18px rgba(42,139,104,.2); transition:width .34s cubic-bezier(.22,1,.36,1); }
.school-delete-loading-notes { display:flex; justify-content:space-between; gap:1rem; margin-top:.58rem; color:#87968f; font-size:var(--text-caption); font-weight:600; }
.school-delete-success-mark { width:5.2rem; height:5.2rem; position:relative; display:grid; place-items:center; margin:0 auto; border:1px solid rgba(35,142,89,.18); border-radius:50%; background:linear-gradient(145deg,#eaf9f0,#dff4e8); box-shadow:0 17px 34px rgba(35,142,89,.15); animation:schoolDeleteSuccessPop .62s cubic-bezier(.2,1.45,.35,1) both; }
.school-delete-success-mark::before { content:""; position:absolute; inset:-.55rem; border:1px solid rgba(35,142,89,.12); border-radius:50%; animation:schoolDeleteSuccessRing .9s ease-out .15s both; }
.school-delete-success-mark i { width:.95rem; height:1.75rem; border-right:.28rem solid #238e59; border-bottom:.28rem solid #238e59; transform:translateY(-.18rem) rotate(45deg) scale(0); transform-origin:center; animation:schoolDeleteCheck .4s cubic-bezier(.2,1.5,.3,1) .28s forwards; }
@keyframes schoolDeleteSuccessPop { from { opacity:0; transform:scale(.62); } to { opacity:1; transform:scale(1); } }
@keyframes schoolDeleteSuccessRing { from { opacity:.8; transform:scale(.7); } to { opacity:0; transform:scale(1.35); } }
@keyframes schoolDeleteCheck { to { transform:translateY(-.18rem) rotate(45deg) scale(1); } }
.school-delete-success-action { width:min(100%,13rem); margin:1.2rem auto 0; }
body.school-delete-modal-open { overflow:hidden; }
html[data-theme="dark"] .school-settings-card,html[data-theme="dark"] .school-settings-summary-card { border-color:rgba(151,185,172,.15); background:rgba(18,38,31,.88); }
html[data-theme="dark"] .school-settings-intro,html[data-theme="dark"] .school-settings-summary-card > p,html[data-theme="dark"] .school-settings-form > label > small { color:#9db0a7; }
html[data-theme="dark"] .school-settings-form > label > span,html[data-theme="dark"] .school-settings-summary-list strong { color:#e2eee8; }
html[data-theme="dark"] .school-settings-summary-list > div { border-color:rgba(151,185,172,.1); background:rgba(151,185,172,.06); }
html[data-theme="dark"] .school-danger-zone { border-color:rgba(230,110,110,.25); background:linear-gradient(135deg,rgba(52,28,28,.76),rgba(38,25,25,.84)); }
html[data-theme="dark"] .school-danger-copy h2 { color:#ffd1d1; }
html[data-theme="dark"] .school-danger-copy p { color:#c4a4a4; }
html[data-theme="dark"] .school-delete-dialog { color:#e8f1ed; border-color:rgba(151,185,172,.18); background:linear-gradient(145deg,#142720,#0f211b); box-shadow:0 35px 100px rgba(0,0,0,.55); }
html[data-theme="dark"] .school-delete-panel h2 { color:#eef6f2; }
html[data-theme="dark"] .school-delete-panel > p { color:#a4b7ae; }
html[data-theme="dark"] .school-delete-warning { color:#d2aaaa; border-color:rgba(232,116,116,.18); background:rgba(104,38,38,.2); }
html[data-theme="dark"] .school-delete-warning strong { color:#ffc5c5; }
html[data-theme="dark"] .school-delete-form > label:first-child { color:#d7e6df; }
html[data-theme="dark"] .school-delete-form input[type="password"] { color:#edf5f1; border-color:rgba(151,185,172,.2); background:#0c1b16; }
html[data-theme="dark"] .school-delete-ack { color:#a8bbb2; }
html[data-theme="dark"] .school-delete-close,html[data-theme="dark"] .school-delete-cancel { color:#d6e5de; border-color:rgba(151,185,172,.16); background:#1a3229; }
html[data-theme="dark"] .school-delete-loader::before,html[data-theme="dark"] .school-delete-progress { background:#21372f; border-color:#21372f; }
html[data-theme="dark"] .school-delete-loader i { border-color:rgba(151,185,172,.12); background:#132820; }
html[data-theme="dark"] .school-delete-loader span { color:#dcebe4; }
@media (max-width:900px) {
  .school-settings-layout { grid-template-columns:1fr; }
  .school-settings-summary-card { position:static; }
}
@media (max-width:680px) {
  .school-settings-hero { grid-template-columns:auto minmax(0,1fr); }
  .school-settings-shortcuts { grid-column:1 / -1; justify-content:stretch; }
  .school-settings-shortcuts a { flex:1; }
  .school-settings-form { grid-template-columns:1fr; }
  .school-settings-field-wide { grid-column:auto; }
  .school-settings-form-actions,.school-danger-zone { align-items:stretch; flex-direction:column; }
  .school-settings-form-actions button,.school-danger-button { width:100%; }
  .school-delete-dialog { padding:1.15rem; border-radius:22px; }
  .school-delete-dialog[data-state="loading"],.school-delete-dialog[data-state="success"] { border-radius:24px; }
}
@media (max-width:480px) {
  .school-settings-hero-mark { width:3.45rem; height:3.45rem; border-radius:16px; font-size:1.35rem; }
  .school-settings-shortcuts { display:grid; grid-template-columns:1fr 1fr; }
  .school-delete-modal { padding:.5rem; }
  .school-delete-dialog { width:calc(100vw - 1rem); padding:1rem; }
  .school-delete-actions { display:grid; grid-template-columns:1fr; }
  .school-delete-actions button { width:100%; }
  .school-delete-loading-notes { align-items:center; flex-direction:column; gap:.2rem; }
}
@media (prefers-reduced-motion:reduce) {
  .school-delete-modal,.school-delete-dialog,.school-delete-panel.is-active,.school-delete-loader::after,.school-delete-success-mark,.school-delete-success-mark::before,.school-delete-success-mark i,.school-delete-progress i { animation:none!important; transition:none!important; }
}
:root {
  --mobile-contract-nav-height: 4.75rem;
  --mobile-contract-chrome-height: 3.85rem;
  --mobile-contract-gutter: max(0.72rem, env(safe-area-inset-left, 0px));
  --mobile-contract-card-radius: 16px;
  --mobile-contract-touch: 44px;
}
@media (max-width: 960px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    min-width: 320px;
    overflow-x: visible !important;
  }
  body {
    min-height: 100dvh;
  }
  :is(.app-shell, .main, .panel, .card, .topbar, .table-wrap, .table-container, form, fieldset) {
    min-width: 0;
    max-width: 100%;
  }
  :is(img, video, canvas, svg) {
    max-width: 100%;
  }
  .main {
    width: 100%;
    padding-inline: var(--mobile-contract-gutter) !important;
    padding-top: calc(var(--mobile-contract-chrome-height) + 0.8rem + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(var(--mobile-contract-nav-height) + 2.4rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  .main > * {
    min-width: 0;
    max-width: 100%;
  }
  .app-shell::before {
    height: calc(var(--mobile-contract-chrome-height) + env(safe-area-inset-top, 0px)) !important;
  }
  .nav-toggle,
  .mobile-theme-slot :is(button, a) {
    min-width: var(--mobile-contract-touch);
    min-height: var(--mobile-contract-touch);
  }
  .sidebar {
    width: min(89vw, 22rem) !important;
    max-width: calc(100vw - 1.25rem) !important;
    overscroll-behavior: contain;
  }
  .mobile-bottom-nav {
    inset-inline: 0.5rem !important;
    bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: var(--mobile-contract-nav-height);
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    gap: 0.12rem !important;
    padding: 0.34rem !important;
    overflow: visible !important;
    border-radius: 19px !important;
  }
  .mobile-bottom-item {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 3.45rem !important;
    padding: 0.25rem 0.08rem !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    overflow: hidden;
    font-size: clamp(0.62rem, 2.25vw, 0.7rem) !important;
    line-height: 1.2;
    text-align: center;
  }
  .mobile-bottom-item > span:last-child {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-bottom-icon {
    flex: 0 0 auto;
  }
  .mobile-bottom-action {
    transform: translateY(-0.34rem) !important;
  }
  .app-shell .topbar,
  .app-shell .communications-topbar,
  .app-shell .student-detail-topbar {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 0.72rem !important;
    padding: 0.95rem !important;
    overflow: hidden;
  }
  .app-shell .topbar > :first-child,
  .app-shell .topbar > :first-child > * {
    min-width: 0;
    max-width: 100%;
  }
  .topbar h1,
  .topbar p,
  .topbar strong,
  .topbar code {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .app-shell .topbar > .topbar-actions,
  .app-shell .topbar > .student-detail-toolbar,
  .app-shell .topbar > :is(a.btn, button.btn) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .app-shell .topbar > .topbar-actions,
  .student-detail-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 0.52rem !important;
    padding-top: 0.72rem;
    border-top: 1px solid var(--line);
  }
  .app-shell .topbar-actions > *,
  .app-shell .topbar-actions > form,
  .app-shell .topbar-actions .topbar-logout,
  .student-detail-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .app-shell .topbar-actions :is(.btn, .btn-sm),
  .student-detail-actions .btn,
  .communications-settings-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--mobile-contract-touch) !important;
    padding-inline: 0.7rem !important;
    white-space: normal !important;
    text-align: center;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  :is(button, .btn, .btn-sm, a.btn, input, select, textarea, summary) {
    min-height: var(--mobile-contract-touch);
  }
  :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: 16px !important;
  }
  .grid-2,
  .grid-3,
  .info-grid,
  .stats-grid,
  .notification-preference-grid,
  .notification-channel-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .workflow-submit-row,
  .actions,
  .attendance-save-actions,
  .schedule-ai-actions,
  .wa-actions,
  .wa-qr-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch !important;
    gap: 0.52rem !important;
  }
  :is(.workflow-submit-row, .actions, .attendance-save-actions, .schedule-ai-actions, .wa-actions, .wa-qr-actions) > *,
  :is(.workflow-submit-row, .actions, .attendance-save-actions, .schedule-ai-actions, .wa-actions, .wa-qr-actions) .btn {
    min-width: 0 !important;
    width: 100% !important;
  }
  .workflow-action-hint,
  .schedule-ai-actions .muted {
    grid-column: 1 / -1;
    width: 100%;
  }
  .table-wrap:not(.table-wrap-stacked),
  .table-container {
    position: relative;
    width: 100%;
    overflow-x: auto !important;
    overflow-y: visible;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    padding: 0.2rem 0.2rem 0.45rem !important;
  }
  .table-wrap:not(.table-wrap-stacked)::before,
  .table-container::before {
    content: "اسحب لعرض بقية الجدول ←";
    position: sticky;
    inset-inline-start: 0.2rem;
    z-index: 7;
    width: max-content;
    display: flex;
    align-items: center;
    min-height: 1.8rem;
    margin: 0.05rem 0 0.35rem;
    padding: 0.22rem 0.58rem;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
    border-radius: 999px;
    color: var(--muted);
    background: color-mix(in srgb, var(--surface-strong) 94%, transparent);
    box-shadow: var(--shadow-xs);
    font-size:var(--text-caption);
    font-weight:var(--font-weight-semibold, 600);
    pointer-events: none;
  }
  .table-wrap:not(.table-wrap-stacked) > table:not(.mobile-card-table),
  .table-container > table:not(.mobile-card-table) {
    width: max-content;
    min-width: 100%;
  }
  .table-wrap:not(.table-wrap-stacked) > table:not(.mobile-card-table) :is(th, td):first-child,
  .table-container > table:not(.mobile-card-table) :is(th, td):first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 3;
    background: var(--surface-strong);
    box-shadow: -1px 0 0 var(--line);
  }
  html[dir="rtl"] .table-wrap:not(.table-wrap-stacked) > table:not(.mobile-card-table) :is(th, td):first-child,
  html[dir="rtl"] .table-container > table:not(.mobile-card-table) :is(th, td):first-child {
    box-shadow: 1px 0 0 var(--line);
  }
  .table-wrap:has(> .mobile-card-table) {
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .table-wrap:has(> .mobile-card-table)::before {
    display: none;
  }
  .mobile-card-table,
  .mobile-card-table tbody,
  .mobile-card-table tr,
  .mobile-card-table td {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }
  .mobile-card-table {
    border: 0;
    background: transparent;
  }
  .mobile-card-table thead {
    display: none;
  }
  .mobile-card-table tbody {
    display: grid;
    gap: 0.85rem;
  }
  .mobile-card-table tbody > tr {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
    border-radius: var(--mobile-contract-card-radius);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 98%, transparent), color-mix(in srgb, var(--surface) 94%, transparent));
    box-shadow: var(--shadow-xs);
  }
  .mobile-card-table td {
    position: static !important;
    display: grid;
    gap: 0.38rem;
    padding: 0.72rem 0.82rem !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 8%, var(--line)) !important;
    white-space: normal !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .mobile-card-table td:last-child {
    border-bottom: 0 !important;
  }
  .mobile-card-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size:var(--text-caption);
    font-weight:var(--font-weight-bold, 700);
    line-height: 1.35;
  }
  .mobile-card-table td[data-label=""]::before,
  .mobile-card-table td[colspan]::before {
    display: none;
  }
  .mobile-card-table td :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .mobile-card-table td[colspan] {
    padding: 0 !important;
  }
  .iraqi-grade-table .iraqi-grade-student {
    position: sticky !important;
    top: calc(var(--mobile-contract-chrome-height) + env(safe-area-inset-top, 0px));
    z-index: 6;
    padding: 0.9rem !important;
    color: var(--brand-on-primary);
    background: linear-gradient(135deg, var(--primary-deep), var(--primary)) !important;
  }
  .iraqi-grade-table .iraqi-grade-student strong,
  .iraqi-grade-table .iraqi-grade-student .muted {
    color: inherit;
  }
  .iraqi-grade-table td.grade-entry {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.6rem;
  }
  .iraqi-grade-table td.grade-entry::before {
    grid-column: 1 / -1;
  }
  .iraqi-grade-table td:is(.grade-entry, .grade-result-cell).grade-group-start {
    margin-top: 0.22rem;
    padding-top: 0.95rem !important;
    border-top: 4px solid color-mix(in srgb, var(--accent) 62%, var(--primary));
  }
  .iraqi-grade-table td:is(.grade-entry, .grade-result-cell).grade-group-start::before {
    content: attr(data-group) " — " attr(data-label);
    color: var(--theme-text-strong);
    font-size: 0.82rem;
  }
  .iraqi-grade-table td.grade-entry > label {
    width: auto;
    min-width: 3rem;
    margin: 0 !important;
    padding: 0.45rem 0.55rem !important;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    text-align: center;
  }
  .iraqi-grade-table .grade-result-cell {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .iraqi-grade-table .grade-result-cell::before {
    margin: 0;
  }
  .ai-import-table .import-review-identity {
    padding-top: 0.85rem !important;
  }
  .ai-import-table .import-review-identity input {
    font-weight:var(--font-weight-semibold, 600);
  }
  .ai-import-table .import-review-source {
    margin-top: 0.35rem;
    padding: 0.45rem 0.55rem;
    border-radius: 9px;
    background: color-mix(in srgb, var(--primary) 5%, var(--surface));
    overflow-wrap: anywhere;
  }
  .ai-import-table .inline-check {
    width: 100%;
    min-height: var(--mobile-contract-touch);
    justify-content: flex-start;
  }
  .ai-import-actions {
    position: sticky;
    bottom: calc(var(--mobile-contract-nav-height) + 0.8rem + env(safe-area-inset-bottom, 0px));
    z-index: 18;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .ai-import-actions .btn {
    width: 100% !important;
  }
  .attendance-sheet.responsive-table {
    min-width: 0 !important;
  }
  .attendance-sheet .att-status {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }
  .attendance-sheet .att-opt,
  .attendance-sheet .att-opt span {
    width: 100%;
    min-width: 0;
  }
  .attendance-sheet .att-opt span {
    min-height: var(--mobile-contract-touch);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 0.45rem;
    white-space: normal;
    text-align: center;
  }
  .attendance-approve-form {
    position: sticky !important;
    bottom: calc(var(--mobile-contract-nav-height) + 0.9rem + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 24 !important;
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.45rem !important;
    padding: 0.62rem !important;
    border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-strong) 96%, transparent) !important;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
  }
  .attendance-approve-form .btn {
    width: 100% !important;
  }
  body:has(.attendance-sheet :is(input, select, textarea):focus) .attendance-approve-form {
    position: static !important;
  }
  .notification-channel-item,
  .notification-preference-item {
    width: 100%;
    min-width: 0;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.72rem !important;
    padding: 0.85rem !important;
  }
  .notification-channel-name,
  .notification-channel-switch,
  .notification-priority-field {
    min-width: 0;
    max-width: 100%;
  }
  .notification-channel-switch {
    width: 100%;
    justify-content: flex-start;
  }
  .notification-priority-field input {
    width: 100% !important;
  }
  .notification-template-table textarea {
    min-height: 8rem;
  }
  .notification-template-table .workflow-submit-row {
    grid-template-columns: 1fr 1fr;
  }
  .notification-delivery-table td[data-label="النص"] {
    overflow-wrap: anywhere;
  }
  .pagination {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.65rem !important;
    align-items: stretch !important;
  }
  .pagination-summary {
    width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .pagination-actions {
    width: 100%;
    min-width: 0;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.42rem !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.15rem 0.05rem 0.35rem;
    scrollbar-width: thin;
  }
  .pagination-actions .btn {
    flex: 0 0 auto;
    width: auto !important;
    min-width: var(--mobile-contract-touch) !important;
    min-height: var(--mobile-contract-touch) !important;
    padding-inline: 0.72rem !important;
  }
  .account-hub-header {
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
    min-width: 0;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.75rem !important;
    padding: 0.8rem !important;
  }
  .account-hub-user {
    width: 100%;
    min-width: 0;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.45rem;
  }
  .account-hub-user-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .account-hub-actions {
    width: 100%;
    min-width: 0;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 0.4rem !important;
  }
  .account-hub-actions > *,
  .account-hub-actions > form,
  .account-hub-actions :is(a, button, .theme-switcher, .theme-toggle) {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0 !important;
    min-height: var(--mobile-contract-touch) !important;
    margin: 0 !important;
  }
  .account-hub-actions :is(a, button, .theme-toggle) {
    padding-inline: 0.5rem !important;
    white-space: normal !important;
    text-align: center;
    line-height: 1.3;
  }
  .account-hub-main {
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
  }
  :is(.premium-confirm-overlay, .plan-gate-modal, .ai-command-overlay, .command-backdrop, .mobile-sheet-backdrop) {
    padding:
      calc(0.55rem + env(safe-area-inset-top, 0px))
      0.55rem
      calc(0.55rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  :is(.premium-confirm-card, .plan-gate-dialog, .wa-support-dialog, .command-box, .ai-command-status) {
    width: min(100%, calc(100vw - 1.1rem)) !important;
    max-width: calc(100vw - 1.1rem) !important;
    max-height: calc(100dvh - 1.1rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    border-radius: 20px !important;
  }
  .ai-command-status-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 3.8rem 0.9rem 0.9rem !important;
  }
  .ai-command-status-visual {
    width: min(42vw, 8.5rem) !important;
    height: min(42vw, 8.5rem) !important;
    border-radius: 28px !important;
  }
  .ai-command-steps {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .ai-command-modal-result,
  .ai-command-status[data-state="result"] .ai-command-modal-result {
    padding: 0.75rem !important;
  }
  .ui2-toast-region {
    inset-inline: 0.55rem !important;
    inset-block-end: calc(var(--mobile-contract-nav-height) + 1rem + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
  }
  .ui2-toast,
  .completion-toast {
    grid-template-columns: auto minmax(0, 1fr) auto;
    max-height: min(42dvh, 18rem);
    overflow: auto;
  }
  :is(code, pre, .msg-preview, .comm-recipient, .wa-tech-item strong, .parent-notice-preview, .alert) {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  pre,
  .msg-preview {
    overflow: auto;
    white-space: pre-wrap;
  }
}
@media (max-width: 640px) {
  :root {
    --mobile-contract-gutter: max(0.68rem, env(safe-area-inset-left, 0px));
  }
  .panel,
  .app-shell .topbar {
    border-radius: 15px !important;
  }
  .communications-hero,
  .comm-stats-grid,
  .dashboard-insights,
  .quick-action-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .comm-channel-head {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }
  .comm-status-pill {
    grid-column: 1 / -1;
    width: fit-content;
  }
  .comm-issue-card,
  .comm-section-head,
  .dashboard-section-head,
  .parent-notice-head,
  .wa-panel-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }
  .comm-issue-card > form,
  .comm-issue-card .btn {
    width: 100% !important;
  }
  .workflow-submit-row,
  .actions,
  .attendance-save-actions,
  .schedule-ai-actions,
  .wa-actions,
  .wa-qr-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .notification-template-table .workflow-submit-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 390px) {
  :root {
    --mobile-contract-nav-height: 4.45rem;
    --mobile-contract-gutter: max(0.58rem, env(safe-area-inset-left, 0px));
  }
  .app-shell .topbar > .topbar-actions,
  .student-detail-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .attendance-sheet .att-status {
    grid-template-columns: minmax(0, 1fr);
  }
  .account-hub-actions {
    gap: 0.28rem !important;
  }
  .account-hub-actions :is(a, button, .theme-toggle) {
    padding-inline: 0.3rem !important;
    font-size: 0.78rem !important;
  }
  .mobile-bottom-nav {
    inset-inline: 0.35rem !important;
    gap: 0.04rem !important;
    padding-inline: 0.22rem !important;
  }
  .mobile-bottom-item {
    font-size:var(--text-caption) !important;
  }
  .notification-template-table .workflow-submit-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 340px) {
  .mobile-bottom-item > span:last-child {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .mobile-bottom-item {
    min-height: 3.15rem !important;
  }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav,
  .attendance-approve-form,
  .ai-import-actions,
  .premium-confirm-card,
  .plan-gate-dialog,
  .ai-command-status {
    transition: none !important;
    animation: none !important;
  }
}