@import url("./tokens.css");

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, h3, h4,
.site-brand-copy strong,
.admin-sidebar h2,
.hero-greeting,
.auth-card h1 {
  font-family: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
}

:root[data-theme="dark"] body {
  background: var(--bg);
}

button, input, textarea, select { font: inherit; }
a { color: var(--primary); }
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid rgba(201, 165, 91, 0.28);
  background: var(--header-bg);
  backdrop-filter: blur(16px);
}

.site-brand,
.site-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-brand { font-weight: 850; }

.site-brand-symbol {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(234, 199, 139, .48);
  border-radius: var(--radius);
  background: var(--primary);
  color: white;
  font-size: 12px;
  letter-spacing: .08em;
  box-shadow: 0 8px 22px rgba(0,54,91,.16);
}

.site-brand-symbol img,
.brand-mark img,
.admin-sidebar-symbol img,
.brand-preview-symbol img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-brand-symbol img,
.brand-mark img,
.admin-sidebar-symbol img {
  padding: 5px;
}

:root[data-theme="dark"] .site-brand-symbol.has-brand-logo,
:root[data-theme="dark"] .brand-mark.has-brand-logo,
:root[data-theme="dark"] .admin-sidebar-symbol.has-brand-logo,
:root[data-theme="dark"] .brand-preview-symbol.has-brand-logo {
  border-color: rgba(255, 248, 228, .42);
  background: #00365b;
  color: #fff8e4;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

.site-brand-copy {
  display: grid;
  gap: 1px;
  line-height: 1.1;
}

.site-brand-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.header-user {
  appearance: none;
  display: inline-grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
}

.header-user:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 50%;
}

.header-avatar {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-soft));
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

img.header-avatar {
  object-fit: cover;
}

.admin-identity {
  appearance: none;
  max-width: min(34vw, 320px);
  min-height: 40px;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-identity:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.theme-toggle {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--primary);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform .15s, background .2s, color .2s;
}

.theme-toggle:hover {
  transform: translateY(-1px);
  background: var(--surface-soft);
}

.theme-toggle-icon {
  font-size: 18px;
  line-height: 1;
}

.mobile-menu-button {
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
  gap: 4px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--primary);
  cursor: pointer;
}

.mobile-menu-button span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: var(--radius);
  background: currentColor;
}

.mobile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 16px;
  display: grid;
  min-width: 190px;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.mobile-menu button {
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-weight: 800;
}

.mobile-menu button:hover {
  background: var(--surface-soft);
  color: var(--primary);
}

.page-shell {
  width: min(calc(100% - 34px), var(--max));
  min-height: calc(100vh - 68px);
  margin: 0 auto;
  padding: 30px 0 64px;
}

#adminApp.page-shell {
  width: min(calc(100% - 32px), 1800px);
  max-width: none;
  padding-top: clamp(16px, 1.4vw, 28px);
}

.auth-shell {
  display: grid;
  min-height: calc(100vh - 150px);
  place-items: center;
}

.auth-card {
  position: relative;
  width: min(100%, 560px);
  padding: 36px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.auth-card-modern {
  display: grid;
  gap: 20px;
}

.auth-card-accent {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.auth-card-accent img,
.auth-feature-list img,
.insight-card img,
.admin-sidebar-heading img,
.admin-nav img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.auth-brand-row {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  gap: 18px;
  align-items: center;
}

.auth-brand-row .brand-mark {
  margin-bottom: 0;
}

.auth-card h1 {
  margin-bottom: 8px;
  font-size: clamp(28px, 3vw, 40px);
}

.auth-card .admin-login-title {
  font-size: clamp(24px, 2.2vw, 31px);
  line-height: 1.18;
}

.brand-mark {
  display: grid;
  width: 64px;
  height: 64px;
  margin-bottom: 25px;
  place-items: center;
  border: 1px solid rgba(234, 199, 139, .5);
  border-radius: var(--radius);
  background: var(--primary);
  color: white;
  font-weight: 900;
  letter-spacing: .06em;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1, h2, h3, h4 {
  margin-top: 0;
  line-height: 1.18;
}

h1 {
  margin-bottom: 15px;
  font-size: clamp(30px, 4vw, 52px);
  letter-spacing: 0;
}

h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: 0;
}

h3 { font-size: 20px; }

.auth-description {
  margin: 0;
  color: var(--muted);
}

.auth-feature-list {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}

.auth-feature-list span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.form-stack {
  display: grid;
  gap: 18px;
}

.form-stack label {
  display: grid;
  gap: 7px;
}

.form-stack label > span {
  font-size: 14px;
  font-weight: 750;
}

input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  outline: none;
  background: var(--input-bg);
  color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}

input, select {
  min-height: 48px;
  padding: 0 14px;
}

textarea {
  min-height: 120px;
  padding: 13px 14px;
  resize: vertical;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(0,54,91,.12);
}

input[type="search"] {
  min-height: 42px;
}

.button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
  transition: transform .15s, background .2s, opacity .2s;
}

.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; opacity: .58; }
.button-primary { background: var(--primary); color: #fff8e4; }
:root[data-theme="dark"] .button-primary { color: #082033; }
.button-primary:hover:not(:disabled) { background: var(--primary-dark); }
.button-secondary { border: 1px solid var(--accent); background: transparent; color: var(--primary); }
.button-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent-soft) 22%, transparent); }
.button-light { border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.12); color: white; }
.button-light:hover:not(:disabled) { background: rgba(255,255,255,.2); }
.button-disabled { background: #e7dfce; color: #7c7468; }
:root[data-theme="dark"] .button-disabled { background: #203649; color: #8fa8b8; }
.button-danger {
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line));
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  color: var(--danger);
}
.button-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 18%, var(--surface));
}
.button-block { width: 100%; }
.button-small { min-height: 38px; padding: 0 14px; font-size: 13px; }

.text-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  cursor: pointer;
  font-weight: 800;
}

.form-message {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: var(--radius);
}

.form-message .text-button {
  margin-top: 8px;
}

.form-message-error { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }

.login-recovery-link {
  justify-self: center;
  margin-top: -2px;
}

.student-app-shell {
  display: grid;
  grid-template-columns: var(--student-sidebar-width) minmax(0, 1fr);
  min-height: calc(100vh - 98px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.student-sidebar {
  position: sticky;
  top: 84px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  height: calc(100vh - 110px);
  min-height: 620px;
  padding: 18px 14px;
  overflow: auto;
  background: var(--primary);
  color: #fff8e4;
}

.student-sidebar-heading,
.student-sidebar-profile {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.student-sidebar-heading strong,
.student-sidebar-profile strong {
  display: block;
  overflow: hidden;
  color: #fff8e4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-sidebar-heading small,
.student-sidebar-profile small {
  display: block;
  overflow: hidden;
  color: rgba(255, 248, 228, .72);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-sidebar-symbol {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--primary);
  font-weight: 900;
}

.student-sidebar-symbol img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px;
  object-fit: contain;
}

.student-nav {
  display: grid;
  align-content: start;
  gap: 4px;
}

.student-nav p {
  margin: 8px 10px 6px;
  color: var(--accent-soft);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.student-nav a {
  position: relative;
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 11px;
  padding: 0 12px;
  border-radius: 6px;
  color: rgba(255, 248, 228, .74);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.student-nav a::before {
  position: absolute;
  inset: 8px auto 8px 0;
  width: 3px;
  border-radius: 999px;
  background: transparent;
  content: "";
}

.student-nav a:hover,
.student-nav a.is-active {
  background: rgba(201, 165, 91, .18);
  color: #fff8e4;
}

.student-nav a.is-active::before {
  background: var(--accent);
}

.student-nav img {
  width: 19px;
  height: 19px;
  object-fit: contain;
}

.student-sidebar-profile {
  padding: 12px;
  border: 1px solid rgba(234, 199, 139, .24);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}

.student-sidebar-avatar,
.topbar-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--primary);
  font-weight: 900;
  object-fit: cover;
}

.student-sidebar-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

.topbar-avatar {
  width: 34px;
  height: 34px;
}

.student-main-frame {
  min-width: 0;
  background: linear-gradient(180deg, rgba(255, 248, 228, .58), #ffffff 240px);
}

.student-topbar {
  position: sticky;
  z-index: 20;
  top: 68px;
  display: flex;
  min-height: var(--topbar-height);
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(20px, 2vw, 32px);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(12px);
}

.student-topbar h1 {
  margin: 0;
  font-size: clamp(20px, 1.8vw, 28px);
}

.breadcrumb-line {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.student-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.global-search input {
  width: clamp(240px, 24vw, 360px);
  border-color: color-mix(in srgb, var(--primary) 20%, var(--line));
  background: rgba(255, 255, 255, .92);
}

.icon-button {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--primary);
  text-decoration: none;
}

.student-page-heading,
.student-content-area {
  padding-inline: clamp(20px, 2.2vw, 32px);
}

.student-page-heading {
  padding-top: 28px;
  padding-bottom: 16px;
}

.student-page-heading h2 {
  margin-bottom: 8px;
  font-size: clamp(24px, 2.25vw, 32px);
}

.student-page-heading p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
}

.student-content-area {
  padding-bottom: 36px;
}

.dashboard-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) 280px;
  gap: 40px;
  align-items: center;
  padding: 44px;
  overflow: hidden;
  border: 1px solid rgba(234,199,139,.22);
  border-radius: var(--radius);
  background: var(--primary);
  color: white;
  box-shadow: var(--shadow);
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.dashboard-hero .eyebrow { color: var(--accent-soft); }

.hero-greeting {
  max-width: 860px;
  font-size: clamp(22px, 2.35vw, 32px);
  line-height: 1.22;
}

.dashboard-hero p:not(.eyebrow) {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--hero-text);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.hero-meta span {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.84);
  font-size: 12px;
  font-weight: 800;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.progress-summary {
  position: relative;
  z-index: 1;
  padding: 25px;
  border: 1px solid rgba(234,199,139,.38);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}

.progress-summary > strong {
  display: block;
  font-size: 44px;
  line-height: 1;
}

.progress-summary > span { color: var(--muted); }
.progress-summary .button { margin-top: 18px; }

.progress-track {
  height: 8px;
  margin-top: 17px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-strong);
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.section-heading,
.admin-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 38px 0 18px;
}

.section-heading h2,
.admin-page-heading h1 { margin-bottom: 0; }

.course-hours { color: var(--muted); font-weight: 700; }

.video-panel {
  display: grid;
  gap: 16px;
  margin: 18px 0 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.video-panel-copy {
  max-width: 720px;
}

.video-panel-copy h2 {
  margin-bottom: 8px;
  font-size: clamp(22px, 2vw, 28px);
}

.video-panel-copy p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
}

.video-frame {
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.video-frame iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.video-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.video-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.video-card-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px 16px;
}

.video-card-body h3 {
  margin-bottom: 6px;
  font-size: 18px;
}

.video-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.video-sound-button {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--primary);
  cursor: pointer;
}

.video-sound-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.video-sound-button[aria-pressed="true"] {
  background: var(--primary);
  color: var(--surface);
}

:root[data-theme="dark"] .video-sound-button[aria-pressed="true"] {
  color: #082033;
}

.video-gallery.is-empty,
.video-empty {
  min-height: 150px;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--muted);
  text-align: center;
}

.dashboard-insights,
.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 16px 0 14px;
}

.student-courses-panel {
  margin: 22px 0 6px;
}

.student-courses-panel .section-heading {
  margin-bottom: 10px;
}

.student-course-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.student-course-card {
  display: grid;
  min-width: min(330px, 84vw);
  max-width: 360px;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  scroll-snap-align: start;
}

.student-course-card.is-active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface));
}

.student-course-card h3 {
  margin: 8px 0 4px;
  font-size: 18px;
  line-height: 1.25;
}

.student-course-card p {
  margin: 0;
  color: var(--muted);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.student-course-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.student-course-card dl div {
  min-width: 0;
  padding: 8px;
  border-radius: var(--radius-small);
  background: var(--surface-soft);
}

.student-course-card dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.student-course-card dd {
  margin: 2px 0 0;
  overflow: hidden;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-course-card .button {
  min-height: 38px;
}

.profile-shell {
  display: grid;
  gap: 16px;
  max-width: 1120px;
  margin: 24px auto;
}

.profile-header-card,
.profile-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.profile-header-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 16px;
  align-items: center;
}

.profile-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 16px;
}

.profile-identity h1 {
  margin: 4px 0 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
}

.profile-identity p:not(.eyebrow) {
  margin: 2px 0 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.profile-photo-frame,
.profile-photo-preview {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-soft));
  color: var(--primary);
  font-weight: 900;
}

.profile-photo-frame {
  width: 76px;
  height: 76px;
  font-size: 24px;
}

.profile-photo-frame-large {
  width: 92px;
  height: 92px;
  font-size: 30px;
}

.profile-photo-preview {
  width: 116px;
  height: 116px;
  font-size: 34px;
}

.profile-photo-frame img,
.profile-photo-preview img,
.profile-photo-frame span,
.profile-photo-preview span {
  width: 100%;
  height: 100%;
}

.profile-photo-frame span,
.profile-photo-preview span {
  display: grid;
  place-items: center;
}

.profile-photo-frame img,
.profile-photo-preview img {
  object-fit: cover;
}

.profile-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.profile-status-grid div {
  min-width: 0;
  padding: 12px;
  border-radius: var(--radius-small);
  background: var(--surface-soft);
}

.profile-status-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.profile-status-grid strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 16px;
  align-items: start;
}

.profile-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.profile-section-heading h2 {
  margin: 3px 0 0;
  font-size: 24px;
}

.profile-photo-editor {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-small);
  background: var(--surface-soft);
}

.file-control {
  display: grid;
  gap: 7px;
  justify-items: start;
}

.file-control input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.profile-photo-button {
  min-height: 40px;
  cursor: pointer;
}

.file-control:focus-within .profile-photo-button {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.file-control small,
.profile-security-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.checkbox-line {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.checkbox-line input {
  width: 16px;
  height: 16px;
}

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

.profile-email-control {
  display: grid;
  min-width: 0;
  gap: 8px;
  align-content: start;
}

.profile-email-control > label {
  min-width: 0;
}

.profile-email-control .button {
  width: fit-content;
}

.profile-email-control small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.profile-side-column {
  display: grid;
  grid-column: 2;
  gap: 16px;
  align-content: start;
  position: sticky;
  top: 86px;
}

.profile-security {
  position: static;
}

.profile-exit {
  grid-column: auto;
}

.profile-exit p {
  margin: 0 0 16px;
  color: var(--muted);
}

.profile-exit .button {
  width: 100%;
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.insight-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.insight-card img {
  width: 34px;
  height: 34px;
  padding: 6px;
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.insight-card span,
.progress-summary > span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.insight-card strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 30px;
  line-height: 1;
}

.lesson-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.lesson-card {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}

.lesson-card.is-locked { opacity: .67; }
.lesson-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: var(--shadow);
}
.lesson-card.is-locked:hover { transform: none; box-shadow: var(--shadow-soft); }

.lesson-number {
  display: grid;
  width: 44px;
  height: 44px;
  margin: 16px 0 0 16px;
  place-items: center;
  border-radius: var(--radius);
  background: var(--primary);
  color: white;
  font-size: 20px;
  font-weight: 900;
  box-shadow: var(--shadow-soft);
}

.lesson-card-body {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 14px 16px 16px;
}

.lesson-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
}

.lesson-card h3 {
  margin: 10px 0 6px;
  font-size: 18px;
  line-height: 1.22;
}

.lesson-card p {
  color: var(--muted);
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.48;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.lesson-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.lesson-meta span {
  padding: 6px 9px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface));
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.score-line { margin: 14px 0 0; }
.lesson-card-actions { margin-top: 14px; }
.lesson-card-actions .button { width: 100%; }

.status-pill {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 9px;
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.status-available, .status-active { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); }
.status-in-progress { background: color-mix(in srgb, var(--warning) 18%, var(--surface)); color: var(--warning); }
.status-under-review { background: #eeeafa; color: #6749a0; }
.status-approved, .status-completed { background: #e3f4ea; color: var(--success); }
.status-correction-required,
.status-time-exceeded,
.status-failed,
.status-deleted,
.status-blocked { background: #ffebeb; color: var(--danger); }

.information-panel {
  margin-top: 36px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.information-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 17px;
}

.information-grid div {
  display: flex;
  gap: 10px;
  color: var(--muted);
}

.information-grid strong { color: var(--accent); }

.lesson-layout {
  display: grid;
  grid-template-columns: 285px minmax(0,1fr);
  gap: 44px;
  align-items: start;
}

.lesson-main {
  min-width: 0;
}

.lesson-sidebar {
  position: sticky;
  top: 95px;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.lesson-sidebar h2 {
  margin: 8px 0 22px;
  font-size: 23px;
}

.lesson-time-summary {
  display: grid;
  gap: 9px;
  margin: 22px 0;
}

.lesson-time-summary span {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
}

.lesson-time-summary strong { color: var(--text); }

.lesson-navigation {
  display: grid;
  gap: 5px;
  max-height: 45vh;
  overflow: auto;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.lesson-navigation a,
.lesson-navigation button {
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  text-decoration: none;
  text-align: left;
}

.lesson-navigation a:hover,
.lesson-navigation button:hover {
  background: var(--surface-soft);
  color: var(--primary);
}

.lesson-header {
  padding: 35px 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.lesson-header h1 { margin: 14px 0; }
.lesson-header p { margin-bottom: 0; color: var(--muted); }

.content-section {
  scroll-margin-top: 92px;
  margin-top: 25px;
  padding: 36px 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.content-section-label {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.rich-content { color: var(--text); }
.rich-content h4 { margin-top: 24px; }
.rich-content li + li { margin-top: 6px; }

.rich-content img,
.rich-content iframe,
.rich-content video {
  max-width: 100%;
}

.rich-content img,
.rich-content video {
  height: auto;
  border-radius: var(--radius);
}

.rich-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.rich-content pre,
.rich-content code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.formula {
  margin: 20px 0;
  padding: 17px;
  overflow-x: auto;
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface-soft);
  color: var(--text);
  text-align: center;
  font-size: 18px;
}

.callout, .example {
  margin: 20px 0;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.assessment-area { margin-top: 30px; }

.start-assessment-card,
.completion-card,
.review-card,
.submission-box,
.upload-panel {
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.start-assessment-card,
.completion-card,
.review-card { text-align: center; }

.start-assessment-card p,
.completion-card p,
.review-card p {
  max-width: 680px;
  margin-right: auto;
  margin-left: auto;
  color: var(--muted);
}

.completion-icon {
  display: grid;
  width: 68px;
  height: 68px;
  margin: 0 auto 20px;
  place-items: center;
  border-radius: var(--radius);
  background: #e3f4ea;
  color: var(--success);
  font-size: 32px;
  font-weight: 900;
}

.standalone-card { max-width: 750px; margin: 70px auto; }

.attempt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 28px 32px;
  border: 1px solid rgba(234,199,139,.22);
  border-radius: var(--radius);
  background: var(--primary);
  color: white;
}

.attempt-header h2 { margin-bottom: 0; }

.timer-card {
  min-width: 190px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.13);
  text-align: center;
}

.timer-card span {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
}

.timer-card strong {
  display: block;
  margin-top: 2px;
  font-size: 25px;
  font-variant-numeric: tabular-nums;
}

.timer-card.is-critical { background: #a83b32; }

.question-list {
  display: grid;
  gap: 20px;
}

.question-card {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.question-number, .question-points {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.question-card h3 { margin: 8px 0 5px; }

.option-list {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.option-item {
  display: grid;
  grid-template-columns: 20px 34px 1fr;
  gap: 10px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.option-item:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.option-item input {
  width: 18px;
  min-height: auto;
}

.option-label {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: var(--radius-small);
  background: var(--surface-soft);
  font-weight: 900;
}

.save-indicator {
  min-height: 20px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.upload-panel { margin-top: 22px; }

.upload-methods {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(320px,.8fr);
  gap: 18px;
  margin-top: 20px;
  align-items: stretch;
}

.upload-dropzone {
  display: grid;
  min-height: 170px;
  place-items: center;
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  background: rgba(255,248,228,.62);
  cursor: pointer;
  text-align: center;
}

.upload-dropzone:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.upload-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.upload-dropzone span,
.upload-dropzone strong,
.upload-dropzone small { display: block; }

.upload-icon { font-size: 28px; font-weight: 900; }
.upload-progress { margin: 14px 0; color: var(--primary); font-weight: 700; }

.drive-upload-form {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.drive-upload-form label {
  display: grid;
  gap: 7px;
}

.drive-upload-form label > span {
  font-size: 14px;
  font-weight: 800;
}

.field-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.uploaded-files {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.uploaded-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.uploaded-file strong,
.uploaded-file span { display: block; }

.uploaded-file span {
  color: var(--muted);
  font-size: 12px;
}

.file-actions {
  display: flex;
  gap: 10px;
}

.file-actions button {
  border: 0;
  background: none;
  color: var(--danger);
  cursor: pointer;
}

.submission-box { margin-top: 22px; }

.authorship-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.authorship-check input {
  width: 20px;
  min-height: 20px;
}

.submission-warning, .empty-note {
  color: var(--muted);
  font-size: 13px;
}

.review-score {
  color: var(--primary) !important;
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
}

.success-note {
  padding: 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--success) 14%, var(--surface));
  color: var(--success) !important;
}

.certificate-card {
  max-width: 960px;
  margin: 40px auto;
  padding: 65px;
  border: 10px double var(--line);
  background: var(--surface);
  text-align: center;
  box-shadow: var(--shadow);
}

.certificate-lead { color: var(--muted); }

.certificate-data {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
  margin: 35px 0;
}

.certificate-data div {
  padding: 18px;
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.certificate-data span,
.certificate-data strong { display: block; }

.certificate-data span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.certifications-shell,
.certificate-flow-panel,
.certificate-history-panel {
  display: grid;
  gap: 18px;
}

.certificate-admin-grid,
.certificate-student-grid {
  display: grid;
  grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr);
  gap: 18px;
  align-items: start;
}

.certificate-filter-bar {
  grid-template-columns: minmax(180px, .35fr) minmax(260px, 1fr);
}

.certificate-admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  width: min(720px, 100%);
}

.certificate-global-search {
  flex: 1 1 320px;
  min-width: min(100%, 280px);
}

.certificate-register-panel,
.certificate-requests-panel {
  margin-bottom: 18px;
}

.certificate-record-table {
  display: grid;
  gap: 0;
  overflow-x: auto;
}

.certificate-record-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.05fr) minmax(160px, 1fr) minmax(210px, 1.25fr) minmax(90px, .55fr) minmax(135px, .8fr) minmax(130px, .75fr) minmax(360px, 1.45fr);
  gap: 14px;
  align-items: center;
  min-width: 1120px;
  padding: 14px 10px;
  border-bottom: 1px solid var(--line);
}

.certificate-record-head {
  padding: 12px 10px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.certificate-record-row.is-blocked {
  background: color-mix(in srgb, var(--danger) 5%, transparent);
}

.certificate-record-row.is-deleted {
  opacity: .76;
  background: color-mix(in srgb, var(--muted) 8%, transparent);
}

.certificate-record-row code,
.certificate-record-row strong,
.certificate-record-row small {
  display: block;
}

.certificate-record-row small {
  margin-top: 4px;
  color: var(--muted);
}

.certificate-record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.certificate-record-actions .button {
  min-width: 96px;
}

.certificate-generation-pill {
  display: inline-grid;
  min-width: 110px;
  place-items: center;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--primary);
  font-weight: 900;
}

.certificate-model-grid {
  grid-template-columns: minmax(520px, 1.2fr) minmax(420px, .8fr);
}

.certificate-admin-mini-preview {
  padding: 10px;
}

.certificate-admin-mini-preview .certificate-thumbnail {
  min-height: 270px;
}

.certificate-thumbnail {
  display: grid;
  grid-template-columns: minmax(180px, .78fr) minmax(260px, 1.22fr);
  gap: 22px;
  align-items: center;
  width: 100%;
  min-width: 620px;
  aspect-ratio: 297 / 210;
  padding: clamp(18px, 2.2vw, 34px);
  border: 6px double var(--accent);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(201, 153, 61, .05), transparent 42%, rgba(18, 62, 105, .04)),
    #fffdf6;
  color: var(--primary);
  overflow: hidden;
}

.certificate-thumbnail-left,
.certificate-thumbnail-right {
  display: grid;
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.certificate-thumbnail-left {
  gap: 10px;
}

.certificate-thumbnail-left img,
.certificate-thumbnail-left span {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 50%;
  color: var(--accent);
  font-weight: 900;
  object-fit: contain;
}

.certificate-thumbnail-left strong,
.certificate-thumbnail-left h3,
.certificate-thumbnail-left small,
.certificate-thumbnail-right p,
.certificate-thumbnail-right h2,
.certificate-thumbnail-right strong {
  margin: 0;
}

.certificate-thumbnail-left h3 {
  max-width: 260px;
  color: var(--accent);
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.1;
  text-transform: uppercase;
}

.certificate-thumbnail-left small {
  color: var(--accent);
  font-weight: 800;
}

.certificate-thumbnail-right {
  gap: 10px;
}

.certificate-thumbnail-right h2 {
  display: -webkit-box;
  overflow: hidden;
  color: var(--primary);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.05;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.certificate-thumbnail-right strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.certificate-thumbnail-right ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
  width: 100%;
  margin: 0;
  padding-left: 18px;
  text-align: left;
  font-size: 11px;
}

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

.certificate-payment-policy {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-soft) 68%, var(--surface));
}

.certificate-assets-heading {
  display: grid;
  gap: 3px;
  margin-top: 6px;
}

.certificate-assets-heading small {
  color: var(--muted);
}

.certificate-standard-logo {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface));
}

.certificate-standard-logo img,
.certificate-standard-logo-placeholder {
  width: 72px;
  height: 48px;
  object-fit: contain;
}

.certificate-standard-logo-placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.certificate-standard-logo-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.certificate-standard-logo-copy strong {
  color: var(--primary);
}

.certificate-standard-logo-copy small {
  color: var(--muted);
  line-height: 1.45;
}

.certificate-asset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 12px;
}

.asset-upload-card {
  display: grid;
  gap: 10px;
  min-height: 178px;
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 58%, var(--line));
  border-radius: var(--radius);
  background:
    linear-gradient(45deg, color-mix(in srgb, var(--surface-soft) 52%, transparent) 25%, transparent 25%),
    linear-gradient(-45deg, color-mix(in srgb, var(--surface-soft) 52%, transparent) 25%, transparent 25%),
    var(--surface);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px;
}

.asset-upload-card span {
  color: var(--primary);
  font-weight: 900;
}

.asset-upload-card img {
  width: 100%;
  height: 70px;
  object-fit: contain;
}

.asset-upload-card input[type="file"] {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 12px;
}

.survey-admin-panel,
.survey-editor-dialog {
  max-width: 1160px;
}

.survey-admin-list {
  display: grid;
  gap: 12px;
}

.survey-admin-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(260px, .75fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.survey-row-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--line));
  border-radius: 50%;
  color: var(--primary);
  font-weight: 900;
}

.survey-admin-row h3,
.survey-admin-row p {
  margin: 0;
}

.survey-admin-row dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.survey-admin-row dt {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.survey-admin-row dd {
  margin: 0;
  font-weight: 900;
}

.survey-response-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

.survey-response-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.survey-response-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.survey-response-card h3 {
  margin: 0;
  color: var(--primary);
}

.survey-response-card .certificate-survey-preview {
  margin: 0;
}

.certificate-logo-image {
  max-width: clamp(58px, 8vw, 108px);
  max-height: clamp(42px, 6vw, 84px);
  object-fit: contain;
}

.certificate-signature-image {
  max-width: 118px;
  max-height: 38px;
  object-fit: contain;
}

.certificate-stamp-image,
.certificate-seal-image {
  max-width: 58px;
  max-height: 58px;
  object-fit: contain;
}

.certificate-request-card,
.certificate-student-card {
  background: var(--surface);
}

.certificate-student-card {
  text-align: left;
}

.certificate-survey-preview,
.survey-answer-line {
  display: grid;
  gap: 6px;
}

.survey-answer-line {
  padding: 10px;
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.survey-answer-line span {
  color: var(--muted);
}

.certificate-professional-preview {
  border-color: color-mix(in srgb, var(--brand-gold) 42%, var(--line));
}

.professional-certificate-mock {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 50%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--brand-gold) 10%, var(--surface));
}

.professional-certificate-mock strong,
.professional-certificate-mock span,
.professional-certificate-mock small {
  display: block;
}

.certificate-payment-box {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.certificate-payment-box strong {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
}

.certificate-payment-conditions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.certificate-payment-conditions div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.certificate-payment-conditions span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.certificate-payment-conditions strong {
  margin: 0;
  color: var(--primary);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.certificate-payment-conditions p {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--text);
  white-space: pre-wrap;
}

.certifications-page {
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.certifications-header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.certifications-header-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--accent);
  font-size: 24px;
  font-weight: 800;
}

.certifications-header h1 {
  margin: 2px 0 6px;
  color: var(--primary);
}

.certifications-header p {
  margin: 0;
  color: var(--muted);
}

.certification-list {
  display: grid;
  gap: 14px;
}

.certification-list-item {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  min-height: 148px;
  padding: 26px 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: var(--radius);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, var(--surface)) 0%, var(--surface) 68%);
}

.certification-list-item.is-blocked {
  opacity: .78;
  border-style: dashed;
  background: color-mix(in srgb, var(--muted) 7%, var(--surface));
}

.certification-list-item.is-professional {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--accent));
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 8%, var(--surface)) 0%, color-mix(in srgb, var(--accent) 8%, var(--surface)) 100%);
}

.certification-seal {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 4px double var(--accent);
  border-radius: 50%;
  color: var(--primary);
  background: var(--surface);
}

.certification-seal span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 2px solid var(--primary);
  border-radius: 50%;
  font-size: 14px;
}

.certificate-seal {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 5px double var(--surface);
  border-radius: 50%;
  background: var(--accent);
  color: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 68%, var(--primary));
  font-size: 12px;
  font-weight: 900;
}

.certification-list-copy h2 {
  margin: 6px 0;
  color: var(--text);
  font-size: clamp(20px, 1.7vw, 28px);
}

.certification-list-copy p {
  margin: 0;
  color: var(--primary);
}

.certification-list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
}

.certification-list-actions code {
  color: var(--primary);
  background: transparent;
}

.certificate-upgrade-panel {
  display: grid;
}

.certificate-upgrade-card {
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.certificate-survey-dialog,
.certificate-payment-dialog {
  width: min(100%, 760px);
}

.certificate-payment-dialog {
  width: min(100%, 820px);
}

.certificate-payment-dialog.has-receipt-preview {
  width: min(96vw, 1120px);
}

.payment-receipt-step {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.certificate-payment-dialog.has-receipt-preview .payment-receipt-form {
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  align-items: start;
}

.certificate-payment-dialog.has-receipt-preview .dialog-actions {
  grid-column: 1 / -1;
}

.payment-receipt-picker {
  justify-items: stretch;
}

.payment-receipt-picker .button {
  width: 100%;
}

.payment-receipt-preview {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.payment-receipt-preview[hidden] {
  display: none;
}

.payment-receipt-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.payment-receipt-preview-header h3 {
  margin: 3px 0 0;
  font-size: 18px;
}

.payment-receipt-preview-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.payment-receipt-file {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 280px;
  max-height: min(48vh, 520px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: #fff;
}

.payment-receipt-file[aria-busy="true"]::before {
  content: "A preparar pré-visualização...";
  position: absolute;
  z-index: 0;
  color: #617286;
  font-size: 13px;
  font-weight: 700;
}

.payment-receipt-media {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: min(48vh, 520px);
  border: 0;
  object-fit: contain;
}

.payment-receipt-details {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(110px, 1fr));
  gap: 8px;
  margin: 0;
}

.payment-receipt-details > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
}

.payment-receipt-details dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.payment-receipt-details dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.payment-receipt-confirmation {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .certificate-payment-dialog.has-receipt-preview .payment-receipt-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .certificate-payment-dialog.has-receipt-preview .dialog-actions {
    grid-column: auto;
  }

  .payment-receipt-preview-header {
    align-items: stretch;
    flex-direction: column;
  }

  .payment-receipt-preview-header .button {
    width: 100%;
  }

  .payment-receipt-preview-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .payment-receipt-file,
  .payment-receipt-media {
    min-height: 220px;
    height: 38vh;
  }

  .payment-receipt-details {
    grid-template-columns: minmax(0, 1fr);
  }
}

.certificate-preview-dialog {
  width: min(96vw, 1180px);
  max-height: 92vh;
  overflow: auto;
}

.survey-question-list {
  display: grid;
  gap: 12px;
  max-height: min(58vh, 620px);
  overflow: auto;
  padding-right: 4px;
}

.survey-question-card {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.survey-question-card legend {
  padding: 0 5px;
  color: var(--text);
  font-weight: 800;
}

.survey-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.survey-option-grid label {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.certificate-preview-sheet {
  width: 100%;
  overflow-x: auto;
  padding: clamp(10px, 1.4vw, 18px);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.certificate-preview-sheet.is-professional {
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--accent) 12%, var(--surface)));
}

.certificate-preview-inner {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  gap: clamp(8px, 1vw, 14px);
  aspect-ratio: 297 / 210;
  width: 100%;
  min-width: 720px;
  min-height: 0;
  overflow: hidden;
  place-items: center stretch;
  padding: clamp(18px, 2.6vw, 40px);
  border: 8px double var(--primary);
  border-radius: var(--radius);
  background:
    repeating-radial-gradient(ellipse at center, transparent 0 36px, rgba(18, 62, 105, .045) 37px 38px),
    #fff9ec;
  text-align: center;
}

.certificate-document-professional {
  min-width: 860px;
  border-color: var(--accent);
  background:
    linear-gradient(90deg, rgba(201, 153, 61, .04), transparent 42%, rgba(18, 62, 105, .03)),
    #ffffff;
}

.certificate-professional-layout {
  display: grid;
  grid-template-columns: minmax(230px, .78fr) minmax(360px, 1.22fr);
  gap: clamp(18px, 2.5vw, 34px);
  align-items: stretch;
  width: 100%;
  height: 100%;
}

.certificate-professional-left,
.certificate-professional-right {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.certificate-professional-left {
  gap: clamp(7px, .9vw, 13px);
  color: var(--primary);
}

.certificate-professional-right {
  gap: clamp(5px, .7vw, 10px);
}

.certificate-logo-mark {
  display: grid;
  width: clamp(44px, 5.4vw, 72px);
  height: clamp(44px, 5.4vw, 72px);
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--accent) 64%, transparent);
  border-radius: 50%;
  color: var(--accent);
  font-weight: 900;
}

.certificate-professional-left h1 {
  max-width: 270px;
  color: var(--accent);
  font-size: clamp(17px, 1.8vw, 26px);
  line-height: 1.08;
}

.certificate-professional-left p,
.certificate-professional-left span,
.certificate-professional-left small,
.certificate-professional-right p,
.certificate-professional-right span {
  margin: 0;
  color: var(--primary);
  font-size: clamp(8px, .9vw, 13px);
  line-height: 1.35;
}

.certificate-professional-left > strong {
  color: var(--accent);
  font-size: clamp(10px, 1.05vw, 14px);
}

.certificate-place-date {
  display: grid;
  gap: 7px;
  margin-top: clamp(6px, .8vw, 12px);
}

.certificate-signature-block {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 170px;
  color: var(--primary);
  font-size: clamp(8px, .9vw, 12px);
}

.certificate-signature-block span {
  width: 170px;
  height: 1px;
  margin-top: 8px;
  background: var(--primary);
}

.certificate-signature-block b,
.certificate-signature-block small {
  color: var(--primary);
}

.certificate-professional-right h2 {
  display: -webkit-box;
  overflow: hidden;
  color: var(--primary);
  font-size: clamp(18px, 2.05vw, 31px);
  line-height: 1.05;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

.certificate-professional-right h3 {
  display: -webkit-box;
  overflow: hidden;
  color: var(--primary);
  font-size: clamp(13px, 1.3vw, 20px);
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

.certificate-professional-footer {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(150px, 1fr) auto;
  gap: 12px;
  align-items: end;
  width: 100%;
  margin-top: 4px;
}

.certificate-professional-footer > strong {
  align-self: center;
  color: var(--primary);
  font-size: clamp(10px, 1.15vw, 15px);
}

.certificate-document-main {
  display: grid;
  gap: clamp(5px, .75vw, 10px);
  place-items: center;
  min-width: 0;
  max-width: min(100%, 760px);
  justify-self: center;
}

.certificate-document-participation .certificate-document-main {
  max-width: min(100%, 700px);
}

.certificate-corner {
  position: absolute;
  width: 62px;
  height: 62px;
  border-color: var(--primary);
  pointer-events: none;
}

.certificate-document-professional .certificate-corner {
  border-color: var(--accent);
}

.certificate-corner-tl {
  top: 22px;
  left: 22px;
  border-top: 3px solid;
  border-left: 3px solid;
}

.certificate-corner-tr {
  top: 22px;
  right: 22px;
  border-top: 3px solid;
  border-right: 3px solid;
}

.certificate-corner-bl {
  bottom: 22px;
  left: 22px;
  border-bottom: 3px solid;
  border-left: 3px solid;
}

.certificate-corner-br {
  right: 22px;
  bottom: 22px;
  border-right: 3px solid;
  border-bottom: 3px solid;
}

.certificate-institution {
  margin: 0;
  color: var(--primary);
  font-weight: 800;
  text-transform: uppercase;
}

.certificate-preview-inner h1 {
  margin: 0;
  color: var(--primary);
  font-size: clamp(22px, 2.7vw, 38px);
  line-height: 1.02;
  text-transform: uppercase;
}

.certificate-document-professional h1 {
  color: var(--accent);
}

.certificate-preview-inner .certificate-professional-left h1 {
  max-width: 270px;
  color: var(--accent);
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.08;
}

.certificate-preview-inner h2 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--primary);
  font-size: clamp(20px, 2.35vw, 34px);
  line-height: 1.04;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

.certificate-preview-inner h3 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--primary);
  max-width: min(88%, 620px);
  font-size: clamp(15px, 1.55vw, 22px);
  line-height: 1.14;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

.certificate-preview-lead {
  margin: 0;
  color: var(--muted);
}

.certificate-content-summary {
  width: min(720px, 86%);
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 62%, transparent);
  color: var(--text);
  text-align: left;
}

.certificate-document-participation .certificate-content-summary {
  max-height: 86px;
  overflow: hidden;
}

.certificate-content-summary strong {
  display: block;
  margin-bottom: 8px;
  color: var(--primary);
}

.certificate-content-summary ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px;
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
}

.certificate-professional-right .certificate-content-summary {
  width: 100%;
  margin-top: 2px;
  padding-top: 8px;
  border-top-color: color-mix(in srgb, var(--accent) 42%, transparent);
}

.certificate-professional-right .certificate-content-summary ul {
  gap: 3px 14px;
  font-size: clamp(7px, .76vw, 10px);
}

.certificate-preview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(760px, 88%);
  gap: 14px;
}

.certificate-preview-metrics span {
  display: grid;
  gap: 4px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .72);
}

.certificate-preview-metrics small {
  color: var(--muted);
}

.certificate-preview-metrics strong {
  color: var(--primary);
}

.certificate-preview-seal {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  align-self: center;
  justify-self: center;
  border: 6px solid color-mix(in srgb, var(--accent) 78%, #ffffff);
  border-radius: 50%;
  background: #ffffff;
  color: var(--primary);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.3;
}

.certificate-document-participation .certificate-preview-seal {
  border-color: #b4bac4;
}

.certificate-preview-meta,
.certificate-signature-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 18px;
  width: 100%;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.certificate-preview-meta span {
  overflow-wrap: anywhere;
}

.certificate-signature-row span {
  min-width: min(220px, 42%);
  padding-top: 12px;
  border-top: 1px solid var(--primary);
  color: var(--primary);
  font-weight: 800;
}

.certificate-survey-builder,
.admin-survey-question-card {
  display: grid;
  gap: 12px;
}

.admin-survey-question-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.loading-state {
  display: grid;
  min-height: 55vh;
  place-items: center;
  align-content: center;
  gap: 16px;
  color: var(--muted);
}

.spinner {
  width: 44px;
  height: 44px;
  border: 4px solid var(--surface-strong);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

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

.toast-container {
  position: fixed;
  z-index: 1000;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 8px;
  width: min(380px,calc(100vw - 36px));
}

.toast {
  padding: 13px 15px;
  transform: translateY(15px);
  border-radius: var(--radius);
  opacity: 0;
  background: #243a41;
  color: white;
  box-shadow: var(--shadow);
  transition: .22s;
}

.toast.is-visible { transform: translateY(0); opacity: 1; }
.toast-success { background: #226d4f; }
.toast-warning { background: #765000; }
.toast-error { background: #963b3b; }

.dialog-overlay {
  position: fixed;
  z-index: 500;
  inset: 0;
  display: grid;
  padding: 22px;
  place-items: center;
  overflow: auto;
  background: rgba(9,25,31,.72);
}

.dialog-card {
  position: relative;
  width: min(100%,760px);
  padding: 35px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.recovery-dialog {
  width: min(100%, 620px);
}

.email-change-dialog {
  width: min(100%, 620px);
}

.dialog-overlay-elevated {
  z-index: 560;
}

.email-change-confirmation {
  grid-column: 1 !important;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  font-weight: 500;
  line-height: 1.45;
}

.email-change-confirmation input {
  flex: 0 0 16px;
  margin-top: 2px;
}

.recovery-note {
  margin: 0 0 18px;
  color: var(--muted);
}

.admin-selection-summary {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.admin-selection-summary span,
.admin-selection-summary small {
  color: var(--muted);
}

.admin-selection-summary strong {
  color: var(--text);
  font-size: 15px;
}

.recovery-result {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--success) 35%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
}

.recovery-result.is-error {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--danger);
}

.recovery-result span {
  color: var(--muted);
}

.recovery-result strong {
  padding: 12px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 20px;
  letter-spacing: .04em;
}

.recovery-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.credential-dialog {
  width: min(100%, 980px);
}

.credential-dialog-note {
  margin: 0 0 18px;
  color: var(--muted);
}

.credential-checkbox-line {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-weight: 750;
}

.credential-checkbox-line input {
  width: 18px;
  min-height: auto;
}

.credential-candidate-list {
  display: grid;
  max-height: 340px;
  gap: 8px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.credential-candidate {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.credential-candidate input {
  width: 18px;
  min-height: auto;
}

.credential-candidate strong,
.credential-candidate small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.credential-candidate small {
  margin-top: 2px;
  color: var(--muted);
}

.credential-candidate em {
  font-style: normal;
}

.credential-result {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--success) 32%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
}

.credential-result-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.credential-result-heading span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.credential-result-heading strong {
  display: block;
  margin-top: 2px;
  font-size: 18px;
}

.credential-table-wrap {
  max-height: 300px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.credential-management-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.credential-management-card {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.credential-management-card img {
  width: 38px;
  height: 38px;
  padding: 7px;
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.credential-management-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.credential-management-card h2 {
  margin: 4px 0 6px;
  font-size: 20px;
}

.credential-management-card p {
  margin: 0;
  color: var(--muted);
}

.credential-management-card .button {
  width: 100%;
}

.dialog-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 30px;
}

.configuration-error {
  max-width: 760px;
  margin: 80px auto;
  padding: 35px;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line));
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--danger);
}

.configuration-error code {
  display: inline-block;
  padding: 5px 8px;
  border-radius: var(--radius);
  background: var(--surface-soft);
}

/* Admin */
.admin-layout {
  display: grid;
  grid-template-columns: var(--admin-sidebar-width) minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - 112px);
  align-items: start;
}

.admin-sidebar {
  position: sticky;
  top: 78px;
  display: grid;
  max-height: calc(100vh - 84px);
  overflow: auto;
  align-self: start;
  padding: 22px 18px;
  border: 0;
  border-radius: 0;
  background: var(--primary-dark);
  color: #fff8e4;
  box-shadow: none;
  scrollbar-width: thin;
}

.admin-sidebar h2 {
  margin: 0;
  font-size: 18px;
}

.admin-sidebar-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 248, 228, .18);
}

.admin-sidebar-heading img {
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.admin-sidebar-symbol {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--surface);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

:root[data-theme="dark"] .admin-sidebar-symbol {
  color: #082033;
}

.admin-nav {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  font-weight: 800;
}

.admin-nav img {
  width: 18px;
  height: 18px;
}

.admin-nav.is-active {
  background: rgba(255, 248, 228, .12);
  color: #fff8e4;
  box-shadow: inset 4px 0 0 var(--accent);
}

.admin-page-heading { margin-top: 0; }

.admin-main {
  min-width: 0;
  width: 100%;
  padding: clamp(18px, 2vw, 32px);
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--bg));
}

.admin-heading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.admin-heading-actions .button,
.dialog-actions .button,
.admin-row-actions .button {
  min-width: 128px;
}

.admin-filter-bar {
  display: grid;
  grid-template-columns: minmax(190px, .45fr) minmax(320px, 1fr);
  gap: 12px;
  align-items: end;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.admin-filter-bar label {
  display: grid;
  gap: 6px;
}

.admin-filter-bar label > span {
  color: rgba(255, 248, 228, .74);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.course-list-filters {
  grid-template-columns: minmax(320px, 1.3fr) minmax(150px, .35fr) minmax(190px, .45fr) auto;
}

.admin-course-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: 14px;
  margin-top: 16px;
}

.admin-course-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 14px;
  min-height: 260px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.admin-course-card-topline,
.admin-course-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-course-card-topline small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-course-card h2 {
  margin: 12px 0 6px;
  font-size: 20px;
}

.admin-course-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.admin-course-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-course-card dl div {
  min-width: 0;
  padding: 10px;
  border-radius: var(--radius-small);
  background: var(--surface-soft);
}

.admin-course-card dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.admin-course-card dd {
  overflow: hidden;
  margin: 3px 0 0;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.access-control-panel {
  margin: 16px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.access-control-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, .5fr));
  gap: 12px;
}

.access-control-form > fieldset {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.access-control-form > fieldset,
.access-control-form > button {
  grid-column: 1 / -1;
}

.access-control-form legend {
  padding: 0 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.select-all-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.select-all-toolbar .button {
  min-width: 126px;
}

.select-all-toolbar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.access-checkbox-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow: auto;
}

.access-checkbox-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
  font-size: 13px;
}

.access-checkbox-option input {
  width: 18px;
  min-height: 18px;
  margin-top: 3px;
}

.admin-table-wrap {
  max-height: min(72vh, 820px);
  overflow: auto;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.admin-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.admin-table small {
  display: block;
  color: var(--muted);
}

.submission-status-pill {
  width: 168px;
  min-height: 38px;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: var(--radius-small);
  text-align: center;
  white-space: normal;
}

.submission-action-button {
  width: 112px;
  justify-content: center;
}

.admin-row-actions,
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.admin-row-actions {
  justify-content: flex-start;
}

.admin-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 16px;
  align-items: start;
}

.empty-table {
  padding: 44px !important;
  color: var(--muted);
  text-align: center !important;
}

.submission-columns {
  display: grid;
  grid-template-columns: minmax(0,1fr) 390px;
  gap: 28px;
}

.admin-answer {
  margin-bottom: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.answer-value {
  padding: 15px;
  border-radius: var(--radius);
  background: var(--surface-soft);
  overflow-wrap: anywhere;
}

.answer-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.answer-value span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.answer-value strong {
  display: block;
  font-weight: 700;
  line-height: 1.5;
}

.answer-value-correct {
  border: 1px solid color-mix(in srgb, var(--success) 28%, var(--line));
  background: color-mix(in srgb, var(--success) 9%, var(--surface-soft));
}

.answer-feedback-note {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

.review-form-card,
.review-files {
  margin-bottom: 20px;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.review-history-note {
  margin-top: -6px;
  color: var(--muted);
  font-size: 13px;
}

.course-admin-layout {
  display: grid;
  grid-template-columns: minmax(320px, .58fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.admin-content-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.content-metric-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.content-metric-card span,
.content-metric-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.content-metric-card strong {
  display: block;
  margin: 3px 0;
  color: var(--text);
  font-size: 30px;
  line-height: 1;
}

.admin-content-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.admin-content-tabs button {
  min-height: 40px;
  min-width: 132px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 850;
}

.admin-content-tabs button.is-active {
  border-color: var(--line);
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-soft);
}

.admin-content-panel,
.course-overview-form {
  padding: clamp(18px, 1.4vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.admin-content-panel .course-overview-form {
  padding: 0;
  border: 0;
  box-shadow: none;
}

.course-switcher {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}

.course-switcher button {
  display: grid;
  gap: 3px;
  min-height: 72px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.course-switcher button.is-active {
  border-color: var(--primary);
  background: var(--surface-soft);
  color: var(--primary);
}

.course-switcher span {
  color: var(--muted);
  font-size: 12px;
}

.course-admin-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.course-admin-card h2 {
  margin-top: 0;
}

.course-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.course-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.course-module-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr));
  gap: 12px;
  max-height: none;
  overflow: auto;
  padding-right: 4px;
}

.course-module-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.course-module-card h3 {
  margin: 10px 0 4px;
  font-size: 18px;
}

.course-module-card p {
  margin: 0;
  color: var(--muted);
}

.course-module-card dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  grid-column: 1 / -1;
  margin: 0;
}

.course-module-card dl div {
  padding: 9px;
  border-radius: var(--radius-small);
  background: var(--surface);
}

.course-module-card dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.course-module-card dd {
  margin: 2px 0 0;
  font-weight: 850;
}

.course-lesson-dialog {
  width: min(100%, 860px);
}

.course-lesson-dialog .form-section {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.course-lesson-dialog .form-section legend {
  padding: 0 6px;
  font-weight: 800;
}

.course-lesson-dialog .checkbox-field {
  min-height: 44px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  align-self: end;
}

.course-lesson-dialog .checkbox-field input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.dialog-helper-text {
  margin: -4px 0 18px;
  color: var(--muted);
  font-weight: 750;
}

.course-groups-panel {
  margin-top: 18px;
}

.group-student-picker {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.group-student-picker legend {
  padding: 0 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.admin-video-panel {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.admin-video-form {
  display: grid;
  grid-template-columns: minmax(180px,.65fr) minmax(260px,1fr) auto;
  gap: 14px;
  align-items: end;
}

.admin-video-form label {
  display: grid;
  gap: 7px;
}

.admin-video-form label > span {
  font-size: 14px;
  font-weight: 750;
}

.admin-video-description {
  grid-column: 1 / -1;
}

.video-student-access {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.video-student-access legend {
  padding: 0 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.video-student-access.is-disabled {
  opacity: .56;
}

.video-student-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  max-height: 260px;
  overflow: auto;
}

.video-student-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
}

.video-student-option input {
  width: 18px;
  min-height: 18px;
  margin-top: 4px;
}

.video-student-option strong,
.video-student-option small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-student-option small {
  color: var(--muted);
  font-size: 12px;
}

.admin-video-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr));
  gap: 12px;
  margin-top: 14px;
}

.admin-video-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.admin-video-card h3 {
  margin-bottom: 4px;
  font-size: 18px;
}

.admin-video-card p {
  margin: 0 0 6px;
  color: var(--muted);
}

.admin-video-card small {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-weight: 700;
}

.admin-video-card button {
  border: 0;
  background: none;
  color: var(--danger);
  cursor: pointer;
  font-weight: 800;
}

.brand-settings-panel {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.brand-preview-card {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-preview-symbol {
  display: grid;
  width: 78px;
  height: 78px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--surface);
  font-weight: 900;
}

.brand-preview-symbol img {
  padding: 8px;
}

.brand-preview-empty {
  max-width: 62px;
  color: #fff8e4;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

:root[data-theme="dark"] .brand-preview-symbol {
  color: #082033;
}

.brand-preview-card h2 {
  margin-bottom: 6px;
  font-size: 24px;
}

.brand-preview-card p {
  margin: 0;
  color: var(--muted);
}

.brand-storage-status {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.brand-storage-status small {
  max-width: 68ch;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.brand-logo-form {
  display: grid;
  gap: 14px;
}

.brand-logo-form label {
  display: grid;
  gap: 7px;
}

.brand-logo-form label > span {
  font-size: 14px;
  font-weight: 750;
}

.brand-logo-file-field {
  padding: 16px;
  border: 1px dashed rgba(201, 165, 91, .58);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.brand-logo-file-field input[type="file"] {
  width: 100%;
  min-height: 44px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--input-bg);
  color: var(--text);
}

.brand-logo-file-field input[type="file"]::file-selector-button {
  min-height: 34px;
  margin-right: 10px;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius-small);
  background: var(--primary);
  color: var(--surface);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.brand-logo-file-field small,
.brand-logo-file-selection {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.brand-logo-file-selection {
  min-height: 18px;
  margin: -4px 0 0;
}

.brand-logo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-file-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}

.admin-file-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-file-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.student-admin-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1.6fr) repeat(3, minmax(160px, .72fr)) auto;
  gap: 12px;
  align-items: end;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.student-admin-toolbar label {
  display: grid;
  gap: 6px;
}

.student-admin-toolbar label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.student-list-meta {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 6px 0 10px;
  color: var(--muted);
}

.student-list-meta strong {
  color: var(--text);
  font-size: 22px;
}

.student-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
  gap: 14px 16px;
  margin-top: 12px;
}

.student-admin-card {
  display: grid;
  align-content: start;
  min-height: 300px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.student-card-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
}

.student-avatar {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--surface);
  font-size: 15px;
  font-weight: 900;
}

:root[data-theme="dark"] .student-avatar {
  color: #082033;
}

:root[data-theme="dark"] .brand-mark:not(.has-brand-logo) {
  color: #06233f;
}

.student-avatar-large {
  width: 64px;
  height: 64px;
  font-size: 18px;
}

.student-admin-card h3 { margin: 10px 0 3px; }
.student-admin-card p {
  margin: 0 0 14px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.student-meta-grid,
.student-detail-grid,
.student-enrollment-card dl {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

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

.student-meta-grid div,
.student-detail-grid div,
.student-enrollment-card dl div {
  min-width: 0;
  padding: 10px;
  border-radius: var(--radius-small);
  background: var(--surface-soft);
}

.student-meta-grid dt,
.student-detail-grid dt,
.student-enrollment-card dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.student-meta-grid dd,
.student-detail-grid dd,
.student-enrollment-card dd {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-progress-line {
  display: flex;
  justify-content: space-between;
  padding: 12px 0 10px;
  border-top: 1px solid var(--line);
}

.student-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-strong);
}

.student-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.student-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.student-admin-actions button {
  border: 0;
  background: none;
  color: var(--primary);
  cursor: pointer;
  font-weight: 800;
}

.student-empty-state {
  display: grid;
  min-height: 150px;
  grid-column: 1 / -1;
  place-items: center;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--muted);
  text-align: center;
}

.student-detail-dialog {
  width: min(100%, 920px);
}

.student-detail-dialog-wide {
  width: min(100%, 1180px);
}

.student-detail-header {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding-right: 30px;
}

.student-detail-header h2 {
  margin: 8px 0 0;
}

.student-detail-header p {
  margin: 2px 0 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.student-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
}

.student-detail-grid-expanded {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.student-detail-columns {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 16px;
}

.student-detail-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.student-detail-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.student-detail-section-heading h3 {
  margin: 0;
}

.student-detail-section-heading strong {
  color: var(--accent);
  font-size: 24px;
}

.student-enrollment-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.student-module-access-list,
.certificate-request-list,
.certificate-history-list {
  display: grid;
  gap: 12px;
}

.student-module-access-card,
.student-mini-record,
.certificate-request-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.certificate-issued-list {
  margin-bottom: 22px;
}

.certificate-issued-card {
  background: linear-gradient(110deg, var(--surface), color-mix(in srgb, var(--accent) 8%, var(--surface)));
}

.certificate-issued-card.is-blocked {
  border-style: dashed;
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
}

.certificate-issued-main {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.certificate-policy-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--muted);
}

.certificate-request-heading {
  margin: 24px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.student-module-access-card dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin: 0;
}

.student-mini-record strong,
.student-mini-record span {
  display: block;
}

.student-mini-record span {
  color: var(--muted);
  font-size: 13px;
}

.student-enrollment-card {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(0, 1.4fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.student-enrollment-card h4 {
  margin: 8px 0 2px;
}

.student-enrollment-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.student-enrollment-card dl {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.student-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 22px;
}

/* Certificate verification */
.verification-shell {
  max-width: 760px;
  margin: 45px auto;
}

.verification-form {
  display: flex;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.verification-card {
  margin-top: 20px;
  padding: 32px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.verification-valid { border-top: 5px solid var(--success); }
.verification-invalid { border-top: 5px solid var(--danger); }

.verification-card > span {
  font-weight: 900;
  text-transform: uppercase;
}

.verification-valid > span { color: var(--success); }
.verification-invalid > span { color: var(--danger); }

.verification-card dl {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}

.verification-card dl div {
  padding: 14px;
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.verification-card dt {
  color: var(--muted);
  font-size: 12px;
}

.verification-card dd {
  margin: 0;
  font-weight: 800;
}

@media (min-width: 1500px) {
  .admin-summary-grid,
  .admin-content-overview {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .submission-columns {
    grid-template-columns: minmax(0, 1fr) minmax(420px, .36fr);
  }
}

@media (max-width: 1120px) {
  .admin-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .admin-sidebar {
    position: static;
    display: flex;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    align-items: center;
  }

  .admin-sidebar-heading {
    min-width: 230px;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .admin-nav {
    flex: 0 0 auto;
    min-width: 132px;
    margin-top: 0;
    justify-content: center;
  }
}

@media (max-width: 1000px) {
  .lesson-card { min-height: auto; }
  .information-grid { grid-template-columns: repeat(2,1fr); }
  .lesson-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .lesson-sidebar {
    position: static;
    display: grid;
    gap: 14px;
    padding: 18px;
  }
  .lesson-sidebar h2 {
    margin-bottom: 0;
  }
  .lesson-time-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
  }
  .lesson-navigation {
    display: flex;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px 0 2px;
  }
  .lesson-navigation button,
  .lesson-navigation a {
    flex: 0 0 auto;
    max-width: min(260px, 75vw);
    white-space: nowrap;
  }
  .submission-columns { grid-template-columns: 1fr; }
  .course-admin-layout,
  .admin-content-overview,
  .admin-filter-bar,
  .certificate-admin-grid,
  .certificate-model-grid,
  .certificate-student-grid,
  .student-detail-columns,
  .answer-comparison-grid {
    grid-template-columns: 1fr;
  }
  .certificate-admin-toolbar {
    width: 100%;
    justify-content: stretch;
  }
  .certificate-admin-toolbar .button,
  .certificate-global-search {
    flex: 1 1 100%;
  }
  .certificate-professional-layout {
    gap: 18px;
  }
  .certificate-professional-left {
    gap: 6px;
  }
  .course-module-card {
    grid-template-columns: 1fr;
  }
  .course-module-card dl,
  .admin-course-card dl,
  .course-form-grid,
  .certificate-template-form-grid,
  .access-control-form {
    grid-template-columns: 1fr;
  }
  .certificate-asset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .survey-admin-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .survey-admin-row dl,
  .survey-admin-row .button {
    grid-column: 1 / -1;
  }
  .upload-methods { grid-template-columns: 1fr; }
  .admin-video-form { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .site-header { padding: 0 16px; }
  .site-brand span:last-child { display: none; }
  .site-header-actions { gap: 8px; }
  .theme-toggle {
    display: none;
  }
  .mobile-menu-button:not([hidden]) {
    display: inline-grid;
  }
  .mobile-menu {
    right: 11px;
    left: 11px;
  }
  .theme-toggle {
    width: 36px;
    height: 36px;
  }

  .page-shell {
    width: min(calc(100% - 22px),var(--max));
    padding-top: 20px;
    padding-bottom: 46px;
  }

  .auth-card,
  .dashboard-hero,
  .lesson-header,
  .content-section,
  .question-card,
  .start-assessment-card,
  .completion-card,
  .review-card,
  .submission-box,
  .upload-panel {
    padding: 24px;
  }

  .dashboard-hero { grid-template-columns: 1fr; }
  .progress-summary { width: 100%; }
  .dashboard-insights,
  .admin-summary-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }
  .student-course-card dl,
  .profile-header-card,
  .profile-workspace,
  .profile-status-grid,
  .profile-photo-editor,
  .profile-form-grid {
    grid-template-columns: 1fr;
  }
  .profile-identity {
    align-items: flex-start;
    flex-direction: column;
  }
  .profile-side-column,
  .profile-security {
    position: static;
  }
  .profile-side-column,
  .profile-exit {
    grid-column: 1;
  }
  .checkbox-line {
    grid-column: 1;
  }
  .profile-actions .button {
    width: 100%;
  }
  .lesson-sidebar,
  .lesson-header,
  .content-section,
  .question-card,
  .start-assessment-card,
  .completion-card,
  .review-card,
  .submission-box,
  .upload-panel {
    padding: 18px;
  }
  .lesson-time-summary {
    grid-template-columns: 1fr;
  }
  .lesson-navigation button,
  .lesson-navigation a {
    max-width: 82vw;
    font-size: 12px;
  }
  .content-section {
    margin-top: 16px;
    scroll-margin-top: 78px;
  }
  .content-section h2,
  .lesson-header h1 {
    overflow-wrap: anywhere;
  }
  .auth-brand-row { grid-template-columns: 1fr; }
  .auth-feature-list { grid-template-columns: 1fr; }
  .video-panel { padding: 20px; }
  .video-frame { min-height: 220px; }
  .video-frame.is-empty { min-height: 150px; }
  .video-card-body {
    align-items: stretch;
    flex-direction: column;
  }
  .video-sound-button {
    width: 42px;
    height: 42px;
  }
  .brand-preview-card {
    align-items: flex-start;
    flex-direction: column;
  }
  .brand-storage-status {
    align-items: flex-start;
    flex-direction: column;
  }
  .brand-logo-actions .button {
    width: 100%;
  }

  .admin-heading-actions,
  .admin-heading-actions .button {
    width: 100%;
  }

  .student-admin-toolbar {
    grid-template-columns: 1fr;
  }

  .admin-profile-grid {
    grid-template-columns: 1fr;
  }

  .student-admin-toolbar .button,
  .admin-row-actions .button,
  .dialog-actions .button,
  .student-detail-actions .button {
    width: 100%;
  }

  .student-card-header,
  .student-detail-header,
  .credential-candidate {
    grid-template-columns: 1fr;
  }

  .credential-result-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .student-meta-grid,
  .student-detail-grid,
  .student-enrollment-card,
  .student-enrollment-card dl {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .admin-nav {
    width: 100%;
    justify-content: flex-start;
  }

  .admin-video-card {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-file-card {
    grid-template-columns: 1fr;
  }

  .admin-file-actions {
    justify-content: flex-start;
  }

  .information-grid,
  .certificate-data,
  .certification-list-item,
  .student-admin-grid,
  .verification-card dl {
    grid-template-columns: 1fr;
  }

  .certification-list-item {
    gap: 14px;
    min-height: auto;
  }

  .certificate-preview-inner {
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: 8px;
    padding: 18px;
  }

  .certificate-preview-dialog {
    width: 98vw;
  }

  .certificate-professional-layout {
    grid-template-columns: .78fr 1.22fr;
    gap: 10px;
  }

  .certificate-professional-left p,
  .certificate-professional-left span,
  .certificate-professional-left small,
  .certificate-professional-right p,
  .certificate-professional-right span {
    font-size: 7px;
  }

  .certificate-preview-inner h1 {
    font-size: 24px;
  }

  .certificate-preview-inner .certificate-professional-left h1 {
    font-size: 13px;
  }

  .certificate-preview-inner h2 {
    font-size: 22px;
  }

  .certificate-professional-right h2 {
    font-size: 14px;
  }

  .certificate-preview-inner h3 {
    font-size: 16px;
  }

  .certificate-professional-right h3 {
    font-size: 10px;
  }

  .certificate-content-summary,
  .certificate-preview-metrics {
    width: 96%;
  }

  .certificate-content-summary ul,
  .certificate-preview-metrics {
    grid-template-columns: 1fr;
  }

  .certificate-preview-seal {
    width: 54px;
    height: 54px;
    border-width: 5px;
    font-size: 8px;
  }

  .certificate-professional-footer {
    gap: 5px;
  }

  .certificate-asset-grid {
    grid-template-columns: 1fr;
  }

  .certificate-professional-footer .certificate-preview-seal {
    width: 34px;
    height: 34px;
    border-width: 4px;
  }

  .certificate-signature-block {
    min-width: 90px;
    font-size: 7px;
  }

  .certificate-signature-block span {
    width: 90px;
  }

  .certificate-corner {
    width: 34px;
    height: 34px;
  }

  .attempt-header {
    align-items: stretch;
    flex-direction: column;
  }

  .timer-card { width: 100%; }

  .uploaded-file,
  .section-heading,
  .admin-page-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .verification-form { flex-direction: column; }
  .certificate-card { padding: 32px 20px; }
}

/* Premium dashboard UI layer */
#app:has(.student-app-shell) {
  width: min(calc(100% - 32px), 1800px);
  max-width: none;
  padding-top: 16px;
}

#adminApp.page-shell {
  width: min(calc(100% - 32px), 1900px);
  padding-top: 16px;
}

.site-header {
  min-height: 68px;
  border-bottom-color: var(--line);
  background: var(--header-bg);
}

.auth-card,
.dashboard-hero,
.progress-summary,
.video-panel,
.information-panel,
.profile-card,
.profile-header-card,
.certifications-page,
.admin-content-panel,
.student-detail-panel,
.course-management-panel,
.certificate-requests-panel,
.certificate-register-panel {
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.dashboard-hero {
  min-height: 240px;
  border-color: rgba(234, 199, 139, .26);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(234, 199, 139, .14), transparent 34%),
    var(--primary);
}

.progress-summary {
  border-color: rgba(234, 199, 139, .45);
}

.dashboard-insights,
.admin-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.insight-card,
.admin-summary-card,
.admin-stat-card {
  min-height: 110px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
}

.student-course-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 14px;
  overflow: visible;
  padding: 0;
}

.student-course-card {
  min-width: 0;
  max-width: none;
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
}

.student-course-card.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 14%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}

.lesson-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 14px;
}

.lesson-card,
.question-card,
.start-assessment-card,
.completion-card,
.review-card,
.submission-box,
.upload-panel,
.content-section {
  border-radius: var(--radius);
  background: var(--surface);
}

.lesson-layout {
  width: min(calc(100% - 32px), 1600px);
  margin: 16px auto 0;
}

.lesson-sidebar {
  border-radius: var(--radius);
}

.lesson-main {
  min-width: 0;
}

.rich-content {
  max-width: 840px;
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.7;
}

.admin-layout {
  min-height: calc(100vh - 92px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.admin-sidebar {
  top: 84px;
  max-height: calc(100vh - 104px);
  padding: 18px 14px;
  background: var(--primary);
}

.admin-sidebar h2 {
  color: #fff8e4;
  font-size: 16px;
  line-height: 1.2;
}

.admin-sidebar-symbol {
  width: 42px;
  height: 42px;
  border-color: rgba(234, 199, 139, .35);
  background: var(--accent-soft);
  color: var(--primary);
}

.admin-nav {
  position: relative;
  min-height: 42px;
  margin-top: 4px;
  padding: 0 12px;
  border-radius: 6px;
  color: rgba(255, 248, 228, .74);
}

.admin-nav::before {
  position: absolute;
  inset: 8px auto 8px 0;
  width: 3px;
  border-radius: 999px;
  background: transparent;
  content: "";
}

.admin-nav:hover,
.admin-nav.is-active {
  background: rgba(201, 165, 91, .18);
  color: #fff8e4;
  box-shadow: none;
}

.admin-nav.is-active::before {
  background: var(--accent);
}

.admin-main {
  background: linear-gradient(180deg, rgba(255, 248, 228, .68), #ffffff 260px);
}

.admin-page-heading,
.course-section-heading,
.section-heading {
  gap: 14px;
  align-items: center;
}

.admin-page-heading h1 {
  font-size: clamp(26px, 2.4vw, 34px);
}

.admin-filter-bar,
.student-admin-toolbar,
.certificate-admin-toolbar {
  border-color: var(--line);
  background: rgba(255, 255, 255, .92);
  box-shadow: none;
}

.admin-filter-bar label > span,
.student-admin-toolbar label > span,
.certificate-admin-toolbar label > span {
  color: var(--muted);
}

.admin-table-wrap,
.credential-table-wrap,
.certificate-record-table {
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.admin-table th,
.admin-table td {
  height: 52px;
  padding: 10px 14px;
  font-size: 13px;
}

.admin-table th {
  height: 42px;
  background: color-mix(in srgb, var(--surface-soft) 82%, var(--surface));
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
}

.admin-table tbody tr:hover,
.certificate-record-row:hover {
  background: color-mix(in srgb, var(--accent-soft) 13%, transparent);
}

.status-pill,
.submission-status-pill,
.certificate-generation-pill {
  border-radius: 6px;
  font-size: 12px;
  font-weight: 850;
}

.dialog-overlay {
  background: rgba(0, 54, 91, .72);
}

.dialog-card {
  width: min(100%, 560px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.certificate-preview-dialog,
.credential-dialog {
  width: min(96vw, 1180px);
}

@media (max-width: 1120px) {
  .student-app-shell {
    grid-template-columns: 1fr;
  }

  .student-sidebar {
    position: static;
    display: flex;
    height: auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .student-sidebar-heading,
  .student-sidebar-profile {
    min-width: 220px;
  }

  .student-nav {
    display: flex;
    gap: 6px;
  }

  .student-nav p {
    display: none;
  }

  .student-nav a {
    flex: 0 0 auto;
  }

  .student-topbar {
    top: 68px;
  }
}

@media (max-width: 720px) {
  #app:has(.student-app-shell),
  #adminApp.page-shell {
    width: min(calc(100% - 20px), 100%);
    padding-top: 10px;
  }

  .student-app-shell,
  .admin-layout {
    border-radius: var(--radius);
  }

  .student-sidebar {
    padding: 12px;
  }

  .student-sidebar-heading,
  .student-sidebar-profile {
    min-width: 190px;
  }

  .student-main-frame {
    background: var(--surface);
  }

  .student-topbar {
    position: static;
    align-items: flex-start;
    flex-direction: column;
    padding: 16px;
  }

  .student-topbar-actions,
  .global-search,
  .global-search input {
    width: 100%;
  }

  .student-page-heading,
  .student-content-area {
    padding-inline: 16px;
  }

  .dashboard-hero {
    min-height: auto;
    padding: 22px;
  }

  .student-course-list,
  .lesson-grid {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    top: auto;
    max-height: none;
  }

  .admin-table-wrap {
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* M1: tenant selection after credential validation */
.organization-selector-dialog {
  width: min(100%, 520px);
}

.organization-selector-list {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.organization-selector-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  text-align: left;
}

.organization-selector-option strong,
.organization-selector-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.organization-selector-option span {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

@media (max-width: 520px) {
  .organization-selector-option {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Stage 12: data-heavy pages, forms and recoverable states */
[data-scroll-region="true"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent, #caa85e) 78%, #fff);
  outline-offset: 3px;
}

.admin-table-wrap .admin-table thead th,
.credential-table-wrap thead th,
.certificate-record-table thead th {
  position: sticky;
  z-index: 2;
  top: 0;
}

.view-state,
.view-empty-state {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(100%, 680px);
  min-height: 240px;
  margin: clamp(24px, 6vh, 72px) auto;
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid var(--line, #d8dee6);
  border-radius: var(--radius, 8px);
  background: var(--surface, #fff);
  color: var(--text, #15324a);
  text-align: center;
}

.view-empty-state {
  width: 100%;
  min-height: 180px;
  margin: 0;
  border-style: dashed;
  background: var(--surface-soft, #f6f8fa);
}

.view-state h1,
.view-empty-state h2 {
  margin: 0;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.25;
}

.view-state p,
.view-empty-state p {
  max-width: 56ch;
  margin: 6px auto 0;
  color: var(--muted, #617286);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.view-state-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent, #caa85e) 55%, var(--line, #d8dee6));
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, #caa85e) 10%, var(--surface, #fff));
}

.view-state-icon img {
  width: 21px;
  height: 21px;
}

.view-state-error {
  border-color: color-mix(in srgb, var(--danger, #b42318) 35%, var(--line, #d8dee6));
}

.empty-table:has(.view-empty-state) {
  height: auto;
  padding: 12px;
}

.empty-table .view-empty-state {
  min-width: min(640px, calc(100vw - 80px));
}

.field-validation-message {
  display: block;
  margin-top: 5px;
  color: var(--danger, #b42318);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}

:where(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--danger, #b42318) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger, #b42318) 14%, transparent);
}

@media (max-width: 760px) {
  .view-state,
  .view-empty-state {
    min-height: 180px;
    padding: 24px 16px;
  }

  .empty-table .view-empty-state {
    min-width: min(620px, calc(100vw - 48px));
  }
}

/* Content visibility and overflow corrections */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video,
iframe,
canvas {
  max-width: 100%;
}

.page-shell,
.student-app-shell,
.student-main-frame,
.student-content-area,
.admin-layout,
.admin-main,
.admin-content-panel,
.profile-shell,
.certifications-shell,
.lesson-layout,
.lesson-main,
.content-section {
  min-width: 0;
}

.student-content-area > *,
.admin-main > *,
.lesson-main > * {
  max-width: 100%;
}

.student-main-frame,
.admin-main {
  overflow-x: clip;
}

.student-page-heading h2,
.student-topbar h1,
.admin-page-heading h1,
.course-section-heading h2,
.section-heading h2,
.profile-header-card h1,
.certifications-header h1,
.lesson-header h1,
.student-course-card h3,
.lesson-card h3 {
  overflow-wrap: anywhere;
}

.student-page-heading,
.student-topbar,
.admin-page-heading,
.section-heading,
.course-section-heading,
.profile-section-heading,
.certifications-header {
  min-width: 0;
}

.student-topbar > div:first-child,
.student-page-heading > div,
.admin-page-heading > div,
.course-section-heading > div,
.section-heading > div {
  min-width: 0;
}

.student-topbar-actions,
.admin-heading-actions,
.admin-row-actions,
.certificate-record-actions,
.dialog-actions {
  min-width: 0;
}

.admin-content-panel,
.profile-card,
.certifications-page,
.video-panel,
.information-panel,
.certificate-requests-panel,
.certificate-register-panel {
  padding: clamp(16px, 1.6vw, 24px);
}

.dashboard-hero,
.profile-header-card,
.lesson-header {
  padding: clamp(22px, 2.4vw, 34px);
}

.student-course-card,
.lesson-card,
.insight-card,
.admin-summary-card,
.admin-stat-card {
  overflow: hidden;
}

.student-course-card p,
.lesson-card p,
.certification-list-copy p,
.admin-summary-card span,
.admin-stat-card span {
  overflow-wrap: anywhere;
}

.student-course-card dl,
.student-meta-grid,
.student-detail-grid,
.profile-status-grid,
.lesson-time-summary,
.certificate-data,
.verification-card dl {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}

.profile-form-grid,
.certificate-template-form-grid,
.student-admin-toolbar,
.certificate-admin-toolbar,
.admin-filter-bar,
.admin-video-form,
.upload-methods,
.course-list-filters {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.form-span-2,
.profile-form-grid .form-span-2,
.certificate-template-form-grid .form-span-2 {
  grid-column: 1 / -1;
}

.admin-table-wrap,
.credential-table-wrap,
.certificate-record-table,
.rich-content table,
.certificate-preview-sheet {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-table,
.certificate-record-table {
  min-width: 980px;
}

.admin-table th,
.admin-table td,
.certificate-record-row {
  vertical-align: middle;
}

.certificate-record-row {
  min-width: 980px;
}

.certificate-admin-grid,
.certificate-model-grid,
.certificate-student-grid,
.course-admin-layout,
.admin-content-overview,
.student-detail-columns,
.submission-columns,
.answer-comparison-grid {
  min-width: 0;
}

.certificate-preview-dialog {
  width: min(98vw, 1180px);
  padding: clamp(14px, 2vw, 28px);
}

.certificate-preview-dialog .certificate-preview-sheet {
  padding: clamp(8px, 1vw, 14px);
}

.dialog-card {
  max-height: min(92vh, 900px);
  overflow: auto;
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.file-control,
.uploaded-file,
.admin-file-card,
.certificate-payment-conditions div {
  min-width: 0;
}

.uploaded-file,
.admin-file-card {
  overflow-wrap: anywhere;
}

.lesson-navigation {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.lesson-navigation button,
.lesson-navigation a {
  min-height: 38px;
}

@media (max-width: 1280px) {
  :root {
    --admin-sidebar-width: 232px;
    --student-sidebar-width: 232px;
  }

  .global-search input {
    width: clamp(210px, 20vw, 300px);
  }

  .dashboard-hero {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
    gap: 24px;
  }
}

@media (max-width: 980px) {
  .student-topbar {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 14px;
  }

  .student-topbar-actions {
    width: 100%;
  }

  .global-search {
    flex: 1 1 auto;
  }

  .global-search input {
    width: 100%;
  }

  .dashboard-hero,
  .profile-header-card,
  .certification-list-item,
  .student-detail-header,
  .student-card-header {
    grid-template-columns: 1fr;
  }

  .course-admin-layout,
  .certificate-admin-grid,
  .certificate-model-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .site-header {
    min-height: 62px;
  }

  .site-header-actions {
    flex-shrink: 0;
  }

  .student-sidebar {
    margin: 0;
    border-radius: 0;
  }

  .student-nav a,
  .admin-nav {
    min-height: 44px;
  }

  .student-page-heading {
    padding-top: 20px;
  }

  .student-page-heading h2,
  .admin-page-heading h1 {
    font-size: clamp(24px, 8vw, 30px);
  }

  .admin-content-panel,
  .profile-card,
  .certifications-page,
  .video-panel,
  .information-panel,
  .certificate-requests-panel,
  .certificate-register-panel {
    padding: 16px;
  }

  .dashboard-hero,
  .profile-header-card,
  .lesson-header {
    padding: 18px;
  }

  .dialog-card {
    width: min(100%, calc(100vw - 24px));
    padding: 22px 18px;
  }

  .dialog-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .dialog-actions .button {
    width: 100%;
  }

  .admin-table,
  .certificate-record-row {
    min-width: 760px;
  }

  .certificate-preview-inner {
    min-width: 680px;
  }

  .certificate-document-professional {
    min-width: 800px;
  }
}

/* Student pages and typography corrections */
.student-sidebar {
  top: 0;
  height: 100%;
  min-height: calc(100vh - 68px);
}

.student-topbar {
  min-height: 64px;
  top: 68px;
}

.student-topbar h1 {
  font-size: clamp(19px, 1.35vw, 24px);
  line-height: 1.15;
}

.breadcrumb-line {
  font-size: 11px;
}

.student-page-heading {
  padding-top: 18px;
  padding-bottom: 12px;
}

.student-page-heading h2 {
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.18;
}

.hero-greeting {
  max-width: 760px;
  font-size: clamp(23px, 1.9vw, 30px);
  line-height: 1.22;
}

.dashboard-hero {
  min-height: 190px;
  padding: clamp(24px, 2.2vw, 34px);
}

.dashboard-hero p:not(.eyebrow) {
  font-size: 15px;
  line-height: 1.5;
}

.progress-summary > strong {
  font-size: clamp(38px, 3vw, 48px);
}

.section-heading h2,
.course-section-heading h2,
.certifications-header h1 {
  font-size: clamp(22px, 1.8vw, 28px);
}

.student-course-card h3,
.lesson-card h3,
.student-status-row h3 {
  font-size: 16px;
  line-height: 1.25;
}

.student-course-card p,
.lesson-card p,
.student-status-row p {
  font-size: 14px;
  line-height: 1.5;
}

.student-app-shell .dashboard-hero,
.student-app-shell .dashboard-insights,
.student-app-shell .student-courses-panel,
.student-app-shell .student-submission-panel,
.student-app-shell .student-grade-panel,
.student-app-shell .video-panel,
.student-app-shell .lesson-section-heading,
.student-app-shell .lesson-grid,
.student-app-shell .information-panel {
  display: none;
}

.student-view-overview .dashboard-hero,
.student-view-overview .dashboard-insights,
.student-view-overview .information-panel,
.student-view-courses .student-courses-panel,
.student-view-submissions .student-submission-panel,
.student-view-grades .student-grade-panel {
  display: block;
}

.student-view-overview .dashboard-hero {
  display: grid;
}

.student-view-overview .dashboard-insights {
  display: grid;
}

.student-view-lessons .video-panel,
.student-view-lessons .lesson-section-heading {
  display: block;
}

.student-view-lessons .lesson-grid {
  display: grid;
}

.student-view-grades .dashboard-insights {
  display: grid;
  margin-top: 0;
}

.student-status-list {
  display: grid;
  gap: 10px;
}

.student-status-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.student-status-index {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface));
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.student-status-row h3,
.student-status-row p {
  margin: 0;
}

.student-status-row p {
  color: var(--muted);
}

.student-score-value {
  color: var(--primary);
  font-size: 20px;
}

.student-status-actions {
  display: flex;
  justify-content: flex-end;
}

.student-nav a {
  font-size: 13px;
}

.student-sidebar-heading strong,
.student-sidebar-profile strong {
  font-size: 14px;
}

@media (max-width: 980px) {
  .student-sidebar {
    height: auto;
    min-height: 0;
  }

  .student-status-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .student-status-row .status-pill,
  .student-status-row .student-score-value,
  .student-status-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .student-topbar h1 {
    font-size: 20px;
  }

  .hero-greeting {
    font-size: 24px;
  }

  .dashboard-hero {
    padding: 18px;
  }
}

/* Student workspace final layout pass */
#app:has(.student-app-shell) {
  width: 100%;
  padding: 0;
}

.student-app-shell {
  min-height: calc(100vh - 68px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.student-sidebar {
  top: 68px;
  height: calc(100vh - 68px);
  min-height: 0;
  border-right: 1px solid rgba(234, 199, 139, .18);
}

.student-main-frame {
  background: linear-gradient(180deg, rgba(255, 248, 228, .48), var(--surface) 220px);
}

.student-topbar {
  top: 68px;
  min-height: 62px;
  background: rgba(255, 255, 255, .92);
}

.student-topbar h1 {
  font-size: clamp(18px, 1.25vw, 22px);
  letter-spacing: 0;
}

.student-content-area {
  display: grid;
  gap: 16px;
}

.dashboard-hero {
  min-height: 200px;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
}

.hero-greeting {
  font-size: clamp(24px, 1.8vw, 30px);
}

.icon-button img {
  width: 19px;
  height: 19px;
  object-fit: contain;
}

.student-course-list {
  align-items: stretch;
}

.student-course-card,
.student-status-row,
.insight-card,
.video-panel,
.information-panel {
  border-radius: var(--radius);
}

.student-status-row {
  min-height: 76px;
}

.student-status-row .button {
  min-width: 132px;
}

.student-view-overview .student-page-heading {
  display: none;
}

@media (max-width: 1120px) {
  .student-sidebar {
    top: auto;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(234, 199, 139, .18);
  }

  .student-topbar {
    top: 68px;
  }
}

@media (max-width: 720px) {
  #app:has(.student-app-shell) {
    width: 100%;
    padding: 0;
  }

  .student-app-shell {
    min-height: calc(100vh - 62px);
  }

  .student-sidebar {
    display: none;
  }

  .student-sidebar-heading,
  .student-sidebar-profile {
    min-width: 180px;
  }

  .student-topbar {
    padding: 14px;
  }

  .student-page-heading,
  .student-content-area {
    padding-inline: 14px;
  }

  .dashboard-hero {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .hero-greeting {
    font-size: 23px;
  }

  .student-status-row {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
  }
}

/* Platform-wide UX cleanup */
#adminApp.page-shell,
#app.page-shell {
  max-width: none;
}

#adminApp.page-shell {
  width: 100%;
  padding: 0;
}

.auth-shell {
  min-height: calc(100vh - 68px);
  padding: clamp(24px, 5vw, 56px) 16px;
}

.auth-card-modern {
  width: min(100%, 560px);
}

.auth-card h1,
.admin-login-title {
  font-size: clamp(28px, 2.5vw, 40px);
  line-height: 1.12;
}

.auth-description {
  font-size: 15px;
  line-height: 1.65;
}

.site-header {
  padding-inline: clamp(14px, 2vw, 28px);
}

.theme-toggle-icon {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.admin-layout {
  min-height: calc(100vh - 68px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.admin-sidebar {
  top: 68px;
  height: calc(100vh - 68px);
  max-height: none;
  border-right: 1px solid rgba(234, 199, 139, .18);
}

.admin-main {
  min-width: 0;
  padding: clamp(18px, 2vw, 32px);
  overflow: clip visible;
}

.admin-page-heading {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.admin-page-heading h1,
.section-heading h2,
.course-section-heading h2 {
  font-size: clamp(22px, 1.8vw, 30px);
  line-height: 1.16;
}

.admin-page-heading p:not(.eyebrow),
.section-heading p:not(.eyebrow),
.course-section-heading p:not(.eyebrow) {
  max-width: 820px;
  color: var(--muted);
  line-height: 1.55;
}

.admin-content-panel,
.certificate-requests-panel,
.certificate-register-panel,
.course-management-panel,
.survey-admin-panel,
.profile-card,
.certifications-page,
.video-panel,
.information-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.admin-content-panel + .admin-content-panel,
.certificate-requests-panel + .certificate-register-panel,
.survey-admin-panel + .survey-admin-panel {
  margin-top: 16px;
}

.admin-summary-grid,
.dashboard-insights {
  margin-top: 0;
}

.button,
.text-button,
.admin-nav,
.student-nav a,
.mobile-menu button {
  letter-spacing: 0;
}

.button {
  min-height: 40px;
}

.button-small {
  min-height: 34px;
}

.admin-table-wrap,
.credential-table-wrap,
.certificate-record-table {
  max-height: min(68vh, 760px);
}

.admin-table th,
.admin-table td {
  white-space: nowrap;
}

.admin-table td:nth-child(2),
.admin-table td:nth-child(3),
.admin-table td:nth-child(4) {
  white-space: normal;
}

.dialog-overlay {
  padding: 16px;
}

.dialog-card {
  width: min(100%, 760px);
  max-height: calc(100vh - 32px);
}

.student-detail-dialog-wide,
.course-lesson-dialog,
.survey-editor-dialog,
.certificate-preview-dialog {
  width: min(100%, 1180px);
}

.certificate-preview-dialog {
  overflow: auto;
}

.certificate-preview-sheet {
  margin-inline: auto;
}

.certification-list-item,
.survey-admin-row,
.survey-response-card,
.student-status-row {
  box-shadow: none;
}

.certification-list-actions,
.admin-row-actions,
.dialog-actions {
  align-items: center;
}

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

  .admin-sidebar {
    position: static;
    display: flex;
    height: auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid rgba(234, 199, 139, .18);
  }

  .admin-sidebar-heading {
    flex: 0 0 230px;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .admin-nav {
    flex: 0 0 auto;
    min-width: 150px;
  }

  .admin-main {
    padding: 18px;
  }
}

@media (max-width: 720px) {
  .site-brand-copy small {
    display: none;
  }

  .admin-sidebar {
    padding: 10px;
  }

  .admin-sidebar-heading {
    flex-basis: 190px;
  }

  .admin-nav {
    min-width: 132px;
  }

  .admin-main {
    padding: 14px;
  }

  .admin-page-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-page-heading h1,
  .student-page-heading h2,
  .certifications-header h1 {
    font-size: 24px;
  }

  .admin-content-panel,
  .certificate-requests-panel,
  .certificate-register-panel,
  .course-management-panel,
  .survey-admin-panel,
  .profile-card,
  .certifications-page,
  .video-panel,
  .information-panel {
    padding: 14px;
  }

  .admin-table-wrap,
  .credential-table-wrap,
  .certificate-record-table {
    max-height: none;
  }
}

body:has(.student-app-shell),
body:has(.admin-layout),
body:has(.lesson-layout),
body:has(.certifications-shell) {
  background: var(--workspace-bg);
  color: var(--workspace-text);
  font-size: 14px;
}

body:has(.student-app-shell) .site-header,
body:has(.admin-layout) .site-header,
body:has(.lesson-layout) .site-header,
body:has(.certifications-shell) .site-header {
  min-height: 48px;
  padding-inline: 14px;
  border-bottom: 1px solid var(--workspace-line);
  background: rgba(11, 13, 14, .94);
  color: var(--workspace-text);
  backdrop-filter: blur(18px);
}

body:has(.student-app-shell) .site-brand-symbol,
body:has(.admin-layout) .site-brand-symbol,
body:has(.lesson-layout) .site-brand-symbol,
body:has(.certifications-shell) .site-brand-symbol {
  width: 30px;
  height: 30px;
  border-color: transparent;
  border-radius: 7px;
  background: var(--workspace-accent);
  color: #05110c;
  box-shadow: none;
}

body:has(.student-app-shell) .site-brand-copy strong,
body:has(.admin-layout) .site-brand-copy strong,
body:has(.lesson-layout) .site-brand-copy strong,
body:has(.certifications-shell) .site-brand-copy strong {
  color: var(--workspace-text);
  font-size: 13px;
}

body:has(.student-app-shell) .site-brand-copy small,
body:has(.admin-layout) .site-brand-copy small,
body:has(.lesson-layout) .site-brand-copy small,
body:has(.certifications-shell) .site-brand-copy small {
  color: var(--workspace-muted);
  font-size: 11px;
}

.student-app-shell,
.admin-layout {
  min-height: calc(100vh - 48px);
  background: var(--workspace-bg);
}

.student-main-frame,
.admin-main {
  background: var(--workspace-bg);
  color: var(--workspace-text);
}

.student-sidebar,
.admin-sidebar {
  top: 48px;
  height: calc(100vh - 48px);
  padding: 12px 8px;
  border-color: var(--workspace-line);
  background: #0f1111;
  color: var(--workspace-text);
}

.student-sidebar-heading,
.admin-sidebar-heading {
  gap: 10px;
  padding: 4px 8px 12px;
  border-bottom: 1px solid var(--workspace-line);
}

.student-sidebar-symbol,
.admin-sidebar-symbol {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: var(--workspace-accent);
  color: #05110c;
  box-shadow: none;
}

.student-sidebar-heading strong,
.student-sidebar-profile strong,
.admin-sidebar h2 {
  color: var(--workspace-text);
  font-size: 13px;
}

.student-sidebar-heading small,
.student-sidebar-profile small {
  color: var(--workspace-muted);
  font-size: 11px;
}

.student-nav p {
  margin: 8px 10px 4px;
  color: var(--workspace-muted);
  font-size: 10px;
  letter-spacing: .08em;
}

.student-nav a,
.admin-nav {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 650;
}

.student-nav img,
.admin-nav img {
  width: 16px;
  height: 16px;
  opacity: .84;
}

.student-nav a:hover,
.student-nav a.is-active,
.admin-nav:hover,
.admin-nav.is-active {
  background: rgba(255, 255, 255, .075);
  color: var(--workspace-text);
}

.student-nav a.is-active::before,
.admin-nav.is-active::before {
  background: var(--workspace-accent);
}

.student-sidebar-profile {
  padding: 9px;
  border-color: var(--workspace-line);
  background: var(--workspace-panel);
}

.student-topbar {
  top: 48px;
  min-height: 52px;
  padding: 0 22px;
  border-bottom: 1px solid var(--workspace-line);
  background: rgba(11, 13, 14, .88);
  color: var(--workspace-text);
}

.student-topbar h1,
.admin-page-heading h1,
.student-page-heading h2,
.section-heading h2,
.course-section-heading h2,
.certifications-header h1 {
  color: var(--workspace-text);
  font-size: clamp(19px, 1.35vw, 24px);
  line-height: 1.18;
}

.breadcrumb-line,
.student-page-heading p:not(.eyebrow),
.admin-page-heading p:not(.eyebrow),
.section-heading p:not(.eyebrow),
.course-section-heading p:not(.eyebrow),
.certifications-header p,
.video-panel-copy p:not(.eyebrow),
.student-course-card p,
.student-status-row p {
  color: var(--workspace-muted);
}

.student-page-heading,
.admin-page-heading {
  padding-top: 24px;
  padding-bottom: 14px;
  border-color: var(--workspace-line);
}

.student-content-area,
.admin-main {
  padding-inline: clamp(20px, 2.6vw, 48px);
  padding-bottom: 44px;
}

.dashboard-hero,
.progress-summary,
.insight-card,
.student-course-card,
.student-status-row,
.video-panel,
.information-panel,
.admin-content-panel,
.course-management-panel,
.certificate-requests-panel,
.certificate-register-panel,
.survey-admin-panel,
.profile-card,
.profile-header-card,
.certifications-page,
.certification-list-item,
.survey-admin-row,
.survey-response-card,
.dialog-card {
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius);
  background: var(--workspace-panel);
  color: var(--workspace-text);
  box-shadow: none;
}

.dashboard-hero {
  min-height: 210px;
  border-color: var(--workspace-line-strong);
  background:
    linear-gradient(145deg, rgba(62, 207, 142, .08), transparent 34%),
    var(--workspace-panel);
}

.hero-greeting {
  max-width: 800px;
  color: var(--workspace-text);
  font-size: clamp(23px, 1.8vw, 30px);
}

.hero-meta span,
.status-pill,
.submission-status-pill,
.certificate-generation-pill {
  border-color: var(--workspace-line);
  border-radius: 6px;
  background: var(--workspace-panel-soft);
  color: var(--workspace-muted);
  font-size: 11px;
}

.progress-track {
  background: var(--workspace-elevated);
}

.progress-track span {
  background: var(--workspace-accent);
}

.progress-summary > strong,
.student-score-value,
.student-course-card dd,
.insight-card strong,
.admin-summary-card strong,
.admin-stat-card strong {
  color: var(--workspace-text);
}

.button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
}

.button-primary {
  border: 1px solid rgba(62, 207, 142, .35);
  background: #087443;
  color: #ffffff;
}

.button-primary:hover:not(:disabled) {
  background: #0a8f55;
}

.button-secondary,
.button-light {
  border: 1px solid var(--workspace-line-strong);
  background: var(--workspace-panel-soft);
  color: var(--workspace-text);
}

.button-secondary:hover:not(:disabled),
.button-light:hover:not(:disabled) {
  background: var(--workspace-elevated);
}

.button-danger {
  border: 1px solid rgba(239, 111, 108, .32);
  background: rgba(239, 111, 108, .14);
  color: #ffb8b6;
}

input,
textarea,
select,
.global-search input {
  min-height: 34px;
  border-color: var(--workspace-line-strong);
  border-radius: 6px;
  background: #0d1010;
  color: var(--workspace-text);
  font-size: 13px;
}

input::placeholder,
textarea::placeholder {
  color: #6f7875;
}

.global-search input {
  width: clamp(220px, 22vw, 340px);
}

.icon-button,
.theme-toggle,
.header-user,
.admin-identity {
  border-color: var(--workspace-line);
  border-radius: 999px;
  background: var(--workspace-panel);
  color: var(--workspace-text);
  box-shadow: none;
}

.admin-filter-bar,
.student-admin-toolbar,
.certificate-admin-toolbar {
  border: 1px solid var(--workspace-line);
  border-radius: var(--workspace-radius);
  background: var(--workspace-panel);
}

.admin-table-wrap,
.credential-table-wrap,
.certificate-record-table {
  border-color: var(--workspace-line);
  background: var(--workspace-panel);
}

.admin-table th {
  height: 36px;
  background: var(--workspace-panel-soft);
  color: var(--workspace-muted);
  font-size: 11px;
}

.admin-table td {
  height: 46px;
  border-color: var(--workspace-line);
  color: var(--workspace-text);
  font-size: 12px;
}

.admin-table tbody tr:hover,
.certificate-record-row:hover {
  background: rgba(62, 207, 142, .055);
}

.dialog-overlay {
  background: rgba(0, 0, 0, .76);
}

.dialog-close {
  border-color: var(--workspace-line);
  background: var(--workspace-panel-soft);
  color: var(--workspace-muted);
}

.mobile-menu {
  border-color: var(--workspace-line);
  border-radius: var(--workspace-radius);
  background: var(--workspace-panel);
}

.mobile-menu button {
  color: var(--workspace-text);
}

.mobile-menu button:hover {
  background: rgba(62, 207, 142, .08);
}

@media (max-width: 1120px) {
  .student-sidebar,
  .admin-sidebar {
    top: auto;
    height: auto;
  }

  .student-topbar {
    top: 48px;
  }
}

@media (max-width: 720px) {
  body:has(.student-app-shell) .site-header,
  body:has(.admin-layout) .site-header,
  body:has(.lesson-layout) .site-header,
  body:has(.certifications-shell) .site-header {
    min-height: 52px;
  }

  .student-content-area,
  .admin-main {
    padding-inline: 14px;
  }

  .student-topbar {
    padding: 12px 14px;
  }

  .global-search input {
    width: 100%;
  }
}

/* Supabase-like compact side rails */
@media (min-width: 721px) {
  :root {
    --admin-sidebar-width: 48px;
    --student-sidebar-width: 48px;
  }

  .student-app-shell,
  .admin-layout {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .student-sidebar,
  .admin-sidebar {
    position: sticky;
    z-index: 40;
    top: 48px;
    display: grid;
    width: 48px;
    height: calc(100vh - 48px);
    min-height: 0;
    grid-auto-rows: min-content;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px 6px;
    overflow: visible;
    border-right: 1px solid var(--workspace-line);
    border-bottom: 0;
    background: #0d0f0f;
  }

  .admin-sidebar {
    align-content: start;
    grid-template-rows: auto;
  }

  .student-sidebar-heading,
  .admin-sidebar-heading {
    display: grid;
    min-width: 0;
    justify-content: center;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--workspace-line);
  }

  .student-sidebar-heading > div,
  .admin-sidebar-heading h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .student-sidebar-symbol,
  .admin-sidebar-symbol {
    width: 28px;
    height: 28px;
    border-radius: 7px;
  }

  .student-nav {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 6px;
  }

  .student-nav p {
    display: none;
  }

  .student-nav a,
  .admin-nav {
    position: relative;
    display: grid;
    width: 34px;
    min-width: 0;
    height: 34px;
    min-height: 34px;
    justify-content: center;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
  }

  .student-nav a::before,
  .admin-nav::before {
    display: none;
  }

  .student-nav a:hover,
  .student-nav a.is-active,
  .admin-nav:hover,
  .admin-nav.is-active {
    border-color: var(--workspace-line);
    background: var(--workspace-elevated);
  }

  .student-nav a.is-active,
  .admin-nav.is-active {
    color: var(--workspace-accent);
    box-shadow: inset 0 0 0 1px rgba(62, 207, 142, .26);
  }

  .student-nav img,
  .admin-nav img {
    width: 17px;
    height: 17px;
    margin: 0;
    opacity: .92;
  }

  .student-nav a span,
  .admin-nav span,
  .student-sidebar-profile span {
    position: absolute;
    z-index: 80;
    top: 50%;
    left: calc(100% + 10px);
    max-width: 240px;
    padding: 6px 9px;
    border: 1px solid var(--workspace-line-strong);
    border-radius: 7px;
    background: #171b1b;
    color: var(--workspace-text);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    text-overflow: ellipsis;
    transform: translate3d(-4px, -50%, 0);
    transition: opacity .12s ease, transform .12s ease;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
  }

  .student-sidebar-profile span {
    display: grid;
    min-width: 190px;
    gap: 2px;
  }

  .student-sidebar-profile span strong,
  .student-sidebar-profile span small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .student-nav a:hover span,
  .student-nav a:focus-visible span,
  .admin-nav:hover span,
  .admin-nav:focus-visible span,
  .student-sidebar-profile:hover span,
  .student-sidebar-profile:focus-visible span {
    opacity: 1;
    transform: translate3d(0, -50%, 0);
  }

  .student-sidebar-profile {
    position: relative;
    display: grid;
    width: 34px;
    height: 34px;
    align-self: end;
    justify-self: center;
    padding: 0;
    place-items: center;
    border-radius: 999px;
    background: transparent;
  }

  .student-sidebar-avatar {
    width: 28px;
    height: 28px;
  }

  .student-topbar,
  .admin-main {
    margin-left: 0;
  }
}

/* Supabase-like fixed chrome */
@media (min-width: 721px) {
  body:has(.student-app-shell),
  body:has(.admin-layout) {
    overflow-x: hidden;
  }

  body:has(.student-app-shell) .site-header,
  body:has(.admin-layout) .site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 120;
    min-height: 48px;
    height: 48px;
  }

  body:has(.student-app-shell) .page-shell,
  body:has(.admin-layout) .page-shell,
  #app:has(.student-app-shell),
  #adminApp:has(.admin-layout) {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 48px 0 0;
  }

  .student-app-shell,
  .admin-layout {
    display: block;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
  }

  .student-sidebar,
  .admin-sidebar {
    position: fixed;
    inset: 48px auto 0 0;
    z-index: 110;
    height: calc(100vh - 48px);
    max-height: none;
  }

  .student-main-frame,
  .admin-main {
    width: calc(100% - 48px);
    min-height: calc(100vh - 48px);
    margin-left: 48px;
  }

  .student-topbar {
    position: fixed;
    inset: 48px 0 auto 48px;
    z-index: 100;
    min-height: 52px;
    height: 52px;
  }

  .student-page-heading,
  .student-content-area {
    padding-inline: clamp(20px, 2.2vw, 32px);
  }

  .student-main-frame {
    padding-top: 52px;
  }

  .admin-main {
    padding-top: clamp(18px, 2vw, 32px);
  }
}

html,
body {
  min-width: 0;
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

body:has(.student-app-shell),
body:has(.admin-layout),
body:has(.lesson-layout),
body:has(.certifications-shell) {
  --workspace-sidebar-current: var(--workspace-sidebar-expanded);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
}

body.sidebar-collapsed:has(.student-app-shell),
body.sidebar-collapsed:has(.admin-layout) {
  --workspace-sidebar-current: 72px;
}

h1,
h2,
h3,
h4,
.hero-greeting,
.site-brand-copy strong,
.admin-sidebar h2 {
  color: var(--text);
  font-family: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.02em;
}

p {
  max-width: 75ch;
}

button,
.button,
.text-button,
.admin-nav,
.student-nav a {
  font-size: 14px;
  font-weight: 500;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#app.page-shell,
#adminApp.page-shell,
#app:has(.student-app-shell),
#adminApp:has(.admin-layout) {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: var(--app-header-height) 0 0;
}

/* Global application bar */
.site-header,
body:has(.student-app-shell) .site-header,
body:has(.admin-layout) .site-header,
body:has(.lesson-layout) .site-header,
body:has(.certifications-shell) .site-header {
  position: fixed;
  z-index: 140;
  inset: 0 0 auto;
  min-height: var(--app-header-height);
  height: var(--app-header-height);
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  color: var(--text);
  backdrop-filter: blur(18px);
}

.site-brand {
  min-width: 0;
  gap: 10px;
}

.site-brand-symbol,
body:has(.student-app-shell) .site-brand-symbol,
body:has(.admin-layout) .site-brand-symbol,
body:has(.lesson-layout) .site-brand-symbol,
body:has(.certifications-shell) .site-brand-symbol {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(201, 165, 91, .36);
  border-radius: 8px;
  background: #00365b;
  color: #fff8e4;
  font-size: 10px;
  box-shadow: none;
}

.site-brand-copy strong,
body:has(.student-app-shell) .site-brand-copy strong,
body:has(.admin-layout) .site-brand-copy strong,
body:has(.lesson-layout) .site-brand-copy strong,
body:has(.certifications-shell) .site-brand-copy strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.site-brand-copy small,
body:has(.student-app-shell) .site-brand-copy small,
body:has(.admin-layout) .site-brand-copy small,
body:has(.lesson-layout) .site-brand-copy small,
body:has(.certifications-shell) .site-brand-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.site-header-actions {
  min-width: 0;
  gap: 8px;
}

.theme-toggle,
.header-user,
.icon-button,
.mobile-menu-button,
body:has(.student-app-shell) .theme-toggle,
body:has(.admin-layout) .theme-toggle,
body:has(.student-app-shell) .header-user,
body:has(.student-app-shell) .icon-button {
  display: inline-grid;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.theme-toggle:hover,
.icon-button:hover,
.mobile-menu-button:hover {
  transform: none;
  border-color: rgba(201, 165, 91, .48);
  background: var(--surface-soft);
}

.theme-toggle-icon,
.theme-toggle-icon img,
.mobile-menu-button img {
  display: block;
  width: 18px;
  height: 18px;
}

.admin-identity,
body:has(.admin-layout) .admin-identity {
  max-width: min(30vw, 300px);
  min-height: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}

.site-header .text-button {
  min-height: 38px;
  padding: 0 10px;
  color: var(--text);
}

/* Fixed, collapsible sidebars */
.student-app-shell,
.admin-layout {
  display: block;
  min-height: calc(100vh - var(--app-header-height));
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
}

.student-sidebar,
.admin-sidebar {
  position: fixed;
  z-index: 120;
  inset: var(--app-header-height) auto 0 0;
  display: flex;
  width: var(--workspace-sidebar-current);
  height: calc(100vh - var(--app-header-height));
  max-height: none;
  min-height: 0;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-right: 1px solid rgba(234, 199, 139, .20);
  border-radius: 0;
  background: #00365b;
  color: #fff8e4;
  box-shadow: none;
  transition: width .18s ease, transform .2s ease;
}

.student-sidebar-heading,
.admin-sidebar-heading {
  display: flex;
  min-height: 48px;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  padding: 0 8px 12px;
  border-bottom: 1px solid rgba(255, 248, 228, .16);
}

.student-sidebar-heading > div,
.admin-sidebar-heading h2 {
  position: static;
  width: auto;
  height: auto;
  min-width: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  color: #fff8e4;
  white-space: normal;
}

.admin-sidebar-heading h2 {
  font-size: 14px;
  line-height: 1.3;
}

.student-sidebar-heading strong {
  color: #fff8e4;
  font-size: 14px;
  font-weight: 600;
}

.student-sidebar-heading small {
  color: rgba(255, 248, 228, .68);
  font-size: 12px;
  font-weight: 500;
}

.student-sidebar-symbol,
.admin-sidebar-symbol {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid rgba(201, 165, 91, .5);
  border-radius: 8px;
  background: #fff8e4;
  color: #00365b;
  font-size: 10px;
  box-shadow: none;
}

.student-nav {
  display: grid;
  min-height: 0;
  align-content: start;
  flex: 1 1 auto;
  gap: 4px;
}

.student-nav p {
  margin: 12px 10px 6px;
  color: rgba(255, 248, 228, .58);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
}

.student-nav a,
.admin-nav {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  height: 42px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  margin: 0;
  padding: 0 11px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 248, 228, .76);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  box-shadow: none;
}

.student-nav a::before,
.admin-nav::before {
  display: none;
}

.student-nav a > img,
.admin-nav > img,
.sidebar-collapse-button > img {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 0;
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(94%) sepia(17%) saturate(399%) hue-rotate(342deg) brightness(106%) contrast(102%);
}

.student-nav a > span,
.admin-nav > span,
.student-sidebar-profile > span {
  position: static;
  width: auto;
  height: auto;
  min-width: 0;
  max-width: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.3;
  opacity: 1;
  pointer-events: auto;
  text-overflow: ellipsis;
  transform: none;
  white-space: nowrap;
  box-shadow: none;
}

.student-nav a:hover,
.student-nav a.is-active,
.admin-nav:hover,
.admin-nav.is-active {
  border-color: rgba(234, 199, 139, .18);
  background: rgba(201, 165, 91, .16);
  color: #fff8e4;
  box-shadow: none;
}

.student-nav a.is-active,
.admin-nav.is-active {
  box-shadow: inset 3px 0 0 #c9a55b;
}

.student-nav a.is-active > img,
.admin-nav.is-active > img {
  filter: brightness(0) saturate(100%) invert(67%) sepia(27%) saturate(752%) hue-rotate(2deg) brightness(94%) contrast(86%);
}

.sidebar-collapse-button {
  display: flex;
  width: 100%;
  min-height: 42px;
  flex: 0 0 auto;
  align-items: center;
  gap: 11px;
  padding: 0 11px;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 228, .16);
  border-radius: 6px;
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 248, 228, .76);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}

.sidebar-collapse-button:hover {
  background: rgba(201, 165, 91, .14);
  color: #fff8e4;
}

.sidebar-collapse-button img {
  transition: transform .18s ease;
}

.student-sidebar-profile {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 52px;
  height: auto;
  flex: 0 0 auto;
  align-self: stretch;
  justify-self: auto;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 7px 9px;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 228, .15);
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  color: #fff8e4;
  text-decoration: none;
}

.student-sidebar-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

.student-sidebar-profile strong {
  color: #fff8e4;
  font-size: 13px;
  font-weight: 600;
}

.student-sidebar-profile small {
  color: rgba(255, 248, 228, .62);
  font-size: 11px;
  font-weight: 500;
}

body.sidebar-collapsed .student-sidebar-heading > div,
body.sidebar-collapsed .admin-sidebar-heading h2,
body.sidebar-collapsed .student-nav p,
body.sidebar-collapsed .student-nav a > span,
body.sidebar-collapsed .admin-nav > span,
body.sidebar-collapsed .sidebar-collapse-button > span,
body.sidebar-collapsed .student-sidebar-profile > span {
  display: none;
}

body.sidebar-collapsed .student-sidebar-heading,
body.sidebar-collapsed .admin-sidebar-heading {
  justify-content: center;
  padding-inline: 0;
}

body.sidebar-collapsed .student-nav a,
body.sidebar-collapsed .admin-nav,
body.sidebar-collapsed .sidebar-collapse-button,
body.sidebar-collapsed .student-sidebar-profile {
  justify-content: center;
  padding-inline: 0;
}

body.sidebar-collapsed .sidebar-collapse-button img {
  transform: rotate(180deg);
}

/* Centered workspace and top bar */
.student-main-frame,
.admin-main {
  width: calc(100% - var(--workspace-sidebar-current));
  min-width: 0;
  min-height: calc(100vh - var(--app-header-height));
  margin-left: var(--workspace-sidebar-current);
  background: var(--bg);
  color: var(--text);
  transition: width .18s ease, margin-left .18s ease;
}

.student-main-frame {
  padding-top: 66px;
}

.student-topbar {
  position: fixed;
  z-index: 110;
  inset: var(--app-header-height) 0 auto var(--workspace-sidebar-current);
  display: flex;
  min-height: 66px;
  height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 max(32px, calc((100vw - var(--workspace-sidebar-current) - var(--workspace-content-max)) / 2));
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--text);
  backdrop-filter: blur(16px);
  transition: left .18s ease;
}

.student-topbar h1,
.student-page-heading h2,
.admin-page-heading h1,
.certifications-header h1 {
  color: var(--text);
}

.student-topbar h1 {
  margin: 2px 0 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.breadcrumb-line {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.student-topbar-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.global-search {
  position: relative;
  min-width: 0;
}

.global-search input {
  width: clamp(230px, 25vw, 360px);
  min-height: 40px;
  height: 40px;
  padding-left: 38px;
  border-color: var(--line);
  background-color: var(--surface);
  background-image: url("https://api.iconify.design/lucide/search.svg?color=%2300365B");
  background-repeat: no-repeat;
  background-position: 13px center;
  background-size: 17px 17px;
  color: var(--text);
  font-size: 14px;
}

:root[data-theme="dark"] .global-search input {
  background-image: url("https://api.iconify.design/lucide/search.svg?color=%23FFF8E4");
}

.student-page-heading,
.student-content-area {
  width: min(calc(100% - 64px), var(--workspace-content-max));
  max-width: var(--workspace-content-max);
  margin-inline: auto;
  padding-inline: 0;
}

.student-page-heading {
  padding-top: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.student-page-heading h2,
.admin-page-heading h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 2.2vw, 32px);
  font-weight: 600;
  line-height: 1.2;
}

.student-page-heading p:not(.eyebrow),
.admin-page-heading p:not(.eyebrow),
.section-heading p:not(.eyebrow),
.course-section-heading p:not(.eyebrow) {
  max-width: 75ch;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.student-content-area {
  display: grid;
  gap: 24px;
  padding-top: 24px;
  padding-bottom: 48px;
}

.admin-main {
  padding:
    32px
    max(32px, calc((100vw - var(--workspace-sidebar-current) - var(--workspace-content-max)) / 2))
    48px;
  overflow: visible;
}

.admin-page-heading {
  display: flex;
  min-height: 72px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 24px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
}

.section-heading,
.course-section-heading,
.profile-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 16px;
}

.section-heading h2,
.course-section-heading h2,
.profile-section-heading h2,
.video-panel-copy h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.25;
}

/* Cards, hierarchy and course overview */
.dashboard-hero,
.progress-summary,
.insight-card,
.student-course-card,
.student-status-row,
.video-panel,
.information-panel,
.profile-card,
.profile-header-card,
.certifications-page,
.certification-list-item,
.lesson-card,
.content-section,
.question-card,
.start-assessment-card,
.completion-card,
.review-card,
.upload-panel,
.submission-box,
.admin-content-panel,
.admin-summary-card,
.admin-stat-card,
.admin-course-card,
.course-management-panel,
.course-admin-card,
.course-module-card,
.certificate-requests-panel,
.certificate-register-panel,
.survey-admin-panel,
.survey-admin-row,
.survey-response-card,
.student-admin-card,
.student-enrollment-card,
.student-detail-section,
.admin-file-card,
.credential-management-card,
.dialog-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.dashboard-hero,
body:has(.student-app-shell) .dashboard-hero {
  display: grid;
  min-height: 230px;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 280px);
  gap: 32px;
  align-items: center;
  padding: 28px 30px;
  border-color: rgba(201, 165, 91, .32);
  background:
    linear-gradient(120deg, rgba(234, 199, 139, .15), transparent 40%),
    var(--surface);
}

.dashboard-hero .eyebrow,
.dashboard-hero h1,
.dashboard-hero p:not(.eyebrow) {
  color: var(--text);
}

.hero-copy {
  min-width: 0;
}

.hero-greeting {
  max-width: 28ch;
  margin: 0 0 10px;
  color: var(--text);
  font-size: clamp(26px, 2.2vw, 32px);
  font-weight: 600;
  line-height: 1.22;
}

.dashboard-hero p:not(.eyebrow) {
  max-width: 65ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.hero-meta span {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.progress-summary {
  min-height: 164px;
  padding: 22px;
  border-color: rgba(201, 165, 91, .38);
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--surface));
  text-align: left;
  box-shadow: none;
}

.progress-summary > strong {
  display: block;
  color: var(--text);
  font-size: clamp(42px, 4vw, 52px);
  font-weight: 600;
  line-height: 1;
}

.progress-summary > span {
  margin-top: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.progress-track,
.student-progress-track {
  height: 7px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.progress-track span,
.student-progress-track span {
  background: var(--accent);
}

.dashboard-insights,
.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 0;
}

.student-priority-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.insight-card,
.admin-summary-card,
.admin-stat-card {
  min-height: 110px;
  padding: 20px;
  box-shadow: none;
}

.insight-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.insight-card > img,
.admin-summary-card > img,
.admin-stat-card > img,
.credential-management-card > img {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.insight-card span,
.admin-summary-card span,
.admin-stat-card span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.insight-card strong,
.admin-summary-card strong,
.admin-stat-card strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.18;
}

.priority-card strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.student-courses-panel,
.student-submission-panel,
.student-grade-panel {
  min-width: 0;
}

.student-course-list,
.lesson-grid,
.student-admin-grid,
.admin-course-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 16px;
  overflow: visible;
  padding: 0;
}

.student-course-card,
.lesson-card,
.admin-course-card,
.student-admin-card {
  min-width: 0;
  min-height: 0;
  padding: 20px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.student-course-card:hover,
.lesson-card:hover,
.admin-course-card:hover,
.student-admin-card:hover {
  transform: none;
  border-color: rgba(201, 165, 91, .52);
  box-shadow: 0 7px 20px rgba(0, 54, 91, .07);
}

.student-course-card.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 12%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}

.student-course-card h3,
.lesson-card h3,
.admin-course-card h2,
.student-admin-card h3,
.student-status-row h3 {
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.student-course-card p,
.lesson-card p,
.admin-course-card p,
.student-admin-card p,
.student-status-row p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.student-course-card dl div,
.admin-course-card dl div,
.student-meta-grid div,
.student-detail-grid div,
.student-enrollment-card dl div {
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 8px;
  background: var(--surface-soft);
}

.student-course-card dt,
.admin-course-card dt,
.student-meta-grid dt,
.student-detail-grid dt,
.student-enrollment-card dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.student-course-card dd,
.admin-course-card dd,
.student-meta-grid dd,
.student-detail-grid dd,
.student-enrollment-card dd {
  color: var(--text);
  font-weight: 600;
}

.student-status-list {
  display: grid;
  gap: 10px;
}

.student-status-row {
  display: grid;
  min-height: 76px;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  box-shadow: none;
}

.student-status-index,
.lesson-number {
  display: grid;
  width: 38px;
  height: 38px;
  margin: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

.information-panel,
.video-panel,
.profile-card,
.profile-header-card,
.certifications-page,
.admin-content-panel,
.course-management-panel,
.certificate-requests-panel,
.certificate-register-panel,
.survey-admin-panel {
  margin: 0;
  padding: 22px 24px;
  box-shadow: none;
}

.information-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.information-grid div {
  min-height: 76px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.information-grid strong {
  color: var(--accent);
  font-size: 18px;
}

/* Forms, controls and actions */
input,
select,
textarea,
body:has(.student-app-shell) input,
body:has(.admin-layout) input,
body:has(.student-app-shell) select,
body:has(.admin-layout) select,
body:has(.student-app-shell) textarea,
body:has(.admin-layout) textarea {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background-color: var(--input-bg);
  color: var(--text);
  font-size: 14px;
  box-shadow: none;
}

input,
select {
  height: 42px;
  padding: 0 12px;
}

select {
  appearance: none;
  padding-right: 36px;
  background-image: url("https://api.iconify.design/lucide/chevron-down.svg?color=%2300365B");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

:root[data-theme="dark"] select {
  background-image: url("https://api.iconify.design/lucide/chevron-down.svg?color=%23FFF8E4");
}

textarea {
  min-height: 120px;
  padding: 12px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 165, 91, .16);
}

.form-stack {
  gap: 16px;
}

.form-stack label,
.admin-filter-bar label,
.student-admin-toolbar label,
.certificate-admin-toolbar label,
.admin-video-form label {
  gap: 6px;
}

.form-stack label > span,
.admin-filter-bar label > span,
.student-admin-toolbar label > span,
.certificate-admin-toolbar label > span,
.admin-video-form label > span {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.button,
body:has(.student-app-shell) .button,
body:has(.admin-layout) .button {
  min-height: 42px;
  height: auto;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: none;
}

.button:hover:not(:disabled) {
  transform: none;
}

.button-primary,
body:has(.student-app-shell) .button-primary,
body:has(.admin-layout) .button-primary {
  border: 1px solid #00365b;
  background: #00365b;
  color: #fff8e4;
}

.button-primary:hover:not(:disabled) {
  border-color: #002844;
  background: #002844;
}

.button-secondary,
.button-light,
body:has(.student-app-shell) .button-secondary,
body:has(.student-app-shell) .button-light,
body:has(.admin-layout) .button-secondary {
  border: 1px solid rgba(201, 165, 91, .55);
  background: var(--surface);
  color: var(--text);
}

.button-secondary:hover:not(:disabled),
.button-light:hover:not(:disabled) {
  background: var(--surface-soft);
}

.button-small {
  min-height: 36px;
  padding-inline: 12px;
  font-size: 13px;
}

.button-danger {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--line));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  color: var(--danger);
}

.admin-filter-bar,
.student-admin-toolbar,
.certificate-admin-toolbar {
  gap: 12px;
  margin: 0 0 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
}

.admin-heading-actions,
.admin-row-actions,
.student-admin-actions,
.dialog-actions,
.certification-list-actions {
  gap: 8px;
}

/* Tables and statuses */
.admin-table-wrap,
.credential-table-wrap,
.certificate-record-table {
  max-width: 100%;
  max-height: min(70vh, 760px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
}

.admin-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  height: 52px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  vertical-align: middle;
}

.admin-table th {
  height: 42px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}

.admin-table tbody tr:hover,
.certificate-record-row:hover {
  background: color-mix(in srgb, var(--accent-soft) 12%, transparent);
}

.status-pill,
.submission-status-pill,
.certificate-generation-pill {
  display: inline-flex;
  min-height: 28px;
  width: auto;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border: 1px solid currentColor;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

.status-available,
.status-active {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--text);
}

.status-in-progress {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: #7d5b17;
}

.status-under-review {
  background: #f1eef9;
  color: #6749a0;
}

.status-approved,
.status-completed {
  background: #e8f5ee;
  color: var(--success);
}

.status-correction-required,
.status-time-exceeded,
.status-failed,
.status-deleted,
.status-blocked {
  background: #fff0ef;
  color: var(--danger);
}

/* Lesson, assessment, profile and dialogs */
.lesson-layout {
  width: min(calc(100% - 48px), var(--workspace-content-max));
  max-width: var(--workspace-content-max);
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  gap: 24px;
  margin: 24px auto 48px;
}

.lesson-sidebar {
  position: sticky;
  top: calc(var(--app-header-height) + 24px);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.lesson-back-button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.lesson-back-button img {
  width: 18px;
  height: 18px;
}

.lesson-navigation button,
.lesson-navigation a {
  min-height: 42px;
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

.lesson-main {
  min-width: 0;
}

.lesson-header,
.attempt-header {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.lesson-header h1 {
  max-width: 28ch;
  color: var(--text);
  font-size: clamp(28px, 2.4vw, 32px);
  font-weight: 600;
}

.rich-content {
  max-width: 75ch;
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
}

.content-section,
.question-card,
.upload-panel,
.submission-box {
  padding: 22px 24px;
  box-shadow: none;
}

.option-item,
.upload-dropzone,
.drive-upload-form,
.uploaded-file {
  border-radius: 8px;
}

.upload-dropzone {
  min-height: 168px;
  border-width: 1px;
  background: var(--surface-soft);
}

.upload-icon,
.upload-icon img {
  display: block;
  width: 24px;
  height: 24px;
}

.completion-icon,
.certifications-header-icon {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--text);
}

.completion-icon img,
.certifications-header-icon img {
  width: 28px;
  height: 28px;
}

.profile-shell,
.admin-profile-grid {
  width: 100%;
  max-width: none;
}

.dialog-overlay {
  z-index: 500;
  padding: 20px;
  background: rgba(0, 35, 59, .66);
  backdrop-filter: blur(4px);
}

.dialog-card {
  max-height: calc(100vh - 40px);
  padding: 28px;
  overflow: auto;
}

.dialog-close {
  width: 36px;
  height: 36px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--surface-soft);
  color: transparent;
  font-size: 0;
}

.dialog-close::before {
  content: "\00d7";
  display: block;
  color: var(--primary);
  font-size: 22px;
  font-weight: 400;
  line-height: 32px;
  text-align: center;
}

:root[data-theme="dark"] .dialog-close::before {
  color: var(--text);
}

.admin-content-tabs,
.course-switcher {
  display: flex;
  max-width: 100%;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.admin-content-tabs button,
.course-switcher button {
  min-height: 42px;
  flex: 0 0 auto;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.loading-state {
  min-height: calc(100vh - var(--app-header-height));
  place-items: center;
  color: var(--muted);
}

.spinner {
  width: 42px;
  height: 42px;
  border: 3px solid var(--surface-strong);
  border-top-color: var(--accent);
}

.auth-shell {
  min-height: calc(100vh - var(--app-header-height));
  padding: 48px 16px;
}

.auth-card {
  width: min(100%, 540px);
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.auth-card h1,
.admin-login-title {
  font-size: clamp(28px, 3vw, 32px);
  font-weight: 600;
}

/* Compact rail between laptop and tablet widths. */
@media (max-width: 1180px) and (min-width: 761px) {
  body:has(.student-app-shell),
  body:has(.admin-layout) {
    --workspace-sidebar-current: 72px;
  }

  .student-sidebar,
  .admin-sidebar {
    width: 72px;
  }

  .student-sidebar-heading > div,
  .admin-sidebar-heading h2,
  .student-nav p,
  .student-nav a > span,
  .admin-nav > span,
  .sidebar-collapse-button > span,
  .student-sidebar-profile > span {
    display: none;
  }

  .student-sidebar-heading,
  .admin-sidebar-heading,
  .student-nav a,
  .admin-nav,
  .sidebar-collapse-button,
  .student-sidebar-profile {
    justify-content: center;
    padding-inline: 0;
  }

  .student-sidebar:hover,
  .student-sidebar:focus-within,
  .admin-sidebar:hover,
  .admin-sidebar:focus-within {
    width: var(--workspace-sidebar-expanded);
    box-shadow: 16px 0 30px rgba(0, 30, 50, .18);
  }

  .student-sidebar:hover .student-sidebar-heading,
  .student-sidebar:focus-within .student-sidebar-heading,
  .admin-sidebar:hover .admin-sidebar-heading,
  .admin-sidebar:focus-within .admin-sidebar-heading,
  .student-sidebar:hover .student-nav a,
  .student-sidebar:focus-within .student-nav a,
  .admin-sidebar:hover .admin-nav,
  .admin-sidebar:focus-within .admin-nav,
  .student-sidebar:hover .sidebar-collapse-button,
  .student-sidebar:focus-within .sidebar-collapse-button,
  .admin-sidebar:hover .sidebar-collapse-button,
  .admin-sidebar:focus-within .sidebar-collapse-button,
  .student-sidebar:hover .student-sidebar-profile,
  .student-sidebar:focus-within .student-sidebar-profile {
    justify-content: flex-start;
    padding-inline: 11px;
  }

  .student-sidebar:hover .student-sidebar-heading,
  .student-sidebar:focus-within .student-sidebar-heading,
  .admin-sidebar:hover .admin-sidebar-heading,
  .admin-sidebar:focus-within .admin-sidebar-heading {
    padding-inline: 8px;
  }

  .student-sidebar:hover .student-sidebar-heading > div,
  .student-sidebar:focus-within .student-sidebar-heading > div,
  .admin-sidebar:hover .admin-sidebar-heading h2,
  .admin-sidebar:focus-within .admin-sidebar-heading h2,
  .student-sidebar:hover .student-nav p,
  .student-sidebar:focus-within .student-nav p,
  .student-sidebar:hover .student-nav a > span,
  .student-sidebar:focus-within .student-nav a > span,
  .admin-sidebar:hover .admin-nav > span,
  .admin-sidebar:focus-within .admin-nav > span,
  .student-sidebar:hover .sidebar-collapse-button > span,
  .student-sidebar:focus-within .sidebar-collapse-button > span,
  .admin-sidebar:hover .sidebar-collapse-button > span,
  .admin-sidebar:focus-within .sidebar-collapse-button > span,
  .student-sidebar:hover .student-sidebar-profile > span,
  .student-sidebar:focus-within .student-sidebar-profile > span {
    display: block;
  }

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

@media (max-width: 900px) {
  .dashboard-hero {
    grid-template-columns: 1fr;
  }

  .progress-summary {
    min-height: 0;
  }

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

  .student-status-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .student-status-row .status-pill,
  .student-status-row .student-score-value,
  .student-status-actions {
    grid-column: 2;
    justify-self: start;
  }

  .student-admin-toolbar,
  .course-list-filters,
  .admin-filter-bar,
  .certificate-admin-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile drawers and single-column layouts. */
@media (max-width: 760px) {
  body:has(.student-app-shell),
  body:has(.admin-layout) {
    --workspace-sidebar-current: 0px;
  }

  .site-header,
  body:has(.student-app-shell) .site-header,
  body:has(.admin-layout) .site-header,
  body:has(.lesson-layout) .site-header,
  body:has(.certifications-shell) .site-header {
    padding-inline: 12px;
  }

  .site-brand-copy small {
    display: none;
  }

  .site-brand-copy strong {
    max-width: 34vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-menu-button {
    display: inline-grid;
  }

  .admin-identity {
    max-width: 112px;
  }

  .site-header .text-button {
    display: none;
  }

  .student-sidebar {
    display: none;
  }

  .admin-sidebar {
    z-index: 132;
    display: flex;
    width: min(290px, 86vw);
    padding: 14px 12px;
    transform: translateX(-102%);
  }

  body.admin-menu-open .admin-sidebar {
    transform: translateX(0);
    box-shadow: 18px 0 42px rgba(0, 30, 50, .32);
  }

  body.admin-menu-open::before {
    position: fixed;
    z-index: 125;
    inset: var(--app-header-height) 0 0;
    background: rgba(0, 35, 59, .52);
    content: "";
  }

  .admin-sidebar-heading h2,
  .admin-nav > span,
  .admin-sidebar .sidebar-collapse-button > span {
    display: block;
  }

  .admin-sidebar-heading,
  .admin-nav,
  .admin-sidebar .sidebar-collapse-button {
    justify-content: flex-start;
    padding-inline: 11px;
  }

  .mobile-menu {
    position: fixed;
    z-index: 132;
    inset: var(--app-header-height) auto 0 0;
    display: grid;
    width: min(290px, 86vw);
    min-width: 0;
    align-content: start;
    gap: 4px;
    padding: 16px 12px;
    overflow-y: auto;
    border: 0;
    border-right: 1px solid rgba(234, 199, 139, .20);
    border-radius: 0;
    background: #00365b;
    box-shadow: 18px 0 42px rgba(0, 30, 50, .28);
  }

  .mobile-menu button {
    min-height: 44px;
    padding: 0 12px;
    border-radius: 6px;
    color: #fff8e4;
    font-size: 14px;
    font-weight: 500;
  }

  .mobile-menu button:hover {
    background: rgba(201, 165, 91, .16);
  }

  .student-main-frame,
  .admin-main {
    width: 100%;
    margin-left: 0;
  }

  .student-main-frame {
    padding-top: 0;
  }

  .student-topbar {
    position: sticky;
    inset: auto;
    top: var(--app-header-height);
    min-height: 72px;
    height: auto;
    padding: 12px 14px;
  }

  .student-topbar h1 {
    font-size: 19px;
  }

  .student-topbar-actions {
    flex: 0 0 auto;
  }

  .global-search {
    display: none;
  }

  .student-page-heading,
  .student-content-area {
    width: 100%;
    padding-inline: 14px;
  }

  .student-page-heading {
    padding-top: 24px;
    padding-bottom: 14px;
  }

  .student-content-area {
    gap: 20px;
    padding-top: 20px;
    padding-bottom: 36px;
  }

  .admin-main {
    padding: 24px 14px 40px;
  }

  .student-page-heading h2,
  .admin-page-heading h1 {
    font-size: 26px;
  }

  .admin-page-heading {
    min-height: 0;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
  }

  .admin-heading-actions {
    width: 100%;
    justify-content: stretch;
  }

  .admin-heading-actions .button {
    width: 100%;
  }

  .dashboard-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 22px 18px;
  }

  .hero-greeting {
    font-size: 26px;
  }

  .hero-actions,
  .dialog-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .button,
  .dialog-actions .button {
    width: 100%;
  }

  .student-priority-grid,
  .dashboard-insights,
  .admin-summary-grid,
  .video-gallery,
  .student-course-list,
  .lesson-grid,
  .student-admin-grid,
  .admin-course-list,
  .information-grid {
    grid-template-columns: 1fr;
  }

  .student-status-row {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
  }

  .information-panel,
  .video-panel,
  .profile-card,
  .profile-header-card,
  .certifications-page,
  .admin-content-panel,
  .course-management-panel,
  .certificate-requests-panel,
  .certificate-register-panel,
  .survey-admin-panel {
    padding: 18px;
  }

  .student-admin-toolbar,
  .course-list-filters,
  .admin-filter-bar,
  .certificate-admin-toolbar,
  .course-form-grid,
  .profile-form-grid,
  .upload-methods,
  .student-detail-columns,
  .student-enrollment-card,
  .student-enrollment-card dl {
    grid-template-columns: 1fr;
  }

  .admin-filter-bar .button,
  .student-admin-toolbar .button,
  .certificate-admin-toolbar .button {
    width: 100%;
  }

  .admin-table-wrap,
  .credential-table-wrap,
  .certificate-record-table {
    max-height: none;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .admin-table {
    min-width: 680px;
  }

  .lesson-layout {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0;
    padding: 18px 14px 40px;
  }

  .lesson-sidebar {
    position: static;
  }

  .lesson-header,
  .attempt-header,
  .content-section,
  .question-card,
  .upload-panel,
  .submission-box {
    padding: 18px;
  }

  .dialog-overlay {
    padding: 12px;
  }

  .dialog-card {
    width: min(100%, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    padding: 24px 18px;
  }

  .toast-container {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }
}

.course-edition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.course-edition-grid > div {
  min-width: 0;
}

.course-edition-grid > div > h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

@media (max-width: 980px) {
  .course-edition-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.course-version-preview-dialog {
  width: min(900px, calc(100vw - 32px));
}

.course-version-preview-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-right: 34px;
}

.course-version-preview-heading h2,
.course-version-preview-heading p {
  margin: 0;
}

.course-version-preview-heading .eyebrow {
  margin-bottom: 5px;
}

.course-version-preview-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 20px 0;
}

.course-version-preview-metrics div {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-muted, #f6f8fa);
}

.course-version-preview-metrics dt {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.course-version-preview-metrics dd {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
}

.course-version-draft-note {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.course-version-editor-dialog {
  width: min(1120px, calc(100vw - 32px));
  max-height: min(92vh, 980px);
  overflow: auto;
}

.course-version-editor-heading,
.course-version-editor-row-heading,
.course-version-editor-inline-fields {
  display: flex;
  align-items: center;
  gap: 12px;
}

.course-version-editor-heading {
  justify-content: space-between;
  padding-right: 40px;
}

.course-version-editor-heading p,
.course-version-editor-row-heading small {
  display: block;
  margin: 4px 0 0;
  color: var(--muted);
}

.course-version-editor-course,
.course-version-editor-outline {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.course-version-approval {
  display: grid;
  gap: 16px;
  margin-top: 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-small);
  background: var(--surface-soft);
}

.course-version-approval.is-approved {
  border-left-color: var(--success);
  background: color-mix(in srgb, var(--success) 6%, var(--surface));
}

.course-version-approval.is-invalidated {
  border-left-color: var(--warning);
}

.course-version-approval-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.course-version-approval-heading h3,
.course-version-approval-heading p {
  margin: 0;
}

.course-version-approval-heading .eyebrow {
  margin-bottom: 5px;
}

.course-version-approval-heading h3 + p {
  margin-top: 6px;
  color: var(--muted);
}

.course-version-approval-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.course-version-approval-details div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.course-version-approval-details dt {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.course-version-approval-details dd {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
}

.course-version-preview-approval {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--warning);
  background: var(--surface-soft);
}

.course-version-preview-approval.is-approved {
  border-left-color: var(--success);
}

.course-version-preview-approval span {
  color: var(--muted);
}

.course-version-editor-lessons,
.course-version-editor-content-list {
  display: grid;
  gap: 12px;
}

.course-version-editor-create {
  margin: 12px 0;
  border: 1px dashed var(--accent);
  border-radius: var(--radius-small);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.course-version-editor-create > summary {
  padding: 12px 14px;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.course-version-editor-create > .course-version-editor-fields {
  padding: 0 14px 14px;
}

.course-version-editor-lesson {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface-soft);
}

.course-version-editor-lesson.is-deleted,
.course-version-editor-content.is-deleted {
  border-style: dashed;
  background: color-mix(in srgb, var(--danger) 4%, var(--surface));
}

.course-version-editor-row-heading > div:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.course-version-editor-position,
.course-version-editor-content summary > span:first-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: var(--surface-strong);
  color: var(--text);
  font-weight: 700;
}

.course-version-order-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
}

.course-version-editor-fields {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.course-version-editor-content-list {
  margin-top: 16px;
  padding-left: 42px;
}

.course-version-editor-content {
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
}

.course-version-editor-content summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.course-version-editor-content summary::-webkit-details-marker {
  display: none;
}

.course-version-editor-content summary strong {
  min-width: 0;
  flex: 1;
}

.course-version-editor-content > .course-version-editor-fields {
  padding: 0 14px 14px;
  border-top: 1px solid var(--line);
}

.course-version-editor-restore-note {
  margin: 0;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}

.course-version-editor-inline-fields > label:first-child {
  flex: 0 1 240px;
}

.course-version-editor-footer {
  position: sticky;
  bottom: -1px;
  z-index: 2;
  margin-top: 20px;
  padding: 14px 0 2px;
  background: var(--surface);
}

.course-version-question-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.course-version-question-actions span {
  color: var(--muted);
  font-size: 0.82rem;
}

.question-bank-dialog {
  width: min(1180px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.question-bank-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 2fr);
  gap: 20px;
  min-height: 520px;
}

.question-bank-list {
  display: grid;
  align-content: start;
  gap: 8px;
  max-height: 620px;
  overflow: auto;
}

.question-bank-list-item {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.question-bank-list-item:hover,
.question-bank-list-item:focus-visible,
.question-bank-list-item.is-active {
  border-color: var(--accent);
  background: var(--surface-soft);
}

.question-bank-list-item span,
.question-bank-list-item small {
  color: var(--muted);
  font-size: 0.78rem;
}

.question-bank-form {
  min-width: 0;
}

.question-bank-picker {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
}

.dialog-overlay-nested {
  z-index: 1002;
}

@media (max-width: 720px) {
  .question-bank-layout {
    grid-template-columns: 1fr;
  }

  .question-bank-list {
    max-height: 240px;
  }

  .course-version-question-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .course-version-editor-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    padding: 16px;
  }

  .course-version-editor-heading,
  .course-version-approval-heading,
  .course-version-editor-inline-fields {
    align-items: stretch;
    flex-direction: column;
  }

  .course-version-editor-row-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .course-version-editor-row-heading .course-version-order-controls {
    width: 100%;
  }

  .course-version-editor-content-list {
    padding-left: 0;
  }

  .course-version-editor-content summary small {
    display: none;
  }

  .course-version-approval-details {
    grid-template-columns: 1fr;
  }
}

.course-version-validation,
.course-version-outline {
  margin-top: 18px;
}

.course-version-validation h3,
.course-version-outline h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.course-version-validation ul,
.course-version-outline-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.course-version-validation li {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
}

.course-version-validation li.is-error {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}

.course-version-validation li.is-warning {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.course-version-validation-ok {
  margin: 0;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--success) 40%, var(--line));
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
}

.course-version-outline-list article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.course-version-outline-list article > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-weight: 800;
}

.course-version-outline-list article div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.course-version-outline-list small {
  color: var(--muted);
}

@media (max-width: 680px) {
  .course-version-preview-heading {
    display: grid;
    gap: 10px;
  }

  .course-version-preview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-version-validation li {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
}

/* Platform statistics ---------------------------------------------------- */
.platform-statistics-heading {
  align-items: flex-end;
}

.platform-statistics-heading .button img {
  width: 15px;
  height: 15px;
}

.platform-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.platform-stat-card {
  display: grid;
  min-width: 0;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 112px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.platform-stat-card.is-online {
  border-color: rgba(22, 135, 100, .34);
}

.platform-stat-card.is-attention {
  border-color: rgba(201, 165, 91, .62);
}

.platform-stat-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(201, 165, 91, .3);
  border-radius: 9px;
  background: rgba(201, 165, 91, .13);
}

.platform-stat-icon img {
  width: 20px;
  height: 20px;
}

.platform-stat-card > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.platform-stat-card span,
.platform-stat-card small {
  color: var(--muted);
  font-size: 11px;
}

.platform-stat-card strong {
  color: var(--text);
  font: 600 28px/1.1 "Manrope", sans-serif;
}

.platform-stat-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-stat-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.platform-stat-layout .admin-content-panel,
.platform-operations-panel,
.platform-course-panel {
  margin: 0;
  padding: 20px;
}

.platform-operations-panel,
.platform-course-panel {
  margin-bottom: 24px;
}

.platform-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.platform-panel-heading .eyebrow {
  margin-bottom: 3px;
  font-size: 10px;
}

.platform-panel-heading h2 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.platform-panel-heading > small {
  color: var(--muted);
  font-size: 10px;
}

.platform-progress-row + .platform-progress-row {
  margin-top: 14px;
}

.platform-progress-row > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}

.platform-progress-row strong {
  color: var(--text);
}

.platform-progress-track,
.platform-table-progress {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
}

.platform-progress-track i,
.platform-table-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #c9a55b, #eac78b);
}

.platform-engagement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.platform-engagement-grid > div {
  display: grid;
  gap: 2px;
  padding: 10px;
  border-radius: 8px;
  background: var(--surface-soft);
}

.platform-engagement-grid span {
  color: var(--muted);
  font-size: 10px;
}

.platform-engagement-grid strong {
  color: var(--text);
  font-size: 18px;
}

.platform-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: 10px;
}

.platform-chart-legend span::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 2px;
  background: #00365b;
  content: "";
}

.platform-chart-legend .is-submissions::before {
  background: #c9a55b;
}

.platform-activity-chart {
  display: grid;
  min-height: 226px;
  grid-template-columns: repeat(7, minmax(28px, 1fr));
  align-items: end;
  gap: 8px;
  padding: 14px 10px 0;
  border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(to top, transparent 0, transparent 50px, color-mix(in srgb, var(--line) 64%, transparent) 51px);
}

.platform-activity-day {
  display: grid;
  height: 198px;
  grid-template-rows: minmax(0, 1fr) 22px;
  gap: 6px;
}

.platform-activity-day > div {
  display: flex;
  min-width: 0;
  align-items: end;
  justify-content: center;
  gap: 4px;
}

.platform-activity-day i {
  width: min(14px, 38%);
  min-height: 2px;
  border-radius: 4px 4px 1px 1px;
  background: #00365b;
}

.platform-activity-day i.is-submissions {
  background: #c9a55b;
}

.platform-activity-day > span {
  color: var(--muted);
  font-size: 10px;
  text-align: center;
  text-transform: capitalize;
}

.platform-operation-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.platform-operation-item {
  display: grid;
  min-width: 0;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}

.platform-operation-item.has-alert {
  border-color: rgba(201, 165, 91, .42);
}

.platform-operation-item > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  background: var(--surface);
}

.platform-operation-item img {
  width: 17px;
  height: 17px;
}

.platform-operation-item > div {
  display: grid;
  min-width: 0;
}

.platform-operation-item strong {
  color: var(--text);
  font: 600 20px/1 "Manrope", sans-serif;
}

.platform-operation-item b {
  margin-top: 4px;
  color: var(--text);
  font-size: 11px;
}

.platform-operation-item small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.platform-course-table {
  width: 100%;
  border-collapse: collapse;
}

.platform-course-table th,
.platform-course-table td {
  height: 52px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 12px;
  text-align: left;
}

.platform-course-table th {
  height: 42px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.platform-course-table td:first-child {
  display: grid;
  align-content: center;
}

.platform-course-table td:first-child strong {
  font-size: 12px;
}

.platform-course-table td:first-child small {
  color: var(--muted);
  font-size: 9px;
}

.platform-course-table td:nth-child(4) {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 42px;
  align-items: center;
  gap: 8px;
}

.platform-table-progress {
  width: 100%;
  height: 6px;
}

.platform-course-table td:nth-child(4) b {
  color: var(--muted);
  font-size: 10px;
}

:root[data-theme="dark"] .platform-stat-icon img,
:root[data-theme="dark"] .platform-statistics-heading .button img,
:root[data-theme="dark"] .platform-operation-item img {
  filter: brightness(0) saturate(100%) invert(94%) sepia(17%) saturate(399%) hue-rotate(342deg) brightness(106%) contrast(102%);
}

:root[data-theme="dark"] .platform-operation-item.is-clear img {
  filter: brightness(0) saturate(100%) invert(43%) sepia(58%) saturate(658%) hue-rotate(113deg) brightness(100%) contrast(88%);
}

:root[data-theme="dark"] .platform-activity-day i.is-messages,
:root[data-theme="dark"] .platform-chart-legend .is-messages::before {
  background: #e5f2fa;
}

@media (max-width: 1180px) {
  .platform-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-operation-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .platform-stat-layout {
    grid-template-columns: 1fr;
  }

  .platform-operation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .platform-statistics-heading {
    align-items: stretch;
  }

  .platform-statistics-heading .button {
    width: 100%;
  }

  .platform-stat-grid,
  .platform-operation-grid {
    grid-template-columns: 1fr;
  }

  .platform-stat-card {
    min-height: 96px;
  }

  .platform-stat-layout .admin-content-panel,
  .platform-operations-panel,
  .platform-course-panel {
    padding: 16px;
  }

  .platform-panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .platform-activity-chart {
    gap: 4px;
    padding-inline: 2px;
  }

  .platform-course-table {
    min-width: 680px;
  }
}

/* Internal chat ---------------------------------------------------------- */
.nav-unread-badge {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 5px;
  place-items: center;
  border: 1px solid rgba(255, 248, 228, .3);
  border-radius: 999px;
  background: #c9a55b;
  color: #00365b;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

body.sidebar-collapsed .nav-unread-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  font-size: 9px;
}

.student-view-chat .student-content-area {
  width: min(calc(100% - 48px), 1480px);
  max-width: 1480px;
  padding-top: 24px;
  padding-bottom: 24px;
}

.admin-chat-heading {
  min-height: auto;
  margin-bottom: 18px;
}

.chat-workspace {
  display: grid;
  width: 100%;
  height: max(620px, calc(100dvh - var(--app-header-height) - 66px - 48px));
  min-height: 620px;
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

#adminChatWorkspace .chat-workspace {
  height: max(620px, calc(100dvh - var(--app-header-height) - 150px));
}

.chat-room-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--surface));
}

.chat-room-heading {
  display: flex;
  flex: 0 0 auto;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px 10px;
}

.chat-panel-tabs {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0 16px 10px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 82%, var(--surface));
}

.chat-panel-tabs button {
  display: inline-flex;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.chat-panel-tabs button:hover,
.chat-panel-tabs button.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 54, 91, .07);
}

.chat-panel-tabs img {
  width: 16px;
  height: 16px;
}

.chat-room-heading .eyebrow {
  margin-bottom: 2px;
  font-size: 10px;
}

.chat-room-heading h2 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.2;
}

.chat-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.chat-live-indicator i,
.chat-presence-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #36a477;
  box-shadow: 0 0 0 3px rgba(54, 164, 119, .12);
}

.chat-presence-dot.is-offline {
  background: #8798a4;
  box-shadow: none;
}

.chat-search {
  position: relative;
  display: block;
  flex: 0 0 auto;
  margin: 0 16px 10px;
}

.chat-search img {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 12px;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  pointer-events: none;
}

.chat-search input {
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 0 12px 0 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}

.chat-room-filters {
  display: flex;
  min-height: 40px;
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 6px;
  padding: 0 16px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.chat-room-filters::-webkit-scrollbar {
  display: none;
}

.chat-room-filters[hidden] {
  display: none;
}

.chat-room-filters button {
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.chat-room-filters button:hover,
.chat-room-filters button.is-active {
  border-color: rgba(201, 165, 91, .58);
  background: rgba(201, 165, 91, .14);
  color: var(--text);
}

.chat-room-list {
  position: relative;
  z-index: 0;
  min-height: 0;
  flex: 1 1 0;
  padding: 4px 8px 12px;
  overflow-y: auto;
  scrollbar-color: rgba(0, 54, 91, .2) transparent;
  scrollbar-width: thin;
}

.chat-room-item {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 84px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.chat-room-item + .chat-room-item {
  margin-top: 2px;
}

.chat-room-item:hover {
  background: color-mix(in srgb, var(--surface) 80%, var(--accent) 20%);
}

.chat-room-item.is-active {
  border-color: rgba(201, 165, 91, .36);
  background: var(--surface);
  box-shadow: 0 5px 16px rgba(0, 54, 91, .06);
}

.chat-room-avatar,
.chat-active-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid rgba(201, 165, 91, .24);
  border-radius: 10px;
  background: rgba(201, 165, 91, .14);
}

.chat-room-item.is-active .chat-room-avatar,
.chat-active-avatar {
  border-color: #00365b;
  background: #00365b;
}

.chat-room-avatar img,
.chat-active-avatar img {
  width: 20px;
  height: 20px;
}

.chat-room-avatar img[data-chat-avatar-fallback],
.chat-active-avatar img[data-chat-avatar-fallback] {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.chat-room-avatar > span,
.chat-active-avatar > span {
  color: currentColor;
  font-size: 12px;
  font-weight: 700;
}

.chat-contact-item {
  display: grid;
  width: 100%;
  min-height: 74px;
  grid-template-columns: 42px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.chat-contact-item + .chat-contact-item {
  margin-top: 2px;
}

.chat-contact-item:hover,
.chat-contact-item:focus-visible {
  border-color: rgba(201, 165, 91, .34);
  background: var(--surface);
  outline: none;
}

.chat-contact-avatar,
.chat-contact-action {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(201, 165, 91, .3);
  border-radius: 10px;
  background: rgba(201, 165, 91, .14);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.chat-contact-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.chat-contact-avatar {
  position: relative;
  overflow: visible;
}

.chat-contact-presence {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: #8798a4;
}

.chat-contact-presence.is-online {
  background: #36a477;
}

.chat-contact-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.chat-contact-copy strong,
.chat-contact-copy span,
.chat-contact-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-contact-copy strong {
  font-size: 13px;
  font-weight: 600;
}

.chat-contact-copy span {
  color: var(--muted);
  font-size: 11px;
}

.chat-contact-copy small {
  color: color-mix(in srgb, var(--muted) 78%, transparent);
  font-size: 10px;
}

.chat-contact-action {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}

.chat-contact-action img {
  width: 16px;
  height: 16px;
}

.chat-room-copy,
.chat-room-title-row,
.chat-active-copy {
  min-width: 0;
}

.chat-room-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.chat-room-title-row strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-room-title-row time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 9px;
}

.chat-room-preview,
.chat-room-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-room-meta .chat-presence-dot {
  display: inline-block;
  margin-right: 6px;
}

.chat-room-preview {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.chat-room-meta {
  margin-top: 3px;
  color: color-mix(in srgb, var(--muted) 80%, transparent);
  font-size: 10px;
  font-weight: 500;
}

.chat-unread-count {
  display: grid;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  place-items: center;
  border-radius: 999px;
  background: #c9a55b;
  color: #00365b;
  font-size: 10px;
  font-weight: 700;
}

.chat-list-loading,
.chat-conversation-loading,
.chat-list-empty {
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.chat-list-empty img {
  width: 26px;
  height: 26px;
  opacity: .72;
}

.chat-list-empty strong {
  color: var(--text);
  font-size: 13px;
}

.chat-conversation-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background:
    radial-gradient(circle at 92% 8%, rgba(234, 199, 139, .13), transparent 24%),
    var(--surface);
}

.chat-conversation-header {
  display: flex;
  min-height: 70px;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.chat-active-avatar {
  width: 42px;
  height: 42px;
}

.chat-active-copy {
  flex: 1 1 auto;
}

.chat-active-copy h2 {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-active-copy p {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.chat-info-button,
.chat-mobile-back {
  display: inline-grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}

.chat-info-button img,
.chat-mobile-back img {
  width: 17px;
  height: 17px;
}

.chat-mobile-back {
  display: none;
}

.chat-safety-note {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 16px;
  border-bottom: 1px solid rgba(201, 165, 91, .14);
  background: rgba(201, 165, 91, .07);
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.chat-safety-note img {
  width: 14px;
  height: 14px;
}

.chat-message-list {
  min-height: 0;
  flex: 1 1 auto;
  padding: 20px clamp(16px, 3vw, 42px);
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-color: rgba(0, 54, 91, .2) transparent;
  scrollbar-width: thin;
}

.chat-date-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px 0 20px;
}

.chat-date-separator span {
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.chat-message {
  position: relative;
  display: grid;
  max-width: min(76%, 760px);
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: end;
  gap: 9px;
  margin: 0 auto 16px 0;
}

.chat-message.is-mine {
  grid-template-columns: minmax(0, 1fr) 34px;
  margin-right: 0;
  margin-left: auto;
}

.chat-message.is-mine .chat-message-avatar {
  grid-column: 2;
  grid-row: 1;
}

.chat-message.is-mine .chat-message-content {
  grid-column: 1;
  grid-row: 1;
}

.chat-message-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #00365b;
  color: #fff8e4;
  font-size: 10px;
  font-weight: 700;
}

.chat-message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-message-content {
  min-width: 0;
}

.chat-message-author {
  display: flex;
  min-height: 20px;
  align-items: center;
  gap: 6px;
  margin: 0 5px 4px;
}

.chat-message.is-mine .chat-message-author {
  justify-content: flex-end;
}

.chat-message-author strong {
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
}

.chat-message-author time,
.chat-message-author small {
  color: var(--muted);
  font-size: 9px;
}

.chat-delivery-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--muted);
  white-space: nowrap;
}

.chat-delivery-status img {
  width: 13px;
  height: 13px;
  opacity: .76;
}

.chat-delivery-status.is-read {
  color: #168764;
}

.chat-delivery-status.is-read img {
  filter: brightness(0) saturate(100%) invert(43%) sepia(58%) saturate(658%) hue-rotate(113deg) brightness(90%) contrast(88%);
  opacity: 1;
}

.chat-delivery-status small {
  color: inherit;
}

.chat-trainer-badge,
.chat-report-badge {
  display: inline-flex;
  min-height: 19px;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid rgba(201, 165, 91, .34);
  border-radius: 5px;
  background: rgba(201, 165, 91, .12);
  color: var(--text);
  font-size: 9px;
  font-weight: 600;
}

.chat-report-badge {
  border-color: rgba(180, 35, 24, .24);
  background: rgba(180, 35, 24, .08);
  color: var(--danger);
}

.chat-report-badge img {
  width: 10px;
  height: 10px;
}

.chat-message-bubble {
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 5px 12px 12px 12px;
  background: var(--surface-soft);
  color: var(--text);
  box-shadow: 0 3px 10px rgba(0, 54, 91, .035);
}

.chat-message.is-mine .chat-message-bubble {
  border-color: #00365b;
  border-radius: 12px 5px 12px 12px;
  background: #00365b;
  color: #ffffff;
}

.chat-message-bubble p {
  max-width: none;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.chat-message-bubble blockquote {
  display: grid;
  gap: 2px;
  margin: 0 0 8px;
  padding: 6px 8px;
  overflow: hidden;
  border: 0;
  border-left: 3px solid #c9a55b;
  border-radius: 4px;
  background: rgba(0, 54, 91, .06);
}

.chat-message.is-mine .chat-message-bubble blockquote {
  background: rgba(255, 255, 255, .1);
}

.chat-message-bubble blockquote strong,
.chat-message-bubble blockquote span {
  overflow: hidden;
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-message-bubble blockquote strong {
  color: var(--accent);
}

.chat-message.is-deleted .chat-message-bubble {
  border-style: dashed;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.chat-deleted-copy {
  display: flex;
  align-items: center;
  gap: 6px;
  font-style: italic;
}

.chat-deleted-copy img {
  width: 14px;
  height: 14px;
  opacity: .64;
}

.chat-message-actions {
  position: absolute;
  z-index: 3;
  top: -8px;
  right: -2px;
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .15s ease, transform .15s ease;
  box-shadow: var(--shadow-soft);
}

.chat-message:not(.is-mine) .chat-message-actions {
  right: auto;
  left: 38px;
}

.chat-message:hover .chat-message-actions,
.chat-message:focus-within .chat-message-actions {
  opacity: 1;
  transform: none;
}

.chat-message-actions button {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}

.chat-message-actions button:hover {
  background: var(--surface-soft);
}

.chat-message-actions img {
  width: 14px;
  height: 14px;
}

.chat-welcome-message,
.chat-empty-state {
  display: flex;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 32px;
  color: var(--muted);
  text-align: center;
}

.chat-welcome-message > span,
.chat-empty-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(201, 165, 91, .11);
}

.chat-welcome-message img,
.chat-empty-icon img {
  width: 27px;
  height: 27px;
}

.chat-welcome-message h3,
.chat-empty-state h3 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 18px;
}

.chat-welcome-message p,
.chat-empty-state p {
  max-width: 48ch;
  margin: 0;
  font-size: 13px;
}

.chat-composer {
  flex: 0 0 auto;
  padding: 12px clamp(16px, 3vw, 42px) 14px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.chat-composer-row {
  display: flex;
  align-items: flex-end;
  gap: 9px;
}

.chat-emoji-control {
  position: relative;
  flex: 0 0 42px;
}

.chat-emoji-button {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  cursor: pointer;
}

.chat-emoji-button:hover,
.chat-emoji-button[aria-expanded="true"] {
  border-color: rgba(201, 165, 91, .7);
  background: color-mix(in srgb, var(--surface) 82%, var(--accent) 18%);
}

.chat-emoji-button img {
  width: 18px;
  height: 18px;
}

.chat-emoji-picker {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 9px);
  left: 0;
  width: min(284px, calc(100vw - 32px));
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(0, 31, 52, .22);
}

.chat-emoji-picker[hidden] {
  display: none;
}

.chat-emoji-picker > strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
}

.chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
}

.chat-emoji-grid button {
  display: grid;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.chat-emoji-grid button:hover,
.chat-emoji-grid button:focus-visible {
  background: rgba(201, 165, 91, .18);
  outline: none;
}

.chat-composer textarea {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  max-height: 132px;
  resize: none;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}

.chat-send-button {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  padding: 0;
  place-items: center;
  border: 1px solid #00365b;
  border-radius: 8px;
  background: #00365b;
  cursor: pointer;
}

.chat-send-button:hover {
  background: #002844;
}

.chat-send-button:disabled {
  cursor: wait;
  opacity: .65;
}

.chat-send-button img {
  width: 17px;
  height: 17px;
}

.chat-composer-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 5px;
  padding-inline: 2px;
  color: var(--muted);
  font-size: 9px;
}

.chat-draft-context {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-left: 3px solid #c9a55b;
  border-radius: 7px;
  background: var(--surface-soft);
}

.chat-draft-context > span,
.chat-draft-context > button {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
}

.chat-draft-context > button {
  cursor: pointer;
}

.chat-draft-context img {
  width: 15px;
  height: 15px;
}

.chat-draft-context div {
  display: grid;
  min-width: 0;
}

.chat-draft-context strong,
.chat-draft-context small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-draft-context strong {
  color: var(--text);
  font-size: 11px;
}

.chat-draft-context small {
  color: var(--muted);
  font-size: 10px;
}

.chat-report-dialog {
  width: min(calc(100% - 32px), 480px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .24);
}

.chat-report-dialog::backdrop {
  background: rgba(0, 25, 43, .62);
  backdrop-filter: blur(3px);
}

.chat-report-card {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.chat-report-heading {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.chat-report-heading > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 9px;
  background: rgba(180, 35, 24, .08);
}

.chat-report-heading img {
  width: 19px;
  height: 19px;
}

.chat-report-heading h3,
.chat-report-heading p {
  margin: 0;
}

.chat-report-heading h3 {
  font-size: 17px;
}

.chat-report-heading p {
  color: var(--muted);
  font-size: 12px;
}

.chat-report-card label {
  display: grid;
  gap: 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.chat-report-card textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text);
  resize: vertical;
}

.chat-report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

:root[data-theme="dark"] .chat-search img,
:root[data-theme="dark"] .chat-info-button img,
:root[data-theme="dark"] .chat-mobile-back img,
:root[data-theme="dark"] .chat-safety-note img,
:root[data-theme="dark"] .chat-message-actions img,
:root[data-theme="dark"] .chat-draft-context img,
:root[data-theme="dark"] .chat-list-empty img,
:root[data-theme="dark"] .chat-panel-tabs img,
:root[data-theme="dark"] .chat-contact-action img,
:root[data-theme="dark"] .chat-emoji-button img,
:root[data-theme="dark"] .chat-delivery-status:not(.is-read) img,
:root[data-theme="dark"] .chat-deleted-copy img {
  filter: brightness(0) saturate(100%) invert(94%) sepia(17%) saturate(399%) hue-rotate(342deg) brightness(106%) contrast(102%);
}

:root[data-theme="dark"] .chat-message.is-mine .chat-message-bubble {
  border-color: #eac78b;
  background: #174566;
  color: #fff8e4;
}

:root[data-theme="dark"] .chat-room-item.is-active {
  background: #17384f;
}

@media (max-width: 980px) and (min-width: 761px) {
  .chat-workspace {
    grid-template-columns: minmax(250px, 290px) minmax(0, 1fr);
  }

  .chat-live-indicator {
    display: none;
  }

  .chat-message {
    max-width: 86%;
  }
}

@media (max-width: 760px) {
  .student-view-chat .student-content-area {
    width: 100%;
    padding: 0;
  }

  .admin-chat-heading {
    margin-bottom: 12px;
  }

  .chat-workspace,
  #adminChatWorkspace .chat-workspace {
    display: block;
    height: calc(100dvh - var(--app-header-height) - 66px);
    min-height: 500px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #adminChatWorkspace .chat-workspace {
    height: max(520px, calc(100dvh - var(--app-header-height) - 135px));
    border: 1px solid var(--line);
    border-radius: 10px;
  }

  .chat-room-panel,
  .chat-conversation-panel {
    width: 100%;
    height: 100%;
    border-right: 0;
  }

  .chat-conversation-panel {
    display: none;
  }

  .chat-workspace.has-active-room .chat-room-panel {
    display: none;
  }

  .chat-workspace.has-active-room .chat-conversation-panel {
    display: flex;
  }

  .chat-mobile-back {
    display: inline-grid;
  }

  .chat-room-heading {
    min-height: 72px;
  }

  .chat-message-list {
    padding: 16px 12px;
  }

  .chat-message {
    max-width: 92%;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 7px;
  }

  .chat-message.is-mine {
    grid-template-columns: minmax(0, 1fr) 30px;
  }

  .chat-message-avatar {
    width: 30px;
    height: 30px;
  }

  .chat-message-actions,
  .chat-message:hover .chat-message-actions {
    position: static;
    grid-column: 2;
    width: max-content;
    margin-top: -5px;
    opacity: .8;
    transform: none;
    box-shadow: none;
  }

  .chat-message.is-mine .chat-message-actions {
    grid-column: 1;
    justify-self: end;
  }

  .chat-composer {
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  }

  .chat-composer-meta span:first-child,
  .chat-safety-note {
    display: none;
  }

  .chat-composer-meta {
    justify-content: flex-end;
  }

  .chat-report-actions {
    flex-direction: column-reverse;
  }

  .chat-report-actions .button {
    width: 100%;
    min-height: 42px;
  }
}

@media (max-width: 430px) {
  .chat-room-heading {
    padding-inline: 14px;
  }

  .chat-panel-tabs {
    margin-inline: 12px;
  }

  .chat-search {
    margin-inline: 12px;
  }

  .chat-room-filters {
    padding-inline: 12px;
  }

  .chat-conversation-header {
    gap: 8px;
    padding-inline: 10px;
  }

  .chat-active-avatar {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .chat-active-copy h2 {
    font-size: 14px;
  }

  .chat-info-button {
    display: none;
  }

  .chat-message {
    max-width: 96%;
  }
}

@media (max-width: 430px) {
  .site-brand-copy {
    display: none;
  }

  .header-user,
  .theme-toggle,
  .mobile-menu-button,
  .icon-button {
    width: 36px;
    height: 36px;
  }

  .admin-identity {
    display: none;
  }

  .student-topbar .icon-button:first-of-type {
    display: none;
  }

  .auth-card {
    padding: 24px 18px;
  }
}

/* Administrative student list and shared button scale */
.button,
body:has(.student-app-shell) .button,
body:has(.admin-layout) .button {
  box-sizing: border-box;
  min-height: 38px;
  height: 38px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.button-small,
body:has(.student-app-shell) .button-small,
body:has(.admin-layout) .button-small {
  min-height: 26px;
  height: 26px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 16px;
}

.hero-actions .button {
  min-height: 38px;
  height: 38px;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 20px;
}

.site-header button.text-button {
  min-height: 26px;
  height: 26px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 16px;
}

.student-nav a,
.admin-nav,
.sidebar-collapse-button,
.mobile-menu button,
.admin-content-tabs button,
.course-switcher button,
.lesson-navigation button,
.lesson-navigation a {
  box-sizing: border-box;
  min-height: 35px;
  height: 35px;
  padding: 8px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 16px;
}

.student-nav a,
.admin-nav,
.sidebar-collapse-button {
  gap: 10px;
}

.student-admin-actions button:not(.button) {
  min-height: 26px;
  height: 26px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.student-admin-list {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overscroll-behavior-inline: contain;
}

.student-list-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  table-layout: auto;
}

.student-list-table th,
.student-list-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-align: left;
  vertical-align: middle;
}

.student-list-table th {
  position: sticky;
  z-index: 2;
  top: 0;
  height: 40px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}

.student-list-table td {
  height: 68px;
  font-size: 13px;
  line-height: 18px;
}

.student-list-table tbody tr:last-child td {
  border-bottom: 0;
}

.student-list-row {
  cursor: pointer;
  outline: none;
  transition: background .14s ease, box-shadow .14s ease;
}

.student-list-row:hover {
  background: color-mix(in srgb, var(--accent-soft) 11%, var(--surface));
}

.student-list-row:focus-visible {
  background: color-mix(in srgb, var(--accent-soft) 15%, var(--surface));
  box-shadow: inset 3px 0 0 var(--accent);
}

.student-list-identity {
  display: grid;
  min-width: 230px;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}

.student-list-identity .student-avatar {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: #00365b;
  color: #fff8e4;
  font-size: 12px;
  font-weight: 600;
}

.student-list-primary {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.student-list-primary strong {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-list-primary small,
.student-list-value {
  display: block;
  max-width: 220px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-list-primary small:last-child {
  color: color-mix(in srgb, var(--text) 72%, transparent);
}

.student-list-progress {
  display: grid;
  min-width: 104px;
  gap: 7px;
}

.student-list-progress > strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
}

.student-list-progress .student-progress-track {
  width: 100%;
  height: 5px;
  margin: 0;
}

.student-list-actions-heading,
.student-list-actions {
  width: 116px;
  text-align: right !important;
}

.student-list-action {
  display: inline-flex;
  width: auto;
  white-space: nowrap;
}

.student-list-action img {
  width: 14px;
  height: 14px;
}

.student-admin-list .student-empty-state {
  min-height: 180px;
  border: 0;
  border-radius: inherit;
}

@media (max-width: 1180px) and (min-width: 761px) {
  .student-list-table {
    min-width: 850px;
  }

  .student-col-country {
    display: none;
  }
}

@media (max-width: 980px) and (min-width: 761px) {
  .student-list-table {
    min-width: 720px;
  }

  .student-col-organization {
    display: none;
  }
}

@media (max-width: 760px) {
  .mobile-menu button,
  .admin-sidebar .admin-nav,
  .admin-sidebar .sidebar-collapse-button {
    min-height: 44px;
    height: 44px;
    padding: 8px 12px;
  }

  .student-admin-list {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .student-list-table,
  .student-list-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .student-list-table thead {
    display: none;
  }

  .student-list-table tbody {
    display: grid;
    gap: 10px;
  }

  .student-list-table .student-list-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
  }

  .student-list-table td {
    display: grid;
    height: auto;
    min-width: 0;
    gap: 3px;
    padding: 9px 0;
    border: 0;
  }

  .student-list-table td::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: 11px;
    font-weight: 500;
    line-height: 15px;
  }

  .student-list-table td:first-child {
    grid-column: 1 / -1;
    padding-top: 0;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--line);
  }

  .student-list-table td:first-child::before {
    display: none;
  }

  .student-list-identity {
    min-width: 0;
  }

  .student-list-primary strong,
  .student-list-primary small,
  .student-list-value {
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .student-col-organization,
  .student-col-country {
    display: none !important;
  }

  .student-list-actions {
    width: auto;
    grid-column: 1 / -1;
    padding-bottom: 0 !important;
    text-align: left !important;
  }

  .student-list-action,
  body:has(.admin-layout) .student-list-action {
    width: 100%;
    min-height: 38px;
    height: 38px;
    padding: 8px 16px;
    justify-content: center;
    font-size: 14px;
    line-height: 20px;
  }
}

@media (max-width: 480px) {
  .student-list-table .student-list-row {
    grid-template-columns: 1fr;
  }

  .student-list-table td:first-child,
  .student-list-actions {
    grid-column: 1;
  }
}

/* Stage 12: complete mobile records without hidden table columns. */
@media (max-width: 760px) {
  .admin-table-wrap:has(.responsive-admin-table) {
    max-height: none;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .responsive-admin-table {
    display: block;
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
  }

  .responsive-admin-table thead {
    display: none;
  }

  .responsive-admin-table tbody {
    display: grid;
    gap: 12px;
  }

  .responsive-admin-table tbody tr {
    display: block;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    background: var(--surface);
  }

  .responsive-admin-table tbody td {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .responsive-admin-table tbody td:last-child {
    border-bottom: 0;
  }

  .responsive-admin-table tbody td[data-label]::before,
  .certificate-record-row > [data-label]::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
  }

  .responsive-admin-table tbody td.empty-table {
    display: block;
    padding: 0;
  }

  .responsive-admin-table tbody td[data-label="Ações"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .responsive-admin-table tbody td[data-label="Ações"]::before {
    flex: 0 0 100%;
  }

  .responsive-admin-table tbody td[data-label="Ações"] .button {
    flex: 1 1 130px;
  }

  .certificate-record-table {
    min-width: 0;
    overflow: visible;
  }

  .certificate-record-head {
    display: none;
  }

  .certificate-record-row:not(.certificate-record-head) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    margin-bottom: 12px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    background: var(--surface);
  }

  .certificate-record-row:not(.certificate-record-head) > [data-label] {
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-soft);
    overflow-wrap: anywhere;
  }

  .certificate-record-row:not(.certificate-record-head) > .certificate-record-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .certificate-record-row:not(.certificate-record-head) > .certificate-record-actions::before {
    flex: 0 0 100%;
  }

  .certificate-record-actions .button {
    flex: 1 1 130px;
  }

  .certificate-record-row .certificate-policy-note {
    margin: 0;
    padding: 12px 14px;
  }
}

/* Keep the complete participation certificate visible inside narrow dialogs. */
@media (max-width: 760px) {
  .certificate-preview-sheet:not(.is-professional) {
    overflow: hidden;
  }

  .certificate-document-participation {
    min-width: 0;
    width: 100%;
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    gap: 3px;
    padding: 9px;
    border-width: 4px;
  }

  .certificate-document-participation .certificate-document-main {
    gap: 3px;
  }

  .certificate-document-participation .certificate-institution,
  .certificate-document-participation p {
    font-size: 5px;
    line-height: 1.15;
  }

  .certificate-document-participation h1 {
    font-size: 12px;
    line-height: 1;
  }

  .certificate-document-participation h2 {
    font-size: 11px;
    line-height: 1.05;
  }

  .certificate-document-participation h3 {
    font-size: 8px;
    line-height: 1.08;
  }

  .certificate-document-participation .certificate-preview-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 88%;
    gap: 4px;
  }

  .certificate-document-participation .certificate-preview-metrics span {
    gap: 1px;
    padding: 3px 2px;
  }

  .certificate-document-participation .certificate-preview-metrics small {
    font-size: 4.5px;
  }

  .certificate-document-participation .certificate-preview-metrics strong {
    font-size: 5.5px;
  }

  .certificate-document-participation .certificate-preview-seal {
    width: 22px;
    height: 22px;
    border-width: 3px;
    font-size: 4px;
  }

  .certificate-document-participation .certificate-preview-meta {
    flex-wrap: nowrap;
    gap: 5px;
    font-size: 4.5px;
    line-height: 1.1;
  }

  .certificate-document-participation .certificate-corner {
    width: 22px;
    height: 22px;
  }

  .certificate-document-participation .certificate-corner-tl,
  .certificate-document-participation .certificate-corner-tr {
    top: 8px;
  }

  .certificate-document-participation .certificate-corner-bl,
  .certificate-document-participation .certificate-corner-br {
    bottom: 8px;
  }

  .certificate-document-participation .certificate-corner-tl,
  .certificate-document-participation .certificate-corner-bl {
    left: 8px;
  }

  .certificate-document-participation .certificate-corner-tr,
  .certificate-document-participation .certificate-corner-br {
    right: 8px;
  }
}

.button,
.button-small,
.hero-actions .button,
.student-list-action,
body:has(.student-app-shell) .button,
body:has(.student-app-shell) .button-small,
body:has(.admin-layout) .button,
body:has(.admin-layout) .button-small,
body:has(.admin-layout) .student-list-action {
  min-height: var(--compact-control-height);
  height: var(--compact-control-height);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
}

.status-pill,
.submission-status-pill,
.certificate-generation-pill {
  box-sizing: border-box;
  min-height: var(--compact-control-height);
  height: var(--compact-control-height);
  width: auto;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
}

.submission-status-pill {
  width: 132px;
  min-width: 132px;
  max-width: 132px;
  justify-content: center;
  text-align: center;
}

button.text-button,
.student-admin-actions button:not(.button),
.file-actions button {
  min-height: var(--compact-control-height);
  height: var(--compact-control-height);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

.theme-toggle,
.header-user,
.icon-button,
.mobile-menu-button,
.video-sound-button,
.dialog-close,
body:has(.student-app-shell) .theme-toggle,
body:has(.student-app-shell) .header-user,
body:has(.student-app-shell) .icon-button,
body:has(.admin-layout) .theme-toggle {
  width: var(--compact-control-height);
  min-width: var(--compact-control-height);
  height: var(--compact-control-height);
  min-height: var(--compact-control-height);
  padding: 0;
  border-radius: 6px;
}

.admin-identity,
body:has(.admin-layout) .admin-identity {
  min-height: var(--compact-control-height);
  height: var(--compact-control-height);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 18px;
}

.student-list-action img,
.button img {
  width: 14px;
  height: 14px;
}

.student-view-overview .video-panel {
  display: block;
}

.student-content-area,
.admin-main {
  align-content: start;
  gap: var(--section-gap);
}

.admin-main {
  display: grid;
}

.student-content-area > *,
.admin-main > *,
.admin-main > .admin-page-heading,
.admin-main > .admin-content-panel,
.admin-main > .certificate-requests-panel,
.admin-main > .certificate-register-panel {
  margin-block: 0;
}

.section-heading,
.course-section-heading,
.profile-section-heading {
  margin: 0 0 var(--grid-gap);
}

.dashboard-insights,
.admin-summary-grid,
.student-priority-grid,
.student-course-list,
.lesson-grid,
.video-gallery,
.information-grid,
.profile-shell,
.profile-status-grid,
.profile-form-grid,
.certification-list,
.question-list,
.student-admin-grid,
.admin-course-list,
.certificate-admin-grid,
.certificate-request-list,
.certificate-record-table {
  gap: var(--grid-gap);
}

.assessment-area,
.submission-box {
  margin-top: var(--section-gap);
}

.attempt-header {
  margin-bottom: var(--section-gap);
}

.admin-heading-actions,
.admin-row-actions,
.student-admin-actions,
.dialog-actions,
.certification-list-actions,
.hero-actions {
  gap: var(--related-gap);
}

.sidebar-mobile-logout {
  display: none;
}

.certificate-seal.has-brand-logo,
.certification-seal.has-brand-logo,
.certificate-preview-seal.has-brand-logo {
  overflow: hidden;
  background: #ffffff;
}

.certificate-seal.has-brand-logo img,
.certification-seal.has-brand-logo img,
.certificate-preview-seal.has-brand-logo img {
  width: 100%;
  height: 100%;
  padding: 4px;
  object-fit: contain;
}

.status-pill,
.submission-status-pill {
  width: 160px;
  min-width: 160px;
  max-width: 160px;
  overflow: hidden;
  justify-content: center;
  text-align: center;
  text-overflow: ellipsis;
}

:root[data-theme="dark"] {
  --bg: #061b2a;
  --surface: #0d2d43;
  --surface-soft: #143a52;
  --surface-strong: #1b4963;
  --text: #fffdf4;
  --muted: #c7d5dd;
  --line: rgba(234, 199, 139, .34);
  --input-bg: #09263a;
  --danger: #ffaaa5;
  --success: #83dfad;
  --warning: #f5d18a;
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] label,
:root[data-theme="dark"] th,
:root[data-theme="dark"] td {
  color: var(--text);
}

:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .breadcrumb-line,
:root[data-theme="dark"] .empty-note,
:root[data-theme="dark"] .admin-table th,
:root[data-theme="dark"] .student-list-table th,
:root[data-theme="dark"] .student-list-table td::before,
:root[data-theme="dark"] .site-brand-copy small {
  color: var(--muted);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: #aebfc9;
  opacity: 1;
}

:root[data-theme="dark"] .button-primary,
:root[data-theme="dark"] body:has(.student-app-shell) .button-primary,
:root[data-theme="dark"] body:has(.admin-layout) .button-primary {
  border-color: #eac78b;
  background: #eac78b;
  color: #06233f;
}

:root[data-theme="dark"] .button-primary:hover:not(:disabled) {
  border-color: #fff0bf;
  background: #fff0bf;
  color: #06233f;
}

:root[data-theme="dark"] .button-secondary,
:root[data-theme="dark"] .button-light,
:root[data-theme="dark"] body:has(.student-app-shell) .button-secondary,
:root[data-theme="dark"] body:has(.admin-layout) .button-secondary,
:root[data-theme="dark"] .text-button {
  border-color: rgba(234, 199, 139, .58);
  background: #143a52;
  color: #fffdf4;
}

:root[data-theme="dark"] .button-secondary:hover:not(:disabled),
:root[data-theme="dark"] .button-light:hover:not(:disabled),
:root[data-theme="dark"] .text-button:hover:not(:disabled) {
  border-color: #eac78b;
  background: #1b4963;
  color: #ffffff;
}

:root[data-theme="dark"] .button-danger {
  border-color: rgba(255, 170, 165, .72);
  background: rgba(156, 48, 48, .28);
  color: #ffd0cc;
}

:root[data-theme="dark"] :is(button, .button):disabled {
  border-color: rgba(199, 213, 221, .22);
  background: rgba(199, 213, 221, .09);
  color: #aebfc9;
  opacity: .72;
}

:root[data-theme="dark"] .status-in-progress,
:root[data-theme="dark"] .status-under-review,
:root[data-theme="dark"] .status-requested,
:root[data-theme="dark"] .status-payment-submitted {
  border-color: #eac78b;
  background: rgba(201, 165, 91, .18);
  color: #ffe1a4;
}

:root[data-theme="dark"] .status-approved,
:root[data-theme="dark"] .status-completed,
:root[data-theme="dark"] .status-issued,
:root[data-theme="dark"] .status-active,
:root[data-theme="dark"] .status-available {
  border-color: #83dfad;
  background: rgba(46, 139, 87, .22);
  color: #a8f0c7;
}

:root[data-theme="dark"] .status-correction-required,
:root[data-theme="dark"] .status-time-exceeded,
:root[data-theme="dark"] .status-failed,
:root[data-theme="dark"] .status-rejected,
:root[data-theme="dark"] .status-deleted,
:root[data-theme="dark"] .status-blocked,
:root[data-theme="dark"] .status-inactive {
  border-color: #ffaaa5;
  background: rgba(156, 48, 48, .24);
  color: #ffd0cc;
}

@media (max-width: 760px) {
  .sidebar-mobile-logout {
    display: flex;
    margin-top: auto;
  }

  .mobile-menu-logout {
    margin-top: 12px;
    border-top: 1px solid rgba(234, 199, 139, .28);
    background: rgba(201, 165, 91, .12);
  }

  .student-content-area,
  .admin-main {
    gap: var(--grid-gap);
  }
}

/* PetroSimLab certificate proportions and authoritative responsive navigation */
.mobile-menu-button {
  display: none !important;
}

.certificate-document-professional {
  display: block;
  padding: clamp(18px, 2.2vw, 30px);
  border: 10px double var(--accent);
  background: #fffdf8;
}

.certificate-document-professional .certificate-professional-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.certificate-document-professional .certificate-professional-left,
.certificate-document-professional .certificate-professional-right {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  justify-content: flex-start;
}

.certificate-document-professional .certificate-professional-left {
  gap: clamp(5px, .65vw, 9px);
  padding: clamp(18px, 2vw, 28px) clamp(22px, 2.5vw, 36px) 12px;
  border-right: 1px solid #dce3e8;
}

.certificate-document-professional .certificate-professional-right {
  gap: clamp(5px, .58vw, 8px);
  padding: clamp(28px, 2.8vw, 40px) clamp(22px, 2.4vw, 34px) 12px;
}

.certificate-document-professional .certificate-logo-image {
  width: min(100%, 190px);
  max-width: 190px;
  height: clamp(54px, 6vw, 78px);
  max-height: 78px;
  object-fit: contain;
}

.certificate-document-professional .certificate-logo-placeholder {
  display: grid;
  width: min(100%, 190px);
  min-height: clamp(54px, 6vw, 78px);
  place-items: center;
  border: 1px dashed #c8d4db;
  border-radius: 6px;
  color: #667b8b;
  font-size: clamp(7px, .68vw, 9px);
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
}

.certificate-brand-subtitle {
  color: var(--primary) !important;
  font-size: clamp(7px, .68vw, 9px) !important;
  font-weight: 600;
  letter-spacing: .12em;
}

.certificate-column-divider {
  display: block;
  width: 100%;
  height: 1px;
  margin: clamp(4px, .5vw, 8px) 0 clamp(8px, .8vw, 12px);
  background: color-mix(in srgb, var(--accent) 48%, transparent);
}

.certificate-document-professional .certificate-professional-left h1 {
  max-width: 100%;
  font-size: clamp(18px, 1.75vw, 25px);
  line-height: 1.08;
}

.certificate-document-professional .certificate-professional-right h2 {
  max-width: 100%;
  font-size: clamp(18px, 1.8vw, 27px);
  line-height: 1.06;
}

.certificate-document-professional .certificate-professional-right h3 {
  max-width: 100%;
  font-size: clamp(14px, 1.3vw, 19px);
  line-height: 1.14;
}

.certificate-course-label {
  margin-top: clamp(5px, .6vw, 9px) !important;
  font-size: clamp(7px, .72vw, 9px) !important;
  font-weight: 700;
  letter-spacing: .06em;
}

.certificate-document-professional .certificate-content-summary {
  width: 100%;
  margin: clamp(3px, .4vw, 6px) 0 0;
  padding: clamp(5px, .55vw, 8px) 0 0;
  border-top: 0;
}

.certificate-document-professional .certificate-content-summary strong {
  margin-bottom: 6px;
  text-align: center;
}

.certificate-document-professional .certificate-content-summary ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 18px;
  padding-left: 16px;
  font-size: clamp(7px, .72vw, 9.5px);
  line-height: 1.28;
}

.certificate-professional-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: auto;
  padding-top: 8px;
  color: var(--primary);
  font-size: clamp(8px, .84vw, 11px);
}

.certificate-professional-footer {
  display: grid;
  grid-template-columns: minmax(88px, .82fr) minmax(100px, 1fr) 48px minmax(64px, .58fr);
  gap: clamp(5px, .7vw, 10px);
  align-items: end;
  width: 100%;
  min-height: 74px;
  margin-top: 7px;
}

.certificate-professional-footer .certificate-signature-block {
  min-width: 0;
}

.certificate-verification-compact {
  display: flex;
  min-width: 0;
  align-items: end;
  gap: 6px;
  text-align: left;
}

.certificate-qr-placeholder {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid #9aabb8;
  background:
    linear-gradient(45deg, var(--primary) 25%, transparent 25% 75%, var(--primary) 75%),
    linear-gradient(-45deg, var(--primary) 25%, transparent 25% 75%, var(--primary) 75%);
  background-size: 8px 8px;
  color: transparent;
}

.certificate-verification-compact small,
.certificate-product-credit small {
  min-width: 0;
  color: var(--muted);
  font-size: clamp(5.5px, .52vw, 7px);
  line-height: 1.22;
}

.certificate-verification-compact b {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: var(--primary);
}

.certificate-product-credit {
  display: grid;
  min-width: 0;
  justify-items: end;
  gap: 3px;
  text-align: right;
}

.certificate-product-credit img {
  width: 72px;
  max-height: 20px;
  object-fit: contain;
}

.certificate-product-credit small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.certificate-document-professional .certificate-place-date {
  margin-top: clamp(5px, .55vw, 8px);
}

.certificate-document-professional .certificate-professional-left .certificate-signature-block {
  margin-top: auto;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

.tabs,
.lesson-tabs,
.course-tabs,
.admin-tabs,
.certificate-tabs {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

@media (min-width: 1025px) {
  .mobile-menu:not([hidden]) {
    display: none !important;
  }

  body.admin-menu-open::before {
    display: none !important;
  }

  .admin-sidebar {
    transform: none !important;
  }
}

@media (max-width: 1024px) {
  body:has(.student-app-shell),
  body:has(.admin-layout) {
    --workspace-sidebar-current: 0px;
  }

  .mobile-menu-button:not([hidden]) {
    display: inline-grid !important;
  }

  .site-header,
  body:has(.student-app-shell) .site-header,
  body:has(.admin-layout) .site-header,
  body:has(.lesson-layout) .site-header,
  body:has(.certifications-shell) .site-header {
    padding-inline: 16px;
  }

  .site-header .text-button {
    display: none !important;
  }

  .student-sidebar {
    display: none !important;
  }

  .admin-sidebar {
    position: fixed !important;
    z-index: 132;
    inset: var(--app-header-height) auto 0 0;
    display: flex !important;
    width: min(304px, 88vw) !important;
    height: calc(100vh - var(--app-header-height));
    padding: 14px 12px;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(-102%) !important;
  }

  body.admin-menu-open .admin-sidebar {
    transform: translateX(0) !important;
    box-shadow: 18px 0 42px rgba(0, 30, 50, .32);
  }

  body.admin-menu-open::before,
  body:has(.mobile-menu:not([hidden]))::before {
    position: fixed;
    z-index: 125;
    inset: var(--app-header-height) 0 0;
    background: rgba(0, 35, 59, .52);
    content: "";
  }

  .admin-sidebar-heading h2,
  .admin-nav > span,
  .student-sidebar-profile > span {
    display: block !important;
  }

  .admin-sidebar-heading,
  .admin-nav {
    justify-content: flex-start !important;
    padding-inline: 11px !important;
  }

  .admin-sidebar .sidebar-collapse-button {
    display: none !important;
  }

  .sidebar-mobile-logout {
    display: flex !important;
    margin-top: auto;
  }

  .mobile-menu {
    position: fixed;
    z-index: 132;
    inset: var(--app-header-height) auto 0 0;
    display: grid;
    width: min(304px, 88vw);
    min-width: 0;
    align-content: start;
    gap: 4px;
    padding: 16px 12px;
    overflow-y: auto;
    border: 0;
    border-right: 1px solid rgba(234, 199, 139, .20);
    border-radius: 0;
    background: #00365b;
    box-shadow: 18px 0 42px rgba(0, 30, 50, .28);
  }

  .mobile-menu button {
    min-height: 44px;
    padding: 0 12px;
    border-radius: 6px;
    color: #fff8e4;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
  }

  .student-main-frame,
  .admin-main {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
  }

  .student-page-heading,
  .student-content-area,
  .admin-main {
    padding-inline: 20px;
  }

  .admin-main {
    padding-top: 28px;
    padding-bottom: 44px;
  }

  .dashboard-insights,
  .admin-summary-grid,
  .student-priority-grid,
  .information-grid,
  .profile-status-grid,
  .student-course-list,
  .lesson-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-table-wrap,
  .credential-table-wrap,
  .certificate-record-table,
  .student-list-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .dialog-card,
  .certificate-dialog-card {
    width: min(94vw, 980px);
    max-height: calc(100vh - 32px);
  }
}

@media (max-width: 760px) {
  .site-header,
  body:has(.student-app-shell) .site-header,
  body:has(.admin-layout) .site-header {
    padding-inline: 12px;
  }

  .site-brand-copy small {
    display: none;
  }

  .admin-identity {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .student-page-heading,
  .student-content-area,
  .admin-main {
    padding-inline: 14px;
  }

  .dashboard-insights,
  .admin-summary-grid,
  .student-priority-grid,
  .information-grid,
  .profile-status-grid,
  .student-course-list,
  .lesson-grid,
  .profile-form-grid,
  .course-form-grid,
  .certificate-template-form-grid,
  .admin-filter-bar,
  .student-admin-toolbar,
  .certificate-admin-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-heading-actions,
  .hero-actions,
  .dialog-actions,
  .student-admin-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .admin-heading-actions .button,
  .hero-actions .button,
  .dialog-actions .button,
  .student-admin-actions .button {
    width: 100%;
  }

  .certificate-preview-sheet {
    padding: 8px;
  }

  .certificate-standard-logo {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .certificate-standard-logo img,
  .certificate-standard-logo-placeholder {
    width: 60px;
  }

  .certificate-standard-logo .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .dialog-card,
  .certificate-dialog-card {
    width: calc(100vw - 20px);
    padding: 18px 14px;
  }
}

@media (max-width: 480px) {
  .site-brand-copy strong {
    max-width: 28vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-header-actions {
    gap: 5px;
  }

  .header-user,
  .theme-toggle,
  .mobile-menu-button,
  .admin-identity {
    flex: 0 0 auto;
  }

  .student-topbar {
    gap: 8px;
    padding: 10px 12px;
  }

  .student-topbar h1 {
    font-size: 18px;
  }

  .status-pill,
  .submission-status-pill {
    width: 124px;
    min-width: 124px;
    max-width: 124px;
  }
}

html {
  min-width: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--app-header-height) + 16px);
}

body {
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

.page-shell,
.student-app-shell,
.student-main-frame,
.student-content-area,
.admin-layout,
.admin-main,
.lesson-layout,
.lesson-main,
.auth-layout,
.auth-panel,
.verification-shell,
.dialog-card,
.certificate-dialog-card {
  min-inline-size: 0;
}

.student-content-area > *,
.admin-main > *,
.lesson-main > *,
.auth-panel > *,
.verification-shell > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.rich-content,
.answer-value,
.configuration-error,
.empty-note,
.form-message,
.certificate-policy-note,
.student-list-value,
.student-list-primary,
.student-list-primary strong,
.student-list-primary small {
  overflow-wrap: anywhere;
  word-break: normal;
}

pre,
.answer-value {
  max-width: 100%;
  overflow: auto;
  white-space: pre-wrap;
}

.admin-table-wrap,
.credential-table-wrap,
.certificate-record-table,
.student-admin-list,
.certificate-preview-sheet,
.rich-content {
  max-inline-size: 100%;
}

.admin-table-wrap,
.credential-table-wrap,
.certificate-record-table,
.student-admin-list,
.certificate-preview-sheet,
.rich-content table {
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.rich-content table {
  display: block;
  width: max-content;
  min-width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.formula,
.rich-content pre,
.rich-content code {
  max-width: 100%;
  overflow-x: auto;
}

.dialog-card,
.certificate-dialog-card {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
}

.mobile-menu,
.admin-sidebar {
  padding-bottom: calc(16px + var(--safe-bottom));
}

.toast-container {
  right: max(12px, var(--safe-right));
  bottom: max(12px, var(--safe-bottom));
}

@media (min-width: 1800px) {
  :root {
    --workspace-content-max: 1440px;
  }

  .student-topbar {
    padding-inline: max(40px, calc((100vw - var(--workspace-sidebar-current) - var(--workspace-content-max)) / 2));
  }
}

@media (max-width: 1366px) and (min-width: 1025px) {
  .student-topbar {
    padding-inline: 24px;
  }

  .student-page-heading,
  .student-content-area {
    width: min(calc(100% - 48px), var(--workspace-content-max));
  }

  .admin-main {
    padding-inline: 24px;
  }

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

@media (max-width: 1024px) {
  body.admin-menu-open,
  body.student-menu-open,
  body:has(.mobile-menu:not([hidden])) {
    overflow: hidden;
    touch-action: none;
  }

  .student-app-shell,
  .admin-layout {
    display: block;
    width: 100%;
    min-height: calc(100vh - var(--app-header-height));
    min-height: calc(100dvh - var(--app-header-height));
  }

  .student-main-frame,
  .admin-main {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
  }

  .student-topbar {
    inset-inline: 0;
    width: 100%;
    padding-inline: var(--responsive-gutter);
  }

  .student-page-heading,
  .student-content-area {
    width: min(calc(100% - (var(--responsive-gutter) * 2)), var(--workspace-content-max)) !important;
    max-width: var(--workspace-content-max);
    margin-inline: auto;
    padding-inline: 0 !important;
  }

  .admin-main {
    padding: 28px var(--responsive-gutter) calc(44px + var(--safe-bottom));
  }

  .admin-sidebar,
  .mobile-menu {
    height: calc(100vh - var(--app-header-height));
    height: calc(100dvh - var(--app-header-height));
    max-height: calc(100dvh - var(--app-header-height));
  }

  .dashboard-hero,
  body:has(.student-app-shell) .dashboard-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-header-card,
  .profile-workspace,
  .upload-methods,
  .student-detail-columns,
  .certificate-student-grid,
  .certificate-model-grid,
  .credential-dialog-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-side-column {
    grid-column: 1;
    position: static;
  }

  .certificate-asset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .survey-admin-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .survey-admin-row > :last-child {
    grid-column: 2;
    justify-self: start;
  }

  .lesson-layout {
    width: min(calc(100% - (var(--responsive-gutter) * 2)), var(--workspace-content-max));
    margin-inline: auto;
  }

  .button,
  .button-small,
  .student-list-action,
  button.text-button,
  .student-admin-actions button:not(.button),
  .file-actions button,
  body:has(.student-app-shell) .button,
  body:has(.student-app-shell) .button-small,
  body:has(.admin-layout) .button,
  body:has(.admin-layout) .button-small,
  body:has(.admin-layout) .student-list-action {
    min-height: 44px;
    height: auto;
    padding: 11px 14px;
    font-size: 14px;
    line-height: 20px;
  }

  .theme-toggle,
  .header-user,
  .icon-button,
  .mobile-menu-button,
  .video-sound-button,
  .dialog-close,
  body:has(.student-app-shell) .theme-toggle,
  body:has(.student-app-shell) .header-user,
  body:has(.student-app-shell) .icon-button,
  body:has(.admin-layout) .theme-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .admin-identity,
  body:has(.admin-layout) .admin-identity,
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select {
    min-height: 44px;
    height: 44px;
  }

  .admin-nav,
  .student-nav a,
  .sidebar-collapse-button,
  .lesson-navigation button,
  .lesson-navigation a {
    min-height: 44px;
    height: auto;
  }
}

@media (max-width: 760px) {
  :root {
    --section-gap: 20px;
    --grid-gap: 14px;
  }

  .site-header,
  body:has(.student-app-shell) .site-header,
  body:has(.admin-layout) .site-header,
  body:has(.lesson-layout) .site-header,
  body:has(.certifications-shell) .site-header {
    min-height: var(--app-header-height);
    height: var(--app-header-height);
    padding-right: max(12px, var(--safe-right));
    padding-left: max(12px, var(--safe-left));
  }

  .site-header-actions {
    min-width: 0;
    gap: 6px;
  }

  .student-main-frame {
    padding-top: 0;
  }

  .student-topbar {
    top: var(--app-header-height);
    min-height: 64px;
    height: auto;
    gap: 10px;
    padding: 10px var(--responsive-gutter-compact);
  }

  .student-topbar > div:first-child {
    min-width: 0;
  }

  .student-topbar h1,
  .breadcrumb-line {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .student-page-heading,
  .student-content-area {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-right: max(var(--responsive-gutter-compact), var(--safe-right)) !important;
    padding-left: max(var(--responsive-gutter-compact), var(--safe-left)) !important;
  }

  .student-content-area {
    overflow: clip;
    padding-top: 18px;
    padding-bottom: calc(36px + var(--safe-bottom));
  }

  .student-content-area > *,
  .admin-main > *,
  .lesson-main > * {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .admin-main {
    width: 100% !important;
    padding: 22px max(var(--responsive-gutter-compact), var(--safe-right))
      calc(36px + var(--safe-bottom))
      max(var(--responsive-gutter-compact), var(--safe-left));
    overflow: clip;
  }

  .dashboard-hero,
  body:has(.student-app-shell) .dashboard-hero {
    display: grid !important;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 18px;
  }

  .progress-summary,
  .hero-copy,
  .student-priority-grid,
  .dashboard-insights,
  .insight-card,
  .video-panel,
  .video-panel-copy,
  .video-gallery,
  .information-panel,
  .information-grid {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .student-priority-grid,
  .dashboard-insights,
  .admin-summary-grid,
  .student-course-list,
  .lesson-grid,
  .student-admin-grid,
  .admin-course-list,
  .information-grid,
  .profile-status-grid,
  .profile-form-grid,
  .course-form-grid,
  .certificate-template-form-grid,
  .certificate-asset-grid,
  .certificate-filter-bar,
  .certificate-model-grid,
  .certificate-student-grid,
  .certificate-payment-conditions,
  .survey-response-list,
  .survey-option-grid,
  .credential-management-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-page-heading,
  .section-heading,
  .course-section-heading,
  .profile-section-heading,
  .attempt-header,
  .certifications-header {
    min-width: 0;
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-heading-actions,
  .admin-row-actions,
  .student-admin-actions,
  .student-detail-actions,
  .certification-list-actions,
  .hero-actions,
  .dialog-actions,
  .file-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .admin-heading-actions .button,
  .admin-row-actions .button,
  .student-admin-actions .button,
  .student-detail-actions .button,
  .certification-list-actions .button,
  .hero-actions .button,
  .dialog-actions .button,
  .file-actions .button {
    width: 100%;
  }

  .button,
  .button-small,
  .hero-actions .button,
  .student-list-action,
  button.text-button,
  .student-admin-actions button:not(.button),
  .file-actions button,
  body:has(.student-app-shell) .button,
  body:has(.student-app-shell) .button-small,
  body:has(.admin-layout) .button,
  body:has(.admin-layout) .button-small,
  body:has(.admin-layout) .student-list-action {
    min-height: 44px;
    height: auto;
    padding: 11px 14px;
    font-size: 14px;
    line-height: 20px;
    white-space: normal;
  }

  .theme-toggle,
  .header-user,
  .icon-button,
  .mobile-menu-button,
  .video-sound-button,
  .dialog-close,
  body:has(.student-app-shell) .theme-toggle,
  body:has(.student-app-shell) .header-user,
  body:has(.student-app-shell) .icon-button,
  body:has(.admin-layout) .theme-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  .admin-identity,
  body:has(.admin-layout) .admin-identity {
    min-height: 44px;
    height: 44px;
    padding: 0 12px;
    font-size: 13px;
    line-height: 20px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: 44px;
  }

  textarea {
    width: 100%;
    min-width: 0;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
  }

  .checkbox-line,
  .option-item,
  .authorship-check,
  .survey-option-grid label,
  .access-checkbox-option {
    min-height: 44px;
  }

  .verification-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 18px;
  }

  .verification-shell {
    width: 100%;
    margin: 0 auto;
    padding: 32px var(--responsive-gutter-compact);
  }

  .verification-card {
    padding: 20px 16px;
  }

  .verification-card dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-shell {
    min-height: calc(100vh - var(--app-header-height));
    min-height: calc(100dvh - var(--app-header-height));
    padding: 28px var(--responsive-gutter-compact);
  }

  .auth-card,
  .auth-card-modern {
    width: 100%;
    max-width: 100%;
    padding: 24px 20px;
  }

  .auth-brand-row {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .auth-brand-row .brand-mark {
    width: 56px;
    height: 56px;
  }

  .student-status-row {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px 12px;
  }

  .student-status-row .status-pill,
  .student-status-row .student-score-value,
  .student-status-actions {
    grid-column: 2;
    justify-self: stretch;
  }

  .student-status-actions {
    width: 100%;
  }

  .student-status-actions .button {
    width: 100%;
  }

  .certification-list-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .certification-seal {
    justify-self: start;
  }

  .survey-admin-row,
  .survey-admin-row > :last-child {
    grid-template-columns: minmax(0, 1fr);
    grid-column: auto;
  }

  .profile-photo-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-photo-preview,
  .profile-photo-frame-large {
    justify-self: start;
  }

  .timer-card {
    width: 100%;
    min-width: 0;
  }

  .uploaded-file,
  .admin-file-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .lesson-navigation button,
  .lesson-navigation a {
    min-height: 44px;
    height: auto;
  }

  .file-control input[type="file"] {
    width: 1px;
    min-width: 1px;
    height: 1px;
    min-height: 1px;
  }

  .dialog-overlay {
    padding: max(10px, var(--safe-top)) max(10px, var(--safe-right))
      max(10px, var(--safe-bottom)) max(10px, var(--safe-left));
    place-items: start center;
  }

  .dialog-card,
  .certificate-dialog-card {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    padding: 22px 16px;
  }

  .certificate-preview-sheet {
    width: 100%;
    padding: 8px;
    overflow-x: auto;
  }

  .admin-table-wrap,
  .credential-table-wrap,
  .certificate-record-table {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (min-width: 761px) and (max-width: 1024px) {
  .student-topbar {
    height: 66px;
    min-height: 66px;
    padding-block: 0;
    align-items: center;
    flex-direction: row;
  }

  .student-topbar-actions {
    width: auto;
    flex: 0 1 auto;
  }

  .global-search {
    flex: 0 1 260px;
  }

  .global-search input {
    width: clamp(190px, 30vw, 280px);
  }
}

@media (max-width: 480px) {
  :root {
    --responsive-gutter-compact: 12px;
  }

  .site-brand-copy {
    display: none;
  }

  .site-brand-symbol,
  body:has(.student-app-shell) .site-brand-symbol,
  body:has(.admin-layout) .site-brand-symbol {
    width: 34px;
    min-width: 34px;
    height: 34px;
  }

  .admin-identity {
    display: none;
  }

  .student-topbar h1 {
    font-size: 18px;
  }

  .student-page-heading h2,
  .admin-page-heading h1,
  .auth-card h1,
  .admin-login-title {
    font-size: 24px;
  }

  .dashboard-hero,
  body:has(.student-app-shell) .dashboard-hero,
  .information-panel,
  .video-panel,
  .profile-card,
  .profile-header-card,
  .certifications-page,
  .admin-content-panel,
  .course-management-panel,
  .certificate-requests-panel,
  .certificate-register-panel,
  .survey-admin-panel,
  .lesson-header,
  .attempt-header,
  .content-section,
  .question-card,
  .upload-panel,
  .submission-box {
    padding: 16px;
  }

  .hero-greeting {
    font-size: 24px;
  }

  .hero-meta {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-meta span {
    width: 100%;
  }

  .student-course-card dl,
  .admin-course-card dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .student-list-table .student-list-row {
    padding: 14px;
  }

  .status-pill,
  .submission-status-pill {
    width: auto;
    min-width: min(124px, 100%);
    max-width: 100%;
  }

  .certificate-standard-logo {
    grid-template-columns: minmax(0, 1fr);
  }

  .certificate-standard-logo img,
  .certificate-standard-logo-placeholder {
    width: 72px;
  }
}

@media (max-width: 360px) {
  .site-header,
  body:has(.student-app-shell) .site-header,
  body:has(.admin-layout) .site-header {
    padding-inline: 8px;
  }

  .site-header-actions {
    gap: 4px;
  }

  .student-topbar {
    padding-inline: 10px;
  }

  .student-content-area,
  .student-page-heading,
  .admin-main,
  .lesson-layout,
  .verification-shell {
    padding-right: max(10px, var(--safe-right)) !important;
    padding-left: max(10px, var(--safe-left)) !important;
  }

  .auth-shell {
    padding-inline: 10px;
  }

  .auth-card,
  .auth-card-modern {
    padding: 20px 14px;
  }

  .auth-brand-row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
  }

  .auth-brand-row .brand-mark {
    width: 48px;
    height: 48px;
  }

  .mobile-menu,
  .admin-sidebar {
    width: min(304px, 92vw) !important;
  }
}

@media (max-width: 1024px) and (max-height: 600px) {
  .auth-shell {
    align-items: flex-start;
    padding-block: 20px;
  }

  .dialog-overlay {
    place-items: start center;
  }

  .mobile-menu,
  .admin-sidebar {
    overflow-y: auto;
  }
}

@media (pointer: coarse) {
  .student-nav a,
  .admin-nav,
  .sidebar-collapse-button,
  .mobile-menu button,
  .lesson-navigation button,
  .lesson-navigation a {
    min-height: 44px;
  }
}

/* Independent content access, assessment state and submission management. */
.module-status-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.module-status-item {
  display: grid;
  gap: 4px;
  min-width: 112px;
}

.module-status-item > small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.module-status-item .status-pill {
  width: 100%;
}

.status-not-started {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  color: color-mix(in srgb, var(--primary) 72%, var(--muted));
}

.assessment-management-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.assessment-management-fields label {
  min-width: 0;
}

.management-field-hint {
  max-width: 74ch;
  margin: 0;
}

.attempt-management-card {
  display: grid;
  gap: 18px;
}

.attempt-management-card .form-stack {
  gap: 14px;
}

.participation-policy,
.participation-conditions {
  min-width: 0;
  padding: 20px 0;
  border-top: 1px solid var(--border-color, #dce1e5);
  border-bottom: 1px solid var(--border-color, #dce1e5);
}

.participation-policy h3,
.participation-conditions h2 {
  font-size: 18px;
  line-height: 1.4;
  margin: 0 0 16px;
}

#certificateSettingsForm .participation-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

#certificateSettingsForm .participation-toggle input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  margin: 0;
}

#participationPolicyOptions[hidden] { display: none; }

.participation-condition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px 24px;
  margin: 0 0 16px;
}

.participation-condition-grid dt { font-size: 13px; color: var(--text-muted, #64748b); }
.participation-condition-grid dd { margin: 4px 0 0; font-size: 14px; font-weight: 600; }
.participation-instructions { white-space: pre-wrap; overflow-wrap: anywhere; }
.participation-conditions button { max-width: 100%; white-space: normal; }

.review-retry-action {
  display: grid;
  justify-items: start;
  gap: 12px;
}

#adminMain .submission-columns aside .form-stack {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

#adminMain .submission-columns aside .form-stack > * {
  grid-column: 1 / -1;
  min-width: 0;
}

#adminMain .submission-columns aside h2 {
  font-size: 20px;
  line-height: 1.4;
}

#adminMain #reviewRetryOption:not([hidden]) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

#adminMain #reviewRetryOption input {
  flex: 0 0 18px;
  width: 18px;
  min-height: 18px;
  height: 18px;
  margin: 2px 0 0;
}

#adminMain .submission-columns aside .form-stack > button {
  min-height: 40px;
}

:root[data-theme="dark"] .status-not-started {
  border-color: rgba(234, 199, 139, 0.32);
  background: rgba(255, 248, 228, 0.08);
  color: rgba(255, 248, 228, 0.78);
}

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

@media (max-width: 760px) {
  .assessment-management-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .module-status-pair {
    width: 100%;
  }

  .module-status-item {
    flex: 1 1 120px;
  }

  .student-status-row .module-status-pair,
  .lesson-card-topline .module-status-pair {
    grid-column: 1 / -1;
  }
}

/* Keep lesson navigation available while the lesson content scrolls. */
@media (min-width: 1001px) {
  html:has(.lesson-layout),
  body:has(.lesson-layout) {
    overflow-x: clip;
  }

  .lesson-layout {
    align-items: start;
  }

  .lesson-sidebar {
    position: -webkit-sticky;
    position: sticky !important;
    z-index: 20;
    top: calc(var(--app-header-height) + 16px);
    display: flex;
    max-height: calc(100vh - var(--app-header-height) - 32px);
    max-height: calc(100dvh - var(--app-header-height) - 32px);
    flex-direction: column;
    align-self: start;
    overflow: hidden;
  }

  .lesson-navigation {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

@media (max-width: 1000px) {
  .lesson-sidebar {
    position: static !important;
    max-height: none;
    overflow: visible;
  }
}

/* Lesson copy follows the full card width before wrapping. */
.lesson-main .lesson-header h1,
.lesson-main .lesson-header > p,
.lesson-main .content-section .rich-content,
.lesson-main .content-section .rich-content p,
.lesson-main .content-section .rich-content ul,
.lesson-main .content-section .rich-content ol,
.lesson-main .content-section .rich-content blockquote {
  max-width: 100%;
}

/* Internal and optional external notification channels. */
.notification-button {
  position: relative;
}

.mobile-header-action {
  display: none;
  position: relative;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

.mobile-header-action > img {
  width: 18px;
  height: 18px;
}

:root[data-theme="dark"] .mobile-header-action > img {
  filter: brightness(0) saturate(100%) invert(94%) sepia(17%) saturate(399%) hue-rotate(342deg) brightness(106%) contrast(102%);
}

.chat-live-indicator:not(.is-connected) i {
  background: #8798a4;
  box-shadow: none;
}

.chat-live-indicator.is-connected {
  color: #168764;
}

.chat-message.is-pending {
  opacity: .72;
}

.chat-message.is-failed .chat-message-bubble {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
}

.chat-delivery-status.is-failed {
  color: var(--danger);
}

.chat-delivery-status.is-pending img {
  animation: chat-pending-pulse 1.2s ease-in-out infinite;
}

@keyframes chat-pending-pulse {
  50% { opacity: .35; }
}

@media (max-width: 1024px) {
  .mobile-header-action:not([hidden]) {
    display: inline-grid;
  }

  body:has(.student-app-shell) .site-header .header-user,
  body:has(.student-app-shell) .site-header .theme-toggle,
  body:has(.lesson-layout) .site-header .header-user,
  body:has(.lesson-layout) .site-header .theme-toggle,
  body:has(.certifications-shell) .site-header .header-user,
  body:has(.certifications-shell) .site-header .theme-toggle {
    display: none;
  }

  .student-topbar-actions .notification-button {
    display: none !important;
  }

  .admin-sidebar .admin-nav[data-admin-view="notifications"],
  .admin-sidebar .admin-nav[data-admin-view="chat"] {
    display: none !important;
  }
}

@media (max-width: 760px) {
  body:has(.admin-layout) .site-header .admin-identity,
  body:has(.admin-layout) .site-header .theme-toggle {
    display: none;
  }
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  place-items: center;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.notifications-page,
.notification-history-panel {
  display: grid;
  gap: 20px;
}

.notifications-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.notifications-toolbar h2,
.notifications-toolbar p {
  margin: 0;
}

.notification-list {
  display: grid;
  gap: 12px;
}

.notification-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.notification-item.is-unread {
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 10%, var(--surface));
}

.notification-item-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-soft);
}

.notification-item-icon img {
  width: 20px;
  height: 20px;
}

.notification-item-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.notification-item-copy h2,
.notification-item-copy p {
  max-width: 100%;
  margin: 0;
}

.notification-item-copy h2 {
  font-size: 17px;
}

.notification-item-copy p {
  color: var(--muted);
  font-size: 14px;
}

.notification-item-meta,
.notification-item-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.notification-item-meta {
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.profile-notification-settings {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.profile-notification-settings legend {
  padding: 0 6px;
  color: var(--text);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.profile-notification-intro {
  max-width: 68ch;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.profile-notification-channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-notification-channels > .notification-channel-option {
  display: grid;
  grid-column: auto;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
  min-height: 142px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.profile-notification-channels > label.notification-channel-option {
  cursor: pointer;
}

.profile-notification-channels > .notification-channel-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.profile-notification-channels > .notification-channel-option:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.profile-notification-channels > .notification-channel-option > input {
  margin-top: 3px;
}

.profile-notification-channels .notification-channel-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: 92px;
  min-width: 92px;
  height: 26px;
  margin-top: 7px;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}

.profile-notification-channels .notification-channel-state.is-active {
  border-color: color-mix(in srgb, var(--success) 42%, transparent);
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
  color: var(--success);
}

.notification-telegram-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  margin-top: 8px;
}

.notification-telegram-actions .button {
  width: auto;
  min-height: 32px;
}

.notification-consent-option,
.notification-channel-option {
  align-items: flex-start;
}

.notification-consent-option > span,
.notification-channel-option > span {
  display: grid;
  gap: 3px;
}

.notification-consent-option small,
.notification-channel-option small,
.profile-notification-settings > small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.notification-preference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.notification-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: var(--grid-gap);
}

.notification-composer-card,
.notification-configuration-card,
.whatsapp-configuration-card {
  align-content: start;
}

.notification-composer-card > .form-stack,
.notification-configuration-card > .form-stack,
.whatsapp-configuration-card > .form-stack {
  grid-template-columns: minmax(0, 1fr);
}

.notification-composer-card > .form-stack > *,
.notification-configuration-card > .form-stack > *,
.whatsapp-configuration-card > .form-stack > * {
  grid-column: 1;
  min-width: 0;
}

.notification-configuration-stack {
  display: grid;
  min-width: 0;
  gap: var(--grid-gap);
  align-content: start;
}

.notification-configuration-card .section-heading {
  align-items: center;
}

.notification-configuration-card .section-heading .status-pill {
  flex: 0 0 auto;
}

.notification-recipient-picker {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.notification-recipient-picker > legend {
  margin-bottom: 8px;
  padding: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.notification-recipient-toolbar,
.notification-recipient-summary,
.notification-recipient-actions,
.notification-recipient-channels,
.notification-configuration-meta,
.whatsapp-configuration-meta {
  display: flex;
  align-items: center;
}

.notification-recipient-toolbar {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.notification-recipient-search {
  position: relative;
  flex: 1 1 280px;
  min-width: 0;
}

.notification-recipient-search img {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 1;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  pointer-events: none;
}

.notification-recipient-search input {
  width: 100%;
  padding-left: 38px;
}

.notification-recipient-search input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 24%, transparent);
}

.notification-recipient-actions {
  flex: 0 0 auto;
  gap: 8px;
}

.notification-recipient-summary {
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}

.notification-recipient-summary .checkbox-line {
  color: var(--text);
}

.notification-recipient-summary > span {
  white-space: nowrap;
}

.notification-recipient-list {
  max-height: 400px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.notification-recipient-list.is-disabled {
  opacity: .58;
}

.notification-recipient-list.is-disabled .notification-recipient-row {
  cursor: default;
}

.notification-recipient-list.is-disabled .notification-recipient-row:hover {
  background: transparent;
}

.notification-recipient-row {
  display: grid;
  grid-template-columns: 18px 38px minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 72px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.notification-recipient-row:last-child {
  border-bottom: 0;
}

.notification-recipient-row:hover {
  background: var(--surface-soft);
}

.notification-recipient-row:focus-within {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: var(--surface-soft);
}

.notification-recipient-row.is-selected {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.notification-recipient-row > input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--primary);
}

.notification-recipient-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 9px;
  background: var(--primary);
  color: #fff8e4;
  font-size: 12px;
  font-weight: 700;
}

:root[data-theme="dark"] .notification-recipient-avatar {
  color: #082033;
}

.notification-recipient-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.notification-recipient-copy strong,
.notification-recipient-copy span,
.notification-recipient-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-recipient-copy strong {
  color: var(--text);
  font-size: 14px;
}

.notification-recipient-copy span,
.notification-recipient-copy small {
  color: var(--muted);
  font-size: 12px;
}

.notification-recipient-channels {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.notification-recipient-channels .status-pill {
  flex: 0 0 96px;
  width: 96px;
  min-width: 96px;
  padding-inline: 7px;
  font-size: 10px;
}

.notification-channel-state.is-ready,
.notification-recipient-channels .status-approved {
  border: 1px solid color-mix(in srgb, var(--success) 38%, transparent);
  background: color-mix(in srgb, var(--success) 13%, var(--surface));
  color: var(--success);
}

.notification-whatsapp-state.is-ready,
.notification-channel-state.is-ready {
  border: 1px solid color-mix(in srgb, var(--success) 42%, transparent);
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
  color: var(--success);
}

.notification-whatsapp-state.is-unavailable,
.notification-channel-state.is-unavailable {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
}

.notification-channel-selector {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.notification-channel-selector legend {
  padding: 0 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.notification-channel-selector > p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.notification-channel-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.notification-channel-selector-grid .notification-channel-option {
  grid-column: auto;
  min-height: 64px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.notification-channel-selector-grid .notification-channel-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.notification-channel-selector-grid .notification-channel-option:has(input:disabled) {
  opacity: .68;
  cursor: not-allowed;
}

.notification-channel-selector-grid .notification-channel-option:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.notification-recipient-empty {
  margin: 10px 0 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.notification-recipient-help {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.notification-configuration-form,
.whatsapp-configuration-form {
  min-width: 0;
}

.notification-security-note,
.whatsapp-security-note {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.notification-security-note.is-secure,
.whatsapp-security-note.is-secure {
  border-color: color-mix(in srgb, var(--success) 28%, var(--line));
}

.notification-security-note.is-warning,
.whatsapp-security-note.is-warning {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
}

.notification-security-note img,
.whatsapp-security-note img {
  width: 19px;
  height: 19px;
}

.notification-configuration-meta,
.whatsapp-configuration-meta {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  color: var(--muted);
  font-size: 12px;
}

.notification-configuration-meta strong,
.whatsapp-configuration-meta strong {
  color: var(--text);
}

.notification-remove-secret,
.whatsapp-remove-token {
  color: var(--danger);
}

.notification-config-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.notification-config-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.notification-config-list dt {
  color: var(--muted);
  font-size: 13px;
}

.notification-config-list dd {
  margin: 0;
  color: var(--text);
  font-weight: 600;
  text-align: right;
}

.notification-admin-table td:nth-child(2) {
  min-width: 300px;
}

.notification-admin-table td strong,
.notification-admin-table td small {
  display: block;
}

.notification-admin-table td small {
  max-width: 58ch;
  margin-top: 3px;
  color: var(--muted);
  white-space: normal;
}

.notification-delivery-sent {
  background: color-mix(in srgb, var(--success) 14%, var(--surface));
  color: var(--success);
}

.notification-delivery-pending {
  background: color-mix(in srgb, var(--warning) 16%, var(--surface));
  color: var(--warning);
}

.notification-delivery-failed {
  background: color-mix(in srgb, var(--danger) 14%, var(--surface));
  color: var(--danger);
}

.notification-delivery-skipped,
.notification-delivery-not_requested {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
}

@media (max-width: 1240px) {
  .notification-admin-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .notification-recipient-list {
    max-height: 460px;
  }
}

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

  .notifications-toolbar {
    align-items: stretch;
    flex-direction: column;
    padding: 18px;
  }

  .notifications-toolbar .button,
  .notification-item-actions .button {
    width: 100%;
  }

  .notification-item {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .notification-item-icon {
    width: 36px;
    height: 36px;
  }

  .notification-preference-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-notification-channels {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-notification-channels > .notification-channel-option {
    min-height: 0;
  }

  .notification-telegram-actions .button {
    flex: 1 1 160px;
    width: 100%;
  }

  .notification-channel-selector-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .notification-recipient-toolbar,
  .notification-recipient-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .notification-recipient-search {
    flex-basis: auto;
  }

  .notification-recipient-actions .button {
    flex: 1 1 0;
  }

  .notification-recipient-summary > span {
    white-space: normal;
  }

  .notification-recipient-row {
    grid-template-columns: 18px 38px minmax(0, 1fr);
    min-height: 78px;
  }

  .notification-recipient-channels {
    grid-column: 3;
    justify-content: flex-start;
  }

  .notification-history-panel .admin-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .notification-admin-table,
  .notification-admin-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .notification-admin-table thead {
    display: none;
  }

  .notification-admin-table tbody {
    display: grid;
    gap: 10px;
  }

  .notification-admin-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
  }

  .notification-admin-table td {
    display: grid;
    align-content: start;
    min-width: 0;
    height: auto;
    gap: 4px;
    padding: 8px 0;
    border: 0;
  }

  .notification-admin-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
  }

  .notification-admin-table td:nth-child(1),
  .notification-admin-table td:nth-child(2) {
    grid-column: 1 / -1;
  }

  .notification-admin-table td:nth-child(1) {
    padding-top: 0;
  }

  .notification-admin-table td:nth-child(2) {
    min-width: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 480px) {
  .notification-recipient-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .notification-recipient-actions .button {
    width: 100%;
  }

  .notification-recipient-row {
    gap: 10px;
    padding: 10px;
  }

  .notification-recipient-avatar {
    width: 34px;
    height: 34px;
  }

  .notification-recipient-channels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    width: 100%;
  }

  .notification-recipient-channels .status-pill {
    width: 100%;
    min-width: 0;
  }

  .notification-configuration-card .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .notification-admin-table tr {
    grid-template-columns: minmax(0, 1fr);
  }

  .notification-admin-table td,
  .notification-admin-table td:nth-child(1),
  .notification-admin-table td:nth-child(2) {
    grid-column: 1;
  }
}

@media (max-width: 360px) {
  .notification-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .notification-recipient-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* PWA, Web Push and editable notification templates */
.notification-push-option .notification-channel-icon {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  margin-top: 1px;
}

.notification-push-option .notification-channel-icon img {
  width: 18px;
  height: 18px;
}

.notification-push-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  margin-top: 8px;
}

.notification-push-actions .button {
  width: auto;
  min-height: 32px;
}

.notification-push-option .notification-channel-state {
  width: auto;
  min-width: 92px;
  max-width: 100%;
}

.install-app-dialog-overlay {
  z-index: 720;
}

.install-app-dialog {
  width: min(100%, 720px);
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 14px;
}

.install-app-dialog .install-app-dialog-close {
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
}

.install-app-dialog-header {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding-right: 34px;
}

.install-app-dialog-mark {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  background: #00365b;
  box-shadow: 0 10px 28px rgba(0, 54, 91, .18);
}

.install-app-dialog-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.install-app-dialog-header .eyebrow {
  margin: 0 0 3px;
}

.install-app-dialog-header h2 {
  margin: 0;
  color: var(--text);
  font: 600 clamp(21px, 3vw, 27px)/1.2 "Manrope", "Inter", sans-serif;
}

.install-app-dialog-header p:last-child {
  max-width: 60ch;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.install-app-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 20px 0;
}

.install-app-benefits span {
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.install-app-benefits img,
.install-app-dialog-note img {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.install-app-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.install-app-steps li {
  display: grid;
  grid-template-columns: 28px 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.install-app-step-number,
.install-app-step-icon {
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.install-app-step-number {
  width: 26px;
  height: 26px;
  background: #00365b;
  color: #fff8e4;
  font-size: 12px;
  font-weight: 700;
}

.install-app-step-icon {
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.install-app-step-icon img {
  width: 19px;
  height: 19px;
}

.install-app-steps strong,
.install-app-steps small {
  display: block;
}

.install-app-steps strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.install-app-steps small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.install-app-dialog-note,
.install-app-dialog-status {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 0 0;
  padding: 11px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 11%, var(--surface-soft));
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.install-app-dialog-status {
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  color: var(--text);
}

.install-app-dialog-status[hidden] {
  display: none;
}

.install-app-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.push-activation-dialog-overlay {
  z-index: 730;
}

.push-activation-dialog {
  width: min(100%, 680px);
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 14px;
}

.push-activation-dialog .push-activation-dialog-close {
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
}

.push-activation-dialog-header {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding-right: 36px;
}

.push-activation-dialog-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

.push-activation-dialog-icon img {
  width: 26px;
  height: 26px;
}

.push-activation-dialog-header .eyebrow {
  margin: 0 0 3px;
}

.push-activation-dialog-header h2 {
  margin: 0;
  color: var(--text);
  font: 600 clamp(21px, 3vw, 27px)/1.2 "Manrope", "Inter", sans-serif;
}

.push-activation-dialog-header p:last-child {
  max-width: 58ch;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.push-activation-topics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 20px 0 0;
}

.push-activation-topics > span {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-content: start;
  gap: 2px 8px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.push-activation-topics img {
  grid-row: 1 / span 2;
  width: 20px;
  height: 20px;
}

.push-activation-topics strong,
.push-activation-topics small {
  display: block;
  min-width: 0;
}

.push-activation-topics strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.push-activation-topics small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.push-activation-privacy {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-soft));
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.push-activation-privacy img {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.push-activation-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.push-recommendation {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 1000;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: min(560px, calc(100vw - 32px));
  padding: 16px 48px 16px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.push-recommendation-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}

.push-recommendation-icon img {
  width: 22px;
  height: 22px;
}

.push-recommendation-copy {
  min-width: 0;
}

.push-recommendation-copy strong {
  display: block;
  font: 600 15px/1.35 "Manrope", "Inter", sans-serif;
}

.push-recommendation-copy p {
  max-width: 48ch;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.push-recommendation-close {
  position: absolute;
  top: 0;
  right: 2px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 20px;
}

.notification-channel-overrides {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.notification-channel-overrides summary {
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.notification-channel-overrides[open] summary {
  margin-bottom: 10px;
}

.notification-channel-overrides > p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
}

.notification-template-panel {
  display: grid;
  gap: 18px;
  margin-top: var(--grid-gap);
}

.notification-template-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.notification-template-toolbar label {
  flex: 1 1 420px;
  max-width: 560px;
}

.notification-template-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.notification-template-variables,
.notification-template-actions,
.notification-template-preview-grid {
  grid-column: 1 / -1;
}

.notification-template-variables {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.notification-template-variables strong {
  margin-right: 4px;
  color: var(--text);
}

.notification-template-variables code {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 11px;
}

.notification-template-channel-block {
  display: grid;
  align-content: start;
  gap: 11px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.notification-template-channel-block h3 {
  margin: 0;
  font-size: 16px;
}

.notification-template-channel-block .eyebrow {
  margin: 0 0 2px;
}

.notification-template-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.notification-template-preview-grid article {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.notification-template-preview-grid span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.notification-template-preview-grid strong,
.notification-template-preview-grid p {
  overflow-wrap: anywhere;
}

.notification-template-preview-grid p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.notification-template-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 1024px) {
  .notification-template-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .notification-template-channel-block {
    grid-column: 1;
  }
}

@media (max-width: 760px) {
  .install-app-dialog {
    padding: 22px 16px 16px;
  }

  .install-app-dialog-header {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 11px;
    padding-right: 30px;
  }

  .install-app-dialog-mark {
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }

  .install-app-benefits {
    grid-template-columns: minmax(0, 1fr);
    margin: 16px 0;
  }

  .install-app-steps li {
    grid-template-columns: 26px 36px minmax(0, 1fr);
    padding: 9px;
  }

  .install-app-step-icon {
    width: 36px;
    height: 36px;
  }

  .install-app-dialog-actions {
    flex-direction: column-reverse;
  }

  .install-app-dialog-actions .button {
    width: 100%;
    min-height: 44px;
  }

  .push-activation-dialog {
    padding: 22px 16px 16px;
  }

  .push-activation-dialog-header {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 11px;
    padding-right: 30px;
  }

  .push-activation-dialog-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  .push-activation-topics {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 16px;
  }

  .push-activation-dialog-actions {
    flex-direction: column-reverse;
  }

  .push-activation-dialog-actions .button {
    width: 100%;
    min-height: 44px;
  }

  .push-recommendation {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 14px 48px 14px 14px;
  }

  .push-recommendation > .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .push-recommendation-icon {
    width: 36px;
    height: 36px;
  }

  .notification-push-actions .button,
  .notification-template-actions .button {
    flex: 1 1 160px;
    width: 100%;
  }

  .notification-template-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .notification-template-preview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .notification-template-actions {
    flex-direction: column;
  }
}

/* The professional certificate is an isolated A4 vector document. */
.certificate-preview-sheet:has(professional-certificate) {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.certificate-preview-dialog:has(professional-certificate) {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(1280px, calc(100vw - 32px));
  max-width: 100%;
  max-height: calc(100dvh - 24px);
  padding: 38px 20px 16px;
  overflow: auto;
}

.certificate-preview-dialog:has(professional-certificate) .dialog-actions {
  flex: 0 0 auto;
  margin-top: 0;
}

.certificate-model-preview-panel:has(professional-certificate) {
  min-width: 0;
}

professional-certificate {
  display: block;
  width: 100%;
  min-width: 0;
}

@media (max-width: 600px) {
  .certificate-preview-dialog:has(professional-certificate) {
    width: calc(100vw - 16px);
    padding: 34px 10px 12px;
    gap: 10px;
  }
}
/* Cursor pagination keeps large administrative lists compact and stable. */
.cursor-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--line, #d8dee6);
  color: var(--muted, #617286);
  font-size: 0.875rem;
}

.cursor-pagination > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cursor-pagination .button-compact {
  min-height: 34px;
  padding: 7px 12px;
}

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

  .cursor-pagination > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .certificate-preview-sheet:not(.is-professional) {
    overflow: hidden;
  }

  .certificate-preview-inner.certificate-document-participation {
    min-width: 0;
  }
}
/* Reviewer scope editor */
.reviewer-scope-editor {
  padding: 16px;
}

.reviewer-scope-mode {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.reviewer-scope-mode label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border-color, #d5dde5);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-color, #fff);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.reviewer-scope-mode label:has(input:checked) {
  border-color: var(--accent, #c79d43);
  background: color-mix(in srgb, var(--accent, #c79d43) 12%, white);
}

.reviewer-scope-mode input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.reviewer-scope-options {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
  padding: 4px 2px;
}

.reviewer-scope-options label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color, #d5dde5);
  border-radius: var(--radius-sm, 6px);
  font-size: 0.875rem;
  line-height: 1.4;
}

.reviewer-scope-options input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.reviewer-effective-access {
  display: grid;
  gap: 3px;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border-color, #d5dde5);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-muted, #f6f8fa);
  font-size: 0.875rem;
  line-height: 1.45;
}

.reviewer-effective-access strong {
  color: var(--text, #15324a);
}

.reviewer-effective-access span {
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  .reviewer-scope-mode {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.read-only-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border-color, #d5dde5);
  border-radius: var(--radius-md, 8px);
}

.academic-calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.8fr);
  gap: 18px;
  align-items: start;
}

.student-calendar-panel {
  display: grid;
  gap: 16px;
}

.student-calendar-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}

.student-calendar-event {
  display: grid;
  grid-template-columns: minmax(108px, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border-color, #d5dde5);
  border-radius: var(--radius-md, 8px);
  background: var(--surface, #fff);
}

.student-calendar-event time {
  color: var(--muted, #617286);
  font-size: 0.75rem;
  font-weight: 700;
}

.student-calendar-event div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.student-calendar-event strong,
.student-calendar-event span {
  overflow-wrap: anywhere;
}

.student-calendar-event span {
  color: var(--muted, #617286);
  font-size: 0.875rem;
}

.review-rubric {
  display: grid;
  gap: 12px;
}

.rubric-score-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.38fr) minmax(160px, 0.7fr);
  gap: 10px;
  align-items: end;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color, #d5dde5);
}

.rubric-score-row > div,
.rubric-score-row label {
  min-width: 0;
}

.rubric-score-row strong,
.rubric-score-row small {
  display: block;
  overflow-wrap: anywhere;
}

.rubric-score-row small {
  margin-top: 4px;
  color: var(--muted, #617286);
}

.grade-history {
  margin-top: 16px;
  border-top: 1px solid var(--border-color, #d5dde5);
  padding-top: 12px;
}

.grade-history summary {
  font-weight: 700;
  cursor: pointer;
}

.grade-history article {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color, #d5dde5);
  font-size: 0.875rem;
}

.grade-history article span,
.grade-history article small {
  color: var(--muted, #617286);
}

@media (max-width: 980px) {
  .academic-calendar-layout,
  .rubric-score-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .student-calendar-event {
    grid-template-columns: 1fr;
  }
}

/* Stage 12: navigation and accessibility foundations */
.eyebrow {
  color: var(--accent-text, #76570f);
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10000;
  padding: 10px 14px;
  border: 2px solid var(--primary, #00365b);
  border-radius: var(--radius-small, 6px);
  background: var(--surface, #fff);
  color: var(--primary, #00365b);
  font-size: 0.875rem;
  font-weight: 700;
  transform: translateY(calc(-100% - 16px));
  transition: transform 120ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent, #caa85e) 78%, #fff);
  outline-offset: 2px;
}

:where(.admin-main, .student-main-frame, .lesson-layout, .certifications-shell) h1[tabindex="-1"]:focus {
  outline: 0;
}

.admin-nav[aria-current="page"],
.student-nav a[aria-current="page"] {
  font-weight: 750;
}

.admin-nav {
  text-decoration: none;
}

.admin-main :where(h1, h2, [id]),
.student-main-frame :where(h1, h2, [id]) {
  scroll-margin-top: calc(var(--app-header-height, 56px) + 20px);
}

.dialog-overlay {
  overscroll-behavior: contain;
}

.dialog-card[role="dialog"] {
  max-height: min(90dvh, 920px);
  overflow: auto;
  overscroll-behavior: contain;
}

.loading-state[role="status"] {
  min-height: 160px;
}

@media (max-width: 760px) {
  .admin-nav,
  .student-nav a,
  .mobile-menu button,
  .dialog-actions .button {
    min-height: 44px;
  }

  .dialog-actions {
    align-items: stretch;
  }

  .dialog-actions .button {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}