@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  src: url("../fonts/inter/InterVariable.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  src: url("../fonts/inter/InterVariable-Italic.woff2") format("woff2");
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-optical-sizing: auto;
}

body.console-body {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.04), transparent 32rem),
    #eef2f7;
}

body.console-body:not([data-role="public"]) {
  background:
    radial-gradient(circle at 18% 0%, rgba(5, 150, 105, 0.12), transparent 24rem),
    #f6f8fb;
  color: #111827;
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
}

body.console-body:not([data-role="public"]) .console-sidebar {
  background:
    linear-gradient(180deg, rgba(5, 150, 105, 0.16), transparent 15rem),
    linear-gradient(180deg, #071f1a 0%, #0b2a24 52%, #10362e 100%);
  border-right: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 14px 0 45px rgba(15, 23, 42, 0.18);
}

body.console-body:not([data-role="public"]) .console-brand {
  background: rgba(255, 255, 255, 0.025);
  min-height: 5.75rem;
}

body.console-body:not([data-role="public"]) .console-logo {
  border-radius: 16px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(5, 150, 105, 0.18);
}

body.console-body:not([data-role="public"]) .console-nav-link {
  border-radius: 12px;
  color: #b8c2d4;
  font-weight: 700;
  letter-spacing: 0;
  min-height: 3rem;
  position: relative;
  isolation: isolate;
}

body.console-body:not([data-role="public"]) .console-nav-link:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transform: translateX(2px);
}

body.console-body:not([data-role="public"]) .console-nav-link.is-active {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.95), rgba(37, 99, 235, 0.9));
  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.24), 0 0 0 1px rgba(165, 180, 252, 0.22) inset;
  color: #ffffff;
}

body.console-body:not([data-role="public"]) .console-nav-link.is-active::before {
  background: #a5b4fc;
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(165, 180, 252, 0.9);
  content: "";
  height: 1.9rem;
  left: -0.55rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.24rem;
}

body.console-body:not([data-role="public"]) .console-nav-icon {
  border-radius: 10px;
}

.console-nav-icon svg {
  fill: currentColor;
  height: 1rem;
  width: 1rem;
}

.console-profile {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.2), rgba(255, 255, 255, 0.06));
}

.console-avatar {
  align-items: center;
  background: linear-gradient(135deg, #818cf8, #22d3ee);
  border-radius: 14px;
  color: #ffffff;
  display: inline-flex;
  font-weight: 900;
  height: 2.6rem;
  justify-content: center;
  width: 2.6rem;
}

.console-mini-ring {
  align-items: center;
  background: conic-gradient(#818cf8 calc(var(--ring) * 1%), rgba(255, 255, 255, 0.13) 0);
  border-radius: 999px;
  display: inline-flex;
  height: 2.4rem;
  justify-content: center;
  width: 2.4rem;
}

.console-mini-ring span {
  align-items: center;
  background: #0b1426;
  border-radius: inherit;
  color: #dbeafe;
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 900;
  height: 1.85rem;
  justify-content: center;
  width: 1.85rem;
}

.console-back-button {
  align-items: center;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  color: #1e293b;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.84rem;
  font-weight: 900;
  gap: 0.45rem;
  min-height: 2.6rem;
  padding: 0.55rem 0.8rem;
}

.console-back-button:hover,
.console-back-button:focus-visible {
  background: #eef2ff;
  border-color: #4f46e5;
  color: #3730a3;
}

.console-back-button span {
  font-size: 1rem;
  line-height: 1;
}

body.console-body:not([data-role="public"]) .console-main {
  background:
    radial-gradient(circle at 0% 0%, rgba(5, 150, 105, 0.1), transparent 26rem),
    linear-gradient(180deg, #fbfdff 0%, #f2f6fb 100%);
}

body.console-body:not([data-role="public"]) .console-topbar {
  border-color: rgba(226, 232, 240, 0.88);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.055);
}

body.console-body:not([data-role="public"]) .console-content > div:first-child,
body.console-body:not([data-role="public"]) .console-page-hero {
  background:
    linear-gradient(135deg, rgba(5, 150, 105, 0.11), transparent 45%),
    linear-gradient(135deg, #ffffff 0%, #f9fbfd 100%);
  border-color: rgba(226, 232, 240, 0.92);
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.065);
  position: relative;
  overflow: hidden;
}

body.console-body:not([data-role="public"]) .console-content > div:first-child::before,
body.console-body:not([data-role="public"]) .console-page-hero::before {
  background: linear-gradient(90deg, #047857, #059669);
  content: "";
  height: 4px;
  inset: 0 0 auto;
  position: absolute;
}

body.console-body:not([data-role="public"]) .console-content h1 {
  letter-spacing: 0;
  line-height: 1.05;
}

body.console-body:not([data-role="public"]) .console-content > section,
body.console-body:not([data-role="public"]) .console-content article {
  border-color: rgba(220, 226, 235, 0.95);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

body.console-body:not([data-role="public"]) .console-content > section {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
}

body.console-body:not([data-role="public"]) .console-content article:hover {
  border-color: rgba(5, 150, 105, 0.32);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.07);
}

body.console-body:not([data-role="public"]) .console-content table {
  border-collapse: separate;
  border-spacing: 0;
}

body.console-body:not([data-role="public"]) .console-content th {
  background: linear-gradient(180deg, #f0fdf4 0%, #eaf8ef 100%);
  color: #047857;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

body.console-body:not([data-role="public"]) .console-content td {
  color: #253244;
}

body.console-body:not([data-role="public"]) .console-content tbody tr {
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

body.console-body:not([data-role="public"]) .console-content tbody tr:hover {
  background: #f0fdf4;
}

body.console-body:not([data-role="public"]) .console-content input,
body.console-body:not([data-role="public"]) .console-content select,
body.console-body:not([data-role="public"]) .console-content textarea {
  border-color: #d5deea;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 2px rgba(15, 23, 42, 0.035);
}

body.console-body:not([data-role="public"]) .console-content input:focus,
body.console-body:not([data-role="public"]) .console-content select:focus,
body.console-body:not([data-role="public"]) .console-content textarea:focus {
  border-color: #059669;
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.13);
}

body.console-body:not([data-role="public"]) .console-content button,
body.console-body:not([data-role="public"]) .console-content a[class*="rounded"] {
  border-radius: 10px;
}

body.console-body:not([data-role="public"]) .console-content button[class*="bg-teal"],
body.console-body:not([data-role="public"]) .console-content a[class*="bg-teal"] {
  background: linear-gradient(135deg, #047857, #059669);
  border-color: rgba(5, 150, 105, 0.28);
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(5, 150, 105, 0.2);
}

body.console-body:not([data-role="public"]) .console-content button[class*="bg-teal"]:hover,
body.console-body:not([data-role="public"]) .console-content a[class*="bg-teal"]:hover {
  box-shadow: 0 16px 32px rgba(5, 150, 105, 0.24);
  transform: translateY(-1px);
}

body.console-body:not([data-role="public"]) .console-content button[class*="bg-red"],
body.console-body:not([data-role="public"]) .console-content a[class*="bg-red"] {
  box-shadow: 0 10px 22px rgba(185, 28, 28, 0.12);
}

body.console-body:not([data-role="public"]) .console-role-badge {
  background: #ecfdf5;
  color: #047857;
}

body.console-body:not([data-role="public"]) .console-logout {
  border-radius: 10px;
  background: linear-gradient(135deg, #0f172a, #111827);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
}

body.console-body:not([data-role="public"]) .console-note {
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.14), rgba(255, 255, 255, 0.06));
}

.console-shell {
  min-height: 100vh;
}

.console-sidebar {
  background: linear-gradient(180deg, #070b18 0%, #0c1222 52%, #111827 100%);
  border-right: 1px solid rgba(148, 163, 184, 0.16);
}

.console-brand {
  min-height: 6.25rem;
}

.console-logo {
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}

.console-nav {
  scrollbar-width: thin;
}

.console-nav-link {
  border: 1px solid transparent;
  min-height: 3.25rem;
}

.console-nav-link:hover {
  border-color: rgba(255, 255, 255, 0.08);
}

.console-nav-link.is-active {
  background: linear-gradient(135deg, #14b8a6, #22c55e);
  color: #06111f;
}

.console-nav-icon {
  min-width: 2rem;
}

.console-note {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(255, 255, 255, 0.04));
}

.console-main {
  background:
    radial-gradient(circle at top left, rgba(20, 184, 166, 0.08), transparent 22rem),
    #f3f6fa;
}

.console-topbar {
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.console-role-badge {
  letter-spacing: 0.04em;
}

.console-content {
  margin-inline: auto;
  max-width: 104rem;
}

.console-content > div:first-child,
.console-page-hero {
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.07);
  padding: 1.5rem;
}

.console-content > section,
.console-panel {
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.console-content input,
.console-content select,
.console-content textarea {
  background-color: #ffffff;
  border-color: #cbd5e1;
  min-height: 3rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.console-content input:focus,
.console-content select:focus,
.console-content textarea:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.14);
}

.console-content button,
.console-content a {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.console-content a[class*="bg-teal"],
.console-content button[class*="bg-teal"] {
  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.18);
}

th {
  background: #f1f5f9;
  color: #334155;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.8rem;
  position: sticky;
  text-align: left;
  text-transform: uppercase;
  top: 0;
  white-space: nowrap;
}

td {
  border-top: 1px solid #e2e8f0;
  padding: 0.8rem;
  vertical-align: middle;
  white-space: nowrap;
}

tbody tr:nth-child(even) {
  background: #f8fafc;
}

tbody tr:hover {
  background: #ecfeff;
}

.wizard-dot {
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  padding: 0.45rem 0.8rem;
}

.wizard-dot.active {
  background: #ccfbf1;
  color: #115e59;
}

.attendance-grid th:first-child,
.attendance-grid td:first-child {
  left: 0;
  min-width: 13rem;
  position: sticky;
  z-index: 2;
}

.attendance-grid th:first-child {
  background: #f8fafc;
  z-index: 4;
}

.attendance-grid td:first-child {
  background: #ffffff;
  box-shadow: 1px 0 0 #e2e8f0;
  font-weight: 700;
  max-width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attendance-grid tbody tr:nth-child(even) td:first-child {
  background: #f8fafc;
}

  .attendance-grid tbody tr:hover td:first-child {
  background: #ecfeff;
}

.attendance-grid th:not(:first-child),
.attendance-grid td:not(:first-child) {
  min-width: 9.25rem;
  text-align: center;
}

.attendance-btn {
  display: inline-flex;
  justify-content: center;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 5.8rem;
  padding: 0.35rem 0.65rem;
  text-transform: capitalize;
}

.attendance-btn.present {
  background: #dcfce7;
  color: #166534;
}

.attendance-btn.absent {
  background: #fee2e2;
  color: #991b1b;
}

.student-attendance-hero {
  background: #0f172a;
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.2);
  color: #ffffff;
  padding: 1.5rem;
}

.student-attendance-hero-inner {
  align-items: end;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
}

.student-attendance-eyebrow {
  color: #5eead4;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.student-attendance-hero h1 {
  color: #ffffff;
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1.1;
  margin-top: 0.5rem;
}

.student-attendance-hero p:not(.student-attendance-eyebrow) {
  color: #cbd5e1;
  margin-top: 0.5rem;
}

.student-attendance-stats {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(7rem, 1fr));
}

.student-attendance-stats div {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  min-width: 7rem;
  padding: 1rem;
}

.student-attendance-stats p {
  color: #cbd5e1;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}

.student-attendance-stats strong {
  color: #ffffff;
  display: block;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  margin-top: 0.5rem;
}

.student-attendance-stats div:nth-child(2) strong {
  color: #99f6e4;
}

.student-attendance-panel {
  background: #ffffff;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  margin-top: 1.5rem;
  padding: 1.5rem;
}

.student-attendance-panel-header {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(14rem, 1fr) auto auto;
}

.student-attendance-panel-header h2 {
  color: #0f172a;
  font-size: 1.85rem;
  font-weight: 900;
  line-height: 1.15;
}

.student-attendance-panel-header p {
  color: #475569;
  font-size: 0.9rem;
  margin-top: 0.3rem;
}

.student-attendance-legend,
.student-attendance-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.student-attendance-legend span {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
}

.student-attendance-legend span:first-child {
  background: #ecfdf5;
  color: #047857;
}

.student-attendance-legend span:last-child {
  background: #fef2f2;
  color: #b91c1c;
}

.student-attendance-legend i {
  border-radius: 999px;
  display: block;
  height: 0.55rem;
  width: 0.55rem;
}

.student-attendance-legend i.present {
  background: #16a34a;
}

.student-attendance-legend i.absent {
  background: #dc2626;
}

.student-attendance-controls a,
.student-attendance-controls button,
.student-attendance-controls input {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: #1e293b;
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 800;
  min-height: 3rem;
  padding: 0.65rem 1rem;
}

.student-attendance-controls a:hover,
.student-attendance-controls button:hover {
  background: #f8fafc;
  border-color: #14b8a6;
  color: #0f766e;
}

.student-attendance-calendar-wrap {
  margin-top: 1.4rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
}

.student-attendance-calendar {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(7, minmax(8.75rem, 1fr));
  min-width: 64rem;
}

.student-attendance-weekday {
  background: #eef2f7;
  border-radius: 8px;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 900;
  padding: 0.8rem;
  text-align: center;
  text-transform: uppercase;
}

.student-attendance-day {
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  min-height: 8.25rem;
  padding: 0.9rem;
}

.student-attendance-day.is-empty {
  background: #f8fafc;
  border-style: dashed;
}

.student-attendance-day.border-green-200 {
  background: #ecfdf5;
  border-color: #86efac;
}

.student-attendance-day.border-red-200 {
  background: #fef2f2;
  border-color: #fca5a5;
}

.student-attendance-date {
  color: #0f172a;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
}

.student-attendance-day-list {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.8rem;
}

.student-attendance-entry {
  background: #ffffff;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  color: #334155;
  display: block;
  min-height: auto;
  padding: 0.55rem 0.65rem;
  text-align: left;
  width: 100%;
}

.student-attendance-entry.is-present {
  border-color: #86efac;
  color: #166534;
}

.student-attendance-entry.is-absent {
  border-color: #fca5a5;
  color: #991b1b;
}

.student-attendance-entry span,
.student-attendance-entry small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-attendance-entry span {
  font-size: 0.78rem;
  font-weight: 900;
}

.student-attendance-entry small {
  font-size: 0.7rem;
  font-weight: 700;
  margin-top: 0.15rem;
  opacity: 0.8;
}

.student-attendance-empty-text {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 700;
}

textarea.compiler-error-line-highlight {
  background-image: linear-gradient(rgba(239, 68, 68, 0.34), rgba(239, 68, 68, 0.34));
  background-position: 0 var(--compiler-error-top, 0);
  background-repeat: no-repeat;
  background-size: 100% var(--compiler-error-line-height, 1.5rem);
  border-color: #ef4444 !important;
  padding-left: 4.25rem !important;
  box-shadow: inset 4px 0 0 #ef4444, 0 0 0 4px rgba(239, 68, 68, 0.14) !important;
}

.compiler-error-line-badge {
  background: #dc2626;
  border-radius: 7px;
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.28);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  padding: 0.35rem 0.45rem;
  pointer-events: none;
  position: absolute;
  transform: translateY(0.1rem);
  z-index: 5;
}

@media (max-width: 767px) {
  .student-course-hero {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
  }

  .student-course-hero h1 {
    font-size: 1.75rem;
  }

  .student-course-layout,
  .student-course-detail-grid,
  .student-module-files,
  .student-module-actions {
    grid-template-columns: 1fr;
  }

  .student-course-hero-metrics,
  .student-course-selected-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .student-course-panel {
    padding: 1rem;
  }

  .student-module-card-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .student-attendance-hero {
    padding: 1.15rem;
  }

  .student-attendance-hero-inner,
  .student-attendance-panel-header {
    align-items: stretch;
    display: flex;
    flex-direction: column;
  }

  .student-attendance-hero h1 {
    font-size: 1.75rem;
  }

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

  .student-attendance-stats div {
    min-width: 0;
    padding: 0.85rem;
  }

  .student-attendance-stats strong {
    font-size: 1.45rem;
  }

  .student-attendance-panel {
    padding: 1rem;
  }

  .student-attendance-panel-header h2 {
    font-size: 1.45rem;
  }

  .student-attendance-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  .student-attendance-controls a,
  .student-attendance-controls form,
  .student-attendance-controls input {
    justify-content: center;
    width: 100%;
  }

  .student-attendance-calendar {
    grid-template-columns: repeat(7, minmax(7.75rem, 1fr));
    min-width: 56rem;
  }

  .student-attendance-day {
    min-height: 7.5rem;
    padding: 0.75rem;
  }

  .console-content > div:first-child,
  .console-page-hero {
    padding: 1.25rem;
  }

  th,
  td {
    padding: 0.65rem;
  }
}

/* Public landing page */
.landing-page {
  --landing-ink: #071a2b;
  --landing-ink-soft: #102f47;
  --landing-primary: #0f766e;
  --landing-primary-dark: #0a5b56;
  --landing-aqua: #22c7b8;
  --landing-blue: #2563eb;
  --landing-amber: #f2b84b;
  --landing-coral: #e56b5d;
  --landing-paper: #f5f8f7;
  --landing-muted: #607083;
  --landing-line: #dce5e8;
  background: #ffffff;
  color: var(--landing-ink);
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  letter-spacing: 0;
  margin: 0;
  overflow-x: hidden;
}

.landing-page.is-dialog-open {
  overflow: hidden;
}

.landing-page *,
.landing-page *::before,
.landing-page *::after {
  box-sizing: border-box;
}

.landing-page button,
.landing-page input {
  font: inherit;
}

.landing-main {
  overflow: clip;
}

.landing-navbar {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(220, 229, 232, 0.82);
  height: 78px;
  position: sticky;
  top: 0;
  transition: background-color 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
  width: 100%;
  z-index: 50;
}

.landing-navbar.is-scrolled {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(203, 213, 220, 0.74);
  box-shadow: 0 14px 40px rgba(7, 26, 43, 0.1);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.landing-navbar-inner {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1280px;
  padding: 0 28px;
}

.landing-brand {
  align-items: center;
  color: var(--landing-ink);
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  height: 64px;
  justify-content: flex-start;
  min-width: 170px;
  text-decoration: none;
}

.landing-brand img {
  display: block;
  flex: 0 0 auto;
  height: 58px;
  object-fit: contain;
  width: 58px;
}

.landing-brand span {
  color: #071a2b;
  font-size: 1.08rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.landing-nav-links {
  align-items: center;
  display: flex;
  gap: 34px;
}

.landing-nav-links a {
  color: #4b5b6b;
  font-size: 0.9rem;
  font-weight: 650;
  padding: 28px 0 27px;
  position: relative;
  text-decoration: none;
  transition: color 220ms ease;
}

.landing-nav-links a::after {
  background: var(--landing-primary);
  bottom: 20px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 260ms ease;
  width: 100%;
}

.landing-nav-links a:hover,
.landing-nav-links a.is-active {
  color: var(--landing-primary-dark);
}

.landing-nav-links a:hover::after,
.landing-nav-links a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.landing-navbar-actions {
  align-items: center;
  display: flex;
  gap: 10px;
}

.landing-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 700;
  justify-content: center;
  min-height: 42px;
  padding: 10px 17px;
  position: relative;
  text-decoration: none;
  transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, color 220ms ease, transform 220ms ease;
}

.landing-button:hover {
  transform: translateY(-2px);
}

.landing-button:focus-visible,
.landing-menu-toggle:focus-visible,
.landing-dialog-close:focus-visible,
.landing-nav-links a:focus-visible,
.landing-footer a:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.3);
  outline-offset: 3px;
}

.landing-button-primary {
  background: var(--landing-primary);
  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.22);
  color: #ffffff;
}

.landing-button-primary:hover {
  background: var(--landing-primary-dark);
  box-shadow: 0 14px 30px rgba(15, 118, 110, 0.28);
}

.landing-button-ghost {
  background: transparent;
  border-color: #bed0d5;
  color: var(--landing-ink-soft);
}

.landing-button-ghost:hover {
  background: #eff8f6;
  border-color: rgba(15, 118, 110, 0.42);
  color: var(--landing-primary-dark);
}

.landing-menu-toggle {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--landing-line);
  border-radius: 7px;
  display: none;
  height: 42px;
  justify-content: center;
  padding: 0;
  position: relative;
  width: 42px;
}

.landing-menu-toggle span {
  background: var(--landing-ink);
  height: 2px;
  left: 11px;
  position: absolute;
  transition: transform 260ms ease, opacity 180ms ease, top 260ms ease;
  width: 18px;
}

.landing-menu-toggle span:nth-child(1) {
  top: 13px;
}

.landing-menu-toggle span:nth-child(2) {
  top: 19px;
}

.landing-menu-toggle span:nth-child(3) {
  top: 25px;
}

.landing-menu-toggle[aria-expanded="true"] span:nth-child(1) {
  top: 19px;
  transform: rotate(45deg);
}

.landing-menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.landing-menu-toggle[aria-expanded="true"] span:nth-child(3) {
  top: 19px;
  transform: rotate(-45deg);
}

.landing-hero {
  background: var(--landing-ink);
  color: #ffffff;
  height: 700px;
  isolation: isolate;
  max-height: calc(100svh - 78px);
  min-height: 590px;
  overflow: hidden;
  position: relative;
}

.landing-hero-image {
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  transform: scale(1.025) translate3d(var(--hero-shift-x, 0), var(--hero-shift-y, 0), 0);
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
  z-index: -3;
}

.landing-hero-overlay {
  background:
    linear-gradient(90deg, rgba(3, 15, 29, 0.98) 0%, rgba(3, 15, 29, 0.89) 31%, rgba(3, 15, 29, 0.54) 55%, rgba(3, 15, 29, 0.12) 82%),
    linear-gradient(180deg, rgba(3, 15, 29, 0.08) 45%, rgba(3, 15, 29, 0.68) 100%);
  inset: 0;
  position: absolute;
  z-index: -2;
}

.landing-hero-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 76px 76px;
  inset: 0;
  mask-image: linear-gradient(90deg, #000, transparent 60%);
  opacity: 0.42;
  position: absolute;
  z-index: -1;
}

.landing-hero-inner {
  align-items: center;
  display: flex;
  height: 100%;
  margin: 0 auto;
  max-width: 1280px;
  padding: 56px 28px 62px;
  width: 100%;
}

.landing-hero-copy {
  max-width: 680px;
}

.landing-eyebrow {
  color: var(--landing-primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  margin: 0;
  text-transform: uppercase;
}

.landing-hero-eyebrow {
  align-items: center;
  color: #8ce5db;
  display: flex;
  gap: 11px;
}

.landing-hero-eyebrow::before {
  background: var(--landing-amber);
  content: "";
  height: 2px;
  width: 34px;
}

.landing-hero-title {
  color: #ffffff;
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  font-size: 4.75rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.98;
  margin: 20px 0 0;
}

.landing-title-piece {
  display: inline-block;
  opacity: 1;
}

.landing-js .landing-hero:not(.is-visible) .landing-title-piece {
  opacity: 0;
  transform: translateY(34px) rotate(2deg);
}

.landing-hero.is-visible .landing-title-piece {
  opacity: 1;
  transform: translateY(0) rotate(0);
  transition: opacity 500ms ease var(--piece-delay), transform 500ms cubic-bezier(0.22, 1, 0.36, 1) var(--piece-delay);
}

.landing-hero-description {
  color: #d6e2e8;
  font-size: 1.1rem;
  line-height: 1.75;
  margin: 24px 0 0;
  max-width: 630px;
}

.landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.landing-button-large {
  font-size: 0.95rem;
  min-height: 52px;
  padding: 13px 22px;
}

.landing-button-accent {
  background: var(--landing-aqua);
  box-shadow: 0 14px 34px rgba(34, 199, 184, 0.2);
  color: #052420;
  overflow: hidden;
}

.landing-button-accent::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent);
  content: "";
  height: 160%;
  left: -65%;
  position: absolute;
  top: -30%;
  transform: skewX(-20deg);
  transition: left 500ms ease;
  width: 42%;
}

.landing-button-accent:hover {
  background: #42d4c6;
  box-shadow: 0 18px 40px rgba(34, 199, 184, 0.28);
}

.landing-button-accent:hover::after {
  left: 125%;
}

.landing-button-glass {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.landing-button-glass:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.48);
}

.landing-hero-stats {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 36px;
  max-width: 610px;
  padding-top: 24px;
}

.landing-hero-stat {
  min-width: 0;
  padding: 0 22px;
}

.landing-hero-stat:first-child {
  padding-left: 0;
}

.landing-hero-stat + .landing-hero-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.landing-hero-stat-value {
  color: #ffffff;
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1;
  margin: 0;
}

.landing-hero-stat-label {
  color: #9fb0bd;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  line-height: 1.35;
  margin: 7px 0 0;
  text-transform: uppercase;
}

.landing-js .landing-hero:not(.is-visible) [data-hero-item] {
  opacity: 0;
  transform: translateY(22px);
}

.landing-hero.is-visible [data-hero-item] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 500ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-hero.is-visible [data-hero-item]:nth-of-type(1) {
  transition-delay: 80ms;
}

.landing-hero.is-visible [data-hero-item]:nth-of-type(2) {
  transition-delay: 260ms;
}

.landing-hero.is-visible .landing-hero-actions {
  transition-delay: 340ms;
}

.landing-hero.is-visible .landing-hero-stats {
  transition-delay: 420ms;
}

.landing-scroll-cue {
  align-items: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  bottom: 28px;
  display: flex;
  height: 36px;
  justify-content: center;
  padding-top: 7px;
  position: absolute;
  right: 34px;
  width: 22px;
}

.landing-scroll-cue span {
  animation: landingScrollCue 1.8s ease-in-out infinite;
  background: var(--landing-aqua);
  border-radius: 999px;
  height: 7px;
  width: 3px;
}

.landing-section {
  padding: 104px 28px;
  scroll-margin-top: 78px;
}

.landing-section-inner {
  margin: 0 auto;
  max-width: 1224px;
}

.landing-section-heading {
  align-items: end;
  display: grid;
  gap: 64px;
  grid-template-columns: minmax(0, 0.9fr) minmax(340px, 0.75fr);
  justify-content: space-between;
}

.landing-section-heading h2,
.landing-features-heading h2,
.landing-login-heading h2 {
  color: var(--landing-ink);
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0;
}

.landing-section-heading h2,
.landing-features-heading h2 {
  font-size: 2.75rem;
  line-height: 1.12;
  margin: 12px 0 0;
}

.landing-section-intro {
  color: var(--landing-muted);
  font-size: 1rem;
  line-height: 1.75;
  margin: 0;
}

.landing-about {
  background: #ffffff;
}

.landing-role-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 48px;
}

.landing-role-card {
  --card-accent: var(--landing-primary);
  background: #ffffff;
  border: 1px solid var(--landing-line);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(7, 26, 43, 0.055);
  min-height: 232px;
  overflow: hidden;
  padding: 24px;
  position: relative;
  transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
}

.landing-role-card::before {
  background: var(--card-accent);
  content: "";
  height: 3px;
  inset: 0 0 auto;
  position: absolute;
  transform: scaleX(0.22);
  transform-origin: left;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-role-card:nth-child(2) {
  --card-accent: var(--landing-blue);
}

.landing-role-card:nth-child(3) {
  --card-accent: var(--landing-amber);
}

.landing-role-card:nth-child(4) {
  --card-accent: var(--landing-coral);
}

.landing-role-card:hover {
  border-color: color-mix(in srgb, var(--card-accent) 42%, white);
  box-shadow: 0 22px 46px rgba(7, 26, 43, 0.11);
  transform: translateY(-7px);
}

.landing-role-card:hover::before {
  transform: scaleX(1);
}

.landing-role-icon {
  align-items: center;
  background: color-mix(in srgb, var(--card-accent) 11%, white);
  border: 1px solid color-mix(in srgb, var(--card-accent) 22%, white);
  border-radius: 7px;
  color: var(--card-accent);
  display: flex;
  font-size: 1rem;
  font-weight: 800;
  height: 46px;
  justify-content: center;
  margin-bottom: 30px;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 46px;
}

.landing-role-card:hover .landing-role-icon {
  transform: translateY(-3px) rotate(-4deg) scale(1.08);
}

.landing-role-card h3,
.landing-feature-card h3 {
  color: var(--landing-ink);
  font-size: 1.02rem;
  font-weight: 750;
  letter-spacing: 0;
  margin: 0;
}

.landing-role-card p,
.landing-feature-card p {
  color: var(--landing-muted);
  font-size: 0.88rem;
  line-height: 1.65;
  margin: 10px 0 0;
}

.landing-features {
  background:
    linear-gradient(100deg, rgba(15, 118, 110, 0.07), transparent 38%),
    var(--landing-paper);
}

.landing-features-layout {
  align-items: start;
  display: grid;
  gap: 74px;
  grid-template-columns: minmax(270px, 0.72fr) minmax(0, 1.45fr);
}

.landing-features-heading {
  padding-top: 10px;
  position: sticky;
  top: 112px;
}

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

.landing-feature-card {
  --feature-accent: var(--landing-primary);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(210, 223, 225, 0.94);
  border-radius: 8px;
  min-height: 194px;
  overflow: hidden;
  padding: 27px 27px 25px;
  position: relative;
  transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
}

.landing-feature-card:first-child {
  grid-column: 1 / -1;
  min-height: 180px;
}

.landing-feature-card:nth-child(2) {
  --feature-accent: var(--landing-blue);
}

.landing-feature-card:nth-child(3) {
  --feature-accent: var(--landing-amber);
}

.landing-feature-card:nth-child(4) {
  --feature-accent: var(--landing-coral);
}

.landing-feature-card:nth-child(5) {
  --feature-accent: #7c5ce7;
}

.landing-feature-line {
  background: var(--feature-accent);
  display: block;
  height: 3px;
  margin-bottom: 30px;
  transform-origin: left;
  transition: width 300ms ease;
  width: 42px;
}

.landing-feature-card:hover {
  border-color: color-mix(in srgb, var(--feature-accent) 38%, white);
  box-shadow: 0 20px 44px rgba(7, 26, 43, 0.1);
  transform: translateY(-6px);
}

.landing-feature-card:hover .landing-feature-line {
  width: 78px;
}

.landing-feature-arrow {
  bottom: 21px;
  color: var(--feature-accent);
  font-size: 1.35rem;
  line-height: 1;
  opacity: 0.45;
  position: absolute;
  right: 25px;
  transition: opacity 220ms ease, transform 220ms ease;
}

.landing-feature-card:hover .landing-feature-arrow {
  opacity: 1;
  transform: translateX(4px);
}

.landing-js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}

.landing-js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 520ms ease var(--reveal-delay, 0ms), transform 520ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
}

.landing-footer {
  background: var(--landing-ink);
  color: #aebcc6;
  padding: 38px 28px;
  scroll-margin-top: 78px;
}

.landing-footer-inner {
  align-items: center;
  display: grid;
  font-size: 0.85rem;
  gap: 24px;
  grid-template-columns: 1fr auto 1fr;
  margin: 0 auto;
  max-width: 1224px;
}

.landing-footer p {
  margin: 0;
}

.landing-footer p:last-child {
  text-align: right;
}

.landing-footer strong {
  color: #ffffff;
}

.landing-footer a {
  color: #85ded4;
  display: inline-block;
  text-decoration: none;
  transition: color 220ms ease, transform 220ms ease;
}

.landing-footer a:hover {
  color: #ffffff;
  transform: translateY(-2px);
}

.landing-login-dialog {
  background: transparent;
  border: 0;
  border-radius: 8px;
  max-width: calc(100vw - 32px);
  padding: 0;
  width: 448px;
}

.landing-login-dialog::backdrop {
  background: rgba(3, 15, 29, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.landing-login-dialog[open] {
  animation: landingDialogIn 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-login-form {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(3, 15, 29, 0.34);
  overflow: hidden;
  padding: 30px;
  position: relative;
}

.landing-login-form::before {
  background: linear-gradient(90deg, var(--landing-primary), var(--landing-blue), var(--landing-amber));
  content: "";
  height: 4px;
  inset: 0 0 auto;
  position: absolute;
}

.landing-login-heading {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.landing-login-heading h2 {
  font-size: 1.65rem;
  line-height: 1.15;
  margin: 7px 0 0;
}

.landing-dialog-close {
  align-items: center;
  background: #f4f7f8;
  border: 1px solid var(--landing-line);
  border-radius: 7px;
  color: #526373;
  cursor: pointer;
  display: flex;
  flex: 0 0 40px;
  font-size: 1.45rem;
  height: 40px;
  justify-content: center;
  line-height: 1;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.landing-dialog-close:hover {
  background: #eaf1f2;
  color: var(--landing-ink);
  transform: rotate(4deg);
}

.landing-login-alert {
  background: #fff1f0;
  border: 1px solid #ffd7d2;
  border-radius: 7px;
  color: #b43e32;
  font-size: 0.86rem;
  font-weight: 650;
  margin-top: 20px;
  padding: 11px 12px;
}

.landing-login-fields {
  display: grid;
  gap: 17px;
  margin-top: 25px;
}

.landing-login-fields label {
  color: #334759;
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
}

.landing-login-fields input {
  background: #fbfdfd;
  border: 1px solid #cbd8dc;
  border-radius: 7px;
  color: var(--landing-ink);
  display: block;
  margin-top: 7px;
  min-height: 50px;
  outline: none;
  padding: 11px 13px;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  width: 100%;
}

.landing-login-fields input:focus {
  background: #ffffff;
  border-color: var(--landing-primary);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
}

.landing-password-field {
  display: block;
  position: relative;
}

.landing-password-field input {
  padding-right: 48px;
}

.landing-login-submit {
  margin-top: 3px;
  min-height: 50px;
  width: 100%;
}

.landing-login-links {
  align-items: center;
  display: flex;
  font-size: 0.82rem;
  font-weight: 700;
  gap: 18px;
  justify-content: space-between;
  margin-top: 18px;
}

.landing-login-links a {
  color: var(--landing-primary);
  text-decoration: none;
}

.landing-login-links a:last-child {
  color: #607083;
}

.landing-login-links a:hover {
  color: var(--landing-blue);
}

@keyframes landingScrollCue {
  0%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(11px);
  }
}

@keyframes landingDialogIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 1024px) {
  .landing-role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-role-card {
    min-height: 210px;
  }

  .landing-features-layout {
    gap: 44px;
    grid-template-columns: minmax(240px, 0.6fr) minmax(0, 1.4fr);
  }
}

@media (max-width: 860px) {
  .landing-navbar-inner {
    padding-inline: 20px;
  }

  .landing-menu-toggle {
    display: inline-flex;
  }

  .landing-nav-links {
    align-items: stretch;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--landing-line);
    border-radius: 8px;
    box-shadow: 0 22px 50px rgba(7, 26, 43, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0;
    left: 20px;
    opacity: 0;
    padding: 8px;
    pointer-events: none;
    position: absolute;
    right: 20px;
    top: 70px;
    transform: translateY(-10px);
    transition: opacity 220ms ease, transform 220ms ease;
  }

  .landing-nav-links.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .landing-nav-links a {
    border-radius: 6px;
    padding: 13px 14px;
  }

  .landing-nav-links a::after {
    display: none;
  }

  .landing-nav-links a:hover,
  .landing-nav-links a.is-active {
    background: #eff8f6;
  }

  .landing-hero {
    height: 680px;
    max-height: none;
  }

  .landing-hero-image {
    object-position: 62% center;
  }

  .landing-hero-overlay {
    background:
      linear-gradient(90deg, rgba(3, 15, 29, 0.98) 0%, rgba(3, 15, 29, 0.86) 56%, rgba(3, 15, 29, 0.48) 100%),
      linear-gradient(180deg, transparent 44%, rgba(3, 15, 29, 0.66) 100%);
  }

  .landing-hero-title {
    font-size: 4rem;
  }

  .landing-section {
    padding: 82px 24px;
  }

  .landing-section-heading {
    align-items: start;
    gap: 22px;
    grid-template-columns: 1fr;
  }

  .landing-section-intro {
    max-width: 650px;
  }

  .landing-features-layout {
    gap: 38px;
    grid-template-columns: 1fr;
  }

  .landing-features-heading {
    max-width: 660px;
    padding-top: 0;
    position: static;
  }

  .landing-footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .landing-footer p:last-child {
    text-align: center;
  }
}

@media (max-width: 600px) {

  .landing-navbar {
    height: 70px;
  }

  .landing-navbar-inner {
    padding-inline: 14px;
  }

  .landing-brand {
    gap: 8px;
    height: 56px;
    min-width: 140px;
  }

  .landing-brand img {
    height: 50px;
    width: 50px;
  }

  .landing-brand span {
    font-size: 0.98rem;
  }

  .landing-button {
    padding-inline: 13px;
  }

  .landing-navbar-actions {
    gap: 7px;
  }

  .landing-navbar-actions .landing-button-ghost {
    display: none;
  }

  .landing-nav-links {
    left: 14px;
    right: 14px;
    top: 63px;
  }

  .landing-hero {
    height: 690px;
    min-height: 690px;
  }

  .landing-hero-image {
    object-position: 70% center;
  }

  .landing-hero-overlay {
    background: linear-gradient(90deg, rgba(3, 15, 29, 0.96) 0%, rgba(3, 15, 29, 0.88) 64%, rgba(3, 15, 29, 0.68) 100%);
  }

  .landing-hero-grid {
    background-size: 58px 58px;
    mask-image: none;
    opacity: 0.25;
  }

  .landing-hero-inner {
    align-items: flex-end;
    padding: 54px 20px 56px;
  }

  .landing-hero-title {
    font-size: 3.25rem;
  }

  .landing-hero-description {
    font-size: 1rem;
    line-height: 1.65;
    margin-top: 20px;
  }

  .landing-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 25px;
  }

  .landing-button-large {
    width: 100%;
  }

  .landing-hero-stats {
    margin-top: 27px;
    padding-top: 20px;
  }

  .landing-hero-stat {
    padding-inline: 12px;
  }

  .landing-hero-stat-value {
    font-size: 1.5rem;
  }

  .landing-hero-stat-label {
    font-size: 0.6rem;
  }

  .landing-scroll-cue {
    display: none;
  }

  .landing-section {
    padding: 68px 18px;
    scroll-margin-top: 70px;
  }

  .landing-section-heading h2,
  .landing-features-heading h2 {
    font-size: 2.15rem;
  }

  .landing-role-grid,
  .landing-feature-grid {
    grid-template-columns: 1fr;
  }

  .landing-role-grid {
    margin-top: 34px;
  }

  .landing-role-card {
    align-items: flex-start;
    display: grid;
    gap: 18px;
    grid-template-columns: 46px 1fr;
    min-height: 0;
    padding: 22px;
  }

  .landing-role-icon {
    margin: 0;
  }

  .landing-feature-card:first-child {
    grid-column: auto;
  }

  .landing-feature-card,
  .landing-feature-card:first-child {
    min-height: 178px;
  }

  .landing-footer {
    padding: 34px 18px;
  }

  .landing-login-form {
    padding: 26px 20px 22px;
  }

  .landing-login-links {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-page {
    scroll-behavior: auto;
  }

  .landing-page *,
  .landing-page *::before,
  .landing-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .landing-js [data-reveal],
  .landing-js .landing-hero:not(.is-visible) [data-hero-item],
  .landing-js .landing-hero:not(.is-visible) .landing-title-piece {
    opacity: 1;
    transform: none;
  }
}

/* Practice questions experience */
.practice-hero {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(79, 70, 229, 0.1), transparent 52%),
    #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.35rem);
}

.practice-eyebrow {
  color: #4f46e5;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.practice-hero h1 {
  color: #172033;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 900;
  margin-top: 0.35rem;
}

.practice-hero p:not(.practice-eyebrow) {
  color: #64748b;
  font-size: 0.92rem;
  line-height: 1.55;
  margin-top: 0.45rem;
  max-width: 46rem;
}

.practice-stats-strip {
  align-items: center;
  display: flex;
  gap: 0.65rem;
}

.practice-stat,
.practice-ring {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  min-width: 5.4rem;
  padding: 0.65rem 0.8rem;
  text-align: center;
}

.practice-stat span {
  color: #1e293b;
  display: block;
  font-size: 1rem;
  font-weight: 900;
}

.practice-stat small {
  color: #64748b;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
}

.practice-ring {
  align-items: center;
  background: conic-gradient(#4f46e5 calc(var(--progress) * 1%), #e2e8f0 0);
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  height: 3.7rem;
  justify-content: center;
  min-width: 3.7rem;
  padding: 0;
  width: 3.7rem;
}

.practice-ring span {
  align-items: center;
  background: #ffffff;
  border-radius: inherit;
  color: #4f46e5;
  display: inline-flex;
  font-weight: 900;
  font-size: 0.86rem;
  height: 2.75rem;
  justify-content: center;
  width: 2.75rem;
}

.practice-board {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.practice-board-header,
.practice-toolbar {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.practice-board-header h2 {
  color: #172033;
  font-size: 1.55rem;
  font-weight: 900;
  margin-top: 0.25rem;
}

.practice-summary {
  min-width: min(18rem, 100%);
}

.practice-summary span {
  color: #475569;
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  text-align: right;
}

.practice-summary div {
  background: #e2e8f0;
  border-radius: 999px;
  height: 0.55rem;
  overflow: hidden;
}

.practice-summary div span {
  background: linear-gradient(90deg, #4f46e5, #2563eb);
  border-radius: inherit;
  display: block;
  height: 100%;
}

.practice-toolbar {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding: 0.8rem;
}

.practice-toolbar label {
  color: #64748b;
  display: grid;
  flex: 1 1 12rem;
  font-size: 0.72rem;
  font-weight: 900;
  gap: 0.35rem;
  text-transform: uppercase;
}

.practice-toolbar select {
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  color: #1e293b;
  font-size: 0.92rem;
  font-weight: 750;
  min-height: 2.7rem;
  padding-inline: 0.8rem;
}

.practice-card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  margin-top: 1.25rem;
}

.practice-question-card {
  animation: practiceCardIn 0.38s ease both;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.055);
  color: inherit;
  min-height: 13rem;
  overflow: hidden;
  padding: 1.15rem;
  position: relative;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.practice-question-card:nth-child(1) { animation-delay: 0.02s; }
.practice-question-card:nth-child(2) { animation-delay: 0.07s; }
.practice-question-card:nth-child(3) { animation-delay: 0.12s; }
.practice-question-card:nth-child(4) { animation-delay: 0.17s; }
.practice-question-card:nth-child(5) { animation-delay: 0.22s; }
.practice-question-card:nth-child(6) { animation-delay: 0.27s; }
.practice-question-card:nth-child(7) { animation-delay: 0.32s; }
.practice-question-card:nth-child(8) { animation-delay: 0.37s; }
.practice-question-card:nth-child(9) { animation-delay: 0.42s; }
.practice-question-card:nth-child(10) { animation-delay: 0.47s; }

.practice-question-card:hover {
  border-color: rgba(79, 70, 229, 0.32);
  box-shadow: 0 22px 48px rgba(37, 99, 235, 0.12);
  transform: translateY(-3px) scale(1.01);
}

.practice-question-card.is-pressing {
  transform: scale(0.985);
}

.practice-card-accent {
  background: #cbd5e1;
  inset: 0 auto 0 0;
  position: absolute;
  width: 0.32rem;
}

.practice-question-card.is-solved .practice-card-accent {
  background: #10b981;
}

.practice-card-top,
.practice-card-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: space-between;
}

.practice-number-chip {
  background: linear-gradient(135deg, #4f46e5, #2563eb);
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
  padding: 0.45rem 0.75rem;
}

.practice-status-pill {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 900;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
}

.practice-status-pill span {
  border-radius: 999px;
  display: inline-block;
  height: 0.55rem;
  width: 0.55rem;
}

.status-solved {
  background: #ecfdf5;
  color: #047857;
}

.status-solved span {
  background: #10b981;
}

.status-not-started {
  background: #f1f5f9;
  color: #64748b;
}

.status-not-started span {
  background: #94a3b8;
}

.status-submitted {
  background: #fff7ed;
  color: #c2410c;
}

.status-submitted span {
  background: #f97316;
}

.practice-question-card h3 {
  color: #172033;
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.28;
  margin-top: 1rem;
}

.practice-question-card p {
  color: #64748b;
  font-size: 0.92rem;
  line-height: 1.6;
  margin-top: 0.6rem;
}

.practice-card-meta {
  justify-content: flex-start;
  margin-top: 1rem;
}

.difficulty-chip,
.topic-chip {
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
  padding: 0.42rem 0.7rem;
}

.difficulty-easy {
  background: #dcfce7;
  color: #166534;
}

.difficulty-medium {
  background: #fef3c7;
  color: #92400e;
}

.difficulty-hard {
  background: #fee2e2;
  color: #991b1b;
}

.difficulty-practice {
  background: #e0e7ff;
  color: #3730a3;
}

.topic-chip {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
}

.practice-empty-state {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  color: #64748b;
  grid-column: 1 / -1;
  padding: 2rem;
  text-align: center;
}

.practice-workspace {
  align-items: stretch;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(22rem, 0.88fr) minmax(0, 1.12fr);
  height: calc(100vh - 8.75rem);
  min-height: 34rem;
  overflow: hidden;
}

@media (min-width: 1101px) {
  body.console-body:not([data-role="public"]):has(.practice-workspace) {
    overflow: hidden;
  }

  body.console-body:not([data-role="public"]):has(.practice-workspace) .console-sidebar {
    display: none;
  }

  body.console-body:not([data-role="public"]):has(.practice-workspace) .console-topbar {
    height: 3.25rem;
    min-height: 3.25rem;
    padding-block: 0.35rem;
    padding-inline: 1.25rem;
  }

  body.console-body:not([data-role="public"]):has(.practice-workspace) .console-topbar p:first-child {
    font-size: 0.62rem;
    line-height: 1;
  }

  body.console-body:not([data-role="public"]):has(.practice-workspace) .console-topbar p {
    margin-top: 0.12rem;
  }

  body.console-body:not([data-role="public"]):has(.practice-workspace) .console-topbar p:nth-child(2) {
    font-size: 0.86rem;
    line-height: 1.1;
  }

  body.console-body:not([data-role="public"]):has(.practice-workspace) .console-topbar p:nth-child(3) {
    display: none;
  }

  body.console-body:not([data-role="public"]):has(.practice-workspace) .console-back-button {
    min-height: 2.2rem;
    padding: 0.42rem 0.68rem;
  }

  body.console-body:not([data-role="public"]):has(.practice-workspace) .console-header-stats span {
    min-height: 2.25rem;
    min-width: 5.35rem;
    padding: 0.38rem 0.7rem;
  }

  body.console-body:not([data-role="public"]):has(.practice-workspace) .console-header-stats strong {
    font-size: 0.95rem;
    line-height: 1;
  }

  body.console-body:not([data-role="public"]):has(.practice-workspace) .console-header-stats small {
    font-size: 0.58rem;
    line-height: 1;
    margin-top: 0.2rem;
  }

  body.console-body:not([data-role="public"]):has(.practice-workspace) .console-logout {
    min-height: 2.45rem;
    padding: 0.55rem 0.9rem;
  }

  body.console-body:not([data-role="public"]) .console-content:has(.practice-workspace) {
    max-width: none;
    padding: 0.85rem 1.25rem;
  }

  body.console-body:not([data-role="public"]) .console-content:has(.practice-workspace) .practice-workspace {
    grid-template-columns: minmax(25rem, 0.78fr) minmax(38rem, 1.22fr);
    height: calc(100vh - 4.95rem);
  }

  body.console-body:not([data-role="public"]) .console-content:has(.practice-workspace) .practice-resizable-panel {
    gap: 0.7rem;
    grid-template-rows: minmax(0, 1.55fr) 0.72rem minmax(8rem, 0.45fr);
  }

  body.console-body:not([data-role="public"]) .console-content:has(.practice-workspace) .practice-resizable-panel .practice-resize-handle {
    display: inline-flex;
  }

  body.console-body:not([data-role="public"]) .console-content:has(.practice-workspace) .practice-code-editor {
    font-size: 0.98rem;
    line-height: 1.75;
    padding: 1.35rem 1.55rem;
  }

  body.console-body:not([data-role="public"]) .console-content:has(.practice-workspace) .practice-submit-footer {
    min-height: 3.35rem;
    padding: 0.55rem 1rem;
  }

  body.console-body:not([data-role="public"]) .console-content:has(.practice-workspace) .practice-submit-footer p {
    font-size: 0.78rem;
    line-height: 1.25;
  }

  body.console-body:not([data-role="public"]) .console-content:has(.practice-workspace) .practice-submit-button {
    border-radius: 9px;
    min-height: 2.55rem;
    padding: 0.58rem 1.1rem;
  }
}

.practice-panel {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.065);
  overflow: hidden;
  position: relative;
}

.practice-panel-header {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border-bottom: 1px solid #e2e8f0;
  padding: 0.85rem 1.05rem;
}

.practice-question-nav {
  align-items: center;
  display: flex;
  gap: 0.65rem;
  text-align: center;
}

.practice-question-nav p {
  color: #0f172a;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.practice-question-nav small {
  color: #64748b;
  display: block;
  font-size: 0.68rem;
  font-weight: 900;
  margin-top: 0.25rem;
  text-transform: uppercase;
}

.practice-arrow-button {
  align-items: center;
  background: #111827;
  border: 1px solid #111827;
  border-radius: 8px;
  color: #ffffff;
  display: inline-flex;
  font-size: 1.15rem;
  font-weight: 900;
  height: 2.45rem;
  justify-content: center;
  line-height: 1;
  width: 2.45rem;
}

.practice-arrow-button:hover {
  background: #0f766e;
  border-color: #0f766e;
}

.practice-arrow-button.is-disabled {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
}

.practice-question-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.practice-question-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.85rem;
  scrollbar-width: thin;
}

[data-protected-question],
[data-protected-question] * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.practice-problem-card {
  background:
    linear-gradient(180deg, rgba(79, 70, 229, 0.035), transparent 15rem),
    #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
  padding: clamp(1rem, 2vw, 1.35rem);
  -webkit-user-select: text;
  user-select: text;
}

.practice-problem-card * {
  -webkit-user-select: text;
  user-select: text;
}

.practice-problem-card[data-protected-question],
.practice-problem-card[data-protected-question] * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.practice-problem-card h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  line-height: 1.25;
}

.practice-test-cases {
  overflow-x: auto;
}

.practice-test-cases table {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  border-spacing: 0;
  font-size: 0.9rem;
  min-width: 100%;
  overflow: hidden;
  width: 100%;
}

.practice-test-cases thead tr {
  background: #0f172a;
  color: #ffffff;
}

.practice-test-cases th,
.practice-test-cases td {
  padding: 0.75rem 0.85rem;
  text-align: left;
  vertical-align: top;
}

.practice-test-cases tbody tr {
  border-bottom: 1px solid #e2e8f0;
}

.practice-test-cases tbody tr:nth-child(even) {
  background: #f8fafc;
}

.practice-test-cases code {
  color: #182238;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.86rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.practice-test-index {
  font-weight: 800;
  width: 3.25rem;
}

.practice-help-strip {
  align-items: center;
  border-top: 1px solid #e2e8f0;
  color: #64748b;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
}

.practice-help-strip span {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 850;
  padding: 0.4rem 0.65rem;
}

.practice-answer-panel {
  display: grid;
  gap: 0.85rem;
  grid-template-rows: minmax(0, 1.1fr) minmax(9rem, 0.9fr);
  min-height: 0;
  overflow: hidden;
}

.practice-answer-panel .practice-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.practice-resize-handle {
  align-items: center;
  align-self: stretch;
  background: transparent;
  border: 0;
  cursor: row-resize;
  display: none;
  height: 0.72rem;
  justify-content: center;
  margin: -0.42rem 0;
  padding: 0;
  position: relative;
  z-index: 3;
}

.practice-resize-handle span {
  background: #cbd5e1;
  border-radius: 999px;
  display: block;
  height: 0.28rem;
  transition: background-color 0.15s ease, width 0.15s ease;
  width: 5.25rem;
}

.practice-resize-handle:hover span,
.practice-resize-handle:focus-visible span,
.is-practice-resizing .practice-resize-handle span {
  background: #4f46e5;
  width: 7rem;
}

.is-practice-resizing {
  cursor: row-resize;
}

.practice-code-editor {
  background: #f8fafc;
  border: 0;
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.95rem;
  flex: 1;
  height: auto;
  line-height: 1.7;
  min-height: 0;
  outline: none;
  padding: 1.15rem 1.35rem;
  resize: none;
  width: 100%;
  -webkit-user-select: text;
  user-select: text;
}

.practice-code-editor:focus {
  box-shadow: inset 0 0 0 3px rgba(79, 70, 229, 0.16);
}

.practice-code-editor[readonly],
.practice-code-editor:disabled,
.practice-code-editor[data-locked-editor="true"] {
  cursor: not-allowed;
  background: #f8fafc;
  color: #64748b;
  opacity: 1;
}

.practice-code-view {
  flex: 1;
  margin: 0;
  overflow: auto;
  white-space: pre;
  -webkit-user-select: text;
  user-select: text;
}

.exam-guard-notice {
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  bottom: 1.25rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 800;
  left: 50%;
  opacity: 0;
  padding: 0.75rem 1rem;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, 0.75rem);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 80;
}

.exam-guard-notice.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.practice-submit-footer {
  align-items: center;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: 0.8rem 1rem;
}

.practice-submit-footer p {
  color: #64748b;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.45;
  margin: 0;
}

.practice-draft-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 0.75rem;
  justify-content: flex-end;
}

.practice-draft-status {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 800;
  min-width: 6.5rem;
  text-align: right;
}

.practice-draft-save {
  background: #f8fafc;
  border: 1px solid #94a3b8;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  color: #0f172a;
  flex: 0 0 auto;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1;
  min-height: 3.15rem;
  padding: 0.95rem 1.35rem;
}

.practice-draft-save:hover {
  background: #eef2f7;
  border-color: #64748b;
}

.practice-submit-button {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  border-radius: 12px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.2);
  color: #ffffff;
  flex: 0 0 auto;
  font-size: 0.92rem;
  font-weight: 900;
  padding: 0.85rem 1.25rem;
}

.practice-submit-button:hover {
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.25);
  transform: translateY(-1px);
}

.practice-submit-button:disabled {
  background: #94a3b8;
  box-shadow: none;
  cursor: not-allowed;
}

.practice-output-box {
  background: #070b18;
  color: #e5edf9;
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.9rem;
  line-height: 1.65;
  min-height: 0;
  overflow: auto;
  padding: 1rem 1.25rem;
}

.compiler-terminal {
  background: #070b18;
  border-radius: 8px;
  color: #e5edf9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.9rem;
  line-height: 1.65;
  min-height: 14rem;
  overflow: auto;
  padding: 1rem 1.25rem;
}

.compiler-terminal-row {
  align-items: flex-start;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto minmax(0, 1fr);
  margin-bottom: 1rem;
}

.compiler-terminal-prompt {
  color: #60a5fa;
  font-weight: 900;
  line-height: 1.65;
  padding-top: 0.15rem;
}

.compiler-terminal-input {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #ffffff;
  font: inherit;
  min-height: 4.8rem !important;
  outline: none;
  padding: 0 !important;
  resize: vertical;
  width: 100%;
}

.compiler-terminal-input::placeholder {
  color: #7b8497;
}

.compiler-terminal-output {
  color: #e5edf9;
  font: inherit;
  margin: 0;
  min-height: 8rem;
  overflow: visible;
  white-space: pre-wrap;
}

.practice-output-box.compiler-terminal {
  padding: 1rem 1.25rem;
}

@media (max-width: 1100px) {
  .practice-workspace {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .practice-question-panel {
    min-height: auto;
  }

  .practice-question-scroll {
    flex: none;
    max-height: none;
  }

  .practice-answer-panel {
    grid-template-rows: none;
    overflow: visible;
  }

  .practice-code-editor {
    height: min(42vh, 24rem);
    min-height: 16rem;
    resize: vertical;
  }

  .practice-output-box {
    min-height: 11rem;
  }
}

@media (max-width: 640px) {
  .practice-submit-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .practice-draft-actions {
    align-items: stretch;
    display: grid;
    gap: 0.7rem;
    grid-template-columns: 1fr;
  }

  .practice-draft-status {
    min-width: 0;
    text-align: left;
  }

  .practice-draft-save {
    width: 100%;
  }

  .practice-submit-button {
    width: 100%;
  }
}

@keyframes practiceCardIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .practice-hero,
  .practice-board-header {
    align-items: stretch;
    flex-direction: column;
  }

  .practice-stats-strip {
    justify-content: space-between;
  }

  .practice-summary span {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .practice-question-card {
    animation: none;
  }
}

/* Admin console refresh: navy + cobalt */
body.console-body:not([data-role="public"]) {
  --admin-navy: #0c1830;
  --admin-navy-soft: #172540;
  --admin-primary: #3157d5;
  --admin-primary-dark: #2645b5;
  --admin-primary-soft: #eef2ff;
  --admin-cyan: #0891b2;
  --admin-surface: #ffffff;
  --admin-canvas: #f3f6fb;
  --admin-line: #dde4ef;
  --admin-muted: #65748b;
  background: var(--admin-canvas);
  color: #172033;
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
}

body.console-body:not([data-role="public"]) .console-sidebar {
  background: linear-gradient(180deg, #0b162c 0%, #101d36 100%);
  border-right: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 12px 0 36px rgba(12, 24, 48, 0.16);
  width: 17.25rem;
}

body.console-body:not([data-role="public"]) .console-brand {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.08);
  min-height: 4.9rem;
  padding-inline: 1.15rem;
}

body.console-body:not([data-role="public"]) .console-brand > a {
  gap: 0.75rem;
}

body.console-body:not([data-role="public"]) .console-brand > a > span:last-child > span:first-child {
  font-size: 1.12rem;
  font-weight: 750;
  letter-spacing: 0;
}

body.console-body:not([data-role="public"]) .console-brand .text-slate-400 {
  color: #91a0b8;
  font-size: 0.65rem;
  letter-spacing: 0.07em;
}

body.console-body:not([data-role="public"]) .console-logo {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(2, 8, 23, 0.2);
  height: 3rem;
  overflow: hidden;
  padding: 0.2rem;
  position: relative;
  width: 3rem;
}

body.console-body:not([data-role="public"]) .console-logo img {
  display: block;
  height: 100%;
  object-fit: contain;
  position: static;
  width: 100%;
}

body.console-body:not([data-role="public"]) .console-nav {
  padding: 1rem 0.8rem;
  scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
}

body.console-body:not([data-role="public"]) .console-nav-link {
  border: 1px solid transparent;
  border-radius: 7px;
  color: #aebbd0;
  font-size: 0.86rem;
  font-weight: 650;
  min-height: 2.9rem;
  padding: 0.55rem 0.75rem;
  position: relative;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

body.console-body:not([data-role="public"]) .console-nav-link:hover {
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(255, 255, 255, 0.075);
  color: #ffffff;
  transform: translateX(3px);
}

body.console-body:not([data-role="public"]) .console-nav-link.is-active {
  background: linear-gradient(135deg, rgba(49, 87, 213, 0.98), rgba(79, 70, 229, 0.92));
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 24px rgba(49, 87, 213, 0.27), 0 0 28px rgba(129, 140, 248, 0.18);
  color: #ffffff;
}

body.console-body:not([data-role="public"]) .console-nav-link.is-active::before {
  background: #a5b4fc;
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(165, 180, 252, 0.9);
  content: "";
  height: 1.7rem;
  left: -0.45rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.22rem;
}

body.console-body:not([data-role="public"]) .console-nav-icon {
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  color: #c5d0e1;
  height: 1.85rem;
  min-width: 1.85rem;
  width: 1.85rem;
}

body.console-body:not([data-role="public"]) .console-nav-link.is-active .console-nav-icon {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.11);
  color: #ffffff;
}

body.console-body:not([data-role="public"]) .console-note,
body.console-body:not([data-role="public"]) .console-profile {
  background: rgba(49, 87, 213, 0.12);
  border-color: rgba(128, 151, 229, 0.2);
  border-radius: 8px;
  margin: 0.8rem;
  padding: 0.9rem;
}

body.console-body:not([data-role="public"]) .console-note p:first-child {
  color: #e4e9f5;
}

body.console-body:not([data-role="public"]) .console-note .text-slate-400 {
  color: #8fa1bd;
}

body.console-body:not([data-role="public"]) .console-main {
  background: var(--admin-canvas);
}

body.console-body:not([data-role="public"]) .console-topbar {
  background: rgba(255, 255, 255, 0.94);
  border-color: #e4e9f1;
  box-shadow: 0 8px 24px rgba(18, 34, 62, 0.055);
  height: 4.75rem;
  padding-inline: 2rem;
}

body.console-body:not([data-role="public"]) .console-topbar .text-slate-400 {
  color: #7d8ca3;
  letter-spacing: 0.07em;
}

body.console-body:not([data-role="public"]) .console-topbar .text-slate-700 {
  color: #334056;
}

body.console-body:not([data-role="public"]) .console-role-badge {
  background: var(--admin-primary-soft);
  border: 1px solid #d8e0ff;
  color: #4058b6;
  letter-spacing: 0.055em;
}

body.console-body:not([data-role="public"]) .console-logout {
  background: var(--admin-navy);
  border-radius: 7px;
  box-shadow: 0 8px 18px rgba(12, 24, 48, 0.18);
}

body.console-body:not([data-role="public"]) .console-logout:hover {
  background: #162542;
  box-shadow: 0 11px 22px rgba(12, 24, 48, 0.23);
  transform: translateY(-1px);
}

.console-header-stats span {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: grid;
  min-width: 5.8rem;
  padding: 0.5rem 0.75rem;
}

.console-header-stats strong {
  color: #1e293b;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
}

.console-header-stats small {
  color: #64748b;
  font-size: 0.65rem;
  font-weight: 850;
  margin-top: 0.18rem;
  text-transform: uppercase;
}

body.console-body:not([data-role="public"]) .console-menu-btn {
  align-items: center;
  border-color: #d8e0eb;
  display: inline-flex;
  height: 2.6rem;
  justify-content: center;
  padding: 0;
  width: 2.6rem;
}

body.console-body:not([data-role="public"]) .console-menu-btn span,
body.console-body:not([data-role="public"]) .console-menu-btn span::before,
body.console-body:not([data-role="public"]) .console-menu-btn span::after {
  background: #334056;
  content: "";
  display: block;
  height: 2px;
  position: relative;
  width: 17px;
}

body.console-body:not([data-role="public"]) .console-menu-btn span::before {
  position: absolute;
  top: -5px;
}

body.console-body:not([data-role="public"]) .console-menu-btn span::after {
  position: absolute;
  top: 5px;
}

body.console-body:not([data-role="public"]) .console-content {
  max-width: 100rem;
  padding: 1.75rem 2rem 2.5rem;
}

body.console-body:not([data-role="public"]) .console-content > div:first-child:not(.console-page-heading):not(.console-page-hero):not([class*="border-teal"]):not([class*="border-red"]) {
  background: var(--admin-surface);
  border-color: var(--admin-line);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(18, 34, 62, 0.055);
  overflow: hidden;
  padding: 1.5rem 1.65rem;
  position: relative;
}

body.console-body:not([data-role="public"]) .console-content > div:first-child:not(.console-page-heading):not(.console-page-hero):not([class*="border-teal"]):not([class*="border-red"])::before {
  background: var(--admin-primary);
  content: "";
  height: 3px;
  inset: 0 0 auto;
  position: absolute;
}

body.console-body:not([data-role="public"]) .console-content > h1 {
  color: #172033;
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 2rem;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.15;
}

body.console-body:not([data-role="public"]) .console-content .text-teal-700,
body.console-body:not([data-role="public"]) .console-content .text-teal-800 {
  color: #4058b6;
}

body.console-body:not([data-role="public"]) .console-content .bg-teal-50 {
  background-color: var(--admin-primary-soft);
}

body.console-body:not([data-role="public"]) .console-content .border-teal-200 {
  border-color: #c7d2fe;
}

body.console-body:not([data-role="public"]) .console-page-heading,
body.console-body:not([data-role="public"]) .console-page-hero {
  align-items: center;
  background: var(--admin-surface);
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(18, 34, 62, 0.055);
  display: flex;
  justify-content: space-between;
  min-height: 108px;
  overflow: hidden;
  padding: 1.5rem 1.65rem;
  position: relative;
}

body.console-body:not([data-role="public"]) .console-page-heading::before,
body.console-body:not([data-role="public"]) .console-page-hero::before {
  background: var(--admin-primary);
  content: "";
  inset: 0 auto 0 0;
  height: auto;
  position: absolute;
  width: 4px;
}

body.console-body:not([data-role="public"]) .console-page-kicker,
body.console-body:not([data-role="public"]) .console-panel-kicker {
  color: #5a6fbf;
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  margin: 0;
  text-transform: uppercase;
}

body.console-body:not([data-role="public"]) .console-page-heading h1 {
  color: #172033;
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 2rem;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0.4rem 0 0;
}

body.console-body:not([data-role="public"]) .console-page-hero > :first-child {
  width: 100%;
}

body.console-body:not([data-role="public"]) .console-page-metric {
  align-items: center;
  border-left: 1px solid var(--admin-line);
  display: flex;
  gap: 0.8rem;
  min-width: 150px;
  padding-left: 1.35rem;
}

body.console-body:not([data-role="public"]) .console-page-metric strong {
  color: var(--admin-primary);
  font-size: 1.8rem;
  line-height: 1;
}

body.console-body:not([data-role="public"]) .console-page-metric span {
  color: var(--admin-muted);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
}

body.console-body:not([data-role="public"]) .console-form-panel,
body.console-body:not([data-role="public"]) .console-table-panel,
body.console-body:not([data-role="public"]) .console-content > section {
  background: var(--admin-surface);
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(18, 34, 62, 0.05);
}

body.console-body:not([data-role="public"]) .console-content form[class*="shadow-sm"],
body.console-body:not([data-role="public"]) .console-content div[class*="overflow-x-auto"][class*="shadow-sm"] {
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(18, 34, 62, 0.05);
}

body.console-body:not([data-role="public"]) .console-content > section.student-attendance-hero {
  background: #0f172a;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.2);
  color: #ffffff;
}

body.console-body:not([data-role="public"]) .console-content > section.student-attendance-hero h1 {
  color: #ffffff;
}

body.console-body:not([data-role="public"]) .console-content > section.student-attendance-hero p:not(.student-attendance-eyebrow) {
  color: #cbd5e1;
}

body.console-body:not([data-role="public"]) .console-content > section.student-attendance-panel {
  background: #ffffff;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
}

.student-course-hero {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(49, 87, 213, 0.08), transparent 48%),
    #ffffff;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(18, 34, 62, 0.06);
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.65rem 2rem;
  position: relative;
}

.student-course-hero::before {
  background: #3157d5;
  content: "";
  height: 4px;
  inset: 0 0 auto;
  position: absolute;
}

.student-course-hero p,
.student-course-eyebrow {
  color: #3157d5;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.student-course-hero h1 {
  color: #182235;
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.1;
  margin-top: 0.55rem;
}

.student-course-hero span {
  color: #526179;
  display: block;
  margin-top: 0.5rem;
}

.student-course-hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
}

.student-course-hero-metrics strong {
  background: #eef4ff;
  border: 1px solid #d8e4ff;
  border-radius: 999px;
  color: #3157d5;
  font-size: 0.82rem;
  padding: 0.55rem 0.85rem;
  white-space: nowrap;
}

.student-course-layout {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(18rem, 0.75fr) minmax(25rem, 1.25fr);
  margin-top: 1.5rem;
}

body.console-body:not([data-role="public"]) .console-content > section.student-course-panel,
.student-course-panel {
  background: #ffffff;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(18, 34, 62, 0.05);
  padding: 1.6rem;
}

.student-course-panel-title {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.student-course-panel-title h2,
.student-course-selected h2 {
  color: #182235;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.15;
}

.student-course-panel-title span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
}

.student-course-list,
.student-module-list {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}

.student-course-link {
  background: #ffffff;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  display: block;
  padding: 1rem;
  position: relative;
}

.student-course-link:hover {
  border-color: #3157d5;
  box-shadow: 0 10px 22px rgba(49, 87, 213, 0.1);
}

.student-course-link.is-active {
  background: #f2f6ff;
  border-color: #3157d5;
  box-shadow: inset 4px 0 0 #3157d5;
}

.student-course-link span {
  color: #182235;
  display: block;
  font-weight: 900;
}

.student-course-link small {
  color: #64748b;
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  margin-top: 0.35rem;
}

.student-course-selected .student-course-eyebrow {
  margin-bottom: 0.7rem;
}

.student-course-selected-head {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.student-course-selected-head a {
  background: #111827;
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 900;
  padding: 0.65rem 0.9rem;
  white-space: nowrap;
}

.student-course-detail-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.35rem;
}

.student-course-detail {
  background: #f8fafc;
  border: 1px solid #edf2f7;
  border-radius: 8px;
  min-width: 0;
  padding: 1rem;
}

.student-course-detail p {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 900;
}

.student-course-detail strong {
  color: #1e293b;
  display: block;
  font-weight: 900;
  margin-top: 0.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-course-detail.is-link {
  background: #eef4ff;
  border-color: #d8e4ff;
}

.student-course-detail.is-link p,
.student-course-detail.is-link strong {
  color: #3157d5;
}

.student-module-panel {
  margin-top: 1.5rem;
}

.student-module-card {
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.75), transparent 9rem),
    #ffffff;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  padding: 1rem;
}

.student-module-card-header {
  align-items: center;
  background: #ffffff;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem;
}

.student-module-card-header span {
  color: #3157d5;
  display: block;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.student-module-card-header h3 {
  color: #182235;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.25;
  margin-top: 0.25rem;
}

.student-module-card-header a,
.student-module-file a {
  background: #3157d5;
  border-radius: 8px;
  color: #ffffff;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 900;
  padding: 0.65rem 0.9rem;
  white-space: nowrap;
}

.student-module-card-header a {
  background: #f8fafc;
  border: 1px solid #dbe5f0;
  color: #3157d5;
}

.student-module-actions {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.85rem;
}

.student-module-actions a {
  align-items: center;
  background: #ffffff;
  border: 1px solid #d8e4ff;
  border-radius: 8px;
  color: #3157d5;
  display: flex;
  font-size: 0.9rem;
  font-weight: 900;
  justify-content: center;
  min-height: 3.1rem;
  padding: 0.75rem;
  text-align: center;
}

.student-module-actions a:hover {
  background: #eef4ff;
}

.student-module-actions a.is-primary {
  background: #3157d5;
  color: #ffffff;
}

.student-module-files {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.9rem;
}

.student-module-file {
  background: #f8fafc;
  border: 1px solid #edf2f7;
  border-radius: 8px;
  min-width: 0;
  padding: 0.9rem;
}

.student-module-file.has-file {
  background: #ffffff;
}

.student-module-file p {
  color: #475569;
  font-size: 0.82rem;
  font-weight: 900;
}

.student-module-file span {
  color: #64748b;
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  margin-top: 0.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-module-file a {
  margin-top: 0.8rem;
}

.student-course-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #64748b;
  font-weight: 700;
  padding: 1.4rem;
  text-align: center;
}

.student-course-summary {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1rem;
}

.student-course-stat {
  align-items: center;
  background: #ffffff;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(18, 34, 62, 0.045);
  display: flex;
  gap: 0.85rem;
  min-width: 0;
  padding: 1rem;
}

.student-course-stat > span,
.student-module-file-icon,
.student-course-empty-icon {
  align-items: center;
  background: #eef4ff;
  border: 1px solid #d8e4ff;
  border-radius: 8px;
  color: #3157d5;
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.55rem;
  justify-content: center;
  width: 2.55rem;
}

.student-course-stat svg,
.student-module-file-icon svg,
.student-course-empty-icon svg {
  fill: currentColor;
  height: 1.15rem;
  width: 1.15rem;
}

.student-course-stat div {
  min-width: 0;
}

.student-course-stat strong {
  color: #182235;
  display: block;
  font-size: 1.05rem;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-course-stat p {
  color: #3157d5;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  margin-top: 0.2rem;
  text-transform: uppercase;
}

.student-course-stat small {
  color: #526179;
  display: block;
  font-size: 0.76rem;
  font-weight: 750;
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-course-sticky-context {
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(18, 34, 62, 0.06);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.2rem;
  padding: 0.8rem 1rem;
  position: sticky;
  top: 5.25rem;
  z-index: 12;
}

.student-course-sticky-context nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-width: 0;
}

.student-course-sticky-context a,
.student-course-sticky-context strong,
.student-course-sticky-context small {
  font-size: 0.82rem;
  font-weight: 900;
}

.student-course-sticky-context a {
  color: #3157d5;
}

.student-course-sticky-context strong {
  color: #182235;
}

.student-course-sticky-context small,
.student-course-sticky-context span {
  color: #64748b;
}

.student-module-card {
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.student-module-card:hover {
  border-color: #cbd8f8;
  box-shadow: 0 16px 36px rgba(49, 87, 213, 0.075);
  transform: translateY(-1px);
}

.student-module-card-header {
  align-items: flex-start;
}

.student-module-card-header h3 {
  font-size: 1.35rem;
}

.student-module-progress {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 0.65rem;
}

.student-module-progress span {
  color: #526179;
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: none;
}

.student-module-progress-ring {
  align-items: center;
  background:
    radial-gradient(circle at center, #ffffff 58%, transparent 59%),
    conic-gradient(#3157d5 var(--progress), #e7edf7 0);
  border-radius: 999px;
  display: inline-flex;
  height: 3.15rem;
  justify-content: center;
  width: 3.15rem;
}

.student-module-progress-ring strong {
  color: #182235;
  font-size: 0.72rem;
  font-weight: 950;
}

.student-module-tabs {
  background: #f3f6fb;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0.95rem;
  padding: 0.35rem;
}

.student-module-tabs a,
.student-module-tabs span {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  display: flex;
  font-size: 0.86rem;
  font-weight: 900;
  justify-content: center;
  min-height: 2.65rem;
  padding: 0.65rem;
  text-align: center;
}

.student-module-tabs a {
  background: #3157d5;
  border-color: #3157d5;
  box-shadow: 0 8px 18px rgba(49, 87, 213, 0.2);
  color: #ffffff;
}

.student-module-tabs a:hover {
  background: #2748b8;
  border-color: #2748b8;
  color: #ffffff;
}

.student-module-tabs a.is-active {
  background: #3157d5;
  box-shadow: 0 8px 18px rgba(49, 87, 213, 0.2);
  color: #ffffff;
}

.student-module-tabs span.is-locked {
  background: #eef2f7;
  border-color: #dbe5f0;
  color: #708097;
  cursor: not-allowed;
}

.student-module-lock-note {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #526179;
  font-size: 0.82rem;
  font-weight: 800;
  margin-top: 0.75rem;
  padding: 0.7rem 0.85rem;
}

.student-module-file {
  align-items: flex-start;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 8.7rem;
}

.student-module-file p,
.student-module-file span,
.student-module-file a {
  grid-column: 2;
}

.student-module-file p {
  color: #26344d;
}

.student-module-file span {
  color: #526179;
}

.student-module-file.is-empty {
  background: #fbfdff;
  border-color: #dbe5f0;
  border-style: dashed;
}

.student-module-file.is-empty .student-module-file-icon {
  background: #f6f8fc;
  border-color: #e2e8f0;
  color: #8190a8;
}

.student-module-file.is-empty span {
  color: #6b7890;
  font-weight: 800;
}

.student-module-file.has-file {
  border-color: #d8e4ff;
}

.student-module-file.has-file a {
  align-self: end;
  justify-self: start;
}

.student-course-empty {
  align-items: center;
  background: #fbfdff;
  border-color: #dbe5f0;
  color: #526179;
  display: grid;
  gap: 0.45rem;
  justify-items: center;
}

.student-course-empty strong {
  color: #26344d;
  font-size: 1rem;
  font-weight: 950;
}

.student-course-empty span:not(.student-course-empty-icon) {
  color: #6b7890;
  font-size: 0.88rem;
}

.student-course-link:focus-visible,
.student-course-selected-head a:focus-visible,
.student-course-detail.is-link:focus-visible,
.student-module-tabs a:focus-visible,
.student-module-file a:focus-visible,
.student-course-sticky-context a:focus-visible,
.console-nav-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(49, 87, 213, 0.24);
  outline: 2px solid #3157d5;
  outline-offset: 2px;
}

body.console-body:not([data-role="public"]) .console-nav-link.is-active {
  box-shadow: 0 10px 24px rgba(49, 87, 213, 0.32), inset 3px 0 0 #dbeafe;
}

@media (max-width: 1180px) {
  .student-course-layout {
    grid-template-columns: 1fr;
  }

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

  .student-module-files,
  .student-module-actions,
  .student-module-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .student-course-hero,
  .student-course-selected-head,
  .student-module-card-header,
  .student-course-sticky-context {
    align-items: stretch;
    flex-direction: column;
  }

  .student-course-summary,
  .student-course-detail-grid,
  .student-module-files,
  .student-module-tabs {
    grid-template-columns: 1fr;
  }

  .student-course-sticky-context {
    top: 4.95rem;
  }

  .student-module-progress {
    justify-content: space-between;
  }
}

body.console-body:not([data-role="public"]) .console-form-panel {
  overflow: hidden;
  padding: 1.6rem;
  position: relative;
}

body.console-body:not([data-role="public"]) .console-form-panel::before {
  background: linear-gradient(90deg, var(--admin-primary), var(--admin-cyan));
  content: "";
  height: 3px;
  inset: 0 0 auto;
  position: absolute;
}

body.console-body:not([data-role="public"]) .console-table-panel {
  overflow: hidden;
  padding: 0;
}

body.console-body:not([data-role="public"]) .console-panel-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

body.console-body:not([data-role="public"]) .console-table-panel > .console-panel-heading {
  border-bottom: 1px solid var(--admin-line);
  padding: 1.25rem 1.5rem;
}

.admin-course-hero {
  background:
    linear-gradient(135deg, rgba(49, 87, 213, 0.09), transparent 52%),
    #ffffff;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(18, 34, 62, 0.055);
  overflow: hidden;
  padding: 1.65rem 2rem;
  position: relative;
}

.admin-course-hero::before {
  background: #3157d5;
  content: "";
  height: 4px;
  inset: 0 0 auto;
  position: absolute;
}

.admin-course-hero p,
.admin-course-panel-title p,
.admin-course-selected-head p,
.admin-course-dialog-head p {
  color: #3157d5;
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-course-hero h1 {
  color: #182235;
  font-size: 2.15rem;
  font-weight: 950;
  line-height: 1.1;
  margin-top: 0.45rem;
}

.admin-course-hero span,
.admin-course-selected-head span,
.admin-course-dialog-head span {
  color: #526179;
  display: block;
  margin-top: 0.45rem;
}

.admin-course-summary {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1rem;
}

.admin-course-stat,
.admin-course-panel {
  background: #ffffff;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(18, 34, 62, 0.05);
}

.admin-course-stat {
  align-items: center;
  display: flex;
  gap: 0.85rem;
  min-width: 0;
  padding: 1rem;
}

.admin-course-stat > span,
.admin-course-file-card > span,
.admin-course-empty > svg {
  align-items: center;
  background: #eef4ff;
  border: 1px solid #d8e4ff;
  border-radius: 8px;
  color: #3157d5;
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.55rem;
  justify-content: center;
  width: 2.55rem;
}

.admin-course-stat svg,
.admin-course-file-card svg,
.admin-course-empty svg {
  fill: currentColor;
  height: 1.12rem;
  width: 1.12rem;
}

.admin-course-stat div {
  min-width: 0;
}

.admin-course-stat strong {
  color: #182235;
  display: block;
  font-size: 1.02rem;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-course-stat p {
  color: #3157d5;
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  margin-top: 0.2rem;
  text-transform: uppercase;
}

.admin-course-stat small {
  color: #526179;
  display: block;
  font-size: 0.76rem;
  font-weight: 750;
  margin-top: 0.16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-course-layout {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(20rem, 0.82fr) minmax(30rem, 1.18fr);
  margin-top: 1.5rem;
}

.admin-course-panel {
  padding: 1.55rem;
}

.admin-course-panel-title,
.admin-course-selected-head,
.admin-course-module-head,
.admin-course-dialog-head {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.admin-course-panel-title h2,
.admin-course-selected-head h2,
.admin-course-modules h2 {
  color: #182235;
  font-size: 1.45rem;
  font-weight: 950;
  line-height: 1.15;
  margin-top: 0.25rem;
}

.admin-course-panel-title > span {
  color: #526179;
  font-size: 0.78rem;
  font-weight: 850;
}

.admin-course-form,
.admin-course-assign-card,
.admin-course-module-form {
  display: grid;
  gap: 1rem;
  margin-top: 1.1rem;
}

.admin-course-form label,
.admin-course-assign-card label,
.admin-course-module-form label,
.admin-course-dialog label,
.admin-course-assign-card fieldset {
  color: #344158;
  display: grid;
  font-size: 0.82rem;
  font-weight: 850;
  gap: 0.45rem;
}

.admin-course-form input,
.admin-course-assign-card input,
.admin-course-assign-card select,
.admin-course-module-form input,
.admin-course-dialog input {
  background: #fbfcff;
  border: 1px solid #ccd6e5;
  border-radius: 7px;
  color: #172033;
  min-height: 3.1rem;
  padding: 0.75rem 0.85rem;
  width: 100%;
}

.admin-course-form input[type="file"],
.admin-course-module-form input[type="file"],
.admin-course-dialog input[type="file"] {
  padding: 0.58rem;
}

.admin-course-primary-button,
.admin-course-dark-button,
.admin-course-selected-head a,
.admin-course-file-card a,
.admin-course-module-head button,
.admin-course-dialog-actions button {
  align-items: center;
  border-radius: 7px;
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 900;
  justify-content: center;
  min-height: 2.85rem;
  padding: 0.7rem 1rem;
}

.admin-course-primary-button {
  background: #3157d5;
  box-shadow: 0 10px 22px rgba(49, 87, 213, 0.22);
  color: #ffffff;
  justify-self: start;
}

.admin-course-dark-button {
  background: #0f172a;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
  color: #ffffff;
  justify-self: start;
  margin-top: 0.35rem;
}

.admin-course-primary-button:hover,
.admin-course-dark-button:hover,
.admin-course-selected-head a:hover,
.admin-course-file-card a:hover,
.admin-course-module-head button:hover {
  transform: translateY(-1px);
}

.admin-course-list-block {
  margin-top: 1.8rem;
}

.admin-course-list,
.admin-course-module-list {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}

.admin-course-list-item {
  background: #ffffff;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  display: block;
  padding: 1rem;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.admin-course-list-item:hover {
  border-color: #3157d5;
  box-shadow: 0 10px 22px rgba(49, 87, 213, 0.1);
  transform: translateY(-1px);
}

.admin-course-list-item.is-active {
  background: #f2f6ff;
  border-color: #3157d5;
  box-shadow: inset 4px 0 0 #3157d5;
}

.admin-course-list-item strong {
  color: #182235;
  display: block;
  font-weight: 950;
}

.admin-course-list-item span {
  color: #526179;
  display: block;
  font-size: 0.86rem;
  font-weight: 750;
  margin-top: 0.35rem;
}

.admin-course-selected-head a,
.admin-course-file-card a,
.admin-course-module-head button {
  background: #eef4ff;
  border: 1px solid #d8e4ff;
  color: #3157d5;
  white-space: nowrap;
}

.admin-course-assign-card,
.admin-course-module-form {
  background: #fbfdff;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  padding: 1.15rem;
}

.admin-course-assign-card h3 {
  color: #182235;
  font-size: 1.2rem;
  font-weight: 950;
}

.admin-course-assign-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-course-trainer-list {
  background: #ffffff;
  border: 1px solid #ccd6e5;
  border-radius: 7px;
  display: grid;
  gap: 0.35rem;
  max-height: 11rem;
  overflow-y: auto;
  padding: 0.55rem;
}

.admin-course-trainer-list label {
  align-items: center;
  border-radius: 6px;
  display: flex;
  gap: 0.6rem;
  grid-template-columns: none;
  padding: 0.45rem;
}

.admin-course-trainer-list label:hover {
  background: #f3f6ff;
}

.admin-course-trainer-list input {
  min-height: auto;
  width: 1rem;
}

.admin-course-trainer-list p,
.admin-course-assign-card small {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 750;
}

.admin-course-table-wrap {
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  margin-top: 1.25rem;
  overflow-x: auto;
}

.admin-course-modules {
  margin-top: 1.5rem;
}

.admin-course-module-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-course-module-grid label:first-child {
  grid-column: span 2;
}

.admin-course-form-actions {
  display: flex;
  flex-wrap: wrap;
}

.admin-course-module-card {
  background: #ffffff;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  padding: 1rem;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.admin-course-module-card:hover {
  border-color: #cbd8f8;
  box-shadow: 0 16px 36px rgba(49, 87, 213, 0.075);
  transform: translateY(-1px);
}

.admin-course-module-head {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
}

.admin-course-module-head span {
  color: #3157d5;
  display: block;
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-course-module-head h3 {
  color: #182235;
  font-size: 1.25rem;
  font-weight: 950;
  margin-top: 0.25rem;
}

.admin-course-file-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0.85rem;
}

.admin-course-file-card {
  align-items: flex-start;
  background: #fbfdff;
  border: 1px dashed #dbe5f0;
  border-radius: 8px;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 8.4rem;
  padding: 0.9rem;
}

.admin-course-file-card > p,
.admin-course-file-card > strong,
.admin-course-file-card > small,
.admin-course-file-card > a {
  grid-column: 2;
}

.admin-course-file-card > p {
  color: #26344d;
  font-size: 0.82rem;
  font-weight: 950;
}

.admin-course-file-card > strong {
  color: #6b7890;
  font-size: 0.84rem;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-course-file-card > small {
  color: #8190a8;
  font-size: 0.76rem;
  font-weight: 750;
}

.admin-course-file-card.has-file {
  background: #ffffff;
  border-color: #d8e4ff;
  border-style: solid;
}

.admin-course-file-card.has-file > strong {
  color: #3157d5;
}

.admin-course-file-card.has-file > a {
  align-self: end;
  justify-self: start;
  min-height: 2.2rem;
  padding: 0.48rem 0.75rem;
}

.admin-course-empty {
  align-items: center;
  background: #fbfdff;
  border: 1px dashed #dbe5f0;
  border-radius: 8px;
  color: #526179;
  display: grid;
  gap: 0.45rem;
  justify-items: center;
  padding: 1.4rem;
  text-align: center;
}

.admin-course-empty strong {
  color: #26344d;
  font-weight: 950;
}

.admin-course-empty span {
  color: #6b7890;
  font-size: 0.88rem;
  font-weight: 750;
}

.admin-course-dialog {
  background: #ffffff;
  padding: 1.5rem;
}

.admin-course-dialog-head button {
  border: 1px solid #dbe5f0;
  border-radius: 7px;
  color: #526179;
  font-size: 1.5rem;
  height: 2.5rem;
  width: 2.5rem;
}

.admin-course-dialog-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.25rem;
}

.admin-course-dialog-grid label:first-child {
  grid-column: 1 / -1;
}

.admin-course-dialog-grid label span {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-course-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

.admin-course-dialog-actions button:first-child {
  background: #ffffff;
  border: 1px solid #dbe5f0;
  color: #526179;
}

.admin-course-dialog-actions button:last-child {
  background: #3157d5;
  color: #ffffff;
}

.admin-course-list-item:focus-visible,
.admin-course-primary-button:focus-visible,
.admin-course-dark-button:focus-visible,
.admin-course-selected-head a:focus-visible,
.admin-course-file-card a:focus-visible,
.admin-course-module-head button:focus-visible,
.admin-course-dialog-actions button:focus-visible {
  box-shadow: 0 0 0 3px rgba(49, 87, 213, 0.24);
  outline: 2px solid #3157d5;
  outline-offset: 2px;
}

@media (max-width: 1240px) {
  .admin-course-layout,
  .admin-course-assign-grid {
    grid-template-columns: 1fr;
  }

  .admin-course-summary,
  .admin-course-file-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 720px) {
  .admin-course-hero,
  .admin-course-panel {
    padding: 1.1rem;
  }

  .admin-course-summary,
  .admin-course-file-grid,
  .admin-course-module-grid,
  .admin-course-dialog-grid {
    grid-template-columns: 1fr;
  }

  .admin-course-module-grid label:first-child {
    grid-column: auto;
  }

  .admin-course-selected-head,
  .admin-course-module-head,
  .admin-course-dialog-head {
    align-items: stretch;
    flex-direction: column;
  }
}

body.console-body:not([data-role="public"]) .console-panel-heading h2 {
  color: #1c2940;
  font-size: 1.12rem;
  font-weight: 750;
  letter-spacing: 0;
  margin: 0.25rem 0 0;
}

body.console-body:not([data-role="public"]) .console-record-count {
  background: var(--admin-primary-soft);
  border: 1px solid #d7dfff;
  border-radius: 999px;
  color: #465eb8;
  font-size: 0.7rem;
  font-weight: 750;
  padding: 0.35rem 0.65rem;
}

body.console-body:not([data-role="public"]) .console-content label {
  color: #344158;
  font-size: 0.82rem;
  font-weight: 700;
}

body.console-body:not([data-role="public"]) .console-content input,
body.console-body:not([data-role="public"]) .console-content select,
body.console-body:not([data-role="public"]) .console-content textarea {
  background: #fbfcff;
  border-color: #ccd6e5;
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(18, 34, 62, 0.025);
  color: #172033;
  min-height: 3.15rem;
}

body.console-body:not([data-role="public"]) .console-content textarea {
  min-height: 4.8rem;
}

body.console-body:not([data-role="public"]) .console-content input:hover,
body.console-body:not([data-role="public"]) .console-content select:hover,
body.console-body:not([data-role="public"]) .console-content textarea:hover {
  border-color: #aebdd2;
}

body.console-body:not([data-role="public"]) .console-content input:focus,
body.console-body:not([data-role="public"]) .console-content select:focus,
body.console-body:not([data-role="public"]) .console-content textarea:focus {
  background: #ffffff;
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 4px rgba(49, 87, 213, 0.12);
}

body.console-body:not([data-role="public"]) .console-content button,
body.console-body:not([data-role="public"]) .console-content a[class*="rounded"] {
  border-radius: 7px;
}

body.console-body:not([data-role="public"]) .console-content button[class*="bg-teal"],
body.console-body:not([data-role="public"]) .console-content a[class*="bg-teal"] {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
  box-shadow: 0 8px 18px rgba(49, 87, 213, 0.2);
  color: #ffffff;
}

body.console-body:not([data-role="public"]) .console-content button[class*="bg-teal"]:hover,
body.console-body:not([data-role="public"]) .console-content a[class*="bg-teal"]:hover {
  background: var(--admin-primary-dark);
  border-color: var(--admin-primary-dark);
  box-shadow: 0 11px 22px rgba(49, 87, 213, 0.25);
  transform: translateY(-1px);
}

body.console-body:not([data-role="public"]) .console-content table {
  border-collapse: separate;
  border-spacing: 0;
}

body.console-body:not([data-role="public"]) .console-content th {
  background: #edf2ff;
  border-bottom: 1px solid #d8e1f2;
  color: #3f56a6;
  font-size: 0.68rem;
  letter-spacing: 0.075em;
  padding: 0.9rem 1rem;
  position: static;
}

body.console-body:not([data-role="public"]) .console-content td {
  border-color: #e5eaf2;
  color: #3b485e;
  padding: 0.95rem 1rem;
}

body.console-body:not([data-role="public"]) .console-content tbody tr:nth-child(even) {
  background: #fafbfe;
}

body.console-body:not([data-role="public"]) .console-content tbody tr:hover {
  background: #f3f6ff;
}

body.console-body:not([data-role="public"]) .console-content td a,
body.console-body:not([data-role="public"]) .console-content td button {
  align-items: center;
  box-shadow: none;
  display: inline-flex;
  justify-content: center;
  min-height: 2.15rem;
}

body.console-body:not([data-role="public"]) .console-content td a[class*="bg-sky"] {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

body.console-body:not([data-role="public"]) .console-content td a[class*="bg-teal"] {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4055b5;
}

body.console-body:not([data-role="public"]) .console-content td a[class*="bg-amber"] {
  background: #fff8e8;
  border-color: #f8d98b;
  color: #a05b09;
}

body.console-body:not([data-role="public"]) .console-content td button[class*="bg-red"] {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}

body.console-body:not([data-role="public"]) .console-content td a:hover,
body.console-body:not([data-role="public"]) .console-content td button:hover {
  box-shadow: 0 6px 14px rgba(18, 34, 62, 0.09);
  filter: saturate(1.08);
  transform: translateY(-1px);
}

body.console-body:not([data-role="public"]) .console-content > * {
  animation: adminContentIn 380ms ease both;
}

body.console-body:not([data-role="public"]) .console-content > *:nth-child(2) {
  animation-delay: 45ms;
}

body.console-body:not([data-role="public"]) .console-content > *:nth-child(3) {
  animation-delay: 90ms;
}

.admin-modal-page {
  background: #f4f7fb;
  color: #172033;
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  margin: 0;
  min-height: 100vh;
  padding: 1.75rem;
}

.admin-modal-form,
.admin-modal-card {
  background: #ffffff;
  border: 1px solid #dde4ef;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(18, 34, 62, 0.07);
  padding: 1.6rem;
  position: relative;
}

.admin-modal-form::before,
.admin-modal-card::before {
  background: #3157d5;
  content: "";
  height: 3px;
  inset: 0 0 auto;
  position: absolute;
}

.admin-modal-form label {
  color: #344158;
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-modal-form input,
.admin-modal-form textarea,
.admin-modal-form select {
  background: #fbfcff;
  border-color: #ccd6e5;
  border-radius: 7px;
  min-height: 3.1rem;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.admin-modal-form textarea {
  min-height: 5rem;
}

.admin-modal-form input:focus,
.admin-modal-form textarea:focus,
.admin-modal-form select:focus {
  border-color: #3157d5;
  box-shadow: 0 0 0 4px rgba(49, 87, 213, 0.12);
}

.admin-modal-form button[class*="bg-teal"] {
  background: #3157d5;
  border-radius: 7px;
  box-shadow: 0 8px 18px rgba(49, 87, 213, 0.2);
}

.admin-modal-card .text-teal-700 {
  color: #4058b6;
}

#adminActionDialog {
  background: #ffffff;
  border: 1px solid #dce3ee;
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(12, 24, 48, 0.3);
  max-width: calc(100vw - 2rem);
  overflow: hidden;
  width: min(980px, calc(100vw - 2rem));
}

#adminActionDialog::backdrop {
  background: rgba(12, 24, 48, 0.66);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

#adminActionDialog > div:first-child {
  background: #f8faff;
  border-color: #dde4ef;
  min-height: 4.25rem;
}

#adminActionDialog [data-admin-action-title] {
  align-items: center;
  color: #1c2940;
  display: flex;
  gap: 0.65rem;
}

#adminActionDialog [data-admin-action-title]::before {
  background: #3157d5;
  border-radius: 999px;
  content: "";
  height: 0.55rem;
  width: 0.55rem;
}

#adminActionDialog [data-admin-action-close] {
  background: #ffffff;
  border-color: #d5deeb;
  border-radius: 7px;
  color: #47566d;
}

.attendance-detail-dialog {
  background: transparent;
  border: 0;
  color: #111827;
  max-width: calc(100vw - 2rem);
  padding: 0;
  width: min(480px, calc(100vw - 2rem));
}

.attendance-detail-dialog::backdrop {
  background: rgba(15, 23, 42, 0.58);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.attendance-detail-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
  overflow: hidden;
}

.attendance-detail-header {
  align-items: flex-start;
  border-bottom: 1px solid #e5eaf1;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.25rem 1.25rem 1rem;
}

.attendance-detail-title p {
  color: #047857;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0 0 0.6rem;
  text-transform: uppercase;
}

.attendance-detail-title h2 {
  color: #0f172a;
  font-size: 1.15rem;
  font-weight: 850;
  line-height: 1.2;
  margin: 0;
}

.attendance-detail-title span {
  color: #64748b;
  display: block;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.35;
  margin-top: 0.45rem;
}

.attendance-detail-close {
  align-items: center;
  background: #ffffff;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.35rem;
  font-weight: 500;
  height: 2.25rem;
  justify-content: center;
  line-height: 1;
  width: 2.25rem;
}

.attendance-detail-close:hover {
  background: #f8fafc;
  color: #0f172a;
}

.attendance-detail-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0.35rem 1.25rem 1.25rem;
}

.attendance-detail-row {
  align-items: start;
  border-bottom: 1px solid #eef2f7;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1fr);
  padding: 0.95rem 0;
}

.attendance-detail-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.attendance-detail-row dt {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.4;
}

.attendance-detail-row dd {
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 750;
  line-height: 1.45;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.attendance-detail-row-wide dd {
  white-space: pre-wrap;
}

.futoskillz-swal-popup {
  border-radius: 10px;
  color: #0f172a;
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

.futoskillz-swal-confirm,
.futoskillz-swal-cancel {
  border-radius: 8px !important;
  font-weight: 800 !important;
}

.sweet-fallback-dialog {
  background: transparent;
  border: 0;
  max-width: calc(100vw - 2rem);
  padding: 0;
  width: min(420px, calc(100vw - 2rem));
}

.sweet-fallback-dialog::backdrop {
  background: rgba(15, 23, 42, 0.58);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.sweet-fallback-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
  padding: 1.5rem;
}

.sweet-fallback-card h2 {
  color: #0f172a;
  font-size: 1.25rem;
  font-weight: 850;
  margin: 0;
}

.sweet-fallback-card p {
  color: #475569;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.55;
  margin: 0.75rem 0 0;
}

.sweet-fallback-card div {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.sweet-fallback-card button {
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  padding: 0.7rem 1rem;
}

.sweet-fallback-card [data-sweet-cancel] {
  background: #64748b;
  color: #ffffff;
}

.sweet-fallback-card [data-sweet-confirm] {
  background: #047857;
  color: #ffffff;
}

.trainer-module-section-head {
  align-items: flex-end;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.trainer-module-section-head p,
.trainer-module-card-head span {
  color: #3157d5;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

.trainer-module-section-head h2 {
  color: #172033;
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.15;
  margin: 0.35rem 0 0;
}

.trainer-module-section-head > span {
  background: #eef2ff;
  border: 1px solid #d7dfff;
  border-radius: 999px;
  color: #4058b6;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.45rem 0.75rem;
}

.trainer-module-create-shell {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.trainer-module-title-field {
  color: #334155;
  display: grid;
  font-size: 0.84rem;
  font-weight: 850;
  gap: 0.45rem;
}

.trainer-module-title-field input {
  background: #fbfcff;
  border: 1px solid #ccd6e5;
  border-radius: 8px;
  color: #172033;
  font-size: 0.95rem;
  font-weight: 650;
  min-height: 3rem;
  padding: 0.75rem 0.9rem;
  width: 100%;
}

.trainer-upload-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trainer-upload-zone {
  align-items: center;
  background: #fbfcff;
  border: 1px dashed #cbd6ea;
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 2.45rem minmax(0, 1fr);
  min-height: 6.25rem;
  padding: 0.95rem;
  position: relative;
}

.trainer-upload-zone:hover,
.trainer-upload-zone.is-dragging {
  background: #f4f7ff;
  border-color: #3157d5;
  box-shadow: 0 10px 24px rgba(49, 87, 213, 0.08);
}

.trainer-upload-zone input[type="file"] {
  height: 1px !important;
  inset: auto auto 0 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  width: 1px !important;
}

.trainer-upload-zone-icon {
  align-items: center;
  background: #eef2ff;
  border: 1px solid #d7dfff;
  border-radius: 8px;
  color: #3157d5;
  display: inline-flex;
  height: 2.45rem;
  justify-content: center;
  width: 2.45rem;
}

.trainer-upload-zone-icon svg {
  fill: currentColor;
  height: 1.05rem;
  width: 1.05rem;
}

.trainer-upload-zone-copy {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.trainer-upload-zone-copy strong {
  align-items: center;
  color: #1c2940;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
  font-weight: 850;
  gap: 0.45rem;
  line-height: 1.25;
}

.trainer-upload-zone-copy strong span {
  background: #f1f5f9;
  border-radius: 999px;
  color: #64748b;
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 850;
  padding: 0.25rem 0.5rem;
  text-transform: uppercase;
}

.trainer-upload-zone-copy strong span.is-required {
  background: #eef2ff;
  color: #3157d5;
}

.trainer-upload-zone-copy em {
  color: #4055b5;
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trainer-upload-zone-copy small {
  color: #718096;
  font-size: 0.75rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trainer-upload-progress {
  background: #e7ecf6;
  border-radius: 999px;
  bottom: 0.7rem;
  height: 0.28rem;
  left: 0.95rem;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  right: 0.95rem;
}

.trainer-upload-progress i {
  background: #3157d5;
  border-radius: inherit;
  display: block;
  height: 100%;
  transform: translateX(-100%);
  width: 100%;
}

.trainer-upload-zone.is-selected .trainer-upload-progress {
  opacity: 1;
}

.trainer-upload-zone.is-selected .trainer-upload-progress i {
  animation: trainerUploadReady 900ms ease forwards;
}

.trainer-module-save-button {
  background: #3157d5;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(49, 87, 213, 0.22);
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 850;
  margin-top: 1rem;
  min-height: 2.9rem;
  padding: 0.75rem 1.1rem;
}

.trainer-module-save-button:hover {
  background: #2547bd;
  transform: translateY(-1px);
}

.trainer-module-list {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

.trainer-module-card {
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  border: 1px solid #d8e1f2;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(18, 34, 62, 0.055);
  overflow: hidden;
  padding: 1.35rem;
  position: relative;
}

body.console-body:not([data-role="public"]) .console-content .trainer-module-card:hover {
  border-color: #cbd6ea;
  box-shadow: 0 14px 30px rgba(18, 34, 62, 0.07);
}

.trainer-module-card::before {
  background: #3157d5;
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: 4px;
}

.trainer-module-card-head {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.trainer-module-card-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.trainer-module-completion {
  background: #f8faff;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  display: grid;
  gap: 0.2rem;
  min-width: 8rem;
  padding: 0.65rem 0.75rem;
}

.trainer-module-completion strong {
  color: #172033;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
}

.trainer-module-completion span {
  color: #718096;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.trainer-module-completion i {
  background: #e7ecf6;
  border-radius: 999px;
  display: block;
  height: 0.28rem;
  margin-top: 0.25rem;
  overflow: hidden;
}

.trainer-module-completion b {
  background: #3157d5;
  border-radius: inherit;
  display: block;
  height: 100%;
  width: var(--complete);
}

.trainer-module-card-head h3 {
  color: #172033;
  font-size: 1.08rem;
  font-weight: 850;
  line-height: 1.25;
  margin: 0.4rem 0 0;
  overflow-wrap: anywhere;
}

.trainer-module-edit-button {
  background: #3157d5;
  border: 1px solid #3157d5;
  border-radius: 7px;
  box-shadow: 0 10px 22px rgba(49, 87, 213, 0.22);
  color: #ffffff;
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 850;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  position: relative;
  z-index: 1;
}

.trainer-module-edit-button:hover {
  background: #2547bd;
  border-color: #2547bd;
  transform: translateY(-1px);
}

.trainer-module-file-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.15rem;
}

.trainer-module-file {
  align-items: start;
  background: #f7f9fd;
  border: 1px solid #e0e7f2;
  border-radius: 8px;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  min-height: 5.8rem;
  padding: 0.95rem;
  position: relative;
}

.trainer-module-file.has-file {
  background: #ffffff;
  border-color: #bfd0ee;
  box-shadow: 0 8px 20px rgba(49, 87, 213, 0.055);
}

.trainer-module-file-icon {
  align-items: center;
  background: #eef2ff;
  border: 1px solid #d7dfff;
  border-radius: 8px;
  color: #3157d5;
  display: inline-flex;
  height: 2.2rem;
  justify-content: center;
  width: 2.2rem;
}

.trainer-module-file.has-file .trainer-module-file-icon {
  background: #3157d5;
  border-color: #3157d5;
  color: #ffffff;
}

.trainer-module-file-icon svg {
  fill: currentColor;
  height: 1rem;
  width: 1rem;
}

.trainer-module-file p {
  color: #64748b;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.78rem;
  font-weight: 850;
  gap: 0.4rem;
  margin: 0;
}

.trainer-file-requirement {
  background: #f1f5f9;
  border-radius: 999px;
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 850;
  padding: 0.22rem 0.45rem;
  text-transform: uppercase;
}

.trainer-file-requirement.is-required {
  background: #eef2ff;
  color: #3157d5;
}

.trainer-module-file strong {
  color: #172033;
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.35;
  margin-top: 0.25rem;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.trainer-module-file.is-empty strong {
  color: #94a3b8;
}

.trainer-module-file small {
  color: #718096;
  display: block;
  font-size: 0.72rem;
  font-weight: 750;
  margin-top: 0.3rem;
}

.trainer-file-status {
  align-self: start;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 900;
  padding: 0.32rem 0.55rem;
  text-transform: uppercase;
}

.trainer-file-status.is-uploaded {
  background: #dcfce7;
  color: #15803d;
}

.trainer-file-status.is-pending {
  background: #f1f5f9;
  color: #718096;
}

.trainer-file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  grid-column: 2 / 4;
  margin-top: 0.25rem;
}

.trainer-file-actions form {
  margin: 0;
}

.trainer-file-actions a,
.trainer-file-actions button {
  align-items: center;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 7px;
  color: #4055b5;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 850;
  justify-content: center;
  min-height: 2.15rem;
  padding: 0.45rem 0.75rem;
}

.trainer-file-actions a:hover,
.trainer-file-actions button:hover {
  background: #3157d5;
  border-color: #3157d5;
  color: #ffffff;
}

.trainer-file-actions .is-danger {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}

.trainer-file-actions .is-danger:hover {
  background: #be123c;
  border-color: #be123c;
  color: #ffffff;
}

@keyframes trainerUploadReady {
  to {
    transform: translateX(-12%);
  }
}

@keyframes adminContentIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 1024px) {
  body.console-body:not([data-role="public"]) .console-menu-btn {
    display: none;
  }
}

@media (max-width: 767px) {
  body.console-body:not([data-role="public"]) .console-sidebar {
    width: min(17.25rem, calc(100vw - 2.5rem));
  }

  body.console-body:not([data-role="public"]) .console-topbar {
    height: 4.5rem;
    padding-inline: 1rem;
  }

  body.console-body:not([data-role="public"]) .console-content {
    padding: 1rem;
  }

  body.console-body:not([data-role="public"]) .console-page-heading,
  body.console-body:not([data-role="public"]) .console-page-hero {
    align-items: flex-start;
    min-height: 0;
    padding: 1.25rem;
  }

  body.console-body:not([data-role="public"]) .console-page-metric {
    min-width: auto;
    padding-left: 1rem;
  }

  body.console-body:not([data-role="public"]) .console-form-panel {
    padding: 1.25rem;
  }

  .admin-modal-page {
    padding: 1rem;
  }

  .attendance-detail-header {
    padding: 1rem 1rem 0.85rem;
  }

  .attendance-detail-list {
    padding: 0.25rem 1rem 1rem;
  }

  .attendance-detail-row {
    gap: 0.3rem;
    grid-template-columns: 1fr;
    padding: 0.8rem 0;
  }

  .trainer-module-section-head,
  .trainer-module-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .trainer-module-card-actions {
    justify-content: stretch;
  }

  .trainer-module-completion {
    min-width: 0;
  }

  .trainer-upload-grid {
    grid-template-columns: 1fr;
  }

  .trainer-module-file-grid {
    grid-template-columns: 1fr;
  }

  .trainer-module-edit-button,
  .trainer-module-save-button {
    width: 100%;
  }

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

  .trainer-file-actions a,
  .trainer-file-actions button,
  .trainer-file-actions form {
    width: 100%;
  }
}

@media (max-width: 640px) {
  body.console-body:not([data-role="public"]) {
    font-size: 14px;
  }

  body.console-body:not([data-role="public"]) .console-brand {
    min-height: 4.75rem;
    padding-inline: 1rem;
  }

  body.console-body:not([data-role="public"]) .console-logo {
    height: 3.25rem;
    width: 3.25rem;
  }

  body.console-body:not([data-role="public"]) .console-nav {
    padding: 0.8rem;
  }

  body.console-body:not([data-role="public"]) .console-nav-link {
    min-height: 2.85rem;
    padding: 0.7rem 0.85rem;
  }

  body.console-body:not([data-role="public"]) .console-profile {
    margin: 0.8rem;
    padding: 0.85rem;
  }

  body.console-body:not([data-role="public"]) .console-topbar {
    align-items: center;
    gap: 0.75rem;
    height: auto;
    min-height: 4.25rem;
    padding: 0.75rem 0.9rem;
    position: sticky;
  }

  body.console-body:not([data-role="public"]) .console-topbar > div:first-child {
    min-width: 0;
  }

  body.console-body:not([data-role="public"]) .console-topbar p {
    max-width: 52vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.console-body:not([data-role="public"]) .console-role-badge,
  body.console-body:not([data-role="public"]) .console-header-stats {
    display: none !important;
  }

  body.console-body:not([data-role="public"]) .console-logout {
    padding: 0.65rem 0.85rem;
  }

  body.console-body:not([data-role="public"]) .console-content {
    padding: 0.85rem;
  }

  body.console-body:not([data-role="public"]) .console-content h1 {
    font-size: 1.8rem;
  }

  body.console-body:not([data-role="public"]) .console-content h2 {
    font-size: 1.3rem;
  }

  body.console-body:not([data-role="public"]) .console-content > div:first-child,
  body.console-body:not([data-role="public"]) .console-content > section,
  body.console-body:not([data-role="public"]) .console-content article,
  body.console-body:not([data-role="public"]) .console-form-panel,
  body.console-body:not([data-role="public"]) .console-table-panel {
    border-radius: 8px;
  }

  body.console-body:not([data-role="public"]) .console-content > section,
  body.console-body:not([data-role="public"]) .console-table-panel,
  body.console-body:not([data-role="public"]) .console-form-panel {
    padding: 1rem;
  }

  body.console-body:not([data-role="public"]) .console-content input,
  body.console-body:not([data-role="public"]) .console-content select,
  body.console-body:not([data-role="public"]) .console-content textarea,
  body.console-body:not([data-role="public"]) .console-content button,
  body.console-body:not([data-role="public"]) .console-content a[class*="rounded"] {
    min-height: 2.75rem;
  }

  body.console-body:not([data-role="public"]) .console-content .overflow-x-auto {
    margin-inline: -0.25rem;
    max-width: calc(100vw - 1.2rem);
  }

  body.console-body:not([data-role="public"]) .console-content table {
    min-width: 44rem;
  }

  body.console-body:not([data-role="public"]) .console-content th,
  body.console-body:not([data-role="public"]) .console-content td {
    padding: 0.65rem;
  }

  .student-course-hero {
    padding: 1.1rem;
  }

  .student-course-hero h1 {
    font-size: 1.65rem;
  }

  .student-course-hero strong {
    align-self: flex-start;
  }

  .student-course-panel-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .student-course-detail-grid,
  .student-module-files {
    grid-template-columns: 1fr;
  }

  .student-module-card {
    padding: 0.85rem;
  }

  .student-module-card-header {
    padding: 0.9rem;
  }

  .student-module-card-header a,
  .student-module-file a {
    justify-content: center;
    width: 100%;
  }

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

  .student-attendance-calendar {
    grid-template-columns: repeat(7, minmax(7rem, 1fr));
    min-width: 50rem;
  }

  .student-attendance-calendar-wrap::after {
    color: #64748b;
    content: "Swipe sideways to view all days";
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    margin-top: 0.5rem;
  }

  .practice-hero,
  .practice-board,
  .practice-panel {
    border-radius: 8px;
  }

  .practice-hero {
    padding: 1.2rem;
  }

  .practice-stats-strip {
    grid-template-columns: 1fr;
    width: 100%;
  }

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

  .practice-card-grid {
    grid-template-columns: 1fr;
  }

  .practice-workspace {
    gap: 0.85rem;
  }

  .practice-panel-header {
    padding: 0.9rem;
  }

  .practice-question-nav {
    justify-content: space-between;
    width: 100%;
  }

  .practice-question-scroll {
    max-height: none;
    padding: 0.85rem;
  }

  .practice-problem-card {
    border-radius: 8px;
    padding: 1rem;
  }

  .practice-problem-card h3 {
    font-size: 1.25rem;
    overflow-wrap: anywhere;
  }

  .practice-code-editor {
    font-size: 0.85rem;
    height: 18rem;
    min-height: 16rem;
    padding: 0.9rem;
  }

  .practice-output-box {
    font-size: 0.82rem;
    min-height: 9rem;
    padding: 0.9rem;
  }

  .practice-submit-footer {
    padding: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.console-body:not([data-role="public"]) *,
  body.console-body:not([data-role="public"]) *::before,
  body.console-body:not([data-role="public"]) *::after,
  .admin-modal-page *,
  .admin-modal-page *::before,
  .admin-modal-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}