@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --cmn-bg: #0b0c10;
  --cmn-panel: rgba(22, 24, 30, 0.75);
  --cmn-panel-strong: rgba(20, 22, 28, 0.9);
  --cmn-border: rgba(255, 255, 255, 0.08);
  --cmn-text: #e7e9ee;
  --cmn-muted: #9aa0ab;
  --cmn-accent: #d02a2a;
  --cmn-accent-dark: #a81f1f;
  --cmn-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  --cmn-glass-bg: rgba(255, 255, 255, 0.06);
  --cmn-glass-bg-strong: rgba(255, 255, 255, 0.09);
  --cmn-glass-border: rgba(255, 255, 255, 0.12);
  --cmn-glass-highlight: linear-gradient(142deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 16%, rgba(255, 255, 255, 0.02) 34%, transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 28%, transparent 60%);
  --cmn-glass-blur: 14px;
  --cmn-glass-shadow: 0 18px 42px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.cmn-theme-default {
  --cmn-bg: #0b0c10;
  --cmn-panel: rgba(22, 24, 30, 0.75);
  --cmn-panel-strong: rgba(20, 22, 28, 0.9);
  --cmn-border: rgba(255, 255, 255, 0.08);
  --cmn-text: #e7e9ee;
  --cmn-muted: #9aa0ab;
  --cmn-accent: #d02a2a;
  --cmn-accent-dark: #a81f1f;
}

body.cmn-theme-contrast {
  --cmn-bg: #000000;
  --cmn-panel: rgba(8, 10, 16, 0.95);
  --cmn-panel-strong: rgba(12, 16, 24, 0.98);
  --cmn-border: rgba(255, 255, 255, 0.72);
  --cmn-text: #ffffff;
  --cmn-muted: #d1d5db;
  --cmn-accent: #ef4444;
  --cmn-accent-dark: #dc2626;
}

body.cmn-theme-light {
  --cmn-bg: #eef3fb;
  --cmn-panel: rgba(255, 255, 255, 0.95);
  --cmn-panel-strong: rgba(248, 250, 255, 0.98);
  --cmn-border: rgba(15, 23, 42, 0.12);
  --cmn-text: #0f172a;
  --cmn-muted: #475569;
  --cmn-accent: #dc2626;
  --cmn-accent-dark: #b91c1c;
}

body.cmn-theme-teal {
  --cmn-bg: #07141a;
  --cmn-panel: rgba(12, 28, 36, 0.9);
  --cmn-panel-strong: rgba(10, 32, 42, 0.96);
  --cmn-border: rgba(94, 234, 212, 0.24);
  --cmn-text: #dcfdf7;
  --cmn-muted: #8ac6bf;
  --cmn-accent: #0f9f91;
  --cmn-accent-dark: #0b7f74;
}

body[class*='cmn-theme-'] .cmn-portal,
body[class*='cmn-theme-'] .cmn-school-shell,
body[class*='cmn-theme-'] .cmn-staff-shell,
body[class*='cmn-theme-'] .cmn-candidate-portal,
body[class*='cmn-theme-'] .cmn-school-portal,
body[class*='cmn-theme-'] .cmn-school-main,
body[class*='cmn-theme-'] .cmn-candidate-main {
  background: var(--cmn-bg);
  color: var(--cmn-text);
}

body[class*='cmn-theme-'] .cmn-dashboard-card,
body[class*='cmn-theme-'] .cmn-panel-card,
body[class*='cmn-theme-'] .cmn-support-thread,
body[class*='cmn-theme-'] .cmn-support-sidebar,
body[class*='cmn-theme-'] .cmn-modal-content {
  background: var(--cmn-panel);
  color: var(--cmn-text);
  border-color: var(--cmn-border);
}

body[class*='cmn-theme-'] .cmn-muted,
body[class*='cmn-theme-'] .cmn-support-ticket span {
  color: var(--cmn-muted);
}

body[class*='cmn-theme-'] .cmn-ghost {
  color: var(--cmn-text);
  border-color: var(--cmn-border);
}

.cmn-login-page {
  min-height: 100vh;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
}

.cmn-login-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent 45%),
    linear-gradient(135deg, #0b0c10 0%, #11141b 45%, #0a0b0f 100%);
  z-index: 0;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.cmn-login-page .screen {
  width: min(1200px, 100%);
  min-height: 600px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cmn-panel);
  border: 1px solid var(--cmn-border);
  box-shadow: var(--cmn-shadow);
  position: relative;
  font-family: 'Outfit', sans-serif;
  color: var(--cmn-text);
  margin: 32px;
  z-index: 1;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.cmn-login-page.cmn-transitioning .screen {
  opacity: 0;
  transform: translateY(-8px) scale(0.99);
}

.cmn-login-page.cmn-transitioning::before {
  opacity: 0.7;
}

.cmn-login-page .screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 35%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 45%);
  pointer-events: none;
}

.cmn-login-page .panel {
  padding: 42px 52px 32px;
  position: relative;
  z-index: 1;
}

.cmn-login-page .panel-left {
  display: flex;
  flex-direction: column;
  gap: 28px;
  justify-content: flex-start;
}

.cmn-login-page .brand {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 2;
}

.cmn-login-page .panel-right {
  background: transparent;
  border-left: 1px solid var(--cmn-border);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.cmn-portal-login .panel-left {
  display: flex;
}

.cmn-portal-login .screen {
  grid-template-columns: 1.2fr 0.8fr;
  width: min(1200px, 100%);
  max-width: 1200px;
  margin: 32px;
  left: clamp(-128px, calc((1600px - 100vw) / 2.5), 0px);
}

.cmn-portal-login .panel-right {
  border-left: 1px solid var(--cmn-border);
  align-items: flex-start;
  width: auto;
}

.cmn-portal-login .login {
  margin-top: 0;
}

.cmn-portal-login {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  padding: 0;
}

.cmn-portal-login .cmn-back-link {
  position: fixed;
  top: 24px;
  left: 24px;
}

body.cmn-portal-page .cmn-login-page.cmn-portal-login::before {
  background:
    radial-gradient(circle at 15% 10%, rgba(208, 42, 42, 0.2) 0%, rgba(208, 42, 42, 0) 46%),
    radial-gradient(circle at 85% 5%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, #090b10 0%, #10151d 45%, #080a0e 100%);
}

body.cmn-portal-page .cmn-login-page.cmn-portal-login .screen {
  background: rgba(12, 15, 21, 0.76);
  border: 1px solid var(--cmn-glass-border);
  box-shadow: var(--cmn-glass-shadow), 0 28px 56px rgba(0, 0, 0, 0.52);
}

body.cmn-portal-page .cmn-login-page.cmn-portal-login .panel-left .cmn-hero-block {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.11);
}

body.cmn-portal-page .cmn-login-page.cmn-portal-login .panel-right {
  background: rgba(6, 9, 14, 0.45);
}

body.cmn-portal-page .cmn-login-page.cmn-portal-login .login {
  width: min(420px, 100%);
  margin-top: 0;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(13, 17, 24, 0.78);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.4);
}

body.cmn-portal-page .cmn-login-page.cmn-portal-login .login input[type='text'],
body.cmn-portal-page .cmn-login-page.cmn-portal-login .login input[type='password'] {
  background: rgba(8, 12, 18, 0.78);
  border-color: rgba(255, 255, 255, 0.16);
}

body.cmn-portal-page .cmn-login-page.cmn-portal-login .login input[type='text']:focus,
body.cmn-portal-page .cmn-login-page.cmn-portal-login .login input[type='password']:focus {
  outline: none;
  border-color: rgba(208, 42, 42, 0.72);
  box-shadow: 0 0 0 2px rgba(208, 42, 42, 0.2);
}

body.cmn-portal-page .cmn-login-page.cmn-portal-login .cmn-register-success,
body.cmn-portal-page .cmn-login-page.cmn-portal-login .cmn-register-error {
  border-radius: 10px;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.cmn-portal-page .cmn-login-page.cmn-portal-login .screen,
  body.cmn-portal-page .cmn-login-page.cmn-portal-login .login,
  body.cmn-portal-page.cmn-portal-auth .cmn-auth-card {
    backdrop-filter: blur(var(--cmn-glass-blur)) saturate(1.15);
    -webkit-backdrop-filter: blur(var(--cmn-glass-blur)) saturate(1.15);
  }
}

body.cmn-portal-page.cmn-portal-auth .cmn-auth-card {
  border: 1px solid var(--cmn-glass-border);
  background: rgba(14, 18, 24, 0.82);
  box-shadow: var(--cmn-glass-shadow), 0 28px 54px rgba(0, 0, 0, 0.5);
  border-radius: 18px;
}

.cmn-login-page .brand h1 {
  font-size: 34px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.4px;
  display: block;
  color: var(--cmn-text);
}

.cmn-login-page .brand-main {
  color: var(--cmn-text);
}

.cmn-login-page .brand-accent {
  color: var(--cmn-accent);
  margin-left: 6px;
  font-weight: 700;
}

.cmn-login-page .brand p {
  margin: 8px 0 0;
  color: #ffffff;
  font-weight: 300;
  display: block;
}

.cmn-login-page .tag-white {
  color: #ffffff;
}


.cmn-login-page .brand h1,
.cmn-login-page .brand p {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.cmn-login-page .brand-logo {
  width: 84px;
  height: auto;
  display: block;
  margin-bottom: 16px;
}

.cmn-login-page .cards {
  display: grid;
  gap: 18px;
}

.cmn-login-page .card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 20px 22px;
  background: var(--cmn-panel-strong);
  border: 1px solid var(--cmn-border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.cmn-login-page .card-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(208, 42, 42, 0.12);
  border: 1px solid rgba(208, 42, 42, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cmn-login-page .card-icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--cmn-accent);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cmn-login-page .card-content h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 500;
}

.cmn-login-page .cmn-hero-stack {
  display: grid;
  gap: 16px;
}

.cmn-login-page .cmn-hero-purpose {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--cmn-text);
}

.cmn-login-page .cmn-hero-block {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 12px 14px;
}

.cmn-login-page .cmn-hero-cta-block {
  background: transparent;
  border: none;
  padding: 0;
}

.cmn-login-page .cmn-hero-lede {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--cmn-text);
  text-align: center;
  line-height: 1.5;
}

.cmn-login-page .cmn-hero-sublede {
  margin: 0;
  font-size: 14px;
  color: var(--cmn-muted);
}

.cmn-login-page .cmn-hero-callout {
  background: rgba(208, 42, 42, 0.12);
  border: 1px solid rgba(208, 42, 42, 0.35);
  border-radius: 10px;
  padding: 12px 16px;
  display: grid;
  gap: 6px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(208, 42, 42, 0.12);
}

.cmn-login-page .cmn-hero-callout strong {
  font-size: 16px;
  font-weight: 700;
}

.cmn-login-page .cmn-hero-callout span {
  color: var(--cmn-muted);
  font-size: 13px;
}

.cmn-login-page .cmn-hero-steps h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cmn-muted);
}

.cmn-login-page .cmn-hero-steps {
  margin-bottom: 4px;
}

.cmn-login-page .cmn-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cmn-login-page .cmn-step {
  display: grid;
  gap: 8px;
  align-content: start;
  text-align: center;
}

.cmn-login-page .cmn-step-number {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(208, 42, 42, 0.6);
  color: var(--cmn-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  margin: 0 auto;
}

.cmn-login-page .cmn-step-icon {
  width: 118px;
  height: 118px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.cmn-login-page .cmn-step-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--cmn-accent);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cmn-login-page .cmn-step-icon img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  display: block;
  filter: contrast(1.05) brightness(1.05);
}

.cmn-login-page .cmn-step-icon img[src*='use3'] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.25);
  transform-origin: center;
}

.cmn-login-page .cmn-step-text {
  display: grid;
  gap: 4px;
}

.cmn-login-page .cmn-step-text strong {
  font-size: 13px;
  color: var(--cmn-text);
  font-weight: 600;
}

.cmn-login-page .cmn-step-text span {
  font-size: 12px;
  color: var(--cmn-muted);
}

.cmn-login-page .cmn-hero-ctas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cmn-login-page .cmn-hero-ctas .cmn-cta-primary,
.cmn-login-page .cmn-hero-ctas .cmn-cta-secondary {
  text-align: center;
  padding: 10px 12px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cmn-login-page .cmn-hero-ctas .cmn-cta-primary {
  background: linear-gradient(180deg, rgba(208, 42, 42, 0.9) 0%, rgba(168, 31, 31, 0.9) 100%);
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 8px 20px rgba(208, 42, 42, 0.25);
}

.cmn-login-page .cmn-hero-ctas .cmn-cta-secondary {
  background: linear-gradient(180deg, rgba(208, 42, 42, 0.9) 0%, rgba(168, 31, 31, 0.9) 100%);
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 8px 20px rgba(208, 42, 42, 0.25);
}


.cmn-login-page .cmn-hero-tagline {
  margin: 0;
  font-size: 13px;
  color: var(--cmn-muted);
  text-align: center;
}

@media (max-height: 820px) {
  .cmn-login-page .screen {
    margin: 20px;
  }

  .cmn-login-page .panel {
    padding: 32px 40px 24px;
  }

  .cmn-login-page .cmn-hero-stack {
    gap: 12px;
  }

  .cmn-login-page .cmn-hero-block {
    padding: 10px 12px;
  }

  .cmn-login-page .cmn-hero-steps h3 {
    margin-bottom: 8px;
  }

  .cmn-login-page .cmn-step-icon {
    width: 98px;
    height: 98px;
  }
}

.cmn-login-page .cmn-hero-control {
  border: 1px solid var(--cmn-border);
  border-radius: 10px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  display: grid;
  gap: 6px;
}

.cmn-login-page .cmn-hero-control strong {
  font-size: 14px;
}

.cmn-login-page .cmn-hero-control p {
  margin: 0;
  color: var(--cmn-muted);
  font-size: 13px;
}

.cmn-login-page .cmn-hero-summary p {
  margin: 0;
  color: var(--cmn-text);
  font-size: 13px;
  text-align: center;
}

.cmn-login-page .card-content p {
  margin: 0 0 16px;
  color: var(--cmn-muted);
  font-size: 14px;
}

.cmn-login-page .ghost {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--cmn-border);
  color: var(--cmn-text);
  padding: 8px 18px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.cmn-login-page .footnote {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cmn-muted);
  font-size: 13px;
}

.cmn-login-page .shield {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(208, 42, 42, 0.1);
  border: 1px solid rgba(208, 42, 42, 0.3);
}

.cmn-login-page .shield svg {
  width: 18px;
  height: 18px;
  stroke: var(--cmn-accent);
  fill: none;
  stroke-width: 1.4;
}

.cmn-login-page .login {
  width: min(320px, 100%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 auto;
}

@media (min-width: 961px) {
  .cmn-login-page .login {
    margin-top: 22px;
  }
}

.cmn-login-page .login-brand {
  align-self: flex-start;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 6px;
}

.cmn-login-page .login-brand h1 {
  font-size: 34px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.4px;
  display: block;
  color: var(--cmn-text);
  line-height: 1.2;
}

.cmn-login-page .login-brand p {
  margin: 8px 0 0;
  color: #ffffff;
  font-weight: 300;
  display: block;
  width: 100%;
}

.cmn-login-page .login h2 {
  margin: 0 0 8px;
  font-weight: 500;
  font-size: 28px;
}

.cmn-login-page .login form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}

.cmn-login-page .login label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--cmn-muted);
}

.cmn-login-page .login input[type='text'],
.cmn-login-page .login input[type='password'] {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--cmn-border);
  color: var(--cmn-text);
  padding: 10px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  box-shadow: none;
}

.cmn-login-page .login input[type='password'] {
  background-image: none !important;
}

.cmn-login-page input[type='password']::-ms-reveal,
.cmn-login-page input[type='password']::-ms-clear {
  display: none;
}

.cmn-login-page input[type='password']::-webkit-credentials-auto-fill-button,
.cmn-login-page input[type='password']::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
}

.cmn-login-page input:-webkit-autofill,
.cmn-login-page input:-webkit-autofill:hover,
.cmn-login-page input:-webkit-autofill:focus,
.cmn-login-page input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.05) inset;
  -webkit-text-fill-color: var(--cmn-text);
  transition: background-color 9999s ease-in-out 0s;
}

.cmn-login-page .password-field {
  position: relative;
}

.cmn-login-page .password-field input {
  width: 100%;
  padding-right: 36px;
}

.cmn-login-page .eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
  background: transparent;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cmn-login-page .eye svg {
  width: 18px;
  height: 18px;
  stroke: var(--cmn-muted);
  fill: none;
  stroke-width: 1.5;
}

.cmn-login-page .eye:focus-visible {
  outline: 2px solid rgba(220, 38, 38, 0.6);
  outline-offset: 2px;
}

.cmn-login-page .link {
  color: var(--cmn-accent);
  font-size: 13px;
  text-decoration: none;
  margin-top: -6px;
}

.cmn-login-page .primary {
  background: linear-gradient(180deg, var(--cmn-accent) 0%, var(--cmn-accent-dark) 100%);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #fff;
  padding: 10px 0;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(208, 42, 42, 0.35);
}

.cmn-login-page .login label.remember {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  font-size: 13px;
  color: var(--cmn-muted);
  justify-content: flex-start;
  align-self: flex-start;
  width: auto;
  text-align: left;
  line-height: 1;
  white-space: nowrap;
}

.cmn-login-page .remember input {
  margin: 0;
  display: inline-block;
}

.cmn-login-page .cmn-back-link {
  position: fixed;
  top: 24px;
  left: 24px;
  color: var(--cmn-text);
  text-decoration: none;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--cmn-border);
  padding: 8px 12px;
  border-radius: 999px;
  z-index: 999;
}

.cmn-login-page .remember input {
  accent-color: var(--cmn-accent);
}

.cmn-login-page .policy {
  margin: 0;
  font-size: 12px;
  color: var(--cmn-muted);
}

@media (max-width: 960px) {
  .cmn-login-page .screen {
    grid-template-columns: 1fr;
  }

  .cmn-login-page .panel-right {
    border-left: none;
    border-top: 1px solid var(--cmn-border);
  }

  .cmn-login-page .cmn-steps-grid {
    grid-template-columns: 1fr;
  }

  .cmn-login-page .cmn-hero-ctas {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 981px) {
  body.cmn-portal-page.cmn-view-error-logs .cmn-staff-shell,
  body.cmn-portal-page.cmn-view-system-health .cmn-staff-shell {
    display: grid;
    grid-template-columns: 236px 1fr;
  }

  body.cmn-portal-page.cmn-view-error-logs .cmn-staff-nav,
  body.cmn-portal-page.cmn-view-system-health .cmn-staff-nav {
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .cmn-login-page {
    padding: 16px;
  }

  .cmn-login-page .panel {
    padding: 32px 28px;
  }

  .cmn-login-page .card {
    grid-template-columns: 1fr;
  }

  .cmn-login-page .card-icon {
    width: 40px;
    height: 40px;
  }
}

.cmn-portal {
  max-width: 1200px;
  margin: 40px auto;
  color: var(--cmn-text);
  font-family: 'Outfit', sans-serif;
  animation: cmnFadeUp 0.35s ease;
}

body.cmn-portal-bg,
.cmn-portal-bg {
  background: radial-gradient(1600px 1000px at 88% 70%, rgba(208, 42, 42, 0.18), transparent 72%),
    radial-gradient(1100px 700px at 12% 125%, rgba(164, 26, 26, 0.18), transparent 72%),
    radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent 45%),
    linear-gradient(135deg, #0b0c10 0%, #11141b 45%, #0a0b0f 100%);
  color: var(--cmn-text);
  min-height: 100vh;
  margin: 0;
  font-family: 'Outfit', sans-serif;
}

html.cmn-portal-page,
body.cmn-portal-page {
  background: #eef2f7;
  overflow: hidden;
  height: 100%;
  margin: 0;
  padding: 0;
  margin-top: 0 !important;
}

body.cmn-portal-page.cmn-portal-auth {
  background: #0b0f14 !important;
  overflow: auto;
  height: auto;
}

body.cmn-portal-page.cmn-portal-bg {
  background: radial-gradient(1600px 1000px at 88% 70%, rgba(208, 42, 42, 0.18), transparent 72%),
    radial-gradient(1100px 700px at 12% 125%, rgba(164, 26, 26, 0.18), transparent 72%),
    radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent 45%),
    linear-gradient(135deg, #0b0c10 0%, #11141b 45%, #0a0b0f 100%);
  overflow: auto;
  height: auto;
}

body.cmn-portal-page.cmn-portal-bg #page,
body.cmn-portal-page.cmn-portal-bg #content,
body.cmn-portal-page.cmn-portal-bg .site,
body.cmn-portal-page.cmn-portal-bg .site-content {
  height: auto;
  overflow: visible;
}

body.cmn-portal-page.cmn-portal-bg .cmn-portal {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  padding: 40px 24px;
}

body.cmn-portal-page.cmn-portal-auth .cmn-portal {
  position: fixed;
  inset: 0;
  max-width: none;
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: #0b0f14;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

body.cmn-portal-page.cmn-portal-auth .cmn-auth-card {
  background: #121821;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
  border-radius: 16px;
  padding: 26px;
  color: #f5f5f5;
}

body.cmn-portal-page.cmn-portal-auth .cmn-auth-card h2 {
  color: #ffffff;
}

body.cmn-portal-page.cmn-portal-auth .cmn-register-error,
body.cmn-portal-page.cmn-portal-auth .cmn-register-success {
  background: rgba(255, 255, 255, 0.06);
  border-left: 4px solid #dc2626;
  color: #f5f5f5;
}

body.cmn-portal-page.cmn-portal-auth .cmn-muted {
  color: rgba(255, 255, 255, 0.7);
}

body.cmn-portal-page.cmn-portal-scroll {
  overflow: auto;
  height: auto;
}

body.cmn-portal-page.cmn-portal-scroll #page,
body.cmn-portal-page.cmn-portal-scroll #content,
body.cmn-portal-page.cmn-portal-scroll .site,
body.cmn-portal-page.cmn-portal-scroll .site-content {
  height: auto;
  overflow: visible;
}

body.cmn-portal-page.cmn-register-view {
  overflow-y: auto;
  overflow-x: hidden;
  height: auto;
  min-height: 100vh;
}

body.cmn-portal-page.cmn-register-view #page,
body.cmn-portal-page.cmn-register-view #content,
body.cmn-portal-page.cmn-register-view .site,
body.cmn-portal-page.cmn-register-view .site-content {
  height: auto;
  min-height: 100%;
  overflow: visible;
}

body.cmn-portal-page.cmn-register-view .cmn-portal {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
}

.cmn-portal-page #wpadminbar {
  display: none !important;
}

body.cmn-portal-page #page,
body.cmn-portal-page #content,
body.cmn-portal-page .site,
body.cmn-portal-page .site-content {
  height: 100%;
  overflow: hidden;
}

body.cmn-portal-page header,
body.cmn-portal-page .header,
body.cmn-portal-page #header,
body.cmn-portal-page .site-header,
body.cmn-portal-page .app-header,
body.cmn-portal-page .topbar,
body.cmn-portal-page .toolbar,
body.cmn-portal-page .top-header,
body.cmn-portal-page .top-nav,
body.cmn-portal-page .navbar,
body.cmn-portal-page .nav,
body.cmn-portal-page .branding,
body.cmn-portal-page .brand,
body.cmn-portal-page #masthead,
body.cmn-portal-page #page-header,
body.cmn-portal-page #top,
body.cmn-portal-page #topbar,
body.cmn-portal-page .header-bar,
body.cmn-portal-page .header-wrap,
body.cmn-portal-page .header-wrapper,
body.cmn-portal-page .hosting-header,
body.cmn-portal-page .provider-header,
body.cmn-portal-page .host-header,
body.cmn-portal-page [id*="fasthosts"],
body.cmn-portal-page [class*="fasthosts"],
body.cmn-portal-page [id*="fasthost"],
body.cmn-portal-page [class*="fasthost"],
body.cmn-portal-page a[href*="fasthosts"],
body.cmn-portal-page img[alt*="fasthosts"],
body.cmn-portal-page img[src*="fasthosts"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

.cmn-portal-page .cmn-portal {
  position: fixed;
  inset: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
}

.cmn-candidate-portal {
  max-width: 1200px;
}

.cmn-candidate-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  background: var(--cmn-panel);
  border: 1px solid var(--cmn-border);
  border-radius: 14px;
  overflow: hidden;
  min-height: 720px;
  box-shadow: var(--cmn-shadow);
}

.cmn-candidate-nav {
  background: rgba(14, 16, 21, 0.95);
  border-right: 1px solid var(--cmn-border);
  padding: 22px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cmn-candidate-nav-title {
  padding: 0 22px;
  font-size: 13px;
  color: var(--cmn-text);
  font-weight: 600;
}

.cmn-candidate-nav-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cmn-candidate-nav-link {
  padding: 10px 22px;
  color: var(--cmn-muted);
  text-decoration: none;
  font-size: 13px;
  border-left: 3px solid transparent;
  transition: 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cmn-candidate-nav-link.is-locked {
  opacity: 0.55;
}

.cmn-candidate-nav-link.is-locked .cmn-candidate-nav-lock {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
}

.cmn-candidate-nav-link:hover {
  color: var(--cmn-text);
  background: rgba(255, 255, 255, 0.04);
}

.cmn-candidate-nav-link.is-active {
  color: var(--cmn-text);
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--cmn-accent);
}

.cmn-candidate-nav-label {
  min-width: 0;
}

.cmn-candidate-main {
  padding: 28px 32px 34px;
  background: rgba(19, 21, 27, 0.8);
}

.cmn-profile-lock-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(13, 17, 23, 0.6);
  border: 1px solid rgba(220, 38, 38, 0.35);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
  color: #f8fafc;
}

.cmn-profile-lock-banner strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.cmn-profile-lock-banner span {
  font-size: 13px;
  color: rgba(248, 250, 252, 0.75);
}

@media (max-width: 720px) {
  .cmn-profile-lock-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

.cmn-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cmn-mobile-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  cursor: pointer;
}

#cmn-mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 12, 0.6);
  z-index: 9100;
  display: none;
}

.cmn-candidate-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.cmn-candidate-header h2 {
  margin: 0;
  font-size: 22px;
}

.cmn-candidate-header p {
  margin: 0;
  color: var(--cmn-muted);
  font-size: 13px;
}

.cmn-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.cmn-learning-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.cmn-dashboard-row {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.cmn-calendar-planner {
  margin-top: 16px;
}

.cmn-availability-hero {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(15, 23, 42, 0.9));
  border: 1px solid rgba(220, 38, 38, 0.4);
  border-radius: 18px;
  padding: 24px;
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cmn-availability-hero h2 {
  margin: 0;
  font-size: 24px;
}

.cmn-availability-subtext {
  margin: 0;
  color: var(--cmn-muted);
  font-size: 14px;
}

.cmn-email-test-console {
  margin-top: 18px;
}

.cmn-email-test-console .cmn-form-grid {
  margin-bottom: 12px;
}

.cmn-email-test-results {
  margin-top: 12px;
  font-size: 13px;
  color: var(--cmn-muted);
}

.cmn-email-test-from {
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--cmn-text);
}

.cmn-email-test-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.cmn-email-test-list li {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--cmn-border);
  background: var(--cmn-panel-strong);
}

.cmn-email-test-list li.is-sent {
  border-color: rgba(34, 197, 94, 0.4);
  color: #22c55e;
}

.cmn-email-test-list li.is-failed {
  border-color: rgba(248, 113, 113, 0.4);
  color: #f87171;
}

.cmn-staff-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cmn-staff-page-grid {
  grid-template-columns: minmax(300px, 35%) minmax(0, 65%);
  align-items: start;
}

.cmn-staff-add-card {
  padding: 16px;
  gap: 10px;
}

.cmn-staff-add-card .cmn-form {
  display: grid;
  gap: 10px;
}

.cmn-staff-add-card .cmn-form label {
  display: grid;
  gap: 5px;
  font-size: 12px;
}

.cmn-staff-add-card .cmn-form input,
.cmn-staff-add-card .cmn-form select {
  min-height: 38px;
  padding: 8px 10px;
  font-size: 13px;
}

.cmn-staff-hint {
  margin: -2px 0 2px;
  font-size: 11px;
  line-height: 1.3;
}

.cmn-staff-inline-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.cmn-staff-role-field {
  margin: 0;
}

.cmn-staff-inline-controls .cmn-ghost {
  min-height: 38px;
  white-space: nowrap;
  padding: 8px 14px;
}

.cmn-staff-table-card {
  padding: 18px 18px 14px;
  min-width: 0;
}

.cmn-staff-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.cmn-staff-table-card .cmn-approval-table {
  margin-bottom: 0;
  min-width: 760px;
}

.cmn-staff-table-card .cmn-approval-table th,
.cmn-staff-table-card .cmn-approval-table td {
  padding: 10px 8px;
  vertical-align: middle;
}

.cmn-staff-table-card .cmn-staff-actions {
  justify-content: flex-end;
}

.cmn-staff-presence {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.cmn-staff-presence-label {
  font-weight: 600;
  color: var(--cmn-text);
}

.cmn-presence-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.cmn-presence-dot--online {
  background: #22c55e;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35);
}

.cmn-presence-dot--away {
  background: #eab308;
  box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.35);
}

.cmn-presence-dot--offline {
  background: #ef4444;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35);
}

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

.cmn-doc-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--cmn-border);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.5);
}

.cmn-doc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cmn-doc-card-meta {
  display: grid;
  gap: 3px;
}

.cmn-doc-line {
  font-size: 13px;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmn-doc-subline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--cmn-muted);
}

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

.cmn-doc-buttons button {
  min-height: 36px;
}

.cmn-doc-progress {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.cmn-doc-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #dc2626, #ef4444);
}

@media (max-width: 1180px) {
  .cmn-doc-actions {
    grid-template-columns: 1fr;
  }

  .cmn-doc-buttons {
    grid-template-columns: 1fr;
  }
}

.cmn-inline-edit-form {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.cmn-inline-edit-form label {
  display: grid;
  gap: 5px;
}

.cmn-inline-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.cmn-hidden-input {
  display: none;
}

body.cmn-portal-page #cmn-portal-overlay-root {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 2147483000;
  pointer-events: none;
}

body.cmn-portal-page #cmn-portal-overlay-root .cmn-calendar-feedback,
body.cmn-portal-page #cmn-portal-overlay-root .cmn-toast,
body.cmn-portal-page #cmn-portal-overlay-root .cmn-notice,
body.cmn-portal-page #cmn-portal-overlay-root .cmn-banner,
body.cmn-portal-page #cmn-portal-overlay-root .cmn-notification,
body.cmn-portal-page #cmn-portal-overlay-root [data-cmn-toast],
body.cmn-portal-page #cmn-portal-overlay-root [data-cmn-notice] {
  position: relative;
  pointer-events: auto;
  margin: 16px auto 0 auto;
  max-width: 920px;
}

body.cmn-portal-page #cmn-portal-overlay-root .cmn-calendar-feedback {
  display: block;
  min-height: 0;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 14, 22, 0.92);
  color: #f8fafc;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

body.cmn-portal-page #cmn-portal-overlay-root .cmn-calendar-feedback:empty {
  display: none;
}

body.cmn-portal-page #cmn-portal-overlay-root .cmn-calendar-feedback.is-success {
  border-color: rgba(52, 211, 153, 0.5);
  background: rgba(6, 41, 31, 0.96);
  color: #ecfdf5;
}

body.cmn-portal-page #cmn-portal-overlay-root .cmn-calendar-feedback.is-warning {
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(68, 40, 8, 0.96);
  color: #fef3c7;
}

body.cmn-portal-page #cmn-portal-overlay-root .cmn-calendar-feedback.is-error {
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(72, 20, 20, 0.96);
  color: #fee2e2;
}

@media (max-width: 767px) {
  body.cmn-portal-page #cmn-portal-overlay-root .cmn-calendar-feedback,
  body.cmn-portal-page #cmn-portal-overlay-root .cmn-toast,
  body.cmn-portal-page #cmn-portal-overlay-root .cmn-notice,
  body.cmn-portal-page #cmn-portal-overlay-root .cmn-banner,
  body.cmn-portal-page #cmn-portal-overlay-root .cmn-notification,
  body.cmn-portal-page #cmn-portal-overlay-root [data-cmn-toast],
  body.cmn-portal-page #cmn-portal-overlay-root [data-cmn-notice] {
    margin: 12px 12px 0;
    max-width: calc(100% - 24px);
  }
}

@media (max-width: 1024px) {
  .cmn-staff-page-grid {
    grid-template-columns: 1fr;
  }

  .cmn-staff-add-card,
  .cmn-staff-table-card {
    padding: 16px;
  }

  .cmn-staff-inline-controls {
    grid-template-columns: 1fr;
  }

  .cmn-staff-inline-controls .cmn-ghost {
    width: 100%;
  }

  .cmn-staff-table-card .cmn-staff-actions {
    justify-content: flex-start;
  }

  .cmn-doc-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

.cmn-modal {
  position: fixed;
  inset: 0;
  background: rgba(7, 10, 20, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9999;
}

.cmn-modal.is-open {
  display: flex;
}

.cmn-modal-content {
  background: var(--cmn-panel);
  border: 1px solid var(--cmn-border);
  border-radius: 16px;
  padding: 20px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.cmn-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.cmn-support-hub {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
}

.cmn-support-sidebar {
  background: var(--cmn-panel);
  border: 1px solid var(--cmn-border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 520px;
}

.cmn-support-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cmn-support-filters .cmn-ghost.is-active {
  border-color: var(--cmn-accent);
  color: var(--cmn-accent);
}

.cmn-support-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.cmn-support-tile {
  border: 1px solid var(--cmn-border);
  border-radius: 12px;
  background: var(--cmn-panel);
  color: var(--cmn-text);
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  justify-items: start;
  text-align: left;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cmn-support-tile strong {
  font-size: 19px;
  line-height: 1.15;
}

.cmn-support-tile span {
  font-size: 12px;
  color: var(--cmn-muted);
}

.cmn-support-tile:hover {
  border-color: rgba(239, 68, 68, 0.45);
}

.cmn-support-tile.is-active {
  border-color: rgba(239, 68, 68, 0.72);
  background: rgba(153, 27, 27, 0.12);
}

.cmn-support-list {
  overflow-y: auto;
  display: grid;
  gap: 10px;
  max-height: 520px;
}

.cmn-support-ticket-list {
  display: grid;
  gap: 8px;
}

.cmn-support-ticket {
  width: 100%;
  text-align: left;
  background: var(--cmn-panel-strong);
  border: 1px solid var(--cmn-border);
  border-radius: 10px;
  min-height: 62px;
  max-height: 72px;
  padding: 8px 10px;
  display: grid;
  gap: 2px;
  color: var(--cmn-text);
  overflow: hidden;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cmn-support-ticket:hover {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(26, 35, 52, 0.9);
}

.cmn-support-ticket.is-selected {
  border-color: rgba(239, 68, 68, 0.7);
  background: rgba(30, 41, 59, 0.88);
}

.cmn-support-ticket strong {
  font-size: 13px;
}

.cmn-support-ticket span {
  font-size: 12px;
  color: var(--cmn-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.cmn-support-ticket em {
  font-size: 11px;
  color: var(--cmn-accent);
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.cmn-support-ticket-badge {
  justify-self: start;
  font-size: 10px;
  border: 1px solid rgba(34, 197, 94, 0.45);
  color: #22c55e;
  border-radius: 999px;
  padding: 2px 8px;
  background: rgba(16, 185, 129, 0.12);
}

.cmn-support-ticket-badge.is-warning {
  border-color: rgba(250, 204, 21, 0.55);
  color: #fde68a;
  background: rgba(250, 204, 21, 0.14);
}

.cmn-support-ticket-badge--channel {
  border-color: rgba(239, 68, 68, 0.52);
  color: #fecaca;
  background: rgba(127, 29, 29, 0.28);
}

.cmn-ticket-status-icon {
  display: inline-flex;
  width: 14px;
  margin-right: 6px;
  justify-content: center;
}

.cmn-ticket-status-icon.is-new {
  color: #facc15;
}

.cmn-ticket-status-icon.is-open {
  color: #60a5fa;
}

.cmn-ticket-status-icon.is-closed {
  color: #22c55e;
}

.cmn-support-thread {
  background: var(--cmn-panel);
  border: 1px solid var(--cmn-border);
  border-radius: 16px;
  padding: 16px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  min-height: 520px;
}

.cmn-support-thread-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.cmn-support-thread-channel {
  margin-top: 4px;
  font-size: 12px;
  color: #fecaca;
}

.cmn-support-thread-actions {
  display: flex;
  gap: 8px;
}

.cmn-support-payroll-context {
  border: 1px solid var(--cmn-border);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.58);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.cmn-support-payroll-context[hidden] {
  display: none !important;
}

.cmn-support-payroll-context__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.cmn-support-payroll-context__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.cmn-support-payroll-context__row {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.7);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.cmn-support-payroll-context__row strong {
  font-size: 12px;
}

.cmn-support-messages {
  overflow-y: auto;
  display: grid;
  gap: 10px;
  padding-right: 4px;
}

.cmn-support-bubble {
  max-width: 80%;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--cmn-panel-strong);
  border: 1px solid var(--cmn-border);
}

.cmn-support-bubble.is-admin {
  margin-left: auto;
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.3);
}

.cmn-booking-bubble.is-candidate {
  border-color: rgba(248, 113, 113, 0.35);
}

.cmn-booking-bubble.is-school {
  border-color: rgba(56, 189, 248, 0.35);
}

.cmn-booking-bubble.is-account_manager,
.cmn-booking-bubble.is-admin {
  border-color: rgba(220, 38, 38, 0.38);
}

.cmn-booking-bubble.is-system {
  opacity: 0.9;
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.36);
}

.cmn-support-meta {
  font-size: 11px;
  color: var(--cmn-muted);
  margin-bottom: 4px;
}

.cmn-support-text {
  font-size: 13px;
  line-height: 1.4;
}

.cmn-support-attachments {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.cmn-support-attachment-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cmn-border);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  color: var(--cmn-text);
  text-decoration: none;
  background: rgba(15, 23, 42, 0.65);
}

.cmn-support-feedback {
  margin-top: 12px;
}

body.cmn-support-modal-lock {
  overflow: hidden;
}

.cmn-support-feedback-form,
.cmn-support-feedback-summary {
  border: 1px solid var(--cmn-border);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.6);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.cmn-support-feedback-form label {
  display: grid;
  gap: 4px;
  font-size: 12px;
}

.cmn-support-user.is-feedback-modal-open .cmn-support-body,
.cmn-support-user.is-feedback-modal-open .cmn-support-header-row {
  pointer-events: none;
  filter: blur(2px);
}

.cmn-support-feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 12060;
  display: grid;
  place-items: center;
}

.cmn-support-feedback-modal[hidden] {
  display: none !important;
}

.cmn-support-feedback-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 12, 0.78);
  backdrop-filter: blur(3px);
}

.cmn-support-feedback-modal__card {
  position: relative;
  width: min(640px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  border-radius: 16px;
  border: 1px solid rgba(248, 113, 113, 0.28);
  background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  padding: 20px;
  display: grid;
  gap: 14px;
}

.cmn-support-feedback-modal-form {
  display: grid;
  gap: 12px;
}

.cmn-feedback-question {
  display: grid;
  gap: 8px;
}

.cmn-feedback-question label {
  font-size: 13px;
  color: #e5e7eb;
  font-weight: 600;
}

.cmn-star-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cmn-star-btn {
  border: 0;
  background: transparent;
  color: #4b5563;
  font-size: 28px;
  line-height: 1;
  padding: 0;
  width: 34px;
  height: 34px;
  cursor: pointer;
  transition: color 0.12s ease, transform 0.12s ease;
}

.cmn-star-btn.is-hover,
.cmn-star-btn.is-active {
  color: #ef4444;
}

.cmn-star-btn:hover {
  transform: scale(1.06);
}

.cmn-star-score {
  font-size: 12px;
  color: #fca5a5;
}

.cmn-feedback-toggle {
  display: inline-flex;
  gap: 8px;
}

.cmn-feedback-toggle .cmn-ghost {
  min-width: 70px;
}

.cmn-feedback-toggle .cmn-ghost.is-active {
  border-color: #ef4444;
  color: #fecaca;
  background: rgba(239, 68, 68, 0.16);
}

.cmn-support-feedback-modal textarea {
  width: 100%;
  min-height: 88px;
  border-radius: 10px;
  border: 1px solid var(--cmn-border);
  background: rgba(15, 23, 42, 0.75);
  color: #f8fafc;
  padding: 10px 12px;
  resize: vertical;
}

body.cmn-booking-feedback-lock {
  overflow: hidden;
}

.cmn-booking-feedback-summary {
  margin-bottom: 12px;
}

.cmn-booking-feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 12080;
  display: grid;
  place-items: center;
}

.cmn-booking-feedback-modal[hidden] {
  display: none !important;
}

.cmn-booking-feedback-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 12, 0.8);
  backdrop-filter: blur(3px);
}

.cmn-booking-feedback-modal__card {
  position: relative;
  width: min(680px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  border-radius: 16px;
  border: 1px solid rgba(248, 113, 113, 0.34);
  background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  padding: 20px;
  display: grid;
  gap: 14px;
}

.cmn-booking-feedback-form {
  display: grid;
  gap: 12px;
}

.cmn-booking-feedback-form textarea {
  width: 100%;
  min-height: 88px;
  border-radius: 10px;
  border: 1px solid var(--cmn-border);
  background: rgba(15, 23, 42, 0.75);
  color: #f8fafc;
  padding: 10px 12px;
  resize: vertical;
}

.cmn-feedback-tags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.cmn-inline-ready-response {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--cmn-muted);
}

.cmn-inline-ready-response select {
  min-width: 220px;
}

.cmn-ready-response-form {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.cmn-ready-response-list {
  display: grid;
  gap: 10px;
}

.cmn-ready-response-item {
  border: 1px solid var(--cmn-border);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.cmn-ready-response-item__main {
  display: grid;
  gap: 6px;
}

.cmn-ready-response-item__actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.cmn-ready-response-item__actions form {
  margin: 0;
}

.cmn-ready-response-preview-wrap {
  display: grid;
  gap: 8px;
}

.cmn-ready-response-preview {
  margin: 0;
  border: 1px dashed var(--cmn-border);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.6);
  padding: 10px;
  white-space: pre-wrap;
  font-size: 12px;
}

.cmn-support-insights-modal {
  position: fixed;
  inset: 0;
  z-index: 12070;
  display: grid;
  place-items: center;
}

.cmn-support-insights-modal[hidden] {
  display: none !important;
}

.cmn-support-insights-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 12, 0.78);
  backdrop-filter: blur(3px);
}

.cmn-support-insights-modal__card {
  position: relative;
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  border-radius: 16px;
  border: 1px solid var(--cmn-border);
  background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.cmn-support-insights-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.cmn-support-insights-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cmn-support-insights-filters .cmn-ghost.is-active {
  border-color: var(--cmn-accent);
  color: var(--cmn-accent);
}

.cmn-support-insights-list {
  display: grid;
  gap: 8px;
}

.cmn-support-insights-rows {
  display: grid;
  gap: 8px;
}

.cmn-support-insight-row {
  width: 100%;
  text-align: left;
  border: 1px solid var(--cmn-border);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.72);
  color: var(--cmn-text);
  padding: 10px;
  display: grid;
  gap: 3px;
}

.cmn-support-insight-row strong {
  font-size: 13px;
}

.cmn-support-insight-row span {
  font-size: 12px;
  color: var(--cmn-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmn-support-insight-row em {
  font-size: 11px;
  color: #fca5a5;
  font-style: normal;
}

.cmn-support-reply textarea {
  width: 100%;
  min-height: 90px;
  margin-bottom: 10px;
}

.cmn-support-reply input[type='file'] {
  display: block;
  margin-bottom: 10px;
}

.cmn-request-chat-panel {
  margin-top: 14px;
}

.cmn-booking-disclaimer-modal {
  position: relative;
  min-height: 170px;
  display: grid;
  place-items: center;
}

.cmn-booking-disclaimer-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 12, 0.78);
  border-radius: 14px;
}

.cmn-booking-disclaimer-modal__card {
  position: relative;
  z-index: 2;
  width: min(560px, calc(100% - 18px));
  border: 1px solid rgba(248, 113, 113, 0.28);
  border-radius: 14px;
  background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
  padding: 16px;
  display: grid;
  gap: 10px;
}

.cmn-booking-disclaimer-modal__card h4 {
  margin: 0;
}

.cmn-booking-disclaimer-modal__card p {
  margin: 0;
}

.cmn-support-user {
  display: grid;
  gap: 16px;
}

.cmn-support-whats-new {
  border: 1px solid var(--cmn-border);
  border-radius: 14px;
  padding: 14px 16px;
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.82), rgba(17, 24, 39, 0.92));
  display: grid;
  gap: 10px;
}

.cmn-support-whats-new__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.cmn-support-whats-new__header h4 {
  margin: 0;
  font-size: 15px;
}

.cmn-support-whats-new__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.cmn-support-whats-new__item {
  border: 1px solid rgba(248, 113, 113, 0.22);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.58);
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.cmn-support-whats-new__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--cmn-muted);
}

.cmn-support-whats-new__version {
  border: 1px solid rgba(248, 113, 113, 0.5);
  border-radius: 999px;
  padding: 2px 8px;
  background: rgba(127, 29, 29, 0.28);
  color: #fecaca;
  font-size: 10px;
  letter-spacing: 0.02em;
}

.cmn-support-whats-new__item p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--cmn-text);
}

.cmn-support-whats-new__highlights {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

.cmn-support-whats-new__highlights li {
  font-size: 11px;
  line-height: 1.35;
  color: var(--cmn-muted);
}

.cmn-support-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cmn-auth-card {
  max-width: 460px;
  margin: 40px auto;
}

.cmn-auth-heading {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.cmn-auth-brand {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.cmn-auth-brand span {
  color: #dc2626;
}

.cmn-auth-card .cmn-form {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.cmn-support-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .cmn-support-hub,
  .cmn-support-body {
    grid-template-columns: 1fr;
  }
  .cmn-support-sidebar,
  .cmn-support-thread {
    min-height: unset;
  }
  .cmn-support-feedback-modal__card {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    padding: 14px;
  }
  .cmn-booking-feedback-modal__card {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    padding: 14px;
  }
  .cmn-ready-response-item {
    flex-direction: column;
  }
  .cmn-ready-response-item__actions {
    justify-content: flex-start;
  }
  .cmn-feedback-tags {
    grid-template-columns: 1fr;
  }
}

.cmn-availability-hero-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 3;
  width: 100%;
  text-align: center;
}

.cmn-availability-btn {
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 14px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  min-height: 54px;
  min-width: min(620px, 100%);
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  position: relative;
  z-index: 4;
  pointer-events: auto;
  touch-action: manipulation;
  border: 1px solid rgba(127, 29, 29, 0.95);
  box-shadow: 0 10px 24px rgba(220, 38, 38, 0.28);
}

.cmn-availability-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.cmn-availability-helper {
  font-size: 13px;
  color: var(--cmn-muted);
  line-height: 1.35;
}

@media (max-width: 720px) {
  .cmn-availability-hero {
    padding: 20px;
  }

  .cmn-availability-btn {
    width: 100%;
    justify-content: center;
  }
}

.cmn-availability-status {
  font-size: 14px;
  font-weight: 600;
  margin-top: 6px;
}

.cmn-availability-status.is-confirmed {
  color: #22c55e;
}

.cmn-availability-status.is-blocked {
  color: #f87171;
}

.cmn-availability-hero.is-confirmed {
  border-color: rgba(34, 197, 94, 0.6);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(15, 23, 42, 0.9));
}

.cmn-availability-hero.is-blocked {
  border-color: rgba(248, 113, 113, 0.6);
}

.cmn-portal-light .cmn-availability-hero {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.08), #ffffff);
  border-color: rgba(220, 38, 38, 0.3);
}

.cmn-portal-light .cmn-availability-hero.is-confirmed {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), #ffffff);
  border-color: rgba(34, 197, 94, 0.4);
}

.cmn-portal-light .cmn-availability-subtext {
  color: #64748b;
}

.cmn-portal-light .cmn-availability-status.is-confirmed {
  color: #15803d;
}

.cmn-portal-light .cmn-availability-status.is-blocked {
  color: #b91c1c;
}

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

.cmn-calendar-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.cmn-calendar-interactive .cmn-calendar-cell {
  border: 1px solid var(--cmn-border);
}

.cmn-calendar-interactive .cmn-calendar-cell.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.cmn-calendar-interactive .cmn-calendar-cell.is-weekend {
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.2);
  color: rgba(226, 232, 240, 0.7);
}

.cmn-calendar-range-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.cmn-calendar-range-controls label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--cmn-muted);
}

.cmn-calendar-range-controls input[type='date'] {
  min-height: 38px;
}

.cmn-calendar-legend {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 12px;
  color: var(--cmn-muted);
  margin-top: 10px;
  flex-wrap: wrap;
}

.cmn-calendar-feedback {
  font-size: 12px;
  color: var(--cmn-muted);
  min-height: 16px;
}

.cmn-dot.is-weekend {
  background: rgba(148, 163, 184, 0.6);
}

.cmn-dashboard-row-equal {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.cmn-dashboard-card {
  background: var(--cmn-panel-strong);
  border: 1px solid var(--cmn-border);
  border-radius: 12px;
  padding: 18px;
  display: grid;
  gap: 10px;
}

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

.cmn-profile-progress {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.cmn-profile-progress-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.cmn-profile-missing {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 6px 10px;
  color: #e2e8f0;
  font-size: 12px;
}

.cmn-profile-missing summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}

.cmn-profile-missing summary::-webkit-details-marker {
  display: none;
}

.cmn-profile-missing ul {
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.cmn-profile-missing a {
  color: #f8fafc;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cmn-focus-pulse {
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.65), 0 0 18px rgba(239, 68, 68, 0.35) !important;
  transition: box-shadow 0.25s ease;
}

.cmn-inline-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: #c9d1d9;
}

.cmn-inline-field input[type="password"] {
  width: 220px;
  max-width: 100%;
  background: rgba(12, 16, 22, 0.75);
  border: 1px solid var(--cmn-border);
  color: #f5f7fb;
  padding: 8px 10px;
  border-radius: 8px;
}

@media (max-width: 720px) {
  .cmn-inline-field input[type="password"] {
    width: 100%;
  }
}

.cmn-progress-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.cmn-progress-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f0c16a, #c9923a);
}

.cmn-status-chip {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.cmn-status-chip.is-verified {
  background: rgba(51, 134, 84, 0.25);
  color: #9fe3b8;
  border: 1px solid rgba(51, 134, 84, 0.5);
}

.cmn-status-chip.is-pending {
  background: rgba(168, 81, 43, 0.2);
  color: #f1b08f;
  border: 1px solid rgba(168, 81, 43, 0.45);
}

.cmn-status-chip.is-declined {
  background: rgba(185, 28, 28, 0.22);
  color: #fecaca;
  border: 1px solid rgba(220, 38, 38, 0.45);
}

.cmn-status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 13px;
}

.cmn-status-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-left: 18px;
  position: relative;
}

.cmn-status-list li::before {
  position: absolute;
  left: 0;
  top: 2px;
}

.cmn-status-list li.is-ok::before {
  content: '✓';
  color: #6ed7a5;
}

.cmn-status-list li.is-warn::before {
  content: '!';
  color: #e2766c;
}

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

.cmn-profile-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
}

.cmn-dashboard-card-wide {
  grid-column: span 2;
}

.cmn-profile-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.cmn-profile-meta-item {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.38);
  padding: 10px 12px;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.cmn-profile-meta-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(203, 213, 225, 0.72);
}

.cmn-profile-meta-value {
  font-size: 13px;
  color: #f8fafc;
  line-height: 1.35;
  word-break: break-word;
}

.cmn-candidate-weekly-earnings-card {
  display: grid;
  gap: 12px;
}

.cmn-candidate-weekly-earnings-range {
  margin: 0;
}

.cmn-candidate-weekly-earnings-grid {
  margin-top: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cmn-candidate-weekly-earnings-notes {
  display: grid;
  gap: 4px;
}

.cmn-candidate-weekly-earnings-notes .cmn-muted {
  margin: 0;
  line-height: 1.45;
}

.cmn-candidate-weekly-earnings-error {
  margin-top: 0;
}

.cmn-candidate-finance-page {
  display: grid;
  gap: 16px;
}

.cmn-candidate-finance-header-card h2 {
  margin: 0 0 6px;
}

.cmn-candidate-finance-header-card p {
  margin: 0;
}

.cmn-candidate-finance-status-list {
  display: grid;
  gap: 10px;
}

.cmn-candidate-finance-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--cmn-border);
  background: rgba(255, 255, 255, 0.02);
}

.cmn-candidate-finance-status-row span,
.cmn-candidate-finance-status-row strong {
  margin: 0;
}

.cmn-candidate-finance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cmn-candidate-payroll-query-panel {
  border: 1px solid var(--cmn-border);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.cmn-candidate-payroll-query-form {
  display: grid;
  gap: 12px;
}

.cmn-candidate-payroll-query-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cmn-candidate-payroll-query-grid label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--cmn-muted);
}

.cmn-candidate-payroll-query-grid label:last-child {
  grid-column: 1 / -1;
}

.cmn-candidate-payroll-query-grid select[multiple] {
  min-height: 120px;
}

.cmn-candidate-payroll-query-feedback {
  margin: 0;
}

.cmn-candidate-finance-bank-message {
  margin: 0;
}

.cmn-candidate-finance-bank-card {
  display: grid;
  gap: 12px;
}

.cmn-candidate-finance-bank-card .cmn-muted {
  margin: 0;
}

.cmn-candidate-finance-bank-form {
  display: grid;
  gap: 12px;
  background: transparent;
  border: none;
  padding: 0;
}

.cmn-candidate-finance-bank-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cmn-candidate-finance-bank-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--cmn-muted);
}

.cmn-candidate-finance-bank-preview {
  border: 1px solid var(--cmn-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.cmn-candidate-finance-bank-preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--cmn-muted);
}

.cmn-candidate-finance-bank-preview-row strong {
  color: var(--cmn-text);
  font-weight: 600;
}

.cmn-candidate-finance-self-employed-card {
  border-left: 3px solid var(--cmn-accent);
}

.cmn-candidate-finance-self-employed-card p {
  margin: 0 0 8px;
}

.cmn-staff-payroll-page {
  display: grid;
  gap: 16px;
}

.cmn-staff-payroll-header-card h2 {
  margin: 0 0 6px;
}

.cmn-staff-payroll-header-card p {
  margin: 0;
}

.cmn-staff-payroll-ticket-badge-wrap {
  margin-top: 10px;
}

.cmn-staff-payroll-ticket-badge-wrap .cmn-status-chip {
  margin-left: 8px;
}

.cmn-staff-payroll-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cmn-staff-payroll-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.cmn-staff-payroll-actions form {
  margin: 0;
}

.cmn-staff-payroll-actions button[disabled] {
  opacity: 0.66;
  cursor: not-allowed;
}

.cmn-staff-payroll-run-notice {
  margin: 0;
}

.cmn-staff-payroll-table .cmn-empty {
  margin: 4px 0;
}

.cmn-staff-payroll-table .cmn-status-chip {
  white-space: nowrap;
}

.cmn-staff-payroll-adjustments-card .cmn-card-header,
.cmn-staff-payroll-disputes-card .cmn-card-header {
  align-items: flex-start;
}

.cmn-staff-payroll-adjustment-form {
  margin: 0 0 12px;
}

.cmn-staff-payroll-adjustment-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cmn-staff-payroll-adjustment-table .cmn-empty,
.cmn-staff-payroll-disputes-table .cmn-empty {
  margin: 4px 0;
}

.cmn-staff-payroll-adjustment-decision-form,
.cmn-staff-payroll-dispute-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cmn-staff-payroll-adjustment-decision-form input,
.cmn-staff-payroll-dispute-form input {
  min-width: 160px;
  flex: 1 1 180px;
}

.cmn-staff-payroll-adjustment-note {
  margin-top: 4px;
  font-size: 12px;
}

.cmn-staff-payroll-tickets-card .cmn-card-header {
  align-items: flex-start;
}

.cmn-staff-payroll-ticket-filters {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 12px;
}

.cmn-staff-payroll-ticket-filters label {
  display: grid;
  gap: 4px;
}

.cmn-staff-payroll-ticket-filter-actions {
  margin-top: 0;
  align-items: flex-end;
}

.cmn-staff-payroll-ticket-table .cmn-empty {
  margin: 4px 0;
}

.cmn-staff-payroll-ticket-actions {
  display: grid;
  gap: 8px;
}

.cmn-staff-payroll-ticket-quick-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

@media (max-width: 1100px) {
  .cmn-profile-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cmn-candidate-weekly-earnings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cmn-candidate-finance-bank-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cmn-candidate-payroll-query-grid {
    grid-template-columns: 1fr;
  }

  .cmn-staff-payroll-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cmn-staff-payroll-adjustment-grid {
    grid-template-columns: 1fr;
  }

  .cmn-staff-payroll-ticket-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .cmn-profile-meta-grid {
    grid-template-columns: 1fr;
  }

  .cmn-candidate-weekly-earnings-grid {
    grid-template-columns: 1fr;
  }

  .cmn-candidate-finance-bank-form-grid {
    grid-template-columns: 1fr;
  }

  .cmn-candidate-payroll-query-grid {
    grid-template-columns: 1fr;
  }

  .cmn-candidate-finance-status-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .cmn-candidate-finance-bank-preview-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .cmn-staff-payroll-summary-grid {
    grid-template-columns: 1fr;
  }

  .cmn-support-payroll-context__grid {
    grid-template-columns: 1fr;
  }

  .cmn-staff-payroll-ticket-filters {
    grid-template-columns: 1fr;
  }
}

.cmn-calendar-card .cmn-calendar-grid {
  margin-top: 12px;
}

.cmn-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.cmn-calendar-cell.is-empty {
  background: transparent;
  border: none;
  cursor: default;
}

.cmn-calendar-cell.is-available {
  background: rgba(75, 211, 138, 0.22);
  border-color: rgba(75, 211, 138, 0.55);
}

.cmn-calendar-cell.is-unavailable {
  background: rgba(228, 96, 96, 0.22);
  border-color: rgba(228, 96, 96, 0.55);
}

.cmn-tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 10, 20, 0.65);
  z-index: 12000;
  pointer-events: none;
}

.cmn-tour-popover {
  position: absolute;
  width: min(360px, calc(100vw - 28px));
  background: #121821;
  border: 1px solid rgba(220, 38, 38, 0.35);
  border-radius: 14px;
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.55);
  padding: 14px;
  color: #f8fafc;
  z-index: 12001;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
}

.cmn-tour-avatar-wrap {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
  border: 1px solid rgba(220, 38, 38, 0.32);
  overflow: hidden;
}

.cmn-tour-avatar {
  width: 72px;
  height: 72px;
  object-fit: cover;
  display: block;
}

.cmn-tour-avatar-fallback {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #dc2626, #7f1d1d);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.cmn-tour-content h4 {
  margin: 0 0 4px;
  font-size: 15px;
}

.cmn-tour-content p {
  margin: 0;
  font-size: 13px;
  color: rgba(241, 245, 249, 0.82);
  line-height: 1.4;
}

.cmn-tour-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cmn-tour-actions button {
  border-radius: 8px;
  border: 1px solid var(--cmn-border);
  background: rgba(15, 23, 42, 0.5);
  color: #f8fafc;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}

.cmn-tour-actions button:hover {
  border-color: rgba(220, 38, 38, 0.5);
}

.cmn-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

[data-candidate-settings] input[data-settings-notify-time],
[data-notification-preferences] input[data-notify-time] {
  max-width: 180px;
}

.cmn-settings-actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cmn-settings-danger-zone {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(220, 38, 38, 0.28);
}

.cmn-settings-danger-zone label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.cmn-settings-danger-zone input[type='email'] {
  max-width: 420px;
}

.cmn-tour-highlight {
  position: relative;
  z-index: 12002 !important;
  outline: 2px solid rgba(220, 38, 38, 0.7);
  outline-offset: 3px;
  border-radius: 10px;
}

.cmn-calendar-static .cmn-calendar-cell {
  border-radius: 50%;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0 auto;
}

.cmn-calendar-static .cmn-calendar-cell span {
  padding: 0;
  line-height: 34px;
}

.cmn-dashboard-row .cmn-availability-card {
  background: linear-gradient(135deg, rgba(208, 42, 42, 0.18), rgba(18, 20, 26, 0.9));
  border: 1px solid rgba(208, 42, 42, 0.35);
  text-align: left;
}

.cmn-dashboard-row .cmn-availability-card h3 {
  font-size: 22px;
  margin-bottom: 8px;
}

.cmn-availability-actions {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.cmn-availability-actions .cmn-primary,
.cmn-availability-actions .cmn-ghost {
  width: 100%;
}

.cmn-availability-link {
  justify-self: start;
}

.cmn-availability-layout {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: 16px;
}

.cmn-availability-card-wide {
  min-height: 520px;
}

.cmn-availability-stats {
  display: grid;
  gap: 8px;
  font-size: 13px;
  color: var(--cmn-muted);
  margin-top: 14px;
}

.cmn-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}

.cmn-dot.is-available {
  background: #4bd38a;
}

.cmn-dot.is-unavailable {
  background: #e46060;
}

.cmn-profile-summary-header {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: center;
}

.cmn-profile-avatar {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  font-weight: 600;
  color: var(--cmn-text);
}

.cmn-profile-progress-line {
  margin-top: 8px;
}

.cmn-profile-alert {
  margin-top: 6px;
  color: #e2766c;
  font-size: 12px;
}

.cmn-bookings-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.cmn-booking-tabs {
  display: flex;
  gap: 8px;
}

.cmn-booking-tab {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--cmn-border);
  font-size: 12px;
  color: var(--cmn-muted);
  text-decoration: none;
}

.cmn-booking-tab.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--cmn-text);
  border-color: rgba(255, 255, 255, 0.2);
}

.cmn-booking-filters {
  display: grid;
  grid-template-columns: 0.9fr 0.9fr 0.9fr 1.3fr;
  gap: 10px;
  margin-bottom: 12px;
}

.cmn-booking-filters .cmn-filter {
  background: rgba(10, 12, 16, 0.6);
  border: 1px solid var(--cmn-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--cmn-muted);
  display: grid;
  gap: 6px;
}

.cmn-filter select,
.cmn-filter input {
  background: transparent;
  border: none;
  color: var(--cmn-text);
  font-size: 12px;
  width: 100%;
  outline: none;
}

.cmn-filter input::placeholder {
  color: var(--cmn-muted);
}

.cmn-booking-table {
  border: 1px solid var(--cmn-border);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(10, 12, 16, 0.55);
}

.cmn-booking-row {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 1fr 0.8fr 1.4fr;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cmn-border);
  font-size: 13px;
}

.cmn-booking-row > div:last-child {
  display: grid;
  gap: 6px;
}

.cmn-booking-row:last-child {
  border-bottom: none;
}

.cmn-booking-row.header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--cmn-muted);
  background: rgba(255, 255, 255, 0.03);
}

.cmn-booking-status {
  justify-self: end;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(64, 130, 88, 0.25);
  color: #a6e0be;
  border: 1px solid rgba(64, 130, 88, 0.5);
}

.cmn-booking-status.is-approved {
  background: rgba(64, 130, 88, 0.2);
}

.cmn-booking-status.is-pending {
  background: rgba(208, 140, 54, 0.2);
  color: #f2c28b;
  border-color: rgba(208, 140, 54, 0.45);
}

.cmn-booking-response {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 14px;
  border-bottom: 1px solid var(--cmn-border);
  font-size: 12px;
  color: var(--cmn-muted);
  flex-wrap: wrap;
}

.cmn-booking-response form {
  display: flex;
  gap: 8px;
}

.cmn-invite-banner {
  background: rgba(208, 140, 54, 0.18);
  border: 1px solid rgba(208, 140, 54, 0.4);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.cmn-invite-banner span {
  color: var(--cmn-muted);
  font-size: 12px;
}

.cmn-booking-empty {
  padding: 20px;
  text-align: center;
  color: var(--cmn-muted);
  font-size: 13px;
}

.cmn-support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.cmn-support-card {
  text-align: center;
}

.cmn-support-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.4px;
}

.cmn-support-footer {
  margin-top: 22px;
  text-align: center;
  background: rgba(10, 12, 16, 0.5);
  border: 1px solid var(--cmn-border);
  border-radius: 12px;
  padding: 20px;
  display: grid;
  gap: 8px;
  justify-items: center;
}

.cmn-preview-register {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.cmn-preview-register .cmn-primary {
  padding: 12px 26px;
  font-size: 14px;
}

.cmn-school-portal {
  max-width: 1200px;
}

.cmn-school-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  background: var(--cmn-panel);
  border: 1px solid var(--cmn-border);
  border-radius: 14px;
  overflow: hidden;
  min-height: 720px;
  box-shadow: var(--cmn-shadow);
}

.cmn-school-nav {
  background: rgba(14, 16, 21, 0.95);
  border-right: 1px solid var(--cmn-border);
  padding: 22px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cmn-school-nav-title {
  padding: 0 22px;
  font-size: 13px;
  color: var(--cmn-text);
  font-weight: 600;
}

.cmn-school-nav-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cmn-staff-shell {
  grid-template-columns: 236px 1fr;
  transition: grid-template-columns 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.cmn-staff-shell.is-nav-collapsed {
  grid-template-columns: 84px 1fr;
}

.cmn-staff-shell.is-nav-collapsed.is-nav-peek-open {
  grid-template-columns: 236px 1fr;
}

.cmn-staff-nav {
  gap: 10px;
  padding: 18px 0;
  transition: padding 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 981px) {
  .cmn-staff-nav,
  .cmn-school-nav,
  .cmn-candidate-nav {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
  }
}

.cmn-staff-nav-header {
  padding: 0 14px 4px;
}

.cmn-staff-nav-minimize {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--cmn-text);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.cmn-staff-nav-minimize:hover,
.cmn-staff-nav-minimize:focus-visible {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.cmn-staff-nav-links {
  gap: 10px;
}

.cmn-staff-nav-group {
  display: grid;
  gap: 9px;
  position: relative;
}

.cmn-staff-nav-group + .cmn-staff-nav-group {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.045);
}

.cmn-staff-nav-toggle {
  width: 100%;
  padding: 8px 14px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  background: transparent;
  color: rgba(226, 232, 240, 0.78);
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.065em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.cmn-staff-nav-toggle-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cmn-staff-nav-toggle-label {
  min-width: 0;
  opacity: 0.8;
  letter-spacing: 0.012em;
}

.cmn-staff-nav-group.is-active-group .cmn-staff-nav-toggle {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.cmn-staff-nav-group.is-active-group .cmn-staff-nav-toggle-label {
  opacity: 0.98;
}

.cmn-staff-nav-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid currentColor;
  opacity: 0.8;
  transition: transform 0.2s ease;
}

.cmn-staff-nav-group:not(.is-open) .cmn-staff-nav-caret {
  transform: rotate(-90deg);
}

.cmn-staff-nav-group-body {
  display: grid;
  gap: 4px;
}

.cmn-staff-nav-group:not(.is-open) .cmn-staff-nav-group-body {
  display: none;
}

.cmn-staff-nav-link {
  padding-left: 18px;
  font-size: 12px;
}

.cmn-staff-nav-link--dashboard-root {
  margin-bottom: 10px !important;
}

.cmn-staff-nav-link--submenu {
  padding-left: 34px;
  font-size: 12px;
  opacity: 0.95;
}

.cmn-staff-nav-link--submenu.is-active {
  opacity: 1;
}

.cmn-school-nav-link {
  padding: 10px 22px;
  color: var(--cmn-muted);
  text-decoration: none;
  font-size: 13px;
  border-left: 3px solid transparent;
  transition: 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cmn-school-nav-link:hover {
  color: var(--cmn-text);
  background: rgba(255, 255, 255, 0.04);
}

.cmn-school-nav-link.is-active {
  color: var(--cmn-text);
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--cmn-accent);
}

.cmn-staff-nav .cmn-school-nav-link {
  border-left-width: 2px;
  border-left-color: transparent;
  border-radius: 10px;
  margin: 0 10px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.cmn-portal-light .cmn-staff-nav .cmn-school-nav-link:hover {
  background: rgba(148, 163, 184, 0.14) !important;
  box-shadow: inset 2px 0 0 rgba(208, 42, 42, 0.52);
  color: #ffffff !important;
}

.cmn-portal-light .cmn-staff-nav .cmn-school-nav-link.is-active {
  background: rgba(148, 163, 184, 0.2) !important;
  box-shadow:
    inset 2px 0 0 rgba(208, 42, 42, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  border-left-color: rgba(226, 232, 240, 0.52) !important;
  color: #ffffff !important;
  font-weight: 650;
}

.cmn-staff-nav .cmn-school-nav-icon {
  width: 19px;
  height: 19px;
  opacity: 0.92;
}

.cmn-school-nav-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  flex-shrink: 0;
  opacity: 0.88;
}

.cmn-school-nav-label {
  min-width: 0;
}

.cmn-staff-nav.is-collapsed {
  padding: 14px 0 16px;
}

.cmn-staff-nav.is-collapsed .cmn-staff-nav-minimize {
  justify-content: center;
  padding: 8px 0;
}

.cmn-staff-nav.is-collapsed .cmn-staff-nav-links {
  gap: 12px;
  padding: 0 8px;
  align-content: start;
}

.cmn-staff-nav.is-collapsed .cmn-staff-nav-group + .cmn-staff-nav-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.045);
}

.cmn-staff-nav.is-collapsed .cmn-staff-nav-toggle {
  justify-content: center;
  padding: 10px 8px;
  margin: 0 auto;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  width: 100%;
  max-width: 52px;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.cmn-staff-nav.is-collapsed .cmn-staff-nav-toggle-main {
  justify-content: center;
  width: 100%;
  gap: 0;
}

.cmn-staff-nav.is-collapsed .cmn-staff-nav-toggle:hover,
.cmn-staff-nav.is-collapsed .cmn-staff-nav-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

.cmn-staff-nav.is-collapsed .cmn-staff-nav-group.is-active-group .cmn-staff-nav-toggle {
  background: rgba(208, 42, 42, 0.14);
  border-color: rgba(208, 42, 42, 0.38);
  box-shadow:
    0 0 0 1px rgba(208, 42, 42, 0.18),
    0 0 14px rgba(208, 42, 42, 0.16);
}

.cmn-staff-nav.is-collapsed .cmn-staff-nav-group-body {
  display: none !important;
}

.cmn-staff-nav.is-collapsed .cmn-school-nav-link {
  justify-content: center;
  align-items: center;
  padding: 10px 8px;
  margin: 0 auto;
  min-height: 42px;
  width: 100%;
  max-width: 52px;
  border-radius: 12px;
  border-left: 0 !important;
  position: relative;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.cmn-staff-nav.is-collapsed .cmn-school-nav-link::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  width: 2px;
  height: 16px;
  border-radius: 999px;
  background: rgba(208, 42, 42, 0.88);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.cmn-staff-nav.is-collapsed .cmn-school-nav-link:hover,
.cmn-staff-nav.is-collapsed .cmn-school-nav-link:focus-visible {
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none;
}

.cmn-staff-nav.is-collapsed .cmn-school-nav-link.is-active {
  background: rgba(208, 42, 42, 0.16) !important;
  box-shadow:
    0 0 0 1px rgba(208, 42, 42, 0.42),
    0 0 14px rgba(208, 42, 42, 0.18) !important;
}

.cmn-staff-nav.is-collapsed .cmn-school-nav-link.is-active::before {
  opacity: 1;
}

.cmn-staff-nav.is-collapsed .cmn-school-nav-label,
.cmn-staff-nav.is-collapsed .cmn-staff-nav-toggle-label,
.cmn-staff-nav.is-collapsed .cmn-staff-nav-caret {
  display: none;
}

.cmn-staff-nav:not(.is-collapsed) [data-tooltip]::after {
  display: none !important;
}

.cmn-staff-nav.is-collapsed [data-tooltip]::after {
  left: calc(100% + 10px);
  bottom: 50%;
  transform: translate3d(8px, 50%, 0);
  min-width: max-content;
  max-width: 240px;
  text-align: left;
  pointer-events: none;
  transition-duration: 0.1s;
  transition-delay: 0s;
  will-change: transform, opacity;
  white-space: nowrap;
}

.cmn-staff-nav.is-collapsed [data-tooltip]:hover::after,
.cmn-staff-nav.is-collapsed [data-tooltip]:focus-visible::after {
  transform: translate3d(0, 50%, 0);
}

.cmn-staff-nav.is-collapsed.is-peek-open .cmn-staff-nav-links {
  padding: 0;
  gap: 10px;
}

.cmn-staff-nav.is-collapsed.is-peek-open .cmn-staff-nav-group + .cmn-staff-nav-group {
  margin-top: 12px;
  padding-top: 14px;
}

.cmn-staff-nav.is-collapsed.is-peek-open .cmn-staff-nav-toggle {
  justify-content: space-between;
  margin: 0;
  padding: 8px 14px;
  max-width: none;
  min-height: 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  background: transparent;
  width: 100%;
  box-shadow: none;
}

.cmn-staff-nav.is-collapsed.is-peek-open .cmn-staff-nav-toggle-main {
  justify-content: flex-start;
  width: auto;
  gap: 10px;
}

.cmn-staff-nav.is-collapsed.is-peek-open .cmn-school-nav-link {
  justify-content: flex-start;
  align-items: center;
  width: auto;
  max-width: none;
  margin: 0 10px;
  padding: 9px 22px 9px 18px;
  min-height: 0;
  border-radius: 10px;
}

.cmn-staff-nav.is-collapsed.is-peek-open .cmn-staff-nav-group-body {
  display: grid !important;
}

.cmn-staff-nav.is-collapsed.is-peek-open .cmn-school-nav-label,
.cmn-staff-nav.is-collapsed.is-peek-open .cmn-staff-nav-toggle-label,
.cmn-staff-nav.is-collapsed.is-peek-open .cmn-staff-nav-caret {
  display: inline;
}

.cmn-staff-nav.is-collapsed.is-peek-open .cmn-staff-nav-caret {
  display: inline-block;
}

.cmn-staff-nav.is-collapsed.is-peek-open [data-tooltip]::after {
  display: none !important;
}

.cmn-email-centre-subnav {
  padding: 12px 14px;
}

.cmn-email-centre-subnav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cmn-email-centre-subnav .cmn-ghost {
  text-decoration: none;
}

.cmn-email-centre-subnav .cmn-ghost.is-active {
  border-color: rgba(220, 38, 38, 0.5);
  background: rgba(220, 38, 38, 0.12);
  color: var(--cmn-text);
}

.cmn-email-template-layout {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 280px;
}

.cmn-email-template-sidebar {
  align-self: start;
  display: grid;
  gap: 10px;
}

.cmn-email-template-tags {
  display: grid;
  gap: 8px;
}

.cmn-email-tag-insert {
  width: 100%;
  text-align: left;
}

.cmn-email-template-preview {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.cmn-email-template-preview pre {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--cmn-border);
  border-radius: 10px;
  background: rgba(12, 16, 22, 0.6);
  color: var(--cmn-text);
  white-space: pre-wrap;
}

.cmn-email-template-preview [data-template-preview-html] {
  padding: 10px;
}

.cmn-email-template-main .wp-editor-wrap {
  border: 1px solid var(--cmn-border);
  border-radius: 10px;
  overflow: hidden;
}

.cmn-dashboard-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.cmn-shortcut-tile {
  text-decoration: none;
  color: var(--cmn-text);
  border: 1px solid var(--cmn-border);
  background: rgba(13, 16, 23, 0.9);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 8px;
  min-height: 74px;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.cmn-shortcut-tile:hover {
  border-color: rgba(220, 38, 38, 0.45);
  background: rgba(19, 24, 34, 0.95);
  transform: translateY(-1px);
}

.cmn-shortcut-tile span {
  font-size: 12px;
  color: var(--cmn-muted);
}

.cmn-shortcut-tile strong {
  font-size: 20px;
  color: var(--cmn-accent);
  line-height: 1;
}

.cmn-exec-dashboard {
  display: grid;
  gap: 24px;
  margin-top: 8px;
  padding-bottom: 42px;
}

.cmn-exec-band {
  display: grid;
  gap: 14px;
}

.cmn-exec-band-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cmn-exec-band-head h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.cmn-exec-band-head p {
  margin: 4px 0 0;
  color: var(--cmn-muted);
  font-size: 13px;
  line-height: 1.4;
}

.cmn-exec-kpi-grid,
.cmn-exec-alert-grid,
.cmn-exec-activity-grid,
.cmn-exec-system-grid {
  display: grid;
  gap: 12px;
}

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

.cmn-exec-kpi-card {
  text-decoration: none;
  color: var(--cmn-text);
  border: 1px solid var(--cmn-border);
  background: rgba(12, 16, 24, 0.78);
  border-radius: 14px;
  padding: 16px;
  display: grid;
  gap: 8px;
  min-height: 122px;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.cmn-exec-kpi-card.is-primary-heartbeat {
  padding: 18px 18px 17px;
  border-color: rgba(208, 42, 42, 0.28);
  box-shadow:
    0 10px 24px rgba(2, 6, 14, 0.36),
    inset 0 0 0 1px rgba(208, 42, 42, 0.07);
}

.cmn-exec-kpi-card.is-primary-heartbeat .cmn-exec-kpi-value {
  font-weight: 760;
}

.cmn-exec-kpi-card:hover,
.cmn-exec-kpi-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(208, 42, 42, 0.44);
  background: rgba(16, 20, 30, 0.9);
  box-shadow: 0 12px 28px rgba(2, 6, 14, 0.42);
}

.cmn-exec-kpi-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.72);
}

.cmn-exec-kpi-value {
  font-size: 32px;
  line-height: 1.05;
  font-weight: 720;
  color: #f8fafc;
}

.cmn-exec-kpi-subtext {
  font-size: 12px;
  color: rgba(226, 232, 240, 0.74);
}

.cmn-exec-alert-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.cmn-exec-alert-card {
  text-decoration: none;
  color: var(--cmn-text);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 16, 24, 0.78);
  padding: 14px 14px 13px;
  display: grid;
  gap: 8px;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.cmn-exec-alert-card:hover,
.cmn-exec-alert-card:focus-visible {
  transform: translateY(-2px);
  background: rgba(16, 21, 32, 0.92);
}

.cmn-exec-alert-card.is-high {
  border-color: rgba(248, 113, 113, 0.58);
}

.cmn-exec-alert-card.is-medium {
  border-color: rgba(248, 113, 113, 0.34);
}

.cmn-exec-alert-card.is-low {
  border-color: rgba(255, 255, 255, 0.2);
}

.cmn-exec-alert-card.is-clear {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(10, 14, 21, 0.68);
}

.cmn-exec-alert-card.is-clear .cmn-exec-alert-label,
.cmn-exec-alert-card.is-clear p {
  color: rgba(226, 232, 240, 0.72);
}

.cmn-exec-alert-card.is-clear .cmn-exec-alert-count {
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(226, 232, 240, 0.76);
  background: rgba(255, 255, 255, 0.02);
}

.cmn-exec-alert-card.has-issue {
  border-color: rgba(239, 68, 68, 0.38);
  box-shadow: inset 2px 0 0 rgba(239, 68, 68, 0.56);
}

.cmn-exec-alert-card.has-issue .cmn-exec-alert-count {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(127, 29, 29, 0.26);
}

.cmn-exec-alert-card.is-medium.has-issue {
  border-color: rgba(239, 68, 68, 0.3);
}

.cmn-exec-alert-card.is-high.has-issue {
  border-color: rgba(239, 68, 68, 0.5);
}

.cmn-exec-alert-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cmn-exec-alert-label {
  font-size: 14px;
  font-weight: 620;
  color: #f8fafc;
}

.cmn-exec-alert-count {
  min-width: 34px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
}

.cmn-exec-alert-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.8);
}

.cmn-exec-activity-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.cmn-exec-activity-card {
  text-decoration: none;
  color: var(--cmn-text);
  border: 1px solid var(--cmn-border);
  border-radius: 12px;
  background: rgba(11, 15, 23, 0.76);
  padding: 14px;
  display: grid;
  gap: 7px;
  min-height: 108px;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.cmn-exec-activity-card:hover,
.cmn-exec-activity-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(16, 21, 32, 0.9);
}

.cmn-exec-activity-label {
  font-size: 13px;
  font-weight: 600;
  color: #f8fafc;
}

.cmn-exec-activity-value {
  font-size: 24px;
  font-weight: 680;
  line-height: 1.1;
  color: #f8fafc;
}

.cmn-exec-activity-subtext {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(226, 232, 240, 0.76);
}

.cmn-exec-activity-card.is-urgent {
  border-color: rgba(208, 42, 42, 0.34);
  box-shadow: inset 2px 0 0 rgba(208, 42, 42, 0.52);
}

.cmn-exec-activity-card.is-urgent .cmn-exec-activity-value {
  color: var(--cmn-accent);
}

.cmn-exec-activity-card.is-urgent:hover,
.cmn-exec-activity-card.is-urgent:focus-visible {
  border-color: rgba(208, 42, 42, 0.46);
}

.cmn-exec-system-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.cmn-exec-system-card {
  text-decoration: none;
  color: var(--cmn-text);
  border: 1px solid var(--cmn-border);
  border-radius: 12px;
  background: rgba(12, 16, 24, 0.8);
  padding: 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 82px;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.cmn-exec-system-card:hover,
.cmn-exec-system-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(208, 42, 42, 0.4);
  background: rgba(17, 22, 33, 0.94);
}

.cmn-exec-system-body {
  display: grid;
  gap: 3px;
}

.cmn-exec-system-label {
  font-size: 13px;
  font-weight: 620;
  color: #f8fafc;
}

.cmn-exec-system-subtext {
  font-size: 12px;
  color: rgba(226, 232, 240, 0.7);
}

.cmn-exec-system-count {
  font-size: 22px;
  color: #ffffff;
  line-height: 1;
}

.cmn-exec-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}

.cmn-exec-status-dot.is-green {
  background: #22c55e;
}

.cmn-exec-status-dot.is-amber {
  background: #f59e0b;
}

.cmn-exec-status-dot.is-red {
  background: #ef4444;
}

@media (max-width: 760px) {
  .cmn-exec-kpi-value {
    font-size: 28px;
  }

  .cmn-exec-system-card {
    grid-template-columns: auto 1fr;
  }

  .cmn-exec-system-count {
    grid-column: 2;
    justify-self: end;
  }
}

.cmn-school-main {
  padding: 28px 32px 34px;
  background: rgba(19, 21, 27, 0.8);
}

.cmn-school-header {
  margin-bottom: 16px;
}

.cmn-school-header h2 {
  margin: 0 0 6px;
  font-size: 22px;
}

.cmn-cover-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 10px;
  margin-bottom: 14px;
  align-items: center;
}

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

.cmn-cover-card {
  background: var(--cmn-panel-strong);
  border: 1px solid var(--cmn-border);
  border-radius: 12px;
  padding: 12px 16px 16px;
  display: grid;
  gap: 10px;
}

.cmn-cover-status {
  font-size: 11px;
  letter-spacing: 0.3px;
  color: #b7d5bf;
  background: rgba(52, 116, 80, 0.25);
  padding: 4px 10px;
  border-radius: 999px;
  width: fit-content;
}

.cmn-cover-body {
  display: grid;
  grid-template-columns: 72px 1fr 180px;
  gap: 14px;
  align-items: center;
}

.cmn-cover-avatar {
  width: 62px;
  height: 62px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  font-weight: 600;
}

.cmn-cover-info {
  display: grid;
  gap: 4px;
  font-size: 13px;
}

.cmn-cover-info strong {
  font-size: 16px;
}

.cmn-cover-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(80, 156, 95, 0.25);
  color: #9fe3b8;
  border: 1px solid rgba(80, 156, 95, 0.4);
  margin-left: 6px;
}

.cmn-cover-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cmn-cover-skills span {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--cmn-border);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--cmn-muted);
}

.cmn-cover-meta {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.cmn-cover-rate {
  font-size: 18px;
  font-weight: 600;
}

.cmn-school-calendar {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
}

.cmn-calendar-panel {
  background: var(--cmn-panel-strong);
  border: 1px solid var(--cmn-border);
  border-radius: 12px;
  padding: 16px;
}

.cmn-calendar-detail {
  background: var(--cmn-panel-strong);
  border: 1px solid var(--cmn-border);
  border-radius: 12px;
  padding: 16px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.cmn-school-dashboard-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 16px;
}

.cmn-cover-cta {
  background: linear-gradient(135deg, #8d0f1a, #d22a2a);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  border-radius: 12px;
  padding: 26px;
  display: grid;
  place-items: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  grid-column: span 2;
}

.cmn-partner-programme {
  display: grid;
  gap: 16px;
}

.cmn-partner-grid {
  display: grid;
  gap: 16px;
}

.cmn-partner-grid-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cmn-partner-alert {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 119, 119, 0.4);
  background: rgba(120, 24, 24, 0.4);
  color: #ffd6d6;
  font-size: 13px;
}

.cmn-partner-hero {
  display: grid;
  gap: 16px;
  background: linear-gradient(145deg, rgba(23, 25, 32, 0.95), rgba(15, 17, 22, 0.92));
}

.cmn-partner-hero-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cmn-partner-tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(208, 42, 42, 0.2);
  color: #ffd3d3;
  border: 1px solid rgba(208, 42, 42, 0.5);
}

.cmn-partner-hero-title h3 {
  margin: 0;
  font-size: 20px;
}

.cmn-partner-hero-title p {
  margin: 4px 0 0;
  color: var(--cmn-muted);
  font-size: 13px;
}

.cmn-partner-hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.cmn-partner-hero-metrics div {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.cmn-partner-hero-metrics span {
  font-size: 11px;
  color: var(--cmn-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cmn-partner-hero-metrics strong {
  font-size: 20px;
  color: var(--cmn-text);
}

.cmn-partner-savings h3,
.cmn-partner-progress-card h3,
.cmn-partner-invoices h3 {
  margin: 0 0 12px;
}

.cmn-partner-savings-kpis {
  display: grid;
  gap: 10px;
}

.cmn-partner-kpi-block {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  padding: 12px;
  display: grid;
  gap: 6px;
}

.cmn-partner-kpi-block span {
  color: var(--cmn-muted);
  font-size: 12px;
}

.cmn-partner-kpi-block strong {
  font-size: 26px;
  color: var(--cmn-text);
  line-height: 1.15;
}

.cmn-partner-progress-card {
  display: grid;
  align-content: start;
  gap: 12px;
}

.cmn-partner-progress-top {
  border-radius: 10px;
  border: 1px solid rgba(66, 153, 113, 0.35);
  background: rgba(33, 93, 67, 0.32);
  color: #d1fae5;
  padding: 12px;
  font-weight: 600;
  text-align: center;
}

.cmn-partner-progress-body {
  display: grid;
  gap: 10px;
}

.cmn-partner-progress-body p {
  margin: 0;
}

.cmn-partner-progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.cmn-partner-progress-track span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(208, 42, 42, 0.6), rgba(220, 38, 38, 1));
}

.cmn-partner-invoice-list {
  display: grid;
  gap: 10px;
}

.cmn-partner-invoice-row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none;
  color: var(--cmn-text);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.cmn-partner-invoice-row:hover {
  border-color: rgba(220, 38, 38, 0.45);
  background: rgba(255, 255, 255, 0.04);
}

.cmn-partner-invoice-main {
  display: grid;
  gap: 4px;
}

.cmn-partner-invoice-main strong {
  font-size: 15px;
}

.cmn-partner-invoice-main span {
  font-size: 12px;
  color: var(--cmn-muted);
}

.cmn-partner-invoice-side {
  display: grid;
  gap: 4px;
  justify-items: end;
  text-align: right;
}

.cmn-partner-invoice-side span {
  font-size: 12px;
}

.cmn-partner-savings-page {
  display: grid;
  gap: 16px;
}

.cmn-partner-savings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.cmn-partner-savings-card {
  display: grid;
  gap: 12px;
}

.cmn-partner-savings-card h3 {
  margin: 0;
}

.cmn-partner-savings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cmn-partner-savings-tier-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid rgba(208, 42, 42, 0.45);
  color: #ffd4d4;
  background: rgba(208, 42, 42, 0.16);
}

.cmn-partner-savings-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cmn-partner-savings-metric {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  padding: 10px 12px;
  display: grid;
  gap: 5px;
}

.cmn-partner-savings-metric span {
  color: var(--cmn-muted);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.cmn-partner-savings-metric strong {
  color: var(--cmn-text);
  font-size: 18px;
  line-height: 1.2;
}

.cmn-partner-savings-progress {
  display: grid;
  gap: 8px;
}

.cmn-partner-savings-progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.cmn-partner-savings-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(208, 42, 42, 0.52), rgba(208, 42, 42, 0.9));
}

.cmn-partner-savings-estimate-value {
  margin: 0;
  font-size: 34px;
  line-height: 1;
  color: var(--cmn-text);
  letter-spacing: -0.02em;
}

.cmn-partner-tier-table-wrap {
  overflow-x: auto;
}

.cmn-partner-tier-table tbody tr.is-current {
  background: rgba(208, 42, 42, 0.14);
}

.cmn-partner-tier-table tbody tr.is-current td {
  font-weight: 700;
}

.cmn-partner-savings-notice {
  border: 1px solid rgba(208, 42, 42, 0.45);
  border-left: 3px solid rgba(208, 42, 42, 0.85);
  border-radius: 10px;
  background: rgba(208, 42, 42, 0.1);
  color: #f9d5d5;
  font-size: 13px;
  padding: 11px 12px;
}

.cmn-partner-admin-toolbar {
  gap: 10px;
}

.cmn-partner-tier-chip {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}

.cmn-partner-tier-chip.is-standard {
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.45);
  color: #e2e8f0;
}

.cmn-partner-tier-chip.is-bronze {
  background: rgba(180, 83, 9, 0.2);
  border-color: rgba(180, 83, 9, 0.5);
  color: #fed7aa;
}

.cmn-partner-tier-chip.is-silver {
  background: rgba(148, 163, 184, 0.24);
  border-color: rgba(203, 213, 225, 0.52);
  color: #f1f5f9;
}

.cmn-partner-tier-chip.is-gold {
  background: rgba(202, 138, 4, 0.22);
  border-color: rgba(202, 138, 4, 0.55);
  color: #fde68a;
}

.cmn-partner-tier-chip.is-elite {
  background: rgba(220, 38, 38, 0.24);
  border-color: rgba(220, 38, 38, 0.58);
  color: #fecaca;
}

.cmn-rewards-dashboard {
  display: grid;
  gap: 16px;
}

.cmn-rewards-hero {
  display: grid;
  gap: 14px;
  background: linear-gradient(145deg, rgba(23, 25, 32, 0.95), rgba(15, 17, 22, 0.92));
}

.cmn-rewards-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cmn-rewards-hero-top h3 {
  margin: 4px 0 0;
  font-size: 20px;
}

.cmn-rewards-tier-badge {
  min-width: auto;
}

.cmn-rewards-tier-badge.is-standard {
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.45);
  color: #e2e8f0;
}

.cmn-rewards-tier-badge.is-bronze {
  background: rgba(180, 83, 9, 0.2);
  border-color: rgba(180, 83, 9, 0.5);
  color: #fed7aa;
}

.cmn-rewards-tier-badge.is-silver {
  background: rgba(148, 163, 184, 0.24);
  border-color: rgba(203, 213, 225, 0.52);
  color: #f1f5f9;
}

.cmn-rewards-tier-badge.is-gold {
  background: rgba(202, 138, 4, 0.22);
  border-color: rgba(202, 138, 4, 0.55);
  color: #fde68a;
}

.cmn-rewards-tier-badge.is-elite {
  background: rgba(220, 38, 38, 0.24);
  border-color: rgba(220, 38, 38, 0.58);
  color: #fecaca;
}

.cmn-rewards-hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.cmn-rewards-hero-metrics div {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.cmn-rewards-hero-metrics span {
  font-size: 11px;
  color: var(--cmn-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cmn-rewards-hero-metrics strong {
  font-size: 20px;
  color: var(--cmn-text);
}

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

.cmn-rewards-panel {
  display: grid;
  gap: 10px;
  align-content: start;
}

.cmn-rewards-panel h3 {
  margin: 0;
}

.cmn-rewards-threshold-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  font-size: 11px;
  color: var(--cmn-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cmn-rewards-progress-track {
  margin-top: 2px;
}

.cmn-rewards-next-tier-copy {
  margin: 0;
  font-size: 14px;
}

.cmn-rewards-cycle-number {
  font-size: 48px;
  line-height: 1;
  font-weight: 700;
  color: var(--cmn-text);
}

.cmn-rewards-cycle-target {
  margin: 0;
  font-size: 14px;
  color: var(--cmn-muted);
}

.cmn-rewards-lock-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(248, 113, 113, 0.42);
  background: rgba(127, 29, 29, 0.25);
  color: #fecaca;
  font-size: 13px;
}

.cmn-rewards-probation-block {
  display: grid;
  gap: 8px;
}

.cmn-rewards-probation-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.cmn-rewards-history-list,
.cmn-rewards-event-list {
  display: grid;
  gap: 8px;
}

.cmn-rewards-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  padding: 10px 12px;
}

.cmn-rewards-history-row strong {
  display: block;
  font-size: 15px;
}

.cmn-rewards-history-row span {
  color: var(--cmn-muted);
  font-size: 12px;
}

.cmn-rewards-history-side {
  display: grid;
  gap: 4px;
  justify-items: end;
  text-align: right;
}

.cmn-rewards-event-row {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  padding: 10px 12px;
}

.cmn-rewards-event-row strong {
  font-size: 14px;
}

.cmn-rewards-event-row span {
  font-size: 12px;
  color: var(--cmn-muted);
}

.cmn-rewards-event-row small {
  font-size: 11px;
  color: rgba(229, 231, 235, 0.75);
}

.cmn-candidate-rewards {
  display: grid;
  gap: 16px;
}

.cmn-candidate-rewards-summary {
  display: grid;
  gap: 14px;
  background: linear-gradient(145deg, rgba(23, 25, 32, 0.95), rgba(15, 17, 22, 0.92));
}

.cmn-candidate-rewards-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cmn-candidate-rewards-summary-head h3 {
  margin: 0;
  font-size: 20px;
}

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

.cmn-candidate-rewards-summary-grid > div {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 6px;
}

.cmn-candidate-rewards-summary-grid span {
  font-size: 11px;
  color: var(--cmn-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cmn-candidate-rewards-summary-grid strong {
  margin: 0;
  font-size: 20px;
  color: var(--cmn-text);
}

.cmn-candidate-rewards-summary-grid small {
  color: var(--cmn-muted);
  font-size: 12px;
}

.cmn-candidate-rewards-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.cmn-candidate-rewards-card {
  display: grid;
  gap: 12px;
  align-content: start;
}

.cmn-candidate-rewards-card h3 {
  margin: 0;
}

.cmn-candidate-rewards-metric-line {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  color: var(--cmn-text);
}

.cmn-candidate-rewards-metric-line strong {
  font-size: 18px;
  line-height: 1.2;
}

.cmn-candidate-rewards-metric-line span {
  font-size: 13px;
  color: var(--cmn-muted);
}

.cmn-candidate-rewards-elite-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(239, 68, 68, 0.38);
  background: rgba(127, 29, 29, 0.2);
  color: #fca5a5;
  font-size: 13px;
}

.cmn-candidate-rewards-awards {
  display: grid;
  gap: 8px;
}

.cmn-candidate-rewards-award-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  padding: 10px 12px;
}

.cmn-candidate-rewards-award-row span {
  color: var(--cmn-muted);
  font-size: 12px;
}

.cmn-candidate-rewards-award-row strong {
  justify-self: end;
  font-size: 14px;
}

.cmn-candidate-rewards-award-row small {
  justify-self: end;
  color: var(--cmn-muted);
  font-size: 12px;
}

.cmn-candidate-rewards-code-label {
  display: block;
  color: var(--cmn-muted);
  font-size: 12px;
}

.cmn-candidate-rewards-code-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
}

.cmn-candidate-rewards-code-wrap input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--cmn-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--cmn-text);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cmn-candidate-rewards-policy {
  margin: 0;
  padding-left: 18px;
  color: var(--cmn-muted);
  display: grid;
  gap: 6px;
}

.cmn-candidate-rewards-appeal-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.cmn-candidate-rewards-open-bookings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cmn-candidate-rewards-recent-conduct {
  display: grid;
  gap: 8px;
}

.cmn-candidate-rewards-conduct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  padding: 10px 12px;
}

.cmn-candidate-rewards-conduct-row strong {
  font-size: 14px;
}

.cmn-candidate-rewards-conduct-row span {
  color: var(--cmn-muted);
  font-size: 12px;
}

.cmn-candidate-rewards-support-link {
  justify-self: start;
}

.cmn-rewards-admin-override-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 12px;
}

.cmn-rewards-admin-override-section h4 {
  margin: 0;
}

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

.cmn-rewards-admin-form {
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px;
}

.cmn-rewards-appeal-modal .cmn-modal-content {
  max-width: 620px;
}

@media (max-width: 1200px) {
  .cmn-candidate-rewards-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cmn-candidate-rewards-card-grid {
    grid-template-columns: 1fr;
  }

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

  .cmn-partner-savings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .cmn-candidate-rewards-summary-grid {
    grid-template-columns: 1fr;
  }

  .cmn-candidate-rewards-code-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .cmn-candidate-rewards-conduct-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .cmn-partner-savings-metrics {
    grid-template-columns: 1fr;
  }

  .cmn-partner-savings-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

.cmn-finance-filter-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.cmn-finance-export-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.cmn-finance-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.cmn-finance-metric-card {
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
  padding: 10px;
  background: rgba(15, 23, 42, 0.25);
  display: grid;
  gap: 6px;
}

.cmn-finance-metric-card span {
  font-size: 12px;
  color: var(--cmn-muted);
}

.cmn-finance-metric-card strong {
  font-size: 20px;
  line-height: 1.2;
}

.cmn-finance-tier-list {
  display: grid;
  gap: 8px;
}

.cmn-finance-tier-item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 10px;
}

.cmn-finance-tier-bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
  overflow: hidden;
}

.cmn-finance-tier-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.9), rgba(220, 38, 38, 0.55));
}

@media (max-width: 1024px) {
  .cmn-cover-filters {
    grid-template-columns: 1fr 1fr;
  }

  .cmn-cover-body {
    grid-template-columns: 56px 1fr;
  }

  .cmn-cover-meta {
    justify-items: start;
  }

  .cmn-school-calendar {
    grid-template-columns: 1fr;
  }

  .cmn-partner-grid-cards {
    grid-template-columns: 1fr;
  }

  .cmn-partner-hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cmn-partner-invoice-row {
    grid-template-columns: 1fr;
  }

  .cmn-partner-invoice-side {
    justify-items: start;
    text-align: left;
  }

  .cmn-rewards-hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cmn-rewards-grid {
    grid-template-columns: 1fr;
  }

  .cmn-rewards-threshold-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cmn-rewards-history-row {
    grid-template-columns: 1fr;
  }

  .cmn-rewards-history-side {
    justify-items: start;
    text-align: left;
  }

  .cmn-finance-tier-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (max-width: 900px) {
  .cmn-school-shell {
    grid-template-columns: 1fr;
  }

  .cmn-school-nav {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 16px;
  }

  .cmn-school-nav-title {
    width: 100%;
  }

  .cmn-school-nav-link {
    border-left: none;
    border-bottom: 2px solid transparent;
  }

  .cmn-staff-nav-link--submenu {
    padding-left: 34px;
  }

  .cmn-email-template-layout {
    grid-template-columns: 1fr;
  }

  .cmn-school-nav-link.is-active {
    border-bottom-color: var(--cmn-accent);
  }

  .cmn-school-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* Light portal theme (matches image27 styling) */
.cmn-portal-light {
  background: #eef2f7;
  border-radius: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.cmn-portal-light .cmn-portal-topbar {
  background: #0f172a;
  color: #f8fafc;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  height: 56px;
  flex: 0 0 56px;
}

.cmn-portal-light .cmn-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.cmn-portal-light .cmn-topbar-logout {
  background: #dc2626;
  color: #fff;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
}

.cmn-portal-light .cmn-topbar-livechat {
  border: 1px solid rgba(239, 68, 68, 0.55);
  background: rgba(239, 68, 68, 0.16);
  color: #fff;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}

.cmn-portal-light .cmn-topbar-livechat:hover,
.cmn-portal-light .cmn-topbar-livechat:focus-visible {
  background: rgba(239, 68, 68, 0.26);
  border-color: rgba(239, 68, 68, 0.78);
  outline: none;
}

.cmn-bell {
  position: relative;
}

.cmn-bell-btn {
  position: relative;
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cmn-bell-icon {
  font-size: 14px;
  line-height: 1;
}

.cmn-bell-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  border-radius: 999px;
  padding: 2px 6px;
  line-height: 1;
}

.cmn-bell-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(520px, calc(100vw - 24px));
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #1e293b;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.35);
  z-index: 20;
  padding: 14px;
  max-height: min(74vh, 620px);
  overflow: hidden;
}

body.cmn-portal-page .cmn-portal-topbar,
body.cmn-portal-page .cmn-topbar-right,
body.cmn-portal-page .cmn-bell {
  position: relative;
  overflow: visible;
}

body.cmn-portal-page {
  --cmn-admin-bar-offset: 0px;
  --cmn-bell-panel-top: calc(env(safe-area-inset-top, 0px) + var(--cmn-admin-bar-offset) + 68px);
}

body.cmn-portal-page.admin-bar {
  --cmn-admin-bar-offset: 32px;
}

@media (max-width: 782px) {
  body.cmn-portal-page.admin-bar {
    --cmn-admin-bar-offset: 46px;
  }
}

body.cmn-portal-page .cmn-portal-topbar {
  z-index: 8000;
}

body.cmn-portal-page .cmn-bell {
  z-index: 8100;
}

body.cmn-portal-page .cmn-bell-panel {
  position: fixed;
  top: var(--cmn-bell-panel-top);
  right: max(12px, calc(env(safe-area-inset-right, 0px) + 8px));
  left: auto;
  margin-top: 0;
  z-index: 2147482900;
  background: #0b0c10;
  color: #f8fafc;
  border: 1px solid rgba(208, 42, 42, 0.42);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
  max-height: min(calc(100vh - var(--cmn-bell-panel-top) - 14px), 620px);
}

body.cmn-portal-page .cmn-bell-item {
  background: rgba(8, 10, 14, 0.9);
  border-color: rgba(255, 255, 255, 0.14);
  color: #f8fafc;
}

body.cmn-portal-page .cmn-bell-item:hover,
body.cmn-portal-page .cmn-bell-item:focus-visible {
  background: rgba(208, 42, 42, 0.22);
  border-color: rgba(208, 42, 42, 0.48);
  color: #ffffff;
}

body.cmn-portal-page .cmn-bell-item.is-unread {
  border-color: rgba(208, 42, 42, 0.52);
  background: rgba(208, 42, 42, 0.2);
}

body.cmn-portal-page .cmn-bell-actions .cmn-ghost,
body.cmn-portal-page .cmn-bell-actions .cmn-btn-mini {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(208, 42, 42, 0.38);
}

body.cmn-portal-page .cmn-bell-actions .cmn-ghost:hover,
body.cmn-portal-page .cmn-bell-actions .cmn-btn-mini:hover,
body.cmn-portal-page .cmn-bell-actions .cmn-ghost:focus-visible,
body.cmn-portal-page .cmn-bell-actions .cmn-btn-mini:focus-visible {
  color: #ffffff;
  background: rgba(208, 42, 42, 0.28);
  border-color: rgba(208, 42, 42, 0.6);
}

/* Verification checks:
 * 1) Notification dropdown overlays above portal cards/modals without clipping.
 * 2) Notification panel background remains dark in portal themes (no white panel).
 * 3) Default/hover/active interactions retain black/red readability and contrast.
 */

.cmn-bell-panel.is-open {
  display: block;
}

.cmn-bell-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cmn-bell-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}

.cmn-bell-actions .cmn-ghost,
.cmn-bell-actions .cmn-btn-mini {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(148, 163, 184, 0.16);
  color: #e2e8f0;
}

.cmn-bell-actions .cmn-ghost:hover,
.cmn-bell-actions .cmn-btn-mini:hover,
.cmn-bell-actions .cmn-ghost:focus-visible,
.cmn-bell-actions .cmn-btn-mini:focus-visible {
  background: rgba(148, 163, 184, 0.24);
  border-color: rgba(148, 163, 184, 0.46);
  color: #ffffff;
  outline: none;
}

.cmn-bell-actions .cmn-ghost:disabled,
.cmn-bell-actions .cmn-btn-mini:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cmn-bell-list {
  display: grid;
  gap: 10px;
  max-height: min(62vh, 500px);
  overflow-y: auto;
  padding-right: 2px;
}

.cmn-bell-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: inherit;
  text-decoration: none;
}

.cmn-bell-item.is-unread {
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.15);
}

.cmn-bell-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  cursor: pointer;
}

.cmn-bell-select input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #dc2626;
  cursor: pointer;
}

.cmn-bell-select span {
  display: none;
}

.cmn-bell-item-body {
  min-width: 0;
}

.cmn-bell-link {
  display: grid;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}

.cmn-bell-link strong {
  display: block;
  color: inherit;
  font-size: 13px;
}

.cmn-bell-link span {
  display: block;
  color: rgba(226, 232, 240, 0.9);
  font-size: 12px;
  line-height: 1.45;
}

.cmn-bell-link:hover strong,
.cmn-bell-link:focus-visible strong {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cmn-bell-item-actions {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.cmn-bell-item-actions .cmn-ghost,
.cmn-bell-item-actions .cmn-btn-mini {
  min-height: 26px;
  padding: 0 9px;
  font-size: 11px;
}

.cmn-bell-item-actions .cmn-bell-cta {
  width: 100%;
  justify-content: center;
}

@media (max-width: 767px) {
  .cmn-bell-panel {
    right: -4px;
    width: min(96vw, 420px);
    max-height: min(78vh, 560px);
  }

  body.cmn-portal-page .cmn-bell-panel {
    right: max(8px, calc(env(safe-area-inset-right, 0px) + 6px));
    top: var(--cmn-bell-panel-top);
    width: min(96vw, 420px);
    max-height: min(calc(100vh - var(--cmn-bell-panel-top) - 10px), 560px);
  }

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

  .cmn-bell-actions {
    justify-content: flex-start;
  }

  .cmn-bell-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cmn-bell-item-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-end;
  }
}

.cmn-portal-light .cmn-bell-panel {
  background: #0b0c10;
  color: #f8fafc;
  border-color: rgba(208, 42, 42, 0.42);
}

.cmn-portal-light .cmn-bell-item {
  background: rgba(8, 10, 14, 0.9);
  border-color: rgba(255, 255, 255, 0.14);
  color: #f8fafc;
}

.cmn-portal-light .cmn-bell-actions .cmn-ghost,
.cmn-portal-light .cmn-bell-actions .cmn-btn-mini {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(208, 42, 42, 0.38);
}

.cmn-portal-light .cmn-bell-actions .cmn-ghost:hover,
.cmn-portal-light .cmn-bell-actions .cmn-btn-mini:hover,
.cmn-portal-light .cmn-bell-actions .cmn-ghost:focus-visible,
.cmn-portal-light .cmn-bell-actions .cmn-btn-mini:focus-visible {
  color: #ffffff;
  background: rgba(208, 42, 42, 0.28);
  border-color: rgba(208, 42, 42, 0.6);
}

.cmn-portal-light .cmn-candidate-shell,
.cmn-portal-light .cmn-school-shell {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
  flex: 1 1 auto;
  height: calc(100% - 56px);
  min-height: 0;
  overflow: hidden;
}

.cmn-portal-light .cmn-candidate-nav,
.cmn-portal-light .cmn-school-nav {
  background: #0f172a;
  border-right: 1px solid #1e293b;
  height: 100%;
  overflow-y: auto;
  min-height: 0;
}

.cmn-portal-light .cmn-candidate-nav-title,
.cmn-portal-light .cmn-school-nav-title {
  color: #f8fafc;
}

.cmn-portal-light .cmn-candidate-nav-link,
.cmn-portal-light .cmn-school-nav-link {
  color: #cbd5f5;
}

.cmn-portal-light .cmn-candidate-nav-link.is-active,
.cmn-portal-light .cmn-school-nav-link.is-active {
  color: #fff;
  background: rgba(59, 130, 246, 0.2);
  border-left-color: #3b82f6;
}

.cmn-portal-light .cmn-candidate-main,
.cmn-portal-light .cmn-school-main {
  background: #f1f5f9;
  height: 100%;
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.cmn-portal-light .cmn-dashboard-card,
.cmn-portal-light .cmn-calendar-panel,
.cmn-portal-light .cmn-calendar-detail,
.cmn-portal-light .cmn-cover-card,
.cmn-portal-light .cmn-support-footer {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #0f172a;
}

.cmn-portal-light .cmn-dashboard-card p,
.cmn-portal-light .cmn-dashboard-card span,
.cmn-portal-light .cmn-dashboard-card li {
  color: #475569;
}

.cmn-portal-light .cmn-progress-bar {
  background: #e2e8f0;
}

.cmn-portal-light .cmn-status-chip.is-verified {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.cmn-portal-light .cmn-status-chip.is-pending {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

.cmn-portal-light .cmn-status-chip.is-declined {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.cmn-portal-light .cmn-dashboard-row .cmn-availability-card {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.12), rgba(255, 255, 255, 0.95));
  border: 1px solid rgba(220, 38, 38, 0.25);
}

.cmn-portal-light .cmn-cover-status {
  background: #dcfce7;
  color: #166534;
}

.cmn-portal-light .cmn-cover-skills span {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}

.cmn-portal-light .cmn-booking-table {
  background: #ffffff;
  border-color: #e2e8f0;
}

.cmn-portal-light .cmn-booking-row.header {
  background: #f1f5f9;
  color: #64748b;
}

@media (max-width: 1100px) {
  .cmn-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cmn-dashboard-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .cmn-candidate-shell {
    grid-template-columns: 1fr;
  }

  .cmn-candidate-nav {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 16px;
  }

  .cmn-candidate-nav-title {
    width: 100%;
  }

  .cmn-candidate-nav-link {
    border-left: none;
    border-bottom: 2px solid transparent;
  }

  .cmn-candidate-nav-link.is-active {
    border-bottom-color: var(--cmn-accent);
  }

  .cmn-candidate-main {
    padding: 24px;
  }

  .cmn-profile-grid,
  .cmn-availability-layout {
    grid-template-columns: 1fr;
  }

  .cmn-booking-filters {
    grid-template-columns: 1fr;
  }
}

.cmn-register-shell {
  background: var(--cmn-panel-strong);
  border: 1px solid var(--cmn-border);
  border-radius: 12px;
  padding: 28px;
  display: grid;
  gap: 20px;
}

.cmn-register-shell--thanks {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  min-height: 100vh;
  align-content: center;
}

.cmn-register-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  text-align: left;
}

.cmn-register-brand h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--cmn-text);
}

.cmn-register-brand p {
  margin: 0;
  font-size: 13px;
  color: #ffffff;
  font-weight: 300;
}

.cmn-register-brand .brand-accent {
  color: var(--cmn-accent);
  font-weight: 700;
}

.cmn-register-brand .tag-white {
  color: #ffffff;
}

.cmn-register-benefits {
  display: grid;
  gap: 14px;
}

.cmn-register-benefits h4 {
  margin: 0;
  font-size: 18px;
}

.cmn-register-benefits h4 .brand-accent {
  color: var(--cmn-accent);
}

.cmn-hero-banner {
  width: 100%;
  height: auto;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cmn-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
  display: block;
}

.cmn-hero-banner img {
  width: 100%;
  height: auto;
  background: #0b0c10;
  display: block;
}

.cmn-benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.cmn-benefit-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cmn-border);
  border-radius: 14px;
  padding: 16px;
  display: grid;
  gap: 12px;
  min-height: 260px;
}

.cmn-register-benefits--school .cmn-benefit-card {
  min-height: 320px;
}

.cmn-benefit-card h5 {
  margin: 0;
  font-size: 15px;
  color: var(--cmn-text);
}

.cmn-benefit-line {
  margin: 0;
  font-size: 13px;
  color: var(--cmn-muted);
  display: flex;
  gap: 8px;
  align-items: center;
}

.cmn-benefit-check {
  color: #f3c047;
  font-weight: 700;
}

.cmn-benefit-figure {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cmn-register-benefits--school .cmn-benefit-figure {
  height: 150px;
}

.cmn-register-benefits--school .cmn-benefit-figure img {
  object-fit: contain;
  padding: 10px;
  box-sizing: border-box;
}

.cmn-benefit-figure img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.cmn-benefit-figure img[src*='use1'] {
  object-fit: contain;
  padding: 6px;
}

.cmn-benefit-figure img[src*='use2'] {
  object-fit: contain;
  padding: 14px;
  box-sizing: border-box;
}

.cmn-benefit-figure img[src*='courses'] {
  object-fit: contain;
  padding: 4px;
  box-sizing: border-box;
}

.cmn-benefit-figure svg {
  width: 56px;
  height: 56px;
  stroke: var(--cmn-accent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cmn-benefit-caption {
  color: var(--cmn-muted);
  font-size: 12px;
}

.cmn-register-expectations {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 14px;
  color: var(--cmn-muted);
  font-size: 13px;
}

.cmn-register-expectations strong {
  color: var(--cmn-text);
  font-weight: 600;
}

.cmn-hero-summary p strong {
  color: var(--cmn-text);
}

.cmn-register-form {
  gap: 18px;
}

.cmn-form-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--cmn-border);
  background: rgba(255, 255, 255, 0.03);
  padding: 16px;
  border-radius: 10px;
}

.cmn-form-label {
  font-size: 13px;
  color: var(--cmn-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cmn-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.cmn-check-card {
  font-size: 13px;
  color: var(--cmn-text);
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 12, 16, 0.5);
  padding: 10px 12px;
  border-radius: 8px;
}

.cmn-check-card input[type='checkbox'] {
  margin: 0;
}

.cmn-inline-check {
  font-size: 13px;
  color: var(--cmn-text);
  display: inline-flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}

.cmn-form label.cmn-inline-check {
  display: inline-flex;
  grid-template-columns: none;
  gap: 8px;
  align-items: center;
  color: var(--cmn-text);
}

.cmn-inline-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.cmn-register-form label {
  gap: 6px;
}

/* Registration form readability: brighten labels/helper text/input copy. */
.cmn-register-shell .cmn-form label,
.cmn-register-shell .cmn-form-label,
.cmn-register-shell .cmn-radio-label,
.cmn-register-shell .cmn-required-note,
.cmn-register-shell .cmn-muted-small,
.cmn-register-shell .cmn-register-expectations {
  color: rgba(255, 255, 255, 0.9);
}

.cmn-register-shell .cmn-register-expectations strong {
  color: #ffffff;
}

.cmn-register-shell .cmn-form input,
.cmn-register-shell .cmn-form textarea,
.cmn-register-shell .cmn-form select {
  color: #ffffff;
}

.cmn-register-shell .cmn-form input::placeholder,
.cmn-register-shell .cmn-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.72);
  opacity: 1;
}

.cmn-register-shell .cmn-form select {
  background: rgba(8, 12, 20, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
  color-scheme: dark;
}

.cmn-register-shell .cmn-form select option,
.cmn-register-shell .cmn-form select optgroup {
  background: #0b1220;
  color: #ffffff;
}

.cmn-other-field {
  margin-top: 10px;
}

.cmn-other-field[hidden] {
  display: none;
}

.cmn-radio-grid {
  display: grid;
  gap: 8px;
}

.cmn-radio-label {
  font-size: 13px;
  color: var(--cmn-muted);
}

.cmn-check-card input[type='checkbox'],
.cmn-inline-check input[type='checkbox'],
.cmn-inline-check input[type='radio'] {
  margin: 0;
  transform: translateY(1px);
}

.cmn-car-field[hidden] {
  display: none;
}

.cmn-register-form label input[type='file'] {
  margin-top: 6px;
}

.cmn-register-success {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cmn-border);
  border-radius: 10px;
  padding: 20px;
}

.cmn-register-success h4 {
  margin: 0 0 8px;
  font-size: 20px;
}

.cmn-register-success p {
  margin: 0;
  color: var(--cmn-muted);
}

.cmn-register-thanks {
  width: 100%;
}

.cmn-register-thanks-tile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 22px 28px;
  border-radius: 20px;
  background: rgba(15, 17, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px) saturate(120%);
  aspect-ratio: 18 / 7.5;
  align-items: center;
}

.cmn-register-thanks-col--help {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 28px;
}

.cmn-register-checklist {
  list-style: none;
  margin: 18px 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.cmn-register-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f4f4f6;
}

.cmn-register-checklist li span {
  color: #ff4d4d;
  font-weight: 700;
}

.cmn-register-thanks-help-card {
  background: rgba(12, 14, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.04);
}

.cmn-register-thanks-help-card .cmn-primary {
  margin-top: 12px;
}

@media (max-width: 900px) {
  .cmn-register-thanks-tile {
    grid-template-columns: 1fr;
    gap: 20px;
    aspect-ratio: auto;
  }

  .cmn-register-thanks-col--help {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
  }

}

.cmn-register-form.is-submitting button[type='submit'],
.cmn-register-form.is-submitting input[type='submit'] {
  opacity: 0.75;
  cursor: wait;
}

.cmn-request-received-page .cmn-register-shell:not(.cmn-register-shell--thanks) {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.cmn-request-received-ref {
  color: #fff;
}

.cmn-request-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 6px;
}

.cmn-request-step {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--cmn-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 12px;
}

.cmn-request-step.is-active {
  border-color: rgba(220, 38, 38, 0.55);
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.18) inset;
}

.cmn-request-step-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  flex: 0 0 9px;
}

.cmn-request-step.is-active .cmn-request-step-dot {
  background: #dc2626;
}

.cmn-request-step-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.35;
}

.cmn-request-received-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 780px) {
  .cmn-request-stepper {
    grid-template-columns: 1fr;
  }
}

.cmn-register-warning {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  color: #92400e;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0 0;
}

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

.cmn-portal-header {
  margin-bottom: 20px;
  text-align: center;
}

.cmn-portal-header h2 {
  margin: 0 0 6px;
  font-size: 30px;
  display: inline-block;
  border-bottom: 2px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 6px;
}

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

.cmn-form {
  background: var(--cmn-panel-strong);
  border: 1px solid var(--cmn-border);
  border-radius: 12px;
  padding: 24px;
  display: grid;
  gap: 14px;
}

.cmn-form button {
  justify-self: start;
}

.cmn-toggle-form {
  background: transparent;
  border: none;
  padding: 0;
}

.cmn-form-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.cmn-form label {
  display: grid;
  gap: 8px;
  font-size: 13px;
  color: var(--cmn-muted);
}

.cmn-muted-small {
  font-size: 11px;
  line-height: 1.4;
}

.cmn-form input,
.cmn-form textarea,
.cmn-form select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--cmn-border);
  color: var(--cmn-text);
  padding: 10px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
}

/* Force readable native dropdown menus across browser/OS themes. */
.cmn-form select,
.cmn-status-form select,
.cmn-request-panel select,
.cmn-school-request-form select,
.cmn-filter select,
.cmn-inline-ready-response select,
.cmn-marketing-tag-picker select,
.cmn-marketing-preview-pick select,
.cmn-system-health-filters select {
  background: #f8fafc;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.25);
  color-scheme: light;
}

.cmn-form select option,
.cmn-status-form select option,
.cmn-request-panel select option,
.cmn-school-request-form select option,
.cmn-filter select option,
.cmn-inline-ready-response select option,
.cmn-marketing-tag-picker select option,
.cmn-marketing-preview-pick select option,
.cmn-system-health-filters select option,
.cmn-form select optgroup,
.cmn-status-form select optgroup,
.cmn-request-panel select optgroup,
.cmn-school-request-form select optgroup,
.cmn-filter select optgroup,
.cmn-inline-ready-response select optgroup,
.cmn-marketing-tag-picker select optgroup,
.cmn-marketing-preview-pick select optgroup,
.cmn-system-health-filters select optgroup {
  background: #ffffff;
  color: #0f172a;
}

.cmn-form select option[disabled] {
  color: #64748b;
}
.cmn-status-form select option[disabled],
.cmn-request-panel select option[disabled],
.cmn-school-request-form select option[disabled] {
  color: #64748b;
}

.cmn-required-note {
  font-size: 12px;
  color: var(--cmn-muted);
  text-align: left;
  margin-bottom: 8px;
}

.cmn-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 18px 0 24px;
}

.cmn-kpi-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 12px;
}

.cmn-kpi-panel {
  margin: 16px 0 22px;
}

.cmn-kpi-toggle {
  display: inline-flex;
  gap: 6px;
}

.cmn-kpi-toggle .cmn-ghost {
  text-decoration: none;
}

.cmn-kpi-toggle .cmn-ghost.is-active {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.45);
  color: #dbeafe;
}

.cmn-kpi {
  background: #121319;
  border: 1px solid var(--cmn-border);
  border-radius: 10px;
  padding: 16px;
  display: grid;
  gap: 6px;
}

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

.cmn-kpi strong {
  font-size: 22px;
  color: var(--cmn-accent);
}

.cmn-portal-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.cmn-candidate-grid .cmn-availability-card {
  grid-column: span 2;
  text-align: center;
  background: linear-gradient(180deg, rgba(208, 42, 42, 0.12), rgba(18, 20, 26, 0.9));
  border: 1px solid rgba(208, 42, 42, 0.35);
  padding: 26px;
}

.cmn-candidate-grid .cmn-availability-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  letter-spacing: 0.4px;
}

.cmn-candidate-grid .cmn-availability-card.is-locked {
  opacity: 0.7;
}

.cmn-availability-form {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.cmn-availability-lock {
  margin-top: 8px;
}

@media (max-width: 960px) {
  .cmn-candidate-grid .cmn-availability-card {
    grid-column: span 1;
  }

  .cmn-panel-card-wide {
    grid-column: span 1;
  }
}

.cmn-panel-card {
  background: var(--cmn-panel-strong);
  border: 1px solid var(--cmn-border);
  border-radius: 12px;
  padding: 20px;
  display: grid;
  gap: 12px;
}

.cmn-panel-card-wide {
  grid-column: span 2;
}

.cmn-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  font-size: 13px;
  color: var(--cmn-text);
}

.cmn-meta-grid strong {
  color: var(--cmn-text);
}

.cmn-status-form {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.cmn-status-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--cmn-muted);
}

.cmn-status-form select {
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.25);
  color: #0f172a;
  padding: 8px 10px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  color-scheme: light;
}

.cmn-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 13px;
}

.cmn-activity-list li {
  padding: 10px 12px;
  border: 1px solid var(--cmn-border);
  border-radius: 10px;
  background: rgba(10, 12, 16, 0.6);
}

.cmn-activity-content {
  margin-top: 6px;
  color: var(--cmn-muted);
}

.cmn-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(208, 42, 42, 0.2);
  color: #f5b7b7;
  border: 1px solid rgba(208, 42, 42, 0.4);
}

.cmn-actions-grid {
  display: grid;
  gap: 10px;
}

.cmn-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.cmn-dashboard-header .cmn-header-row {
  align-items: center;
}

.cmn-notification-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--cmn-panel-strong);
  border: 1px solid var(--cmn-border);
  font-size: 12px;
  color: var(--cmn-text);
  box-shadow: var(--cmn-shadow);
}

.cmn-portal-light .cmn-notification-card {
  background: var(--cmn-admin-card-bg);
  border: 1px solid var(--cmn-admin-card-border);
  color: var(--cmn-admin-text);
}

.cmn-notification-card strong {
  display: block;
  font-size: 12px;
}

.cmn-notification-card span {
  display: block;
  color: var(--cmn-muted);
  font-size: 11px;
}

.cmn-portal-light .cmn-notification-card span {
  color: var(--cmn-text-secondary);
}

.cmn-notification-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  position: relative;
  color: var(--cmn-accent);
  background: rgba(208, 42, 42, 0.15);
  border: 1px solid rgba(208, 42, 42, 0.35);
}

.cmn-notification-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(1px);
}

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

.cmn-segmented {
  display: inline-flex;
  gap: 6px;
  margin-top: 10px;
  background: rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.3);
  padding: 4px;
  border-radius: 999px;
}

.cmn-segment {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--cmn-muted);
  transition: background 0.2s ease, color 0.2s ease;
}

.cmn-segment.is-active {
  background: rgba(59, 130, 246, 0.22);
  color: #e2e8f0;
  border: 1px solid rgba(59, 130, 246, 0.5);
}

.cmn-portal-light .cmn-segmented {
  background: #eef2f7;
  border-color: #cbd5f5;
}

.cmn-portal-light .cmn-segment {
  color: #64748b;
}

.cmn-portal-light .cmn-segment.is-active {
  color: #1e293b;
  background: rgba(37, 99, 235, 0.15);
  border-color: rgba(37, 99, 235, 0.4);
}

.cmn-school-toolbar {
  margin: 14px 0 16px;
  display: grid;
  gap: 10px;
}

.cmn-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cmn-toolbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 260px;
}

.cmn-toolbar-search input[type="search"] {
  flex: 1;
  min-width: 220px;
}

.cmn-toolbar-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cmn-filter-panel {
  display: none;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--cmn-border);
  background: var(--cmn-panel-strong);
  box-shadow: var(--cmn-shadow);
}

.cmn-filter-panel.is-open {
  display: block;
}

.cmn-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.cmn-filter-panel label {
  font-size: 12px;
  color: var(--cmn-muted);
  display: grid;
  gap: 6px;
}

.cmn-filter-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.cmn-bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.cmn-schools-table .cmn-table-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--cmn-muted);
}

.cmn-schools-table th,
.cmn-schools-table td {
  padding: 6px 6px;
  vertical-align: top;
}

.cmn-pill.cmn-pill--status {
  text-transform: capitalize;
}

.cmn-pill.cmn-pill--pipeline {
  background: rgba(72, 90, 130, 0.2);
  color: #c9d4f5;
  border: 1px solid rgba(72, 90, 130, 0.45);
}

.cmn-pill.cmn-pill--available {
  background: rgba(66, 160, 90, 0.2);
  color: #bfe9c8;
  border: 1px solid rgba(66, 160, 90, 0.5);
  margin-left: 0;
}

.cmn-pill.cmn-pill--pending {
  background: rgba(208, 142, 42, 0.2);
  color: #f5d2a6;
  border: 1px solid rgba(208, 142, 42, 0.5);
}

.cmn-pill.cmn-pill--confirmed {
  background: rgba(66, 160, 90, 0.2);
  color: #bfe9c8;
  border: 1px solid rgba(66, 160, 90, 0.5);
}

.cmn-pill.cmn-pill--declined {
  background: rgba(208, 42, 42, 0.2);
  color: #f5b7b7;
  border: 1px solid rgba(208, 42, 42, 0.45);
}

.cmn-request-table td {
  vertical-align: top;
}

.cmn-request-panel-row {
  display: none;
}

.cmn-request-panel-row.is-open {
  display: table-row;
}

.cmn-request-panel {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: end;
}

.cmn-request-panel label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--cmn-muted);
}

.cmn-school-request-form {
  margin-top: 10px;
}

.cmn-school-request-form .cmn-school-request-note {
  grid-column: 1 / -1;
}

.cmn-school-request-form .cmn-school-request-convert {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid rgba(22, 163, 74, 0.45);
  border-left: 4px solid #16a34a;
  border-radius: 10px;
  background: rgba(22, 163, 74, 0.12);
  color: #d1fae5;
}

.cmn-school-request-form .cmn-school-request-convert input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
}

.cmn-school-request-convert-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #ecfdf5;
}

.cmn-school-request-form .cmn-school-request-convert small {
  grid-column: 2;
  font-size: 11px;
  color: #a7f3d0;
}
.cmn-school-request-form .cmn-school-request-note textarea {
  min-height: 78px;
}

.cmn-school-request-form button {
  justify-self: start;
}

.cmn-school-request-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(340px, 0.9fr);
  gap: 14px;
  align-items: start;
}

.cmn-school-request-detail-main,
.cmn-school-request-detail-chat {
  display: grid;
  gap: 12px;
}

.cmn-school-request-detail-chat {
  position: sticky;
  top: 88px;
}

.cmn-school-request-timeline-list {
  display: grid;
  gap: 10px;
  max-height: 440px;
  overflow-y: auto;
  padding-right: 4px;
}

.cmn-school-request-timeline-item {
  border: 1px solid var(--cmn-border);
  border-left: 3px solid rgba(220, 38, 38, 0.55);
  background: var(--cmn-panel-strong);
  border-radius: 10px;
  padding: 10px;
}

.cmn-school-request-chat {
  min-height: 560px;
  display: grid;
  grid-template-rows: auto auto minmax(220px, 1fr) auto auto;
  gap: 10px;
}

.cmn-school-thread-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.cmn-school-thread-status-actions {
  display: flex;
  gap: 8px;
}

.cmn-school-request-chat .cmn-support-messages {
  min-height: 240px;
  max-height: 56vh;
  border: 1px solid var(--cmn-border);
  border-radius: 12px;
  padding: 10px;
  background: rgba(9, 13, 19, 0.55);
}

.cmn-request-chat-form {
  display: grid;
  gap: 8px;
}

.cmn-request-chat-form label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--cmn-muted);
}

.cmn-request-chat-form textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  background: #0f1520;
  border: 1px solid var(--cmn-border);
  border-radius: 10px;
  color: var(--cmn-text);
  padding: 10px;
}

.cmn-request-chat-form textarea:focus {
  outline: none;
  border-color: rgba(239, 68, 68, 0.65);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16);
}

.cmn-school-request-chat [data-thread-feedback] {
  min-height: 18px;
  font-size: 12px;
  color: var(--cmn-muted);
}

.cmn-school-request-chat [data-thread-feedback].is-error {
  color: #ff9aa6;
}

@media (max-width: 1120px) {
  .cmn-school-request-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmn-school-request-detail-chat {
    position: static;
  }

  .cmn-school-request-chat {
    min-height: 420px;
  }
}

.cmn-war-room {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 12px;
}

.cmn-war-room-column {
  border: 1px solid var(--cmn-border);
  border-radius: 14px;
  background: var(--cmn-panel);
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.cmn-war-room-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--cmn-border);
}

.cmn-war-room-column-head h3 {
  margin: 0;
  font-size: 15px;
}

.cmn-war-room-cards {
  padding: 10px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.cmn-war-room-card {
  border: 1px solid var(--cmn-border);
  border-radius: 10px;
  background: var(--cmn-panel-strong);
  padding: 10px;
  display: grid;
  gap: 6px;
}

.cmn-war-room-line {
  font-size: 12px;
  color: var(--cmn-text);
}

.cmn-war-room-countdown {
  color: #f3be8b;
}

.cmn-war-room-countdown.is-expired {
  color: #f19b9b;
}

.cmn-war-room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

@media (max-width: 1400px) {
  .cmn-war-room {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }
}

@media (max-width: 980px) {
  .cmn-war-room {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 680px) {
  .cmn-war-room {
    grid-template-columns: 1fr;
  }
}

.cmn-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cmn-available-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.cmn-available-card {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--cmn-border);
  background: var(--cmn-panel-strong);
  display: grid;
  gap: 8px;
}

.cmn-strength-score {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.58);
  border-radius: 10px;
}

.cmn-strength-score strong {
  font-size: 12px;
  color: #f8fafc;
  line-height: 1.3;
}

.cmn-strength-score span {
  font-size: 11px;
  color: var(--cmn-muted);
  line-height: 1.25;
}

.cmn-available-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.cmn-request-message {
  font-size: 12px;
  color: var(--cmn-muted);
}

.cmn-action-menu {
  position: relative;
  display: inline-flex;
}

.cmn-action-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  background: var(--cmn-panel-strong);
  border: 1px solid var(--cmn-border);
  border-radius: 10px;
  padding: 6px;
  display: none;
  z-index: 10;
  box-shadow: var(--cmn-shadow);
}

.cmn-action-menu.is-open .cmn-action-dropdown {
  display: grid;
  gap: 6px;
}

.cmn-action-dropdown .cmn-btn-ghost {
  width: 100%;
  justify-content: flex-start;
}

.cmn-action-panels {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.cmn-action-panel {
  display: none;
}

.cmn-action-panel.is-active {
  display: grid;
}

.cmn-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.cmn-tabs {
  display: flex;
  gap: 10px;
  margin: 6px 0 16px;
  flex-wrap: wrap;
}

.cmn-tab {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--cmn-border);
  color: var(--cmn-text);
  text-decoration: none;
  font-size: 13px;
}

.cmn-tab.is-active {
  background: rgba(208, 42, 42, 0.2);
  border-color: rgba(208, 42, 42, 0.45);
  color: #fff;
}

.cmn-approval-block h4 {
  margin: 12px 0 8px;
  font-size: 14px;
  color: var(--cmn-muted);
}

.cmn-approval-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}

.cmn-approval-table th,
.cmn-approval-table td {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid var(--cmn-border);
  font-size: 13px;
}

.cmn-approval-table th {
  color: var(--cmn-muted);
  font-weight: 500;
}

.cmn-cv-converter-table .cmn-table-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--cmn-muted);
}

.cmn-cv-converter-table [data-cv-row-message] {
  margin-top: 6px;
  min-height: 16px;
  font-size: 12px;
}

.cmn-converter-embed-card {
  margin-bottom: 14px;
}

.cmn-converter-embed-wrap {
  display: grid;
  gap: 10px;
  overflow: visible;
}

.cmn-converter-embed-frame {
  display: block;
  width: 100%;
  height: clamp(760px, calc(100vh - 150px), 1400px);
  min-height: 720px;
  border: 1px solid var(--cmn-border);
  border-radius: 12px;
  background: #0b0f14;
}

@media (max-width: 1100px) {
  .cmn-converter-embed-frame {
    height: calc(100vh - 132px);
    min-height: 560px;
  }
}

.cmn-empty {
  color: var(--cmn-muted);
  font-size: 13px;
  padding: 6px 0;
}

.cmn-empty-explain {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.cmn-panel-card h3 {
  margin: 0;
}

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

.cmn-list-item {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--cmn-border);
  background: rgba(10, 12, 16, 0.6);
}

/* Candidate Profile polish: compact compliance + clean document tile actions */
.cmn-candidate-main .cmn-profile-grid {
  align-items: start;
}

.cmn-candidate-main .cmn-compliance-status {
  padding: 12px;
  gap: 8px;
  min-height: 0;
  align-self: start;
}

.cmn-candidate-main .cmn-compliance-status .cmn-card-header h3 {
  margin: 0;
  font-size: 17px;
}

.cmn-candidate-main .cmn-compliance-status .cmn-status-list {
  gap: 6px;
  font-size: 12px;
}

.cmn-candidate-main .cmn-compliance-status .cmn-status-list li {
  min-height: 20px;
  line-height: 1.25;
  padding-left: 16px;
}

.cmn-candidate-main .cmn-doc-upload-card {
  grid-column: 1 / -1;
  padding: 12px;
  gap: 10px;
  width: 100%;
}

.cmn-candidate-main .cmn-doc-upload-card .cmn-doc-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cmn-candidate-main .cmn-doc-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 11px;
  border-radius: 12px;
}

.cmn-candidate-main .cmn-doc-tile .cmn-doc-card-head {
  align-items: flex-start;
}

.cmn-candidate-main .cmn-doc-tile .cmn-doc-card-head strong {
  font-size: 14px;
  line-height: 1.2;
}

.cmn-candidate-main .cmn-doc-tile .cmn-doc-card-meta {
  flex: 1 1 auto;
  min-height: 0;
  gap: 5px;
}

.cmn-candidate-main .cmn-doc-tile .cmn-doc-line {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.cmn-candidate-main .cmn-doc-tile .cmn-doc-subline {
  font-size: 11px;
  line-height: 1.2;
}

.cmn-candidate-main .cmn-doc-tile .cmn-doc-reason-row {
  display: block;
  min-height: 16px;
}

.cmn-candidate-main .cmn-doc-tile [data-doc-reason] {
  display: block;
  width: 100%;
  color: #fca5a5;
  white-space: normal;
  word-break: break-word;
}

.cmn-candidate-main .cmn-doc-tile .cmn-doc-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: auto;
  padding-top: 2px;
}

.cmn-candidate-main .cmn-doc-tile .cmn-doc-buttons button,
.cmn-candidate-main .cmn-doc-tile .cmn-doc-buttons .cmn-btn {
  height: 36px;
  min-width: 114px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 1;
  border-radius: 10px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.cmn-candidate-main .cmn-doc-tile .cmn-doc-buttons button[disabled] {
  opacity: 0.45;
}

.cmn-staff-candidate-profile {
  align-items: stretch;
}

.cmn-staff-candidate-progress {
  margin-bottom: 14px;
}

.cmn-staff-candidate-profile .cmn-dashboard-card p {
  margin: 0 0 8px;
}

.cmn-staff-candidate-profile .cmn-dashboard-card p:last-child {
  margin-bottom: 0;
}

.cmn-staff-candidate-profile .cmn-doc-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cmn-staff-candidate-profile .cmn-doc-review-form {
  width: 100%;
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.cmn-staff-candidate-profile .cmn-doc-review-form textarea {
  width: 100%;
  min-height: 58px;
  border-radius: 10px;
  border: 1px solid var(--cmn-border);
  background: rgba(15, 23, 42, 0.75);
  color: var(--cmn-text);
  padding: 8px 10px;
  resize: vertical;
}

.cmn-staff-candidate-profile .cmn-doc-review-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cmn-staff-candidate-profile .cmn-doc-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  min-width: 140px;
  padding: 0 12px;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .cmn-candidate-main .cmn-doc-upload-card .cmn-doc-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .cmn-candidate-main .cmn-doc-upload-card .cmn-doc-actions {
    grid-template-columns: 1fr;
  }

  .cmn-candidate-main .cmn-doc-tile .cmn-doc-buttons {
    gap: 6px;
  }
}

.cmn-list-item strong {
  font-size: 14px;
}

.cmn-list-item span {
  color: var(--cmn-muted);
  font-size: 12px;
}

.cmn-request-school {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cmn-text) !important;
  font-size: 12px;
  font-weight: 600;
}

.cmn-spp-routing-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(20, 24, 31, 0.9);
  color: #fecaca;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.cmn-spp-routing-badge.is-standard {
  border-color: rgba(156, 163, 175, 0.45);
  color: #cbd5e1;
}

.cmn-spp-routing-badge.is-bronze {
  border-color: rgba(251, 146, 60, 0.55);
  color: #fdba74;
}

.cmn-spp-routing-badge.is-silver {
  border-color: rgba(226, 232, 240, 0.6);
  color: #e2e8f0;
}

.cmn-spp-routing-badge.is-gold {
  border-color: rgba(253, 224, 71, 0.62);
  color: #fde68a;
}

.cmn-spp-routing-badge.is-elite {
  border-color: rgba(248, 113, 113, 0.75);
  color: #fca5a5;
}

.cmn-partner-routing-card p {
  margin: 0;
}

.cmn-list-item button {
  justify-self: start;
}

.cmn-checkbox-grid {
  display: grid;
  gap: 6px;
  max-height: 160px;
  overflow: auto;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--cmn-border);
  background: rgba(12, 14, 18, 0.6);
}

.cmn-checkbox-row {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--cmn-text);
}

.cmn-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.cmn-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.cmn-wall-card {
  background: var(--cmn-panel-strong);
  border: 1px solid var(--cmn-border);
  border-radius: 12px;
  padding: 16px;
  display: grid;
  gap: 8px;
}

.cmn-wall-card h4 {
  margin: 0;
  font-size: 18px;
}

.cmn-wall-card p {
  margin: 0;
  color: var(--cmn-muted);
}

.cmn-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.cmn-calendar-day {
  text-align: center;
  font-size: 12px;
  color: var(--cmn-muted);
}

.cmn-calendar-cell {
  background: rgba(10, 12, 16, 0.6);
  border: 1px solid var(--cmn-border);
  color: var(--cmn-text);
  border-radius: 8px;
  padding: 8px 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.cmn-calendar-cell input {
  display: none;
}

.cmn-calendar-cell span {
  display: inline-block;
  padding: 6px 0;
  width: 100%;
  text-align: center;
}

.cmn-calendar-cell input:checked + span {
  background: rgba(208, 42, 42, 0.2);
  border-radius: 6px;
  color: #fff;
}

.cmn-calendar-form {
  display: grid;
  gap: 10px;
}

.cmn-calendar-cell span {
  pointer-events: none;
}
.cmn-screen {
  width: min(1200px, 100%);
  min-height: 640px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cmn-panel);
  border: 1px solid var(--cmn-border);
  box-shadow: var(--cmn-shadow);
  position: relative;
  margin: 40px auto;
  font-family: 'Outfit', sans-serif;
  color: var(--cmn-text);
}

.cmn-login-page {
  min-height: 100vh;
  margin: 0 auto;
}

.cmn-back-link {
  position: fixed;
  top: 24px;
  left: 24px;
  color: var(--cmn-text);
  text-decoration: none;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--cmn-border);
  padding: 8px 12px;
  border-radius: 999px;
  z-index: 999;
}

.cmn-left-intro p {
  margin: 0;
  color: var(--cmn-muted);
  font-size: 14px;
}

.cmn-logo {
  width: 64px;
  height: auto;
  display: block;
  margin-bottom: 14px;
}

.cmn-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 35%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 45%);
  pointer-events: none;
}

.cmn-panel {
  padding: 48px 56px;
  position: relative;
  z-index: 1;
}

.cmn-panel-left {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.cmn-panel-right {
  background: rgba(18, 20, 26, 0.85);
  border-left: 1px solid var(--cmn-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cmn-brand h1 {
  font-size: 34px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.4px;
}

.cmn-brand-main {
  color: var(--cmn-text);
}

.cmn-brand-accent {
  color: var(--cmn-accent);
  margin-left: 6px;
  font-weight: 700;
}

.cmn-brand p {
  margin: 8px 0 0;
  color: var(--cmn-muted);
  font-weight: 300;
}

.cmn-cards {
  display: grid;
  gap: 18px;
}

.cmn-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 20px 22px;
  background: var(--cmn-panel-strong);
  border: 1px solid var(--cmn-border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.cmn-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(208, 42, 42, 0.12);
  border: 1px solid rgba(208, 42, 42, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cmn-card-icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--cmn-accent);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cmn-card-content h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 500;
}

.cmn-card-content p {
  margin: 0 0 16px;
  color: var(--cmn-muted);
  font-size: 14px;
}

.cmn-ghost {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--cmn-border);
  color: var(--cmn-text);
  padding: 8px 18px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cmn-footnote {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cmn-muted);
  font-size: 13px;
}

.cmn-shield {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(208, 42, 42, 0.1);
  border: 1px solid rgba(208, 42, 42, 0.3);
}

.cmn-shield svg {
  width: 18px;
  height: 18px;
  stroke: var(--cmn-accent);
  fill: none;
  stroke-width: 1.4;
}

.cmn-login {
  width: min(320px, 100%);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cmn-login h2 {
  margin: 0 0 8px;
  font-weight: 500;
}

.cmn-right-brand {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.cmn-right-brand .cmn-logo {
  width: 48px;
  margin-bottom: 0;
}

.cmn-login form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cmn-login label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--cmn-muted);
}

.cmn-login input[type='email'],
.cmn-login input[type='password'] {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--cmn-border);
  color: var(--cmn-text);
  padding: 10px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
}

.cmn-password-field {
  position: relative;
}

.cmn-password-field input {
  width: 100%;
  padding-right: 36px;
}

.cmn-eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
  background: transparent;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cmn-eye svg {
  width: 18px;
  height: 18px;
  stroke: var(--cmn-muted);
  fill: none;
  stroke-width: 1.5;
}

.cmn-eye:focus-visible {
  outline: 2px solid rgba(220, 38, 38, 0.6);
  outline-offset: 2px;
}

.cmn-link {
  color: var(--cmn-accent);
  font-size: 13px;
  text-decoration: none;
  margin-top: -6px;
}

.cmn-portal-page header,
.cmn-portal-page footer,
.cmn-portal-page .site-header,
.cmn-portal-page .site-footer,
.cmn-portal-page #site-header,
.cmn-portal-page #site-footer {
  display: none !important;
}

/* Re-show portal headers inside the app */
.cmn-portal-page .cmn-school-header,
.cmn-portal-page .cmn-candidate-header,
.cmn-portal-page .cmn-portal-header {
  display: block !important;
}

.cmn-primary {
  background: linear-gradient(180deg, var(--cmn-accent) 0%, var(--cmn-accent-dark) 100%);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #fff;
  padding: 10px 0;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(208, 42, 42, 0.35);
}

.cmn-danger {
  background: rgba(220, 38, 38, 0.14);
  border: 1px solid rgba(220, 38, 38, 0.6);
  color: #fecaca;
  padding: 10px 14px;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

.cmn-danger:hover {
  background: rgba(220, 38, 38, 0.2);
}

.cmn-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.cmn-button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  text-decoration: none;
}

.cmn-remember {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--cmn-muted);
}

.cmn-remember input {
  accent-color: var(--cmn-accent);
}

.cmn-policy {
  margin: 0;
  font-size: 12px;
  color: var(--cmn-muted);
}

@media (max-width: 960px) {
  .cmn-screen {
    grid-template-columns: 1fr;
  }

  .cmn-panel-right {
    border-left: none;
    border-top: 1px solid var(--cmn-border);
  }
}

@media (max-width: 640px) {
  .cmn-panel {
    padding: 32px 28px;
  }

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

  .cmn-card-icon {
    width: 40px;
    height: 40px;
  }
}

/* Admin portal styling overrides (matches portal renders) */
.cmn-portal-light {
  background: #0f1115;
  border-radius: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  --cmn-bg-main: #0f1115;
  --cmn-card: #1a1f27;
  --cmn-card-elev: #212733;
  --cmn-divider: #2b3240;
  --cmn-admin-card-bg: var(--cmn-card);
  --cmn-admin-card-border: var(--cmn-divider);
  --cmn-admin-card-shadow: 0 18px 36px rgba(0, 0, 0, 0.4);
  --cmn-admin-list-bg: var(--cmn-card);
  --cmn-admin-stat-bg: var(--cmn-card-elev);
  --cmn-admin-table-bg: var(--cmn-card);
  --cmn-admin-text: #ffffff;
  --cmn-admin-muted: #b6bcc8;
  --cmn-text-primary: #ffffff;
  --cmn-text-secondary: #b6bcc8;
  --cmn-text-muted: #8b92a3;
  --cmn-brand-red: #c62828;
  --cmn-brand-red-dark: #b71c1c;
  --cmn-brand-red-soft: rgba(198, 40, 40, 0.15);
}

.cmn-card-tone-1 { background: var(--cmn-card) !important; }
.cmn-card-tone-2 { background: var(--cmn-card) !important; }
.cmn-card-tone-3 { background: var(--cmn-card) !important; }
.cmn-card-tone-4 { background: var(--cmn-card) !important; }
.cmn-card-tone-5 { background: var(--cmn-card) !important; }

.cmn-portal-light[data-theme='urgent'] {
  --cmn-brand-red: #c62828;
  --cmn-brand-red-dark: #b71c1c;
  --cmn-brand-red-soft: rgba(198, 40, 40, 0.15);
  --cmn-card: #1a1f27;
  --cmn-card-elev: #212733;
}

.cmn-portal-light[data-theme='alert'] {
  --cmn-brand-red: #e44545;
  --cmn-brand-red-dark: #c12a2a;
  --cmn-brand-red-soft: rgba(228, 69, 69, 0.18);
  --cmn-card: #1b2029;
  --cmn-card-elev: #232a37;
}

.cmn-portal-light[data-theme='soft'] {
  --cmn-brand-red: #d25252;
  --cmn-brand-red-dark: #ae3131;
  --cmn-brand-red-soft: rgba(210, 82, 82, 0.18);
  --cmn-card: #1c212b;
  --cmn-card-elev: #242c3a;
}

.cmn-portal-light[data-theme='deep'] {
  --cmn-brand-red: #b02020;
  --cmn-brand-red-dark: #8a1818;
  --cmn-brand-red-soft: rgba(176, 32, 32, 0.18);
  --cmn-card: #171b23;
  --cmn-card-elev: #1f2632;
}

.cmn-portal-light .cmn-portal-topbar {
  background: #0b0c10;
  color: #ffffff;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  height: 56px;
  flex: 0 0 56px;
}

.cmn-portal-light .cmn-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.cmn-portal-light .cmn-topbar-logout {
  background: #d02a2a;
  color: #fff;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
}

.cmn-portal-light .cmn-topbar-livechat {
  border: 1px solid rgba(208, 42, 42, 0.58);
  background: rgba(208, 42, 42, 0.18);
  color: #fff;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}

.cmn-portal-light .cmn-topbar-livechat:hover,
.cmn-portal-light .cmn-topbar-livechat:focus-visible {
  background: rgba(208, 42, 42, 0.28);
  border-color: rgba(208, 42, 42, 0.82);
  outline: none;
}

.cmn-topbar-accent {
  color: var(--cmn-accent);
  font-weight: 700;
}

.cmn-portal-light .cmn-topbar-accent {
  color: var(--cmn-brand-red);
}

.cmn-portal-light .cmn-topbar-left {
  display: flex;
  align-items: center;
  min-width: 0;
}

.cmn-topbar-brand-link {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.cmn-topbar-brand-link:focus-visible {
  outline: 2px solid rgba(208, 42, 42, 0.55);
  outline-offset: 3px;
  border-radius: 6px;
}

.cmn-brand-block {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.cmn-brand-title {
  font-size: 31px;
  font-family: "League Spartan", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--cmn-text-primary);
}

.cmn-brand-version {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cmn-text-muted);
}

.cmn-portal-light .cmn-candidate-shell,
.cmn-portal-light .cmn-school-shell {
  background: rgba(21, 23, 29, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  flex: 1 1 auto;
  grid-template-rows: 1fr;
  min-height: 0;
  overflow: hidden;
}

.cmn-portal-light .cmn-candidate-nav,
.cmn-portal-light .cmn-school-nav {
  background: #0b0c10;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  height: 100%;
  overflow-y: auto;
  min-height: 0;
}

.cmn-portal-light .cmn-candidate-nav-title,
.cmn-portal-light .cmn-school-nav-title {
  color: #ffffff;
}

.cmn-portal-light .cmn-candidate-nav-link,
.cmn-portal-light .cmn-school-nav-link {
  color: #c9cdd6;
}

.cmn-portal-light .cmn-candidate-nav-link.is-active,
.cmn-portal-light .cmn-school-nav-link.is-active {
  color: #fff;
  background: rgba(208, 42, 42, 0.15);
  border-left-color: #d02a2a;
}

.cmn-portal-light .cmn-candidate-main,
.cmn-portal-light .cmn-school-main {
  background: var(--cmn-bg-main);
  height: 100%;
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 140px;
}

.cmn-portal-light .cmn-dashboard-card,
.cmn-portal-light .cmn-calendar-panel,
.cmn-portal-light .cmn-calendar-detail,
.cmn-portal-light .cmn-cover-card,
.cmn-portal-light .cmn-support-footer {
  background: var(--cmn-admin-card-bg);
  border: 1px solid var(--cmn-admin-card-border);
  color: var(--cmn-admin-text);
  box-shadow: var(--cmn-admin-card-shadow);
}

.cmn-portal-light .cmn-kpi {
  background: var(--cmn-card);
  border: 1px solid var(--cmn-divider);
}

.cmn-portal-light .cmn-kpi span {
  color: var(--cmn-text-muted);
}

.cmn-portal-light .cmn-kpi strong {
  color: var(--cmn-brand-red);
}

.cmn-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
  padding-bottom: 40px;
}

.cmn-admin-column {
  display: grid;
  gap: 16px;
}

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

.cmn-request-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 12px 12px 14px;
  border-radius: 10px;
  background: var(--cmn-card-elev);
  border: 1px solid var(--cmn-divider);
  margin-bottom: 10px;
  position: relative;
  transition: background 0.2s ease;
}

.cmn-request-row:hover {
  background: var(--cmn-card);
}

.cmn-priority-bar {
  width: 4px;
  height: 100%;
  background: var(--cmn-brand-red);
  border-radius: 4px;
}

.cmn-request-content strong {
  display: block;
  color: var(--cmn-text-primary);
}

.cmn-request-content span {
  display: block;
  color: var(--cmn-text-secondary);
  font-size: 14px;
}

.cmn-request-content small {
  color: var(--cmn-text-muted);
  font-size: 12px;
}

.cmn-alert-row {
  border-color: rgba(198, 40, 40, 0.35);
  background: rgba(198, 40, 40, 0.12);
}

.cmn-admin-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.cmn-admin-stats div {
  background: var(--cmn-admin-stat-bg);
  border: 1px solid var(--cmn-admin-card-border);
  box-shadow: inset 3px 0 0 var(--cmn-brand-red);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--cmn-admin-text);
}

.cmn-admin-stats strong {
  font-size: 16px;
  color: var(--cmn-brand-red);
}

.cmn-admin-table {
  display: grid;
  gap: 8px;
}

.cmn-admin-table div {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--cmn-admin-table-bg);
  border: 1px solid var(--cmn-admin-card-border);
  box-shadow: inset 3px 0 0 var(--cmn-brand-red);
  font-size: 12px;
  color: var(--cmn-admin-text);
}

.cmn-admin-table span {
  color: var(--cmn-text-secondary);
}

.cmn-admin-table strong {
  color: var(--cmn-brand-red);
}

@media (max-width: 980px) {
  .cmn-admin-grid {
    grid-template-columns: 1fr;
  }
}

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

.cmn-task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--cmn-card-elev);
  border: 1px solid var(--cmn-divider);
}

.cmn-task-item strong {
  display: block;
  color: var(--cmn-text-primary);
  font-size: 14px;
}

.cmn-task-item span {
  color: var(--cmn-text-secondary);
  font-size: 12px;
}

.cmn-task-meta {
  color: var(--cmn-text-muted);
  font-size: 12px;
  white-space: nowrap;
}

.cmn-mini-calendar {
  display: grid;
  gap: 12px;
}

.cmn-mini-header {
  display: flex;
  justify-content: space-between;
  color: var(--cmn-text-secondary);
  font-size: 12px;
}

.cmn-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  text-align: center;
  font-size: 11px;
  color: var(--cmn-text-muted);
}

.cmn-mini-day {
  background: var(--cmn-card-elev);
  border: 1px solid var(--cmn-divider);
  border-radius: 6px;
  padding: 6px 0;
  color: var(--cmn-text-primary);
}

.cmn-mini-day.is-booked {
  background: var(--cmn-brand-red-soft);
  border-color: var(--cmn-brand-red);
  color: var(--cmn-text-primary);
}

.cmn-portal-light .cmn-dashboard-card p,
.cmn-portal-light .cmn-dashboard-card span,
.cmn-portal-light .cmn-dashboard-card li {
  color: var(--cmn-text-secondary);
}

.cmn-portal-light .cmn-progress-bar {
  background: rgba(255, 255, 255, 0.08);
}

.cmn-btn-primary {
  background: var(--cmn-brand-red);
  color: #fff;
  border: 1px solid var(--cmn-brand-red-dark);
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cmn-btn-secondary {
  background: transparent;
  color: var(--cmn-brand-red);
  border: 1px solid var(--cmn-brand-red);
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cmn-btn-mini {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
}

.cmn-btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--cmn-text-primary);
  border: 1px solid var(--cmn-divider);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cmn-portal-light .cmn-status-chip.is-verified {
  background: var(--cmn-brand-red-soft);
  color: var(--cmn-text-primary);
  border: 1px solid rgba(198, 40, 40, 0.4);
}

.cmn-portal-light .cmn-status-chip.is-pending {
  background: var(--cmn-brand-red-soft);
  color: var(--cmn-text-primary);
  border: 1px solid rgba(198, 40, 40, 0.4);
}

.cmn-portal-light .cmn-status-chip.is-declined {
  background: rgba(185, 28, 28, 0.18);
  color: #fecaca;
  border: 1px solid rgba(220, 38, 38, 0.45);
}

.cmn-portal-light .cmn-dashboard-row .cmn-availability-card {
  background: linear-gradient(135deg, rgba(208, 42, 42, 0.15), rgba(16, 18, 24, 0.85));
  border: 1px solid rgba(208, 42, 42, 0.4);
}

.cmn-portal-light .cmn-cover-status {
  background: rgba(208, 42, 42, 0.2);
  color: #ffffff;
}

.cmn-portal-light .cmn-cover-skills span {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.cmn-portal-light .cmn-booking-table {
  background: #0f1116;
  border-color: rgba(255, 255, 255, 0.08);
}

.cmn-portal-light .cmn-booking-row.header {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.cmn-portal-light .cmn-ghost {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.cmn-actions-grid .cmn-ghost,
.cmn-actions-grid button.cmn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cmn-divider);
  color: var(--cmn-text-primary);
  box-shadow: none;
}

body.cmn-theme-midnight .cmn-candidate-portal {
  background: #070b14;
}

body.cmn-theme-midnight .cmn-candidate-nav,
body.cmn-theme-midnight .cmn-candidate-main,
body.cmn-theme-midnight .cmn-dashboard-card,
body.cmn-theme-midnight .cmn-availability-hero {
  background: #0d1528;
  border-color: #1f2a44;
}

body.cmn-theme-contrast .cmn-candidate-portal {
  background: #000;
  color: #fff;
}

body.cmn-theme-contrast .cmn-candidate-nav,
body.cmn-theme-contrast .cmn-candidate-main,
body.cmn-theme-contrast .cmn-dashboard-card,
body.cmn-theme-contrast .cmn-availability-hero {
  background: #0b0f14;
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

body.cmn-theme-contrast .cmn-ghost {
  border-color: rgba(255, 255, 255, 0.65);
  color: #fff;
}

body.cmn-theme-light .cmn-candidate-portal {
  background: #f1f5f9;
  color: #0f172a;
}

body.cmn-theme-light .cmn-candidate-nav,
body.cmn-theme-light .cmn-candidate-main,
body.cmn-theme-light .cmn-dashboard-card,
body.cmn-theme-light .cmn-availability-hero {
  background: #fff;
  border-color: #d6deea;
  color: #0f172a;
}

body.cmn-theme-light .cmn-muted {
  color: #64748b;
}

body.cmn-theme-light .cmn-ghost {
  color: #0f172a;
  border-color: #d6deea;
}

.cmn-compliance-progress {
  margin: 10px 0 12px;
  display: grid;
  gap: 8px;
}

.cmn-compliance-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--cmn-text-secondary);
}

.cmn-compliance-progress-head strong {
  font-size: 14px;
  color: var(--cmn-text-primary);
}

.cmn-progress-bar.cmn-compliance-progress-bar {
  height: 8px;
}

.cmn-awaiting-review-card .cmn-empty {
  margin-top: 4px;
}

.cmn-awaiting-review-list {
  display: grid;
  gap: 10px;
}

.cmn-awaiting-review-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--cmn-border);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
}

.cmn-awaiting-review-item strong {
  display: block;
  font-size: 14px;
  color: var(--cmn-text-primary);
}

.cmn-awaiting-review-item span {
  display: block;
  font-size: 12px;
  color: var(--cmn-muted);
  line-height: 1.35;
}

@media (max-width: 760px) {
  .cmn-settings-grid {
    grid-template-columns: 1fr;
  }

  .cmn-awaiting-review-item {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Candidate UI fix pack: bell action readability + full-width docs + availability clickability */
.cmn-portal-light .cmn-bell-panel .cmn-bell-actions .cmn-ghost,
.cmn-portal-light .cmn-bell-panel .cmn-bell-actions .cmn-btn-mini {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(208, 42, 42, 0.38);
}

.cmn-portal-light .cmn-bell-panel .cmn-bell-actions .cmn-ghost:hover,
.cmn-portal-light .cmn-bell-panel .cmn-bell-actions .cmn-btn-mini:hover,
.cmn-portal-light .cmn-bell-panel .cmn-bell-actions .cmn-ghost:focus-visible,
.cmn-portal-light .cmn-bell-panel .cmn-bell-actions .cmn-btn-mini:focus-visible {
  color: #ffffff;
  background: rgba(208, 42, 42, 0.28);
  border-color: rgba(208, 42, 42, 0.6);
}

.cmn-portal-light .cmn-bell-panel .cmn-bell-actions .cmn-ghost:disabled,
.cmn-portal-light .cmn-bell-panel .cmn-bell-actions .cmn-btn-mini:disabled {
  color: rgba(248, 250, 252, 0.55);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.2);
  opacity: 1;
}

.cmn-candidate-main .cmn-profile-grid > .cmn-doc-upload-card {
  grid-column: 1 / -1;
}

.cmn-availability-hero {
  position: relative;
  isolation: isolate;
  z-index: 2;
}

.cmn-marketing-root {
  display: grid;
  gap: 14px;
}

.cmn-marketing-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cmn-marketing-tabs .cmn-ghost.is-active {
  border-color: var(--cmn-accent);
  background: rgba(220, 38, 38, 0.16);
  color: var(--cmn-accent);
}

.cmn-marketing-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.cmn-marketing-table-wrap {
  overflow-x: auto;
}

.cmn-marketing-table th,
.cmn-marketing-table td {
  white-space: nowrap;
}

.cmn-marketing-list-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.cmn-marketing-tag-picker,
.cmn-marketing-preview-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cmn-muted);
}

.cmn-marketing-tag-picker select,
.cmn-marketing-preview-pick select {
  min-width: 180px;
}

.cmn-marketing-preview {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--cmn-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.cmn-marketing-preview strong {
  color: var(--cmn-text);
}

[data-marketing-preview-body] {
  color: var(--cmn-text);
  line-height: 1.45;
}

[data-marketing-replies] td {
  vertical-align: top;
}

[data-marketing-replies] td:nth-child(5) {
  max-width: 420px;
  white-space: normal;
  color: var(--cmn-muted);
}

.cmn-system-health-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.cmn-system-health-summary-grid div span {
  display: block;
  color: var(--cmn-muted, #9ca3b5);
  font-size: 12px;
  margin-bottom: 4px;
}

.cmn-system-health-summary-grid div strong {
  font-size: 16px;
  color: var(--cmn-text, #f3f6ff);
}

.cmn-system-health-run-msg {
  margin-top: 10px;
  min-height: 20px;
  color: var(--cmn-text, #f3f6ff);
}

.cmn-system-health-run-msg.is-error {
  color: #ff8b8b;
}

.cmn-system-health-tabs {
  display: flex;
  gap: 10px;
  margin: 14px 0;
}

.cmn-system-health-tabs .cmn-ghost.is-active {
  border-color: var(--cmn-accent, #d12929);
  color: #fff;
}

.cmn-system-health-panel {
  display: none;
}

.cmn-system-health-panel.is-active {
  display: block;
}

.cmn-system-health-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.cmn-system-health-tile {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: #141a25;
  color: #f3f6ff;
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.cmn-system-health-tile strong {
  display: block;
  margin-top: 6px;
  font-size: 22px;
}

.cmn-system-health-tile small {
  color: #9ca3b5;
}

.cmn-system-health-tile.is-critical {
  border-color: rgba(220, 70, 70, 0.6);
}

.cmn-system-health-tile.is-warning {
  border-color: rgba(214, 173, 63, 0.55);
}

.cmn-system-health-tile.is-info {
  border-color: rgba(77, 133, 233, 0.55);
}

.cmn-system-health-tile.is-healthy {
  border-color: rgba(77, 185, 126, 0.5);
}

.cmn-system-health-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.cmn-system-health-filters label {
  color: #9ca3b5;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cmn-system-health-filters input[type="search"],
.cmn-system-health-filters select {
  background: #0f1520;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #f3f6ff;
  padding: 8px 10px;
}

.cmn-system-health-toggle {
  justify-content: flex-end;
  align-items: flex-start;
}

.cmn-system-health-toggle input {
  margin-right: 6px;
}

.cmn-system-health-table-wrap {
  overflow-x: auto;
}

.cmn-error-log {
  background: #0b0f14;
  color: #e6e9ef;
  border: 1px solid #1c2732;
  border-radius: 12px;
  padding: 16px;
  max-height: 520px;
  overflow: auto;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.cmn-system-health-table td,
.cmn-system-health-table th,
.cmn-system-health-history-table td,
.cmn-system-health-history-table th,
.cmn-system-health-fixlog-table td,
.cmn-system-health-fixlog-table th {
  vertical-align: top;
}

.cmn-status-chip.is-critical {
  background: rgba(215, 67, 67, 0.25);
  border-color: rgba(215, 67, 67, 0.75);
  color: #ffafaf;
}

.cmn-status-chip.is-warning {
  background: rgba(190, 146, 48, 0.24);
  border-color: rgba(190, 146, 48, 0.7);
  color: #ffd67e;
}

.cmn-status-chip.is-info {
  background: rgba(74, 126, 222, 0.24);
  border-color: rgba(74, 126, 222, 0.65);
  color: #b8d4ff;
}

.cmn-status-chip.is-muted {
  background: rgba(130, 137, 153, 0.2);
  border-color: rgba(130, 137, 153, 0.5);
  color: #d5dbe7;
}

.cmn-system-health-flags {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cmn-system-health-pagination {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.cmn-system-health-modal .cmn-support-modal-content {
  max-width: 720px;
}

.cmn-system-health-modal-row {
  margin-bottom: 12px;
}

.cmn-system-health-modal-row strong {
  display: block;
  margin-bottom: 6px;
  color: #f3f6ff;
}

.cmn-system-health-modal-row p {
  margin: 0;
  color: #dbe2f5;
}

.cmn-system-health-modal-row pre {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  background: #0f1520;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #dbe2f5;
  padding: 10px;
}

.cmn-log-pre {
  margin: 0;
  max-height: 320px;
  overflow: auto;
  background: #0f1520;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #dbe2f5;
  padding: 12px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.cmn-system-health-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.cmn-system-health-repair {
  border-top: 1px solid var(--cmn-border);
  padding-top: 10px;
}

.cmn-system-health-repair label input[type="text"] {
  width: 100%;
  margin-top: 6px;
  background: #0f1520;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #f3f6ff;
  padding: 8px 10px;
}

@media (max-width: 1200px) {
  .cmn-system-health-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cmn-system-health-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cmn-system-health-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .cmn-system-health-summary-grid,
  .cmn-system-health-tiles,
  .cmn-system-health-filters {
    grid-template-columns: 1fr;
  }

  .cmn-system-health-pagination {
    justify-content: space-between;
  }
}


.cmn-school-request-chat .cmn-support-attachments {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cmn-school-request-chat .cmn-support-attachment-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: #ffd8dd;
  text-decoration: none;
  background: rgba(127, 29, 29, 0.2);
}

.cmn-school-request-chat .cmn-support-attachment-chip:hover {
  border-color: rgba(239, 68, 68, 0.65);
  color: #ffe8eb;
}

.cmn-school-request-chat .cmn-request-chat-form {
  display: grid;
  gap: 10px;
}

.cmn-school-request-chat .cmn-request-chat-form label {
  display: grid !important;
  gap: 6px;
  width: 100%;
}

.cmn-school-request-chat .cmn-request-chat-form textarea {
  display: block !important;
  width: 100% !important;
  min-height: 110px !important;
}

.cmn-school-request-chat .cmn-request-chat-form input[type='file'] {
  display: block;
  width: 100%;
}

.cmn-school-request-chat .cmn-request-chat-form button[type='submit'] {
  justify-self: start;
}


.cmn-role-rate-inline {
  margin: 8px 0 12px;
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}

.cmn-role-rate-inline label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.cmn-role-rate-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 12px;
}

.cmn-role-rate-table th,
.cmn-role-rate-table td {
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px;
  text-align: left;
}

.cmn-role-rate-table input[type="number"] {
  width: 100%;
  max-width: 180px;
}

/* Availability hero tweak pack */
.cmn-availability-hero {
  border-bottom: 4px solid #dc2626;
}

.cmn-availability-btn {
  background: #7f1d1d;
  color: #fff;
  box-shadow: 0 12px 28px rgba(127, 29, 29, 0.45);
}

.cmn-availability-btn:hover,
.cmn-availability-btn:focus {
  background: #991b1b;
}

.cmn-availability-hints {
  width: min(920px, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}

.cmn-availability-hint {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: #cbd5e1;
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(220, 38, 38, 0.28);
  border-radius: 10px;
  padding: 8px 10px;
  text-align: left;
}

@media (max-width: 840px) {
  .cmn-availability-hints {
    grid-template-columns: 1fr;
  }
}

/* Force dark availability CTA (override global .cmn-primary) */
#cmn-tomorrow-availability-btn.cmn-availability-btn,
#cmn-tomorrow-availability-btn.cmn-availability-btn.cmn-primary {
  background: #7f1d1d !important;
  border: 1px solid #7f1d1d !important;
  color: #ffffff !important;
}

#cmn-tomorrow-availability-btn.cmn-availability-btn:hover,
#cmn-tomorrow-availability-btn.cmn-availability-btn:focus,
#cmn-tomorrow-availability-btn.cmn-availability-btn.cmn-primary:hover,
#cmn-tomorrow-availability-btn.cmn-availability-btn.cmn-primary:focus {
  background: #991b1b !important;
  border-color: #991b1b !important;
}

/* Absolute override: prevent any white/gradient bleed on availability CTA */
#cmn-tomorrow-availability-btn,
#cmn-tomorrow-availability-btn:hover,
#cmn-tomorrow-availability-btn:focus,
#cmn-tomorrow-availability-btn:active,
#cmn-tomorrow-availability-btn:visited {
  background-color: #7f1d1d !important;
  background-image: none !important;
  border-color: #7f1d1d !important;
  color: #ffffff !important;
}

#cmn-tomorrow-availability-btn:hover,
#cmn-tomorrow-availability-btn:focus,
#cmn-tomorrow-availability-btn:active {
  background-color: #991b1b !important;
  border-color: #991b1b !important;
}

#cmn-tomorrow-availability-btn[disabled] {
  background-color: #6b1a1a !important;
  background-image: none !important;
  border-color: #6b1a1a !important;
  color: #f5dada !important;
}

/* Availability card: black theme, white text, red button */
.cmn-availability-hero,
.cmn-portal-light .cmn-availability-hero,
.cmn-availability-hero.is-confirmed,
.cmn-availability-hero.is-blocked {
  background: #000000 !important;
  border: 1px solid rgba(220, 38, 38, 0.35) !important;
  border-bottom: 4px solid #dc2626 !important;
  color: #ffffff !important;
}

.cmn-availability-hero h2,
.cmn-availability-subtext,
.cmn-availability-status,
.cmn-availability-helper,
.cmn-availability-hint {
  color: #ffffff !important;
}

#cmn-tomorrow-availability-btn,
#cmn-tomorrow-availability-btn:hover,
#cmn-tomorrow-availability-btn:focus,
#cmn-tomorrow-availability-btn:active {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

/* Availability hero image background + centered CTA */
.cmn-availability-hero,
.cmn-portal-light .cmn-availability-hero,
.cmn-availability-hero.is-confirmed,
.cmn-availability-hero.is-blocked {
  background-image: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)), url('assets/availability-hero-bg.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.cmn-availability-hero-content,
.cmn-availability-hero-action {
  align-items: center !important;
  text-align: center !important;
}

#cmn-tomorrow-availability-btn {
  min-width: min(720px, 100%) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

.cmn-availability-countdown {
  margin-top: 6px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
}

/* Show full availability background image (no crop) */
.cmn-availability-hero,
.cmn-portal-light .cmn-availability-hero,
.cmn-availability-hero.is-confirmed,
.cmn-availability-hero.is-blocked {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Availability hero split layout: content left, image right */
.cmn-availability-hero,
.cmn-portal-light .cmn-availability-hero,
.cmn-availability-hero.is-confirmed,
.cmn-availability-hero.is-blocked {
  display: grid !important;
  grid-template-columns: 1.2fr 0.8fr !important;
  column-gap: 18px;
  align-items: stretch;
  background: #000 !important;
  position: relative;
  overflow: hidden;
}

.cmn-availability-hero::after {
  content: '';
  grid-column: 2;
  grid-row: 1 / span 2;
  background-image: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)), url('assets/availability-hero-bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-left: 1px solid rgba(220, 38, 38, 0.35);
  min-height: 280px;
}

.cmn-availability-hero-content,
.cmn-availability-hero-action {
  grid-column: 1;
  align-items: flex-start !important;
  text-align: left !important;
  z-index: 1;
}

#cmn-tomorrow-availability-btn {
  align-self: flex-start;
}

@media (max-width: 900px) {
  .cmn-availability-hero,
  .cmn-portal-light .cmn-availability-hero,
  .cmn-availability-hero.is-confirmed,
  .cmn-availability-hero.is-blocked {
    grid-template-columns: 1fr !important;
  }

  .cmn-availability-hero::after {
    grid-column: 1;
    grid-row: 1;
    min-height: 180px;
    border-left: none;
    border-bottom: 1px solid rgba(220, 38, 38, 0.35);
  }

  .cmn-availability-hero-content,
  .cmn-availability-hero-action {
    grid-column: 1;
    text-align: left !important;
  }
}

/* Make availability image/frame larger */
.cmn-availability-hero,
.cmn-portal-light .cmn-availability-hero,
.cmn-availability-hero.is-confirmed,
.cmn-availability-hero.is-blocked {
  grid-template-columns: 1.05fr 0.95fr !important;
  min-height: 460px !important;
}

.cmn-availability-hero::after {
  min-height: 460px !important;
  background-size: contain !important;
  background-color: #000 !important;
}

@media (max-width: 900px) {
  .cmn-availability-hero,
  .cmn-portal-light .cmn-availability-hero,
  .cmn-availability-hero.is-confirmed,
  .cmn-availability-hero.is-blocked {
    min-height: 0 !important;
  }

  .cmn-availability-hero::after {
    min-height: 240px !important;
    background-size: contain !important;
  }
}

/* Availability minimal bottom controls */
.cmn-availability-bottom-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.cmn-availability-status-dot-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cmn-availability-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  background: #facc15;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.25);
}

.cmn-availability-status-dot.is-confirmed {
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

.cmn-availability-status-dot.is-blocked {
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
}

.cmn-availability-status-dot-label {
  font-size: 12px;
  color: #ffffff;
}

.cmn-availability-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.cmn-availability-btn-secondary:hover,
.cmn-availability-btn-secondary:focus {
  background: rgba(255, 255, 255, 0.14);
}

/* Pin availability controls to bottom of frame */
.cmn-availability-hero {
  position: relative;
}

.cmn-availability-hero-action {
  position: relative;
  min-height: 220px;
  padding-bottom: 56px;
}

.cmn-availability-bottom-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  margin-top: 0;
}

@media (max-width: 900px) {
  .cmn-availability-hero-action {
    min-height: 0;
    padding-bottom: 0;
  }

  .cmn-availability-bottom-row {
    position: static;
    margin-top: 10px;
  }
}

/* Availability text + main CTA positioning tweak */
.cmn-availability-hero-content,
.cmn-availability-hero-action {
  text-align: left !important;
  align-items: flex-start !important;
}

#cmn-tomorrow-availability-btn {
  min-width: min(760px, 100%) !important;
  min-height: 64px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  margin-top: 4px;
  margin-bottom: 26px;
}

.cmn-availability-hero-action {
  min-height: 250px;
  padding-top: 6px;
}

/* Availability heading centered above button, hide top status text */
.cmn-availability-hero-content {
  align-items: center !important;
  text-align: center !important;
  width: 100%;
}

.cmn-availability-hero-content h2 {
  width: 100%;
  text-align: center !important;
  margin-bottom: 8px;
}

.cmn-availability-status[data-availability-message] {
  display: none !important;
}

/* Bigger bottom-left status light */
.cmn-availability-status-dot {
  width: 14px !important;
  height: 14px !important;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.25) !important;
}

.cmn-availability-status-dot.is-confirmed {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25) !important;
}

.cmn-availability-status-dot.is-blocked {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}

/* Availability panel layout from latest spec */
.cmn-availability-hero-content {
  align-items: flex-start !important;
  text-align: left !important;
}

.cmn-availability-hero-content h2 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 4px;
}

.cmn-availability-subtext {
  color: #e2e8f0 !important;
  font-size: 14px;
  margin: 0 0 8px;
}

.cmn-availability-countdown {
  font-size: 16px;
  font-weight: 700;
  margin: 8px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.cmn-availability-hero-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-start;
  gap: 10px;
}

#cmn-tomorrow-availability-btn {
  width: min(680px, 100%) !important;
}

.cmn-availability-radio-like {
  font-size: 14px;
  color: #e2e8f0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cmn-availability-btn-secondary {
  align-self: flex-start;
}

.cmn-availability-bottom-row {
  position: static !important;
  width: 100%;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.cmn-availability-impact {
  font-size: 13px;
  color: #f1f5f9;
}

.cmn-availability-social {
  margin-top: 4px;
  font-size: 13px;
  color: #fcd34d;
}

.cmn-availability-helper {
  display: none !important;
}

/* Center requested availability status lines */
.cmn-availability-status-dot-wrap,
.cmn-availability-impact,
.cmn-availability-social {
  justify-content: center !important;
  text-align: center !important;
  width: 100%;
}

.cmn-availability-social {
  align-self: center;
}

/* Availability bottom text prominence + centered lower band */
.cmn-availability-hero-action {
  gap: 12px !important;
}

.cmn-availability-bottom-row {
  width: 100%;
  margin-top: 10px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(203, 213, 225, 0.6) !important;
}

.cmn-availability-status-dot-wrap,
.cmn-availability-impact,
.cmn-availability-social {
  width: 100%;
  max-width: 860px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  justify-content: center !important;
}

.cmn-availability-status-dot-wrap {
  gap: 12px !important;
  line-height: 1.08;
}

.cmn-availability-status-dot {
  width: clamp(14px, 1.2vw, 18px) !important;
  height: clamp(14px, 1.2vw, 18px) !important;
}

.cmn-availability-status-dot-label {
  font-size: clamp(22px, 2.2vw, 34px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
}

.cmn-availability-impact {
  margin-top: 2px !important;
  font-size: clamp(20px, 1.9vw, 30px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: #f8fafc !important;
}

.cmn-availability-social {
  margin-top: 2px !important;
  padding-bottom: 18px !important;
  font-size: clamp(18px, 1.7vw, 26px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  color: #fcd34d !important;
}

@media (max-width: 900px) {
  .cmn-availability-bottom-row {
    padding-top: 14px !important;
  }

  .cmn-availability-social {
    padding-bottom: 14px !important;
  }
}

/* Final lock: powerful right image + true centered lower status band */
.cmn-availability-hero,
.cmn-portal-light .cmn-availability-hero,
.cmn-availability-hero.is-confirmed,
.cmn-availability-hero.is-blocked {
  grid-template-columns: 0.9fr 1.1fr !important;
  min-height: 600px !important;
  border-bottom: 0 !important;
}

.cmn-availability-hero::after {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #000 !important;
  min-height: 100% !important;
}

.cmn-availability-hero-action {
  width: 100%;
  align-items: stretch !important;
  padding-bottom: 0 !important;
}

.cmn-availability-lower-band {
  width: 100%;
  margin-top: auto;
  border-top: 1px solid rgba(203, 213, 225, 0.62);
  border-bottom: 4px solid #dc2626;
  min-height: clamp(190px, 28vh, 280px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vh, 14px);
  padding: clamp(14px, 2.4vh, 22px) 0;
  box-sizing: border-box;
}

.cmn-availability-lower-band .cmn-availability-bottom-row {
  border-top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cmn-availability-lower-band .cmn-availability-status-dot-wrap,
.cmn-availability-lower-band .cmn-availability-impact,
.cmn-availability-lower-band .cmn-availability-social {
  width: 100%;
  text-align: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.cmn-availability-lower-band .cmn-availability-status-dot-label {
  font-size: clamp(16px, 1.4vw, 22px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.cmn-availability-lower-band .cmn-availability-impact {
  font-size: clamp(14px, 1.2vw, 18px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

.cmn-availability-lower-band .cmn-availability-social {
  font-size: clamp(13px, 1vw, 16px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

@media (max-width: 900px) {
  .cmn-availability-hero,
  .cmn-portal-light .cmn-availability-hero,
  .cmn-availability-hero.is-confirmed,
  .cmn-availability-hero.is-blocked {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
  }

  .cmn-availability-hero::after {
    min-height: 340px !important;
  }

  .cmn-availability-lower-band {
    min-height: clamp(170px, 24vh, 240px);
  }
}

/* Availability controls: remove old radio line + center secondary button under main CTA */
.cmn-availability-radio-like {
  display: none !important;
}

.cmn-availability-btn-secondary {
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: inline-flex !important;
  justify-content: center !important;
}

/* Portal glass overhaul: translucent panels, white text, red-only accents */
.cmn-portal-light {
  --cmn-glass-panel-bg: rgba(22, 24, 30, 0.6);
  --cmn-glass-panel-border: rgba(255, 255, 255, 0.08);
  --cmn-glass-panel-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(208, 42, 42, 0.12);
  --cmn-glass-text: #ffffff;
  --cmn-glass-muted: #e0e0e0;
}

.cmn-portal-light :is(
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-card,
  .card,
  .tile,
  .portal-panel,
  .cmn-kpi,
  .cmn-shortcut-tile,
  .cmn-support-tile,
  .cmn-support-ticket,
  .cmn-system-health-tile,
  .cmn-modal-content,
  .cmn-support-thread,
  .cmn-support-sidebar,
  .cmn-support-feedback-modal__card,
  .cmn-booking-feedback-modal__card,
  .cmn-support-insights-modal__card,
  .cmn-booking-disclaimer-modal__card,
  .cmn-support-modal-content,
  .cmn-request-row,
  .cmn-admin-stats div,
  .cmn-admin-table div,
  .cmn-task-item,
  .cmn-mini-day,
  .cmn-cover-card,
  .cmn-calendar-panel,
  .cmn-calendar-detail,
  .cmn-list-item,
  .cmn-booking-table,
  .cmn-system-health-table-wrap
) {
  background: var(--cmn-glass-panel-bg) !important;
  border: 1px solid var(--cmn-glass-panel-border) !important;
  box-shadow: var(--cmn-glass-panel-shadow) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--cmn-glass-text) !important;
}

.cmn-portal-light :is(
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-card,
  .card,
  .tile,
  .portal-panel,
  .cmn-kpi,
  .cmn-shortcut-tile,
  .cmn-support-tile,
  .cmn-support-ticket,
  .cmn-system-health-tile,
  .cmn-modal-content,
  .cmn-support-thread,
  .cmn-support-sidebar,
  .cmn-support-feedback-modal__card,
  .cmn-booking-feedback-modal__card,
  .cmn-support-insights-modal__card,
  .cmn-booking-disclaimer-modal__card,
  .cmn-support-modal-content,
  .cmn-request-row,
  .cmn-admin-stats div,
  .cmn-admin-table div,
  .cmn-task-item,
  .cmn-mini-day,
  .cmn-cover-card,
  .cmn-calendar-panel,
  .cmn-calendar-detail,
  .cmn-list-item,
  .cmn-booking-table,
  .cmn-system-health-table-wrap
) :is(h1, h2, h3, h4, h5, h6, p, span, li, label, small, strong, a, th, td, dt, dd) {
  color: var(--cmn-glass-text) !important;
}

.cmn-portal-light :is(
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-card,
  .card,
  .tile,
  .portal-panel,
  .cmn-kpi,
  .cmn-shortcut-tile,
  .cmn-support-tile,
  .cmn-support-ticket,
  .cmn-system-health-tile,
  .cmn-modal-content,
  .cmn-support-thread,
  .cmn-support-sidebar,
  .cmn-support-feedback-modal__card,
  .cmn-booking-feedback-modal__card,
  .cmn-support-insights-modal__card,
  .cmn-booking-disclaimer-modal__card,
  .cmn-support-modal-content,
  .cmn-request-row,
  .cmn-admin-stats div,
  .cmn-admin-table div,
  .cmn-task-item,
  .cmn-mini-day,
  .cmn-cover-card,
  .cmn-calendar-panel,
  .cmn-calendar-detail,
  .cmn-list-item,
  .cmn-booking-table,
  .cmn-system-health-table-wrap
) :is(.cmn-muted, .cmn-empty, .cmn-support-meta, [class*='muted'], small) {
  color: var(--cmn-glass-muted) !important;
}

.cmn-portal-light :is(.cmn-dashboard-card, .cmn-panel-card, .cmn-card, .card, .tile, .portal-panel, .cmn-modal-content) :is(.card-title, .card-header, .cmn-card-header) {
  color: #ffffff !important;
  font-weight: 600;
}

.cmn-portal-light :is(
  .cmn-progress-bar span,
  .cmn-partner-progress-track span,
  .cmn-rewards-progress-track span,
  .progress-bar
) {
  background: linear-gradient(90deg, #d02a2a, #a81f1f) !important;
}

.cmn-portal-light :is(
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-card,
  .card,
  .tile,
  .portal-panel,
  .cmn-modal-content,
  .cmn-support-feedback-modal__card,
  .cmn-booking-feedback-modal__card,
  .cmn-support-insights-modal__card,
  .cmn-booking-disclaimer-modal__card
) :is(button, button a, button span, .cmn-primary, .cmn-btn-primary, .cmn-btn-secondary, .cmn-ghost, a.cmn-primary, a.cmn-btn-primary, a.cmn-btn-secondary, a.cmn-ghost) {
  color: #ffffff !important;
}

.cmn-portal-light :is(
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-card,
  .card,
  .tile,
  .portal-panel,
  .cmn-modal-content,
  .cmn-support-feedback-modal__card,
  .cmn-booking-feedback-modal__card,
  .cmn-support-insights-modal__card,
  .cmn-booking-disclaimer-modal__card
) :is(.cmn-primary, .cmn-btn-primary, button.cmn-primary, button.cmn-btn-primary) {
  background: linear-gradient(180deg, #d02a2a 0%, #a81f1f 100%) !important;
  border-color: rgba(0, 0, 0, 0.35) !important;
  color: #ffffff !important;
}

.cmn-portal-light :is(
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-card,
  .card,
  .tile,
  .portal-panel,
  .cmn-modal-content,
  .cmn-support-feedback-modal__card,
  .cmn-booking-feedback-modal__card,
  .cmn-support-insights-modal__card,
  .cmn-booking-disclaimer-modal__card
) :is(.cmn-btn-secondary, .cmn-ghost, button.cmn-ghost, button.cmn-btn-secondary) {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

.cmn-portal-light :is(.alert, .card-alert, .cmn-register-error, .cmn-register-warning) {
  background: rgba(208, 42, 42, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

.cmn-portal-light :is(.alert, .card-alert, .cmn-register-error, .cmn-register-warning) * {
  color: #ffffff !important;
}

.cmn-portal-light .cmn-status-chip,
.cmn-portal-light .cmn-status-chip.is-verified,
.cmn-portal-light .cmn-status-chip.is-pending,
.cmn-portal-light .cmn-status-chip.is-info,
.cmn-portal-light .cmn-status-chip.is-muted,
.cmn-portal-light .cmn-status-chip.is-warning {
  background: rgba(208, 42, 42, 0.2) !important;
  border-color: rgba(208, 42, 42, 0.55) !important;
  color: #ffffff !important;
}

.cmn-portal-light .cmn-status-chip.is-declined,
.cmn-portal-light .cmn-status-chip.is-critical {
  background: rgba(208, 42, 42, 0.34) !important;
  border-color: rgba(208, 42, 42, 0.72) !important;
  color: #ffffff !important;
}

.cmn-portal-light :is(.cmn-dashboard-card, .cmn-panel-card, .cmn-support-tile, .cmn-system-health-tile, .cmn-modal-content) :is(svg, svg *) {
  color: #ffffff !important;
  stroke: currentColor !important;
  fill: currentColor !important;
}

/* Neon Accents - Cards */
.cmn-portal-light :is(
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-card,
  .card,
  .tile,
  .portal-panel,
  .dashboard-tile,
  .cmn-kpi,
  .cmn-shortcut-tile,
  .cmn-support-tile,
  .cmn-support-ticket,
  .cmn-system-health-tile,
  .cmn-cover-card,
  .cmn-request-row,
  .cmn-admin-stats div,
  .cmn-admin-table div,
  .cmn-task-item,
  .cmn-mini-day,
  .cmn-list-item
) {
  transition:
    transform 0.18s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
  will-change: transform;
}

.cmn-portal-light :is(
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-card,
  .card,
  .tile,
  .portal-panel,
  .dashboard-tile,
  .cmn-kpi,
  .cmn-shortcut-tile,
  .cmn-support-tile,
  .cmn-support-ticket,
  .cmn-system-health-tile,
  .cmn-cover-card,
  .cmn-request-row,
  .cmn-admin-stats div,
  .cmn-admin-table div,
  .cmn-task-item,
  .cmn-mini-day,
  .cmn-list-item
):hover {
  transform: translateY(-2px) scale(1.005);
  border-color: rgba(208, 42, 42, 0.42) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(208, 42, 42, 0.2) !important;
}

.cmn-portal-light :is(
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-card,
  .card,
  .tile,
  .portal-panel,
  .dashboard-tile,
  .cmn-kpi,
  .cmn-shortcut-tile,
  .cmn-support-tile,
  .cmn-support-ticket,
  .cmn-system-health-tile,
  .cmn-cover-card,
  .cmn-request-row,
  .cmn-admin-stats div,
  .cmn-admin-table div,
  .cmn-task-item,
  .cmn-mini-day,
  .cmn-list-item
):focus-visible,
.cmn-portal-light :is(
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-card,
  .card,
  .tile,
  .portal-panel,
  .dashboard-tile,
  .cmn-kpi,
  .cmn-shortcut-tile,
  .cmn-support-tile,
  .cmn-support-ticket,
  .cmn-system-health-tile,
  .cmn-cover-card,
  .cmn-request-row,
  .cmn-admin-stats div,
  .cmn-admin-table div,
  .cmn-task-item,
  .cmn-mini-day,
  .cmn-list-item
):focus-within {
  outline: 2px solid rgba(208, 42, 42, 0.9);
  outline-offset: 2px;
  border-color: rgba(208, 42, 42, 0.6) !important;
  box-shadow:
    0 0 0 3px rgba(208, 42, 42, 0.2),
    0 14px 30px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(208, 42, 42, 0.2) !important;
}

.cmn-portal-light :is(.cmn-shortcut-tile strong, .cmn-admin-stats strong, .cmn-admin-table strong) {
  color: #ffffff !important;
}

/* Neon Accents - Nav */
.cmn-portal-light :is(.cmn-candidate-nav-link, .cmn-school-nav-link, .cmn-staff-nav-link) {
  position: relative;
  color: #ffffff !important;
  border-left-color: transparent !important;
  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease;
}

.cmn-portal-light :is(.cmn-candidate-nav-link, .cmn-school-nav-link, .cmn-staff-nav-link):hover {
  background: rgba(208, 42, 42, 0.12) !important;
  box-shadow: inset 3px 0 0 rgba(208, 42, 42, 0.85);
  color: #ffffff !important;
}

.cmn-portal-light :is(.cmn-candidate-nav-link, .cmn-school-nav-link, .cmn-staff-nav-link).is-active {
  background: rgba(208, 42, 42, 0.2) !important;
  box-shadow: inset 3px 0 0 #d02a2a;
  color: #ffffff !important;
  font-weight: 700;
}

.cmn-portal-light :is(.cmn-candidate-nav-link, .cmn-school-nav-link, .cmn-staff-nav-link):focus-visible {
  outline: 2px solid rgba(208, 42, 42, 0.95);
  outline-offset: 2px;
  box-shadow:
    inset 3px 0 0 #d02a2a,
    0 0 0 3px rgba(208, 42, 42, 0.2);
}

.cmn-portal-light :is(.cmn-candidate-nav-link, .cmn-school-nav-link, .cmn-staff-nav-link) :is(svg, svg *) {
  color: currentColor !important;
  stroke: currentColor !important;
  fill: currentColor !important;
}

/* Neon Accents - Buttons */
.cmn-portal-light :is(.cmn-primary, .cmn-btn-primary, button.cmn-primary, button.cmn-btn-primary) {
  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.cmn-portal-light :is(.cmn-primary, .cmn-btn-primary, button.cmn-primary, button.cmn-btn-primary):hover {
  background: linear-gradient(180deg, #e03737 0%, #b72424 100%) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    0 8px 20px rgba(208, 42, 42, 0.35),
    0 0 18px rgba(208, 42, 42, 0.2) !important;
  transform: translateY(-1px);
}

.cmn-portal-light :is(.cmn-primary, .cmn-btn-primary, button.cmn-primary, button.cmn-btn-primary):focus-visible {
  outline: 2px solid rgba(208, 42, 42, 0.95);
  outline-offset: 2px;
  box-shadow:
    0 0 0 3px rgba(208, 42, 42, 0.24),
    0 8px 20px rgba(208, 42, 42, 0.32) !important;
}

.cmn-portal-light :is(.cmn-btn-secondary, .cmn-ghost, button.cmn-ghost, button.cmn-btn-secondary) {
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease;
}

.cmn-portal-light :is(.cmn-btn-secondary, .cmn-ghost, button.cmn-ghost, button.cmn-btn-secondary):hover {
  border-color: rgba(208, 42, 42, 0.62) !important;
  background: rgba(208, 42, 42, 0.14) !important;
  box-shadow: 0 0 14px rgba(208, 42, 42, 0.18) !important;
  transform: translateY(-1px);
}

.cmn-portal-light :is(.cmn-btn-secondary, .cmn-ghost, button.cmn-ghost, button.cmn-btn-secondary):focus-visible {
  outline: 2px solid rgba(208, 42, 42, 0.95);
  outline-offset: 2px;
  border-color: rgba(208, 42, 42, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(208, 42, 42, 0.22) !important;
}

/* Neon Accents - Forms */
.cmn-portal-light :is(
  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='number'],
  input[type='date'],
  input[type='search'],
  input[type='tel'],
  select,
  textarea
) {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 12, 18, 0.55);
  color: #ffffff;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.cmn-portal-light :is(
  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='number'],
  input[type='date'],
  input[type='search'],
  input[type='tel'],
  select,
  textarea
)::placeholder {
  color: #a8afbd;
  opacity: 1;
}

.cmn-portal-light :is(
  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='number'],
  input[type='date'],
  input[type='search'],
  input[type='tel'],
  select,
  textarea
):focus-visible {
  border-color: rgba(208, 42, 42, 0.86);
  box-shadow: 0 0 0 3px rgba(208, 42, 42, 0.22);
  outline: 2px solid transparent;
  outline-offset: 1px;
}

/* Neon Accents - Accessibility */
@media (prefers-reduced-motion: reduce) {
  .cmn-portal-light :is(
    .cmn-dashboard-card,
    .cmn-panel-card,
    .cmn-card,
    .card,
    .tile,
    .portal-panel,
    .dashboard-tile,
    .cmn-kpi,
    .cmn-shortcut-tile,
    .cmn-support-tile,
    .cmn-support-ticket,
    .cmn-system-health-tile,
    .cmn-cover-card,
    .cmn-request-row,
    .cmn-admin-stats div,
    .cmn-admin-table div,
    .cmn-task-item,
    .cmn-mini-day,
    .cmn-list-item,
    .cmn-primary,
    .cmn-btn-primary,
    .cmn-btn-secondary,
    .cmn-ghost,
    .cmn-candidate-nav-link,
    .cmn-school-nav-link,
    .cmn-staff-nav-link,
    input,
    select,
    textarea
  ) {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .cmn-portal-light :is(
    .cmn-dashboard-card,
    .cmn-panel-card,
    .cmn-card,
    .card,
    .tile,
    .portal-panel,
    .dashboard-tile,
    .cmn-kpi,
    .cmn-shortcut-tile,
    .cmn-support-tile,
    .cmn-support-ticket,
    .cmn-system-health-tile,
    .cmn-cover-card,
    .cmn-request-row,
    .cmn-admin-stats div,
    .cmn-admin-table div,
    .cmn-task-item,
    .cmn-mini-day,
    .cmn-list-item,
    .cmn-primary,
    .cmn-btn-primary,
    .cmn-btn-secondary,
    .cmn-ghost
  ):hover {
    transform: none !important;
  }
}

/* Surface Consistency - Tables */
.cmn-portal-light :is(
  .table-wrap,
  .cmn-table-wrap,
  .cmn-staff-table-wrap,
  .cmn-marketing-table-wrap,
  .cmn-system-health-table-wrap,
  .portal-table-wrap,
  .data-table-wrap
) {
  background: rgba(22, 24, 30, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.35),
    0 0 22px rgba(208, 42, 42, 0.1) !important;
  overflow: hidden;
}

.cmn-portal-light :is(
  table,
  .cmn-table,
  .data-table,
  .portal-table,
  .cmn-approval-table,
  .cmn-marketing-table,
  .cmn-system-health-table,
  .cmn-system-health-history-table,
  .cmn-system-health-fixlog-table,
  .cmn-role-rate-table
) {
  width: 100%;
  color: #ffffff;
  border-collapse: separate;
  border-spacing: 0;
}

.cmn-portal-light :is(
  table thead th,
  .cmn-approval-table th,
  .cmn-marketing-table th,
  .cmn-system-health-table th,
  .cmn-system-health-history-table th,
  .cmn-system-health-fixlog-table th,
  .cmn-role-rate-table th
) {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.cmn-portal-light :is(
  table tbody td,
  .cmn-approval-table td,
  .cmn-marketing-table td,
  .cmn-system-health-table td,
  .cmn-system-health-history-table td,
  .cmn-system-health-fixlog-table td,
  .cmn-role-rate-table td
) {
  color: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.cmn-portal-light :is(
  table tbody tr:hover,
  .cmn-approval-table tbody tr:hover,
  .cmn-marketing-table tbody tr:hover,
  .cmn-system-health-table tbody tr:hover,
  .cmn-system-health-history-table tbody tr:hover,
  .cmn-system-health-fixlog-table tbody tr:hover,
  .cmn-role-rate-table tbody tr:hover
) {
  background: rgba(208, 42, 42, 0.08) !important;
}

.cmn-portal-light .cmn-booking-table {
  background: rgba(22, 24, 30, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.cmn-portal-light .cmn-booking-row.header {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.cmn-portal-light .cmn-booking-row:hover {
  background: rgba(208, 42, 42, 0.08) !important;
}

/* Surface Consistency - Modals */
.cmn-portal-light :is(
  .modal-backdrop,
  .cmn-modal,
  .cmn-support-feedback-modal__overlay,
  .cmn-booking-feedback-modal__overlay,
  .cmn-support-insights-modal__overlay,
  .cmn-booking-disclaimer-modal__backdrop
) {
  background: rgba(0, 0, 0, 0.65) !important;
}

.cmn-portal-light :is(
  .modal-content,
  .cmn-modal-content,
  .dialog,
  .popup,
  .cmn-support-modal-content,
  .cmn-support-feedback-modal__card,
  .cmn-booking-feedback-modal__card,
  .cmn-support-insights-modal__card,
  .cmn-booking-disclaimer-modal__card,
  .cmn-bell-panel
) {
  background: rgba(22, 24, 30, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.55),
    0 0 26px rgba(208, 42, 42, 0.12) !important;
  color: #ffffff !important;
}

.cmn-portal-light :is(
  .modal-content,
  .cmn-modal-content,
  .dialog,
  .popup,
  .cmn-support-modal-content,
  .cmn-support-feedback-modal__card,
  .cmn-booking-feedback-modal__card,
  .cmn-support-insights-modal__card,
  .cmn-booking-disclaimer-modal__card
) :is(h1, h2, h3, h4, h5, h6, .cmn-modal-title) {
  color: #ffffff !important;
}

.cmn-portal-light :is(
  .cmn-modal-header button,
  .cmn-support-insights-header button,
  .cmn-booking-disclaimer-modal__card button,
  .modal .close,
  .dialog .close
) {
  color: #ffffff !important;
}

/* Surface Consistency - Tooltips / Popovers */
.cmn-portal-light :is(
  .tooltip,
  .popover,
  .cmn-tour-popover,
  .cmn-bell-panel,
  [role='tooltip']
) {
  background: rgba(22, 24, 30, 0.92) !important;
  border: 1px solid rgba(208, 42, 42, 0.35) !important;
  color: #ffffff !important;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45) !important;
}

.cmn-portal-light :is(.tooltip, .popover, .cmn-tour-popover, [role='tooltip']) :is(p, span, small, strong) {
  color: #ffffff !important;
}

.cmn-portal-light :is(.tooltip, .popover, .cmn-tour-popover, [role='tooltip']) :is(.cmn-muted, small) {
  color: #e0e0e0 !important;
}

.cmn-portal-light [data-tooltip] {
  position: relative;
}

.cmn-portal-light [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translate(-50%, 4px);
  min-width: 120px;
  max-width: 240px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(22, 24, 30, 0.92);
  border: 1px solid rgba(208, 42, 42, 0.35);
  color: #ffffff;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 10020;
}

.cmn-portal-light [data-tooltip]:hover::after,
.cmn-portal-light [data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Surface Consistency - Badges / Pills */
.cmn-portal-light :is(
  .badge,
  .status,
  .pill,
  .cmn-pill,
  .cmn-status-chip,
  .cmn-booking-status,
  .cmn-support-ticket-badge,
  .cmn-cover-status,
  .cmn-cover-badge
) {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-radius: 999px;
  font-weight: 600;
}

.cmn-portal-light :is(
  .badge--danger,
  .cmn-pill--declined,
  .cmn-status-chip.is-declined,
  .cmn-status-chip.is-critical,
  .cmn-booking-status.is-declined
) {
  border-color: rgba(208, 42, 42, 0.55) !important;
  background: rgba(208, 42, 42, 0.14) !important;
  color: #ffffff !important;
}

.cmn-portal-light :is(
  .badge--warn,
  .cmn-support-ticket-badge.is-warning,
  .cmn-status-chip.is-warning,
  .cmn-status-chip.is-pending,
  .cmn-booking-status.is-pending
) {
  border-color: rgba(255, 193, 7, 0.55) !important;
  background: rgba(255, 193, 7, 0.12) !important;
  color: #ffffff !important;
}

.cmn-portal-light :is(
  .badge--ok,
  .cmn-status-chip.is-verified,
  .cmn-booking-status.is-approved,
  .cmn-pill--available,
  .cmn-pill--confirmed
) {
  border-color: rgba(46, 204, 113, 0.45) !important;
  background: rgba(46, 204, 113, 0.1) !important;
  color: #ffffff !important;
}

/* Surface Consistency - Empty States / Toasts */
.cmn-portal-light :is(
  .cmn-empty,
  .cmn-booking-empty,
  .empty-state,
  .placeholder,
  .cmn-register-success,
  .cmn-notification-card,
  .toast,
  .cmn-toast
) {
  background: rgba(22, 24, 30, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-left: 3px solid rgba(208, 42, 42, 0.75) !important;
  color: #ffffff !important;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35) !important;
}

.cmn-portal-light :is(
  .cmn-empty,
  .cmn-booking-empty,
  .empty-state,
  .placeholder,
  .cmn-register-success,
  .cmn-notification-card,
  .toast,
  .cmn-toast
) :is(h3, h4, strong) {
  color: #ffffff !important;
}

.cmn-portal-light :is(
  .cmn-empty,
  .cmn-booking-empty,
  .empty-state,
  .placeholder,
  .cmn-register-success,
  .cmn-notification-card,
  .toast,
  .cmn-toast
) :is(p, span, small, .cmn-muted) {
  color: #e0e0e0 !important;
}

/* Surface Consistency - Forms Final Sweep */
.cmn-portal-light :is(
  .cmn-form label,
  .cmn-status-form label,
  .cmn-request-panel label,
  .cmn-school-request-form label,
  .cmn-request-chat-form label,
  .cmn-system-health-filters label,
  .cmn-marketing-tag-picker,
  .cmn-marketing-preview-pick
) {
  color: #ffffff !important;
}

.cmn-portal-light :is(
  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='number'],
  input[type='date'],
  input[type='search'],
  input[type='tel'],
  select,
  textarea
):focus-visible {
  border-color: rgba(208, 42, 42, 0.86) !important;
  box-shadow: 0 0 0 3px rgba(208, 42, 42, 0.22) !important;
}

.cmn-portal-light :is(input, select, textarea)::placeholder {
  color: #a8afbd !important;
}

/* Surface Consistency - Accessibility */
.cmn-portal-light :is(
  a,
  button,
  input,
  select,
  textarea,
  [role='button'],
  [tabindex]
):focus-visible {
  outline: 2px solid rgba(208, 42, 42, 0.95);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cmn-portal-light * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Glass Premium Reset - Cards/Tiles/Panels */
.cmn-portal-light :is(
  .cmn-card,
  .portal-panel,
  .dashboard-tile,
  .tile,
  .card,
  .alert-card,
  .kpi-tile,
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-kpi,
  .cmn-shortcut-tile,
  .cmn-cover-card,
  .cmn-support-tile,
  .cmn-support-ticket,
  .cmn-system-health-tile,
  .cmn-request-row,
  .cmn-admin-stats div,
  .cmn-admin-table div,
  .cmn-task-item,
  .cmn-mini-day,
  .cmn-list-item
) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: rgba(18, 19, 24, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
  color: #ffffff !important;
}

.cmn-portal-light :is(
  .cmn-card,
  .portal-panel,
  .dashboard-tile,
  .tile,
  .card,
  .alert-card,
  .kpi-tile,
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-kpi,
  .cmn-shortcut-tile,
  .cmn-cover-card,
  .cmn-support-tile,
  .cmn-support-ticket,
  .cmn-system-health-tile,
  .cmn-request-row,
  .cmn-admin-stats div,
  .cmn-admin-table div,
  .cmn-task-item,
  .cmn-mini-day,
  .cmn-list-item
)::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle at 20% 20%, rgba(208, 42, 42, 0.2), transparent 60%);
  opacity: 0.55;
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}

.cmn-portal-light :is(
  .cmn-card,
  .portal-panel,
  .dashboard-tile,
  .tile,
  .card,
  .alert-card,
  .kpi-tile,
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-kpi,
  .cmn-shortcut-tile,
  .cmn-cover-card,
  .cmn-support-tile,
  .cmn-support-ticket,
  .cmn-system-health-tile,
  .cmn-request-row,
  .cmn-admin-stats div,
  .cmn-admin-table div,
  .cmn-task-item,
  .cmn-mini-day,
  .cmn-list-item
)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), transparent 35%);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

.cmn-portal-light :is(
  .cmn-card,
  .portal-panel,
  .dashboard-tile,
  .tile,
  .card,
  .alert-card,
  .kpi-tile,
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-kpi,
  .cmn-shortcut-tile,
  .cmn-cover-card,
  .cmn-support-tile,
  .cmn-support-ticket,
  .cmn-system-health-tile,
  .cmn-request-row,
  .cmn-admin-stats div,
  .cmn-admin-table div,
  .cmn-task-item,
  .cmn-mini-day,
  .cmn-list-item
) > * {
  position: relative;
  z-index: 1;
}

.cmn-portal-light :is(
  .cmn-card,
  .portal-panel,
  .dashboard-tile,
  .tile,
  .card,
  .alert-card,
  .kpi-tile,
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-kpi,
  .cmn-shortcut-tile,
  .cmn-cover-card,
  .cmn-support-tile,
  .cmn-support-ticket,
  .cmn-system-health-tile,
  .cmn-request-row,
  .cmn-admin-stats div,
  .cmn-admin-table div,
  .cmn-task-item,
  .cmn-mini-day,
  .cmn-list-item
) :is(h1, h2, h3, h4, h5, h6, p, span, li, label, small, strong, a) {
  color: inherit !important;
}

.cmn-accent {
  color: #d02a2a !important;
}

.cmn-portal-light :is(
  .cmn-card,
  .portal-panel,
  .dashboard-tile,
  .tile,
  .card,
  .alert-card,
  .kpi-tile,
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-kpi,
  .cmn-shortcut-tile,
  .cmn-cover-card,
  .cmn-support-tile,
  .cmn-support-ticket,
  .cmn-system-health-tile,
  .cmn-request-row,
  .cmn-admin-stats div,
  .cmn-admin-table div,
  .cmn-task-item,
  .cmn-mini-day,
  .cmn-list-item
) {
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.cmn-portal-light :is(
  .cmn-card,
  .portal-panel,
  .dashboard-tile,
  .tile,
  .card,
  .alert-card,
  .kpi-tile,
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-kpi,
  .cmn-shortcut-tile,
  .cmn-cover-card,
  .cmn-support-tile,
  .cmn-support-ticket,
  .cmn-system-health-tile,
  .cmn-request-row,
  .cmn-admin-stats div,
  .cmn-admin-table div,
  .cmn-task-item,
  .cmn-mini-day,
  .cmn-list-item
):hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55) !important;
}

.cmn-portal-light :is(
  .cmn-card,
  .portal-panel,
  .dashboard-tile,
  .tile,
  .card,
  .alert-card,
  .kpi-tile,
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-kpi,
  .cmn-shortcut-tile,
  .cmn-cover-card,
  .cmn-support-tile,
  .cmn-support-ticket,
  .cmn-system-health-tile,
  .cmn-request-row,
  .cmn-admin-stats div,
  .cmn-admin-table div,
  .cmn-task-item,
  .cmn-mini-day,
  .cmn-list-item
):focus-visible {
  outline: 2px solid rgba(208, 42, 42, 0.55);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cmn-portal-light :is(
    .cmn-card,
    .portal-panel,
    .dashboard-tile,
    .tile,
    .card,
    .alert-card,
    .kpi-tile,
    .cmn-dashboard-card,
    .cmn-panel-card,
    .cmn-kpi,
    .cmn-shortcut-tile,
    .cmn-cover-card,
    .cmn-support-tile,
    .cmn-support-ticket,
    .cmn-system-health-tile,
    .cmn-request-row,
    .cmn-admin-stats div,
    .cmn-admin-table div,
    .cmn-task-item,
    .cmn-mini-day,
    .cmn-list-item
  ):hover {
    transform: none !important;
    transition: none !important;
  }
}

/* Glass/Frosted Portal Theme */
:where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal, .cmn-candidate-shell, .cmn-school-shell, .cmn-staff-shell) {
  --cmn-glass-fallback-bg: rgba(22, 24, 30, 0.92);
  --cmn-glass-nav-bg: rgba(16, 18, 25, 0.84);
  --cmn-glass-nav-bg-strong: rgba(16, 18, 25, 0.9);
}

:where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal, .cmn-candidate-main, .cmn-school-main) {
  background-color: #07080d !important;
  background-image:
    radial-gradient(1600px 1000px at 88% 70%, rgba(208, 42, 42, 0.18), transparent 72%),
    radial-gradient(1100px 700px at 12% 125%, rgba(164, 26, 26, 0.18), transparent 72%),
    radial-gradient(540px 320px at 48% 36%, rgba(255, 255, 255, 0.035), transparent 72%),
    linear-gradient(160deg, #07080d 0%, #0b0d14 48%, #07080d 100%) !important;
}

:where(.cmn-candidate-shell, .cmn-school-shell, .cmn-staff-shell) {
  background: rgba(10, 12, 18, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5) !important;
}

:where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal) :is(
  .cmn-candidate-nav,
  .cmn-school-nav,
  .cmn-portal-topbar,
  .cmn-topbar-right
) {
  background: var(--cmn-glass-nav-bg) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

:where(.cmn-candidate-nav-link, .cmn-school-nav-link, .cmn-staff-nav-toggle) {
  color: rgba(231, 233, 238, 0.88) !important;
}

:where(.cmn-candidate-nav-link, .cmn-school-nav-link):hover,
:where(.cmn-candidate-nav-link, .cmn-school-nav-link).is-active,
.cmn-staff-nav-group.is-active-group .cmn-staff-nav-toggle {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #fff !important;
}

:where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal, .cmn-candidate-shell, .cmn-school-shell, .cmn-staff-shell)
:is(
  .cmn-glass,
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-modal-content,
  .cmn-support-thread,
  .cmn-support-sidebar,
  .cmn-kpi,
  .cmn-shortcut-tile,
  .cmn-cover-card,
  .cmn-support-ticket,
  .cmn-support-tile,
  .cmn-system-health-tile,
  .cmn-request-row,
  .cmn-filter-panel,
  .cmn-booking-filters,
  .cmn-booking-filters .cmn-filter,
  .cmn-booking-table,
  .cmn-approval-table,
  .cmn-support-footer,
  .cmn-bell-panel,
  .cmn-notification-card,
  .cmn-task-item,
  .cmn-mini-day,
  .cmn-list-item
) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--cmn-glass-fallback-bg) !important;
  border: 1px solid var(--cmn-glass-border) !important;
  box-shadow: var(--cmn-glass-shadow) !important;
}

:where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal, .cmn-candidate-shell, .cmn-school-shell, .cmn-staff-shell)
:is(
  .cmn-glass,
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-modal-content,
  .cmn-support-thread,
  .cmn-support-sidebar,
  .cmn-kpi,
  .cmn-shortcut-tile,
  .cmn-cover-card,
  .cmn-support-ticket,
  .cmn-support-tile,
  .cmn-system-health-tile,
  .cmn-request-row,
  .cmn-filter-panel,
  .cmn-booking-filters,
  .cmn-booking-filters .cmn-filter,
  .cmn-booking-table,
  .cmn-approval-table,
  .cmn-support-footer,
  .cmn-bell-panel,
  .cmn-notification-card,
  .cmn-task-item,
  .cmn-mini-day,
  .cmn-list-item
)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cmn-glass-highlight);
  opacity: 0.32;
  pointer-events: none;
  z-index: 0;
}

:where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal, .cmn-candidate-shell, .cmn-school-shell, .cmn-staff-shell)
:is(
  .cmn-glass,
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-modal-content,
  .cmn-support-thread,
  .cmn-support-sidebar,
  .cmn-kpi,
  .cmn-shortcut-tile,
  .cmn-cover-card,
  .cmn-support-ticket,
  .cmn-support-tile,
  .cmn-system-health-tile,
  .cmn-request-row,
  .cmn-filter-panel,
  .cmn-booking-filters,
  .cmn-booking-filters .cmn-filter,
  .cmn-booking-table,
  .cmn-approval-table,
  .cmn-support-footer,
  .cmn-bell-panel,
  .cmn-notification-card,
  .cmn-task-item,
  .cmn-mini-day,
  .cmn-list-item
)::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
  z-index: 0;
}

:where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal, .cmn-candidate-shell, .cmn-school-shell, .cmn-staff-shell)
:is(
  .cmn-glass,
  .cmn-dashboard-card,
  .cmn-panel-card,
  .cmn-modal-content,
  .cmn-support-thread,
  .cmn-support-sidebar,
  .cmn-kpi,
  .cmn-shortcut-tile,
  .cmn-cover-card,
  .cmn-support-ticket,
  .cmn-support-tile,
  .cmn-system-health-tile,
  .cmn-request-row,
  .cmn-filter-panel,
  .cmn-booking-filters,
  .cmn-booking-filters .cmn-filter,
  .cmn-booking-table,
  .cmn-approval-table,
  .cmn-support-footer,
  .cmn-bell-panel,
  .cmn-notification-card,
  .cmn-task-item,
  .cmn-mini-day,
  .cmn-list-item
) > * {
  position: relative;
  z-index: 1;
}

:where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal) :is(
  .cmn-booking-row,
  .cmn-approval-row,
  .cmn-support-ticket,
  .cmn-bell-item
) {
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

:where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal) :is(
  .cmn-booking-row:hover,
  .cmn-approval-row:hover,
  .cmn-support-ticket:hover,
  .cmn-bell-item:hover
) {
  background: rgba(255, 255, 255, 0.055) !important;
}

:where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal) .cmn-modal-overlay {
  background: rgba(4, 6, 10, 0.76) !important;
}

:where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal) :is(
  .cmn-primary,
  .cmn-btn-primary,
  button.cmn-primary,
  button.cmn-btn-primary,
  a.cmn-primary,
  a.cmn-btn-primary
) {
  background: linear-gradient(180deg, #e03d3d 0%, #b81f1f 100%) !important;
  border: 1px solid rgba(112, 16, 16, 0.75) !important;
  box-shadow: 0 10px 24px rgba(208, 42, 42, 0.38) !important;
  color: #fff !important;
}

:where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal) :is(
  .cmn-ghost,
  .cmn-btn-ghost,
  .cmn-btn-secondary,
  button.cmn-ghost,
  button.cmn-btn-secondary,
  a.cmn-ghost,
  a.cmn-btn-secondary
) {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: var(--cmn-text) !important;
}

:where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal) :is(
  .cmn-filter input,
  .cmn-filter select,
  input:not([type='checkbox']):not([type='radio']),
  textarea,
  select
) {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--cmn-text);
}

:where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal) :is(
  button,
  a,
  input,
  select,
  textarea,
  .cmn-primary,
  .cmn-ghost,
  .cmn-btn-primary,
  .cmn-btn-secondary,
  .cmn-btn-ghost
):focus-visible {
  outline: 2px solid rgba(208, 42, 42, 0.8);
  outline-offset: 2px;
}

:where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal) .cmn-status-chip {
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: saturate(1.1);
  -webkit-backdrop-filter: saturate(1.1);
}

:where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal) .cmn-status-chip.is-verified {
  background: rgba(38, 128, 87, 0.24) !important;
  border-color: rgba(122, 255, 197, 0.28) !important;
  color: #d6ffeb !important;
}

:where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal) .cmn-status-chip.is-pending {
  background: rgba(208, 42, 42, 0.2) !important;
  border-color: rgba(242, 113, 113, 0.34) !important;
  color: #ffe1e1 !important;
}

:where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal) .cmn-status-chip.is-declined {
  background: rgba(171, 19, 19, 0.26) !important;
  border-color: rgba(255, 132, 132, 0.36) !important;
  color: #ffd1d1 !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal, .cmn-candidate-shell, .cmn-school-shell, .cmn-staff-shell)
  :is(
    .cmn-glass,
    .cmn-dashboard-card,
    .cmn-panel-card,
    .cmn-modal-content,
    .cmn-support-thread,
    .cmn-support-sidebar,
    .cmn-kpi,
    .cmn-shortcut-tile,
    .cmn-cover-card,
    .cmn-support-ticket,
    .cmn-support-tile,
    .cmn-system-health-tile,
    .cmn-request-row,
    .cmn-filter-panel,
    .cmn-booking-filters,
    .cmn-booking-filters .cmn-filter,
    .cmn-booking-table,
    .cmn-approval-table,
    .cmn-support-footer,
    .cmn-bell-panel,
    .cmn-notification-card,
    .cmn-task-item,
    .cmn-mini-day,
    .cmn-list-item
  ) {
    background: var(--cmn-glass-bg) !important;
    backdrop-filter: blur(var(--cmn-glass-blur)) saturate(1.15);
    -webkit-backdrop-filter: blur(var(--cmn-glass-blur)) saturate(1.15);
  }

  :where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal) :is(
    .cmn-candidate-nav,
    .cmn-school-nav,
    .cmn-portal-topbar,
    .cmn-topbar-right
  ) {
    background: var(--cmn-glass-nav-bg-strong) !important;
    backdrop-filter: blur(10px) saturate(1.08);
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
  }

  :where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal) .cmn-modal-overlay {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal, .cmn-candidate-shell, .cmn-school-shell, .cmn-staff-shell)
  :is(
    .cmn-glass,
    .cmn-dashboard-card,
    .cmn-panel-card,
    .cmn-modal-content,
    .cmn-support-thread,
    .cmn-support-sidebar,
    .cmn-kpi,
    .cmn-shortcut-tile,
    .cmn-cover-card,
    .cmn-support-ticket,
    .cmn-support-tile,
    .cmn-system-health-tile,
    .cmn-request-row,
    .cmn-filter-panel,
    .cmn-booking-filters,
    .cmn-booking-filters .cmn-filter,
    .cmn-booking-table,
    .cmn-approval-table,
    .cmn-support-footer,
    .cmn-bell-panel,
    .cmn-notification-card,
    .cmn-task-item,
    .cmn-mini-day,
    .cmn-list-item
  ) {
    background: var(--cmn-glass-fallback-bg) !important;
  }
}

@media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) {
  :where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal, .cmn-candidate-shell, .cmn-school-shell, .cmn-staff-shell) {
    --cmn-glass-bg: rgba(24, 26, 34, 0.86);
    --cmn-glass-bg-strong: rgba(24, 26, 34, 0.92);
    --cmn-glass-blur: 8px;
  }

  :where(.cmn-portal, .cmn-candidate-portal, .cmn-school-portal, .cmn-candidate-shell, .cmn-school-shell, .cmn-staff-shell)
  :is(
    .cmn-glass,
    .cmn-dashboard-card,
    .cmn-panel-card,
    .cmn-modal-content,
    .cmn-support-thread,
    .cmn-support-sidebar,
    .cmn-kpi,
    .cmn-shortcut-tile,
    .cmn-cover-card,
    .cmn-support-ticket,
    .cmn-support-tile,
    .cmn-system-health-tile,
    .cmn-request-row,
    .cmn-filter-panel,
    .cmn-booking-filters,
    .cmn-booking-filters .cmn-filter,
    .cmn-booking-table,
    .cmn-approval-table,
    .cmn-support-footer,
    .cmn-bell-panel,
    .cmn-notification-card,
    .cmn-task-item,
    .cmn-mini-day,
    .cmn-list-item
  )::before {
    opacity: 0.2;
  }
}

/* Portal dropdown readability override:
 * match form surfaces while keeping red text for readability.
 */
body.cmn-portal-page :where(
  .cmn-portal,
  .cmn-candidate-portal,
  .cmn-school-portal,
  .cmn-candidate-shell,
  .cmn-school-shell,
  .cmn-staff-shell
) select {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--cmn-text) !important;
  -webkit-text-fill-color: var(--cmn-text) !important;
  border: 1px solid var(--cmn-border) !important;
  color-scheme: dark;
}

body.cmn-portal-page :where(
  .cmn-portal,
  .cmn-candidate-portal,
  .cmn-school-portal,
  .cmn-candidate-shell,
  .cmn-school-shell,
  .cmn-staff-shell
) select:focus-visible {
  border-color: rgba(208, 42, 42, 0.78) !important;
  box-shadow: 0 0 0 3px rgba(208, 42, 42, 0.18) !important;
}

body.cmn-portal-page :where(
  .cmn-portal,
  .cmn-candidate-portal,
  .cmn-school-portal,
  .cmn-candidate-shell,
  .cmn-school-shell,
  .cmn-staff-shell
) select option,
body.cmn-portal-page :where(
  .cmn-portal,
  .cmn-candidate-portal,
  .cmn-school-portal,
  .cmn-candidate-shell,
  .cmn-school-shell,
  .cmn-staff-shell
) select optgroup {
  background: #10141b !important;
  color: var(--cmn-text) !important;
}

body.cmn-portal-page :where(
  .cmn-portal,
  .cmn-candidate-portal,
  .cmn-school-portal,
  .cmn-candidate-shell,
  .cmn-school-shell,
  .cmn-staff-shell
) select option:disabled {
  color: var(--cmn-muted) !important;
}

/* Keep bell dropdown fully opaque (no transparent/glass effect). */
body.cmn-portal-page .cmn-bell-panel {
  background: #0b0c10 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.cmn-portal-page .cmn-bell-panel::before,
body.cmn-portal-page .cmn-bell-panel::after {
  opacity: 0 !important;
}

body.cmn-portal-page .cmn-bell-item {
  background: #11141c !important;
}

body.cmn-portal-page .cmn-bell-item.is-unread {
  background: #221014 !important;
}

/* Mobile usability guardrails for portal support/candidate views:
 * - avoid fixed-height clipping on small screens
 * - keep support thread readable and scrollable
 * - preserve clear action buttons and tap targets
 */
@media (max-width: 900px) {
  html.cmn-portal-page,
  body.cmn-portal-page {
    height: auto !important;
    min-height: 100%;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body.cmn-portal-page.cmn-mobile-nav-open {
    overflow: hidden !important;
  }

  body.cmn-portal-page #page,
  body.cmn-portal-page #content,
  body.cmn-portal-page .site,
  body.cmn-portal-page .site-content {
    height: auto !important;
    min-height: 100%;
    overflow: visible !important;
  }

  body.cmn-portal-page .cmn-portal {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
  }

  body.cmn-portal-page .cmn-portal-topbar {
    position: sticky;
    top: 0;
    z-index: 9000;
    flex-wrap: wrap;
    gap: 8px;
  }

  body.cmn-portal-page .cmn-mobile-nav-toggle {
    display: inline-flex;
  }

  body.cmn-portal-page.cmn-mobile-nav-open #cmn-mobile-nav-overlay {
    display: block;
  }

  body.cmn-portal-page .cmn-topbar-right {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
  }

  body.cmn-portal-page :is(.cmn-candidate-shell, .cmn-school-shell, .cmn-staff-shell) {
    height: auto !important;
    min-height: calc(100vh - 72px);
    overflow: visible !important;
    grid-template-columns: 1fr;
  }

  body.cmn-portal-page :is(.cmn-candidate-nav, .cmn-school-nav) {
    position: fixed;
    top: 0;
    left: 0;
    width: min(280px, 86vw);
    height: 100vh;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    z-index: 9200;
    box-shadow: 18px 0 40px rgba(0, 0, 0, 0.45);
  }

  body.cmn-portal-page.cmn-mobile-nav-open :is(.cmn-candidate-nav, .cmn-school-nav) {
    transform: translateX(0);
  }

  body.cmn-portal-page :is(.cmn-candidate-nav, .cmn-school-nav, .cmn-staff-nav) {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.cmn-portal-page :is(.cmn-candidate-main, .cmn-school-main, .cmn-staff-main) {
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
    padding: 16px !important;
  }

  body.cmn-portal-page .cmn-profile-progress {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  body.cmn-portal-page .cmn-profile-progress-actions {
    width: 100%;
    justify-content: flex-start;
  }

  body.cmn-portal-page :is(
    .table-wrap,
    .cmn-table-wrap,
    .cmn-staff-table-wrap,
    .cmn-marketing-table-wrap,
    .cmn-system-health-table-wrap,
    .portal-table-wrap,
    .data-table-wrap
  ) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.cmn-portal-page :is(
    table,
    .cmn-table,
    .data-table,
    .portal-table,
    .cmn-approval-table,
    .cmn-marketing-table,
    .cmn-system-health-table,
    .cmn-system-health-history-table,
    .cmn-system-health-fixlog-table,
    .cmn-role-rate-table
  ) {
    min-width: 640px;
  }

  body.cmn-portal-page :is(button, .cmn-primary, .cmn-ghost, input, select, textarea) {
    min-height: 42px;
  }

  body.cmn-portal-page .cmn-btn-mini {
    min-height: 34px;
  }

  body.cmn-portal-page .cmn-support-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.cmn-portal-page .cmn-support-body {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  body.cmn-portal-page :is(.cmn-support-sidebar, .cmn-support-thread) {
    height: auto !important;
    min-height: 0 !important;
  }

  body.cmn-portal-page .cmn-support-list {
    max-height: min(38vh, 360px);
  }

  body.cmn-portal-page .cmn-support-ticket {
    max-height: none;
    min-height: 74px;
    padding: 10px 12px;
  }

  body.cmn-portal-page .cmn-support-thread-header {
    align-items: flex-start;
    gap: 10px;
  }

  body.cmn-portal-page .cmn-support-thread-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  body.cmn-portal-page .cmn-support-thread-actions :is(.cmn-ghost, .cmn-primary, .cmn-btn-mini) {
    flex: 1 1 calc(50% - 6px);
    min-height: 36px;
  }

  body.cmn-portal-page .cmn-support-messages {
    min-height: 220px;
    max-height: min(48vh, 420px);
  }

  body.cmn-portal-page .cmn-support-bubble {
    max-width: 100%;
  }

  body.cmn-portal-page .cmn-support-reply textarea {
    min-height: 110px;
  }

  body.cmn-portal-page :is(.cmn-support-feedback-modal__card, .cmn-booking-feedback-modal__card) {
    width: calc(100vw - 14px);
    max-height: calc(100vh - 14px);
  }
}

@media (max-width: 560px) {
  body.cmn-portal-page .cmn-support-dashboard {
    grid-template-columns: 1fr;
  }

  body.cmn-portal-page .cmn-support-thread-actions :is(.cmn-ghost, .cmn-primary, .cmn-btn-mini) {
    flex: 1 1 100%;
  }

  body.cmn-portal-page :is(.cmn-candidate-main, .cmn-school-main, .cmn-staff-main) {
    padding: 14px !important;
  }
}