:root {
  --op-brand-navy: #0f172a;
  --op-brand-navy-deep: #020617;
  --op-brand-blue: #2563eb;
  --op-brand-blue-hover: #1d4ed8;
  --op-brand-blue-start: #3b82f6;
  --op-brand-blue-light: #60a5fa;
  --op-brand-slate: #94a3b8;
  --op-brand-success: #22c55e;

  --delta-orange: var(--op-brand-blue); /* Deprecated alias: use --op-brand-blue. */
  --delta-grey: var(--op-brand-slate); /* Deprecated alias: use --op-brand-slate. */
  --delta-navy: var(--op-brand-navy); /* Deprecated alias: use --op-brand-navy. */
  --delta-blue: var(--op-brand-blue); /* Deprecated alias: use --op-brand-blue. */
  --delta-lime: var(--op-brand-success); /* Deprecated alias: use --op-brand-success. */
  --danger-red: #dc2626;
  --navy-950: var(--op-brand-navy);
  --navy-900: #111827;
  --navy-800: #1e293b;
  --navy-700: #334155;
  --ink: #102033;
  --muted: #637083;
  --line: #e2e8f0;
  --soft: #f8fafc;
  --white: #ffffff;
  --orange: var(--delta-orange);
  --orange-700: var(--op-brand-blue-hover);
  --blue: var(--delta-blue);
  --green: #5f9f3d;
  --red: var(--danger-red);
  --shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--soft);
  color: var(--ink);
  font-family:
    Arial, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

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

.hidden {
  display: none !important;
}

.shell {
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  contain: paint;
}

.front-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 560px);
  place-content: center;
  gap: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  contain: paint;
  padding: 30px;
  background:
    radial-gradient(circle at 18% 20%, rgba(37, 99, 235, 0.12), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f1f5f9 58%, #e2e8f0 100%);
}

.front-panel,
.front-tile,
.front-aside,
.card,
.data-panel,
.locked-state {
  min-width: 0;
  border: 1px solid rgba(220, 227, 236, 0.86);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.front-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 28px;
  padding: 34px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(215, 224, 236, 0.9);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
}

.brand-logo {
  display: block;
  width: 245px;
  height: auto;
  aspect-ratio: 650 / 230;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  overflow: visible;
  border-radius: 4px;
}

.brand-mark.compact .brand-logo {
  width: 230px;
}

.front-panel > .brand-mark .brand-logo {
  width: min(470px, 100%);
  max-height: 150px;
  object-fit: contain;
}

.front-copy h1 {
  max-width: 560px;
  margin: 10px 0;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: 0;
  font-weight: 800;
}

.front-copy p {
  max-width: 590px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.front-actions input {
  background: rgba(255, 255, 255, 0.98);
}

.profile-signout {
  min-height: 38px;
  border: 1px solid rgba(220, 227, 236, 0.34);
  border-radius: 7px;
  background: var(--white);
  color: var(--ink);
  font-weight: 800;
}

.login-status {
  min-height: 22px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.login-status.error {
  color: #991b1b;
}

.login-status.success {
  color: #166534;
}

.preview-access {
  color: var(--muted);
}

.preview-access summary {
  cursor: pointer;
  font-weight: 800;
}

.profile-signout {
  margin-top: 8px;
  width: 100%;
  color: var(--ink);
  background: var(--white);
  border-color: var(--line);
}

.eyebrow {
  margin: 0;
  color: var(--orange);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.front-actions {
  display: grid;
  gap: 10px;
  max-width: 340px;
}

.front-actions label,
.profile-card label {
  color: #aebdcb;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

select,
input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 14px;
  color: var(--ink);
  background: var(--white);
}

.primary-button,
.ghost-button,
.chip,
.table-action {
  border-radius: 7px;
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
}

.primary-button {
  border: 0;
  background: linear-gradient(180deg, #3b82f6, var(--orange));
  color: var(--white);
  font-weight: 800;
}

.front-aside {
  align-self: center;
  max-width: 620px;
  padding: 34px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.96)),
    var(--white);
}

.front-aside h2 {
  max-width: 520px;
  margin: 12px 0;
  font-size: clamp(34px, 3.4vw, 54px);
  line-height: 1.02;
  letter-spacing: 0;
}

.front-aside p {
  max-width: 540px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

.front-assurance-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.front-assurance-list span {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--white);
  color: var(--ink);
  font-weight: 900;
}

.danger-button {
  min-height: 42px;
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 8px;
  padding: 0 14px;
  background: #fff;
  color: #991b1b;
  font-weight: 900;
}

.front-tiles {
  align-self: center;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.front-tile {
  min-height: 190px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 250, 0.96)),
    var(--white);
}

.front-tile h2 {
  margin: 20px 0 6px;
  font-size: 21px;
}

.front-tile p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.tile-icon {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--ink);
  position: relative;
}

.front-tile .tile-icon {
  width: 54px;
  height: 54px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.tile-icon::before,
.tile-icon::after {
  content: "";
  position: absolute;
  display: block;
}

.training-icon::before {
  width: 22px;
  height: 14px;
  border: 3px solid currentColor;
  border-top: 0;
  transform: skewX(-24deg);
}

.training-icon::after {
  width: 18px;
  height: 3px;
  background: currentColor;
  top: 12px;
  transform: rotate(20deg);
}

.guide-icon::before {
  width: 20px;
  height: 24px;
  border: 3px solid currentColor;
  border-radius: 4px;
}

.guide-icon::after {
  width: 3px;
  height: 24px;
  background: currentColor;
  left: 14px;
}

.instruction-icon::before,
.parts-icon::before {
  width: 20px;
  height: 25px;
  border: 3px solid currentColor;
  border-radius: 3px;
}

.instruction-icon::after,
.parts-icon::after {
  width: 12px;
  height: 3px;
  background: var(--orange);
  top: 12px;
  box-shadow: 0 7px 0 var(--orange);
}

.equipment-icon::before {
  width: 21px;
  height: 25px;
  border: 3px solid currentColor;
  border-radius: 4px;
}

.equipment-icon::after {
  width: 12px;
  height: 3px;
  background: currentColor;
  top: 12px;
  box-shadow: 0 7px 0 currentColor;
}

.quiz-icon::before {
  width: 22px;
  height: 22px;
  border: 3px solid currentColor;
  border-radius: 50%;
}

.quiz-icon::after {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.18);
}

.health-icon::before {
  width: 22px;
  height: 25px;
  border: 3px solid currentColor;
  border-radius: 12px 12px 7px 7px;
  clip-path: polygon(50% 0, 100% 16%, 92% 78%, 50% 100%, 8% 78%, 0 16%);
}

.health-icon::after {
  width: 16px;
  height: 16px;
  background:
    linear-gradient(var(--orange), var(--orange)) center / 16px 3px no-repeat,
    linear-gradient(var(--orange), var(--orange)) center / 3px 16px no-repeat;
}

.dashboard-icon::before {
  width: 22px;
  height: 18px;
  border: 3px solid currentColor;
  border-radius: 5px;
  box-shadow:
    inset 0 -8px 0 transparent,
    0 0 0 0 currentColor;
}

.dashboard-icon::after {
  width: 7px;
  height: 14px;
  left: 9px;
  bottom: 6px;
  border-radius: 3px 3px 0 0;
  background: var(--orange);
  box-shadow:
    9px -5px 0 var(--orange),
    -9px 4px 0 var(--orange);
}

.manager-icon::before {
  width: 22px;
  height: 18px;
  border: 3px solid currentColor;
  border-radius: 5px;
}

.manager-icon::after {
  width: 18px;
  height: 11px;
  border-left: 3px solid var(--orange);
  border-bottom: 3px solid var(--orange);
  transform: rotate(-45deg);
  top: 6px;
}

.scheduling-icon::before {
  width: 23px;
  height: 22px;
  border: 3px solid currentColor;
  border-radius: 5px;
}

.scheduling-icon::after {
  width: 15px;
  height: 12px;
  border-left: 3px solid var(--orange);
  border-bottom: 3px solid var(--orange);
  transform: rotate(-45deg);
  top: 8px;
}

.manual-icon::before {
  width: 22px;
  height: 24px;
  border: 3px solid currentColor;
  border-radius: 4px;
  box-shadow: inset 9px 0 0 transparent;
}

.manual-icon::after {
  width: 3px;
  height: 22px;
  left: 15px;
  background: var(--orange);
}

.electrical-icon::before {
  width: 20px;
  height: 24px;
  border: 3px solid currentColor;
  border-radius: 4px;
}

.electrical-icon::after {
  width: 10px;
  height: 18px;
  background: var(--orange);
  clip-path: polygon(54% 0, 100% 0, 66% 42%, 100% 42%, 28% 100%, 42% 55%, 0 55%);
}

.checklist-icon::before {
  width: 22px;
  height: 24px;
  border: 3px solid currentColor;
  border-radius: 4px;
}

.checklist-icon::after {
  width: 13px;
  height: 10px;
  border-left: 3px solid var(--orange);
  border-bottom: 3px solid var(--orange);
  transform: rotate(-45deg);
  top: 8px;
}

.certificate-icon::before {
  width: 23px;
  height: 19px;
  border: 3px solid currentColor;
  border-radius: 4px;
}

.certificate-icon::after {
  width: 10px;
  height: 10px;
  bottom: 3px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 8px 0 -3px var(--orange);
}

.calibration-icon::before {
  width: 24px;
  height: 24px;
  border: 3px solid currentColor;
  border-radius: 50%;
}

.calibration-icon::after {
  width: 13px;
  height: 3px;
  background: var(--orange);
  transform: rotate(-38deg);
  transform-origin: left center;
  left: 16px;
  top: 17px;
}

.calculator-icon::before {
  width: 22px;
  height: 25px;
  border: 3px solid currentColor;
  border-radius: 4px;
}

.calculator-icon::after {
  width: 13px;
  height: 3px;
  top: 12px;
  background: var(--orange);
  box-shadow:
    0 6px 0 var(--orange),
    -5px 12px 0 currentColor,
    5px 12px 0 currentColor;
}

.parts-icon::before {
  width: 22px;
  height: 22px;
  border: 3px solid currentColor;
  border-radius: 4px;
}

.parts-icon::after {
  width: 4px;
  height: 4px;
  top: 10px;
  left: 14px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow:
    8px 0 0 var(--orange),
    0 8px 0 var(--orange),
    8px 8px 0 var(--orange);
}

.policy-icon::before,
.folder-icon::before {
  width: 24px;
  height: 18px;
  border: 3px solid currentColor;
  border-radius: 3px;
}

.policy-icon::after {
  width: 12px;
  height: 9px;
  border-left: 3px solid var(--orange);
  border-bottom: 3px solid var(--orange);
  transform: rotate(-45deg);
  top: 8px;
}

.folder-icon::after {
  width: 12px;
  height: 6px;
  left: 8px;
  top: 7px;
  border-radius: 3px 3px 0 0;
  background: var(--orange);
}

.coshh-icon::before {
  width: 22px;
  height: 22px;
  border: 3px solid currentColor;
  transform: rotate(45deg);
  border-radius: 3px;
}

.coshh-icon::after,
.alert-icon::after {
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: var(--orange);
  box-shadow: 0 10px 0 -1px var(--orange);
}

.alert-icon::before {
  width: 25px;
  height: 23px;
  border: 3px solid currentColor;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.talk-icon::before {
  width: 24px;
  height: 18px;
  border: 3px solid currentColor;
  border-radius: 6px;
}

.talk-icon::after {
  width: 10px;
  height: 8px;
  left: 13px;
  bottom: 7px;
  border-left: 3px solid var(--orange);
  border-bottom: 3px solid var(--orange);
}

.height-icon::before {
  width: 18px;
  height: 24px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

.height-icon::after {
  width: 20px;
  height: 3px;
  background: var(--orange);
  box-shadow:
    0 -7px 0 var(--orange),
    0 7px 0 var(--orange);
  transform: rotate(-16deg);
}

.audit-icon::before {
  width: 22px;
  height: 25px;
  border: 3px solid currentColor;
  border-radius: 4px;
}

.audit-icon::after {
  width: 15px;
  height: 10px;
  border-left: 3px solid var(--orange);
  border-bottom: 3px solid var(--orange);
  transform: rotate(-45deg);
  top: 9px;
}

.app-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  background: var(--soft);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.sidebar {
  min-height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 30px 18px 18px;
  background: #1e293b;
  border-right: 1px solid rgba(226, 232, 240, 0.08);
  box-shadow: 8px 0 28px rgba(15, 23, 42, 0.08);
}

.side-nav {
  display: grid;
  gap: 8px;
}

.nav-item,
.mobile-nav-item {
  border: 0;
  background: transparent;
  color: rgba(248, 250, 252, 0.88);
}

.nav-item {
  position: relative;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-radius: 8px;
  padding: 0 16px;
  font-weight: 700;
  text-align: left;
}

.nav-item .tile-icon {
  color: rgba(248, 250, 252, 0.82);
}

.nav-item.active {
  background: #dbeafe;
  color: #1e3a8a;
}

.nav-item.active .tile-icon {
  color: #1e3a8a;
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: #2563eb;
}

.nav-item.locked {
  color: rgba(226, 232, 240, 0.46);
}

.nav-item.locked .tile-icon {
  color: rgba(226, 232, 240, 0.42);
}

.nav-item.locked::after {
  content: "Locked";
  margin-left: auto;
  font-size: 11px;
  color: #b9c4cf;
}

.profile-card {
  margin-top: auto;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  color: var(--white);
  border: 1px solid rgba(226, 232, 240, 0.14);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.24);
}

.profile-card p,
.profile-card small {
  color: rgba(248, 250, 252, 0.78);
}

.profile-card select {
  min-height: 36px;
  margin-top: 6px;
  color: var(--ink);
  background: var(--white);
  border-color: var(--line);
}

.profile-navigation-mode {
  display: grid;
  gap: 4px;
}

.profile-control-label {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.profile-segmented-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  border: 1px solid #dbe7f7;
  border-radius: 8px;
  background: #f1f5f9;
}

.profile-mode-button {
  min-height: 26px;
  padding: 4px 6px;
  color: #475569;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.profile-mode-button.active,
.profile-mode-button[aria-pressed="true"] {
  color: #1d4ed8;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.profile-mode-button:hover,
.profile-mode-button:focus-visible {
  color: #1d4ed8;
}

.profile-card-content,
.profile-controls,
.profile-identity {
  min-width: 0;
}

.profile-identity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-controls {
  display: block;
}

.avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  font-weight: 900;
  background: linear-gradient(135deg, var(--orange), #0f172a);
}

.content-wrap {
  padding: 34px 38px 48px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  background: var(--soft);
  overflow-x: hidden;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
  margin-bottom: 28px;
}

.topbar.title-card-mode {
  display: none;
}

.topbar h1 {
  margin: 4px 0 4px;
  font-size: 36px;
  line-height: 1;
  font-weight: 800;
}

.environment-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: rgba(37, 99, 235, 0.05);
  color: var(--op-brand-blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.environment-badge--warning {
  border-color: rgba(220, 38, 38, 0.25);
  background: rgba(220, 38, 38, 0.08);
  color: var(--danger-red);
}

.topbar-actions {
  width: min(560px, 50vw);
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 130px;
  gap: 12px;
}

.search-field {
  position: relative;
}

.search-field span {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.search-field span::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 2px;
  right: -6px;
  bottom: -4px;
  background: var(--ink);
  transform: rotate(45deg);
}

.search-field input {
  padding-left: 44px;
}

.screen-view {
  display: none;
  min-width: 0;
}

.screen-view.active {
  display: block;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.card {
  min-height: 118px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
  padding: 20px;
}

.card .metric-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  font-weight: 900;
}

.card p,
.data-panel p {
  margin: 0;
  color: var(--muted);
}

.card strong {
  display: block;
  margin: 5px 0 2px;
  color: var(--ink);
  font-size: 34px;
  line-height: 1;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 22px;
}

.chip {
  padding: 0 18px;
  font-weight: 700;
}

.chip.active {
  border-color: var(--navy-950);
  background: var(--navy-950);
  color: var(--white);
}

.data-panel {
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th,
.data-table td {
  padding: 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.data-table th {
  color: #172335;
  font-size: 12px;
  font-weight: 900;
  background: #fbfcfe;
}

.table-cell-stack {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.table-cell-stack strong,
.table-cell-stack small {
  display: block;
  line-height: 1.25;
}

.table-cell-stack small {
  color: var(--muted);
}

.compact-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.user-management-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

.user-management-tabs button {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy-950);
  border-radius: 7px;
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
}

.user-management-tabs button.active {
  border-color: var(--orange);
  background: #fff3ea;
  color: var(--orange-dark);
}

.item-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.item-title strong {
  display: block;
}

.badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 10px;
  color: var(--ink);
  background: #e9edf2;
  font-size: 12px;
}

.badge.green {
  border-color: #7abf62;
  color: #215c1b;
  background: #dff2dc;
}

.badge.orange {
  border-color: #f0a15d;
  color: #7d3900;
  background: #ffe4ce;
}

.badge.blue {
  border-color: #8fc8dc;
  color: #114c88;
  background: #dcecff;
}

.badge.red {
  border-color: #fecaca;
  color: #991b1b;
  background: #fff;
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.table-action {
  min-width: 56px;
  min-height: 38px;
  padding: 0 12px;
  font-weight: 700;
}

.compact-action {
  min-height: 38px;
  padding: 0 12px;
  font-size: 0.85rem;
}

.planned-feature {
  display: inline-grid;
  place-items: center;
  gap: 1px;
  border-style: dashed;
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #64748b;
  cursor: not-allowed;
  opacity: 1;
}

.planned-feature span {
  line-height: 1.1;
}

.planned-feature small {
  font-size: 10px;
  line-height: 1;
  color: #94a3b8;
  font-weight: 800;
}

.primary-button.planned-feature {
  border: 1px dashed #f0b17e;
  background: #fff7f0;
  color: #9a4a12;
}

.link-button.planned-feature {
  justify-items: start;
  border: 0;
  background: transparent;
  color: #9a4a12;
}

.planned-feature-card {
  border-style: dashed !important;
  border-color: #cbd5e1 !important;
  cursor: not-allowed !important;
  opacity: 0.86;
}

.panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  color: var(--muted);
  font-size: 14px;
}

.pager {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pager button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
}

.pager button.active {
  background: var(--navy-950);
  color: var(--white);
}

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

.safety-page {
  display: grid;
  gap: 18px;
}

.safety-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.audit-centre-page .safety-register {
  padding: 22px;
}

.audit-centre-page .safety-register > header {
  margin-bottom: 18px;
}

.safety-audit-filters {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 12px;
}

.safety-audit-custom-dates {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 560px;
  margin-bottom: 16px;
}

.safety-audit-custom-dates input {
  min-height: 42px;
}

.audit-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.audit-type-card {
  min-height: 206px;
  grid-template-rows: auto 1fr auto;
  padding: 18px;
}

.audit-type-card .tile-icon {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  color: #7d3900;
  font-size: 15px;
  font-weight: 900;
}

.audit-type-card div {
  display: grid;
  gap: 8px;
}

.audit-type-card small {
  min-height: 0;
}

.document-groups {
  display: grid;
  gap: 28px;
}

.document-group {
  display: grid;
  gap: 14px;
}

.document-group > header {
  display: grid;
  gap: 4px;
}

.document-group h3 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
}

.document-group p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.hub-section-intro {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 18px;
}

.hub-section-intro h2 {
  margin: 4px 0 6px;
  color: var(--ink);
  font-size: 22px;
}

.hub-section-intro p:last-child {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.safety-category-card {
  min-height: 178px;
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid rgba(220, 227, 236, 0.86);
  border-radius: 8px;
  padding: 18px;
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow);
  text-align: left;
}

.hub-launch-card {
  min-height: 190px;
  grid-template-rows: auto auto minmax(48px, 1fr) auto;
}

.safety-category-card .tile-icon {
  width: 48px;
  height: 48px;
  color: var(--ink);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.safety-category-card strong {
  font-size: 20px;
}

.safety-category-card small {
  min-height: 42px;
  color: var(--muted);
  line-height: 1.35;
}

.safety-category-card em {
  align-self: end;
  color: var(--orange);
  font-style: normal;
  font-weight: 900;
}

.safety-category-card:hover,
.safety-category-card:focus-visible {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 18px 42px rgba(37, 99, 235, 0.12);
}

.scheduling-page {
  display: grid;
  gap: 18px;
}

.scheduling-hero {
  margin-bottom: 0;
}

.scheduling-metrics {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.operations-hero {
  align-items: center;
}

.operations-subpage-hero {
  padding: 18px 22px;
}

.operations-subpage-hero h2 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 24px;
}

.operations-subpage-hero p {
  margin: 0;
}

.operations-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
}

.operations-nav button {
  display: grid;
  gap: 4px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 12px;
  cursor: pointer;
  min-height: 72px;
}

.operations-nav button strong {
  font-size: 14px;
  line-height: 1.2;
}

.operations-nav button span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.operations-nav button.active {
  border-color: rgba(37, 99, 235, 0.48);
  background: #fff7f0;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
}

.document-builder-page {
  display: grid;
  gap: 18px;
}

.document-builder-permission-grid,
.document-builder-structure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.document-builder-permission-grid > div,
.document-builder-structure-grid > div {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.document-builder-permission-grid span,
.document-builder-structure-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.document-builder-structure-grid strong {
  color: var(--ink);
  font-size: 24px;
}

.document-builder-section-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.document-builder-section-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.document-builder-section-card strong {
  color: var(--ink);
}

.document-builder-section-card small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-weight: 800;
}

.document-builder-section-card ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.document-builder-section-card li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(220, 227, 236, 0.78);
  padding-top: 8px;
  color: var(--ink);
}

.document-builder-section-card li em {
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

.warning-copy {
  display: block;
  margin-top: 4px;
  color: #9a4b00;
  font-weight: 900;
}

.document-builder-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.document-builder-tabs button {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.document-builder-tabs button.active {
  border-color: rgba(37, 99, 235, 0.5);
  background: #fff4ec;
  color: var(--orange);
}

.document-builder-workflow-panel {
  display: grid;
  gap: 14px;
}

.document-builder-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.document-builder-form-grid .full-width-field,
.document-builder-form-grid .checkbox-field {
  grid-column: 1 / -1;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 800;
}

.checkbox-field input {
  width: 18px;
  min-height: 18px;
}

.document-builder-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.document-builder-two-column section {
  display: grid;
  gap: 12px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfe;
}

.document-builder-two-column h4 {
  margin: 0;
  color: var(--ink);
}

.completed-document-detail {
  display: grid;
  gap: 14px;
}

.completed-document-detail > header,
.completed-document-section > header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}

.completed-document-section {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfe;
}

.completed-document-section h4,
.completed-document-history h4 {
  margin: 0;
  color: var(--ink);
}

.completed-document-section p {
  margin: 4px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.document-builder-review-note {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
}

.completed-document-history {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.completed-document-history ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.completed-document-history li {
  display: grid;
  grid-template-columns: minmax(160px, 0.35fr) minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.completed-document-history li strong {
  color: var(--ink);
  text-transform: capitalize;
}

.completed-document-history li span {
  color: var(--muted);
  font-weight: 800;
}

.operations-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}

.operations-launch-card {
  min-height: 198px;
}

.scheduling-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(520px, 1.18fr);
  gap: 18px;
  align-items: start;
}

.operations-reports-page {
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
  gap: 18px;
  align-items: start;
}

.operations-reports-page .scheduling-filter-panel {
  position: sticky;
  top: 18px;
}

.operations-reports-page select {
  width: 100%;
  min-width: 0;
}

.report-export-form label:first-child {
  grid-column: 1 / -1;
}

.operations-reports-page .scheduling-preview-panel {
  min-width: 0;
}

.operations-reports-page .report-library-panel,
.operations-reports-page .report-history-panel {
  grid-column: 1 / -1;
}

.operations-reports-page .report-preview-panel .data-table {
  table-layout: fixed;
}

.operations-reports-page .report-preview-panel .data-table th,
.operations-reports-page .report-preview-panel .data-table td,
.operations-reports-page .report-library-panel .data-table th,
.operations-reports-page .report-library-panel .data-table td {
  padding: 12px 14px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.operations-reports-page .report-preview-panel .data-table th,
.operations-reports-page .report-library-panel .data-table th {
  line-height: 1.25;
}

.report-history-actions {
  justify-content: flex-start;
  gap: 8px;
}

.report-history-actions .table-action {
  min-height: 34px;
  white-space: normal;
}

.scheduling-filter-panel,
.scheduling-preview-panel,
.scheduling-source-map,
.scheduling-report-card {
  padding: 22px;
}

.scheduling-filter-panel,
.scheduling-report-card {
  display: grid;
  gap: 16px;
}

.scheduling-filter-panel header,
.scheduling-preview-panel header,
.scheduling-source-map header,
.scheduling-report-card header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}

.scheduling-filter-panel h3,
.scheduling-preview-panel h3,
.scheduling-source-map h3,
.scheduling-report-card h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 20px;
}

.operations-skills-gap-panel {
  display: grid;
  gap: 16px;
}

.coshh-sds-page {
  display: grid;
  gap: 16px;
}

.coshh-sds-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  border-left: 4px solid var(--orange);
}

.coshh-sds-hero h2,
.coshh-sds-hero p {
  margin: 0;
}

.coshh-sds-hero h2 {
  margin: 4px 0 6px;
}

.manager-metrics.coshh-sds-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.coshh-sds-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(320px, 0.8fr);
  gap: 16px;
  align-items: start;
}

.coshh-sds-form,
.coshh-sds-controls,
.coshh-sds-register,
.coshh-sds-roadmap {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 18px;
}

.coshh-sds-form header,
.coshh-sds-controls header,
.coshh-sds-register header,
.coshh-sds-roadmap header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}

.coshh-sds-form h3,
.coshh-sds-controls h3,
.coshh-sds-register h3,
.coshh-sds-roadmap h3 {
  margin: 0;
}

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

.coshh-sds-form-grid label,
.coshh-sds-register label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.coshh-sds-form-grid .wide-field {
  grid-column: 1 / -1;
}

.coshh-sds-form-grid input,
.coshh-sds-register select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
  font-weight: 800;
}

.coshh-sds-form-grid input[type="file"] {
  align-content: center;
  padding: 8px 12px;
  background: #fff;
}

.coshh-sds-form-grid small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: none;
}

.structured-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.structured-list li {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.structured-list strong {
  color: var(--ink);
  font-size: 14px;
}

.structured-list span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.coshh-sds-table-head,
.coshh-sds-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(220px, 1.2fr) minmax(130px, 0.75fr) minmax(150px, 0.8fr) minmax(260px, 1fr);
  gap: 12px;
  align-items: center;
}

.coshh-sds-table-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.coshh-sds-rows {
  display: grid;
  gap: 10px;
}

.coshh-sds-row,
.coshh-sds-audit {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.coshh-sds-row strong,
.coshh-sds-row small {
  display: block;
}

.coshh-sds-row small {
  color: var(--muted);
  font-weight: 800;
}

.coshh-sds-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  border-top: 0;
  background: transparent;
}

.primary-table-action {
  border-color: var(--orange) !important;
  color: var(--white) !important;
  background: var(--orange) !important;
}

.coshh-sds-audit {
  display: grid;
  gap: 6px;
  margin-top: -6px;
  background: #fff;
}

.coshh-sds-audit span {
  color: var(--muted);
  font-weight: 800;
}

.coshh-sds-phase-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.coshh-sds-phase-grid span {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  background: #fbfcfe;
  font-weight: 800;
}

.coshh-sds-phase-grid strong {
  color: var(--ink);
}

.operations-skills-gap-panel > header {
  margin-bottom: 0;
}

.skills-gap-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.skills-gap-summary-strip span {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  background: #fbfcfe;
  font-size: 12px;
  font-weight: 800;
}

.skills-gap-summary-strip strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

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

.skills-gap-insight-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 8px;
  padding: 14px;
  background: var(--white);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.skills-gap-insight-card.red {
  border-left-color: #e24646;
}

.skills-gap-insight-card.orange {
  border-left-color: var(--orange);
}

.skills-gap-insight-card.green {
  border-left-color: #4f9f39;
}

.skills-gap-insight-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}

.skills-gap-insight-card header div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.skills-gap-insight-card strong {
  color: var(--ink);
  font-size: 15px;
}

.skills-gap-insight-card header span,
.skills-gap-insight-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.skills-gap-insight-card em {
  align-self: start;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  color: var(--ink);
  background: #f8fafc;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.skills-gap-insight-card.red em {
  border-color: #f4b3b3;
  color: #9a1f1f;
  background: #fff1f1;
}

.skills-gap-insight-card.orange em {
  border-color: #f0b17e;
  color: #8d3f00;
  background: #fff4e8;
}

.skills-gap-insight-card.green em {
  border-color: #b7dba8;
  color: #245c18;
  background: #f0f9eb;
}

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

.skills-gap-insight-meta span {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  color: var(--muted);
  background: #fbfcfe;
  font-size: 12px;
  font-weight: 800;
}

.skills-gap-insight-meta b {
  color: var(--ink);
  font-size: 16px;
}

.scheduling-report-card header {
  margin-bottom: 0;
}

.scheduling-report-card header span:not(.badge) {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.scheduling-report-card > p {
  line-height: 1.45;
}

.scheduling-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.report-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.report-chip-group span {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 9px;
  color: var(--ink);
  background: #fbfcfe;
  font-size: 12px;
  font-weight: 800;
}

.format-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.format-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 3px 7px;
  color: #334155;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.review-queue-page {
  display: grid;
  gap: 18px;
}

.review-queue-hero {
  padding: 22px;
}

.review-queue-table td[data-label="Assigned To"] small {
  color: var(--muted);
}

.compliance-calendar-panel {
  overflow: hidden;
}

.operations-calendar-filters {
  margin-bottom: 12px;
}

.scheduling-table td small,
.compact-action-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.table-select {
  width: 100%;
  min-width: 128px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--ink);
  background: #fff;
  font-size: 12px;
  font-weight: 900;
}

.audit-status-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.audit-status-summary span {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  background: #fbfcfe;
  font-size: 12px;
  font-weight: 800;
}

.audit-status-summary strong {
  color: var(--ink);
  font-size: 22px;
}

.audit-followup-summary span {
  border-color: rgba(37, 99, 235, 0.2);
  background: #fff7f0;
}

.audit-followup-panel,
.audit-template-preview {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fbfcfe;
}

.audit-followup-panel > header,
.audit-template-preview > header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.audit-followup-panel h3,
.audit-template-preview h3,
.audit-template-preview h4 {
  margin: 0 0 4px;
}

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

.audit-template-grid article {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--white);
}

.audit-template-launch-panel {
  display: grid;
  gap: 12px;
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fbfcfe;
}

.audit-template-launch-panel h3 {
  margin: 0 0 4px;
  color: var(--ink);
}

.audit-template-launch-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

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

.audit-template-launch-card {
  display: grid;
  gap: 5px;
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  color: var(--ink);
  background: var(--white);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.audit-template-launch-card:hover {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 10px 22px rgba(10, 22, 40, 0.08);
  transform: translateY(-1px);
}

.audit-template-launch-card span {
  font-size: 14px;
  font-weight: 900;
}

.audit-template-launch-card strong {
  color: var(--orange);
  font-size: 13px;
}

.audit-template-launch-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.safety-audit-form-panel {
  display: grid;
  gap: 18px;
  padding: 22px;
}

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

.audit-form-checklist label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.audit-form-checklist input {
  margin-top: 3px;
}

.audit-form-checklist strong,
.audit-form-checklist small {
  display: block;
}

.audit-form-checklist small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}

.audit-form-notes label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.audit-form-notes textarea {
  width: 100%;
  resize: vertical;
}

.document-detail-page {
  display: grid;
  gap: 18px;
}

.document-detail-hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  padding: 24px;
}

.document-detail-hero h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 30px;
}

.document-detail-hero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

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

.document-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 18px;
}

.document-detail-card {
  padding: 22px;
}

.document-detail-card h3 {
  margin: 0 0 14px;
  color: var(--ink);
}

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

.detail-list div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.detail-list dt {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-list dd {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
}

.ack-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.ack-summary span {
  padding: 12px;
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
}

.ack-summary strong {
  display: block;
  color: var(--ink);
  font-size: 24px;
}

.safety-register {
  overflow: hidden;
}

.safety-register > header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}

.safety-register h2 {
  margin: 4px 0 0;
}

.safety-register > header > span {
  border-radius: 7px;
  padding: 8px 12px;
  color: #114c88;
  background: #dcecff;
  font-weight: 900;
}

.ack-priority {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border-radius: 7px;
  padding: 0 10px;
  color: #8a3900;
  background: #ffe4ce;
  font-weight: 900;
}

.ack-priority.critical {
  color: #991b1b;
  background: #fff;
}

.ack-priority.important {
  color: #8a3900;
  background: #ffe4ce;
}

.ack-priority.advisory {
  color: #114c88;
  background: #dcecff;
}

.table-action.acknowledged {
  color: #215c1b;
  border-color: #b9dfb4;
  background: #dff2dc;
}

.module-card {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.module-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.module-card h3 {
  margin: 0 0 6px;
}

.training-dashboard {
  display: grid;
  gap: 18px;
  color: var(--white);
}

.role-dashboard,
.documents-page {
  display: grid;
  gap: 18px;
}

.role-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.training-dashboard-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(16, 18, 37, 0.96), rgba(8, 24, 39, 0.96)),
    var(--navy-950);
}

.training-dashboard-header h2 {
  margin: 2px 0 6px;
  color: var(--white);
  font-size: 34px;
}

.training-dashboard-header p {
  margin: 0;
  color: #b9c7d6;
}

.notification-pill {
  min-width: 112px;
  display: grid;
  place-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #d8e2ed;
  font-weight: 800;
}

.notification-pill span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
}

.engineer-strip,
.training-dashboard-panel {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(13, 36, 54, 0.96), rgba(8, 24, 39, 0.96)),
    var(--navy-950);
  box-shadow: 0 18px 44px rgba(7, 24, 39, 0.16);
}

.engineer-strip {
  padding: 18px;
}

.engineer-strip .eyebrow {
  margin-bottom: 12px;
}

.engineer-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.engineer-card {
  min-height: 132px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 14px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
}

.engineer-card.active {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.42);
}

.engineer-card small {
  color: #b9c7d6;
  line-height: 1.25;
}

.engineer-avatar,
.add-engineer > span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: linear-gradient(135deg, #435066, #101827);
  font-weight: 900;
}

.add-engineer > span {
  border: 1px dashed rgba(255, 255, 255, 0.34);
  color: #cbd6e2;
  background: rgba(255, 255, 255, 0.06);
  font-size: 28px;
  font-weight: 400;
}

.training-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: 18px;
}

.training-dashboard-panel {
  padding: 20px;
}

.training-dashboard-panel h3 {
  margin: 0 0 10px;
  color: var(--white);
}

.training-dashboard-panel p,
.training-dashboard-panel small,
.training-dashboard-panel li,
.training-dashboard-panel span {
  color: #b9c7d6;
}

.profile-summary,
.competency-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(280px, 1fr);
  gap: 18px;
}

.competency-panel {
  grid-template-columns: 1fr;
}

.profile-summary > div:first-child,
.competency-panel > div:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  padding-right: 18px;
}

.competency-panel > div:first-child {
  border-right: 0;
  padding-right: 0;
}

.profile-summary h3 {
  font-size: 28px;
}

.profile-summary > div:first-child span {
  display: block;
  margin-top: 10px;
}

.qualification-summary ul,
.next-level-panel ul {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 0;
  list-style: none;
}

.qualification-summary li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.status-pill {
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 5px 10px;
  color: var(--white);
  font-size: 12px;
}

.status-pill.green {
  border: 1px solid #7abf62;
  background: #f0f9eb;
  color: #245c18;
}

.status-pill.orange {
  border-color: #f0a15d;
  background: #fff3e8;
  color: #7d3900;
}

.status-pill.blue {
  border-color: #8fc8dc;
  background: #e8f6fb;
  color: #145f73;
}

.link-button {
  border: 0;
  padding: 0;
  color: var(--orange);
  background: transparent;
  font-weight: 900;
}

.competency-ring {
  width: 184px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  margin: 18px auto 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #102033 0 58%, transparent 59%),
    conic-gradient(var(--orange) var(--progress), rgba(255, 255, 255, 0.13) 0);
}

.competency-ring strong {
  color: var(--white);
  font-size: 46px;
  line-height: 1;
}

.competency-ring span {
  color: var(--orange);
  font-weight: 900;
}

.next-level-panel .primary-button {
  width: 100%;
  margin-top: 8px;
}

.skills-summary,
.assigned-training,
.progression-panel,
.recent-training {
  display: grid;
  gap: 14px;
}

.skills-summary header,
.assigned-training header,
.progression-panel header,
.recent-training header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.skill-list,
.assigned-module-list,
.activity-list {
  display: grid;
  gap: 10px;
}

.skill-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(120px, 0.8fr) 48px 14px;
  gap: 12px;
  align-items: center;
  min-height: 34px;
}

.skill-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.skill-fill {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: var(--orange);
}

.skill-fill.green {
  background: var(--green);
}

.skill-fill.red {
  background: var(--red);
}

.skill-row i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--orange);
}

.skill-row i.green {
  background: var(--green);
  box-shadow: 0 0 0 1px #2f7d32;
}

.skill-row i.red {
  background: var(--red);
}

.assigned-module-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 12px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
  text-align: left;
}

.assigned-module-row > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--white);
  background: var(--orange);
  font-weight: 900;
}

.assigned-module-row strong,
.assigned-module-row small {
  display: block;
}

.assigned-module-row em {
  color: var(--orange);
  font-style: normal;
  font-weight: 900;
}

.compact-career-path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.compact-career-path div {
  display: grid;
  gap: 8px;
  min-height: 112px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.compact-career-path div.active {
  border-color: rgba(37, 99, 235, 0.58);
}

.compact-career-path span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--orange);
  font-weight: 900;
}

.compact-career-path strong {
  color: var(--white);
}

.activity-list p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
}

.activity-list p:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.activity-list strong {
  color: var(--white);
}

.manager-overview {
  display: grid;
  gap: 18px;
  color: var(--white);
}

.manager-hero,
.manager-metric,
.manager-panel {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(13, 36, 54, 0.96), rgba(8, 24, 39, 0.96)),
    var(--navy-950);
  box-shadow: 0 18px 44px rgba(7, 24, 39, 0.16);
}

.manager-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
  padding: 24px;
}

.manager-hero h2 {
  margin: 2px 0 6px;
  color: var(--white);
  font-size: 38px;
}

.manager-hero p,
.manager-panel p,
.manager-panel small,
.manager-panel span {
  color: #b9c7d6;
}

.manager-alert {
  min-width: 210px;
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #d8e2ed;
  font-weight: 800;
}

.manager-alert span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--orange);
}

.manager-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.compliance-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.manager-metric {
  min-height: 150px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 20px;
}

.manager-metric p,
.manager-metric small {
  margin: 0;
  color: #b9c7d6;
}

.manager-metric strong {
  display: block;
  margin: 4px 0;
  color: var(--white);
  font-size: 34px;
}

.metric-symbol {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  font-weight: 900;
}

.metric-symbol.blue {
  background: #277edb;
}

.metric-symbol.green {
  background: var(--green);
}

.metric-symbol.orange {
  background: var(--orange);
}

.metric-symbol.purple {
  background: #2563eb;
}

.metric-symbol.slate {
  background: #475569;
}

.metric-symbol.red {
  background: var(--red);
}

.manager-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
  gap: 18px;
}

.director-overview-grid {
  grid-template-columns: minmax(360px, 1fr) minmax(390px, 1.1fr) minmax(340px, 0.95fr);
  align-items: stretch;
}

.compact-director-overview {
  grid-template-columns: minmax(0, 1fr);
}

.competence-risk-card,
.attention-engineers-card {
  align-content: start;
}

.manager-risk-list,
.attention-engineer-list {
  display: grid;
  gap: 10px;
}

.priority-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 12px;
}

.priority-filter-list button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 12px;
  color: var(--ink);
  background: var(--white);
  font-size: 12px;
  font-weight: 900;
}

.priority-filter-list button.active {
  border-color: rgba(37, 99, 235, 0.76);
  color: #1d4ed8;
  background: #eff6ff;
}

.priority-filter-list span {
  border-radius: 6px;
  padding: 2px 7px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: 12px;
}

.priority-filter-list button.active span {
  color: var(--white);
  background: var(--blue);
}

.manager-risk-row,
.attention-engineer-row,
.priority-action-row {
  width: 100%;
  display: grid;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  color: inherit;
  background: rgba(255, 255, 255, 0.045);
  text-align: left;
}

.manager-risk-row {
  grid-template-columns: minmax(0, 1fr) 132px;
}

.attention-engineer-row {
  grid-template-columns: minmax(0, 1fr) 116px minmax(200px, 1fr);
}

.priority-action-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.priority-action-row {
  position: relative;
  grid-template-columns: 5px minmax(0, 1fr) 116px;
  gap: 12px;
  align-items: stretch;
  min-height: 84px;
  border-color: rgba(220, 227, 236, 0.9);
  padding: 11px 12px;
  color: var(--ink);
  background: var(--white);
}

.manager-risk-row strong,
.attention-engineer-row strong,
.priority-action-row strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.priority-rail {
  width: 7px;
  border-radius: 4px;
  background: var(--green);
}

.priority-rail.orange {
  background: var(--orange);
}

.priority-rail.red {
  background: var(--red);
}

.priority-action-main {
  display: grid;
  align-content: start;
  gap: 5px;
}

.priority-action-titleline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.priority-action-titleline strong {
  flex: 1 1 170px;
  min-width: 0;
}

.priority-action-main small {
  color: var(--muted);
  line-height: 1.3;
  font-size: 12px;
}

.priority-owner-type {
  display: inline-flex;
  margin-right: 6px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 2px 6px;
  color: #526171;
  background: #f1f5f9;
  font-size: 11px;
  font-weight: 900;
}

.priority-action-meta {
  display: grid;
  justify-items: end;
  align-content: space-between;
  gap: 6px;
}

.priority-category {
  display: inline-flex;
  justify-self: start;
  border-radius: 6px;
  padding: 3px 7px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: 12px;
  font-weight: 900;
}

.priority-date {
  color: var(--ink);
  font-weight: 900;
}

.priority-tag {
  display: inline-flex;
  justify-content: center;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}

.priority-tag.blue {
  border: 1px solid rgba(52, 151, 178, 0.32);
  color: #0e6681;
  background: #e9f8fc;
}

.priority-tag.orange {
  border: 1px solid #f0a15d;
  color: #7d3900;
  background: #fff3e8;
}

.priority-tag.red {
  border: 1px solid rgba(220, 38, 38, 0.42);
  color: #991b1b;
  background: #fff;
}

.priority-action-row em {
  border-radius: 7px;
  padding: 6px 10px;
  min-width: 86px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.priority-action-row em.green {
  border: 1px solid #7abf62;
  color: #245c18;
  background: #f0f9eb;
}

.priority-action-row em.orange {
  border: 1px solid #f0a15d;
  color: #7d3900;
  background: #fff3e8;
}

.priority-action-row em.red {
  border: 1px solid rgba(220, 38, 38, 0.42);
  color: #991b1b;
  background: #fff;
}

.attention-engineer-row span {
  color: var(--white);
  font-size: 14px;
  font-weight: 900;
  text-align: right;
}

.attention-engineer-row em {
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.attention-engineer-row em.orange {
  border: 1px solid #f0a15d;
  color: #7d3900;
  background: #fff3e8;
}

.attention-engineer-row em.red {
  border: 1px solid #fecaca;
  color: #991b1b;
  background: #fff;
}

.risk-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.risk-track i {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.risk-track i.orange {
  background: var(--orange);
}

.risk-track i.red {
  background: var(--red);
}

.status-definitions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
}

.status-definitions span {
  color: var(--muted);
}

.status-definitions strong {
  color: var(--ink);
}

.manager-section-page {
  gap: 18px;
}

.manager-section-grid {
  align-items: start;
}

.manager-section-grid .competence-matrix-panel,
.manager-section-grid .manager-audit-card-grid {
  grid-column: 1 / -1;
}

.manager-panel {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.manager-panel header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.manager-panel h3 {
  margin: 0;
  color: var(--white);
}

.training-completion-body {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.manager-donut {
  width: 180px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #102033 0 56%, transparent 57%),
    conic-gradient(var(--green) 0 68%, #2e90e5 68% 90%, var(--orange) 90% 100%);
}

.manager-donut strong {
  color: var(--white);
  font-size: 42px;
  line-height: 1;
}

.manager-donut span {
  font-weight: 800;
}

.manager-legend {
  display: grid;
  gap: 14px;
}

.manager-legend span {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.manager-legend i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

.blue-dot {
  background: #2e90e5;
}

.compliance-chart {
  min-height: 220px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding: 20px 8px 0;
}

.compliance-chart div {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #b9c7d6;
}

.compliance-chart div::before {
  content: "";
  width: 44px;
  height: var(--height);
  min-height: 6px;
  border-radius: 6px 6px 0 0;
  background: var(--green);
}

.compliance-chart .orange::before {
  background: var(--orange);
}

.compliance-chart .red::before {
  background: var(--red);
}

.compliance-chart .grey::before {
  background: #8e9aaa;
}

.compliance-chart strong {
  color: var(--white);
}

.engineer-overview-card {
  grid-row: span 2;
}

.compliance-register-card {
  grid-column: 1 / -1;
  grid-row: auto;
}

.compliance-register-table {
  display: grid;
  gap: 8px;
  overflow-x: auto;
}

.compliance-register-head,
.compliance-register-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 0.92fr) minmax(108px, 0.68fr) minmax(108px, 0.68fr) minmax(124px, 0.74fr) minmax(112px, 0.7fr) minmax(124px, 0.74fr) minmax(112px, 0.68fr) minmax(180px, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 1320px;
}

.compliance-register-head {
  min-height: 34px;
  color: #8ea0b3;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.compliance-register-row {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  color: #d8e2ed;
  background: rgba(255, 255, 255, 0.045);
  text-align: left;
}

.compliance-register-row strong,
.compliance-register-row small {
  display: block;
}

.compliance-register-row > div strong,
.compliance-register-row > strong {
  color: var(--white);
}

.compliance-register-row em,
.register-cell {
  display: inline-flex;
  justify-content: center;
  border-radius: 7px;
  padding: 6px 9px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.compliance-register-row em.green,
.register-cell.green {
  border: 1px solid #7abf62;
  color: #245c18;
  background: #f0f9eb;
}

.compliance-register-row em.orange,
.register-cell.orange {
  border: 1px solid #f0a15d;
  color: #7d3900;
  background: #fff3e8;
}

.compliance-register-row em.red,
.register-cell.red {
  border: 1px solid #fecaca;
  color: #991b1b;
  background: #fff;
}

.engineer-todo-card {
  grid-column: 1 / -1;
}

.engineer-todo-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.engineer-todo-summary-strip span,
.engineer-outstanding-summary span {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  background: #fbfcfe;
  font-size: 12px;
  font-weight: 800;
}

.engineer-todo-summary-strip strong,
.engineer-outstanding-summary strong {
  color: var(--ink);
  font-size: 22px;
}

.engineer-todo-table {
  display: grid;
  gap: 8px;
  overflow-x: auto;
}

.engineer-todo-list {
  display: grid;
  gap: 10px;
}

.engineer-todo-record {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(170px, 0.9fr) minmax(250px, 1fr) minmax(220px, 1.1fr) minmax(128px, 0.55fr) 68px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink);
  background: #fbfcfe;
  text-align: left;
}

.engineer-todo-record:hover {
  border-color: rgba(37, 99, 235, 0.35);
  background: #fff7ed;
}

.todo-record-person strong,
.todo-record-person small,
.todo-record-next strong,
.todo-record-next small,
.todo-record-next em,
.todo-record-status small {
  display: block;
}

.todo-record-person strong,
.todo-record-next strong {
  color: var(--ink);
}

.todo-record-person small,
.todo-record-next small,
.todo-record-status small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.todo-record-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.todo-record-counts .todo-count {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  padding: 7px 6px;
}

.todo-record-counts .todo-count strong {
  color: inherit;
  font-size: 17px;
  line-height: 1;
}

.todo-record-counts .todo-count small {
  color: inherit;
  font-size: 10px;
  line-height: 1.1;
}

.todo-record-next em {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.todo-record-status {
  display: grid;
  justify-items: start;
  gap: 7px;
}

.todo-record-status em {
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.todo-record-status em.green {
  border: 1px solid #7abf62;
  color: #245c18;
  background: #f0f9eb;
}

.todo-record-status em.orange {
  border: 1px solid #f0a15d;
  color: #7d3900;
  background: #fff3e8;
}

.todo-record-status em.red {
  border: 1px solid #fecaca;
  color: #991b1b;
  background: #fff;
}

.engineer-todo-head,
.engineer-todo-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.05fr) 96px 82px 118px minmax(260px, 1.25fr) 112px 116px 70px;
  gap: 12px;
  align-items: center;
  min-width: 1120px;
}

.engineer-todo-head {
  min-height: 34px;
  color: #8ea0b3;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.engineer-todo-row {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink);
  background: #fbfcfe;
  text-align: left;
}

.engineer-todo-row:hover {
  border-color: rgba(37, 99, 235, 0.35);
  background: #fff7ed;
}

.engineer-todo-row strong,
.engineer-todo-row small,
.todo-next-item {
  display: block;
}

.engineer-todo-row > div strong,
.todo-next-item strong,
.todo-open-label {
  color: var(--ink);
}

.engineer-todo-row small,
.todo-next-item small {
  margin-top: 3px;
  color: var(--muted);
}

.todo-count,
.engineer-todo-row em,
.todo-open-label,
.engineer-outstanding-panel > header em {
  display: inline-flex;
  justify-content: center;
  border-radius: 7px;
  padding: 6px 9px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.todo-count.green,
.engineer-todo-row em.green,
.engineer-outstanding-panel > header em.green {
  border: 1px solid #7abf62;
  color: #245c18;
  background: #f0f9eb;
}

.todo-count.orange,
.engineer-todo-row em.orange,
.engineer-outstanding-panel > header em.orange {
  border: 1px solid #f0a15d;
  color: #7d3900;
  background: #fff3e8;
}

.todo-count.red,
.engineer-todo-row em.red,
.engineer-outstanding-panel > header em.red {
  border: 1px solid #fecaca;
  color: #991b1b;
  background: #fff;
}

.todo-open-label {
  border: 1px solid rgba(37, 99, 235, 0.5);
  color: #7d3900;
  background: #fff3e8;
}

.engineer-outstanding-panel {
  grid-column: 1 / -1;
}

.engineer-outstanding-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

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

.engineer-action-group {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.engineer-action-group header,
.engineer-action-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.engineer-action-group h4 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.engineer-action-group header span {
  border-radius: 6px;
  padding: 3px 8px;
  color: #7d3900;
  background: #fff3e8;
  font-weight: 900;
}

.engineer-action-group > div {
  display: grid;
  gap: 8px;
}

.engineer-action-item {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.engineer-action-item strong,
.engineer-action-item small {
  display: block;
}

.engineer-action-item strong {
  color: var(--ink);
}

.engineer-action-item small {
  margin-top: 3px;
  color: var(--muted);
}

.engineer-action-focus-panel {
  display: grid;
  gap: 16px;
}

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

.engineer-focus-group {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 210px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfe;
}

.engineer-focus-group header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.engineer-focus-group h4,
.engineer-focus-group p {
  margin: 0;
}

.engineer-focus-group h4 {
  color: var(--ink);
  font-size: 15px;
}

.engineer-focus-group p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.engineer-focus-group header > span {
  min-width: 34px;
  border: 1px solid rgba(37, 99, 235, 0.32);
  border-radius: 6px;
  padding: 5px 8px;
  color: #7d3900;
  background: #fff3e8;
  text-align: center;
  font-weight: 900;
}

.engineer-focus-items {
  display: grid;
  gap: 8px;
}

.engineer-focus-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #e8edf3;
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
}

.engineer-focus-item strong,
.engineer-focus-item small {
  display: block;
}

.engineer-focus-item strong {
  color: var(--ink);
  font-size: 13px;
}

.engineer-focus-item small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.engineer-focus-item > div:last-child {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.engineer-focus-empty {
  margin: 0;
  border: 1px dashed #d8e0ea;
  border-radius: 8px;
  padding: 14px;
  color: var(--muted);
  background: #ffffff;
  font-size: 13px;
}

.engineer-overview-table {
  display: grid;
  gap: 0;
}

.engineer-overview-head,
.engineer-overview-row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 82px 82px 92px 94px;
  gap: 12px;
  align-items: center;
}

.engineer-overview-head {
  min-height: 36px;
  color: #8ea0b3;
  font-size: 12px;
  text-transform: uppercase;
}

.engineer-overview-row {
  min-height: 62px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  color: inherit;
  background: transparent;
  text-align: left;
}

.engineer-overview-row strong,
.manager-skill-row strong {
  display: block;
  color: var(--white);
}

.mini-ring {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--white);
  background: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.mini-ring.orange {
  background: var(--orange);
}

.mini-ring.red {
  background: var(--red);
}

.engineer-overview-row em {
  border-radius: 7px;
  padding: 6px 9px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.engineer-overview-row em.green {
  border: 1px solid #7abf62;
  color: #245c18;
  background: #f0f9eb;
}

.engineer-overview-row em.orange {
  border: 1px solid #f0a15d;
  color: #7d3900;
  background: #fff3e8;
}

.engineer-overview-row em.red {
  border: 1px solid #fecaca;
  color: #991b1b;
  background: #fff;
}

.manager-skill-list {
  display: grid;
  gap: 16px;
}

.manager-skill-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.gap-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--red);
}

.gap-icon.orange {
  background: var(--orange);
}

.gap-icon.yellow {
  background: #d4a317;
}

.gap-icon.purple {
  background: #475569;
}

.gap-icon.blue {
  background: #2e90e5;
}

.manager-skill-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.12);
}

.manager-skill-track span {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: var(--red);
}

.manager-skill-track .orange {
  background: var(--orange);
}

.manager-skill-track .yellow {
  background: #d4a317;
}

.manager-skill-track .purple {
  background: #475569;
}

.manager-skill-track .blue {
  background: #2e90e5;
}

.manager-skill-row em {
  color: var(--white);
  font-style: normal;
  font-weight: 900;
}

.ack-summary {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.ack-summary-meter {
  width: 140px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--white) 0 56%, transparent 57%),
    conic-gradient(var(--orange) var(--progress), #d8e0e9 0);
}

.ack-summary-meter strong {
  color: var(--ink);
  font-size: 36px;
  line-height: 1;
}

.ack-summary-meter span {
  color: var(--muted);
  font-weight: 900;
}

.ack-summary p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}

.ack-summary p strong {
  color: var(--ink);
}

.ack-alert-list {
  display: grid;
  gap: 10px;
}

.ack-alert-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px 140px;
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.ack-alert-list strong {
  color: var(--ink);
}

.panel-footnote {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.qualification-expiry-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.qualification-expiry-summary span {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
  font-weight: 800;
}

.qualification-expiry-summary strong {
  display: block;
  color: var(--ink);
  font-size: 24px;
}

.qualification-expiry-list {
  display: grid;
  gap: 10px;
}

.qualification-expiry-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--white);
  color: var(--ink);
  text-align: left;
}

.qualification-expiry-row strong,
.qualification-expiry-row small {
  display: block;
}

.qualification-expiry-row small {
  margin-top: 3px;
  color: var(--muted);
}

.recent-activity-card {
  grid-column: 2;
}

.manager-engineer-detail {
  display: grid;
  gap: 18px;
}

.manager-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
  gap: 18px;
}

.qualification-detail-panel {
  grid-column: 1 / -1;
}

.qualification-link-list {
  display: grid;
  gap: 10px;
}

.qualification-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px 80px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfe;
}

.qualification-link-row strong,
.qualification-link-row small {
  display: block;
}

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

.audit-score-list,
.audit-topic-list {
  display: grid;
  gap: 10px;
}

.audit-score-row,
.audit-topic-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px 72px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.audit-topic-row {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) 52px 92px;
  color: var(--ink);
  text-align: left;
}

.audit-score-row strong,
.audit-score-row small,
.audit-topic-row strong,
.audit-topic-row small {
  display: block;
}

.audit-score-row strong,
.audit-topic-row strong {
  color: var(--ink);
}

.audit-score-row small,
.audit-topic-row small {
  margin-top: 3px;
  color: var(--muted);
}

.audit-score-row em,
.audit-topic-row em {
  color: var(--ink);
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.audit-overview-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.manager-audit-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.manager-audit-engineer-card {
  align-content: start;
}

.manager-audit-engineer-card header em {
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.manager-audit-engineer-card header em.green {
  border: 1px solid #7abf62;
  color: #245c18;
  background: #f0f9eb;
}

.manager-audit-engineer-card header em.orange {
  border: 1px solid #f0a15d;
  color: #7d3900;
  background: #fff3e8;
}

.manager-engineer-select {
  display: grid;
  gap: 6px;
  min-width: 260px;
}

.manager-engineer-select span {
  color: #b9c7d6;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.manager-engineer-select select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  padding: 10px 12px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

.audit-overview-summary span {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
  font-weight: 800;
}

.audit-overview-summary strong {
  display: block;
  color: var(--ink);
  font-size: 24px;
}

.audit-note {
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.engineer-audit-history-panel {
  grid-column: 1 / -1;
}

.status-pill.grey {
  border: 1px solid #cbd5e1;
  color: #526171;
  background: #e8edf3;
}

.status-pill.red {
  border: 1px solid #fecaca;
  color: #991b1b;
  background: #fff;
}

.module-detail {
  display: grid;
  gap: 18px;
}

.module-detail-hero {
  min-height: 300px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.8fr);
  gap: 24px;
  align-items: stretch;
  padding: 28px;
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(135deg, rgba(16, 18, 37, 0.96), rgba(8, 24, 39, 0.96)),
    var(--navy-950);
  border-color: rgba(255, 255, 255, 0.12);
}

.module-detail-copy {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.module-detail-copy h2 {
  margin: 6px 0 12px;
  color: var(--white);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.05;
}

.module-detail-copy p {
  max-width: 660px;
  color: #d7e0ea;
  font-size: 18px;
  line-height: 1.5;
}

.module-detail-icon {
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--white);
  background: linear-gradient(135deg, #2563eb, var(--orange));
  font-size: 34px;
  font-weight: 900;
  box-shadow: 0 18px 38px rgba(37, 99, 235, 0.28);
}

.module-detail-metrics {
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  align-self: end;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.module-detail-metrics span {
  display: grid;
  gap: 6px;
  min-height: 84px;
  align-content: center;
  padding: 14px 18px;
  color: #c7d2df;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.module-detail-metrics span:last-child {
  border-right: 0;
}

.module-detail-metrics strong {
  color: var(--white);
  font-size: 20px;
}

.module-level-control {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  display: grid;
  gap: 10px;
  max-width: 430px;
  justify-self: end;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.08);
}

.module-level-control label {
  display: grid;
  gap: 8px;
  color: #c7d2df;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.module-level-control select {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  padding: 0 12px;
  color: var(--white);
  background: rgba(6, 18, 29, 0.72);
  font-size: 15px;
  font-weight: 800;
  text-transform: none;
}

.module-level-control small {
  color: #d7e0ea;
  line-height: 1.4;
}

.module-visual {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  min-height: 250px;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(37, 99, 235, 0.08)),
    #172133;
  background-size: 33% 100%, 100% 50%, auto, auto;
}

.building-graphic {
  position: absolute;
  inset: 28px 24px 78px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background:
    linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, 0.16) 50%, transparent 51%),
    linear-gradient(0deg, transparent 48%, rgba(255, 255, 255, 0.16) 50%, transparent 52%),
    rgba(7, 14, 23, 0.46);
}

.building-graphic::before,
.building-graphic::after {
  content: "";
  position: absolute;
  top: -26px;
  width: 52px;
  height: 28px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #d4d7dc, #6e7783);
}

.building-graphic::before {
  left: 22%;
}

.building-graphic::after {
  right: 18%;
}

.smoke {
  position: absolute;
  width: 48%;
  height: 42%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(178, 188, 198, 0.58), transparent 64%);
  filter: blur(2px);
}

.smoke-one {
  left: 5%;
  bottom: 5%;
}

.smoke-two {
  right: 8%;
  top: 18%;
}

.air-arrow {
  position: absolute;
  width: 58px;
  height: 58px;
  border-top: 5px solid var(--orange);
  border-right: 5px solid var(--orange);
  border-radius: 0 16px 0 0;
  transform: rotate(-22deg);
}

.air-arrow::after {
  content: "";
  position: absolute;
  right: -9px;
  top: -12px;
  border: 9px solid transparent;
  border-left-color: var(--orange);
  transform: rotate(45deg);
}

.arrow-one {
  left: 24%;
  top: 24%;
}

.arrow-two {
  right: 14%;
  top: 4%;
}

.shaft-line {
  position: absolute;
  right: 25%;
  top: 14%;
  width: 3px;
  height: 74%;
  background: rgba(37, 99, 235, 0.45);
}

.play-button {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  min-height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  padding: 0 26px;
  color: var(--white);
  background: rgba(6, 18, 29, 0.72);
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.module-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--line);
}

.module-tabs button {
  min-height: 58px;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  background: transparent;
  font-weight: 900;
  text-transform: uppercase;
}

.module-tabs button.active {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

.module-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  gap: 18px;
}

.module-panel {
  padding: 22px;
}

.module-panel h3,
.module-next h3 {
  margin: 0 0 16px;
}

.module-panel p {
  color: var(--muted);
  line-height: 1.55;
}

.level-focus-panel {
  align-content: start;
}

.level-focus-panel .status-pill {
  justify-self: start;
  margin-top: 8px;
}

.learn-list,
.topic-list,
.progress-legend {
  display: grid;
  gap: 10px;
}

.learn-row,
.topic-row {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: inherit;
  background: #fbfcfe;
  text-align: left;
}

.learn-row strong,
.topic-row strong {
  display: block;
  margin-bottom: 4px;
}

.learn-row small,
.topic-row small {
  display: block;
  color: var(--muted);
  line-height: 1.35;
}

.learn-icon,
.topic-row > span:first-child {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--white);
  background: var(--orange);
  font-weight: 900;
}

.learn-icon::before {
  content: "";
  width: 17px;
  height: 17px;
  border: 3px solid currentColor;
  border-radius: 4px;
}

.module-progress-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.progress-ring {
  width: 170px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--white) 0 53%, transparent 54%),
    conic-gradient(var(--orange) var(--progress), #d8e0e9 0);
}

.progress-ring strong {
  color: var(--ink);
  font-size: 42px;
  line-height: 1;
}

.progress-ring span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.progress-legend span {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.progress-legend i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

.green-dot {
  background: var(--green);
}

.orange-dot {
  background: var(--orange);
}

.grey-dot,
.lock-dot {
  background: #8e9aaa;
}

.topic-row.complete > span:first-child {
  background: var(--green);
  box-shadow: inset 0 0 0 1px #2f7d32;
}

.topic-row.current {
  border-color: rgba(37, 99, 235, 0.46);
}

.topic-row.current > span:first-child {
  background: var(--orange);
}

.topic-row.locked {
  opacity: 0.72;
}

.topic-row.locked > span:first-child {
  background: #7d8a99;
  box-shadow: inset 0 0 0 1px #566373;
}

.topic-row em {
  color: var(--orange);
  font-style: normal;
  font-weight: 900;
}

.module-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  border-color: rgba(37, 99, 235, 0.5);
}

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

.progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: #d8e0e9;
}

.progress-bar {
  height: 100%;
  width: var(--value);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--orange), #60a5fa);
}

.training-path,
.quiz-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1.2fr);
  gap: 22px;
  align-items: center;
  margin-bottom: 22px;
  padding: 22px;
}

.training-path h2,
.quiz-hero h2,
.quiz-topics h2 {
  margin: 4px 0 8px;
}

.career-path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.career-path article {
  min-height: 136px;
  display: grid;
  align-content: space-between;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfe;
}

.career-path span,
.quiz-level-number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--orange);
  font-weight: 900;
}

.career-path strong {
  line-height: 1.2;
}

.career-path p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.quiz-hero {
  grid-template-columns: minmax(0, 1fr) 280px;
}

.quiz-score-card {
  min-height: 170px;
  display: grid;
  align-content: center;
  gap: 8px;
  border-radius: 8px;
  padding: 22px;
  color: var(--white);
  background:
    linear-gradient(160deg, rgba(15, 23, 42, 0.96), rgba(37, 99, 235, 0.82)),
    #0f172a;
}

.quiz-score {
  font-size: 36px;
  font-weight: 900;
}

.quiz-level-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.games-hub {
  display: grid;
  gap: 16px;
  margin-bottom: 22px;
}

.games-hub-intro {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 18px;
}

.games-hub-intro h2 {
  margin: 4px 0 6px;
  font-size: 22px;
}

.games-hub-intro p:last-child {
  margin: 0;
  color: var(--muted);
}

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

.game-launcher-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.game-launcher-card header,
.game-card-footer {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.game-launcher-card header p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.game-launcher-card h3 {
  margin: 0;
  font-size: 19px;
}

.game-launcher-card > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.game-card-footer {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.game-card-footer span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.scenario-launcher-page {
  display: grid;
  gap: 16px;
}

.scenario-launcher-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 18px;
}

.scenario-launcher-hero h2 {
  margin: 4px 0 6px;
  font-size: 22px;
}

.scenario-launcher-hero p:last-child {
  margin: 0;
  color: var(--muted);
}

.scenario-launcher-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.34fr);
  gap: 16px;
  align-items: start;
}

.scenario-list-panel,
.scenario-info-panel {
  padding: 18px;
}

.scenario-list-panel header {
  margin-bottom: 12px;
}

.scenario-list-panel h3,
.scenario-info-panel h3 {
  margin: 4px 0 6px;
}

.scenario-list-panel header p {
  margin: 0;
  color: var(--muted);
}

.scenario-list {
  display: grid;
  gap: 10px;
}

.scenario-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 14px;
  background: #fbfcfe;
}

.scenario-row h4 {
  margin: 0 0 4px;
  font-size: 15px;
}

.scenario-row p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.scenario-row-action {
  display: flex;
  justify-content: flex-end;
}

.scenario-row-action button {
  white-space: nowrap;
}

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

@media (max-width: 760px) {
  .scenario-launcher-hero,
  .game-play-header,
  .scenario-row,
  .quiz-topic-row {
    grid-template-columns: 1fr;
  }

  .scenario-launcher-hero {
    display: grid;
  }

  .game-play-header {
    display: grid;
  }

  .game-play-meta {
    justify-items: start;
  }

  .scenario-row-action {
    justify-content: stretch;
  }

  .scenario-row-action button {
    width: 100%;
  }

  .quiz-topic-row button {
    width: 100%;
  }

  .sim-mode-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.game-subsection {
  margin: 4px 0 16px;
}

.game-subsection h2 {
  margin: 4px 0 6px;
}

.game-subsection p:last-child {
  margin: 0;
  color: var(--muted);
}

.quiz-setup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: end;
  margin-bottom: 22px;
  padding: 22px;
}

.quiz-setup h2 {
  margin: 4px 0 8px;
}

.difficulty-select {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.difficulty-select select {
  font-size: 15px;
  font-weight: 800;
  text-transform: none;
}

.back-button {
  min-height: 42px;
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 14px;
  color: var(--ink);
  background: var(--white);
  font-weight: 800;
}

.games-secondary-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 18px;
}

.streak-panel,
.leaderboard-panel,
.awards-panel {
  padding: 18px;
}

.streak-panel h2,
.leaderboard-panel h2,
.awards-panel h2 {
  margin: 4px 0 10px;
}

.streak-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 18px;
}

.streak-days span {
  min-height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--white);
  background: var(--orange);
  font-size: 12px;
  font-weight: 900;
}

.leaderboard-row,
.award-row {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}

.leaderboard-row {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.leaderboard-row > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--delta-navy);
  font-weight: 900;
}

.leaderboard-row p,
.award-row p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.award-row {
  grid-template-columns: 104px minmax(0, 1fr);
}

.sim-admin-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
  padding: 18px;
}

.sim-admin-tools h2 {
  margin: 4px 0 8px;
}

.sim-upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.simulator-board {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: 18px;
  align-items: start;
}

.sim-builder-page {
  display: grid;
  gap: 18px;
}

.game-play-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 18px;
}

.game-play-header h2 {
  margin: 4px 0 6px;
  font-size: 24px;
}

.game-play-header p:last-child {
  margin: 0;
  color: var(--muted);
}

.game-play-meta {
  display: grid;
  justify-items: end;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.sim-play-header {
  align-items: stretch;
}

.sim-mode-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.sim-mode-strip span {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--muted);
  background: #fbfcfe;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.sim-mode-strip span.active {
  border-color: #f0a15d;
  color: #7d3900;
  background: #ffe4ce;
}

.sim-mode-strip span.complete {
  border-color: #7abf62;
  color: #245c18;
  background: #f0f9eb;
}

.sim-mode-strip span.warning {
  border-color: #de6e91;
  color: #991b1b;
  background: #fff;
}

.sim-builder-status {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sim-builder-status span {
  display: grid;
  min-width: 132px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--muted);
  background: #fbfcfe;
  font-size: 12px;
  font-weight: 800;
}

.sim-builder-status strong {
  color: var(--ink);
  font-size: 18px;
}

.sim-builder-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  gap: 18px;
  align-items: start;
}

.sim-builder-schematic,
.sim-builder-side,
.asset-tray,
.live-simulation-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.sim-builder-schematic header,
.sim-builder-side header,
.asset-tray header,
.live-simulation-panel header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.sim-builder-schematic h3,
.sim-builder-side h3,
.asset-tray h3,
.live-simulation-panel h3 {
  margin: 0 0 4px;
}

.building-schematic {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(9, 39, 67, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(9, 39, 67, 0.06) 1px, transparent 1px),
    #f8fbfd;
  background-size: 32px 32px;
}

.builder-drop-zone {
  position: absolute;
  display: grid;
  gap: 6px;
  border: 2px dashed #bfd0dd;
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.9);
  transition: 0.18s ease;
}

.builder-drop-zone.drag-over {
  border-color: var(--orange);
  background: #fff4ea;
  transform: translateY(-2px);
}

.builder-drop-zone strong {
  color: var(--ink);
}

.builder-drop-zone small {
  color: var(--muted);
  line-height: 1.3;
}

.zone-roof {
  top: 24px;
  left: 12%;
  right: 12%;
  min-height: 94px;
}

.zone-stair {
  top: 150px;
  left: 6%;
  width: 25%;
  min-height: 318px;
}

.zone-lobby {
  top: 170px;
  left: 36%;
  width: 25%;
  min-height: 210px;
}

.zone-shaft {
  top: 142px;
  right: 8%;
  width: 22%;
  min-height: 316px;
}

.zone-riser {
  bottom: 28px;
  left: 36%;
  width: 25%;
  min-height: 126px;
}

.builder-zone-assets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.builder-placed-asset {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border: 1px solid #8fc8dc;
  border-radius: 7px;
  padding: 5px 7px;
  color: #114c88;
  background: #dcecff;
  font-size: 12px;
  font-weight: 900;
}

.builder-placed-asset.correct {
  border-color: #7abf62;
  color: #245c18;
  background: #f0f9eb;
}

.builder-placed-asset.wrong {
  border-color: #f0a15d;
  color: #7d3900;
  background: #ffe4ce;
}

.builder-placed-asset button {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 6px;
  color: inherit;
  background: rgba(255, 255, 255, 0.7);
  font-weight: 900;
}

.sim-cause-checklist {
  display: grid;
  gap: 10px;
}

.sim-cause-checklist label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
  font-weight: 800;
}

.sim-cause-checklist input {
  margin-top: 3px;
}

.sim-builder-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sim-builder-feedback {
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 8px;
  padding: 12px;
  background: #fff7f0;
}

.sim-builder-feedback p {
  margin: 0;
}

.asset-tray {
  position: sticky;
  bottom: 0;
  z-index: 10;
  box-shadow: 0 -12px 34px rgba(7, 24, 39, 0.1);
}

.asset-category {
  display: grid;
  gap: 8px;
}

.asset-category > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.asset-chip {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 12px;
  color: var(--ink);
  background: var(--white);
  font-weight: 900;
  cursor: grab;
}

.asset-chip:active {
  cursor: grabbing;
}

.smoke-visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.smoke-plume {
  position: absolute;
  right: 12%;
  bottom: 100px;
  width: 96px;
  height: 300px;
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(ellipse at 40% 75%, rgba(97, 112, 123, 0.42), transparent 34%),
    radial-gradient(ellipse at 58% 48%, rgba(126, 140, 150, 0.36), transparent 36%),
    radial-gradient(ellipse at 44% 20%, rgba(210, 218, 224, 0.5), transparent 34%);
  filter: blur(8px);
}

.pressure-arrow {
  position: absolute;
  border-radius: 999px;
  padding: 6px 10px;
  opacity: 0;
  color: var(--white);
  background: var(--orange);
  font-size: 12px;
  font-weight: 900;
}

.stair-arrow {
  left: 10%;
  top: 46%;
}

.shaft-arrow {
  right: 8%;
  top: 24%;
}

.live-active .smoke-plume {
  opacity: 1;
  animation: builder-smoke-rise 5s ease-in-out infinite alternate;
}

.live-active .pressure-arrow {
  opacity: 1;
}

.fault-active .zone-shaft {
  border-color: #dc2626;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
}

.fault-active .shaft-arrow {
  background: var(--red);
}

@keyframes builder-smoke-rise {
  from {
    transform: translateY(28px) scale(0.9);
  }
  to {
    transform: translateY(-24px) scale(1.08);
  }
}

.live-control-grid,
.sim-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sim-status-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sim-status-grid span {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  background: #fbfcfe;
  font-weight: 800;
}

.sim-status-grid strong {
  color: var(--ink);
  font-size: 18px;
}

.fault-injection-panel {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(220, 38, 38, 0.22);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.fault-injection-panel h4,
.fault-injection-panel p {
  margin: 0;
}

.sim-diagnosis-result {
  border-radius: 8px;
  padding: 10px 12px;
  font-weight: 800;
}

.sim-diagnosis-result.correct {
  color: #245c18;
  background: #f0f9eb;
}

.sim-diagnosis-result.wrong {
  color: #991b1b;
  background: #fff;
}

.fault-game-page {
  display: grid;
  gap: 18px;
}

.fault-game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 18px;
  align-items: start;
}

.wiring-drawing-panel,
.fault-game-side {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.wiring-drawing-panel header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.wiring-drawing-panel h3,
.fault-game-side h3 {
  margin: 0 0 4px;
}

.panel-wiring-drawing {
  position: relative;
  min-height: 400px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(9, 39, 67, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(9, 39, 67, 0.06) 1px, transparent 1px),
    #f8fbfd;
  background-size: 28px 28px;
}

.panel-block {
  position: absolute;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--white);
  box-shadow: 0 10px 24px rgba(7, 24, 39, 0.08);
}

.panel-block strong {
  color: var(--ink);
}

.panel-block span {
  border-radius: 7px;
  padding: 5px 7px;
  color: var(--muted);
  background: #fbfcfe;
  font-size: 12px;
  font-weight: 800;
}

.terminal-block {
  left: 7%;
  top: 13%;
  width: 210px;
}

.actuator-block {
  right: 7%;
  top: 13%;
  width: 230px;
}

.wire {
  position: absolute;
  left: 35%;
  width: 30%;
  height: 6px;
  border: 0;
  border-radius: 6px;
  color: transparent;
  background: var(--delta-blue);
  cursor: pointer;
  transition: box-shadow 0.16s ease, outline-color 0.16s ease;
}

.wire::after {
  content: attr(data-wiring-choice);
  position: absolute;
  left: 50%;
  top: -28px;
  transform: translateX(-50%);
  border-radius: 7px;
  padding: 4px 7px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.wire-power {
  top: 26%;
  background: #e14b4b;
}

.wire-common {
  top: 38%;
  background: #334155;
}

.wire-close {
  top: 62%;
  background: #5f9f3d;
}

.wire-fault {
  top: 50%;
  background: var(--orange);
  transform: rotate(7deg);
  transform-origin: left center;
}

.wire:hover,
.wire.selected {
  box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.16);
}

.wire.selected.correct {
  outline: 3px solid #4f9f3c;
  outline-offset: 4px;
}

.wire.selected.wrong {
  outline: 3px solid #d84444;
  outline-offset: 4px;
}

.schematic-panel,
.cause-effect-panel {
  padding: 18px;
}

.schematic-panel header,
.cause-effect-panel header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.schematic-panel h2,
.cause-effect-panel h2 {
  margin: 0 0 4px;
}

.schematic-canvas {
  min-height: 430px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(52, 151, 178, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(52, 151, 178, 0.08) 1px, transparent 1px),
    #f8fbfd;
  background-size: 28px 28px;
}

.schematic-node {
  position: absolute;
  z-index: 2;
  min-width: 84px;
  min-height: 44px;
  border: 2px solid var(--delta-navy);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--ink);
  background: var(--white);
  font-weight: 900;
}

.schematic-node.selected {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16);
}

.schematic-node.mcp {
  left: 8%;
  top: 42%;
}

.schematic-node.panel {
  left: 38%;
  top: 42%;
  min-height: 82px;
}

.schematic-node.vent {
  right: 9%;
  top: 18%;
}

.schematic-node.damper {
  right: 9%;
  bottom: 18%;
}

.schematic-line {
  position: absolute;
  z-index: 1;
  height: 4px;
  border-radius: 99px;
  background: var(--delta-blue);
  transform-origin: left center;
}

.line-a {
  width: 30%;
  left: 18%;
  top: 48%;
}

.line-b {
  width: 28%;
  left: 52%;
  top: 39%;
  transform: rotate(-25deg);
}

.line-c {
  width: 28%;
  left: 52%;
  top: 58%;
  transform: rotate(25deg);
}

.cause-effect-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.cause-effect-table th,
.cause-effect-table td {
  padding: 13px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.cause-effect-table th {
  background: #fbfcfe;
  font-size: 12px;
  text-transform: uppercase;
}

.question-dock {
  position: sticky;
  bottom: 0;
  z-index: 15;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px minmax(360px, 0.9fr);
  gap: 16px;
  align-items: center;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -16px 40px rgba(7, 24, 39, 0.12);
  backdrop-filter: blur(12px);
}

.question-dock h2 {
  margin: 4px 0 6px;
  font-size: 21px;
}

.timer-pill {
  min-height: 54px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--white);
  background: var(--delta-navy);
  font-size: 22px;
  font-weight: 900;
}

.answer-options {
  display: grid;
  gap: 8px;
}

.answer-options button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: var(--white);
  font-weight: 800;
}

.answer-options button.correct {
  border-color: #61a85a;
  color: #215c1b;
  background: #dff2dc;
}

.answer-options button.wrong {
  border-color: #e39ab5;
  color: #991b1b;
  background: #fff;
}

.quiz-level-card {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.quiz-level-card header,
.quiz-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.quiz-level-card h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.12;
}

.quiz-card-meta span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.quiz-topics {
  margin-top: 4px;
}

.quiz-topics header {
  margin-bottom: 14px;
}

.quiz-topic-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.quiz-topic-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 96px auto;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
}

.quiz-topic-index {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--white);
  background: var(--delta-navy);
  font-size: 13px;
  font-weight: 900;
}

.quiz-topic-row h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.quiz-topic-row p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.quiz-topic-row button {
  min-width: 92px;
}

.simulator-system-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.simulator-system-grid .module-card {
  min-height: 250px;
}

.quiz-round-page,
.quiz-results-page {
  display: grid;
  gap: 18px;
}

.quiz-round-panel,
.quiz-results-card {
  padding: 24px;
}

.quiz-round-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.quiz-round-header h2,
.quiz-results-card h2 {
  margin: 4px 0 8px;
  color: var(--ink);
  font-size: 32px;
}

.quiz-round-header p,
.quiz-results-card p {
  margin: 0;
  color: var(--muted);
}

.quiz-round-score {
  min-width: 120px;
  display: grid;
  justify-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--soft);
}

.quiz-round-score strong {
  color: var(--orange);
  font-size: 34px;
  line-height: 1;
}

.quiz-round-score span {
  color: var(--muted);
  font-weight: 900;
}

.quiz-question-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 18px;
  margin-top: 18px;
  border-radius: 8px;
  padding: 2px;
}

.quiz-question-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 25px;
  line-height: 1.25;
}

.smoke-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: var(--smoke);
  background:
    radial-gradient(ellipse at 18% 28%, rgba(246, 249, 250, 0.9), transparent 30%),
    radial-gradient(ellipse at 58% 42%, rgba(216, 224, 229, 0.88), transparent 34%),
    radial-gradient(ellipse at 84% 68%, rgba(172, 185, 194, 0.84), transparent 36%),
    linear-gradient(135deg, rgba(210, 218, 224, 0.42), rgba(126, 140, 150, 0.62)),
    rgba(16, 32, 51, calc(var(--smoke) * 0.72));
  background-size: 120% 130%, 150% 140%, 130% 120%, auto;
  filter: blur(5px) saturate(0.75);
  animation: smoke-drift 9s ease-in-out infinite alternate;
}

.smoke-overlay::before,
.smoke-overlay::after {
  content: "";
  position: absolute;
  inset: -28%;
  border-radius: 48%;
  background:
    radial-gradient(ellipse at 30% 42%, rgba(255, 255, 255, calc(0.68 - (var(--smoke) * 0.34))), transparent 24%),
    radial-gradient(ellipse at 62% 52%, rgba(135, 148, 158, calc(0.44 + (var(--smoke) * 0.28))), transparent 28%),
    radial-gradient(ellipse at 48% 72%, rgba(50, 66, 78, calc(0.28 + (var(--smoke) * 0.48))), transparent 31%);
  filter: blur(10px);
  transform-origin: 48% 52%;
  mix-blend-mode: multiply;
}

.smoke-overlay::before {
  animation: smoke-swirl 13s linear infinite;
}

.smoke-overlay::after {
  opacity: 0.82;
  background:
    radial-gradient(ellipse at 36% 36%, rgba(230, 236, 240, calc(0.56 - (var(--smoke) * 0.24))), transparent 26%),
    radial-gradient(ellipse at 64% 56%, rgba(97, 112, 123, calc(0.34 + (var(--smoke) * 0.36))), transparent 30%),
    radial-gradient(ellipse at 44% 74%, rgba(23, 36, 48, calc(0.22 + (var(--smoke) * 0.52))), transparent 34%);
  animation: smoke-swirl-reverse 17s linear infinite;
}

.smoke-meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.smoke-meter span {
  color: var(--muted);
  font-weight: 900;
}

.smoke-meter strong {
  color: var(--ink);
}

.smoke-meter div {
  grid-column: 1 / -1;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #d8e0e9;
}

.smoke-meter i {
  display: block;
  width: var(--value);
  height: 100%;
  background: linear-gradient(90deg, #8795a1, var(--orange));
}

@keyframes smoke-drift {
  0% {
    background-position: 0% 18%, 42% 0%, 100% 76%, 0 0;
    transform: scale(1.02) translate3d(-1%, 1%, 0);
  }
  50% {
    background-position: 44% 36%, 18% 54%, 68% 38%, 0 0;
    transform: scale(1.07) translate3d(2%, -1%, 0);
  }
  100% {
    background-position: 86% 24%, 72% 68%, 24% 52%, 0 0;
    transform: scale(1.04) translate3d(-2%, -2%, 0);
  }
}

@keyframes smoke-swirl {
  0% {
    transform: rotate(0deg) translate3d(-2%, 1%, 0) scale(1);
  }
  50% {
    transform: rotate(182deg) translate3d(3%, -2%, 0) scale(1.08);
  }
  100% {
    transform: rotate(360deg) translate3d(-1%, 2%, 0) scale(1);
  }
}

@keyframes smoke-swirl-reverse {
  0% {
    transform: rotate(360deg) translate3d(2%, -1%, 0) scale(1.1);
  }
  50% {
    transform: rotate(174deg) translate3d(-3%, 2%, 0) scale(0.98);
  }
  100% {
    transform: rotate(0deg) translate3d(1%, -2%, 0) scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .smoke-overlay,
  .smoke-overlay::before,
  .smoke-overlay::after {
    animation: none;
  }
}

.quiz-answer-grid {
  display: grid;
  gap: 10px;
}

.quiz-answer {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink);
  background: #fbfcfe;
  text-align: left;
}

.quiz-answer span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--delta-navy);
  font-weight: 900;
}

.quiz-answer strong {
  line-height: 1.3;
}

.quiz-answer.correct {
  border-color: rgba(95, 159, 61, 0.56);
  background: #eef8eb;
}

.quiz-answer.correct span {
  background: var(--green);
}

.quiz-answer.wrong {
  border-color: rgba(220, 38, 38, 0.44);
  background: #fff;
}

.quiz-answer.wrong span {
  background: var(--red);
}

.quiz-answer:disabled {
  opacity: 1;
}

.quiz-feedback {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fbfcfe;
}

.quiz-feedback.correct {
  border-color: rgba(95, 159, 61, 0.45);
  background: #eef8eb;
}

.quiz-feedback.wrong {
  border-color: rgba(220, 38, 38, 0.38);
  background: #fff;
}

.quiz-feedback strong {
  color: var(--ink);
  font-size: 18px;
}

.quiz-feedback p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.quiz-feedback .primary-button {
  justify-self: end;
}

.quiz-results-card {
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
}

.quiz-result-ring {
  width: 190px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--white) 0 58%, transparent 59%),
    conic-gradient(var(--orange) var(--progress), #d8e0e9 0);
}

.quiz-result-ring strong {
  color: var(--ink);
  font-size: 42px;
  line-height: 1;
}

.quiz-result-ring span {
  color: var(--muted);
  font-weight: 900;
}

.quiz-result-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.quiz-result-stats span {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  color: var(--muted);
  background: var(--soft);
  font-weight: 800;
}

.quiz-result-stats strong {
  display: block;
  color: var(--ink);
  font-size: 26px;
}

.quiz-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.quiz-review-list {
  width: 100%;
  display: grid;
  gap: 10px;
  text-align: left;
}

.quiz-review-list h3 {
  margin: 0;
}

.quiz-review-list article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfe;
}

.quiz-review-list strong,
.quiz-review-list small {
  display: block;
}

.quiz-review-list p {
  margin: 6px 0 0;
}

.quiz-admin-builder {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.quiz-admin-builder header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.quiz-admin-builder h3 {
  margin: 0 0 6px;
}

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

.quiz-admin-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.quiz-admin-form input,
.quiz-admin-form select,
.quiz-admin-form textarea {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
  color: var(--ink);
  background: var(--white);
  font: inherit;
  text-transform: none;
}

.quiz-admin-form textarea {
  min-height: 82px;
  resize: vertical;
}

.guide-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.7fr);
  gap: 22px;
  align-items: end;
  margin-bottom: 18px;
  padding: 22px;
}

.guide-toolbar h2,
.guide-list h2 {
  margin: 4px 0 8px;
}

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

.calibration-filters {
  border-bottom: 1px solid var(--line);
  padding: 0 22px 18px;
}

.guide-filters label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.guide-side {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
}

.guide-side h3 {
  margin: 0 0 8px;
}

.guide-side button {
  min-height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
  color: var(--ink);
  background: var(--white);
  font-weight: 800;
}

.guide-side span {
  color: var(--orange);
}

.guide-list {
  overflow: hidden;
}

.guide-list > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.guide-row {
  display: grid;
  grid-template-columns: minmax(230px, 1.4fr) 135px 150px 70px 150px 104px 132px;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.guide-row-head {
  padding-top: 12px;
  padding-bottom: 12px;
  color: var(--muted);
  background: #fbfcfe;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.guide-row-head span {
  color: inherit;
}

.guide-row h3 {
  margin: 0 0 4px;
  font-size: 15px;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.guide-row-main {
  min-width: 0;
}

.product-library-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  border-left: 4px solid var(--orange);
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 65%, #fff4ec 100%);
}

.product-library-hero h2,
.product-library-hero p {
  margin: 0;
}

.product-library-hero h2 {
  margin-top: 4px;
}

.product-library-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: 10px;
  min-width: 360px;
}

.product-library-summary span {
  display: grid;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-weight: 800;
}

.product-library-summary strong {
  color: var(--ink);
  font-size: 24px;
}

.product-library-filters {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.product-library-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.product-library-search label,
.product-library-selects label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.product-library-search input {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
  color: var(--ink);
  font-weight: 800;
}

.product-library-segments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-library-segments button,
.product-library-view-toggle button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  background: var(--white);
  color: var(--muted);
  font-weight: 900;
}

.product-library-segments button.active,
.product-library-view-toggle button.active {
  border-color: rgba(255, 102, 0, 0.35);
  background: var(--orange);
  color: #fff;
}

.product-library-view-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.product-library-selects {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
}

.product-library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.product-library-card {
  display: grid;
  align-content: start;
  gap: 14px;
  overflow: hidden;
  padding: 0;
}

.product-library-card-top {
  display: grid;
  gap: 12px;
  align-items: start;
  padding: 14px 14px 0;
}

.product-library-visual {
  position: relative;
  display: grid;
  min-height: 92px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(145deg, #f8fafc, #edf2f7);
  overflow: hidden;
}

.product-library-thumb {
  position: relative;
  min-height: 128px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.product-library-thumb img {
  width: 100%;
  height: 100%;
  min-height: 128px;
  object-fit: cover;
  display: block;
}

.product-library-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 31, 54, 0.02), rgba(255, 102, 0, 0.22));
}

.product-library-thumb span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  display: inline-grid;
  min-width: 42px;
  min-height: 34px;
  place-items: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-weight: 950;
}

.product-library-visual::before,
.product-library-visual::after {
  content: "";
  position: absolute;
  opacity: 0.18;
  transform: rotate(-18deg);
}

.product-library-visual::before {
  width: 28px;
  height: 150px;
  right: 18px;
  top: -22px;
  background: var(--orange);
}

.product-library-visual::after {
  width: 18px;
  height: 130px;
  left: 18px;
  bottom: -26px;
  background: var(--navy);
}

.product-library-visual span {
  position: relative;
  z-index: 1;
  color: var(--ink);
  font-size: 26px;
  font-weight: 950;
}

.product-library-visual.module::after,
.product-library-visual.interface::after {
  background: #16a34a;
}

.product-library-visual.sensor::after {
  background: #64748b;
}

.product-library-visual.panel::after {
  background: #0ea5e9;
}

.product-library-visual.part::after {
  background: var(--navy);
}

.product-library-visual.fan::after {
  background: #0f766e;
}

.product-library-visual.damper::after {
  background: #7c2d12;
}

.product-library-visual.cable::after {
  background: #475569;
}

.product-library-card-top .badge {
  margin-bottom: 9px;
}

.product-library-card h3,
.product-library-card p {
  margin: 0;
}

.product-library-card p {
  color: var(--muted);
}

.product-library-card h3 {
  margin-bottom: 6px;
  font-size: 18px;
  line-height: 1.22;
  overflow-wrap: break-word;
}

.product-library-description {
  padding: 0 14px;
  min-height: 42px;
}

.product-library-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px;
}

.product-library-specs span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.product-library-specs small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.product-library-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px;
}

.product-library-tags span {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 7px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.product-library-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: auto;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);
  background: #fbfcfe;
}

.product-library-actions .table-action:first-child {
  border-color: var(--orange);
  background: var(--orange);
  color: #fff;
}

.product-library-actions.compact {
  margin-top: 0;
  padding: 0;
  border-top: 0;
  background: transparent;
}

.product-library-list {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.product-library-list-head,
.product-library-list-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr) minmax(180px, auto);
  gap: 12px;
  align-items: center;
}

.product-library-list-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.product-library-list-row {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.product-library-list-row > div:first-child {
  display: grid;
  gap: 5px;
  align-content: start;
}

.product-library-list-row .badge {
  justify-self: start;
  width: auto;
  max-width: max-content;
  min-height: 22px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 10.5px;
  line-height: 1;
}

.product-library-list-row strong {
  color: var(--ink);
  overflow-wrap: break-word;
}

.product-library-list-row small,
.product-library-list-row > span {
  color: var(--muted);
  font-weight: 800;
}

.product-detail-page {
  display: grid;
  gap: 16px;
}

.product-detail-hero {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: stretch;
  border-left: 4px solid var(--orange);
}

.product-detail-hero .product-library-visual,
.product-detail-hero .product-library-thumb {
  min-height: 180px;
}

.product-detail-hero h2,
.product-detail-hero p {
  margin: 0;
}

.product-detail-hero h2 {
  margin: 4px 0 8px;
  font-size: 28px;
  line-height: 1.12;
}

.product-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: start;
  justify-content: flex-end;
}

.product-detail-actions .table-action:first-child {
  border-color: var(--orange);
  background: var(--orange);
  color: #fff;
}

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

.product-detail-group {
  display: grid;
  gap: 12px;
}

.product-detail-group.quiet-empty {
  border-style: dashed;
  background: #fbfcfe;
  box-shadow: none;
}

.product-detail-group header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.product-detail-group h3 {
  margin: 0;
}

.product-detail-group header span {
  display: inline-grid;
  min-width: 34px;
  min-height: 30px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: #f8fafc;
  font-weight: 900;
}

.product-detail-related-list {
  display: grid;
  gap: 10px;
}

.product-detail-related-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.product-detail-related-row .product-library-visual,
.product-detail-related-row .product-library-thumb {
  min-height: 70px;
}

.product-detail-related-row .product-library-thumb img {
  min-height: 70px;
}

.product-detail-related-row strong {
  display: block;
  color: var(--ink);
  overflow-wrap: break-word;
}

.product-detail-related-row small,
.muted-copy {
  color: var(--muted);
  font-weight: 800;
}

.quiet-empty-content {
  display: grid;
  gap: 4px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.quiet-empty-content strong {
  color: #526171;
  font-size: 12px;
  text-transform: uppercase;
}

.quiet-empty-content span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.instruction-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: center;
  margin-bottom: 18px;
  padding: 22px;
}

.instruction-hero.no-upload {
  grid-template-columns: 1fr;
}

.instruction-hero h2,
.instruction-register h2 {
  margin: 4px 0 8px;
}

.upload-card {
  min-height: 140px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  border: 1px dashed #f0b17e;
  border-radius: 8px;
  padding: 16px;
  background: #fff7f0;
}

.upload-card .primary-button {
  grid-column: 1 / -1;
}

.pdf-mark {
  width: 58px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--white);
  background: linear-gradient(160deg, #1e3a8a, #2563eb);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.instruction-register {
  overflow: hidden;
}

.instruction-register > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.register-tools {
  display: flex;
  gap: 10px;
}

.data-panel > .register-tools {
  justify-content: flex-end;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.admin-area-page {
  display: grid;
  gap: 18px;
}

.admin-area-register {
  overflow: hidden;
}

.document-admin-page .manager-metrics {
  margin: 0;
}

.document-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 18px;
}

.document-admin-form-panel,
.document-admin-rules {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.document-admin-form-panel header,
.document-admin-rules header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.document-admin-form-panel h3,
.document-admin-rules h3 {
  margin: 0 0 6px;
}

.document-cleanup-panel {
  display: grid;
  gap: 16px;
}

.document-cleanup-controls {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.document-cleanup-controls .full-width-field {
  grid-column: 1 / -1;
}

.document-cleanup-action-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.document-cleanup-action-strip div:first-child {
  display: grid;
  gap: 4px;
  min-width: 240px;
}

.document-cleanup-action-strip span {
  color: var(--muted);
}

.document-delete-confirmation {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(220, 38, 38, 0.28);
  border-radius: 8px;
  background: #fff;
}

.document-delete-confirmation h4,
.document-delete-confirmation p {
  margin: 0;
}

.document-delete-confirmation dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
}

.document-delete-confirmation dl div {
  padding: 10px;
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 8px;
  background: #fff;
}

.document-delete-confirmation dt {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.document-delete-confirmation dd {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
}

.document-cleanup-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.document-admin-form input[type="date"] {
  min-height: 42px;
}

.document-entry-form {
  display: grid;
  gap: 14px;
}

.document-entry-form section {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfe;
}

.document-entry-form h4 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.document-entry-form .quiz-admin-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.document-entry-form textarea {
  min-height: 76px;
}

.document-storage-plan {
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 8px;
  padding: 14px;
  background: #fff7f0;
}

.document-storage-plan h4 {
  margin: 0 0 6px;
  font-size: 14px;
}

.document-storage-plan p {
  margin: 0;
}

.admin-tab-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.admin-tab-strip button {
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 10px 14px;
  color: var(--ink);
  background: transparent;
  font-weight: 900;
  cursor: pointer;
}

.admin-tab-strip button.active {
  border-color: rgba(37, 99, 235, 0.34);
  color: var(--white);
  background: var(--delta-orange);
}

.document-control-table th,
.document-control-table td {
  padding: 14px 12px;
}

.admin-area-register {
  overflow-x: auto;
}

.employee-structure-table {
  min-width: 980px;
  table-layout: auto;
}

.employee-structure-table th,
.employee-structure-table td {
  vertical-align: top;
}

.employee-structure-table th:first-child,
.employee-structure-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 240px;
  background: var(--white);
  box-shadow: 12px 0 18px rgba(15, 23, 42, 0.04);
}

.employee-structure-table select {
  width: 100%;
  min-width: 148px;
}

.employee-structure-table td[data-label="Line Manager"] select,
.employee-structure-table td[data-label="Evidence Reviewer"] select {
  min-width: 170px;
}

.employee-structure-table td[data-label="Actions"] {
  min-width: 240px;
}

.employee-structure-table td[data-label="Actions"] .table-actions {
  justify-content: flex-start;
}

.employee-structure-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.admin-detail-panel--target {
  display: grid;
}

.admin-detail-panel--target:target {
  display: grid;
}

.user-management-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pilot-setup-queue {
  display: grid;
  gap: 16px;
}

.pilot-setup-queue > header {
  align-items: flex-start;
}

.pilot-setup-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.pilot-setup-metric {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.pilot-setup-metric strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.pilot-setup-metric span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.pilot-setup-metric.ready {
  border-color: #b7e4c7;
  background: #f2fbf5;
}

.pilot-setup-metric.attention {
  border-color: #f0a15d;
  background: #fff7f0;
}

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

.pilot-setup-lane {
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.pilot-setup-lane header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pilot-setup-lane h4 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
}

.pilot-setup-lane header span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  border-radius: 999px;
  background: #eef3f8;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.pilot-setup-list {
  display: grid;
  gap: 8px;
}

.pilot-setup-list p,
.pilot-setup-footnote {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.pilot-setup-person {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: #fbfcfe;
}

.pilot-setup-person strong,
.pilot-setup-person small {
  display: block;
}

.pilot-setup-person strong {
  color: var(--ink);
  font-size: 13px;
}

.pilot-setup-person small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.pilot-setup-person .table-action {
  grid-column: 1 / -1;
  justify-self: start;
}

.pilot-readiness-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.pilot-readiness-step {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 5px;
  align-items: center;
  border: 1px solid #d8e1ea;
  border-radius: 999px;
  padding: 4px 7px;
  background: #fbfcfe;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}

.pilot-readiness-step strong,
.pilot-readiness-step em {
  font-style: normal;
  white-space: nowrap;
}

.pilot-readiness-step strong {
  color: var(--ink);
  font-weight: 900;
}

.pilot-readiness-step.ready {
  border-color: #b7e4c7;
  background: #f2fbf5;
  color: #1f7a3a;
}

.pilot-readiness-step.missing {
  border-color: #f0a15d;
  background: #fff7f0;
  color: #a45a0a;
}

.pilot-readiness-step.not-required {
  opacity: 0.72;
}

.admin-detail-readiness {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfe;
}

.admin-detail-readiness h4,
.admin-detail-readiness p {
  margin: 0;
}

.admin-detail-readiness p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.admin-detail-readiness .pilot-readiness-strip {
  grid-column: 1 / -1;
  margin-top: 0;
}

@media (max-width: 1100px) {
  .pilot-setup-metrics,
  .pilot-setup-lanes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .pilot-setup-metrics,
  .pilot-setup-lanes,
  .admin-detail-readiness {
    grid-template-columns: 1fr;
  }

  .pilot-readiness-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pilot-readiness-step {
    justify-content: space-between;
    border-radius: 8px;
  }
}

.admin-cell-stack {
  display: grid;
  gap: 9px;
  min-width: 180px;
}

.admin-cell-stack label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.employee-structure-table tr.selected-row td {
  background: #fff7f0;
}

.admin-detail-panel {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.admin-detail-panel > header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.admin-detail-panel h3,
.admin-detail-panel h4 {
  margin: 0 0 6px;
}

.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.admin-detail-grid article {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfe;
}

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

.create-employee-wizard {
  display: block;
}

.create-employee-wizard__panel {
  display: grid;
  gap: 16px;
}

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

.create-employee-wizard__steps span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.create-employee-wizard__steps strong,
.create-employee-wizard__number {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1;
}

.create-employee-wizard__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.82fr) minmax(260px, 0.9fr);
  gap: 14px;
  align-items: start;
}

.create-employee-wizard__step {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.create-employee-wizard__step > header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.create-employee-wizard__step h4 {
  margin: 0 0 4px;
}

.create-employee-wizard__status-list {
  display: grid;
  gap: 8px;
}

.create-employee-wizard__status-list p {
  display: grid;
  grid-template-columns: minmax(110px, 0.75fr) minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.create-employee-wizard__status-list p:last-child {
  border-bottom: 0;
}

.create-employee-wizard__status-list strong {
  color: var(--navy);
}

.create-employee-wizard__status-list span {
  color: var(--muted);
}

@media (max-width: 1180px) {
  .create-employee-wizard__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .create-employee-wizard__steps {
    grid-template-columns: 1fr;
  }

  .create-employee-wizard__status-list p {
    grid-template-columns: 1fr;
  }
}

.permission-pack-editor {
  display: grid;
  gap: 16px;
}

.permission-pack-user-select {
  max-width: 520px;
}

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

.permission-pack-assignment {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.permission-pack-assignment.starter {
  background: #f7fafc;
}

.permission-pack-assignment input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--orange);
}

.permission-pack-assignment span {
  display: grid;
  gap: 4px;
}

.permission-pack-assignment strong {
  color: var(--ink);
  font-size: 15px;
}

.permission-pack-assignment small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.permission-pack-assignment em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
}

.permission-pack-assignment b {
  color: var(--orange);
  font-size: 12px;
  font-weight: 900;
}

.access-outcome-panel {
  display: grid;
  gap: 16px;
}

.access-outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.access-outcome-grid article {
  display: grid;
  gap: 6px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfe;
}

.access-outcome-grid span,
.access-outcome-table small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.access-outcome-grid strong {
  color: var(--ink);
  font-size: 22px;
}

.access-outcome-grid small {
  color: var(--muted);
  line-height: 1.4;
}

.access-outcome-table td strong {
  display: block;
  color: var(--ink);
}

.access-outcome-table .muted-row {
  background: #fbfcfe;
}

.access-outcome-table .muted-row strong,
.access-outcome-table .muted-row td {
  color: #64748b;
}

.framework-filter-bar,
.admin-activity-filters {
  margin: 0;
}

.identity-edit-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 10px;
  max-width: 360px;
}

.identity-edit-fields label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.identity-edit-fields input {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--ink);
  background: #fff;
  font-size: 13px;
  font-weight: 800;
}

.identity-edit-fields input:disabled {
  color: var(--muted);
  background: #f4f7fb;
}

.identity-edit-fields .identity-save-button {
  grid-column: 1 / -1;
  justify-self: start;
}

.storage-foundation-panel {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.storage-foundation-panel header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.storage-foundation-panel h3 {
  margin: 0 0 6px;
}

.storage-status {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(37, 99, 235, 0.24);
  border-radius: 8px;
  color: var(--ink);
  background: #fff7f0;
  font-weight: 800;
}

.storage-status.error {
  border-color: rgba(220, 38, 38, 0.28);
  color: #991b1b;
  background: #fff;
}

.reviewer-type-admin-panel {
  display: grid;
  gap: 16px;
}

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

.reviewer-type-list,
.reviewer-type-detail-card,
.reviewer-type-create-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.reviewer-type-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.reviewer-type-list__header,
.reviewer-type-detail-card > header,
.reviewer-type-members > header,
.reviewer-type-create-panel > header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.reviewer-type-list__header small,
.reviewer-type-list-item small,
.reviewer-type-facts span,
.reviewer-type-member-row small,
.reviewer-type-detail-card p,
.reviewer-type-create-panel p {
  color: var(--muted);
}

.reviewer-type-list-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.reviewer-type-list-item.active {
  border-color: var(--blue);
  background: #eff6ff;
}

.reviewer-type-list-item span {
  display: grid;
  gap: 3px;
}

.reviewer-type-detail-card,
.reviewer-type-create-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.reviewer-type-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.reviewer-type-facts p {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.reviewer-type-form-grid,
.reviewer-type-add-member {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.reviewer-type-form-grid label,
.reviewer-type-add-member label,
.reviewer-type-member-row label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.reviewer-type-reason-field {
  grid-column: 1 / -1;
}

.reviewer-type-form-grid input,
.reviewer-type-form-grid textarea,
.reviewer-type-add-member select,
.reviewer-type-add-member textarea,
.reviewer-type-member-row textarea {
  width: 100%;
}

.reviewer-type-form-grid textarea,
.reviewer-type-add-member textarea,
.reviewer-type-member-row textarea {
  min-height: 72px;
  resize: vertical;
}

.reviewer-type-members {
  display: grid;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.reviewer-type-member-list {
  display: grid;
  gap: 10px;
}

.reviewer-type-member-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) auto auto minmax(120px, auto) minmax(120px, auto);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.reviewer-type-member-row .reviewer-type-reason-field,
.reviewer-type-member-row .table-actions {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .reviewer-type-admin-grid,
  .reviewer-type-facts,
  .reviewer-type-form-grid,
  .reviewer-type-add-member,
  .reviewer-type-member-row {
    grid-template-columns: 1fr;
  }
}

.competence-submit-status {
  display: block;
  width: 100%;
  line-height: 1.45;
}

.storage-export-label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.storage-export-label textarea {
  min-height: 240px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink);
  background: #fbfcfe;
  font: 12px/1.5 Consolas, "Courier New", monospace;
  resize: vertical;
  text-transform: none;
}

.competence-passport-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(460px, 0.92fr);
  gap: 18px;
  align-items: center;
}

.competence-passport-hero h2 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 34px;
}

.passport-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.passport-hero-stats span {
  min-height: 86px;
  display: grid;
  align-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
  color: var(--muted);
  font-weight: 800;
}

.passport-hero-stats strong {
  color: var(--ink);
  font-size: 26px;
}

.passport-hero-stats em,
.passport-hero-stats small {
  font-style: normal;
  font-size: 12px;
  line-height: 1.35;
}

.passport-hero-stats em {
  color: var(--ink);
}

.passport-hero-stats small {
  color: var(--muted);
}

.competence-dashboard-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(390px, 0.9fr);
}

.single-panel-grid {
  grid-template-columns: 1fr;
}

.training-nav-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.training-nav-card {
  min-height: 154px;
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--shadow);
  text-align: left;
}

.training-nav-card span {
  justify-self: start;
  border-radius: 7px;
  padding: 5px 9px;
  color: #1e3a8a;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  font-size: 12px;
  font-weight: 900;
}

.training-nav-card strong {
  color: var(--ink);
  font-size: 17px;
}

.training-nav-card small {
  color: var(--muted);
  line-height: 1.35;
}

.training-section-page {
  gap: 18px;
}

.training-section-header {
  padding: 22px;
}

.training-section-header h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 30px;
}

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

.rams-compiler-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.82fr) minmax(520px, 1.18fr);
  gap: 18px;
  align-items: start;
}

.compiler-status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.compiler-status-strip article {
  display: grid;
  align-content: start;
  gap: 7px;
  border-left: 0;
  padding: 16px;
}

.compiler-status-card {
  position: relative;
  overflow: hidden;
}

.compiler-status-card::before {
  content: "";
  width: 42px;
  height: 5px;
  position: absolute;
  left: 16px;
  top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--orange);
}

.compiler-status-card.blue::before {
  background: var(--blue);
}

.compiler-status-card.green::before {
  background: var(--green);
}

.compiler-status-card.navy::before {
  background: var(--delta-navy);
}

.compiler-status-strip strong {
  color: var(--ink);
  font-size: 34px;
  line-height: 1;
}

.compiler-status-strip span {
  color: var(--ink);
  font-weight: 900;
}

.compiler-status-strip small {
  color: var(--muted);
  line-height: 1.35;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-dashboard-grid {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.admin-dashboard-grid .training-dashboard-panel {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

.admin-dashboard-grid .activity-list {
  gap: 7px;
}

.admin-dashboard-grid .activity-list p {
  padding-bottom: 7px;
}

.rams-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.rams-dashboard-card,
.rams-risk-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.rams-dashboard-card {
  display: grid;
  gap: 6px;
  padding: 16px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.rams-dashboard-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.rams-dashboard-card strong {
  color: var(--ink);
  font-size: 34px;
  line-height: 1;
}

.rams-dashboard-card small {
  color: var(--muted);
  line-height: 1.35;
}

.rams-overview-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(440px, 1.22fr);
  gap: 16px;
  align-items: stretch;
}

.rams-risk-panel,
.rams-records-panel {
  min-width: 0;
  padding: 20px;
}

.rams-risk-panel header,
.rams-records-panel header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}

.rams-risk-panel h3,
.rams-records-panel h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 20px;
}

.rams-risk-panel p,
.rams-records-panel p {
  margin: 0;
  color: var(--muted);
}

.rams-risk-list {
  display: grid;
  gap: 10px;
}

.rams-risk-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  padding: 12px;
  background: #fbfcfe;
}

.rams-risk-row strong {
  color: var(--ink);
}

.rams-risk-row small,
.rams-risk-row p {
  color: var(--muted);
  line-height: 1.35;
}

.rams-risk-row p {
  grid-column: 1 / -1;
}

.rams-form-panel,
.rams-preview-sheet {
  min-width: 0;
}

.rams-engineer-picker,
.rams-manual-hospital {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.rams-check-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fbfcfe;
}

.rams-check-row span {
  display: grid;
  gap: 2px;
}

.rams-check-row small {
  color: var(--muted);
}

.rams-risk-check {
  align-items: start;
}

.rams-preview-sheet {
  display: grid;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.rams-preview-header {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  border-bottom: 3px solid var(--orange);
  padding-bottom: 18px;
}

.rams-preview-header img {
  width: 188px;
  max-width: 100%;
}

.rams-preview-header h2 {
  margin: 3px 0 6px;
  color: var(--ink);
  font-size: 28px;
}

.rams-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rams-preview-grid div,
.rams-hospital-card,
.rams-preview-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.rams-preview-grid div {
  display: grid;
  gap: 5px;
  padding: 12px;
}

.rams-preview-grid strong,
.rams-preview-section h3 {
  color: var(--ink);
}

.rams-preview-grid span,
.rams-preview-section li,
.rams-hospital-card span,
.rams-hospital-card small {
  color: var(--muted);
}

.rams-preview-section {
  display: grid;
  gap: 10px;
}

.rams-preview-section h3 {
  margin: 0;
  font-size: 18px;
}

.rams-preview-table {
  display: grid;
  gap: 8px;
}

.rams-preview-row {
  display: grid;
  grid-template-columns: 0.8fr 0.8fr 1.4fr 1.2fr;
  gap: 10px;
  padding: 10px;
}

.rams-preview-row.head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  background: #eef3f8;
}

.rams-risk-table-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr 0.55fr 1.45fr 0.55fr;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--muted);
  background: #fbfcfe;
  line-height: 1.35;
}

.rams-risk-table-row.head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  background: #eef3f8;
}

.rams-risk-table-row strong {
  display: block;
  color: var(--ink);
}

.rams-risk-table-row small {
  display: block;
  color: var(--muted);
}

.rams-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rams-chip-list span {
  border: 1px solid #ffd0b4;
  border-radius: 6px;
  padding: 7px 9px;
  color: #8d3c00;
  background: #fff0e7;
  font-weight: 800;
}

.rams-risk-preview-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.rams-risk-preview-list span {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 8px;
  padding: 10px;
  background: #fbfcfe;
}

.rams-risk-preview-list span.high {
  border-left-color: #e24646;
}

.rams-risk-preview-list span.medium {
  border-left-color: var(--orange);
}

.rams-risk-preview-list span.low {
  border-left-color: #4f9f39;
}

.rams-risk-preview-list strong {
  color: var(--ink);
}

.rams-risk-preview-list small {
  color: var(--muted);
  line-height: 1.35;
}

.rams-generated-lists {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rams-generated-lists h3 {
  grid-column: 1 / -1;
}

.rams-generated-lists div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fbfcfe;
}

.rams-generated-lists strong {
  color: var(--ink);
}

.rams-generated-lists span {
  color: var(--muted);
  line-height: 1.35;
}

.rams-hospital-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.7fr);
  gap: 12px;
  padding: 12px;
}

.rams-hospital-card div:first-child {
  display: grid;
  gap: 5px;
}

.rams-map-placeholder {
  min-height: 130px;
  display: grid;
  align-content: center;
  gap: 8px;
  border: 1px dashed #b8c5d3;
  border-radius: 8px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.14), transparent),
    repeating-linear-gradient(45deg, #f6f8fb, #f6f8fb 10px, #eef3f8 10px, #eef3f8 20px);
}

.competence-category-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.op-scope .competence-workspace-page {
  gap: 12px;
}

.op-scope .competence-workspace-header {
  gap: 8px;
  padding: 14px 18px;
  border-radius: 10px;
}

.op-scope .competence-workspace-header .op-page-header__copy {
  gap: 4px;
}

.op-scope .competence-workspace-header .op-title {
  font-size: 1.45rem;
  line-height: 1.12;
}

.op-scope .competence-workspace-header .op-body {
  max-width: 820px;
  line-height: 1.35;
}

.competence-matrix-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.competence-matrix-breadcrumb button {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.competence-matrix-breadcrumb strong {
  color: var(--ink);
}

.competence-matrix-context-header {
  min-height: 0;
  padding-block: 0;
}

.competence-matrix-context-header .op-page-header__copy {
  gap: 2px;
}

.competence-matrix-context-header .op-body {
  font-size: 13px;
  line-height: 1.35;
}

.competence-readiness-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 8px;
  border-color: rgba(219, 226, 235, 0.75);
}

.competence-readiness-strip__primary {
  border-color: var(--line);
  background: #fbfcfe;
}

.competence-readiness-strip .op-stat-cell {
  min-height: 0;
  padding: 6px 9px;
}

.competence-readiness-strip .op-stat-value {
  font-size: 15px;
}

.competence-readiness-strip .op-stat-cell__label {
  font-size: 9px;
}

.op-scope .competence-attention-layer {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: stretch;
  border-width: 1px 0;
  border-style: solid;
  border-color: rgba(219, 226, 235, 0.86);
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.competence-attention-layer__header {
  align-items: center;
  flex: 0 0 100%;
  border-bottom: 1px solid rgba(219, 226, 235, 0.72);
  padding: 4px 7px;
}

.competence-attention-layer__header .op-page-header__copy {
  gap: 2px;
}

.competence-attention-layer__header .op-eyebrow {
  font-size: 9px;
  line-height: 1;
}

.competence-attention-layer__header .op-card-title {
  font-size: 12px;
  line-height: 1.15;
}

.competence-attention-list {
  display: grid;
  flex: 1 1 520px;
  gap: 0;
  min-width: 0;
}

.competence-attention-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  min-height: 30px;
  padding: 3px 7px;
  background: #fff;
}

.competence-attention-item .op-status {
  justify-self: start;
}

.op-scope .competence-matrix-panel .competence-attention-item .op-status,
.op-scope .competence-matrix-panel .competence-matrix-row .op-status {
  justify-content: center;
  gap: 0;
  min-height: 26px;
  border-width: 1px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.op-scope .competence-matrix-panel .competence-attention-item .op-status::before,
.op-scope .competence-matrix-panel .competence-matrix-row .op-status::before {
  display: none;
}

.competence-attention-item__main {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  min-width: 0;
}

.competence-attention-item .op-card-title {
  font-size: 11.5px;
  line-height: 1.2;
}

.competence-attention-item .op-body,
.competence-attention-item .op-meta {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  line-height: 1.2;
}

.competence-attention-item .op-body::before,
.competence-attention-item .op-meta::before {
  content: "·";
  margin-right: 4px;
  color: var(--muted);
}

.competence-attention-item__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 3px;
}

.competence-attention-item__actions .op-button,
.competence-evidence-launcher .op-button {
  min-height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11.5px;
}

.competence-status-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.competence-status-filter-row .op-pill {
  min-height: 24px;
  padding: 0 7px;
  border-color: transparent;
  color: var(--muted);
  font-size: 11px;
}

.competence-status-filter-row .op-pill__count {
  padding: 3px 6px;
  font-size: 10px;
}

.competence-status-filter-row .op-pill--active {
  border-color: var(--line);
  background: #f8fafc;
  color: var(--ink);
}

.competence-status-filter-row .op-pill--active .op-pill__count {
  background: #e8edf3;
  color: var(--ink);
}

.competence-category-strip button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 30px;
  border-radius: 6px;
  padding: 0 8px;
  text-align: left;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.competence-category-strip strong {
  color: var(--ink);
}

.competence-category-strip button:hover,
.competence-category-strip button:focus-visible {
  border-color: rgba(255, 106, 0, 0.45);
  box-shadow: none;
  transform: none;
  outline: none;
}

.competence-category-strip button.op-pill--active {
  border-color: var(--op-navy-950, var(--ink));
  background: var(--op-navy-950, var(--ink));
  color: #fff;
  box-shadow: none;
}

.competence-category-strip button.op-pill--active .op-pill__count {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.competence-matrix-panel,
.assessment-panel,
.evidence-panel,
.qualification-review-panel {
  display: grid;
  gap: 8px;
}

.op-scope .competence-matrix-panel {
  grid-column: 1 / -1;
  padding: 16px 18px;
}

.competence-matrix-panel header,
.assessment-panel header,
.evidence-panel header,
.qualification-review-panel header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.op-scope .competence-matrix-scroll {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  overflow-x: auto;
  padding-bottom: 0;
}

.competence-matrix {
  display: grid;
  gap: 0;
  border-top: 0;
  overflow: visible;
}

.op-scope .competence-category-section {
  display: grid;
  gap: 0;
  border: 1px solid rgba(219, 226, 235, 0.72);
  border-radius: 8px;
  padding: 0;
  background: #fff;
  overflow: hidden;
  scroll-margin-top: 18px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.competence-category-section.focus-scroll-target,
.competence-matrix-row.focus-scroll-target {
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow: inset 3px 0 0 rgba(37, 99, 235, 0.5);
}

.op-scope .competence-category-section header {
  border-bottom: 0;
  padding: 8px 10px;
}

.competence-category-section__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.competence-category-section__header .op-page-header__copy {
  gap: 2px;
}

.op-scope .competence-category-section.is-collapsed {
  border-color: rgba(219, 226, 235, 0.64);
  background: #fff;
}

.op-scope .competence-category-section.is-collapsed header {
  border-bottom: 0;
  padding: 7px 10px;
}

.competence-category-toggle {
  width: 26px;
  min-width: 26px;
  min-height: 24px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}

.competence-matrix-empty {
  margin-top: 8px;
}

.competence-category-section h4 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
}

.competence-category-section p {
  margin: 0;
  color: var(--muted);
}

.competence-category-priority-note {
  display: none;
}

.competence-category-summary {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
}

.competence-evidence-launcher {
  display: flex;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 7px;
  align-items: center;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  padding: 4px 7px;
  background: #fbfcfe;
}

.competence-evidence-launcher .op-page-header__copy {
  gap: 1px;
}

.competence-evidence-launcher strong,
.competence-evidence-launcher span {
  display: block;
}

.competence-evidence-launcher strong {
  color: var(--ink);
}

.competence-evidence-launcher span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10.5px;
}

.competence-matrix-head,
.competence-matrix-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.42fr) minmax(92px, 0.46fr) minmax(68px, 0.3fr) minmax(68px, 0.3fr) minmax(62px, 0.28fr) minmax(150px, 0.72fr) minmax(112px, 0.5fr);
  gap: 8px;
  align-items: center;
  min-width: 820px;
}

.competence-matrix.hide-required-column .competence-matrix-head,
.competence-matrix.hide-required-column .competence-matrix-row {
  grid-template-columns: minmax(220px, 1.42fr) minmax(92px, 0.46fr) minmax(68px, 0.3fr) minmax(62px, 0.28fr) minmax(150px, 0.72fr) minmax(112px, 0.5fr);
  min-width: 720px;
}

.competence-matrix-head:has(+ .competence-matrix-row.with-evidence-action),
.competence-matrix-row.with-evidence-action {
  grid-template-columns: minmax(200px, 1.25fr) minmax(88px, 0.44fr) minmax(62px, 0.31fr) minmax(62px, 0.31fr) minmax(58px, 0.3fr) minmax(150px, 0.72fr) minmax(96px, 0.46fr) minmax(112px, 0.54fr);
  min-width: 900px;
}

.competence-matrix.hide-required-column .competence-matrix-head:has(+ .competence-matrix-row.with-evidence-action),
.competence-matrix.hide-required-column .competence-matrix-row.with-evidence-action {
  grid-template-columns: minmax(200px, 1.25fr) minmax(88px, 0.44fr) minmax(62px, 0.31fr) minmax(58px, 0.3fr) minmax(150px, 0.72fr) minmax(96px, 0.46fr) minmax(112px, 0.54fr);
  min-width: 810px;
}

.evidence-submit-action {
  min-width: 118px;
  min-height: 34px;
  border-color: rgba(37, 99, 235, 0.32);
  color: #7d3900;
  background: #fff7f0;
}

.competence-matrix-head {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding: 6px 10px;
  background: #f8fafc;
}

.competence-matrix-row {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  min-height: 30px;
  padding: 4px 10px;
  background: var(--white);
  text-align: left;
}

.competence-matrix-row:last-child {
  border-bottom: 0;
}

.competence-matrix-head > span:first-child,
.competence-matrix-row .matrix-discipline {
  position: sticky;
  left: 0;
  z-index: 2;
  border-radius: 0;
  background: #fff;
}

.competence-matrix-head > span:first-child {
  background: #f8fafc;
}

.competence-matrix-row .matrix-discipline {
  background: var(--white);
}

.matrix-discipline-button {
  display: inline-flex;
  justify-content: flex-start;
  width: 100%;
  border: 0;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.op-scope .competence-matrix-head > span:first-child,
.op-scope .competence-matrix-row .matrix-discipline {
  justify-self: stretch;
  text-align: left;
}

.op-scope .competence-matrix-row .matrix-discipline-button {
  justify-content: flex-start;
  min-height: 0;
  padding: 0;
  text-align: left;
}

.matrix-discipline-button:hover {
  color: var(--orange);
}

.competence-matrix-row .op-status {
  justify-self: end;
}

.competence-matrix-row > span,
.competence-matrix-row .competency-currency-cell {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.competence-matrix-row > span:nth-of-type(1),
.competence-matrix-row > span:nth-of-type(2),
.competence-matrix-row > span:nth-of-type(3),
.competence-matrix-row > span:nth-of-type(4) {
  font-variant-numeric: tabular-nums;
  justify-self: center;
  text-align: center;
}

.competence-matrix-head > span:nth-child(n+2):nth-child(-n+5) {
  justify-self: center;
  text-align: center;
}

.competence-matrix-head > span:last-child {
  justify-self: end;
  text-align: right;
}

.competence-matrix-row small {
  display: block;
  margin-top: 1px;
  font-size: 11px;
}

.competency-currency-cell strong {
  color: var(--ink);
}

.currency-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 3px;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.currency-status.green {
  border: 1px solid #2f7d32;
  background: #f0f9eb;
  color: #245c18;
}

.currency-status.orange {
  border: 1px solid rgba(37, 99, 235, 0.42);
  background: #fff7f0;
  color: #8a3b00;
}

.currency-status.red {
  border: 1px solid rgba(220, 38, 38, 0.32);
  background: #fff;
  color: #991b1b;
}

.currency-status.grey {
  border: 1px solid var(--line);
  background: #f6f8fb;
  color: var(--muted);
}

.evidence-submission-page {
  display: grid;
  gap: 18px;
}

.evidence-submit-panel {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.linked-competency-review-list {
  display: grid;
  gap: 12px;
}

.linked-competency-review-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfe;
}

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

.linked-competency-review-card strong,
.linked-competency-review-card span {
  display: block;
}

.linked-competency-review-card span {
  color: var(--muted);
  font-size: 12px;
}

.linked-competency-review-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.linked-competency-review-card select,
.linked-competency-review-card textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px 12px;
  color: var(--ink);
  font: inherit;
  text-transform: none;
}

.competency-evidence-detail-page {
  display: grid;
  gap: 18px;
}

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

.competency-detail-card {
  display: grid;
  align-content: start;
  gap: 14px;
}

.level-expectations-card {
  grid-column: 1 / -1;
}

.competency-detail-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.competency-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.competency-detail-stats span,
.expectation-chip-list span {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--muted);
  background: #fbfcfe;
  font-size: 12px;
  font-weight: 800;
}

.competency-detail-stats strong {
  color: var(--ink);
  font-size: 15px;
}

.expectation-list,
.level-expectation-grid,
.readiness-checklist,
.expectation-chip-list {
  display: grid;
  gap: 8px;
}

.level-expectation-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.level-expectation-card {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.level-expectation-card span {
  color: var(--orange);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.level-expectation-card strong {
  color: var(--ink);
  font-size: 14px;
}

.level-expectation-card p {
  color: var(--muted);
  font-size: 12px;
}

.expectation-list p,
.readiness-checklist label {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fbfcfe;
}

.expectation-list strong,
.readiness-checklist label {
  color: var(--ink);
  font-size: 13px;
}

.readiness-checklist label {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 800;
}

.readiness-checklist input {
  width: 16px;
  height: 16px;
  accent-color: var(--orange);
}

.expectation-chip-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.warning-list p {
  border-color: #f0a15d;
  background: #fff7f0;
}

.evidence-workflow-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.evidence-workflow-strip span {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  background: #fbfcfe;
  font-size: 12px;
  font-weight: 800;
}

.evidence-workflow-strip strong {
  color: var(--orange);
  font-size: 20px;
}

.evidence-review-queue {
  grid-column: 1 / -1;
}

.evidence-review-list {
  display: grid;
  gap: 12px;
}

.evidence-review-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfe;
}

.evidence-review-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.evidence-review-card h4,
.evidence-review-card p {
  margin: 0;
}

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

.evidence-review-card dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.evidence-review-card dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-weight: 800;
}

.holding-queue-note {
  border: 1px solid rgba(37, 99, 235, 0.28);
  border-radius: 8px;
  padding: 10px 12px;
  color: #7d3900;
  background: #fff7f0;
  font-size: 13px;
  line-height: 1.45;
}

.evidence-decision-log {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.evidence-decision-log header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.evidence-decision-log h4 {
  margin: 0;
  color: var(--ink);
}

.evidence-decision-log header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.evidence-decision-table {
  display: grid;
  gap: 6px;
  overflow-x: auto;
}

.evidence-decision-head,
.evidence-decision-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.25fr) minmax(120px, 0.6fr) minmax(120px, 0.55fr) minmax(140px, 0.65fr) minmax(260px, 1.2fr);
  gap: 8px;
  align-items: center;
  min-width: 940px;
}

.evidence-decision-head {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.evidence-decision-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--white);
}

.evidence-decision-row strong {
  color: var(--ink);
}

.evidence-decision-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.evidence-review-workspace {
  display: grid;
  gap: 18px;
}

.evidence-review-workspace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.evidence-review-detail-card {
  display: grid;
  gap: 14px;
}

.evidence-review-detail-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.evidence-review-detail-card dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.evidence-review-detail-card dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-weight: 800;
}

.competence-framework-panel {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.competence-framework-panel header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.competence-framework-panel h3 {
  margin: 0 0 6px;
}

.competence-framework-table {
  display: grid;
  gap: 8px;
  overflow-x: auto;
}

.competence-framework-head,
.competence-framework-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(170px, 1fr) minmax(145px, 0.8fr) minmax(190px, 1.1fr) minmax(160px, 0.85fr) minmax(150px, 0.8fr) minmax(175px, 0.9fr) minmax(82px, 0.45fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.competence-framework-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.competence-framework-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.competence-framework-row strong {
  color: var(--ink);
}

.competence-framework-row small {
  color: var(--muted);
}

.competence-framework-row select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 10px;
  color: var(--ink);
  background: var(--white);
}

.competence-framework-row select:disabled {
  color: var(--muted);
  background: #eef2f6;
  cursor: not-allowed;
}

.framework-select-label,
.framework-rule-controls,
.framework-checkbox-label {
  display: grid;
  gap: 6px;
}

.framework-checkbox-label {
  grid-template-columns: auto 1fr;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.framework-checkbox-label input {
  width: 16px;
  height: 16px;
  accent-color: var(--delta-orange);
}

.framework-checkbox-label input:disabled + span {
  opacity: 0.55;
}

.framework-group {
  display: grid;
  gap: 8px;
}

.framework-group > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fafc;
}

.framework-group h4 {
  margin: 0;
  color: var(--ink);
}

.framework-detail-panel .level-expectations-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfe;
}

.qualification-framework-table {
  display: grid;
  gap: 8px;
  overflow-x: auto;
}

.qualification-framework-head,
.qualification-framework-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(145px, 0.7fr) minmax(260px, 1.2fr) minmax(135px, 0.7fr) minmax(190px, 0.9fr) minmax(135px, 0.7fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.qualification-framework-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.qualification-framework-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.qualification-framework-row strong {
  color: var(--ink);
}

.qualification-framework-row small {
  color: var(--muted);
}

.qualification-framework-row .status-pill {
  justify-self: start;
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 11px;
}

.qualification-rule-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.qualification-rule-stack em {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px;
  background: var(--white);
  color: var(--ink);
  font-style: normal;
}

.qualification-rule-stack b {
  font-size: 11px;
  color: var(--muted);
}

.matrix-discipline {
  color: var(--ink);
  font-weight: 900;
  text-align: left;
}

.assessment-list,
.evidence-list,
.qualification-review-list,
.progression-checklist {
  display: grid;
  gap: 10px;
}

.evidence-register-panel {
  gap: 18px;
}

.evidence-register-panel > header {
  align-items: start;
}

.evidence-register-panel > header h3 {
  margin-bottom: 4px;
}

.evidence-register-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.evidence-register-summary span {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
  color: var(--muted);
  font-size: 12px;
}

.evidence-register-summary strong {
  color: var(--ink);
  font-size: 22px;
}

.evidence-register-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.evidence-register-filter-row button {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 10px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.evidence-register-filter-row button span {
  margin-left: 6px;
  color: var(--muted);
}

.evidence-register-filter-row button.active {
  border-color: rgba(37, 99, 235, 0.4);
  background: #fff7f0;
  color: #8a3b00;
}

.evidence-register-filter-row button.active span {
  color: #8a3b00;
}

.evidence-register-table {
  display: grid;
  gap: 8px;
}

.evidence-register-head,
.evidence-register-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) minmax(190px, 0.86fr) minmax(110px, 0.5fr) minmax(120px, 0.55fr) minmax(110px, 0.48fr);
  gap: 10px;
  align-items: center;
}

.evidence-register-head {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.evidence-register-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.evidence-register-row strong,
.evidence-register-row small,
.evidence-register-row p {
  display: block;
}

.evidence-register-row small,
.evidence-register-row p {
  color: var(--muted);
}

.evidence-register-row p {
  margin: 5px 0 0;
  line-height: 1.45;
}

.linked-evidence-outcomes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.evidence-review-outcome {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  border: 1px solid #cfe5c5;
  border-radius: 8px;
  padding: 9px 10px;
  background: #f4fbf1;
  color: #245c18;
}

.evidence-review-outcome strong,
.evidence-review-outcome span,
.evidence-review-outcome em {
  display: block;
}

.evidence-review-outcome strong {
  font-size: 12px;
}

.evidence-review-outcome span {
  color: #245c18;
  font-size: 12px;
  font-weight: 800;
}

.evidence-review-outcome em {
  color: #38632e;
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.competency-evidence-history-list {
  display: grid;
  gap: 10px;
}

.competency-evidence-history-card {
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

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

.competency-evidence-history-card strong,
.competency-evidence-history-card span,
.competency-evidence-history-card p {
  display: block;
}

.competency-evidence-history-card header strong {
  color: var(--ink);
  font-size: 14px;
}

.competency-evidence-history-card header span,
.competency-evidence-history-card p {
  color: var(--muted);
  font-size: 12px;
}

.competency-evidence-history-card p {
  margin: 0;
  line-height: 1.45;
}

.qualification-gate-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.qualification-gate-summary span {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  background: #fbfcfe;
}

.qualification-gate-summary strong {
  color: var(--ink);
  font-size: 20px;
}

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

.qualification-category-section {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.qualification-category-section > header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.qualification-category-section h4 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
}

.qualification-category-section > header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.qualification-matrix {
  display: grid;
  gap: 6px;
  overflow-x: auto;
}

.qualification-matrix-head,
.qualification-matrix-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.25fr) minmax(110px, 0.5fr) minmax(190px, 0.9fr) minmax(150px, 0.7fr) minmax(180px, 0.8fr);
  gap: 8px;
  align-items: center;
  min-width: 880px;
}

.qualification-matrix-head {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.qualification-matrix-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 46px;
  padding: 8px 10px;
  background: var(--white);
}

.qualification-matrix-row .status-pill {
  border-radius: 7px;
  justify-self: start;
  padding: 4px 8px;
  font-size: 11px;
}

.qualification-matrix-row small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
}

.qualification-matrix-row .table-action {
  justify-self: start;
}

.assessment-row,
.evidence-row,
.qualification-review-row,
.progression-checklist p {
  display: grid;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.assessment-row {
  grid-template-columns: minmax(0, 1fr) auto 64px;
}

.evidence-row {
  grid-template-columns: 132px minmax(0, 1fr) auto;
}

.qualification-review-row {
  grid-template-columns: minmax(0, 1fr) auto minmax(180px, auto) auto;
}

.qualification-gate-cell {
  display: grid;
  justify-items: start;
  gap: 4px;
}

.qualification-gate-cell small {
  color: var(--muted);
  font-size: 11px;
}

.assessment-row strong,
.evidence-row strong,
.qualification-review-row strong,
.progression-checklist strong {
  color: var(--ink);
}

.assessment-row p {
  margin: 4px 0 0;
}

.assessment-row em,
.evidence-row > span {
  color: var(--orange);
  font-style: normal;
  font-weight: 900;
}

.progression-checklist {
  margin-top: 14px;
}

.progression-checklist p {
  grid-template-columns: 72px minmax(0, 1fr);
  margin: 0;
}

.empty-state {
  margin: 0;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfe;
}

.my-actions-panel {
  grid-column: 1 / -1;
  border-color: rgba(37, 99, 235, 0.34);
}

.attention-required-card {
  grid-column: 1 / -1;
  border-color: rgba(37, 99, 235, 0.34);
}

.instruction-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 110px 140px 120px 190px 132px;
  gap: 14px;
  align-items: center;
}

.instruction-grid-head {
  padding: 14px 18px;
  color: #172335;
  background: #fbfcfe;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.instruction-row {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.instruction-name {
  display: flex;
  align-items: center;
  gap: 13px;
}

.instruction-name h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.instruction-name p {
  margin: 0;
  color: var(--muted);
}

.locked-state {
  max-width: 620px;
  padding: 36px;
}

.locked-state h2 {
  margin: 14px 0 10px;
  font-size: 28px;
}

.lock-badge {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 13px;
  border-radius: 7px;
  color: #7d3900;
  background: #ffe4ce;
  font-weight: 800;
}

.mobile-nav {
  display: none;
}

@media (max-width: 1080px) {
  .front-screen {
    grid-template-columns: 1fr;
  }

  .front-tiles {
    align-self: stretch;
  }

  .stats-grid,
  .card-grid,
  .safety-card-grid,
  .operations-section-grid,
  .quiz-level-grid,
  .games-secondary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operations-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .compiler-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .training-path,
  .quiz-hero,
  .quiz-setup,
  .training-dashboard-grid,
  .role-dashboard-grid,
  .manager-grid,
  .manager-detail-grid,
  .engineer-focus-grid,
  .evidence-review-workspace-grid,
  .competency-detail-grid,
  .scheduling-layout,
  .operations-reports-page,
  .training-completion-body,
  .profile-summary,
  .competency-panel,
  .competence-passport-hero,
  .module-detail-hero,
  .module-detail-grid {
    grid-template-columns: 1fr;
  }

  .coshh-sds-metrics,
  .coshh-sds-layout,
  .coshh-sds-phase-grid {
    grid-template-columns: 1fr;
  }

  .coshh-sds-register {
    overflow-x: auto;
  }

  .coshh-sds-table-head,
  .coshh-sds-row {
    min-width: 980px;
  }

  .passport-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-summary > div:first-child,
  .competency-panel > div:first-child {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-right: 0;
    padding-bottom: 18px;
  }

  .module-detail-metrics,
  .module-visual,
  .module-level-control {
    grid-column: auto;
    grid-row: auto;
  }

  .module-level-control {
    max-width: none;
    justify-self: stretch;
  }

  .sim-admin-tools,
  .simulator-board,
  .question-dock {
    grid-template-columns: 1fr;
  }

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

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

  .skills-gap-card-grid {
    grid-template-columns: 1fr;
  }

  .training-nav-grid,
  .competence-category-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recent-activity-card {
    grid-column: auto;
  }

  .guide-toolbar,
  .instruction-hero {
    grid-template-columns: 1fr;
  }

  .product-library-hero {
    flex-direction: column;
  }

  .product-library-summary {
    min-width: 0;
  }

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

  .product-library-list {
    overflow-x: auto;
  }

  .product-library-list-head,
  .product-library-list-row {
    min-width: 980px;
  }

  .product-detail-hero,
  .product-detail-grid {
    grid-template-columns: 1fr;
  }

  .product-detail-actions {
    justify-content: flex-start;
  }

  .guide-row {
    grid-template-columns: minmax(0, 1fr) 120px;
  }

  .instruction-grid {
    grid-template-columns: minmax(240px, 1fr) 96px 120px;
  }

  .instruction-grid-head span:nth-child(4),
  .instruction-grid-head span:nth-child(5),
  .instruction-row > span:nth-of-type(2),
  .instruction-row > span:nth-of-type(3) {
    display: none;
  }

  .guide-row > span:nth-of-type(2),
  .guide-row > span:nth-of-type(3),
  .guide-row > span:nth-of-type(4) {
    display: none;
  }

  .topbar {
    display: grid;
  }

  .topbar-actions {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .skills-gap-summary-strip,
  .skills-gap-insight-meta {
    grid-template-columns: 1fr;
  }

  .skills-gap-insight-card header {
    display: grid;
  }

  .training-nav-grid,
  .competence-category-strip {
    grid-template-columns: 1fr;
  }

  .competence-readiness-strip {
    grid-template-columns: 1fr;
  }

  .competence-matrix-panel .competence-category-section__header,
  .competence-attention-layer__header,
  .competence-attention-item,
  .competence-evidence-launcher {
    display: grid;
  }

  .competence-attention-item {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .competence-attention-item__actions {
    justify-content: flex-start;
  }

  .competence-attention-item__main {
    display: grid;
    gap: 2px;
  }

  .competence-evidence-launcher {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .competence-category-toggle {
    width: 100%;
  }

  .training-nav-card {
    min-height: 132px;
  }

  .product-library-search,
  .product-library-selects,
  .product-library-grid {
    grid-template-columns: 1fr;
  }

  .product-library-view-toggle {
    justify-content: flex-start;
  }

  .product-library-card-top {
    grid-template-columns: 1fr;
  }

  .product-library-visual {
    min-height: 86px;
  }

  .product-library-thumb,
  .product-library-thumb img {
    min-height: 96px;
  }

  .product-detail-related-row {
    grid-template-columns: 1fr;
  }

  .product-library-specs {
    grid-template-columns: 1fr;
  }

  .coshh-sds-hero,
  .coshh-sds-form header,
  .coshh-sds-controls header,
  .coshh-sds-register header,
  .coshh-sds-roadmap header {
    display: grid;
  }

  .coshh-sds-form-grid {
    grid-template-columns: 1fr;
  }

  .competence-matrix {
    overflow-x: visible;
  }

  .competence-matrix-head,
  .qualification-matrix-head {
    display: none;
  }

  .competence-matrix-row,
  .qualification-matrix-row {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .competence-matrix-row .matrix-discipline,
  .qualification-matrix-row .matrix-discipline {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
    font-size: 17px;
  }

  .competence-matrix-row > span {
    display: grid;
    gap: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px;
    background: #fbfcfe;
  }

  .competence-matrix-row > span::before {
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .competence-matrix-row > span:nth-of-type(1)::before {
    content: "Current";
  }

  .competence-matrix-row > span:nth-of-type(2)::before {
    content: "Required";
  }

  .competence-matrix-row > span:nth-of-type(3)::before {
    content: "Self";
  }

  .competence-matrix-row > span:nth-of-type(4)::before {
    content: "Manager";
  }

  .competence-matrix-row > span:nth-of-type(5)::before {
    content: "Evidence";
  }

  .competence-matrix-row > span:nth-of-type(6) {
    grid-column: 1 / -1;
  }

  .competence-matrix-row > span:nth-of-type(6)::before {
    content: "Review";
  }

  .competence-matrix-row .status-pill {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .passport-hero-stats,
  .assessment-row,
  .evidence-row,
  .qualification-review-row,
  .progression-checklist p {
    grid-template-columns: 1fr;
  }

  .competence-passport-hero h2 {
    font-size: 28px;
  }

  .document-detail-hero,
  .document-detail-grid {
    grid-template-columns: 1fr;
  }

  .document-detail-hero {
    display: grid;
  }

  .document-detail-actions {
    justify-content: flex-start;
  }

  .detail-list {
    grid-template-columns: 1fr;
  }

  body {
    background: var(--soft);
  }

  .front-screen {
    min-height: auto;
    padding: 14px;
    gap: 14px;
  }

  .front-panel {
    min-height: 500px;
    padding: 24px;
  }

  .front-copy h1 {
    font-size: 38px;
  }

  .front-copy p {
    font-size: 16px;
  }

  .app-screen {
    display: block;
    background: var(--soft);
  }

  .sidebar {
    min-height: 0;
    position: static;
    display: block;
    padding: 18px 16px 0;
  }

  .sidebar .brand-mark,
  .side-nav {
    display: none;
  }

  .profile-card {
    margin: 0;
  }

  .content-wrap {
    padding: 22px 16px 98px;
    max-width: 100%;
  }

  .topbar {
    color: var(--ink);
    margin-bottom: 18px;
  }

  .topbar h1 {
    font-size: 30px;
  }

  .topbar-actions {
    grid-template-columns: 1fr;
  }

  .stats-grid,
  .card-grid,
  .role-dashboard-grid,
  .safety-card-grid,
  .qualification-gate-summary,
  .competency-detail-stats,
  .expectation-chip-list,
  .level-expectation-grid,
  .quiz-level-grid,
  .quiz-setup,
  .engineer-cards,
  .manager-metrics,
  .manager-grid,
  .training-completion-body,
  .career-path,
  .document-entry-form .quiz-admin-form,
  .game-launcher-grid,
  .games-secondary-grid,
  .module-detail-metrics,
  .module-tabs,
  .module-progress-layout {
    grid-template-columns: 1fr;
  }

  .training-dashboard-header {
    display: grid;
  }

  .manager-hero {
    display: grid;
  }

  .training-dashboard-header h2,
  .manager-hero h2 {
    font-size: 30px;
  }

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

  .training-dashboard-panel,
  .engineer-strip,
  .training-dashboard-header,
  .manager-hero,
  .manager-metric,
  .manager-panel {
    box-shadow: none;
  }

  .manager-alert {
    min-width: 0;
  }

  .manager-metric {
    grid-template-columns: 54px minmax(0, 1fr);
    min-height: 124px;
  }

  .engineer-overview-head {
    display: none;
  }

  .engineer-overview-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 0;
  }

  .mini-ring {
    width: auto;
    height: auto;
    min-height: 32px;
    border-radius: 7px;
  }

  .manager-skill-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .manager-skill-row em {
    grid-column: 2;
  }

  .qualification-link-row {
    grid-template-columns: 1fr;
  }

  .operations-reports-page .scheduling-filter-panel {
    position: static;
  }

  .qualification-review-row {
    grid-template-columns: 1fr;
  }

  .qualification-gate-cell {
    justify-items: start;
  }

  .audit-score-row,
  .audit-topic-row,
  .audit-overview-summary {
    grid-template-columns: 1fr;
  }

  .audit-score-row em,
  .audit-topic-row em {
    text-align: left;
  }

  .ack-summary,
  .ack-alert-list div {
    grid-template-columns: 1fr;
  }

  .skill-row {
    grid-template-columns: 1fr;
    gap: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
  }

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

  .assigned-module-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .assigned-module-row em {
    grid-column: 2;
  }

  .compact-career-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card,
  .data-panel,
  .safety-category-card,
  .module-card,
  .module-detail-hero,
  .module-panel,
  .module-next,
  .game-launcher-card,
  .quiz-level-card,
  .training-path,
  .quiz-hero,
  .quiz-setup,
  .quiz-topics,
  .sim-admin-tools,
  .schematic-panel,
  .cause-effect-panel,
  .streak-panel,
  .leaderboard-panel,
  .awards-panel,
  .manager-hero,
  .manager-metric,
  .manager-panel,
  .locked-state {
    background: linear-gradient(160deg, rgba(13, 36, 54, 0.96), rgba(8, 24, 39, 0.96));
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
  }

  .guide-toolbar,
  .safety-register,
  .guide-side,
  .guide-list,
  .instruction-hero,
  .instruction-register {
    background: linear-gradient(160deg, rgba(13, 36, 54, 0.96), rgba(8, 24, 39, 0.96));
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.12);
  }

  .guide-filters,
  .guide-row,
  .guide-row-head,
  .safety-register > header,
  .guide-list > header,
  .instruction-register > header,
  .instruction-grid {
    grid-template-columns: 1fr;
  }

  .safety-category-card .tile-icon,
  .guide-side button {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--white);
  }

  .guide-row {
    grid-template-columns: minmax(0, 1fr);
    color: var(--white);
  }

  .guide-row-head {
    display: none;
  }

  .safety-category-card small {
    min-height: 0;
    color: #b9c7d6;
  }

  .safety-register > header > span {
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
  }

  .career-path article {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
  }

  .module-detail-copy {
    grid-template-columns: 1fr;
  }

  .module-detail-metrics {
    border-top-color: rgba(255, 255, 255, 0.12);
  }

  .module-detail-metrics span {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .module-detail-metrics span:last-child {
    border-bottom: 0;
  }

  .module-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }

  .module-tabs button {
    min-height: 48px;
    color: #b9c7d6;
  }

  .learn-row,
  .topic-row {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
  }

  .progress-ring {
    background:
      radial-gradient(circle at center, rgba(8, 24, 39, 0.98) 0 53%, transparent 54%),
      conic-gradient(var(--orange) var(--progress), rgba(255, 255, 255, 0.14) 0);
  }

  .progress-ring strong,
  .progress-ring span,
  .module-next h3 {
    color: var(--white);
  }

  .module-next {
    display: grid;
  }

  .back-button {
    color: var(--white);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
  }

  .leaderboard-row,
  .award-row {
    border-color: rgba(255, 255, 255, 0.12);
  }

  .schematic-canvas {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
      linear-gradient(0deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
      rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.14);
  }

  .question-dock {
    bottom: 82px;
    color: var(--white);
    background: rgba(8, 24, 39, 0.96);
    border-color: rgba(255, 255, 255, 0.14);
  }

  .cause-effect-table th {
    color: var(--white);
    background: rgba(255, 255, 255, 0.06);
  }

  .cause-effect-table th,
  .cause-effect-table td {
    border-color: rgba(255, 255, 255, 0.12);
  }

  .guide-row > .badge,
  .guide-row > span,
  .guide-row > .table-actions {
    grid-column: 2;
  }

  .upload-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(37, 99, 235, 0.48);
    color: var(--white);
  }

  .instruction-grid-head {
    display: none;
  }

  .instruction-row {
    color: var(--white);
  }

  .instruction-name p {
    color: #b9c7d6;
  }

  .card strong,
  .safety-category-card strong,
  .safety-register h2,
  .module-card h3,
  .game-subsection h2,
  .quiz-setup h2,
  .quiz-level-card h2,
  .streak-panel h2,
  .leaderboard-panel h2,
  .awards-panel h2,
  .sim-admin-tools h2,
  .schematic-panel h2,
  .cause-effect-panel h2,
  .question-dock h2,
  .module-detail-copy h2,
  .module-panel h3,
  .training-path h2,
  .quiz-hero h2,
  .quiz-topics h2,
  .locked-state h2 {
    color: var(--white);
  }

  .card p,
  .safety-category-card small,
  .module-card p,
  .game-subsection p,
  .quiz-setup p,
  .training-path p,
  .quiz-hero p,
  .quiz-level-card p,
  .quiz-card-meta span,
  .quiz-topics p,
  .leaderboard-row p,
  .award-row p,
  .sim-admin-tools p,
  .schematic-panel p,
  .cause-effect-panel p,
  .question-dock p,
  .module-detail-copy p,
  .module-panel p,
  .learn-row small,
  .topic-row small,
  .module-next p,
  .guide-toolbar p,
  .guide-list p,
  .guide-row-main p {
    color: #b9c7d6;
  }

  .data-table,
  .data-table thead,
  .data-table tbody,
  .data-table th,
  .data-table td,
  .data-table tr {
    display: block;
  }

  .data-table thead {
    display: none;
  }

  .data-table tr {
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .data-table td {
    padding: 8px 0;
    border: 0;
  }

  .data-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: #aebdcb;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .panel-footer {
    display: grid;
  }

  .mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(8, 24, 39, 0.97);
    backdrop-filter: blur(12px);
  }

  .mobile-nav-item {
    min-height: 58px;
    display: grid;
    place-items: center;
    gap: 2px;
    color: #b7c3d0;
  }

  .mobile-nav-item.active {
    color: var(--orange);
  }

  .mobile-nav-item.locked {
    opacity: 0.38;
  }
}

/* Light mode alignment */
.front-screen {
  background:
    linear-gradient(120deg, rgba(37, 99, 235, 0.08), transparent 42%),
    radial-gradient(circle at 78% 20%, rgba(52, 151, 178, 0.12), transparent 30%),
    var(--soft);
}

.front-panel {
  color: var(--ink);
  background: var(--white);
  border-color: rgba(220, 227, 236, 0.86);
}

.training-dashboard,
.manager-overview {
  color: var(--ink);
}

.training-dashboard-header,
.engineer-strip,
.training-dashboard-panel,
.manager-hero,
.manager-metric,
.manager-panel,
.module-detail-hero,
.quiz-score-card {
  color: var(--ink);
  background: var(--white);
  border-color: rgba(220, 227, 236, 0.86);
  box-shadow: var(--shadow);
}

.training-dashboard-header h2,
.training-dashboard-panel h3,
.manager-hero h2,
.manager-panel h3,
.module-detail-copy h2,
.manager-metric strong,
.profile-summary h3,
.compact-career-path strong,
.assigned-module-row strong,
.activity-list strong,
.engineer-overview-row strong,
.manager-skill-row strong,
.quiz-score-card strong,
.quiz-score {
  color: var(--ink);
}

.training-dashboard-header p,
.training-dashboard-panel p,
.training-dashboard-panel small,
.training-dashboard-panel li,
.training-dashboard-panel span,
.manager-hero p,
.manager-panel p,
.manager-panel small,
.manager-panel span,
.module-detail-copy p,
.quiz-score-card p,
.engineer-card small,
.assigned-module-row small,
.activity-list span {
  color: var(--muted);
}

.notification-pill,
.manager-alert,
.engineer-card,
.assigned-module-row,
.compact-career-path div,
.learn-row,
.topic-row {
  color: var(--ink);
  background: #fbfcfe;
  border-color: var(--line);
}

.notification-pill span,
.manager-alert span,
.engineer-avatar,
.assigned-module-row > span,
.compact-career-path span,
.topic-row > span:first-child {
  color: var(--white);
}

.profile-summary > div:first-child,
.competency-panel > div:first-child,
.engineer-overview-row,
.activity-list p {
  border-color: var(--line);
}

.competency-ring,
.progress-ring,
.manager-donut {
  background:
    radial-gradient(circle at center, var(--white) 0 58%, transparent 59%),
    conic-gradient(var(--orange) var(--progress), #d8e0e9 0);
}

.manager-donut {
  background:
    radial-gradient(circle at center, var(--white) 0 56%, transparent 57%),
    conic-gradient(var(--green) 0 68%, #2e90e5 68% 90%, var(--orange) 90% 100%);
}

.competency-ring strong,
.progress-ring strong,
.manager-donut strong {
  color: var(--ink);
}

.module-detail-hero {
  color: var(--ink);
}

.module-detail-metrics {
  border-top-color: var(--line);
}

.module-detail-metrics span {
  color: var(--muted);
  border-right-color: var(--line);
}

  .module-detail-metrics strong {
    color: var(--ink);
  }

  .module-level-control {
    background: #fbfcfe;
    border-color: var(--line);
  }

  .module-level-control label {
    color: var(--muted);
  }

  .module-level-control select {
    color: var(--ink);
    background: var(--white);
    border-color: var(--line);
  }

  .module-level-control small {
    color: var(--muted);
  }

  .building-graphic {
  border-color: rgba(16, 32, 51, 0.18);
  background:
    linear-gradient(90deg, transparent 49%, rgba(16, 32, 51, 0.14) 50%, transparent 51%),
    linear-gradient(0deg, transparent 48%, rgba(16, 32, 51, 0.14) 50%, transparent 52%),
    rgba(255, 255, 255, 0.56);
}

.module-visual {
  background:
    linear-gradient(90deg, rgba(16, 32, 51, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(16, 32, 51, 0.06) 1px, transparent 1px),
    linear-gradient(145deg, rgba(52, 151, 178, 0.12), rgba(37, 99, 235, 0.08)),
    #eef4f8;
}

.manager-legend span,
.engineer-overview-head,
.engineer-overview-row,
.manager-skill-row em,
.compliance-chart div {
  color: var(--muted);
}

.compliance-chart {
  border-bottom-color: var(--line);
}

.manager-skill-track,
.skill-track {
  background: #d8e0e9;
}

.mini-ring {
  color: var(--white);
}

.play-button {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(16, 32, 51, 0.14);
}

.academy-reader .module-detail-hero {
  min-height: auto;
}

.academy-reader-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.academy-reader-metrics .op-stat-cell,
.academy-reader-metrics span {
  min-width: 0;
}

.academy-reader-metrics strong {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.08;
  overflow-wrap: anywhere;
  word-break: normal;
}

.academy-course-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.academy-course-progress strong {
  color: var(--ink);
}

.academy-progress-bar {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #d8e0e9;
}

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

.academy-reader-status {
  justify-self: start;
  margin-top: 6px;
}

.academy-reader-contents {
  gap: 14px;
}

.academy-reader-tools {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.academy-reader-contents__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.academy-reader-contents__item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 58px;
  text-align: left;
}

.academy-reader-contents__item span,
.academy-reader-section__index {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--white);
  background: var(--navy);
  font-size: 13px;
  font-weight: 800;
}

.academy-reader-contents__item strong,
.academy-reader-section summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.academy-reader-contents__item.active {
  border-color: rgba(37, 99, 235, 0.44);
  background: #eef5ff;
}

.academy-reader-progress {
  position: sticky;
  top: 8px;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(120px, 1fr) minmax(0, auto);
  gap: 10px;
  align-items: center;
  padding: 12px;
}

.academy-reader-progress strong {
  text-align: center;
}

.academy-reader-sections {
  display: grid;
  gap: 12px;
}

.academy-reader-section {
  padding: 0;
  overflow: hidden;
}

.academy-reader-section summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 24px;
  gap: 12px;
  align-items: center;
  padding: 16px;
  cursor: pointer;
  list-style: none;
}

.academy-reader-section summary::-webkit-details-marker {
  display: none;
}

.academy-reader-section summary::after {
  content: "+";
  justify-self: end;
  color: var(--muted);
  font-weight: 900;
}

.academy-reader-section[open] summary {
  border-bottom: 1px solid var(--line);
}

.academy-reader-section[open] summary::after {
  content: "-";
}

.academy-reader-section__body {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.academy-reader-section__body ul {
  margin: 0;
}

.academy-reader-section__body .op-body {
  margin: 0;
}

.academy-reader-next-action {
  border-color: rgba(37, 99, 235, 0.26);
  background: #f7fbff;
}

/* Desktop professional polish */
.front-panel {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(215, 224, 236, 0.9);
}

.front-copy p,
.preview-access,
.login-status {
  color: var(--muted);
}

.content-wrap {
  padding: 30px 34px 42px;
}

.topbar {
  margin-bottom: 22px;
}

.topbar h1 {
  font-size: 30px;
  line-height: 1.1;
}

.stats-grid,
.manager-metrics,
.manager-grid,
.training-dashboard,
.manager-overview,
.documents-page,
.safety-page,
.document-detail-page,
.module-detail,
.games-secondary-grid {
  gap: 16px;
}

.stats-grid {
  margin-bottom: 22px;
}

.card {
  min-height: 104px;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  padding: 18px;
}

.card .metric-icon {
  width: 48px;
  height: 48px;
}

.card strong,
.manager-metric strong,
.passport-hero-stats strong {
  font-size: 28px;
}

.data-table {
  font-size: 13px;
}

.data-table th,
.data-table td {
  padding: 14px 16px;
}

.data-table th,
.competence-matrix-head,
.competence-framework-head,
.qualification-framework-head,
.compliance-register-head,
.engineer-overview-head {
  font-size: 11px;
}

.training-dashboard-panel,
.manager-hero,
.manager-metric,
.manager-panel,
.data-panel,
.safety-category-card,
.module-card,
.module-detail-hero,
.module-panel,
.module-next,
.game-launcher-card,
.quiz-level-card,
.training-path,
.quiz-hero,
.quiz-setup,
.quiz-topics,
.sim-admin-tools,
.schematic-panel,
.cause-effect-panel,
.streak-panel,
.leaderboard-panel,
.awards-panel,
.question-dock,
.quiz-round-panel,
.quiz-results-card,
.quiz-score-card {
  color: var(--ink);
  background: var(--white);
  border-color: rgba(220, 227, 236, 0.86);
  box-shadow: 0 14px 36px rgba(7, 24, 39, 0.09);
}

.training-dashboard-panel,
.manager-panel {
  padding: 18px;
}

.manager-hero,
.module-detail-hero,
.document-detail-hero {
  padding: 20px;
}

.manager-hero h2,
.training-section-header h2,
.document-detail-hero h2,
.module-detail-copy h2,
.quiz-hero h2,
.training-path h2 {
  font-size: 28px;
  line-height: 1.16;
}

.training-dashboard-panel h3,
.manager-panel h3,
.document-group h3,
.module-card h3,
.game-subsection h2,
.quiz-setup h2,
.quiz-level-card h2,
.streak-panel h2,
.leaderboard-panel h2,
.awards-panel h2,
.sim-admin-tools h2,
.schematic-panel h2,
.cause-effect-panel h2,
.question-dock h2,
.quiz-round-header h2,
.quiz-results-card h2 {
  font-size: 20px;
  line-height: 1.25;
}

.manager-metrics,
.compliance-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.director-action-metrics {
  align-items: stretch;
}

.director-action-metric {
  width: 100%;
  border: 1px solid rgba(220, 227, 236, 0.86);
  text-align: left;
}

.manager-metric {
  min-height: 124px;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
}

.metric-symbol {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  font-size: 14px;
}

.manager-metric p,
.manager-metric small,
.manager-panel p,
.manager-panel small,
.manager-panel span,
.training-dashboard-panel p,
.training-dashboard-panel small,
.training-dashboard-panel li,
.training-dashboard-panel span,
.document-group p,
.safety-category-card small,
.module-card p,
.game-subsection p,
.quiz-setup p,
.quiz-level-card p,
.quiz-card-meta span,
.quiz-topics p,
.leaderboard-row p,
.award-row p,
.sim-admin-tools p,
.schematic-panel p,
.cause-effect-panel p,
.question-dock p,
.quiz-round-header p,
.quiz-results-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.manager-panel h3,
.manager-hero h2,
.manager-metric strong,
.training-dashboard-panel h3,
.training-dashboard-panel strong,
.module-detail-copy h2,
.quiz-round-header h2,
.quiz-results-card h2,
.question-dock h2 {
  color: var(--ink);
}

.priority-filter-list {
  border-bottom-color: var(--line);
}

.priority-action-feed {
  gap: 10px;
}

.priority-action-row {
  min-height: 94px;
  gap: 12px;
  padding: 12px;
}

.manager-risk-row,
.attention-engineer-row,
.manager-skill-row,
.leaderboard-row,
.award-row,
.quiz-review-list article {
  color: var(--ink);
  background: #fbfcfe;
  border-color: var(--line);
}

.manager-risk-row strong,
.attention-engineer-row strong,
.manager-skill-row strong,
.leaderboard-row strong,
.award-row strong,
.quiz-review-list strong {
  color: var(--ink);
}

.risk-track,
.manager-skill-track,
.skill-track {
  background: #d8e0e9;
}

.priority-action-row strong {
  font-size: 14px;
}

.priority-action-main .priority-owner-type {
  color: #526171;
  background: #f1f5f9;
}

.status-definitions,
.status-definitions span {
  color: var(--muted);
}

.status-definitions strong {
  color: var(--ink);
}

.priority-action-meta {
  gap: 8px;
}

.director-priority-grid {
  display: grid;
  gap: 16px;
}

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

.overview-preview-card {
  align-content: start;
}

.overview-preview-list {
  display: grid;
  gap: 10px;
}

.overview-preview-row {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink);
  background: #fbfcfe;
  text-align: left;
}

.overview-preview-row strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

.overview-preview-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.overview-preview-row > span {
  color: var(--ink);
  font-weight: 900;
}

.overview-preview-row em {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 9px;
  min-width: 74px;
  color: var(--ink);
  background: #f8fafc;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.overview-preview-row em.green {
  border-color: #7abf62;
  color: #245c18;
  background: #f0f9eb;
}

.overview-preview-row em.orange {
  border-color: #f0a15d;
  color: #7d3900;
  background: #fff3e8;
}

.overview-preview-row em.red {
  border-color: #fecaca;
  color: #991b1b;
  background: #fff;
}

.training-activity-page {
  grid-column: 1 / -1;
  display: grid;
  gap: 16px;
}

.reference-viewer-page {
  display: grid;
  gap: 16px;
}

.reference-viewer-panel {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.reference-viewer-panel header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.reference-viewer-panel h2 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 24px;
}

.reference-viewer-panel p {
  margin: 0;
  color: var(--muted);
}

.reference-viewer-panel .primary-button,
.reference-viewer-panel .ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  text-decoration: none;
}

.compact-metrics {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.compact-metrics .manager-metric {
  min-height: 112px;
}

.reference-file-preview {
  width: 100%;
  min-height: 72vh;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.reference-preview-fallback {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 24px;
  color: var(--muted);
  background: #fbfcfe;
  text-align: center;
}

.reference-preview-fallback strong {
  color: var(--ink);
}

.reference-preview-note {
  margin: -8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 1240px) {
  .director-action-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .director-action-metric {
    min-height: 112px;
  }

  .engineer-todo-record {
    grid-template-columns: minmax(160px, 0.9fr) minmax(230px, 1fr) minmax(220px, 1.15fr) minmax(118px, 0.55fr);
  }

  .engineer-todo-record .todo-open-label {
    display: none;
  }
}

@media (max-width: 1040px) {
  .engineer-todo-record {
    grid-template-columns: 1fr;
  }

  .todo-record-counts {
    grid-template-columns: repeat(3, minmax(92px, 1fr));
  }

  .todo-record-status {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.sample-data-note {
  margin: 0;
  border: 1px solid #f0a15d;
  border-radius: 8px;
  padding: 10px 12px;
  color: #7d3900;
  background: #fff7ed;
  font-size: 13px;
  font-weight: 800;
}

.training-activity-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.activity-summary-card {
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
}

.activity-summary-card p,
.activity-summary-card small {
  margin: 0;
}

.activity-summary-card strong {
  display: block;
  margin: 4px 0;
  color: var(--ink);
  font-size: 26px;
}

.activity-register-table,
.activity-mini-table {
  display: grid;
  gap: 8px;
  overflow-x: auto;
}

.activity-register-head,
.activity-register-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 1.1fr) 92px 96px 76px 70px 88px 112px 86px;
  gap: 10px;
  align-items: center;
  min-width: 1030px;
}

.activity-register-head {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.activity-register-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink);
  background: #fbfcfe;
  text-align: left;
}

.activity-register-row strong {
  color: var(--ink);
}

.activity-register-row span {
  color: var(--muted);
  font-size: 13px;
}

.activity-register-row em,
.activity-mini-table em {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 9px;
  color: var(--ink);
  background: #f8fafc;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.activity-register-row em.green,
.activity-mini-table em.green {
  border-color: #7abf62;
  color: #245c18;
  background: #f0f9eb;
}

.activity-register-row em.orange,
.activity-mini-table em.orange {
  border-color: #f0a15d;
  color: #7d3900;
  background: #fff3e8;
}

.activity-register-row em.red,
.activity-mini-table em.red {
  border-color: #fecaca;
  color: #991b1b;
  background: #fff;
}

.training-activity-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.activity-mini-table div {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) 86px 96px 82px minmax(120px, 0.9fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.activity-mini-table strong {
  color: var(--ink);
  font-size: 14px;
}

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

.card-grid,
.safety-card-grid,
.role-dashboard-grid {
  gap: 16px;
}

.safety-category-card,
.training-nav-card {
  min-height: 142px;
  padding: 16px;
}

.safety-category-card strong,
.training-nav-card strong {
  font-size: 16px;
  line-height: 1.25;
}

.document-groups {
  gap: 24px;
}

.document-group {
  gap: 12px;
}

.document-group h3 {
  font-size: 20px;
}

.document-launch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 280px));
  gap: 16px;
  justify-content: start;
}

.document-launch-card {
  width: 100%;
  min-height: 198px;
  padding: 18px;
}

.document-launch-card strong {
  font-size: 18px;
  line-height: 1.25;
}

.document-launch-card small {
  min-height: 48px;
}

.passport-hero-stats span {
  min-height: 76px;
  padding: 10px;
}

.competence-passport-hero {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
}

.competence-passport-hero h2 {
  font-size: 30px;
}

.status-pill,
.badge,
.ack-priority,
.priority-category,
.priority-filter-list span,
.priority-action-row em,
.attention-engineer-row em,
.register-cell,
.engineer-overview-row em,
.manager-audit-engineer-card header em,
.safety-register > header > span,
.lock-badge {
  border-radius: 6px;
  border: 1px solid var(--line);
  min-height: 26px;
  padding: 5px 9px;
  color: var(--ink);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.status-pill.green,
.badge.green,
.priority-action-row em.green,
.attention-engineer-row em.green,
.register-cell.green,
.engineer-overview-row em.green,
.manager-audit-engineer-card header em.green,
.table-action.acknowledged {
  border-color: #7abf62;
  color: #245c18;
  background: #f0f9eb;
}

.status-pill.orange,
.badge.orange,
.ack-priority,
.ack-priority.important,
.priority-category,
.priority-filter-list span,
.priority-action-row em.orange,
.attention-engineer-row em.orange,
.register-cell.orange,
.engineer-overview-row em.orange,
.manager-audit-engineer-card header em.orange {
  border-color: #f0a15d;
  color: #7d3900;
  background: #fff3e8;
}

.status-pill.blue,
.badge.blue,
.ack-priority.advisory,
.safety-register > header > span {
  border-color: #8fc8dc;
  color: #145f73;
  background: #e8f6fb;
}

.status-pill.red,
.ack-priority.critical,
.priority-action-row em.red,
.attention-engineer-row em.red,
.register-cell.red,
.engineer-overview-row em.red {
  border-color: #fecaca;
  color: #991b1b;
  background: #fff;
}

.status-pill.grey {
  border-color: #cbd5e1;
  color: #526171;
  background: #e8edf3;
}

.director-action-metrics {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.director-action-metric {
  min-height: 112px;
}

@media (max-width: 1180px) {
  .competence-readiness-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .competence-matrix-scroll {
    overflow-x: visible;
  }

  .competence-matrix-head {
    display: none;
  }

  .competence-matrix-head,
  .competence-matrix-row,
  .competence-matrix.hide-required-column .competence-matrix-row,
  .competence-matrix-row.with-evidence-action,
  .competence-matrix.hide-required-column .competence-matrix-row.with-evidence-action {
    min-width: 0;
  }

  .competence-matrix-row,
  .competence-matrix.hide-required-column .competence-matrix-row,
  .competence-matrix-row.with-evidence-action,
  .competence-matrix.hide-required-column .competence-matrix-row.with-evidence-action {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 7px;
  }

  .competence-matrix-row .matrix-discipline {
    position: static;
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--line);
    padding-bottom: 5px;
    font-size: 15px;
  }

  .competence-matrix-row > span {
    display: grid;
    gap: 3px;
    align-content: center;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 5px 6px;
    background: #fbfcfe;
  }

  .competence-matrix-row > span::before {
    content: attr(data-competence-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .competence-matrix-row > .op-status {
    justify-self: start;
  }

  .competence-matrix-row .evidence-submit-action {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 760px) {
  body,
  .app-screen {
    background: var(--soft);
  }

  .content-wrap {
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }

  .screen-view.active {
    padding-bottom: 18px;
  }

  .topbar {
    color: var(--ink);
  }

  .operations-nav,
  .operations-section-grid {
    grid-template-columns: 1fr;
  }

  .card,
  .data-panel,
  .safety-category-card,
  .module-card,
  .module-detail-hero,
  .module-panel,
  .module-next,
  .game-launcher-card,
  .quiz-level-card,
  .training-path,
  .quiz-hero,
  .quiz-setup,
  .quiz-topics,
  .sim-admin-tools,
  .schematic-panel,
  .cause-effect-panel,
  .streak-panel,
  .leaderboard-panel,
  .awards-panel,
  .manager-hero,
  .manager-metric,
  .manager-panel,
  .locked-state,
  .guide-toolbar,
  .safety-register,
  .guide-side,
  .guide-list,
  .instruction-hero,
  .instruction-register {
    color: var(--ink);
    background: var(--white);
    border-color: rgba(220, 227, 236, 0.86);
    box-shadow: var(--shadow);
  }

  .back-button {
    color: var(--ink);
    background: var(--white);
    border-color: var(--line);
    box-shadow: 0 8px 20px rgba(16, 32, 51, 0.08);
  }

  .card strong,
  .safety-category-card strong,
  .safety-register h2,
  .module-card h3,
  .game-subsection h2,
  .quiz-setup h2,
  .quiz-level-card h2,
  .streak-panel h2,
  .leaderboard-panel h2,
  .awards-panel h2,
  .sim-admin-tools h2,
  .schematic-panel h2,
  .cause-effect-panel h2,
  .question-dock h2,
  .module-detail-copy h2,
  .module-panel h3,
  .training-path h2,
  .quiz-hero h2,
  .quiz-topics h2,
  .locked-state h2 {
    color: var(--ink);
  }

  .card p,
  .safety-category-card small,
  .module-card p,
  .game-subsection p,
  .quiz-setup p,
  .training-path p,
  .quiz-hero p,
  .quiz-level-card p,
  .quiz-card-meta span,
  .quiz-topics p,
  .leaderboard-row p,
  .award-row p,
  .sim-admin-tools p,
  .schematic-panel p,
  .cause-effect-panel p,
  .question-dock p,
  .module-detail-copy p,
  .module-panel p,
  .learn-row small,
  .topic-row small,
  .module-next p,
  .guide-toolbar p,
  .guide-list p,
  .guide-row-main p {
    color: var(--muted);
  }

  .mobile-nav {
    border-top-color: var(--line);
    background: rgba(255, 255, 255, 0.96);
  }

  .mobile-nav-item {
    color: var(--muted);
  }
}

/* OpsProof premium visual system pass */
.app-screen,
.content-wrap {
  background: #f8fafc;
}

.front-panel,
.front-tile,
.front-aside,
.card,
.data-panel,
.locked-state,
.hub-launch-card,
.document-launch-card,
.manager-panel,
.manager-metric,
.screen-card,
.resource-card,
.product-card,
.document-tool-card,
.tool-card,
.template-card,
.safety-register,
.guide-toolbar,
.guide-list,
.instruction-register,
.module-card,
.game-card,
.quiz-topic-card {
  border-color: rgba(226, 232, 240, 0.78);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
}

.data-panel,
.manager-panel,
.safety-register,
.instruction-register,
.guide-list {
  padding: 24px;
}

.hub-launch-card,
.document-launch-card,
.document-tool-card,
.tool-card,
.product-card {
  border-color: rgba(226, 232, 240, 0.72);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
}

.tile-icon,
.card .metric-icon,
.front-tile .tile-icon,
.safety-category-card .tile-icon,
.hub-launch-card .tile-icon,
.document-launch-card .tile-icon,
.document-tool-card .tile-icon,
.tool-card .tile-icon {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e3a8a;
}

.metric-symbol.red,
.priority-rail.red,
.risk-track i.red,
.skill-fill.red,
.skill-row i.red,
.mini-ring.red {
  background: #dc2626;
}

.status-pill.red,
.badge.red,
.ack-priority.critical,
.status-pill.overdue,
.badge.overdue,
.status-pill.rejected,
.badge.rejected,
.format-tag.overdue,
.format-tag.rejected,
.priority-tag.red,
.priority-action-row em.red,
.attention-engineer-row em.red,
.register-cell.red,
.engineer-overview-row em.red,
.overview-preview-row em.red,
.activity-register-row em.red,
.activity-mini-table em.red,
.todo-record-status em.red,
.todo-count.red,
.engineer-todo-row em.red,
.engineer-outstanding-panel > header em.red,
.compliance-register-row em.red {
  border-color: rgba(220, 38, 38, 0.34);
  color: #991b1b;
  background: #fff;
}

.priority-filter-list button.active {
  border-color: rgba(37, 99, 235, 0.65);
  color: #1e3a8a;
  background: #dbeafe;
}

.priority-filter-list span,
.priority-category {
  border-color: #bfdbfe;
  color: #1e3a8a;
  background: #eff6ff;
}

.priority-filter-list button.active span {
  color: #fff;
  background: #2563eb;
}

.primary-button,
.table-action.primary,
.orange-button {
  background: #2563eb;
  border-color: #2563eb;
}

.primary-button:hover,
.table-action.primary:hover,
.orange-button:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

/* Shared launcher cards: Resources, Operations Hub, Document Tools and Admin Panel */
.operations-section-grid,
.document-launch-grid,
.admin-launch-grid,
.compilers-page .safety-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 250px));
  gap: 16px;
  align-items: stretch;
  justify-content: start;
}

.hub-launch-card,
.operations-launch-card,
.document-launch-card,
.admin-launch-card,
.compilers-page .hub-launch-card {
  width: 100%;
  min-height: 206px;
  display: grid;
  grid-template-rows: auto auto minmax(54px, 1fr) auto;
  gap: 12px;
  align-content: start;
  padding: 18px;
  border-color: rgba(226, 232, 240, 0.82);
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
}

.admin-launch-card {
  min-height: 194px;
}

.hub-launch-card strong,
.operations-launch-card strong,
.document-launch-card strong,
.admin-launch-card strong {
  font-size: 17px;
  line-height: 1.25;
}

.hub-launch-card small,
.operations-launch-card small,
.document-launch-card small,
.admin-launch-card small {
  min-height: 0;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hub-launch-card em,
.operations-launch-card em,
.document-launch-card em,
.admin-launch-card em {
  color: #2563eb;
  font-size: 16px;
  line-height: 1.2;
}

.compilers-page .hub-launch-card .format-tag {
  width: 100%;
  justify-self: stretch;
  margin-top: -4px;
  color: #1e3a8a;
  background: #f8fafc;
  border-color: #cbd5e1;
}

.operations-section-grid .hub-launch-card > .tile-icon,
.document-launch-grid .hub-launch-card > .tile-icon,
.admin-launch-grid .hub-launch-card > .tile-icon,
.compilers-page .safety-card-grid .hub-launch-card > .tile-icon {
  display: none;
}

.hub-launch-card,
.operations-launch-card,
.document-launch-card,
.admin-launch-card,
.compilers-page .hub-launch-card {
  grid-template-rows: auto minmax(54px, 1fr) auto;
}

.hub-launch-card em,
.operations-launch-card em,
.document-launch-card em,
.admin-launch-card em {
  color: #1e3a8a;
}

.manager-metric .metric-symbol {
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.manager-metric .metric-symbol.red {
  color: #991b1b;
  background: #fff;
  border-color: rgba(220, 38, 38, 0.3);
}

.manager-metric .metric-symbol.green {
  color: #166534;
  background: #fff;
  border-color: rgba(34, 197, 94, 0.28);
}

.manager-metric .metric-symbol.blue,
.manager-metric .metric-symbol.orange {
  color: #1e3a8a;
  background: #fff;
  border-color: #dbeafe;
}

/* Top navigation SaaS layout */
.app-screen {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  overflow-x: hidden;
}

.sidebar {
  min-height: auto;
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.97);
  border-right: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.05);
}

.sidebar .brand-mark.compact .brand-logo {
  width: 132px;
}

.side-nav {
  display: flex;
  gap: 3px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}

.desktop-nav-stack {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.desktop-sidebar-shell {
  display: flex;
  gap: 7px;
  align-items: stretch;
  overflow-x: auto;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  scrollbar-width: none;
}

.desktop-sidebar-shell::-webkit-scrollbar {
  display: none;
}

.desktop-shell-group {
  min-width: max-content;
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 0 8px 0 0;
  border-right: 1px solid #e2e8f0;
}

.desktop-shell-group:last-child {
  padding-right: 0;
  border-right: 0;
}

.desktop-shell-group:not(:has(.desktop-sidebar-item:not(.hidden))) {
  display: none;
}

.desktop-shell-label {
  padding: 0 5px;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.desktop-sidebar-item.nav-item {
  min-height: 34px;
  padding: 0 9px;
  color: #334155;
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.04);
}

.desktop-sidebar-item.nav-item .tile-icon {
  display: none;
}

.desktop-sidebar-item.nav-item:not(.active):hover {
  color: #1e3a8a;
  background: #eff6ff;
}

.desktop-sidebar-item.nav-item.active {
  color: #1e3a8a;
  background: #dbeafe;
  border-color: #bfdbfe;
}

.side-nav::-webkit-scrollbar {
  display: none;
}

.nav-item {
  min-height: 36px;
  flex: 0 0 auto;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 7px;
  color: #334155;
  font-size: 13px;
  font-weight: 720;
  white-space: nowrap;
}

.nav-item .tile-icon {
  display: none;
}

.nav-item.active {
  color: #1e3a8a;
  background: #dbeafe;
  border-color: #bfdbfe;
}

.nav-item.active::before {
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
}

.nav-item.locked::after {
  display: none;
}

.profile-card {
  margin-top: 0;
  min-width: 184px;
  max-width: 198px;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  padding: 0;
  color: var(--ink);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.profile-card .avatar {
  width: 36px;
  height: 36px;
  background: #1e3a8a;
}

.profile-card strong {
  color: var(--ink);
}

.profile-card label {
  color: var(--muted);
}

.profile-card select {
  min-height: 32px;
  width: 100%;
  max-width: 158px;
}

.profile-signout {
  display: none;
}

.content-wrap {
  width: min(1540px, calc(100vw - 48px));
  margin: 0;
  padding: 24px 0 56px;
}

.content-wrap > .topbar {
  display: none;
}

/* Embedded hero metrics */
.hub-section-intro:has(+ .manager-metrics) {
  margin-bottom: 0;
  padding: 24px 24px 4px;
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.035);
}

.hub-section-intro:has(+ .manager-metrics) .badge {
  display: none;
}

.hub-section-intro + .manager-metrics {
  margin-top: -18px;
  padding: 0 24px 24px;
  border: 1px solid rgba(226, 232, 240, 0.78);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.055);
}

.hub-section-intro + .manager-metrics .manager-metric {
  min-height: 92px;
}

.manager-metric {
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.035);
}

.manager-metric p,
.manager-metric small {
  color: var(--muted);
}

.manager-metric strong {
  color: var(--ink);
}

.metric-symbol {
  border-radius: 8px;
}

/* Remove legacy high-chroma warning treatments */
.status-pill.red,
.badge.red,
.priority-tag.red,
.priority-action-row em.red,
.attention-engineer-row em.red,
.register-cell.red,
.engineer-overview-row em.red,
.overview-preview-row em.red,
.activity-register-row em.red,
.activity-mini-table em.red,
.todo-record-status em.red,
.engineer-todo-row em.red,
.engineer-outstanding-panel > header em.red,
.compliance-register-row em.red,
.overdue,
.danger,
.warning-copy {
  border-color: rgba(220, 38, 38, 0.34);
  color: #991b1b;
  background: #fff;
}

.priority-rail.red,
.status-bar.red,
.risk-track i.red,
.skill-fill.red,
.skill-row i.red,
.mini-ring.red {
  background: #dc2626;
}

.metric-symbol.purple,
.gap-icon.purple,
.manager-skill-track .purple {
  background: #475569;
}

/* Premium drilldown cleanup: live Supabase pages use these shared panels */
.admin-area-page > .back-button,
.document-admin-page > .back-button,
.screen-view > .back-button {
  width: auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  padding: 0 16px;
  color: #1e3a8a;
  background: #fff;
  border-color: #dbeafe;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
}

.admin-area-page .training-dashboard-header,
.document-admin-page .training-dashboard-header,
.admin-area-page > .data-panel:first-of-type {
  border: 1px solid rgba(226, 232, 240, 0.82);
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.045);
}

.admin-area-page .training-dashboard-header + .manager-metrics,
.document-admin-page .training-dashboard-header + .manager-metrics {
  margin-top: -18px;
  padding: 0 24px 24px;
  border: 1px solid rgba(226, 232, 240, 0.78);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.055);
}

.admin-area-page .training-dashboard-header:has(+ .manager-metrics),
.document-admin-page .training-dashboard-header:has(+ .manager-metrics) {
  margin-bottom: 0;
  padding-bottom: 22px;
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.admin-area-page .admin-tab-strip,
.document-admin-page .admin-tab-strip {
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

.admin-area-page .admin-tab-strip button,
.document-admin-page .admin-tab-strip button,
.ghost-button,
.table-action {
  border-color: #dbeafe;
  color: #1e3a8a;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.025);
}

.admin-area-page .admin-tab-strip button.active,
.document-admin-page .admin-tab-strip button.active {
  color: #1e3a8a;
  background: #dbeafe;
  border-color: #93c5fd;
}

.storage-status,
.sample-data-note {
  border-color: #dbeafe;
  color: #1e3a8a;
  background: #eff6ff;
}

.storage-status.success {
  border-color: rgba(34, 197, 94, 0.28);
  color: #166534;
  background: #f0fdf4;
}

.primary-button,
.compact-action.primary-button {
  background: #2563eb;
  color: #fff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

.primary-button:hover,
.compact-action.primary-button:hover {
  background: #1d4ed8;
}

.metric-symbol.orange {
  background: #64748b;
}

.manager-metric .metric-symbol.orange {
  color: #334155;
  background: #fff;
  border-color: #cbd5e1;
}

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

  .desktop-sidebar-shell {
    display: none;
  }

  .profile-card {
    max-width: 360px;
  }

  .hub-section-intro + .manager-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Final OpsProof colour guard: keep drilldowns out of legacy high-chroma styling */
.screen-view .status-pill.red,
.screen-view .status-pill.overdue,
.screen-view .status-pill.rejected,
.screen-view .badge.red,
.screen-view .badge.overdue,
.screen-view .badge.rejected,
.screen-view .priority-tag.red,
.screen-view .priority-action-row em.red,
.screen-view .attention-engineer-row em.red,
.screen-view .register-cell.red,
.screen-view .engineer-overview-row em.red,
.screen-view .overview-preview-row em.red,
.screen-view .activity-register-row em.red,
.screen-view .activity-mini-table em.red,
.screen-view .todo-record-status em.red,
.screen-view .todo-count.red,
.screen-view .engineer-todo-row em.red,
.screen-view .engineer-outstanding-panel > header em.red,
.screen-view .compliance-register-row em.red,
.screen-view .format-tag.red,
.screen-view .format-tag.overdue,
.screen-view .format-tag.rejected,
.screen-view .currency-status.red,
.screen-view .ack-priority.critical,
.screen-view .danger,
.screen-view .warning-copy,
.screen-view .login-status.error,
.screen-view .storage-status.error {
  border-color: rgba(220, 38, 38, 0.32) !important;
  color: #991b1b !important;
  background: #fff !important;
  box-shadow: none !important;
}

.screen-view .metric-symbol.red {
  color: #dc2626 !important;
  background: #fff !important;
  border: 1px solid rgba(220, 38, 38, 0.28) !important;
}

.screen-view .metric-symbol.orange,
.screen-view .metric-symbol.purple,
.screen-view .gap-icon.purple {
  color: #334155 !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

.screen-view .priority-rail.red,
.screen-view .status-bar.red,
.screen-view .risk-track i.red,
.screen-view .skill-fill.red,
.screen-view .skill-row i.red,
.screen-view .mini-ring.red {
  background: #dc2626 !important;
}

.screen-view .priority-rail.orange,
.screen-view .status-bar.orange,
.screen-view .risk-track i.orange,
.screen-view .skill-fill.orange,
.screen-view .skill-row i.orange,
.screen-view .mini-ring.orange {
  background: #2563eb !important;
}

.screen-view .primary-button,
.screen-view .quiz-action-primary,
.screen-view .game-primary-action {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
}

/* OpsProof premium polish: quieter navigation, stronger hierarchy, compact brand lockup */
.front-panel {
  gap: 22px;
}

.front-panel > .brand-mark .brand-logo {
  width: min(520px, 100%);
  max-height: 168px;
  aspect-ratio: 650 / 230;
  object-fit: contain;
}

.front-copy h1 {
  max-width: 560px;
  margin: 6px 0 8px;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.02;
  letter-spacing: 0;
}

.front-copy p {
  max-width: 570px;
  color: #475569;
}

.sidebar .brand-mark.compact {
  min-width: 0;
  align-items: center;
}

.sidebar .brand-mark.compact .nav-brand-logo,
.sidebar .brand-mark.compact .brand-logo.nav-brand-logo {
  width: 148px;
  max-height: 42px;
  aspect-ratio: 430 / 120;
  object-fit: contain;
  object-position: left center;
}

.nav-item {
  color: #cbd5e1;
  font-weight: 650;
  letter-spacing: 0;
}

.nav-item:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.06);
}

.nav-item.active {
  color: #0f3d91;
  background: #dbeafe;
  border-color: transparent;
}

.nav-item.active::before {
  background: #2563eb;
}

.hub-section-intro h2,
.training-dashboard-header h2,
.training-dashboard-panel h3,
.manager-panel h3,
.data-panel h2 {
  font-weight: 650;
  letter-spacing: 0;
}

.hub-section-intro p,
.training-dashboard-header p,
.training-dashboard-panel p,
.training-dashboard-panel small,
.training-dashboard-panel span,
.manager-panel p,
.manager-panel small,
.data-panel p {
  color: #475569;
}

.eyebrow,
.hub-section-intro .eyebrow,
.training-dashboard-panel .eyebrow {
  color: #64748b;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.dashboard-home-intro {
  display: block;
  padding: 26px;
}

.dashboard-home-title {
  margin-bottom: 22px;
}

.dashboard-home-title p:last-child {
  max-width: 760px;
}

.dashboard-home-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.dashboard-home-metrics span {
  min-height: 82px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.dashboard-home-metrics strong {
  color: #0f172a;
  font-size: 24px;
  line-height: 1;
}

.dashboard-home-metrics em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
}

.dashboard-home-intro .training-nav-grid {
  margin-top: 0;
}

.dashboard-home-intro .training-nav-card {
  min-height: 122px;
}

button.hub-launch-card,
button.document-launch-card,
button.operations-launch-card,
button.admin-launch-card,
button.training-nav-card,
button.safety-category-card,
button.quiz-topic-card,
button.game-card,
button.module-card,
button.product-card,
button.tool-card,
button.document-tool-card,
button.resource-card {
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

button.hub-launch-card:hover,
button.document-launch-card:hover,
button.operations-launch-card:hover,
button.admin-launch-card:hover,
button.training-nav-card:hover,
button.safety-category-card:hover,
button.quiz-topic-card:hover,
button.game-card:hover,
button.module-card:hover,
button.product-card:hover,
button.tool-card:hover,
button.document-tool-card:hover,
button.resource-card:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.38);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.11);
}

button.hub-launch-card:focus-visible,
button.document-launch-card:focus-visible,
button.operations-launch-card:focus-visible,
button.admin-launch-card:focus-visible,
button.training-nav-card:focus-visible,
button.safety-category-card:focus-visible,
button.quiz-topic-card:focus-visible,
button.game-card:focus-visible,
button.module-card:focus-visible,
button.product-card:focus-visible,
button.tool-card:focus-visible,
button.document-tool-card:focus-visible,
button.resource-card:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.22);
  outline-offset: 2px;
}

/* Neutralise legacy warm/pink treatments now that OpsProof uses restrained blue accents */
.badge.orange,
.status-pill.orange,
.format-tag.orange,
.priority-tag.orange,
.priority-action-row em.orange,
.attention-engineer-row em.orange,
.currency-status.orange,
.admin-tab-strip button.active,
.document-admin-page .admin-tab-strip button.active,
.admin-area-page .admin-tab-strip button.active,
.screen-view .admin-tab-strip button.active,
.screen-view .status-pill.orange,
.screen-view .badge.orange,
.screen-view .format-tag.orange,
.screen-view .priority-tag.orange,
.screen-view .priority-action-row em.orange {
  border-color: #bfdbfe !important;
  color: #1e3a8a !important;
  background: #eff6ff !important;
  box-shadow: none !important;
}

.status-pill.green,
.badge.green,
.permission-state.allowed,
.screen-view .status-pill.green,
.screen-view .badge.green,
.screen-view .permission-state.allowed {
  border-color: #bbf7d0 !important;
  color: #166534 !important;
  background: #f8fff9 !important;
  box-shadow: none !important;
}

.storage-status.success {
  border-color: #bbf7d0 !important;
  color: #166534 !important;
  background: #f8fff9 !important;
}

.priority-filter-list button.active,
.evidence-panel .filter-button.active,
.qualification-review-panel .filter-button.active {
  border-color: #bfdbfe !important;
  color: #1e3a8a !important;
  background: #eff6ff !important;
}

.document-launch-card > .tile-icon,
.hub-launch-card > .tile-icon,
.admin-launch-card > .tile-icon,
.document-tool-card > .tile-icon,
.operations-launch-card > .tile-icon {
  display: none !important;
}

.document-launch-card,
.hub-launch-card,
.admin-launch-card,
.document-tool-card,
.operations-launch-card {
  padding-top: 20px;
}

.status-pill.red,
.status-pill.overdue,
.status-pill.rejected,
.priority-tag.red,
.priority-action-row em.red,
.format-tag.red,
.format-tag.overdue,
.format-tag.rejected {
  border-color: rgba(220, 38, 38, 0.28) !important;
  color: #991b1b !important;
  background: #fff !important;
}

@media (max-width: 980px) {
  .dashboard-home-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 2026-05 OpsProof SaaS polish pass */
.front-panel > .brand-mark {
  margin-bottom: 8px;
}

.front-panel > .brand-mark .brand-logo {
  width: min(620px, 100%);
  max-height: 190px;
  aspect-ratio: 760 / 250;
  object-fit: contain;
  object-position: left center;
}

.front-copy .eyebrow {
  margin-top: 2px;
  color: #64748b;
}

.front-copy h1 {
  max-width: 520px;
  font-size: clamp(30px, 3.8vw, 50px);
  line-height: 1.04;
}

.sidebar .brand-mark.compact .nav-brand-logo,
.sidebar .brand-mark.compact .brand-logo.nav-brand-logo {
  width: 154px;
  max-height: 46px;
  aspect-ratio: 310 / 86;
}

.nav-item {
  color: #cbd5e1;
  font-weight: 600;
}

.nav-item span:last-child {
  color: inherit;
}

.nav-item:not(.active):hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.045);
}

.nav-item.active {
  color: #1e3a8a;
  background: #dbeafe;
}

.nav-item.active::before {
  width: 3px;
  background: #2563eb;
}

.nav-item .tile-icon {
  color: #1e40af;
  background: #f8fafc;
  border-color: #dbeafe;
}

.hub-section-intro,
.training-dashboard-header,
.admin-area-page .training-dashboard-header,
.document-admin-page .training-dashboard-header,
.admin-area-page > .data-panel:first-of-type {
  border-color: #e2e8f0;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.045);
}

.hub-section-intro > .badge,
.training-dashboard-header > .badge,
.data-panel > .badge:first-child {
  display: none !important;
}

.hub-section-intro h2,
.training-dashboard-header h2,
.data-panel h2 {
  color: #0f172a;
  font-weight: 650;
}

.hub-section-intro p,
.training-dashboard-header p,
.data-panel p,
.card-description,
.document-launch-card p,
.hub-launch-card p,
.admin-launch-card p,
.document-tool-card p,
.training-nav-card p {
  color: #475569;
  font-weight: 400;
}

.document-overview-nav {
  display: none !important;
}

.document-groups {
  display: grid !important;
}

.document-launch-card,
.hub-launch-card,
.admin-launch-card,
.document-tool-card,
.operations-launch-card,
.training-nav-card {
  min-height: 178px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 24px;
  border-color: #e2e8f0;
  background: #fff;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.045);
}

.document-launch-card > .tile-icon,
.hub-launch-card > .tile-icon,
.admin-launch-card > .tile-icon,
.document-tool-card > .tile-icon,
.operations-launch-card > .tile-icon,
.training-nav-card > .tile-icon {
  display: none !important;
}

.document-launch-card h3,
.hub-launch-card h3,
.admin-launch-card h3,
.document-tool-card h3,
.operations-launch-card h3,
.training-nav-card h3 {
  color: #0f172a;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.18;
}

.document-launch-card em,
.hub-launch-card em,
.admin-launch-card em,
.document-tool-card em,
.operations-launch-card em,
.training-nav-card em {
  align-self: end;
  margin-top: auto;
  color: #0f172a;
  font-size: 16px;
  font-style: normal;
  font-weight: 650;
}

.document-launch-card:hover,
.hub-launch-card:hover,
.admin-launch-card:hover,
.document-tool-card:hover,
.operations-launch-card:hover,
.training-nav-card:hover {
  background: #fff;
  border-color: rgba(37, 99, 235, 0.34);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.1);
}

.manager-metric,
.dashboard-home-metrics span,
.admin-area-page .manager-metrics .manager-metric,
.document-admin-page .manager-metrics .manager-metric {
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.035);
}

.metric-symbol,
.manager-metric .metric-symbol,
.metric-symbol.blue,
.metric-symbol.orange,
.metric-symbol.red,
.metric-symbol.green,
.metric-symbol.purple,
.screen-view .metric-symbol.blue,
.screen-view .metric-symbol.orange,
.screen-view .metric-symbol.red,
.screen-view .metric-symbol.green,
.screen-view .metric-symbol.purple {
  color: #1e3a8a !important;
  background: #fff !important;
  border: 1px solid #dbeafe !important;
  box-shadow: none !important;
}

.status-pill,
.badge,
.format-tag,
.priority-tag,
.currency-status,
.ack-priority,
.permission-state,
.todo-record-status em,
.activity-register-row em,
.activity-mini-table em,
.register-cell,
.engineer-overview-row em,
.overview-preview-row em,
.engineer-todo-row em,
.engineer-outstanding-panel > header em,
.manager-audit-engineer-card header em,
.compliance-register-row em,
.evidence-panel .filter-button,
.qualification-review-panel .filter-button,
.priority-filter-list button,
.admin-tab-strip button {
  border-color: #dbeafe !important;
  color: #1e3a8a !important;
  background: #fff !important;
  box-shadow: none !important;
}

.status-pill.green,
.badge.green,
.permission-state.allowed,
.storage-status.success,
.screen-view .status-pill.green,
.screen-view .badge.green,
.screen-view .permission-state.allowed {
  border-color: #bbf7d0 !important;
  color: #166534 !important;
  background: #f0fdf4 !important;
}

.status-pill.red,
.status-pill.overdue,
.status-pill.rejected,
.badge.red,
.badge.overdue,
.badge.rejected,
.format-tag.red,
.format-tag.overdue,
.format-tag.rejected,
.priority-tag.red,
.priority-action-row em.red,
.attention-engineer-row em.red,
.register-cell.red,
.engineer-overview-row em.red,
.overview-preview-row em.red,
.activity-register-row em.red,
.activity-mini-table em.red,
.todo-record-status em.red,
.todo-count.red,
.engineer-todo-row em.red,
.engineer-outstanding-panel > header em.red,
.compliance-register-row em.red,
.currency-status.red,
.ack-priority.critical,
.storage-status.error,
.login-status.error {
  border-color: rgba(220, 38, 38, 0.28) !important;
  color: #991b1b !important;
  background: #fff !important;
}

.status-pill.orange,
.badge.orange,
.format-tag.orange,
.priority-tag.orange,
.priority-action-row em.orange,
.attention-engineer-row em.orange,
.currency-status.orange,
.todo-count.orange,
.engineer-todo-row em.orange,
.engineer-outstanding-panel > header em.orange,
.compliance-register-row em.orange,
.register-cell.orange,
.overview-preview-row em.orange,
.activity-register-row em.orange,
.activity-mini-table em.orange,
.ack-priority.important {
  border-color: #bfdbfe !important;
  color: #1e3a8a !important;
  background: #fff !important;
}

.priority-filter-list button.active,
.evidence-panel .filter-button.active,
.qualification-review-panel .filter-button.active,
.filter-button.active,
.admin-tab-strip button.active,
.document-admin-page .admin-tab-strip button.active,
.admin-area-page .admin-tab-strip button.active,
.screen-view .admin-tab-strip button.active {
  color: #1e3a8a !important;
  border-color: #93c5fd !important;
  background: #dbeafe !important;
}

.priority-action-row,
.attention-engineer-row {
  border-color: #e2e8f0;
  box-shadow: none;
}

.priority-action-row::before,
.attention-engineer-row::before {
  background: #dc2626;
}

.priority-action-row:has(.format-tag.upcoming)::before,
.priority-action-row:has(.status-pill.upcoming)::before,
.priority-action-row:has(.currency-status.current)::before {
  background: #16a34a;
}

/* Dashboard route only: OpsProof design rules pass */
#screen-training .competence-passport {
  max-width: 1400px;
  margin: 0 auto;
  gap: 24px;
}

#screen-training .dashboard-home-intro {
  padding: 22px;
  border: 1px solid #eef0f3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#screen-training .dashboard-home-title {
  margin-bottom: 20px;
}

#screen-training .dashboard-home-title .eyebrow {
  margin-bottom: 8px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

#screen-training .dashboard-home-title h2 {
  max-width: 520px;
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

#screen-training .dashboard-home-title p:last-child {
  max-width: 720px;
  margin: 0;
  color: #475569;
  font-size: 12.5px;
  line-height: 1.5;
}

#screen-training .dashboard-home-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  margin: 22px 0 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #e5e7eb;
}

#screen-training .dashboard-home-metrics span {
  min-height: 76px;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

#screen-training .dashboard-home-metrics strong {
  color: #0f172a;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

#screen-training .dashboard-home-metrics em {
  color: #64748b;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.35;
}

#screen-training .dashboard-home-intro .training-nav-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 0;
}

#screen-training .dashboard-home-intro .training-nav-card {
  min-height: 152px;
  align-content: start;
  gap: 10px;
  padding: 16px;
  border: 1px solid #eef0f3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transform: none;
}

#screen-training .dashboard-home-intro .training-nav-card:hover {
  border-color: #dbeafe;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
}

#screen-training .dashboard-home-intro .training-nav-card span {
  width: max-content;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid #dbeafe;
  border-radius: 6px;
  background: #f8fbff;
  color: #1e3a8a;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

#screen-training .dashboard-home-intro .training-nav-card strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

#screen-training .dashboard-home-intro .training-nav-card small {
  color: #475569;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
}

#screen-training .dashboard-home-intro .training-nav-card em {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #eef0f3;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#screen-training .dashboard-home-intro .training-nav-card b {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
}

#screen-training .my-actions-panel {
  padding: 20px;
  border: 1px solid #eef0f3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#screen-training .my-actions-panel header {
  margin-bottom: 14px;
}

#screen-training .my-actions-panel header h3 {
  color: #0f172a;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

#screen-training .my-actions-panel header span {
  color: #64748b;
  font-size: 11.5px;
  font-weight: 400;
}

#screen-training .priority-filter-list {
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef0f3;
}

#screen-training .priority-filter-list button {
  min-height: 32px;
  padding: 7px 10px;
  border-color: #e5e7eb !important;
  border-radius: 6px;
  background: #fff !important;
  color: #475569 !important;
  font-size: 12px;
  font-weight: 600;
}

#screen-training .priority-filter-list button.active {
  border-color: #0f172a !important;
  background: #0f172a !important;
  color: #fff !important;
}

#screen-training .priority-filter-list span {
  border-color: #dbeafe !important;
  background: #f8fbff !important;
  color: #1e3a8a !important;
}

#screen-training .priority-filter-list button.active span {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}

#screen-training .priority-action-feed {
  gap: 8px;
  margin-top: 12px;
}

#screen-training .priority-action-row {
  min-height: 58px;
  padding: 10px 12px 10px 16px;
  border: 1px solid #eef0f3;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

#screen-training .priority-action-row:hover {
  border-color: #dbeafe;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.055);
}

#screen-training .priority-rail {
  width: 3px;
  border-radius: 999px;
  background: #dc2626;
}

#screen-training .priority-action-titleline {
  gap: 8px;
}

#screen-training .priority-action-titleline strong {
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 600;
}

#screen-training .priority-action-main small,
#screen-training .priority-date {
  color: #64748b;
  font-size: 11.5px;
  font-weight: 400;
}

#screen-training .priority-category,
#screen-training .priority-tag,
#screen-training .priority-action-row em {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

#screen-training .priority-tag.red,
#screen-training .priority-action-row em.red {
  border-color: rgba(220, 38, 38, 0.22) !important;
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

@media (max-width: 1120px) {
  #screen-training .dashboard-home-intro .training-nav-grid,
  #screen-training .dashboard-home-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  #screen-training .dashboard-home-intro .training-nav-grid,
  #screen-training .dashboard-home-metrics {
    grid-template-columns: 1fr;
  }
}

/* My Dashboard: structural match to approved OpsProof reference */
#screen-training .competence-passport {
  max-width: 1400px;
  padding: 24px 24px 40px;
  gap: 24px;
}

#screen-training .dashboard-home-intro {
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

#screen-training .dashboard-summary-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

#screen-training .dashboard-summary-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

#screen-training .compact-button {
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
}

#screen-training .dashboard-home-title {
  margin: 0;
}

#screen-training .dashboard-home-title .eyebrow {
  margin: 0 0 8px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#screen-training .dashboard-home-title h2 {
  max-width: 620px;
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

#screen-training .dashboard-home-title p:last-child {
  max-width: 760px;
  margin: 0;
  color: #475569;
  font-size: 12.5px;
  line-height: 1.5;
}

#screen-training .dashboard-home-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #e5e7eb;
}

#screen-training .dashboard-home-metrics span {
  min-height: 76px;
  padding: 14px 18px;
  border: 0;
  background: #fff;
}

#screen-training .dashboard-home-metrics strong {
  font-size: 24px;
  font-weight: 600;
}

#screen-training .dashboard-home-metrics em {
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

#screen-training .dashboard-record-section {
  display: grid;
  gap: 14px;
}

#screen-training .dashboard-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

#screen-training .dashboard-section-header h3 {
  margin: 0 0 4px;
  color: #0f172a;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

#screen-training .dashboard-section-header p,
#screen-training .dashboard-section-header span {
  margin: 0;
  color: #64748b;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
}

#screen-training .dashboard-record-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

#screen-training .dashboard-record-grid .training-nav-card {
  min-height: 170px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
}

#screen-training .dashboard-record-grid .training-nav-card:hover {
  border-color: #dbeafe;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
}

#screen-training .dashboard-record-grid .training-nav-card span {
  width: max-content;
  max-width: 100%;
  padding: 3px 8px;
  border: 0;
  border-radius: 6px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 11px;
  font-weight: 600;
}

#screen-training .dashboard-record-grid .training-nav-card strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

#screen-training .dashboard-record-grid .training-nav-card small {
  color: #475569;
  font-size: 12.5px;
  line-height: 1.45;
}

#screen-training .dashboard-record-grid .training-nav-card em {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #eef0f3;
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#screen-training .dashboard-priority-section {
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

#screen-training .dashboard-priority-section .priority-filter-list {
  gap: 8px;
  padding: 0 0 14px;
  border-bottom: 1px solid #eef0f3;
}

#screen-training .dashboard-priority-section .priority-filter-list button {
  min-height: 30px;
  padding: 6px 10px;
  border-color: transparent !important;
  border-radius: 7px;
  background: transparent !important;
  color: #475569 !important;
  font-size: 12px;
  font-weight: 600;
}

#screen-training .dashboard-priority-section .priority-filter-list button.active {
  border-color: #0f172a !important;
  background: #0f172a !important;
  color: #fff !important;
}

#screen-training .dashboard-priority-section .priority-filter-list span {
  min-width: 20px;
  border: 0 !important;
  border-radius: 999px;
  background: #eff6ff !important;
  color: #1e3a8a !important;
  font-size: 11px;
}

#screen-training .dashboard-priority-section .priority-filter-list button.active span {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

#screen-training .dashboard-priority-section .priority-action-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  margin-top: 0;
}

#screen-training .dashboard-priority-section .priority-action-row {
  min-height: 70px;
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid #eef0f3;
  border-radius: 0;
  background: #fff;
}

#screen-training .dashboard-priority-section .priority-action-row:hover {
  box-shadow: none;
}

#screen-training .dashboard-priority-section .priority-action-row::before {
  display: none;
}

#screen-training .dashboard-priority-section .priority-rail {
  width: 2px;
  height: 100%;
  border-radius: 999px;
}

#screen-training .dashboard-priority-section .priority-rail.red {
  background: #dc2626;
}

#screen-training .dashboard-priority-section .priority-rail.orange {
  background: #f59e0b;
}

#screen-training .dashboard-priority-section .priority-rail.blue,
#screen-training .dashboard-priority-section .priority-rail.green {
  background: #2563eb;
}

#screen-training .dashboard-priority-section .priority-action-titleline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

#screen-training .dashboard-priority-section .priority-action-titleline strong {
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

#screen-training .dashboard-priority-section .priority-category {
  padding: 3px 8px;
  border: 1px solid #dbeafe !important;
  border-radius: 6px;
  background: #eff6ff !important;
  color: #1e3a8a !important;
  font-size: 11px;
  font-weight: 600;
}

#screen-training .dashboard-priority-section .priority-category.red {
  border-color: rgba(220, 38, 38, 0.22) !important;
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

#screen-training .dashboard-priority-section .priority-category.orange {
  border-color: rgba(245, 158, 11, 0.26) !important;
  background: #fffbeb !important;
  color: #b45309 !important;
}

#screen-training .dashboard-priority-section .priority-action-main small,
#screen-training .dashboard-priority-section .priority-date {
  color: #64748b;
  font-size: 11.5px;
  font-weight: 400;
}

#screen-training .dashboard-priority-section .priority-action-meta {
  min-width: 112px;
  align-items: flex-end;
  gap: 6px;
}

#screen-training .dashboard-priority-section .priority-tag {
  display: none;
}

#screen-training .dashboard-priority-section .priority-action-row em {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

#screen-training .dashboard-priority-section .priority-action-row em.red {
  border-color: rgba(220, 38, 38, 0.2) !important;
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

#screen-training .dashboard-priority-section .priority-action-row em.orange {
  border-color: rgba(245, 158, 11, 0.24) !important;
  background: #fffbeb !important;
  color: #b45309 !important;
}

#screen-training .dashboard-priority-section .priority-action-row em.blue,
#screen-training .dashboard-priority-section .priority-action-row em.green {
  border-color: #dbeafe !important;
  background: #eff6ff !important;
  color: #1e3a8a !important;
}

#screen-training .dashboard-pagination-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  color: #64748b;
  font-size: 11.5px;
}

#screen-training .dashboard-pagination-footer div {
  display: flex;
  gap: 8px;
}

#screen-training .dashboard-pagination-footer .table-action {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11.5px;
}

@media (max-width: 1180px) {
  #screen-training .dashboard-record-grid,
  #screen-training .dashboard-home-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #screen-training .dashboard-priority-section .priority-action-feed {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #screen-training .competence-passport {
    padding: 16px;
  }

  #screen-training .dashboard-summary-header,
  #screen-training .dashboard-section-header {
    display: grid;
  }

  #screen-training .dashboard-summary-actions {
    justify-content: flex-start;
  }

  #screen-training .dashboard-record-grid,
  #screen-training .dashboard-home-metrics {
    grid-template-columns: 1fr;
  }
}

/* My Dashboard: Priority Actions visual refinement only */
#screen-training .competence-passport .dashboard-priority-section {
  padding: 24px 24px 18px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
}

#screen-training .competence-passport .dashboard-priority-section .dashboard-section-header {
  align-items: flex-start;
  margin: 0 0 18px;
}

#screen-training .competence-passport .dashboard-priority-section .dashboard-section-header h3 {
  margin: 0 0 5px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

#screen-training .competence-passport .dashboard-priority-section .dashboard-section-header span {
  color: #475569;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
}

#screen-training .competence-passport .dashboard-priority-section .dashboard-section-header .compact-button {
  min-height: 30px;
  padding: 7px 13px;
  border: 1px solid #d8e0ea;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

#screen-training .competence-passport .dashboard-priority-section .dashboard-section-header .compact-button:hover {
  border-color: #c7d2e2;
  background: #f8fafc;
}

#screen-training .competence-passport .dashboard-priority-section .priority-filter-list {
  gap: 10px;
  margin: 0;
  padding: 0 0 18px;
  border-bottom: 1px solid #eef2f7;
}

#screen-training .competence-passport .dashboard-priority-section .priority-filter-list button {
  min-height: 26px;
  padding: 5px 9px;
  border: 0 !important;
  border-radius: 7px;
  background: transparent !important;
  color: #475569 !important;
  box-shadow: none !important;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
}

#screen-training .competence-passport .dashboard-priority-section .priority-filter-list button.active {
  background: #0f172a !important;
  color: #fff !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-filter-list span {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 999px;
  background: #eef4ff !important;
  color: #1d4ed8 !important;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}

#screen-training .competence-passport .dashboard-priority-section .priority-filter-list button.active span {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 0;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row {
  position: relative;
  min-height: 82px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 15px 24px;
  border: 0;
  border-bottom: 1px solid #eef2f7;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  text-align: left;
  transform: none;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row:nth-child(odd) {
  border-right: 1px solid #eef2f7;
  padding-left: 18px;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row:nth-child(even) {
  padding-right: 18px;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row:hover {
  background: #fbfdff;
  box-shadow: none;
  transform: none;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row::before {
  display: none;
}

#screen-training .competence-passport .dashboard-priority-section .priority-rail {
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 2px;
  height: auto;
  border-radius: 999px;
}

#screen-training .competence-passport .dashboard-priority-section .priority-rail.red {
  background: #dc2626;
}

#screen-training .competence-passport .dashboard-priority-section .priority-rail.orange {
  background: #f59e0b;
}

#screen-training .competence-passport .dashboard-priority-section .priority-rail.blue,
#screen-training .competence-passport .dashboard-priority-section .priority-rail.green {
  background: #2563eb;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-titleline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-titleline strong {
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.005em;
}

#screen-training .competence-passport .dashboard-priority-section .priority-category {
  padding: 3px 8px;
  border: 1px solid #bfdbfe !important;
  border-radius: 6px;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

#screen-training .competence-passport .dashboard-priority-section .priority-category.red {
  border-color: #fecaca !important;
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-category.orange {
  border-color: #fed7aa !important;
  background: #fff7ed !important;
  color: #ea580c !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-main small {
  color: #475569;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-meta {
  min-width: 104px;
  display: grid;
  justify-items: end;
  align-content: center;
  gap: 10px;
}

#screen-training .competence-passport .dashboard-priority-section .priority-date {
  color: #0f172a;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}

#screen-training .competence-passport .dashboard-priority-section .priority-tag {
  display: none;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row em {
  min-height: 22px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fecaca !important;
  border-radius: 999px;
  background: #fef2f2 !important;
  color: #dc2626 !important;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row em.orange {
  border-color: #fed7aa !important;
  background: #fff7ed !important;
  color: #ea580c !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row em.blue,
#screen-training .competence-passport .dashboard-priority-section .priority-action-row em.green {
  border-color: #bfdbfe !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

#screen-training .competence-passport .dashboard-pagination-footer {
  min-height: 40px;
  padding: 16px 0 0;
  border-top: 0;
  color: #64748b;
  font-size: 12px;
}

#screen-training .competence-passport .dashboard-pagination-footer .pager {
  gap: 8px;
}

#screen-training .competence-passport .dashboard-pagination-footer .pager button {
  min-height: 30px;
  padding: 7px 12px;
  border: 1px solid #d8e0ea;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 600;
}

/* My Dashboard: Your record cards only */
#screen-training .competence-passport .dashboard-record-section {
  gap: 14px;
}

#screen-training .competence-passport .dashboard-record-section .dashboard-section-header {
  margin: 0;
  padding: 0;
}

#screen-training .competence-passport .dashboard-record-section .dashboard-section-header h3 {
  margin: 0 0 5px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

#screen-training .competence-passport .dashboard-record-section .dashboard-section-header p {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

#screen-training .competence-passport .dashboard-record-section .dashboard-section-header .compact-button {
  min-height: 24px;
  padding: 0;
  color: #2563eb;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
}

#screen-training .competence-passport .dashboard-record-grid {
  gap: 10px;
}

#screen-training .competence-passport .dashboard-record-grid .training-nav-card {
  min-height: 154px;
  padding: 16px 16px 14px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-content: stretch;
  gap: 9px;
  border: 1px solid #e6eaf0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
}

#screen-training .competence-passport .dashboard-record-grid .training-nav-card:hover {
  border-color: #cfe0ff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

#screen-training .competence-passport .dashboard-record-grid .training-nav-card span {
  justify-self: start;
  padding: 3px 7px;
  border: 0;
  border-radius: 6px;
  background: #eef4ff;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

#screen-training .competence-passport .dashboard-record-grid .training-nav-card strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

#screen-training .competence-passport .dashboard-record-grid .training-nav-card small {
  max-width: 94%;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.42;
}

#screen-training .competence-passport .dashboard-record-grid .training-nav-card em {
  min-height: 24px;
  margin-top: 3px;
  padding-top: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #eef2f7;
  color: #94a3b8;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}

#screen-training .competence-passport .dashboard-record-grid .training-nav-card em b {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* My Dashboard route: Lovable structural reference pass */
#screen-training .competence-passport {
  width: min(100%, 1160px);
  max-width: 1160px;
  margin: 0 auto;
  padding: 28px 0 56px;
  display: grid;
  gap: 24px;
}

#screen-training .competence-passport .dashboard-home-intro {
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

#screen-training .competence-passport .dashboard-summary-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

#screen-training .competence-passport .dashboard-summary-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

#screen-training .competence-passport .compact-button {
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.1;
  box-shadow: none;
}

#screen-training .competence-passport .dashboard-summary-actions .ghost-button {
  border-color: #e5e7eb;
  background: #fff;
  color: #0f172a;
}

#screen-training .competence-passport .dashboard-summary-actions .primary-button {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

#screen-training .competence-passport .dashboard-home-title {
  margin: 0;
  padding: 0;
}

#screen-training .competence-passport .dashboard-home-title .eyebrow {
  margin: 0 0 10px;
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#screen-training .competence-passport .dashboard-home-title h2 {
  max-width: 560px;
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

#screen-training .competence-passport .dashboard-home-title p:last-child {
  max-width: 720px;
  margin: 0;
  color: #475569;
  font-size: 12.5px;
  line-height: 1.45;
}

#screen-training .competence-passport .dashboard-home-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

#screen-training .competence-passport .dashboard-home-metrics span {
  min-height: 70px;
  padding: 14px 16px;
  display: grid;
  align-content: center;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: inset -1px 0 0 #e5e7eb;
}

#screen-training .competence-passport .dashboard-home-metrics span:last-child {
  box-shadow: none;
}

#screen-training .competence-passport .dashboard-home-metrics strong {
  color: #0f172a;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

#screen-training .competence-passport .dashboard-home-metrics em {
  color: #64748b;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

#screen-training .competence-passport .dashboard-record-section {
  display: grid;
  gap: 14px;
}

#screen-training .competence-passport .dashboard-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 0;
}

#screen-training .competence-passport .dashboard-section-header h3 {
  margin: 0;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

#screen-training .competence-passport .dashboard-section-header p,
#screen-training .competence-passport .dashboard-section-header span {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

#screen-training .competence-passport .dashboard-section-header .ghost-button {
  border: 0;
  background: transparent;
  color: #2563eb;
  padding-right: 0;
}

#screen-training .competence-passport .dashboard-record-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

#screen-training .competence-passport .dashboard-record-grid .training-nav-card {
  min-height: 150px;
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
  transform: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

#screen-training .competence-passport .dashboard-record-grid .training-nav-card:hover {
  border-color: #dbeafe;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

#screen-training .competence-passport .dashboard-record-grid .training-nav-card span {
  width: max-content;
  max-width: 100%;
  padding: 3px 7px;
  border: 0;
  border-radius: 6px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

#screen-training .competence-passport .dashboard-record-grid .training-nav-card strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

#screen-training .competence-passport .dashboard-record-grid .training-nav-card small {
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
}

#screen-training .competence-passport .dashboard-record-grid .training-nav-card em {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #eef0f3;
  color: #94a3b8;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

#screen-training .competence-passport .dashboard-priority-section {
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#screen-training .competence-passport .dashboard-priority-section .dashboard-section-header {
  margin-bottom: 14px;
}

#screen-training .competence-passport .dashboard-priority-section .dashboard-section-header h3 {
  font-size: 15px;
}

#screen-training .competence-passport .dashboard-priority-section .priority-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 14px;
  margin: 0;
  border-bottom: 1px solid #eef0f3;
}

#screen-training .competence-passport .dashboard-priority-section .priority-filter-list button {
  min-height: 28px;
  padding: 6px 10px;
  border: 0 !important;
  border-radius: 7px;
  background: transparent !important;
  color: #475569 !important;
  font-size: 11.5px;
  font-weight: 600;
  box-shadow: none !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-filter-list button.active {
  background: #0f172a !important;
  color: #fff !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-filter-list span {
  min-width: 18px;
  padding: 2px 6px;
  border: 0 !important;
  border-radius: 999px;
  background: #eff6ff !important;
  color: #1e3a8a !important;
  font-size: 10px;
  font-weight: 700;
}

#screen-training .competence-passport .dashboard-priority-section .priority-filter-list button.active span {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 14px;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row {
  position: relative;
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 18px;
  border: 0;
  border-bottom: 1px solid #eef0f3;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  transform: none;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row:nth-child(odd) {
  border-right: 1px solid #eef0f3;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row:hover {
  background: #fafbfc;
  box-shadow: none;
  transform: none;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row::before {
  display: none;
}

#screen-training .competence-passport .dashboard-priority-section .priority-rail {
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 999px;
  background: #2563eb;
}

#screen-training .competence-passport .dashboard-priority-section .priority-rail.red {
  background: #dc2626;
}

#screen-training .competence-passport .dashboard-priority-section .priority-rail.orange {
  background: #f59e0b;
}

#screen-training .competence-passport .dashboard-priority-section .priority-rail.green {
  background: #059669;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-titleline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-titleline strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-main small,
#screen-training .competence-passport .dashboard-priority-section .priority-date {
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.35;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-meta {
  min-width: 110px;
  display: grid;
  justify-items: end;
  gap: 7px;
}

#screen-training .competence-passport .dashboard-priority-section .priority-category,
#screen-training .competence-passport .dashboard-priority-section .priority-action-row em {
  padding: 3px 8px;
  border: 1px solid #dbeafe !important;
  border-radius: 999px;
  background: #eff6ff !important;
  color: #1e3a8a !important;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
}

#screen-training .competence-passport .dashboard-priority-section .priority-category.red,
#screen-training .competence-passport .dashboard-priority-section .priority-action-row em.red {
  border-color: rgba(220, 38, 38, 0.22) !important;
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-category.orange,
#screen-training .competence-passport .dashboard-priority-section .priority-action-row em.orange {
  border-color: rgba(245, 158, 11, 0.28) !important;
  background: #fff7ed !important;
  color: #b45309 !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-tag {
  display: none;
}

#screen-training .competence-passport .dashboard-pagination-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  margin-top: 0;
  color: #64748b;
  font-size: 11.5px;
}

#screen-training .competence-passport .dashboard-pagination-footer div {
  display: flex;
  gap: 8px;
}

#screen-training .competence-passport .dashboard-pagination-footer .table-action {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 11.5px;
}

#screen-training .competence-passport .dashboard-pagination-footer .table-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 1180px) {
  #screen-training .competence-passport {
    width: 100%;
  }

  #screen-training .competence-passport .dashboard-home-metrics,
  #screen-training .competence-passport .dashboard-record-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #screen-training .competence-passport .dashboard-priority-section .priority-action-feed {
    grid-template-columns: 1fr;
  }

  #screen-training .competence-passport .dashboard-priority-section .priority-action-row:nth-child(odd) {
    border-right: 0;
  }
}

@media (max-width: 760px) {
  #screen-training .competence-passport {
    padding: 16px;
  }

  #screen-training .competence-passport .dashboard-summary-header,
  #screen-training .competence-passport .dashboard-section-header {
    display: grid;
  }

  #screen-training .competence-passport .dashboard-summary-actions {
    justify-content: flex-start;
  }

  #screen-training .competence-passport .dashboard-home-metrics,
  #screen-training .competence-passport .dashboard-record-grid {
    grid-template-columns: 1fr;
  }
}

/* Product Library: Lovable reference alignment only */
.product-library-hero.data-panel {
  padding: 24px;
  border: 1px solid #e6ebf2;
  border-left: 1px solid #e6ebf2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03), 0 8px 24px -12px rgba(15, 23, 42, 0.08);
}

.product-library-hero .eyebrow {
  margin-bottom: 8px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.product-library-hero h2 {
  color: #0f172a;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.product-library-hero p:not(.eyebrow) {
  margin-top: 6px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.product-library-summary {
  min-width: 300px;
  gap: 8px;
}

.product-library-summary span {
  min-width: 80px;
  padding: 12px 14px;
  border-color: #eef0f4;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.product-library-summary strong {
  color: #0f172a;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.product-library-filters.data-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  padding: 16px;
  border: 1px solid #eef0f4;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.product-library-search {
  grid-column: 1 / -1;
  gap: 10px;
}

.product-library-search label,
.product-library-selects label {
  gap: 6px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.product-library-search input,
.product-library-selects select {
  min-height: 34px;
  border-color: #e2e8f0;
  border-radius: 8px;
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: none;
}

.product-library-search input {
  padding: 0 12px;
}

.product-library-search .ghost-button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 7px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

.product-library-segments {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  width: max-content;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.product-library-segments button,
.product-library-view-toggle button {
  width: auto;
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  border-color: #e2e8f0;
  border-radius: 7px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

.product-library-filters.data-panel .product-library-segments {
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.product-library-filters.data-panel .product-library-segments button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  color: #475569 !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  opacity: 1 !important;
  appearance: none !important;
}

.product-library-segments button.active {
  border-color: #0f172a;
  background: #0f172a;
  color: #fff;
}

.product-library-filters.data-panel .product-library-segments button.active {
  border-color: #0f172a !important;
  background: #0f172a !important;
  color: #fff !important;
}

.product-library-view-toggle {
  grid-column: 2;
  grid-row: 2;
  gap: 0;
  width: max-content;
  max-width: 100%;
  margin-top: 12px;
  padding: 2px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

.product-library-view-toggle button {
  min-height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
}

.product-library-view-toggle button.active {
  background: #eff4ff;
  color: #1d4ed8;
}

.product-library-selects {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

.product-library-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.product-library-card.data-panel {
  gap: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid #eef0f4;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.product-library-card.data-panel:hover {
  border-color: #d8dee8;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 8px 22px -14px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

.product-library-card-top {
  display: block;
  padding: 14px 14px 0;
}

.product-library-visual,
.product-library-thumb {
  min-height: 92px;
  margin-bottom: 10px;
  border-color: #e2e8f0;
  border-radius: 8px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2f8 100%);
}

.product-library-visual::before {
  width: 22px;
  height: 120px;
  right: 36px;
  top: -18px;
  background: #dbeafe;
  opacity: 0.7;
}

.product-library-visual::after {
  width: 14px;
  height: 110px;
  left: 28px;
  bottom: -22px;
  background: #bae6fd !important;
  opacity: 0.85;
}

.product-library-visual span {
  color: rgba(15, 23, 42, 0.88);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.product-library-card .badge {
  margin-bottom: 10px;
  border-color: #bfdbfe !important;
  border-radius: 6px;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  font-size: 10px;
  font-weight: 700;
}

.product-library-card h3 {
  margin: 0;
  color: #0f172a;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.product-library-card h3 + p {
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.product-library-description {
  min-height: 54px;
  padding: 10px 14px 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
}

.product-library-specs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  padding: 10px 14px 0;
  border-top: 1px solid #f1f5f9;
}

.product-library-specs span {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0f172a;
  font-size: 12px;
  font-weight: 600;
}

.product-library-specs small {
  color: #94a3b8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.product-library-tags {
  padding: 8px 14px 0;
}

.product-library-tags span {
  border-color: #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 600;
}

.product-library-actions {
  min-height: 42px;
  margin-top: 10px;
  padding: 10px 14px 14px;
  border-top: 1px solid #f1f5f9;
  background: transparent;
}

.product-library-actions .table-action {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 650;
}

.product-library-actions .table-action:first-child {
  border-color: #e2e8f0;
  background: #fff;
  color: #64748b;
}

.product-library-actions .table-action:not(.is-disabled):hover {
  border-color: #d8dee8;
  background: #f8fafc;
  color: #0f172a;
}

.product-library-actions .table-action:nth-child(2),
.product-library-actions .table-action:first-child:last-child {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

.product-library-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: -4px;
}

.product-library-breadcrumb button {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.product-library-breadcrumb strong {
  color: #0f172a;
}

.product-library-hero--compact {
  align-items: center;
  padding: 18px 20px;
  border-left: 0;
  background: #fff;
}

.product-library-hero--compact .product-library-summary {
  min-width: 260px;
}

.product-library-discovery {
  gap: 14px;
}

.product-library-discovery .product-library-search {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.product-library-search-field input {
  width: 100%;
}

.product-library-reset-button {
  min-height: 34px;
}

.product-library-navigation {
  display: grid;
  gap: 10px;
}

.product-library-type-pills button span,
.product-library-category-chips button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.product-library-type-pills button.active span,
.product-library-category-chips button.active span {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.product-library-category-chips {
  gap: 7px;
}

.product-library-category-chips button {
  min-height: 30px;
  padding: 0 10px;
  border-color: #dbe3ee;
  background: #fff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
}

.product-library-category-chips button.active {
  border-color: #0f172a;
  background: #0f172a;
  color: #fff;
}

.product-library-secondary-filters {
  margin-top: 2px;
}

.product-library-results-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.product-library-results-header .op-eyebrow,
.product-library-results-header .op-section-title,
.product-library-results-header .op-meta {
  margin: 0;
}

@media (max-width: 900px) {
  .product-library-hero.data-panel {
    flex-direction: column;
  }

  .product-library-hero--compact {
    flex-direction: column;
    align-items: stretch;
  }

  .product-library-summary {
    min-width: 0;
  }

  .product-library-view-toggle {
    margin-top: 12px;
    justify-self: start;
  }

  .product-library-results-header {
    align-items: start;
    flex-direction: column;
  }
}

/* My Dashboard Priority Actions: final visual fidelity pass */
#screen-training .competence-passport .dashboard-priority-section {
  overflow: hidden;
  padding: 22px 24px 20px;
  border-color: #e8edf4;
  border-radius: 14px;
  box-shadow: 0 14px 32px -24px rgba(15, 23, 42, 0.28);
}

#screen-training .competence-passport .dashboard-priority-section .dashboard-section-header {
  margin-bottom: 18px;
}

#screen-training .competence-passport .dashboard-priority-section .dashboard-section-header h3 {
  color: #0f172a;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#screen-training .competence-passport .dashboard-priority-section .dashboard-section-header span {
  color: #475569;
  font-size: 13px;
  font-weight: 400;
}

#screen-training .competence-passport .dashboard-priority-section .dashboard-section-header .compact-button {
  min-height: 34px;
  padding: 7px 14px;
  border-color: #dbe3ee;
  border-radius: 9px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
}

#screen-training .competence-passport .dashboard-priority-section .priority-filter-list {
  gap: 20px;
  padding: 0 0 20px;
  border-bottom: 1px solid #edf1f6;
}

#screen-training .competence-passport .dashboard-priority-section .priority-filter-list button {
  min-height: 30px;
  padding: 6px 0;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  color: #475569 !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}

#screen-training .competence-passport .dashboard-priority-section .priority-filter-list button.active {
  padding: 7px 12px;
  background: #0f172a !important;
  color: #fff !important;
  font-weight: 700;
}

#screen-training .competence-passport .dashboard-priority-section .priority-filter-list span {
  min-width: 20px;
  padding: 2px 7px;
  border: 0 !important;
  border-radius: 999px;
  background: #eef2f7 !important;
  color: #64748b !important;
  font-size: 11px;
  font-weight: 700;
}

#screen-training .competence-passport .dashboard-priority-section .priority-filter-list button.active span {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-feed {
  margin: 0 -24px;
  padding: 0;
  border-bottom: 1px solid #edf1f6;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row {
  min-height: 84px;
  padding: 18px 28px 18px 56px;
  border: 0 !important;
  border-bottom: 1px solid #edf1f6 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row:nth-child(odd) {
  border-right: 1px solid #edf1f6 !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row:hover {
  background: #fbfdff !important;
  box-shadow: none;
}

#screen-training .competence-passport .dashboard-priority-section .priority-rail {
  left: 30px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  border-radius: 2px;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-titleline {
  gap: 9px;
  margin-bottom: 8px;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-titleline strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.28;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-main small {
  color: #475569;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-meta {
  min-width: 118px;
  gap: 10px;
}

#screen-training .competence-passport .dashboard-priority-section .priority-date {
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 700;
}

#screen-training .competence-passport .dashboard-priority-section .priority-category,
#screen-training .competence-passport .dashboard-priority-section .priority-action-row em {
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.15;
}

#screen-training .competence-passport .dashboard-priority-section .priority-category {
  border-color: #cfe0ff !important;
  background: #f3f7ff !important;
  color: #1d4ed8 !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-category.red,
#screen-training .competence-passport .dashboard-priority-section .priority-action-row em.red {
  border-color: #fecaca !important;
  background: #fff4f4 !important;
  color: #b91c1c !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-category.orange,
#screen-training .competence-passport .dashboard-priority-section .priority-action-row em.orange {
  border-color: #fed7aa !important;
  background: #fff7ed !important;
  color: #c2410c !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row em {
  min-width: 74px;
  text-align: center;
}

#screen-training .competence-passport .dashboard-pagination-footer {
  padding: 18px 0 0;
  color: #475569;
  font-size: 13px;
}

#screen-training .competence-passport .dashboard-pagination-footer .table-action {
  min-height: 34px;
  padding: 7px 13px;
  border-color: #dbe3ee;
  border-radius: 9px;
  background: #fff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 600;
}

/* My Dashboard Priority Actions: calm unified register tuning */
#screen-training .competence-passport .dashboard-priority-section {
  padding: 24px 28px 22px !important;
  border: 1px solid #e6ebf2 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 18px 42px -34px rgba(15, 23, 42, 0.35) !important;
}

#screen-training .competence-passport .dashboard-priority-section .dashboard-section-header {
  margin-bottom: 22px !important;
}

#screen-training .competence-passport .dashboard-priority-section .dashboard-section-header h3 {
  margin-bottom: 4px;
  color: #0f172a;
  font-size: 18px !important;
  font-weight: 650 !important;
  letter-spacing: -0.008em;
}

#screen-training .competence-passport .dashboard-priority-section .dashboard-section-header span {
  color: #52647a !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45;
}

#screen-training .competence-passport .dashboard-priority-section .dashboard-section-header .compact-button {
  min-height: 34px !important;
  padding: 7px 15px !important;
  border: 1px solid #dbe3ee !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-filter-list {
  gap: 22px !important;
  padding: 0 0 21px !important;
  margin: 0 !important;
  border-bottom: 1px solid #edf1f6 !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-filter-list button {
  min-height: 30px !important;
  padding: 6px 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #52647a !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-filter-list button.active {
  padding: 7px 13px !important;
  background: #0f172a !important;
  color: #fff !important;
  font-weight: 650 !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-filter-list span {
  min-width: 19px !important;
  padding: 2px 7px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #eef3f8 !important;
  color: #64748b !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-filter-list button.active span {
  background: rgba(255, 255, 255, 0.17) !important;
  color: #fff !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-feed {
  margin: 0 -28px !important;
  padding: 0 !important;
  border-bottom: 1px solid #edf1f6 !important;
  background: #fff !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row {
  min-height: 82px !important;
  padding: 18px 28px 18px 64px !important;
  border: 0 !important;
  border-bottom: 1px solid #edf1f6 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row:nth-child(odd) {
  border-right: 1px solid #edf1f6 !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row:hover {
  background: #fbfdff !important;
  box-shadow: none !important;
  transform: none !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row::before {
  display: none !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-rail {
  left: 34px !important;
  top: 25px !important;
  bottom: 25px !important;
  width: 2px !important;
  border-radius: 3px !important;
  opacity: 0.94;
}

#screen-training .competence-passport .dashboard-priority-section .priority-rail.red {
  background: #ef4444 !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-rail.orange {
  background: #f59e0b !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-rail.green {
  background: #22c55e !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-titleline {
  gap: 9px !important;
  margin-bottom: 7px !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-titleline strong {
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-main small {
  color: #52647a !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-meta {
  min-width: 116px !important;
  gap: 9px !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-date {
  color: #1e293b !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-category,
#screen-training .competence-passport .dashboard-priority-section .priority-action-row em {
  padding: 4px 9px !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-category {
  border-color: #cfe0ff !important;
  background: #f4f8ff !important;
  color: #1d4ed8 !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-category.red,
#screen-training .competence-passport .dashboard-priority-section .priority-action-row em.red {
  border-color: #fecaca !important;
  background: #fff5f5 !important;
  color: #b91c1c !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-category.orange,
#screen-training .competence-passport .dashboard-priority-section .priority-action-row em.orange {
  border-color: #fed7aa !important;
  background: #fff7ed !important;
  color: #c2410c !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row em {
  min-width: 76px !important;
  text-align: center !important;
}

#screen-training .competence-passport .dashboard-pagination-footer {
  padding: 18px 0 0 !important;
  color: #52647a !important;
  font-size: 13px !important;
}

#screen-training .competence-passport .dashboard-pagination-footer .table-action {
  min-height: 34px !important;
  padding: 7px 14px !important;
  border-color: #dbe3ee !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

#screen-training .dashboard-priority-section .priority-action-row,
#screen-training .competence-passport .dashboard-priority-section .priority-action-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

#screen-training .competence-passport .dashboard-priority-section .priority-action-row {
  padding-left: 28px !important;
}

#screen-training .dashboard-priority-section .priority-rail,
#screen-training .competence-passport .dashboard-priority-section .priority-rail {
  display: none !important;
}

#screen-training .dashboard-priority-section .priority-action-row {
  overflow: hidden;
}

#screen-training .dashboard-priority-section .priority-action-urgency {
  width: 4px;
  min-height: 100%;
  border-radius: 999px;
  background: #94a3b8;
}

#screen-training .dashboard-priority-section .priority-action-urgency.green,
#screen-training .dashboard-priority-section .priority-action-urgency.blue {
  background: #2563eb;
}

#screen-training .dashboard-priority-section .priority-action-urgency.orange {
  background: #f59e0b;
}

#screen-training .dashboard-priority-section .priority-action-urgency.red {
  background: #dc2626;
}

#screen-training .dashboard-priority-section .priority-action-kicker {
  color: #52647a;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

#screen-training .dashboard-priority-section .priority-action-due-line {
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: right;
}

#screen-training .dashboard-priority-section--mobile {
  gap: 14px !important;
}

#screen-training .dashboard-priority-section--mobile .dashboard-section-header {
  margin-bottom: 2px !important;
}

#screen-training .dashboard-priority-section--mobile .dashboard-section-header .compact-button {
  display: none !important;
}

#screen-training .dashboard-priority-section--mobile .priority-action-feed {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#screen-training .dashboard-priority-section--mobile .priority-action-row {
  display: grid !important;
  grid-template-columns: 4px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  min-height: 0 !important;
  padding: 14px 14px 13px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

#screen-training .dashboard-priority-section.dashboard-priority-section--mobile .priority-action-row {
  grid-template-columns: 4px minmax(0, 1fr) !important;
}

#screen-training .dashboard-priority-section.dashboard-priority-section--mobile .priority-action-urgency {
  width: 4px !important;
}

#screen-training .dashboard-priority-section--mobile .priority-action-main {
  gap: 5px !important;
}

#screen-training .dashboard-priority-section--mobile .priority-action-titleline {
  gap: 0 !important;
  margin: 0 !important;
}

#screen-training .dashboard-priority-section--mobile .priority-action-titleline strong {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

#screen-training .dashboard-priority-section--mobile .priority-action-main small {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}

#screen-training .dashboard-priority-section--mobile .priority-action-meta {
  grid-column: 2;
  justify-items: start !important;
  align-content: start !important;
  min-width: 0 !important;
  gap: 0 !important;
}

#screen-training .dashboard-priority-section--mobile .priority-action-due-line {
  display: inline-flex;
  max-width: 100%;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

#screen-training .dashboard-priority-section--mobile .priority-filter-list--secondary {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  margin: 2px -4px 0 !important;
  padding: 2px 4px 4px !important;
  border: 0 !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#screen-training .dashboard-priority-section--mobile .priority-filter-list--secondary button {
  flex: 0 0 auto;
  min-height: 28px !important;
  padding: 5px 9px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #475569 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

#screen-training .dashboard-priority-section--mobile .priority-filter-list--secondary button.active {
  border-color: #0f172a !important;
  background: #0f172a !important;
  color: #fff !important;
}

#screen-training .dashboard-priority-section--mobile .priority-filter-list--secondary .op-pill__count {
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 11px !important;
}

#screen-training .dashboard-record-grid .training-nav-card.vehicle-dashboard-card {
  position: relative;
  overflow: hidden;
}

#screen-training .dashboard-record-grid .training-nav-card.vehicle-dashboard-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #cbd5e1;
}

#screen-training .dashboard-record-grid .training-nav-card.vehicle-dashboard-card--green::before {
  background: #16a34a;
}

#screen-training .dashboard-record-grid .training-nav-card.vehicle-dashboard-card--orange::before {
  background: #f59e0b;
}

#screen-training .dashboard-record-grid .training-nav-card.vehicle-dashboard-card--red::before {
  background: #dc2626;
}

#screen-training .dashboard-record-grid .training-nav-card.vehicle-dashboard-card--neutral::before {
  background: #94a3b8;
}

#screen-training .dashboard-record-grid .training-nav-card.vehicle-dashboard-card span {
  border-color: #dbe3ee !important;
  background: #f8fafc !important;
  color: #334155 !important;
}

#screen-training .dashboard-record-grid .training-nav-card.vehicle-dashboard-card--green span {
  border-color: #bbf7d0 !important;
  background: #f0fdf4 !important;
  color: #15803d !important;
}

#screen-training .dashboard-record-grid .training-nav-card.vehicle-dashboard-card--orange span {
  border-color: #fed7aa !important;
  background: #fff7ed !important;
  color: #c2410c !important;
}

#screen-training .dashboard-record-grid .training-nav-card.vehicle-dashboard-card--red span {
  border-color: #fecaca !important;
  background: #fff5f5 !important;
  color: #b91c1c !important;
}

.dashboard-desktop-order {
  display: contents;
}

.op-scope .engineer-today-mobile.engineer-today-mobile {
  display: none;
}

.op-scope .engineer-my-proof-mobile.engineer-my-proof-mobile {
  display: none;
}

.op-scope .my-dashboard-page--my-proof .dashboard-desktop-order {
  display: none;
}

.op-scope .my-dashboard-page--my-proof .engineer-my-proof-mobile.engineer-my-proof-mobile {
  display: grid;
  gap: 18px;
  width: 100%;
}

#screen-training .engineer-my-proof-hero {
  width: 100%;
}

#screen-training .engineer-my-proof-mobile .engineer-today-quick-grid {
  display: grid;
  gap: 16px;
}

#screen-training .engineer-my-proof-shortcut-grid,
#screen-training .engineer-my-proof-secondary-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

#screen-training .engineer-my-proof-shortcut {
  align-content: start;
  display: grid;
  gap: 12px;
  min-height: 142px;
  min-width: 0;
  padding: 18px;
  text-align: left;
}

#screen-training .engineer-my-proof-shortcut .op-status {
  justify-self: start;
  max-width: 100%;
}

#screen-training .engineer-my-proof-shortcut .op-card-title {
  font-size: 1rem;
  line-height: 1.22;
}

#screen-training .engineer-my-proof-shortcut .op-body {
  font-size: 0.86rem;
  line-height: 1.4;
  margin: 0;
}

.op-scope .mobile-launcher {
  display: none;
}

.op-scope .evidence-context-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
}

.op-scope .evidence-context-panel summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

.op-scope .evidence-context-panel summary::-webkit-details-marker {
  display: none;
}

.op-scope .evidence-context-panel[open] summary {
  border-bottom: 1px solid var(--line);
}

.op-scope .evidence-context-panel > .op-form-grid,
.op-scope .evidence-context-panel > .op-body,
.op-scope .evidence-context-panel > .op-workflow,
.op-scope .evidence-context-panel > .op-alert {
  margin: 14px;
}

.op-scope .product-library-view-toggle[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  html,
  body,
  .shell,
  .app-screen,
  .screen-view,
  .content-wrap {
    max-width: 100%;
    overflow-x: hidden;
  }

  .app-screen {
    display: block;
  }

  .sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: calc(10px + env(safe-area-inset-top)) 10px 12px;
    overflow: hidden;
  }

  .sidebar .brand-mark.compact {
    display: none;
  }

  .side-nav {
    display: flex;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    scrollbar-width: none;
  }

  .side-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-item {
    min-height: 40px;
    max-width: 100%;
    padding: 0 12px;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-item:not(.active) {
    display: none;
  }

  .nav-item.active {
    width: fit-content;
    max-width: 100%;
  }

  .nav-item span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .profile-card {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    align-items: start;
    padding: 8px 10px;
  }

  .profile-card > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 8px;
    min-width: 0;
  }

  .profile-identity {
    gap: 5px;
  }

  .profile-card strong {
    max-width: calc(100vw - 190px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.98rem;
  }

  .profile-card label {
    font-size: 11px;
    line-height: 1.2;
  }

  .profile-controls {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding-top: 4px;
  }

  .profile-card select {
    flex: 1 1 100%;
    max-width: 100%;
    min-height: 38px;
    margin-top: 0;
  }

  .environment-badge {
    min-height: 24px;
    padding-inline: 9px;
    white-space: nowrap;
  }

  .content-wrap {
    width: 100%;
    margin: 0;
    padding: 18px 12px calc(28px + env(safe-area-inset-bottom));
  }

  .screen-view.active {
    min-width: 0;
  }

  .hub-section-intro,
  .training-dashboard-header,
  .data-panel,
  .card,
  .document-launch-card,
  .hub-launch-card,
  .admin-launch-card,
  .document-tool-card,
  .operations-launch-card,
  .training-nav-card,
  .safety-category-card,
  .instruction-hero,
  .instruction-register,
  .guide-toolbar,
  .guide-list,
  .safety-register {
    max-width: 100%;
    min-width: 0;
  }

  .hub-section-intro,
  .training-dashboard-header,
  .data-panel {
    padding: 18px;
  }

  .hub-section-intro h2,
  .training-dashboard-header h2,
  .data-panel h2 {
    font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
    line-height: 1.12;
  }

  .hub-section-intro p,
  .training-dashboard-header p,
  .data-panel p {
    font-size: 0.98rem;
    line-height: 1.45;
  }

  .document-launch-grid,
  .training-nav-grid,
  .card-grid,
  .safety-card-grid,
  .dashboard-record-grid,
  .dashboard-home-metrics,
  #screen-training .dashboard-record-grid,
  #screen-training .dashboard-home-metrics,
  #screen-training .competence-passport .dashboard-record-grid,
  #screen-training .competence-passport .dashboard-home-metrics {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .document-launch-card,
  .hub-launch-card,
  .admin-launch-card,
  .document-tool-card,
  .operations-launch-card,
  .training-nav-card {
    min-height: auto;
    padding: 18px;
  }

  .op-scope .resources-library-intro,
  .op-scope .resources-library-groups,
  .op-scope .document-tools-desktop-intro,
  .op-scope .document-tools-stat-strip,
  .op-scope .document-tools-desktop-grid {
    display: none !important;
  }

  .op-scope .mobile-launcher {
    display: grid;
    gap: 12px;
  }

  .op-scope .mobile-launcher-head {
    display: grid;
    gap: 4px;
    padding: 16px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
  }

  .op-scope .mobile-launcher-head .op-title {
    font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem);
    line-height: 1.1;
  }

  .op-scope .mobile-launcher-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .op-scope .mobile-launcher-card {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    min-height: 96px;
    padding: 12px;
    text-align: left;
  }

  .op-scope .mobile-launcher-card .op-status {
    justify-self: start;
    max-width: 100%;
  }

  .op-scope .mobile-launcher-card .op-card-title {
    font-size: 0.98rem;
    line-height: 1.18;
  }

  .op-scope .mobile-launcher-card em {
    align-self: end;
    color: var(--op-brand-navy);
    font-size: 0.84rem;
    font-style: normal;
    font-weight: 900;
  }

  .op-scope .product-library-hero.data-panel .op-body,
  .op-scope .product-library-summary,
  .op-scope .product-library-card .product-library-visual,
  .op-scope .product-library-card .product-library-thumb,
  .op-scope .product-library-card .product-library-description,
  .op-scope .product-library-card .product-library-specs,
  .op-scope .product-library-card .product-library-tags,
  .op-scope .product-library-list-head,
  .op-scope .product-library-list-row > span,
  .op-scope .resource-register-page > .op-page-header .op-body,
  .op-scope .resource-register-page > .op-page-header > .op-status,
  .op-scope .resource-register-panel > header .op-body,
  .op-scope .resource-register-panel > header .op-action-row,
  .op-scope .resource-register-table th,
  .op-scope .resource-register-table td[data-label="Author"],
  .op-scope .resource-register-table td[data-label="Date written"],
  .op-scope .resource-register-table td[data-label="Date Written"],
  .op-scope .resource-register-table td[data-label="Current Version"] {
    display: none !important;
  }

  .op-scope .product-library-hero.data-panel,
  .op-scope .product-library-filters.data-panel {
    padding: 14px;
  }

  .op-scope .product-library-hero.data-panel h2 {
    font-size: clamp(1.35rem, 1.12rem + 1vw, 1.72rem);
  }

  .op-scope .product-library-grid,
  .op-scope .product-library-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px;
    min-width: 0;
    overflow: visible;
    padding: 0;
  }

  .op-scope .product-library-card.data-panel,
  .op-scope .product-library-list-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    min-width: 0 !important;
    min-height: auto;
    padding: 10px;
  }

  .op-scope .product-library-card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .op-scope .product-library-card .badge,
  .op-scope .product-library-list-row .badge {
    justify-self: start;
    margin: 0;
    max-width: 100%;
  }

  .op-scope .product-library-card h3,
  .op-scope .product-library-list-row strong {
    font-size: 1rem;
    line-height: 1.22;
  }

  .op-scope .product-library-card h3 + p,
  .op-scope .product-library-list-row small {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.25;
  }

  .op-scope .product-library-actions,
  .op-scope .product-library-actions.compact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border-top: 0;
  }

  .op-scope .product-library-actions .table-action {
    min-height: 34px;
    padding: 0 12px;
  }

  .op-scope .evidence-context-panel summary {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .op-scope .engineer-assigned-forms-panel .op-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .op-scope .resource-register-table,
  .op-scope .resource-register-table thead,
  .op-scope .resource-register-table tbody,
  .op-scope .resource-register-table tr,
  .op-scope .resource-register-table td {
    display: block;
  }

  .op-scope .resource-register-table tr {
    display: grid;
    gap: 8px;
    margin-bottom: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
  }

  .op-scope .resource-register-table tr:last-child {
    margin-bottom: 0;
  }

  .op-scope .resource-register-table td {
    padding: 0;
    border: 0;
  }

  .op-scope .resource-register-table td[data-label="Document Name"] strong,
  .op-scope .resource-register-table td[data-label="Document name"] strong,
  .op-scope .resource-register-table td[data-label="Document"] strong,
  .op-scope .resource-register-table td:first-child strong {
    font-size: 1rem;
    line-height: 1.22;
  }

  .op-scope .resource-register-table td[data-label="Actions"] {
    margin-top: 2px;
  }

  .op-scope .resource-register-actions {
    gap: 8px;
  }

  .op-scope .resource-register-actions .op-button,
  .op-scope .resource-register-actions .table-action {
    min-height: 34px;
    padding: 0 12px;
  }

  .op-scope .vehicle-checklist-task-panel {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .op-scope .vehicle-checklist-task-back {
    justify-self: stretch;
    margin-bottom: 4px;
  }

  .priority-filter-list {
    display: flex !important;
    flex-wrap: wrap !important;
    grid-template-columns: none !important;
    gap: 6px !important;
  }

  .priority-filter-list button {
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    justify-content: center;
    min-height: 32px !important;
    padding: 5px 9px !important;
  }

  #screen-training .dashboard-priority-section .priority-action-row,
  #screen-training .competence-passport .dashboard-priority-section .priority-action-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #screen-training .dashboard-priority-section .priority-action-row em,
  #screen-training .competence-passport .dashboard-priority-section .priority-action-row em,
  #screen-training .dashboard-priority-section .priority-date,
  #screen-training .competence-passport .dashboard-priority-section .priority-date {
    justify-self: start !important;
    min-width: 0 !important;
  }

  .instruction-register {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .instruction-grid {
    min-width: 560px;
    grid-template-columns: minmax(210px, 1fr) 92px 128px;
    gap: 12px;
  }

  .instruction-grid-head span:nth-child(n + 4),
  .instruction-row > span:nth-of-type(n + 2) {
    display: none;
  }

  .mobile-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .mobile-nav-item {
    min-width: 0;
    min-height: 54px;
    padding: 3px 2px;
  }

  .mobile-nav-item small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
  }

  #screen-training .dashboard-desktop-order {
    display: none;
  }

  #screen-training .engineer-today-mobile {
    display: grid;
    gap: 14px;
  }

  #screen-training .engineer-my-proof-mobile {
    display: grid;
    gap: 14px;
  }

  #screen-training .engineer-today-hero,
  #screen-training .engineer-today-panel {
    padding: 18px;
  }

  #screen-training .engineer-today-hero .op-title {
    font-size: clamp(1.55rem, 1.25rem + 1vw, 2rem);
  }

  #screen-training .engineer-today-quick-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  #screen-training .engineer-mobile-my-assets-section {
    gap: 14px;
  }

  #screen-training .engineer-mobile-asset-counts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px;
  }

  #screen-training .engineer-mobile-asset-counts span {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 10px;
  }

  #screen-training .engineer-mobile-asset-counts strong {
    color: var(--ink);
    font-size: 1.2rem;
    line-height: 1;
  }

  #screen-training .engineer-mobile-asset-counts small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
  }

  #screen-training .engineer-mobile-asset-list {
    display: grid;
    gap: 10px;
  }

  #screen-training .engineer-mobile-asset-card {
    display: grid;
    gap: 12px;
    padding: 14px;
  }

  #screen-training .engineer-mobile-asset-card__head {
    align-items: start;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #screen-training .engineer-mobile-asset-card__head .op-card-title {
    display: block;
    margin-top: 7px;
  }

  #screen-training .engineer-mobile-asset-card__facts {
    display: grid;
    gap: 8px;
    margin: 0;
  }

  #screen-training .engineer-mobile-asset-card__facts div {
    border-top: 1px solid var(--line);
    display: grid;
    gap: 3px;
    padding-top: 8px;
  }

  #screen-training .engineer-mobile-asset-card__facts dt {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  #screen-training .engineer-mobile-asset-card__facts dd {
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 700;
    margin: 0;
  }

  #screen-training .engineer-mobile-asset-card__actions .op-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #screen-training .engineer-mobile-asset-card__actions .op-action-row .op-button:only-child {
    grid-column: 1 / -1;
  }

  #screen-training .engineer-my-proof-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #screen-training .engineer-my-proof-secondary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  #screen-training .engineer-my-proof-shortcut {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    min-height: 116px;
    padding: 12px;
    text-align: left;
  }

  #screen-training .engineer-my-proof-shortcut .op-status {
    justify-self: start;
    max-width: 100%;
  }

  #screen-training .engineer-my-proof-shortcut .op-card-title {
    font-size: 0.98rem;
    line-height: 1.18;
  }

  #screen-training .engineer-my-proof-shortcut .op-body {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.28;
  }

  #screen-training .engineer-today-shortcut {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  #screen-training .engineer-today-shortcut .op-body {
    margin: 0;
  }

  #screen-training .engineer-today-shortcut .op-button,
  #screen-training .engineer-today-actions .op-button {
    width: 100%;
    min-height: 42px;
  }

  #screen-training .engineer-today-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  #screen-training .engineer-today-status-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
  }

  #screen-training .engineer-today-status-grid span {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: #fff;
  }

  #screen-training .engineer-today-status-grid span:last-child {
    border-bottom: 0;
  }

  #screen-training .engineer-today-status-grid strong {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.25;
  }

  #screen-training .engineer-today-status-grid em {
    color: var(--muted);
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  #screen-training .engineer-today-mini-list {
    display: grid;
    gap: 8px;
  }

  #screen-training .engineer-today-mini-row {
    display: grid;
    gap: 7px;
    min-height: auto;
    padding: 14px;
    text-align: left;
  }

  #screen-training .engineer-today-mini-row .op-status {
    justify-self: start;
  }

  #screen-training .engineer-my-proof-row {
    display: grid;
    gap: 8px;
    min-height: auto;
    padding: 12px;
    text-align: left;
  }

  #screen-training .engineer-my-proof-row .op-status {
    justify-self: start;
  }

  #screen-training .engineer-my-proof-row .op-card-title {
    font-size: 0.96rem;
    line-height: 1.22;
  }

  #screen-training .engineer-my-proof-row .op-meta {
    font-style: normal;
  }

  #screen-training .engineer-my-proof-row__action {
    display: flex;
    width: 100%;
  }

  #screen-training .engineer-my-proof-row__action .op-button {
    width: 100%;
    justify-content: center;
  }

  #screen-training .engineer-today-mini-row strong {
    color: var(--ink);
    font-size: 0.98rem;
    line-height: 1.25;
  }

  #screen-training .engineer-today-secondary {
    padding-top: 4px;
  }

  #screen-training .engineer-today-secondary .dashboard-record-section {
    order: 1;
  }

  #screen-training .engineer-today-secondary .dashboard-home-intro {
    order: 2;
  }
}

@media (max-width: 720px) {
  .academy-reader .module-detail-hero {
    padding: 18px;
  }

  .academy-reader-metrics {
    grid-template-columns: 1fr;
  }

  .academy-reader-metrics span {
    min-height: auto;
    padding: 12px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .academy-reader-metrics span:last-child {
    border-bottom: 0;
  }

  .academy-reader-metrics strong {
    font-size: 18px;
    line-height: 1.14;
  }

  .academy-reader-contents .op-page-header__top,
  .academy-reader-progress {
    grid-template-columns: 1fr;
  }

  .academy-reader-tools,
  .academy-reader-progress {
    justify-items: stretch;
  }

  .academy-reader-progress {
    top: 0;
  }

  .academy-reader-progress strong {
    order: -1;
    text-align: left;
  }

  .academy-reader-contents__list {
    grid-template-columns: 1fr;
  }

  .academy-reader-section summary {
    gap: 8px;
    grid-template-columns: 30px minmax(0, 1fr) auto 18px;
  }

  .academy-reader-section summary::after {
    justify-self: end;
  }

  .academy-reader-section summary .op-status {
    justify-self: start;
  }

  .academy-reader-next-action .op-action-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .module-detail .learn-row {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .module-detail .learn-row .op-status {
    grid-column: 2;
    justify-self: start;
  }
}

@media (min-width: 1181px) {
  .app-screen {
    display: block;
    min-height: 100vh;
    padding-left: 76px;
    overflow-x: hidden;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 80;
    width: 76px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 10px;
    overflow: visible;
    background: #0f172a;
    border-right: 1px solid rgba(226, 232, 240, 0.16);
    box-shadow: 10px 0 28px rgba(15, 23, 42, 0.12);
    transition: width 160ms ease, box-shadow 160ms ease;
  }

  .sidebar:hover,
  .sidebar:focus-within {
    width: 272px;
    box-shadow: 18px 0 44px rgba(15, 23, 42, 0.2);
  }

  .sidebar .brand-mark.compact {
    width: 56px;
    min-width: 56px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
  }

  .sidebar .brand-mark.compact .nav-brand-logo,
  .sidebar .brand-mark.compact .brand-logo.nav-brand-logo {
    width: 46px;
    max-width: none;
    object-fit: contain;
    object-position: left center;
    transition: width 160ms ease;
  }

  .sidebar:hover .brand-mark.compact,
  .sidebar:focus-within .brand-mark.compact {
    width: 100%;
    justify-content: flex-start;
  }

  .sidebar:hover .brand-mark.compact .nav-brand-logo,
  .sidebar:hover .brand-mark.compact .brand-logo.nav-brand-logo,
  .sidebar:focus-within .brand-mark.compact .nav-brand-logo,
  .sidebar:focus-within .brand-mark.compact .brand-logo.nav-brand-logo {
    width: 154px;
  }

  .desktop-nav-stack {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0;
    scrollbar-width: thin;
  }

  .desktop-sidebar-shell {
    order: 1;
    display: grid;
    gap: 10px;
    align-content: start;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .desktop-shell-group {
    min-width: 0;
    display: grid;
    gap: 6px;
    padding: 0;
    border-right: 0;
  }

  .desktop-shell-group:not(:has(.desktop-sidebar-item:not(.hidden))) {
    display: none;
  }

  .desktop-shell-label {
    display: block;
    max-width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    color: rgba(203, 213, 225, 0.78);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.1;
    text-transform: uppercase;
    transition: opacity 120ms ease;
  }

  .sidebar:hover .desktop-shell-label,
  .sidebar:focus-within .desktop-shell-label {
    max-width: none;
    height: auto;
    opacity: 1;
    padding: 6px 10px 0;
  }

  .desktop-sidebar-item.nav-item {
    width: 56px;
    min-height: 46px;
    justify-content: center;
    gap: 0;
    padding: 0;
    color: rgba(226, 232, 240, 0.88);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(226, 232, 240, 0.12);
    box-shadow: none;
  }

  .desktop-sidebar-item.nav-item .tile-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: #bfdbfe;
    background: rgba(15, 23, 42, 0.18);
    border-color: rgba(191, 219, 254, 0.22);
  }

  .desktop-sidebar-item.nav-item span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .sidebar:hover .desktop-sidebar-item.nav-item,
  .sidebar:focus-within .desktop-sidebar-item.nav-item {
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 12px;
  }

  .sidebar:hover .desktop-sidebar-item.nav-item span:last-child,
  .sidebar:focus-within .desktop-sidebar-item.nav-item span:last-child {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .desktop-sidebar-item.nav-item:not(.active):hover,
  .desktop-sidebar-item.nav-item:focus-visible {
    color: #f8fafc;
    background: rgba(59, 130, 246, 0.22);
    border-color: rgba(191, 219, 254, 0.34);
  }

  .desktop-sidebar-item.nav-item.active {
    color: #1e3a8a;
    background: #dbeafe;
    border-color: #bfdbfe;
  }

  .desktop-sidebar-item.nav-item.active .tile-icon {
    color: #1e3a8a;
    background: #eff6ff;
    border-color: #bfdbfe;
  }

  .profile-card {
    width: 52px;
    min-width: 52px;
    max-width: none;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 0;
    align-items: center;
    overflow: hidden;
    padding: 7px;
    color: #f8fafc;
    border: 1px solid rgba(226, 232, 240, 0.14);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: none;
    transition: width 160ms ease, gap 160ms ease;
  }

  .sidebar:hover .profile-card,
  .sidebar:focus-within .profile-card {
    width: 100%;
    gap: 8px;
  }

  .profile-card-content {
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
  }

  .sidebar:hover .profile-card-content,
  .sidebar:focus-within .profile-card-content {
    opacity: 1;
    pointer-events: auto;
  }

  .profile-card strong,
  .profile-card label {
    color: #f8fafc;
  }

  .profile-card select {
    max-width: 158px;
  }

  .content-wrap {
    width: min(1540px, calc(100vw - 124px));
    max-width: calc(100vw - 124px);
    margin: 0 auto;
    padding: 24px 0 56px;
  }

  .content-wrap > .topbar {
    display: none;
  }
}

/* Pilot A navigation refresh: visual-only drawer styling. */
.navigation-drawer {
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  box-shadow: 4px 0 18px rgba(15, 23, 42, 0.04);
}

.navigation-drawer .brand-mark.compact {
  min-height: 48px;
  justify-content: flex-start;
  border-radius: 0;
  border-bottom: 1px solid #eef0f3;
}

.navigation-drawer .brand-mark.compact .nav-brand-logo,
.navigation-drawer .brand-mark.compact .brand-logo.nav-brand-logo {
  width: 172px;
  max-height: 48px;
  object-fit: contain;
  object-position: left center;
}

.navigation-drawer .desktop-nav-stack {
  gap: 18px;
}

.navigation-drawer .desktop-sidebar-shell {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.navigation-drawer .desktop-sidebar-shell {
  gap: 2px;
}

.navigation-drawer .desktop-shell-group {
  gap: 2px;
  border-right: 0;
}

.navigation-drawer .desktop-shell-label {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.navigation-drawer .desktop-shell-group + .desktop-shell-group .desktop-shell-label {
  margin-top: 16px;
}

.navigation-drawer .nav-item,
.navigation-drawer .desktop-sidebar-item.nav-item {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 12px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  box-shadow: none;
}

.navigation-drawer .nav-item .nav-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: #475569;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.navigation-drawer .nav-item span:last-child {
  color: inherit;
}

.navigation-drawer .nav-item:not(.active):hover,
.navigation-drawer .nav-item:focus-visible,
.navigation-drawer .desktop-sidebar-item.nav-item:not(.active):hover,
.navigation-drawer .desktop-sidebar-item.nav-item:focus-visible {
  color: #0f172a;
  background: #f1f5f9;
  border-left-color: transparent;
}

.navigation-drawer .nav-item.active,
.navigation-drawer .desktop-sidebar-item.nav-item.active {
  color: #2563eb;
  font-weight: 650;
  background: #eff6ff;
  border-left-color: #2563eb;
  box-shadow: inset 2px 0 0 #2563eb;
}

.navigation-drawer .nav-item.active::before {
  display: none;
}

.navigation-drawer .nav-item.active .nav-icon,
.navigation-drawer .desktop-sidebar-item.nav-item.active .nav-icon {
  color: #2563eb;
}

.navigation-drawer .profile-card {
  width: min(100%, 212px);
  max-width: none;
  align-self: flex-start;
  padding: 4px 2px;
  color: #0f172a;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.navigation-drawer .profile-card p,
.navigation-drawer .profile-card small,
.navigation-drawer .profile-card label {
  color: #64748b;
}

.navigation-drawer .profile-card strong {
  color: #0f172a;
}

.navigation-drawer .avatar {
  color: #ffffff;
  background: #2563eb;
}

@media (min-width: 1181px) {
  .shell:has(.app-screen:not(.hidden)) {
    contain: none;
  }

  .app-screen {
    padding-left: 76px;
  }

  .navigation-drawer {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 90;
    width: 76px;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    gap: 14px;
    padding: 14px 10px;
    overflow: visible;
    box-shadow: 4px 0 18px rgba(15, 23, 42, 0.04);
    transition: width 160ms ease, box-shadow 160ms ease, padding 160ms ease;
  }

  .navigation-drawer:hover .brand-mark.compact,
  .navigation-drawer:focus-within .brand-mark.compact {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    gap: 0;
  }

  .navigation-drawer:hover,
  .navigation-drawer:focus-within {
    width: 264px;
    gap: 18px;
    padding: 18px 14px;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 12px 0 32px rgba(15, 23, 42, 0.1);
  }

  .navigation-drawer .brand-mark.compact {
    width: 56px;
    min-width: 56px;
    min-height: 66px;
    height: 66px;
    padding-bottom: 14px;
    justify-content: center;
    gap: 0;
    overflow: hidden;
  }

  .navigation-drawer .brand-mark.compact .nav-brand-logo,
  .navigation-drawer .brand-mark.compact .brand-logo.nav-brand-logo {
    display: none;
  }

  .navigation-drawer .brand-mark.compact::before {
    content: "";
    display: block;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    background: url("assets/opsproof-mark.svg") center / contain no-repeat;
    transition: width 160ms ease, flex-basis 160ms ease, background-size 160ms ease;
  }

  .navigation-drawer .brand-mark.compact::after {
    content: none;
  }

  .navigation-drawer:hover .brand-mark.compact .nav-brand-logo,
  .navigation-drawer:hover .brand-mark.compact .brand-logo.nav-brand-logo,
  .navigation-drawer:focus-within .brand-mark.compact .nav-brand-logo,
  .navigation-drawer:focus-within .brand-mark.compact .brand-logo.nav-brand-logo {
    display: none;
  }

  .navigation-drawer:hover .brand-mark.compact::after,
  .navigation-drawer:focus-within .brand-mark.compact::after {
    content: none;
  }

  .navigation-drawer:hover .brand-mark.compact::before,
  .navigation-drawer:focus-within .brand-mark.compact::before {
    width: 206px;
    height: 58px;
    flex-basis: 206px;
    background-image: url("assets/opsproof-logo-nav.svg");
    background-size: contain;
  }

  .navigation-drawer .desktop-nav-stack {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 18px;
    overflow: visible;
    padding: 0;
  }

  .navigation-drawer .desktop-sidebar-shell {
    display: grid;
    gap: 2px;
  }

  .navigation-drawer:hover .desktop-shell-label,
  .navigation-drawer:focus-within .desktop-shell-label {
    display: block;
    max-width: none;
    height: auto;
    overflow: visible;
    opacity: 1;
    padding: 0 12px 6px;
  }

  .navigation-drawer .desktop-shell-label {
    max-width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    padding: 0;
  }

  .navigation-drawer:hover .desktop-sidebar-item.nav-item,
  .navigation-drawer:focus-within .desktop-sidebar-item.nav-item {
    width: 100%;
    gap: 10px;
    padding: 0 12px;
  }

  .navigation-drawer:hover .desktop-shell-group + .desktop-shell-group .desktop-shell-label,
  .navigation-drawer:focus-within .desktop-shell-group + .desktop-shell-group .desktop-shell-label {
    margin-top: 16px;
  }

  .navigation-drawer .desktop-sidebar-item.nav-item {
    width: 56px;
    justify-content: center;
    gap: 0;
    padding: 0;
  }

  .navigation-drawer .desktop-sidebar-item.nav-item .nav-icon {
    display: block;
  }

  .navigation-drawer:hover .desktop-sidebar-item.nav-item span:last-child,
  .navigation-drawer:focus-within .desktop-sidebar-item.nav-item span:last-child {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .navigation-drawer .desktop-sidebar-item.nav-item span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .navigation-drawer:hover .profile-card,
  .navigation-drawer:focus-within .profile-card {
    width: min(100%, 212px);
    min-width: 0;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    padding: 4px 2px;
  }

  .navigation-drawer .profile-card {
    width: 32px;
    min-width: 32px;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  .navigation-drawer .profile-card .avatar {
    height: 32px;
    width: 32px;
  }

  .navigation-drawer:hover .profile-card-content,
  .navigation-drawer:focus-within .profile-card-content {
    opacity: 1;
    pointer-events: auto;
  }

  .navigation-drawer .profile-card-content {
    opacity: 0;
    pointer-events: none;
  }

  .content-wrap {
    width: min(1540px, calc(100vw - 124px));
    max-width: calc(100vw - 124px);
  }
}

.erp-shell-preview {
  --erp-shell-border: #dbe7f7;
  --erp-shell-muted: #5b6b83;
}

.erp-shell-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.erp-shell-sidebar,
.erp-shell-detail-card,
.erp-shell-landing {
  border: 1px solid var(--erp-shell-border);
  background: #ffffff;
  border-radius: 8px;
}

.erp-shell-sidebar {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
}

.erp-shell-detail {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.erp-shell-tree-group {
  border-top: 1px solid #eef2f7;
  padding: 4px 0;
}

.erp-shell-tree-group:first-of-type {
  border-top: 0;
}

.erp-shell-tree-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 30px;
  padding: 3px 6px 3px calc(6px + (var(--erp-depth, 0) * 14px));
  color: #0f172a;
  cursor: pointer;
  font-weight: 780;
  list-style-position: outside;
}

.erp-shell-tree-group--nested {
  border-top: 0;
  padding: 0;
}

.erp-shell-tree-group--nested summary {
  font-weight: 700;
}

.erp-shell-tree-group summary[data-erp-route]:hover,
.erp-shell-tree-group summary[data-erp-route]:focus-visible,
.erp-shell-tree-group summary.active {
  background: #f8fafc;
  color: #0f172a;
}

.erp-shell-tree-children {
  display: grid;
  gap: 1px;
  padding: 1px 0 3px;
}

.erp-shell-tree-group:not([open]) > .erp-shell-tree-children {
  display: none;
}

.erp-shell-tree-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #334155;
  padding: 4px 6px 4px calc(12px + (var(--erp-depth, 0) * 16px));
  text-align: left;
  cursor: pointer;
}

.erp-shell-tree-row:hover,
.erp-shell-tree-row:focus-visible,
.erp-shell-tree-row.active {
  background: #f1f5f9;
  color: #1e3a8a;
}

.erp-shell-tree-row.active {
  background: #eff6ff;
  box-shadow: inset 2px 0 0 #2563eb;
}

.erp-shell-tree-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 660;
}

.erp-shell-tree-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
}

.desktop-sidebar-shell.erp-active-sidebar {
  --erp-sidebar-icon-column: 22px;
  --erp-sidebar-marker-column: 16px;
  --erp-sidebar-parent-pad: 2px;
  --erp-sidebar-child-pad: 28px;
  --erp-sidebar-child-label-column: 52px;
  --erp-sidebar-depth-step: 12px;
  --erp-sidebar-nav-content-width: 212px;
  width: min(100%, var(--erp-sidebar-nav-content-width));
  justify-self: start;
  display: grid;
  gap: 3px;
  align-content: start;
  overflow-x: hidden;
}

.desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group {
  min-width: 0;
  border-top: 0;
  width: 100%;
}

.desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group:first-of-type {
  border-top: 0;
}

.desktop-sidebar-shell.erp-active-sidebar > .erp-shell-tree-group > .erp-shell-parent-row {
  align-items: center;
  border-left: 2px solid transparent;
  box-sizing: border-box;
  color: #1f2937;
  display: grid;
  font-size: 0.76rem;
  font-weight: 720;
  gap: 0 9px;
  grid-template-columns: var(--erp-sidebar-icon-column) minmax(0, 1fr) var(--erp-sidebar-marker-column);
  letter-spacing: 0;
  line-height: 1.2;
  min-height: 36px;
  width: 100%;
}

.desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group--nested > .erp-shell-nested-row {
  color: #475569;
  display: grid;
  font-size: 0.72rem;
  font-weight: 650;
  gap: 0 9px;
  grid-template-columns: minmax(0, 1fr) var(--erp-sidebar-marker-column);
}

.desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group > .erp-shell-parent-row,
.desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group--nested > .erp-shell-nested-row,
.desktop-sidebar-shell.erp-active-sidebar .erp-shell-child-row {
  min-height: 30px;
  box-sizing: border-box;
  color: #334155;
  border-radius: 7px;
  text-align: left;
  width: 100%;
}

.desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group > .erp-shell-parent-row,
.desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group--nested > .erp-shell-nested-row {
  appearance: none;
  justify-content: stretch;
  list-style: none;
  padding: 5px 8px 5px calc(var(--erp-sidebar-parent-pad) + (var(--erp-depth, 0) * var(--erp-sidebar-depth-step)));
}

.desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group--nested > .erp-shell-nested-row {
  padding-left: calc(var(--erp-sidebar-child-label-column) + (var(--erp-depth, 0) * var(--erp-sidebar-depth-step)));
}

.desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group > .erp-shell-parent-row::-webkit-details-marker,
.desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group--nested > .erp-shell-nested-row::-webkit-details-marker {
  display: none;
}

.desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group > .erp-shell-parent-row::marker,
.desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group--nested > .erp-shell-nested-row::marker {
  content: "";
}

.desktop-sidebar-shell.erp-active-sidebar .erp-shell-child-row {
  align-items: center;
  display: grid;
  font-size: 0.72rem;
  font-weight: 600;
  gap: 0 9px;
  grid-template-columns: minmax(0, 1fr) var(--erp-sidebar-marker-column);
  padding: 5px 8px 5px calc(var(--erp-sidebar-child-label-column) + (var(--erp-depth, 0) * var(--erp-sidebar-depth-step)));
}

.desktop-sidebar-shell.erp-active-sidebar .erp-shell-section-icon {
  align-items: center;
  border-radius: 7px;
  color: #475569;
  display: inline-flex;
  flex: 0 0 18px;
  height: 18px;
  justify-content: center;
  justify-self: center;
  width: 18px;
}

.desktop-sidebar-shell.erp-active-sidebar .erp-shell-section-icon svg {
  display: block;
  fill: none;
  height: 17px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 17px;
}

.desktop-sidebar-shell.erp-active-sidebar .erp-shell-section-label {
  justify-self: stretch;
  min-width: 0;
  text-align: left;
}

.desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-meta {
  justify-self: center;
  min-width: 0;
}

.desktop-sidebar-shell.erp-active-sidebar .erp-shell-planned-marker {
  align-items: center;
  display: inline-flex;
  height: 16px;
  justify-content: center;
  justify-self: center;
  width: 16px;
}

.desktop-sidebar-shell.erp-active-sidebar .erp-shell-planned-marker > span {
  background: #94a3b8;
  border-radius: 999px;
  display: block;
  height: 5px;
  opacity: 0.72;
  width: 5px;
}

.desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group > .erp-shell-parent-row:hover,
.desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group > .erp-shell-parent-row:focus-visible,
.desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group--nested > .erp-shell-nested-row:hover,
.desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group--nested > .erp-shell-nested-row:focus-visible,
.desktop-sidebar-shell.erp-active-sidebar .erp-shell-child-row:not(:disabled):hover,
.desktop-sidebar-shell.erp-active-sidebar .erp-shell-child-row:focus-visible {
  color: #0f172a;
  background: #f1f5f9;
}

.desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group > .erp-shell-parent-row.active,
.desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group--nested > .erp-shell-nested-row.active {
  background: #f8fafc;
  border-left-color: #93c5fd;
  color: #0f172a;
}

.desktop-sidebar-shell.erp-active-sidebar > .erp-shell-tree-group > .erp-shell-parent-row.active .erp-shell-section-icon {
  color: #2563eb;
}

.desktop-sidebar-shell.erp-active-sidebar .erp-shell-child-row.active {
  background: #eff6ff;
  color: #1d4ed8;
}

.desktop-sidebar-shell.erp-active-sidebar .erp-shell-child-row:disabled {
  color: #64748b;
  cursor: default;
}

.desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-label,
.desktop-sidebar-shell.erp-active-sidebar .erp-shell-section-label,
.desktop-sidebar-shell.erp-active-sidebar .erp-shell-nested-row > span:first-child {
  justify-self: stretch;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-sidebar-shell.erp-active-sidebar .erp-shell-coming-soon-badge {
  min-height: 16px;
  padding: 0 5px;
  font-size: 9px;
}

.erp-shell-tree-meta .op-status {
  max-width: 104px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.erp-shell-coming-soon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 6px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #f8fbff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.erp-shell-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #eef4fb;
  color: #18345f;
  font-size: 12px;
  font-weight: 800;
}

.erp-shell-landing,
.erp-shell-detail-card {
  padding: 18px;
}

.erp-shell-detail-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.erp-shell-detail-title {
  margin: 0 0 6px;
  color: #020b1f;
  font-size: 26px;
  line-height: 1.15;
}

.erp-shell-status-row,
.erp-shell-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.erp-shell-area-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.erp-shell-area-list-header,
.erp-shell-area-row,
.erp-shell-area-actions {
  display: flex;
  align-items: center;
}

.erp-shell-area-list-header {
  justify-content: space-between;
  gap: 12px;
}

.erp-shell-area-row {
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border: 1px solid #edf2f8;
  border-radius: 8px;
  background: #fbfdff;
}

.erp-shell-area-row h4 {
  margin: 0 0 4px;
  color: #09204a;
  font-size: 15px;
}

.erp-shell-area-row p {
  margin: 0;
  color: var(--erp-shell-muted);
  font-size: 13px;
  line-height: 1.35;
}

.erp-shell-area-actions {
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.erp-shell-technical-map {
  margin-top: 14px;
  border-top: 1px solid #edf2f8;
  padding-top: 12px;
}

.erp-shell-technical-map summary {
  color: #34547d;
  cursor: pointer;
  font-weight: 800;
}

.erp-shell-route-summary {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 12px;
  border: 1px solid #edf2f8;
  border-radius: 8px;
  background: #f8fbff;
}

.erp-shell-route-summary div {
  display: grid;
  gap: 3px;
}

.erp-shell-route-summary dt {
  color: #7b8aa3;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.erp-shell-route-summary dd {
  margin: 0;
  color: #173256;
  font-weight: 700;
}

.erp-shell-coming-soon {
  margin: 14px 0 0;
  padding: 12px;
  border-radius: 8px;
  background: #eef5ff;
  color: #173256;
  font-weight: 700;
}

@media (max-width: 980px) {
  .erp-shell-workspace {
    grid-template-columns: 1fr;
  }

  .erp-shell-sidebar {
    position: static;
    max-height: none;
  }

  .erp-shell-area-row,
  .erp-shell-area-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 1180px) {
  .navigation-drawer {
    gap: 12px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
  }

  .navigation-drawer .desktop-sidebar-shell {
    padding: 0;
  }

  .navigation-drawer .desktop-shell-label {
    padding: 0 8px 2px;
  }

  .navigation-drawer .desktop-sidebar-item.nav-item {
    min-height: 36px;
  }

  .navigation-drawer .profile-controls label[for="role-select"],
  .navigation-drawer .profile-controls #role-select {
    display: none;
  }

  .mobile-nav {
    display: none !important;
  }
}

@media (min-width: 1181px) {
  body.sidebar-navigation-expanded .app-screen {
    padding-left: 264px;
  }

  body.sidebar-navigation-focus .app-screen {
    padding-left: 76px;
  }

  body.sidebar-navigation-expanded .navigation-drawer,
  body.sidebar-navigation-focus.sidebar-focus-open .navigation-drawer {
    width: 264px;
    gap: 18px;
    padding: 18px 14px;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 12px 0 32px rgba(15, 23, 42, 0.1);
  }

  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer:hover,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer:focus-within {
    width: 76px;
    gap: 14px;
    padding: 14px 10px;
    overflow: visible;
    box-shadow: 4px 0 18px rgba(15, 23, 42, 0.04);
  }

  body.sidebar-navigation-expanded .navigation-drawer .brand-mark.compact,
  body.sidebar-navigation-focus.sidebar-focus-open .navigation-drawer .brand-mark.compact {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    gap: 0;
  }

  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer .brand-mark.compact {
    width: 56px;
    min-width: 56px;
    justify-content: center;
    gap: 0;
  }

  body.sidebar-navigation-expanded .navigation-drawer .brand-mark.compact .nav-brand-logo,
  body.sidebar-navigation-expanded .navigation-drawer .brand-mark.compact .brand-logo.nav-brand-logo,
  body.sidebar-navigation-focus.sidebar-focus-open .navigation-drawer .brand-mark.compact .nav-brand-logo,
  body.sidebar-navigation-focus.sidebar-focus-open .navigation-drawer .brand-mark.compact .brand-logo.nav-brand-logo,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer .brand-mark.compact .nav-brand-logo,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer .brand-mark.compact .brand-logo.nav-brand-logo {
    display: none;
  }

  body.sidebar-navigation-expanded .navigation-drawer .brand-mark.compact::before,
  body.sidebar-navigation-focus.sidebar-focus-open .navigation-drawer .brand-mark.compact::before {
    width: 206px;
    height: 58px;
    flex-basis: 206px;
    background-image: url("assets/opsproof-logo-nav.svg");
    background-size: contain;
  }

  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer .brand-mark.compact::before {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    background-image: url("assets/opsproof-mark.svg");
    background-size: contain;
  }

  body.sidebar-navigation-expanded .navigation-drawer .desktop-nav-stack,
  body.sidebar-navigation-focus.sidebar-focus-open .navigation-drawer .desktop-nav-stack {
    width: min(100%, 212px);
    align-self: flex-start;
  }

  body.sidebar-navigation-expanded .desktop-sidebar-shell.erp-active-sidebar,
  body.sidebar-navigation-focus.sidebar-focus-open .desktop-sidebar-shell.erp-active-sidebar {
    gap: 3px;
    width: min(100%, var(--erp-sidebar-nav-content-width));
  }

  body.sidebar-navigation-focus:not(.sidebar-focus-open) .desktop-sidebar-shell.erp-active-sidebar,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer:hover .desktop-sidebar-shell.erp-active-sidebar,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer:focus-within .desktop-sidebar-shell.erp-active-sidebar {
    gap: 2px;
    width: 56px;
  }

  body.sidebar-navigation-expanded .desktop-sidebar-shell.erp-active-sidebar > .erp-shell-tree-group,
  body.sidebar-navigation-focus.sidebar-focus-open .desktop-sidebar-shell.erp-active-sidebar > .erp-shell-tree-group {
    border-top: 0;
    padding: 0;
  }

  body.sidebar-navigation-expanded .desktop-sidebar-shell.erp-active-sidebar > .erp-shell-tree-group > .erp-shell-parent-row,
  body.sidebar-navigation-focus.sidebar-focus-open .desktop-sidebar-shell.erp-active-sidebar > .erp-shell-tree-group > .erp-shell-parent-row {
    grid-template-columns: var(--erp-sidebar-icon-column) minmax(0, 1fr) var(--erp-sidebar-marker-column);
    width: 100%;
    min-height: 36px;
    justify-content: stretch;
    justify-items: stretch;
    padding: 5px 8px 5px calc(var(--erp-sidebar-parent-pad) + (var(--erp-depth, 0) * var(--erp-sidebar-depth-step)));
  }

  body.sidebar-navigation-focus:not(.sidebar-focus-open) .desktop-sidebar-shell.erp-active-sidebar > .erp-shell-tree-group > .erp-shell-parent-row,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer:hover .desktop-sidebar-shell.erp-active-sidebar > .erp-shell-tree-group > .erp-shell-parent-row,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer:focus-within .desktop-sidebar-shell.erp-active-sidebar > .erp-shell-tree-group > .erp-shell-parent-row {
    grid-template-columns: 1fr;
    width: 56px;
    min-height: 42px;
    justify-content: center;
    justify-items: center;
    padding: 4px 0;
  }

  body.sidebar-navigation-expanded .desktop-sidebar-shell.erp-active-sidebar .erp-shell-section-label,
  body.sidebar-navigation-focus.sidebar-focus-open .desktop-sidebar-shell.erp-active-sidebar .erp-shell-section-label {
    display: block;
  }

  body.sidebar-navigation-focus:not(.sidebar-focus-open) .desktop-sidebar-shell.erp-active-sidebar .erp-shell-section-label,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer:hover .desktop-sidebar-shell.erp-active-sidebar .erp-shell-section-label,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer:focus-within .desktop-sidebar-shell.erp-active-sidebar .erp-shell-section-label {
    display: none;
  }

  body.sidebar-navigation-expanded .desktop-sidebar-shell.erp-active-sidebar > .erp-shell-tree-group > .erp-shell-tree-children,
  body.sidebar-navigation-focus.sidebar-focus-open .desktop-sidebar-shell.erp-active-sidebar > .erp-shell-tree-group > .erp-shell-tree-children {
    display: block;
  }

  body.sidebar-navigation-expanded .desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-meta,
  body.sidebar-navigation-expanded .desktop-sidebar-shell.erp-active-sidebar .erp-shell-planned-marker,
  body.sidebar-navigation-focus.sidebar-focus-open .desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-meta,
  body.sidebar-navigation-focus.sidebar-focus-open .desktop-sidebar-shell.erp-active-sidebar .erp-shell-planned-marker {
    display: inline-flex;
  }

  body.sidebar-navigation-focus:not(.sidebar-focus-open) .desktop-sidebar-shell.erp-active-sidebar > .erp-shell-tree-group > .erp-shell-tree-children,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-meta,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .desktop-sidebar-shell.erp-active-sidebar .erp-shell-planned-marker,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .desktop-sidebar-shell.erp-active-sidebar .erp-shell-coming-soon-badge,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer:hover .desktop-sidebar-shell.erp-active-sidebar > .erp-shell-tree-group > .erp-shell-tree-children,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer:hover .desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-meta,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer:hover .desktop-sidebar-shell.erp-active-sidebar .erp-shell-planned-marker,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer:hover .desktop-sidebar-shell.erp-active-sidebar .erp-shell-coming-soon-badge,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer:focus-within .desktop-sidebar-shell.erp-active-sidebar > .erp-shell-tree-group > .erp-shell-tree-children,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer:focus-within .desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-meta,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer:focus-within .desktop-sidebar-shell.erp-active-sidebar .erp-shell-planned-marker,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer:focus-within .desktop-sidebar-shell.erp-active-sidebar .erp-shell-coming-soon-badge {
    display: none;
  }

  body.sidebar-navigation-expanded .navigation-drawer .profile-card,
  body.sidebar-navigation-focus.sidebar-focus-open .navigation-drawer .profile-card {
    width: min(100%, 212px);
    min-width: 0;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    padding: 4px 2px;
  }

  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer .profile-card,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer:hover .profile-card,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer:focus-within .profile-card {
    width: 32px;
    min-width: 32px;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  body.sidebar-navigation-expanded .navigation-drawer .profile-card-content,
  body.sidebar-navigation-focus.sidebar-focus-open .navigation-drawer .profile-card-content {
    opacity: 1;
    pointer-events: auto;
  }

  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer .profile-card-content,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer:hover .profile-card-content,
  body.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer:focus-within .profile-card-content {
    opacity: 0;
    pointer-events: none;
  }

  body.sidebar-theme-dark .navigation-drawer {
    background: #0f141b;
    border-right-color: rgba(148, 163, 184, 0.12);
    box-shadow: 12px 0 28px rgba(2, 6, 23, 0.24);
  }

  body.sidebar-theme-dark .navigation-drawer .brand-mark.compact {
    min-height: 48px;
    border-bottom-color: rgba(148, 163, 184, 0.1);
    background: transparent;
    box-shadow: none;
  }

  body.sidebar-theme-dark .navigation-drawer .brand-mark.compact::before {
    background-image: url("assets/opsproof-logo-light.svg");
    opacity: 0.95;
  }

  body.sidebar-theme-dark.sidebar-navigation-expanded .navigation-drawer .brand-mark.compact::before,
  body.sidebar-theme-dark.sidebar-navigation-focus.sidebar-focus-open .navigation-drawer .brand-mark.compact::before {
    width: 188px;
    height: 50px;
    flex-basis: 188px;
  }

  body.sidebar-theme-dark.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer .brand-mark.compact::before {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    background-position: left center;
    background-size: auto 42px;
  }

  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar > .erp-shell-tree-group > .erp-shell-parent-row,
  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group--nested > .erp-shell-nested-row,
  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar .erp-shell-child-row {
    color: #b3bdca;
  }

  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar .erp-shell-section-icon {
    color: #a7b2c1;
  }

  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar .erp-shell-section-label,
  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-label,
  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar .erp-shell-nested-row > span:first-child {
    color: inherit;
  }

  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group > .erp-shell-parent-row:hover,
  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group > .erp-shell-parent-row:focus-visible,
  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group--nested > .erp-shell-nested-row:hover,
  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group--nested > .erp-shell-nested-row:focus-visible,
  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar .erp-shell-child-row:not(:disabled):hover,
  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar .erp-shell-child-row:focus-visible {
    color: #eef3f8;
    background: rgba(148, 163, 184, 0.075);
  }

  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group > .erp-shell-parent-row.active,
  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar .erp-shell-tree-group--nested > .erp-shell-nested-row.active {
    color: #f8fafc;
    background: rgba(148, 163, 184, 0.035);
    border-left-color: transparent;
    box-shadow: none;
  }

  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar > .erp-shell-tree-group > .erp-shell-parent-row.active .erp-shell-section-icon {
    color: #7db8ff;
  }

  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar > .erp-shell-tree-group > .erp-shell-tree-children {
    position: relative;
  }

  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar > .erp-shell-tree-group > .erp-shell-tree-children::before {
    position: absolute;
    top: 4px;
    bottom: 5px;
    left: calc(var(--erp-sidebar-child-label-column) - 14px);
    width: 1px;
    content: "";
    background: rgba(148, 163, 184, 0.18);
    pointer-events: none;
  }

  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar .erp-shell-child-row {
    position: relative;
    color: #95a1b2;
    background: transparent;
  }

  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar .erp-shell-child-row.active::before {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: calc(var(--erp-sidebar-child-label-column) - 14px);
    width: 2px;
    content: "";
    background: #3b82f6;
    border-radius: 999px;
    pointer-events: none;
  }

  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar .erp-shell-child-row:not(:disabled):hover,
  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar .erp-shell-child-row:focus-visible {
    color: #d6e0ec;
    background: rgba(148, 163, 184, 0.055);
  }

  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar .erp-shell-child-row.active {
    color: #8fc8ff;
    background: rgba(37, 99, 235, 0.08);
    box-shadow: none;
  }

  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar .erp-shell-child-row:disabled {
    color: #6c7685;
  }

  body.sidebar-theme-dark .desktop-sidebar-shell.erp-active-sidebar .erp-shell-planned-marker > span {
    background: #8795a6;
    opacity: 0.64;
  }

  body.sidebar-theme-dark.sidebar-navigation-focus:not(.sidebar-focus-open) .desktop-sidebar-shell.erp-active-sidebar > .erp-shell-tree-group > .erp-shell-parent-row {
    min-height: 40px;
  }

  body.sidebar-theme-dark.sidebar-navigation-focus:not(.sidebar-focus-open) .desktop-sidebar-shell.erp-active-sidebar > .erp-shell-tree-group > .erp-shell-parent-row.active {
    background: rgba(148, 163, 184, 0.045);
    border-left-color: transparent;
  }

  body.sidebar-theme-dark.sidebar-navigation-focus:not(.sidebar-focus-open) .desktop-sidebar-shell.erp-active-sidebar > .erp-shell-tree-group > .erp-shell-parent-row.active .erp-shell-section-icon {
    color: #8fc5ff;
  }

  body.sidebar-theme-dark .navigation-drawer .profile-card,
  body.sidebar-theme-dark .navigation-drawer .profile-card strong {
    color: #f8fafc;
  }

  body.sidebar-theme-dark .navigation-drawer .profile-card p,
  body.sidebar-theme-dark .navigation-drawer .profile-card small,
  body.sidebar-theme-dark .navigation-drawer .profile-card label,
  body.sidebar-theme-dark .profile-control-label {
    color: #8d98a8;
  }

  body.sidebar-theme-dark.sidebar-navigation-expanded .navigation-drawer .profile-card,
  body.sidebar-theme-dark.sidebar-navigation-focus.sidebar-focus-open .navigation-drawer .profile-card {
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    padding-top: 10px;
  }

  body.sidebar-theme-dark .navigation-drawer .avatar {
    color: #dbeafe;
    background: #202938;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.22);
  }

  body.sidebar-theme-dark .navigation-drawer .environment-badge {
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(148, 163, 184, 0.08);
    color: #b6c4d6;
  }

  body.sidebar-theme-dark .navigation-drawer .environment-badge--warning {
    border-color: rgba(248, 113, 113, 0.3);
    background: rgba(185, 28, 28, 0.14);
    color: #f5c7c7;
  }

  body.sidebar-theme-dark .navigation-drawer .profile-segmented-control {
    border-color: rgba(148, 163, 184, 0.14);
    background: rgba(2, 6, 23, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  }

  body.sidebar-theme-dark .navigation-drawer .profile-mode-button {
    color: #a8b3c3;
  }

  body.sidebar-theme-dark .navigation-drawer .profile-mode-button.active,
  body.sidebar-theme-dark .navigation-drawer .profile-mode-button[aria-pressed="true"] {
    color: #f8fbff;
    background: rgba(37, 99, 235, 0.32);
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.12);
  }

  body.sidebar-theme-dark .navigation-drawer .profile-mode-button:hover,
  body.sidebar-theme-dark .navigation-drawer .profile-mode-button:focus-visible {
    color: #ffffff;
    background: rgba(148, 163, 184, 0.09);
  }

  body.sidebar-theme-dark.sidebar-navigation-focus.sidebar-focus-open .navigation-drawer {
    box-shadow: 16px 0 36px rgba(2, 6, 23, 0.3);
  }

  body.sidebar-theme-dark.sidebar-navigation-focus:not(.sidebar-focus-open) .navigation-drawer {
    box-shadow: 4px 0 18px rgba(2, 6, 23, 0.16);
  }
}