/**
 * Course Explorer – Public Styles
 *
 * CSS Custom Properties can be overridden via the admin panel.
 * The plugin injects a <style> block in wp_head with tenant-specific values.
 */

/* ============================================================
   1. Custom Properties (defaults)
   ============================================================ */
:root {
  --ce-primary: #00a9cb;
  --ce-primary-hover: #008da8;
  --ce-primary-light: #e6f7fa;
  --ce-secondary: #00294b;
  --ce-success: #059669;
  --ce-success-light: #ecfdf5;
  --ce-error: #dc2626;
  --ce-error-light: #fef2f2;
  --ce-warning: #d97706;
  --ce-warning-light: #fffbeb;
  --ce-border: #e5e7eb;
  --ce-text: #676a70;
  --ce-text-secondary: #9ca3af;
  --ce-bg: #ffffff;
  --ce-bg-subtle: #f8f9fa;
  --ce-radius: 6px;
  --ce-radius-lg: 8px;
  --ce-radius-btn: 0px;
  --ce-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --ce-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --ce-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --ce-font: inherit;
  --ce-transition: 150ms ease;
  --ce-sidebar-bg: #104550;
  --ce-sidebar-text: #ffffff;
}

/* ============================================================
   2. Base wrapper
   ============================================================ */
.ce-wrap {
  font-family: var(--ce-font);
  color: var(--ce-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ce-wrap *,
.ce-wrap *::before,
.ce-wrap *::after {
  box-sizing: border-box;
}

/* ============================================================
   2b. Theme reset – override BeTheme global form styles
   ============================================================ */
.ce-wrap input[type="text"],
.ce-wrap input[type="email"],
.ce-wrap input[type="password"],
.ce-wrap input[type="tel"],
.ce-wrap input[type="url"],
.ce-wrap input[type="number"],
.ce-wrap input[type="date"],
.ce-wrap input[type="search"],
.ce-wrap select,
.ce-wrap textarea {
  background: var(--ce-bg-subtle) !important;
  background-color: var(--ce-bg-subtle) !important;
  border: 1px solid var(--ce-border) !important;
  border-radius: var(--ce-radius) !important;
  padding: 10px 14px !important;
  font-size: 0.938rem !important;
  font-family: var(--ce-font) !important;
  color: var(--ce-text) !important;
  line-height: 1.5 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  transition:
    border-color var(--ce-transition),
    box-shadow var(--ce-transition) !important;
}

.ce-wrap input::placeholder,
.ce-wrap textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

.ce-wrap input[type="text"]:focus,
.ce-wrap input[type="email"]:focus,
.ce-wrap input[type="password"]:focus,
.ce-wrap input[type="tel"]:focus,
.ce-wrap input[type="url"]:focus,
.ce-wrap input[type="number"]:focus,
.ce-wrap input[type="date"]:focus,
.ce-wrap input[type="search"]:focus,
.ce-wrap select:focus,
.ce-wrap textarea:focus {
  outline: none !important;
  border-color: var(--ce-primary) !important;
  box-shadow: 0 0 0 3px var(--ce-primary-light) !important;
  background: #fff !important;
  background-color: #fff !important;
}

.ce-wrap button,
.ce-wrap input[type="submit"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--ce-font) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: 0 !important;
  line-height: 1.5 !important;
}

/* ============================================================
   3. Card
   ============================================================ */
.ce-wrap .ce-card {
  background: var(--ce-bg);
  border: 1px solid var(--ce-border);
  border-radius: var(--ce-radius-lg);
  box-shadow: var(--ce-shadow-md);
  padding: 36px;
  max-width: 480px;
  margin: 40px auto;
}

.ce-wrap .ce-card--register {
  margin-top: 16px;
}

.ce-wrap .ce-card--wide {
  max-width: 800px;
}

.ce-wrap .ce-card--full {
  max-width: 100%;
}

.ce-wrap .ce-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ce-secondary);
  margin: 0 0 6px;
  line-height: 1.3;
}

.ce-wrap .ce-card__subtitle {
  font-size: 0.938rem;
  color: var(--ce-text-secondary);
  margin: 0 0 28px;
}

/* ============================================================
   4. Form
   ============================================================ */
.ce-wrap .ce-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ce-wrap .ce-form__group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ce-wrap .ce-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 540px) {
  .ce-wrap .ce-form__row {
    grid-template-columns: 1fr;
  }
}

.ce-wrap .ce-form__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ce-text);
}

.ce-wrap .ce-form__label--required::after {
  content: " *";
  color: var(--ce-error);
  font-weight: 400;
  margin-left: 3px;
}

.ce-wrap .ce-form__radios,
.ce-wrap .ce-form__checkboxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ce-wrap .ce-form__radio,
.ce-wrap .ce-form__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.938rem;
  color: var(--ce-text);
  cursor: pointer;
}

.ce-wrap .ce-form__radio input,
.ce-wrap .ce-form__checkbox input {
  width: auto !important;
  margin: 0 !important;
  accent-color: var(--ce-primary);
}

.ce-wrap .ce-form__static {
  font-size: 0.875rem;
  color: var(--ce-text-secondary);
  line-height: 1.6;
}

.ce-wrap .ce-form__static a {
  color: var(--ce-primary);
  text-decoration: underline;
}

.ce-wrap .ce-form__input,
.ce-wrap .ce-form select {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  font-size: 0.938rem;
  line-height: 1.5;
  color: var(--ce-text);
  background: var(--ce-bg-subtle);
  border: 1px solid var(--ce-border);
  border-radius: var(--ce-radius);
  transition:
    border-color var(--ce-transition),
    box-shadow var(--ce-transition);
  font-family: var(--ce-font);
  appearance: none;
}

.ce-wrap .ce-password-field {
  position: relative;
}

.ce-wrap .ce-password-field .ce-form__input {
  padding-right: 48px;
}

.ce-wrap .ce-password-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ce-text-secondary);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    color var(--ce-transition),
    background var(--ce-transition),
    box-shadow var(--ce-transition);
}

.ce-wrap .ce-password-toggle:hover {
  color: var(--ce-text);
  background: rgba(15, 23, 42, 0.06);
}

.ce-wrap .ce-password-toggle:focus {
  outline: none;
  color: var(--ce-primary);
  box-shadow: 0 0 0 3px var(--ce-primary-light);
}

.ce-wrap .ce-password-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.ce-wrap .ce-form__input:focus,
.ce-wrap .ce-form select:focus {
  outline: none;
  border-color: var(--ce-primary);
  box-shadow: 0 0 0 3px var(--ce-primary-light);
}

.ce-wrap .ce-form__input:disabled,
.ce-wrap .ce-form select:disabled {
  background: var(--ce-bg-subtle);
  color: var(--ce-text-secondary);
  cursor: not-allowed;
}

.ce-wrap .ce-form__input[readonly] {
  background: #fff;
  color: var(--ce-text);
}

.ce-wrap .ce-form__input.ce-form__input--error,
.ce-wrap .ce-form select.ce-form__input--error,
.ce-wrap .ce-form__input[aria-invalid="true"],
.ce-wrap .ce-form select[aria-invalid="true"] {
  border-color: var(--ce-error) !important;
  box-shadow: inset 0 0 0 1px var(--ce-error);
}

.ce-wrap .ce-form__input.ce-form__input--error:focus,
.ce-wrap .ce-form select.ce-form__input--error:focus,
.ce-wrap .ce-form__input[aria-invalid="true"]:focus,
.ce-wrap .ce-form select[aria-invalid="true"]:focus {
  border-color: var(--ce-error) !important;
  box-shadow: 0 0 0 3px var(--ce-error-light) !important;
}

.ce-wrap .ce-form__error {
  font-size: 0.813rem !important;
  line-height: 1.45 !important;
  color: var(--ce-error) !important;
  margin: 2px 0 0 !important;
}

.ce-wrap .ce-form[data-ce-custom-validation="1"] .ce-form__input:invalid,
.ce-wrap .ce-form[data-ce-custom-validation="1"] .ce-form select:invalid {
  box-shadow: none;
}

.ce-modal .ce-form__input--error {
  border-color: var(--ce-error) !important;
}

.ce-modal .ce-form__input--error:focus {
  border-color: var(--ce-error) !important;
  box-shadow: 0 0 0 3px var(--ce-error-light) !important;
}

.ce-modal .ce-form__error {
  font-size: 0.813rem !important;
  line-height: 1.45 !important;
  color: var(--ce-error) !important;
  margin: 0 !important;
}

.ce-wrap .ce-form__hint {
  font-size: 0.813rem;
  color: var(--ce-text-secondary);
  margin: 0;
}

.ce-wrap .ce-auto-username__status {
  font-size: 0.813rem;
  color: var(--ce-text-secondary);
  margin: 4px 0 0;
}

.ce-wrap .ce-auto-username__spinner-host {
  position: relative;
}

.ce-wrap .ce-auto-username__spinner-host .ce-form__input,
.ce-wrap .ce-auto-username__spinner-host .fjs-input {
  padding-right: 42px !important;
}

.ce-wrap .ce-auto-username__spinner {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid var(--ce-border);
  border-top-color: var(--ce-primary);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  animation: ce-auto-username-spin 0.7s linear infinite;
  transition: opacity 160ms ease;
}

.ce-wrap .ce-auto-username__spinner--visible {
  opacity: 1;
}

.ce-wrap .ce-auto-username--loading .ce-auto-username__status {
  color: var(--ce-text-secondary);
}

.ce-wrap .ce-auto-username--error .ce-auto-username__status {
  color: var(--ce-error);
}

@keyframes ce-auto-username-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.ce-wrap .ce-form__group--checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ce-wrap .ce-form__checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--ce-text);
  cursor: pointer;
  line-height: 1.4;
}

.ce-wrap .ce-form__checkbox-label input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.ce-wrap .ce-form__checkbox-label a {
  color: var(--ce-primary);
  text-decoration: underline;
}

.ce-wrap textarea.ce-form__input {
  resize: vertical;
  min-height: 80px;
}

/* ============================================================
   5. Buttons
   ============================================================ */
.ce-wrap .ce-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px !important;
  font-size: 0.938rem !important;
  font-weight: 600;
  line-height: 1.5 !important;
  border: none !important;
  border-radius: var(--ce-radius-btn) !important;
  cursor: pointer;
  transition:
    background var(--ce-transition),
    box-shadow var(--ce-transition),
    transform var(--ce-transition);
  font-family: var(--ce-font);
  text-decoration: none;
  text-shadow: none !important;
  box-shadow: none !important;
  height: auto !important;
  width: auto;
}

.ce-wrap .ce-btn:active {
  transform: translateY(1px);
}

.ce-wrap .ce-btn--primary {
  background: var(--ce-primary) !important;
  color: #fff !important;
}

.ce-wrap .ce-btn--primary:hover,
.ce-wrap .ce-btn--primary:focus {
  background: var(--ce-primary-hover) !important;
  box-shadow: 0 4px 12px rgba(0, 169, 203, 0.3) !important;
  color: #fff !important;
}

.ce-wrap .ce-btn--secondary {
  background: transparent !important;
  color: var(--ce-text) !important;
  border: 1px solid var(--ce-border) !important;
}

.ce-wrap .ce-btn--secondary:hover,
.ce-wrap .ce-btn--secondary:focus {
  background: var(--ce-bg-subtle) !important;
  color: var(--ce-text) !important;
}

.ce-wrap .ce-btn--danger {
  background: var(--ce-error) !important;
  color: #fff !important;
}

.ce-wrap .ce-btn--danger:hover,
.ce-wrap .ce-btn--danger:focus {
  background: #b91c1c !important;
  color: #fff !important;
}

.ce-wrap .ce-btn--success {
  background: #16a34a !important;
  color: #fff !important;
}

.ce-wrap .ce-btn--success:hover,
.ce-wrap .ce-btn--success:focus {
  background: #15803d !important;
  color: #fff !important;
}

.ce-wrap .ce-btn--danger-outline {
  background: transparent !important;
  color: var(--ce-error, #dc2626) !important;
  border: 1px solid var(--ce-error, #dc2626) !important;
}

.ce-wrap .ce-btn--danger-outline:hover,
.ce-wrap .ce-btn--danger-outline:focus {
  background: var(--ce-error, #dc2626) !important;
  color: #fff !important;
}

.ce-wrap .ce-btn--sm {
  padding: 6px 14px !important;
  font-size: 0.813rem !important;
}

.ce-wrap .ce-btn--block {
  width: 100% !important;
}

.ce-wrap .ce-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Loading state */
.ce-wrap .ce-btn--loading {
  position: relative;
  color: transparent !important;
}

.ce-wrap .ce-btn--loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ce-spin 0.6s linear infinite;
}

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

/* ============================================================
   6. Alerts
   ============================================================ */
.ce-wrap .ce-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--ce-radius);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.ce-wrap .ce-alert svg {
  flex-shrink: 0;
}

.ce-wrap .ce-alert span {
  flex: 1;
}

.ce-wrap .ce-alert__dismiss {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  color: inherit;
  opacity: 0.6;
  transition: opacity var(--ce-transition);
}

.ce-wrap .ce-alert__dismiss:hover {
  opacity: 1;
}

.ce-wrap .ce-alert__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: currentColor;
  opacity: 0.25;
  transform-origin: left center;
  animation: ce-alert-shrink 6s linear forwards;
}

.ce-wrap .ce-alert:hover .ce-alert__progress {
  animation-play-state: paused;
}

@keyframes ce-alert-shrink {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

.ce-wrap .ce-alert--success {
  background: var(--ce-success-light);
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.ce-wrap .ce-alert--error {
  background: var(--ce-error-light);
  border: 1px solid #fecaca;
  color: #991b1b;
}

.ce-wrap .ce-alert--warning {
  background: var(--ce-warning-light);
  border: 1px solid #fde68a;
  color: #92400e;
}

.ce-wrap .ce-alert--info {
  background: var(--ce-primary-light);
  border: 1px solid color-mix(in srgb, var(--ce-primary) 30%, transparent);
  color: var(--ce-primary-hover);
}

.ce-wrap .ce-alert__list {
  margin: 8px 0 0;
  padding-left: 20px;
}

.ce-wrap .ce-alert__list li {
  margin-bottom: 2px;
}

.ce-course-detail__booking-fallback-action {
  margin-top: 14px;
}

.ce-course-detail__auth-gate {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0;
  max-width: 940px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ce-secondary) 12%, white);
  box-shadow: 0 24px 60px rgba(0, 41, 75, 0.14);
  background:
    radial-gradient(circle at top left, rgba(0, 169, 203, 0.16), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, #f6fbfd 52%, #eef7fb 100%);
}

.ce-course-detail__auth-gate::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--ce-secondary) 0%, var(--ce-primary) 100%);
}

.ce-course-detail__auth-gate-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
  align-items: stretch;
}

.ce-course-detail__auth-gate-main {
  position: relative;
  padding: 38px 38px 34px;
}

.ce-course-detail__auth-gate-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 41, 75, 0.08);
  color: var(--ce-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ce-course-detail__auth-gate-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ce-primary);
  box-shadow: 0 0 0 6px rgba(0, 169, 203, 0.14);
}

.ce-course-detail__auth-gate .ce-card__title {
  max-width: 16ch;
  margin-bottom: 10px;
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  line-height: 1.1;
}

.ce-course-detail__auth-gate .ce-card__subtitle {
  max-width: 56ch;
  margin-bottom: 24px;
  font-size: 1rem;
  line-height: 1.65;
}

.ce-course-detail__auth-gate-steps {
  display: grid;
  gap: 14px;
  margin-bottom: 28px;
}

.ce-course-detail__auth-gate-step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid rgba(0, 41, 75, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 10px 24px rgba(0, 41, 75, 0.06);
  backdrop-filter: blur(8px);
}

.ce-course-detail__auth-gate-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ce-secondary) 0%, #0a4a78 100%);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(0, 41, 75, 0.2);
}

.ce-course-detail__auth-gate-step strong,
.ce-course-detail__auth-gate-course-title {
  display: block;
  color: var(--ce-secondary);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.ce-course-detail__auth-gate-step span,
.ce-course-detail__auth-gate-course-meta span,
.ce-course-detail__auth-gate-note {
  display: block;
  margin-top: 4px;
  color: var(--ce-text-secondary);
  line-height: 1.55;
}

.ce-course-detail__auth-gate-actions {
  margin-top: 0;
  gap: 14px;
  flex-wrap: wrap;
}

.ce-course-detail__auth-gate-course {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 38px 30px 34px;
  background: linear-gradient(180deg, rgba(0, 41, 75, 0.96) 0%, rgba(4, 64, 106, 0.96) 100%);
  color: #fff;
}

.ce-course-detail__auth-gate-course::before {
  content: "";
  width: 72px;
  height: 1px;
  background: rgba(255, 255, 255, 0.24);
}

.ce-course-detail__auth-gate-course-label {
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ce-course-detail__auth-gate-course-title {
  color: #fff;
  font-size: 1.15rem;
}

.ce-course-detail__auth-gate-course-meta {
  display: grid;
  gap: 10px;
}

.ce-course-detail__auth-gate-course-meta span {
  margin-top: 0;
  padding-left: 16px;
  position: relative;
  color: rgba(255, 255, 255, 0.78);
}

.ce-course-detail__auth-gate-course-meta span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ce-primary);
}

.ce-course-detail__auth-gate-note {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 820px) {
  .ce-course-detail__auth-gate-layout {
    grid-template-columns: 1fr;
  }

  .ce-course-detail__auth-gate-main,
  .ce-course-detail__auth-gate-course {
    padding: 28px 24px;
  }
}

@media (max-width: 560px) {
  .ce-course-detail__auth-gate .ce-card__title {
    max-width: none;
    font-size: 1.65rem;
  }

  .ce-course-detail__auth-gate-step {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 13px;
  }

  .ce-course-detail__auth-gate-step-no {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    font-size: 0.88rem;
  }

  .ce-course-detail__auth-gate-actions .ce-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   7. Navigation links (below auth forms)
   ============================================================ */
.ce-wrap .ce-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--ce-border);
}

.ce-wrap .ce-nav__link {
  color: var(--ce-primary);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color var(--ce-transition);
}

.ce-wrap .ce-nav__link:hover {
  color: var(--ce-primary-hover);
  text-decoration: underline;
}

/* ============================================================
   8. User Portal – layout (sidebar + main)
   ============================================================ */

/* Tab fade-in transition */
.ce-tab-enter-active {
  animation: ce-tab-in 0.18s ease-out;
}
.ce-tab-leave-active {
  animation: ce-tab-out 0.1s ease-in forwards;
}
@keyframes ce-tab-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ce-tab-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Reserve space before Vue hydrates so content below the portal
   doesn't jump when the JS bundle mounts. :empty matches only
   while the div has no child nodes (pre-mount). */
#ce-portal-app:empty {
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pure-CSS spinner shown before Vue mounts – no JS required.
   Disappears automatically once Vue adds child nodes (:empty stops matching). */
#ce-portal-app:empty::after {
  content: "" !important;
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 3px solid var(--ce-border, #e5e7eb) !important;
  border-top-color: var(--ce-primary, #2563eb) !important;
  box-sizing: border-box !important;
  animation: ce-portal-spin 0.75s linear infinite !important;
}

.ce-wrap .ce-portal {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 500px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  background: transparent;
  position: relative;
  gap: 0;
  padding-top: 16px;
}

/* --- Sidebar --- */
.ce-wrap .ce-portal__sidebar {
  background: transparent;
  color: var(--ce-text);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  border-right: 1px solid var(--ce-border);
  position: sticky;
  top: 0;
  max-height: 100vh;
  align-self: start;
}

/* User card at top of sidebar */
.ce-wrap .ce-portal__user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 20px;
  border-bottom: 1px solid var(--ce-border);
  margin-bottom: 8px;
}

.ce-wrap .ce-portal__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ce-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  user-select: none;
}

.ce-wrap .ce-portal__user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ce-wrap .ce-portal__user-name {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ce-secondary);
}

.ce-wrap .ce-portal__user-email {
  font-size: 0.75rem;
  color: var(--ce-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Navigation */
.ce-wrap .ce-portal__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  gap: 1px;
}

.ce-wrap .ce-portal__nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ce-text);
  text-decoration: none;
  transition: all var(--ce-transition);
  cursor: pointer;
  border: none;
  border-left: 3px solid transparent;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--ce-font);
  line-height: 1.4;
}

.ce-wrap .ce-portal__nav-item:hover {
  background: var(--ce-bg-subtle);
  color: var(--ce-primary);
}

.ce-wrap .ce-portal__nav-item--active {
  background: var(--ce-primary-light) !important;
  color: var(--ce-primary) !important;
  font-weight: 600;
  border-left-color: var(--ce-primary) !important;
}

.ce-wrap .ce-portal__nav-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.ce-wrap .ce-portal__nav-label {
  flex: 1;
}

.ce-wrap .ce-portal__nav-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  min-width: 24px;
  padding: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #facc15 0%, #f59e0b 100%);
  color: #4a3411;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.22);
}

/* Section header */
.ce-wrap .ce-portal__nav-section {
  padding: 20px 16px 6px !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--ce-text-secondary) !important;
  opacity: 0.7 !important;
  user-select: none !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  line-height: 1.4 !important;
}

.ce-wrap .ce-portal__nav-section:first-child {
  padding-top: 8px !important;
}

/* Group (accordion) */
.ce-wrap .ce-portal__nav-group {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}

.ce-wrap .ce-portal .ce-portal__nav-group-toggle {
  justify-content: flex-start !important;
  position: relative !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 9px 16px !important;
  border-left: 3px solid transparent !important;
  gap: 10px !important;
}

.ce-wrap .ce-portal .ce-portal__nav-group-toggle:focus,
.ce-wrap .ce-portal .ce-portal__nav-group-toggle:active {
  outline: none !important;
  box-shadow: none !important;
}

.ce-wrap .ce-portal__nav-arrow {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  transition: transform 0.25s ease !important;
  opacity: 0.5 !important;
  width: 16px !important;
  height: 16px !important;
}

.ce-wrap .ce-portal__nav-group-toggle:hover .ce-portal__nav-arrow {
  opacity: 1 !important;
}

.ce-wrap .ce-portal__nav-group.ce-portal__nav-group--open > .ce-portal__nav-group-toggle .ce-portal__nav-arrow {
  transform: rotate(180deg) !important;
  opacity: 0.8 !important;
}

/* Sub-menu: collapsed by default */
.ce-wrap .ce-portal__nav-sub {
  display: none !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

.ce-wrap .ce-portal__nav-sub::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 27px;
  width: 1px;
  background: var(--ce-border);
  pointer-events: none;
}

.ce-wrap .ce-portal__nav-group.ce-portal__nav-group--open > .ce-portal__nav-sub {
  display: flex !important;
}

.ce-wrap .ce-portal__nav-subitem {
  padding-left: 28px !important;
  font-size: 0.8125rem !important;
  gap: 10px !important;
  position: relative !important;
}

.ce-wrap .ce-portal__nav-subitem .ce-portal__nav-bullet {
  flex-shrink: 0 !important;
  text-align: center !important;
  color: var(--ce-text-secondary) !important;
  font-size: 0.6rem !important;
  line-height: 1 !important;
}

.ce-wrap .ce-portal__nav-subitem.ce-portal__nav-item--active .ce-portal__nav-bullet {
  color: var(--ce-primary) !important;
}

/* Colored sidebar – section & group variants */
.ce-wrap .ce-portal--sidebar-colored .ce-portal__nav-section {
  color: var(--ce-sidebar-text) !important;
  opacity: 0.5 !important;
}

.ce-wrap .ce-portal--sidebar-colored .ce-portal__nav-subitem .ce-portal__nav-bullet {
  color: var(--ce-sidebar-text) !important;
  opacity: 0.5 !important;
}

.ce-wrap .ce-portal--sidebar-colored .ce-portal__nav-subitem.ce-portal__nav-item--active .ce-portal__nav-bullet {
  color: var(--ce-sidebar-active-text) !important;
  opacity: 1 !important;
}

.ce-wrap .ce-portal--sidebar-colored .ce-portal__nav-arrow {
  color: var(--ce-sidebar-text) !important;
}

/* Sidebar footer (logout) */
.ce-wrap .ce-portal__sidebar-footer {
  padding: 8px 0;
  border-top: 1px solid var(--ce-border);
  margin-top: auto;
}

.ce-wrap .ce-portal__logout-form {
  margin: 0;
}

.ce-wrap .ce-portal__nav-item--logout {
  color: var(--ce-text-secondary) !important;
}

.ce-wrap .ce-portal__nav-item--logout:hover {
  color: var(--ce-error) !important;
  background: var(--ce-error-light) !important;
}

/* --- Colored sidebar variant --- */
.ce-wrap .ce-portal--sidebar-colored .ce-portal__sidebar {
  background: var(--ce-sidebar-bg);
  color: var(--ce-sidebar-text);
  border-right: none;
  border-radius: var(--ce-radius-lg);
  padding: 16px 10px;
  margin: 12px 0 12px 12px;
}

.ce-wrap .ce-portal--sidebar-colored .ce-portal__user {
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

.ce-wrap .ce-portal--sidebar-colored .ce-portal__avatar {
  background: rgba(255, 255, 255, 0.2);
}

.ce-wrap .ce-portal--sidebar-colored .ce-portal__user-name {
  color: var(--ce-sidebar-text);
}

.ce-wrap .ce-portal--sidebar-colored .ce-portal__user-email {
  color: var(--ce-sidebar-text);
  opacity: 0.7;
}

.ce-wrap .ce-portal--sidebar-colored .ce-portal__nav-item {
  color: var(--ce-sidebar-text);
  border-left-color: transparent;
  border-radius: var(--ce-radius);
  opacity: 0.85;
}

.ce-wrap .ce-portal--sidebar-colored .ce-portal__nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ce-sidebar-text);
  opacity: 1;
}

.ce-wrap .ce-portal--sidebar-colored .ce-portal__nav-item--active {
  background: var(--ce-sidebar-active-bg) !important;
  color: var(--ce-sidebar-active-text) !important;
  border-left-color: transparent !important;
  opacity: 1;
}

.ce-wrap .ce-portal--sidebar-colored .ce-portal__sidebar-footer {
  border-top-color: rgba(255, 255, 255, 0.15);
}

.ce-wrap .ce-portal--sidebar-colored .ce-portal__nav-item--logout {
  color: var(--ce-sidebar-text) !important;
  opacity: 0.6;
}

.ce-wrap .ce-portal--sidebar-colored .ce-portal__nav-item--logout:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1) !important;
  opacity: 1;
}

/* --- Mobile hamburger toggle --- */
.ce-wrap .ce-portal__mobile-toggle {
  display: none;
  flex-shrink: 0;
  z-index: 30;
  padding: 8px !important;
  border-radius: var(--ce-radius, 8px) !important;
  background: var(--ce-bg) !important;
  border: 1px solid var(--ce-border) !important;
  box-shadow: none !important;
  color: var(--ce-text) !important;
  cursor: pointer;
}

/* --- Overlay (mobile) --- */
.ce-wrap .ce-portal__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 19;
}

/* --- Main content area --- */
.ce-wrap .ce-portal__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: transparent;
}

.ce-wrap .ce-portal__content-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 0 16px 36px;
  border-bottom: 1px solid var(--ce-border);
}

.ce-wrap .ce-portal__page-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ce-wrap .ce-portal__page-title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ce-primary);
  opacity: 0.85;
}

.ce-wrap .ce-portal__page-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--ce-secondary);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.02em;
  padding-bottom: 0;
  border-bottom: none;
}

.ce-wrap .ce-portal__page-subtitle {
  margin: 0;
  color: color-mix(in srgb, var(--ce-muted) 78%, transparent);
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.35;
  max-width: 54ch;
}

.ce-wrap .ce-portal__content {
  position: relative;
  isolation: isolate;
  padding: 24px 0 0 36px;
  flex: 1;
  /* Prevent CLS while tab data loads: keep content area tall enough
     so the LoadingPanel → real content transition doesn't reflow the page. */
  min-height: max(400px, calc(100dvh - 260px));
}

.ce-wrap.ce-portal__flash {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--ce-flash-top-offset, 84px));
  right: 20px;
  bottom: auto;
  z-index: 2147483000;
  width: min(420px, calc(100vw - 40px));
  pointer-events: none;
}

body.admin-bar .ce-wrap.ce-portal__flash {
  top: calc(env(safe-area-inset-top, 0px) + var(--ce-flash-top-offset, 84px) + 32px);
}

.ce-wrap.ce-portal__flash .ce-alert {
  margin-bottom: 0;
  box-shadow: var(--ce-shadow-lg);
  pointer-events: auto;
}

.ce-wrap .ce-portal__content::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -18px;
  width: min(28vw, 280px);
  height: 150px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 24% 30%, color-mix(in srgb, var(--ce-primary) 12%, transparent) 0, transparent 40%),
    radial-gradient(circle at 72% 18%, color-mix(in srgb, #7c3aed 7%, transparent) 0, transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 100%);
  filter: blur(18px);
  opacity: 0.38;
  pointer-events: none;
  z-index: -1;
}

.ce-wrap .ce-portal__content > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   8b. Portal – welcome banner (overview tab)
   ============================================================ */
.ce-wrap .ce-portal__welcome {
  display: none;
}

.ce-wrap .ce-portal__welcome::before {
  display: none;
}

.ce-wrap .ce-portal__welcome-avatar {
  display: none;
}

.ce-wrap .ce-portal__welcome-text {
  display: none;
}

.ce-wrap .ce-portal__welcome-title {
  display: none;
}

.ce-wrap .ce-portal__welcome-sub {
  display: none;
}

/* ============================================================
   8c. Portal – info cards (overview)
   ============================================================ */
.ce-wrap .ce-portal__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.ce-wrap .ce-portal__card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--ce-bg);
  border: 1px solid var(--ce-border);
  border-radius: var(--ce-radius-lg);
  box-shadow: var(--ce-shadow);
  transition:
    box-shadow var(--ce-transition),
    border-color var(--ce-transition),
    transform var(--ce-transition);
}

.ce-wrap .ce-portal__card:hover {
  box-shadow: var(--ce-shadow-md);
  border-color: color-mix(in srgb, var(--ce-primary) 30%, var(--ce-border));
  transform: translateY(-1px);
}

.ce-wrap .ce-portal__card-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--ce-radius);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ce-wrap .ce-portal__card-icon--blue {
  background: var(--ce-primary-light);
  color: var(--ce-primary);
}

.ce-wrap .ce-portal__card-icon--green {
  background: var(--ce-success-light);
  color: var(--ce-success);
}

.ce-wrap .ce-portal__card-icon--purple {
  background: var(--ce-primary-light);
  color: var(--ce-primary-hover);
}

.ce-wrap .ce-portal__card-icon--amber {
  background: var(--ce-warning-light);
  color: var(--ce-warning);
}

.ce-wrap .ce-portal__card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ce-wrap .ce-portal__card-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ce-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ce-wrap .ce-portal__card-value {
  font-size: 0.938rem;
  font-weight: 600;
  color: var(--ce-text);
  word-break: break-word;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================================
   8d. Portal – roles badges
   ============================================================ */
.ce-wrap .ce-portal__roles {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.ce-wrap .ce-portal__roles-label {
  font-size: 0.813rem;
  font-weight: 600;
  color: var(--ce-text-secondary);
}

.ce-wrap .ce-badge--info {
  background: var(--ce-primary-light);
  color: var(--ce-primary-hover);
}

/* ============================================================
   8e. Portal – quick actions (overview)
   ============================================================ */
.ce-wrap .ce-portal__quick {
  margin-top: 8px;
}

.ce-wrap .ce-portal__quick-title {
  font-size: 0.938rem;
  font-weight: 700;
  color: var(--ce-secondary);
  margin: 0 0 14px;
}

.ce-wrap .ce-portal__quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.ce-wrap .ce-portal__quick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--ce-bg);
  border: 1px solid var(--ce-border);
  border-radius: var(--ce-radius-lg);
  font-size: 0.813rem;
  font-weight: 600;
  color: var(--ce-text);
  text-decoration: none;
  box-shadow: var(--ce-shadow);
  transition:
    border-color var(--ce-transition),
    box-shadow var(--ce-transition),
    color var(--ce-transition),
    transform var(--ce-transition);
}

.ce-wrap .ce-portal__quick-item:hover {
  border-color: color-mix(in srgb, var(--ce-primary) 30%, var(--ce-border));
  box-shadow: var(--ce-shadow-md);
  color: var(--ce-primary);
  transform: translateY(-1px);
}

.ce-wrap .ce-portal__quick-icon {
  flex-shrink: 0;
  color: var(--ce-text-secondary);
  transition: color var(--ce-transition);
}

.ce-wrap .ce-portal__quick-item:hover .ce-portal__quick-icon {
  color: var(--ce-primary);
}

.ce-wrap .ce-portal__quick-label {
  flex: 1;
}

/* ============================================================
   8e-2. Portal – greeting & stats (overview)
   ============================================================ */
.ce-wrap .ce-portal__greeting {
  margin: 0 0 24px;
  font-size: 1rem;
  color: var(--ce-text-secondary);
  line-height: 1.6;
}

.ce-wrap .ce-portal__stats {
  display: flex;
  gap: 16px;
  margin-bottom: 28px;
}

.ce-wrap .ce-portal__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 12px;
  background: var(--ce-bg);
  border: 1px solid var(--ce-border);
  border-radius: var(--ce-radius-lg);
  box-shadow: var(--ce-shadow);
  transition:
    box-shadow var(--ce-transition),
    transform var(--ce-transition);
}

.ce-wrap .ce-portal__stat:hover {
  box-shadow: var(--ce-shadow-md);
  transform: translateY(-1px);
}

.ce-wrap .ce-portal__stat-number {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ce-primary);
  line-height: 1;
}

.ce-wrap .ce-portal__stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ce-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ============================================================
   8e-3. Portal – section headers
   ============================================================ */
.ce-wrap .ce-portal__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ce-wrap .ce-portal__section-header .ce-portal__quick-title {
  margin: 0;
}

.ce-wrap .ce-portal__section-link {
  font-size: 0.813rem;
  font-weight: 600;
  color: var(--ce-primary);
  text-decoration: none;
  transition: color var(--ce-transition);
}

.ce-wrap .ce-portal__section-link:hover {
  color: var(--ce-primary-hover);
}

/* ============================================================
   8e-4. Portal – course list
   ============================================================ */
.ce-wrap .ce-portal__course-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ce-wrap .ce-portal__course-list--full {
  margin-top: 20px;
}

.ce-wrap .ce-portal__course-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--ce-bg);
  border: 1px solid var(--ce-border);
  border-radius: var(--ce-radius-lg);
  box-shadow: var(--ce-shadow);
  transition:
    border-color var(--ce-transition),
    box-shadow var(--ce-transition),
    transform var(--ce-transition);
}

.ce-wrap .ce-portal__course-item:hover {
  border-color: color-mix(in srgb, var(--ce-primary) 30%, var(--ce-border));
  box-shadow: var(--ce-shadow-md);
  transform: translateY(-1px);
}

.ce-wrap .ce-portal__course-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 8px;
  background: var(--ce-primary-light);
  border-radius: var(--ce-radius);
  line-height: 1;
}

.ce-wrap .ce-portal__course-day {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ce-primary);
}

.ce-wrap .ce-portal__course-month {
  font-size: 0.688rem;
  font-weight: 600;
  color: var(--ce-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ce-wrap .ce-portal__course-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ce-wrap .ce-portal__course-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ce-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ce-wrap .ce-portal__course-meta {
  font-size: 0.75rem;
  color: var(--ce-text-secondary);
}

/* ============================================================
   8e-5. Portal – small button variant
   ============================================================ */
.ce-wrap .ce-btn--sm {
  padding: 6px 14px !important;
  font-size: 0.75rem !important;
  gap: 6px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .ce-wrap .ce-portal__stats {
    flex-direction: column;
  }

  .ce-wrap .ce-portal__course-item {
    flex-wrap: wrap;
  }

  .ce-wrap .ce-portal__course-info {
    min-width: calc(100% - 68px);
  }

  .ce-wrap .ce-portal__course-item .ce-badge {
    margin-left: 68px;
  }
}

/* ============================================================
   8e-6. Portal – dashboard (ce-dash)
   ============================================================ */

/* Layout wrapper */
.ce-wrap .ce-dash {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Plain text greeting – no card */
.ce-wrap .ce-dash__greeting {
  padding: 4px 0 8px;
}

.ce-wrap .ce-dash__greeting-title {
  margin: 0 0 4px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ce-text);
}

.ce-wrap .ce-dash__greeting-sub {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ce-text-secondary);
}

/* ── Stat row – glass tiles ── */
.ce-wrap .ce-dash__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.ce-wrap .ce-dash__stat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 164px;
  padding: 18px 14px 16px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.64) 54%,
    rgba(248, 250, 252, 0.52) 100%
  );
  border: 1px solid color-mix(in srgb, white 38%, var(--ce-border));
  border-radius: 16px;
  box-shadow:
    0 18px 36px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(24px) saturate(1.24);
  -webkit-backdrop-filter: blur(24px) saturate(1.24);
  cursor: pointer;
  transition:
    background var(--ce-transition),
    box-shadow var(--ce-transition),
    transform var(--ce-transition);
}

.ce-wrap .ce-dash__stat::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, transparent 34%),
    radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.75) 0, transparent 34%);
  opacity: 0.95;
  pointer-events: none;
}

.ce-wrap .ce-dash__stat::after {
  content: "";
  position: absolute;
  inset: auto -10% -50% 24%;
  height: 96%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.34) 0, transparent 68%);
  pointer-events: none;
}

.ce-wrap .ce-dash__stat:hover {
  box-shadow: 0 22px 44px rgba(15, 23, 42, 0.12);
  transform: translateY(-3px);
}

/* Per-color glow on stat hover */
.ce-wrap .ce-dash__stat:has(.ce-dash__stat-icon--blue):hover {
  box-shadow: 0 6px 24px color-mix(in srgb, var(--ce-primary) 28%, transparent);
}
.ce-wrap .ce-dash__stat:has(.ce-dash__stat-icon--green):hover {
  box-shadow: 0 6px 24px color-mix(in srgb, #16a34a 28%, transparent);
}
.ce-wrap .ce-dash__stat:has(.ce-dash__stat-icon--purple):hover {
  box-shadow: 0 6px 24px color-mix(in srgb, #7c3aed 28%, transparent);
}
.ce-wrap .ce-dash__stat:has(.ce-dash__stat-icon--orange):hover {
  box-shadow: 0 6px 24px color-mix(in srgb, #ea580c 28%, transparent);
}

.ce-wrap .ce-dash__stat--alert .ce-dash__stat-value {
  color: #ea580c;
}

.ce-wrap .ce-dash__stat-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 10px 22px rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
}

.ce-wrap .ce-dash__stat-icon::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.28);
}

.ce-wrap .ce-dash__stat-icon::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  filter: blur(0.4px);
}

.ce-wrap .ce-dash__stat-icon svg {
  position: relative;
  z-index: 1;
}

.ce-wrap .ce-dash__stat-icon--blue {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ce-primary) 20%, white) 0%,
    color-mix(in srgb, var(--ce-primary) 8%, transparent) 100%
  );
  color: var(--ce-primary);
}
.ce-wrap .ce-dash__stat-icon--green {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #16a34a 20%, white) 0%,
    color-mix(in srgb, #16a34a 8%, transparent) 100%
  );
  color: #16a34a;
}
.ce-wrap .ce-dash__stat-icon--purple {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #7c3aed 20%, white) 0%,
    color-mix(in srgb, #7c3aed 8%, transparent) 100%
  );
  color: #7c3aed;
}
.ce-wrap .ce-dash__stat-icon--orange {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #ea580c 20%, white) 0%,
    color-mix(in srgb, #ea580c 8%, transparent) 100%
  );
  color: #ea580c;
}

.ce-wrap .ce-dash__stat-value {
  position: relative;
  z-index: 1;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ce-text);
  line-height: 1;
}

.ce-wrap .ce-dash__stat-label {
  position: relative;
  z-index: 1;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--ce-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1.3;
}

/* ── Masonry strip ── */
.ce-wrap .ce-dash__masonry {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.ce-wrap .ce-dash__masonry > .ce-dash__section {
  height: 100%;
}

.ce-wrap .ce-dash__section--feature {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
}

.ce-wrap .ce-dash__section--stacked {
  grid-column: 2;
  display: flex;
  flex-direction: column;
}

/* ── Sections ── */
.ce-wrap .ce-dash__section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.64) 56%,
    rgba(248, 250, 252, 0.52) 100%
  );
  border: 1px solid color-mix(in srgb, white 38%, var(--ce-border));
  border-radius: 12px;
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
  padding: 18px 20px;
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
}

.ce-wrap .ce-dash__section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, transparent 34%),
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.3) 0, transparent 34%);
  pointer-events: none;
}

/* Purple glow (E-Learnings) */
.ce-wrap .ce-dash__section--purple {
  background: color-mix(in srgb, #7c3aed 4%, var(--ce-bg));
  border-color: color-mix(in srgb, #7c3aed 35%, var(--ce-border));
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.05),
    0 6px 28px color-mix(in srgb, #7c3aed 18%, transparent);
}

/* Orange glow (Approvals) */
.ce-wrap .ce-dash__section--orange {
  background: color-mix(in srgb, #ea580c 4%, var(--ce-bg));
  border-color: color-mix(in srgb, #ea580c 35%, var(--ce-border));
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.05),
    0 6px 28px color-mix(in srgb, #ea580c 18%, transparent);
}

.ce-wrap .ce-dash__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ce-wrap .ce-dash__section-head--stack {
  align-items: flex-start;
}

.ce-wrap .ce-dash__section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ce-text);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.ce-wrap .ce-dash__section-title--standalone {
  margin-bottom: 14px;
}

.ce-wrap .ce-dash__section-subtitle {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ce-text-secondary);
}

/* Colored icon circle in section header */
.ce-wrap .ce-dash__section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex-shrink: 0;
}

.ce-wrap .ce-dash__section-icon--green {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #16a34a;
}
.ce-wrap .ce-dash__section-icon--blue {
  background: color-mix(in srgb, var(--ce-primary) 14%, transparent);
  color: var(--ce-primary);
}
.ce-wrap .ce-dash__section-icon--purple {
  background: color-mix(in srgb, #7c3aed 14%, transparent);
  color: #7c3aed;
}
.ce-wrap .ce-dash__section-icon--orange {
  background: color-mix(in srgb, #ea580c 14%, transparent);
  color: #ea580c;
}

.ce-wrap .ce-dash__section-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ce-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  transition: opacity var(--ce-transition);
}

.ce-wrap .ce-dash__section-link:hover {
  opacity: 0.6;
}

/* ── List items ── */
.ce-wrap .ce-dash__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ce-wrap .ce-dash__list--roomy {
  gap: 8px;
}

.ce-wrap .ce-dash__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--ce-bg-subtle);
  transition:
    background var(--ce-transition),
    box-shadow var(--ce-transition),
    transform var(--ce-transition);
}

.ce-wrap .ce-dash__item:hover {
  background: var(--ce-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  transform: translateX(2px);
}

.ce-wrap .ce-dash__item--alert {
  cursor: pointer;
  background: color-mix(in srgb, #ea580c 5%, var(--ce-bg-subtle));
  box-shadow: 0 2px 12px color-mix(in srgb, #ea580c 20%, transparent);
}

.ce-wrap .ce-dash__item--alert:hover {
  background: color-mix(in srgb, #ea580c 8%, var(--ce-bg));
  box-shadow: 0 4px 18px color-mix(in srgb, #ea580c 30%, transparent);
}

.ce-wrap .ce-dash__item-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  width: 42px;
  padding: 6px 4px;
  background: var(--ce-primary-light);
  border-radius: 7px;
  line-height: 1.1;
  flex-shrink: 0;
}

.ce-wrap .ce-dash__item-date--icon {
  background: color-mix(in srgb, var(--ce-primary) 10%, transparent);
  color: var(--ce-primary);
}

.ce-wrap .ce-dash__item-date--orange {
  background: color-mix(in srgb, #ea580c 12%, transparent);
  color: #ea580c;
}

.ce-wrap .ce-dash__item-day {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ce-primary);
}

.ce-wrap .ce-dash__item-month {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--ce-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ce-wrap .ce-dash__item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ce-wrap .ce-dash__item-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ce-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.ce-wrap .ce-dash__item-meta {
  font-size: 0.72rem;
  color: var(--ce-text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── E-Learning cards ── */
.ce-wrap .ce-dash__cards {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ce-wrap .ce-dash__card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--ce-bg-subtle);
  cursor: pointer;
  transition:
    background var(--ce-transition),
    box-shadow var(--ce-transition),
    transform var(--ce-transition);
}

.ce-wrap .ce-dash__card--mandatory {
  background: linear-gradient(135deg, rgba(254, 249, 195, 0.9) 0%, rgba(255, 247, 205, 0.75) 100%);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.18);
}

.ce-wrap .ce-dash__card:hover {
  background: var(--ce-bg);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.ce-wrap .ce-dash__card--mandatory:hover {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.98) 0%, rgba(255, 251, 235, 0.92) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(245, 158, 11, 0.22),
    0 3px 12px rgba(0, 0, 0, 0.08);
}

.ce-wrap .ce-dash__card-thumb {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.ce-wrap .ce-dash__card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ce-wrap .ce-dash__card-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ce-primary) 12%, transparent);
  color: var(--ce-primary);
}

.ce-wrap .ce-media-shell {
  position: relative;
  overflow: hidden;
}

.ce-wrap .ce-media-img {
  opacity: 0;
  transform: scale(1.035);
  transition:
    opacity 0.34s ease,
    transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.ce-wrap .ce-media-img.is-loaded {
  opacity: 1;
  transform: scale(1);
}

.ce-wrap .ce-media-skeleton {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.52) 48%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(145deg, color-mix(in srgb, var(--ce-primary-light) 84%, white) 0%, #eef5f9 100%);
  background-size:
    200% 100%,
    100% 100%;
  animation: ce-media-shimmer 1.35s linear infinite;
  pointer-events: none;
  transition: opacity 0.24s ease;
}

.ce-wrap .ce-media-shell--loaded .ce-media-skeleton {
  opacity: 0;
}

@keyframes ce-media-shimmer {
  from {
    background-position:
      200% 0,
      0 0;
  }
  to {
    background-position:
      -200% 0,
      0 0;
  }
}

.ce-wrap .ce-dash__card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ce-wrap .ce-dash__card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.ce-wrap .ce-dash__card-title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ce-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ce-wrap .ce-dash__card-dot {
  display: inline-flex;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-left: auto;
  border-radius: 999px;
  background: linear-gradient(135deg, #facc15 0%, #f59e0b 100%);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
}

.ce-wrap .ce-dash__card-meta {
  margin: 0;
  font-size: 0.72rem;
  color: var(--ce-text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Empty states ── */
.ce-wrap .ce-dash__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 16px;
  text-align: center;
  color: var(--ce-text-secondary);
  font-size: 0.875rem;
}

.ce-wrap .ce-dash__empty--sm {
  padding: 16px 12px;
  gap: 7px;
  font-size: 0.8rem;
}

.ce-wrap .ce-dash__empty-icon {
  opacity: 0.28;
  color: var(--ce-text-secondary);
}

/* ── KPI grid ── */
.ce-wrap .ce-dash__section--insights {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--ce-primary) 10%, transparent) 0, transparent 36%),
    var(--ce-bg);
}

.ce-wrap .ce-dash__kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ce-wrap .ce-dash__kpi {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-height: 178px;
  padding: 16px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.62) 54%,
    rgba(248, 250, 252, 0.5) 100%
  );
  border: 1px solid color-mix(in srgb, white 38%, var(--ce-border));
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  box-shadow:
    0 16px 32px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(24px) saturate(1.22);
  -webkit-backdrop-filter: blur(24px) saturate(1.22);
  transition:
    background var(--ce-transition),
    box-shadow var(--ce-transition),
    transform var(--ce-transition);
}

.ce-wrap .ce-dash__kpi::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, transparent 38%),
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.24) 0, transparent 36%);
  pointer-events: none;
}

.ce-wrap .ce-dash__kpi:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.78) 100%);
  box-shadow: 0 22px 42px rgba(15, 23, 42, 0.12);
  transform: translateY(-3px);
}

.ce-wrap .ce-dash__kpi:has(.ce-dash__kpi-icon--blue):hover {
  box-shadow: 0 4px 20px color-mix(in srgb, var(--ce-primary) 30%, transparent);
}
.ce-wrap .ce-dash__kpi:has(.ce-dash__kpi-icon--green):hover {
  box-shadow: 0 4px 20px color-mix(in srgb, #16a34a 30%, transparent);
}
.ce-wrap .ce-dash__kpi:has(.ce-dash__kpi-icon--purple):hover {
  box-shadow: 0 4px 20px color-mix(in srgb, #7c3aed 30%, transparent);
}
.ce-wrap .ce-dash__kpi:has(.ce-dash__kpi-icon--orange):hover {
  box-shadow: 0 4px 20px color-mix(in srgb, #ea580c 30%, transparent);
}

.ce-wrap .ce-dash__kpi-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.ce-wrap .ce-dash__kpi-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  transition:
    transform var(--ce-transition),
    filter var(--ce-transition);
}

.ce-wrap .ce-dash__kpi:hover .ce-dash__kpi-icon {
  transform: scale(1.08);
  filter: brightness(1.1) saturate(1.2);
}

.ce-wrap .ce-dash__kpi-icon--blue {
  background: color-mix(in srgb, var(--ce-primary) 14%, transparent);
  color: var(--ce-primary);
}
.ce-wrap .ce-dash__kpi-icon--green {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #16a34a;
}
.ce-wrap .ce-dash__kpi-icon--purple {
  background: color-mix(in srgb, #7c3aed 14%, transparent);
  color: #7c3aed;
}
.ce-wrap .ce-dash__kpi-icon--orange {
  background: color-mix(in srgb, #ea580c 14%, transparent);
  color: #ea580c;
}

.ce-wrap .ce-dash__kpi-label {
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ce-text-secondary);
}

.ce-wrap .ce-dash__kpi-value-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
}

.ce-wrap .ce-dash__kpi-value {
  font-size: clamp(1.65rem, 2vw, 2rem);
  font-weight: 800;
  line-height: 1;
  color: var(--ce-text);
}

.ce-wrap .ce-dash__kpi-suffix {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ce-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ce-wrap .ce-dash__kpi-hint {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ce-text-secondary);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .ce-wrap .ce-dash__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .ce-wrap .ce-dash__masonry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ce-wrap .ce-dash__section--feature,
  .ce-wrap .ce-dash__section--stacked {
    grid-column: auto;
    grid-row: auto;
  }

  .ce-wrap .ce-dash__kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .ce-wrap .ce-dash__masonry {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .ce-wrap .ce-dash__kpi-grid {
    grid-template-columns: 1fr;
  }

  .ce-wrap .ce-dash__item-title {
    white-space: normal;
  }

  .ce-wrap .ce-dash__kpi {
    min-height: unset;
  }
}

/* ============================================================
   8f. Portal – panel (form tabs)
   ============================================================ */
.ce-wrap .ce-portal__panel {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.ce-wrap .ce-portal__panel-header {
  padding: 0 0 20px;
  border-bottom: 1px solid var(--ce-border);
  background: transparent;
}

.ce-wrap .ce-portal__panel-header--with-action {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ce-wrap .ce-portal__panel-header--with-action > :first-child {
  min-width: 0;
}

.ce-wrap .ce-portal__panel-header--with-action > .ce-btn {
  align-self: flex-end;
  margin-bottom: 2px;
}
.ce-wrap .ce-portal__panel-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 12px;
  gap: 12px;
  flex-wrap: wrap;
}

.ce-wrap .ce-portal__panel-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ce-secondary);
  margin: 0 0 4px;
}

.ce-wrap .ce-portal__panel-desc {
  font-size: 0.813rem;
  color: var(--ce-text-secondary);
  margin: 0;
}

.ce-wrap .ce-portal__panel .ce-form {
  padding: 20px 0 0;
}

.ce-wrap .ce-portal__form-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 12px 0 4px;
  border-top: 1px solid var(--ce-border, #e5e7eb);
  z-index: 5;
}

/* ============================================================
   8f-2. Portal – security action (password in account)
   ============================================================ */
.ce-wrap .ce-portal__security-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0 0;
}

.ce-wrap .ce-portal__security-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ce-wrap .ce-portal__security-icon {
  flex-shrink: 0;
  color: var(--ce-text-secondary);
}

.ce-wrap .ce-portal__security-info strong {
  display: block;
  font-size: 0.875rem;
  color: var(--ce-text);
}

.ce-wrap .ce-portal__security-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--ce-text-secondary);
  margin-top: 2px;
}

.ce-wrap .ce-portal__panel--danger .ce-portal__panel-header {
  border-bottom-color: var(--ce-error);
}

.ce-wrap .ce-portal__panel--danger .ce-portal__panel-title {
  color: var(--ce-error);
}

/* ============================================================
   8f-3. Modal
   ============================================================ */
.ce-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  align-items: center;
  justify-content: center;
}

.ce-modal--open {
  display: flex;
}

body.ce-modal-open,
html.ce-modal-open {
  overflow: hidden !important;
  height: 100% !important;
}

.ce-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ce-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  margin: 16px;
  background: var(--ce-bg, #fff);
  border-radius: var(--ce-radius-lg, 12px);
  box-shadow: var(--ce-shadow-lg, 0 10px 25px -5px rgba(0, 0, 0, 0.08));
  overflow: hidden;
  animation: ceModalIn 0.2s ease-out;
}

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

.ce-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 0;
  flex-shrink: 0;
}

.ce-modal__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ce-secondary, #00294b);
  margin: 0;
}

.ce-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ce-text-secondary, #6b7280);
  cursor: pointer;
  border-radius: var(--ce-radius, 8px);
  transition:
    background var(--ce-transition, 0.15s ease),
    color var(--ce-transition, 0.15s ease);
}

.ce-modal__close:hover {
  background: var(--ce-bg-subtle, #f3f4f6);
  color: var(--ce-text, #1f2937);
}

.ce-modal__body {
  padding: 10px 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ce-modal .ce-form {
  gap: 8px !important;
}

.ce-modal__body .ce-form__group {
  margin-bottom: 0;
}

.ce-modal__body .ce-form__group:last-child {
  margin-bottom: 0;
}

.ce-modal .ce-form__row {
  display: flex !important;
  gap: 8px !important;
}

.ce-modal .ce-form__group--wide {
  flex: 2 !important;
}

.ce-modal .ce-form__group--narrow {
  flex: 1 !important;
  max-width: 120px !important;
}

.ce-modal .ce-form__group {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.ce-modal .ce-form__label {
  font-size: 0.75rem !important;
  margin-bottom: 2px !important;
  font-weight: 500 !important;
  color: var(--ce-text) !important;
  line-height: 1.2 !important;
}

.ce-modal .ce-form__label--required::after {
  content: " *";
  color: var(--ce-error) !important;
  font-weight: 400;
  margin-left: 3px;
}

.ce-modal .ce-form__input,
.ce-modal .ce-form select {
  display: block !important;
  width: 100% !important;
  min-height: 50px !important;
  padding: 12px 14px !important;
  font-size: 0.938rem !important;
  line-height: 1.5 !important;
  color: var(--ce-text) !important;
  background: var(--ce-bg-subtle) !important;
  border: 1px solid var(--ce-border) !important;
  border-radius: var(--ce-radius) !important;
  font-family: var(--ce-font) !important;
  box-sizing: border-box !important;
}

.ce-modal .ce-form__input:focus,
.ce-modal .ce-form select:focus {
  outline: none !important;
  border-color: var(--ce-primary) !important;
  box-shadow: 0 0 0 3px var(--ce-primary-light) !important;
}

.ce-modal .ce-form__input.ce-form__input--error,
.ce-modal .ce-form select.ce-form__input--error {
  border-color: var(--ce-error) !important;
}

.ce-modal .ce-form__input.ce-form__input--error:focus,
.ce-modal .ce-form select.ce-form__input--error:focus {
  border-color: var(--ce-error) !important;
  box-shadow: 0 0 0 3px var(--ce-error-light) !important;
}

.ce-modal .ce-form__chip-group {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.ce-modal .ce-form__chip {
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
  user-select: none !important;
  margin: 0 !important;
}

.ce-modal .ce-form__chip input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

.ce-modal .ce-form__chip-label {
  display: inline-block !important;
  padding: 5px 14px !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  border-radius: 20px !important;
  border: 1px solid var(--ce-border) !important;
  background: var(--ce-bg) !important;
  color: var(--ce-text-secondary) !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

.ce-modal .ce-form__chip-label:hover {
  border-color: var(--ce-primary) !important;
  color: var(--ce-primary) !important;
}

.ce-modal .ce-form__chip input[type="checkbox"]:checked + .ce-form__chip-label {
  background: var(--ce-primary) !important;
  border-color: var(--ce-primary) !important;
  color: #fff !important;
}

.ce-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 20px;
  flex-shrink: 0;
  border-top: 1px solid var(--ce-border, #e5e7eb);
}

.ce-modal .ce-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  border: none !important;
  border-radius: var(--ce-radius-btn, 8px) !important;
  cursor: pointer !important;
  font-family: var(--ce-font) !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  height: auto !important;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease !important;
}

.ce-modal .ce-btn--primary {
  background: var(--ce-primary) !important;
  color: #fff !important;
}

.ce-modal .ce-btn--primary:hover {
  background: var(--ce-primary-hover) !important;
  box-shadow: 0 4px 12px rgba(0, 169, 203, 0.3) !important;
}

.ce-modal .ce-btn--secondary {
  background: transparent !important;
  color: var(--ce-text) !important;
  border: 1px solid var(--ce-border) !important;
}

.ce-modal .ce-btn--secondary:hover {
  background: var(--ce-bg-subtle) !important;
}

.ce-modal .ce-btn--danger {
  background: var(--ce-error) !important;
  color: #fff !important;
}

.ce-modal .ce-btn--danger:hover {
  background: #b91c1c !important;
}

@media (max-width: 600px) {
  .ce-modal__dialog {
    max-width: none;
    margin: 12px;
  }

  .ce-wrap .ce-portal__security-action {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   8g. Portal – data cards (addresses, documents, etc.)
   ============================================================ */
.ce-wrap .ce-portal__data-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0 0;
}

/* ---- E-Learning card grid ---- */
.ce-wrap .ce-portal__data-cards:has(.ce-portal__el-card) {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px 0 0;
}
.ce-wrap .ce-portal__el-card {
  display: flex;
  align-items: stretch;
  min-height: 188px;
  width: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.92) 100%);
  border: 1px solid color-mix(in srgb, var(--ce-primary) 14%, var(--ce-border));
  border-radius: 22px;
  box-shadow: var(--ce-shadow-lg);
  text-decoration: none !important;
  color: inherit !important;
  overflow: hidden;
  transition:
    box-shadow var(--ce-transition),
    border-color var(--ce-transition),
    transform var(--ce-transition),
    background var(--ce-transition);
}
.ce-wrap .ce-portal__el-card:hover {
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.12),
    0 10px 30px color-mix(in srgb, var(--ce-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--ce-primary) 36%, var(--ce-border));
  transform: translateY(-4px);
}
.ce-wrap .ce-portal__el-card-image {
  position: relative;
  width: clamp(164px, 22%, 248px);
  min-width: clamp(164px, 22%, 248px);
  aspect-ratio: 4 / 3;
  align-self: stretch;
  min-height: 188px;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--ce-primary) 18%, transparent) 0, transparent 38%),
    linear-gradient(145deg, color-mix(in srgb, var(--ce-primary-light) 88%, white) 0%, #f8fbfd 100%);
  flex-shrink: 0;
}
.ce-wrap .ce-portal__el-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.45s ease;
  position: relative;
  z-index: 1;
}
.ce-wrap .ce-portal__el-card:hover .ce-portal__el-card-img {
  transform: scale(1.04);
}
.ce-wrap .ce-portal__el-card-img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ce-primary);
}
.ce-wrap .ce-portal__el-card-img-placeholder-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 12px 28px color-mix(in srgb, var(--ce-primary) 14%, transparent);
}
.ce-wrap .ce-portal__el-card-img-placeholder svg {
  width: 30px;
  height: 30px;
}
.ce-wrap .ce-portal__el-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}
.ce-wrap .ce-portal__el-card-ribbon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  margin-left: auto;
  border-radius: 10px 18px 10px 18px;
  background: linear-gradient(135deg, #facc15 0%, #f59e0b 100%);
  color: #4a3411;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(245, 158, 11, 0.22);
  white-space: nowrap;
}
.ce-wrap .ce-portal__el-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.02) 0%, rgba(15, 23, 42, 0.24) 100%);
  pointer-events: none;
}
.ce-wrap .ce-portal__el-card-kicker {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ce-secondary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ce-wrap .ce-portal__el-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 18px;
}
.ce-wrap .ce-portal__el-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ce-wrap .ce-portal__el-card-code,
.ce-wrap .ce-portal__el-card-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
}
.ce-wrap .ce-portal__el-card-code {
  background: color-mix(in srgb, var(--ce-primary-light) 82%, white);
  color: var(--ce-primary-hover);
}
.ce-wrap .ce-portal__el-card-state {
  background: color-mix(in srgb, var(--ce-bg-subtle) 86%, white);
  color: var(--ce-text-secondary);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.48);
  transition:
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.ce-wrap .ce-portal__el-card-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ce-text);
  line-height: 1.35;
}
.ce-wrap .ce-portal__el-card-subtitle {
  font-size: 0.82rem;
  color: var(--ce-text-secondary);
  line-height: 1.35;
}
.ce-wrap .ce-portal__el-card-meta-wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  margin-top: 4px;
  padding: 8px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.34) 100%);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  overflow: hidden;
}
.ce-wrap .ce-portal__el-card-meta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ce-text-secondary);
  opacity: 1;
}
.ce-wrap .ce-portal__el-card-meta + .ce-portal__el-card-meta::before {
  content: "|";
  position: absolute;
  top: 50%;
  left: -2px;
  transform: translateY(-50%);
  color: var(--ce-primary);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.78;
}
.ce-wrap .ce-portal__el-card-meta--hidden {
  visibility: hidden;
}
.ce-wrap .ce-portal__el-card-meta-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ce-text-muted);
}
.ce-wrap .ce-portal__el-card-meta-value {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ce-text);
  line-height: 1.35;
}
.ce-wrap .ce-portal__el-card-meta--highlight {
}
.ce-wrap .ce-portal__el-card-meta--success {
}
.ce-wrap .ce-portal__el-card-meta--warning {
}
.ce-wrap .ce-portal__el-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  color: var(--ce-primary-hover);
  transition: color 0.2s ease;
}
.ce-wrap .ce-portal__el-card-footer svg {
  display: block;
  flex-shrink: 0;
  transform: translateX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}
.ce-wrap .ce-portal__el-card-link {
  font-size: 0.84rem;
  font-weight: 700;
  transition: color 0.2s ease;
}
.ce-wrap .ce-portal__el-card:hover .ce-portal__el-card-link {
  color: var(--ce-primary);
}
.ce-wrap .ce-portal__el-card:hover .ce-portal__el-card-footer,
.ce-wrap .ce-portal__el-card:focus-visible .ce-portal__el-card-footer {
  color: var(--ce-primary);
}
.ce-wrap .ce-portal__el-card:hover .ce-portal__el-card-state,
.ce-wrap .ce-portal__el-card:focus-visible .ce-portal__el-card-state {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.68),
    0 8px 16px rgba(15, 23, 42, 0.05);
}
.ce-wrap .ce-portal__el-card:hover .ce-portal__el-card-footer svg,
.ce-wrap .ce-portal__el-card:focus-visible .ce-portal__el-card-footer svg {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .ce-wrap .ce-portal__el-card-footer,
  .ce-wrap .ce-portal__el-card-footer svg,
  .ce-wrap .ce-portal__el-card-link,
  .ce-wrap .ce-portal__el-card-state {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 760px) {
  .ce-wrap .ce-portal__el-card-ribbon {
    font-size: 0.64rem;
  }

  .ce-wrap .ce-portal__el-card-meta-wrap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ce-wrap .ce-portal__el-card-meta {
    padding: 12px 14px;
  }

  .ce-wrap .ce-portal__el-card-meta + .ce-portal__el-card-meta::before {
    content: "";
    top: 0;
    left: 14px;
    right: 14px;
    width: auto;
    height: 1px;
    transform: none;
    background: color-mix(in srgb, var(--ce-primary) 42%, transparent);
    opacity: 0.5;
  }
}

/* Course list: one row per entry */
.ce-wrap .ce-portal__course-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 0 0;
}
.ce-wrap .ce-portal__course-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--ce-bg);
  border: 1px solid var(--ce-border);
  border-radius: var(--ce-radius-lg);
  box-shadow: var(--ce-shadow);
  text-decoration: none !important;
  color: inherit !important;
  transition:
    box-shadow var(--ce-transition),
    border-color var(--ce-transition),
    transform var(--ce-transition);
}
.ce-wrap .ce-portal__course-row:hover {
  box-shadow: var(--ce-shadow-md);
  border-color: color-mix(in srgb, var(--ce-primary) 40%, var(--ce-border));
  transform: translateY(-1px);
}
.ce-wrap .ce-portal__course-row-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--ce-radius);
  overflow: hidden;
  background: var(--ce-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ce-wrap .ce-portal__course-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ce-wrap .ce-portal__course-row-thumb svg {
  width: 26px;
  height: 26px;
  color: var(--ce-primary);
  opacity: 0.6;
}
.ce-wrap .ce-portal__course-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ce-wrap .ce-portal__course-row-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ce-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ce-wrap .ce-portal__course-row-meta {
  font-size: 0.78rem;
  color: var(--ce-text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
}
.ce-wrap .ce-portal__course-row-aside {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.ce-wrap .ce-portal__course-list--records {
  padding-top: 8px;
}

.ce-wrap .ce-portal__course-row--record {
  align-items: flex-start;
}

.ce-wrap .ce-portal__course-row-thumb--record {
  background: color-mix(in srgb, var(--ce-primary-light) 78%, white);
}

.ce-wrap .ce-portal__course-row-body--record {
  gap: 8px;
}

.ce-wrap .ce-portal__course-row-aside--record {
  gap: 10px;
}

.ce-wrap .ce-portal__course-row-meta--stacked {
  flex-direction: column;
  gap: 4px;
}

.ce-wrap .ce-portal__course-row-body--document {
  gap: 10px;
  padding-top: 2px;
}

.ce-wrap .ce-portal__course-row-downloads {
  margin-top: 2px;
}

.ce-wrap .ce-portal__course-row-aside--document {
  min-width: 148px;
}

.ce-wrap .ce-portal__course-row-aside--action {
  min-width: 136px;
}

/* Filter: compact course status pills */
.ce-wrap .ce-segment-toolbar {
  display: block;
  margin: 24px 0 28px;
}

.ce-wrap .ce-segment {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ce-wrap button.ce-segment__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  width: auto;
  padding: 11px 16px !important;
  border: 1px solid color-mix(in srgb, var(--ce-border) 86%, var(--ce-primary) 14%) !important;
  border-radius: 999px !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    color-mix(in srgb, var(--ce-bg-subtle) 92%, white) 100%
  ) !important;
  box-shadow: var(--ce-shadow) !important;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ce-text);
  cursor: pointer;
  text-align: left;
  transition:
    border-color var(--ce-transition),
    background var(--ce-transition),
    box-shadow var(--ce-transition),
    transform var(--ce-transition),
    color var(--ce-transition);
}

.ce-wrap button.ce-segment__btn:hover {
  border-color: color-mix(in srgb, var(--ce-primary) 34%, var(--ce-border));
  box-shadow: var(--ce-shadow-md) !important;
  transform: translateY(-1px);
}

.ce-wrap button.ce-segment__btn:active {
  transform: translateY(0);
  box-shadow: var(--ce-shadow) !important;
}

.ce-wrap button.ce-segment__btn.is-active {
  border-color: color-mix(in srgb, var(--ce-primary) 64%, white 36%);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ce-primary-light) 82%, white) 0%,
    rgba(255, 255, 255, 0.98) 100%
  ) !important;
  box-shadow:
    var(--ce-shadow-md),
    0 0 0 3px color-mix(in srgb, var(--ce-primary) 10%, transparent) !important;
}

.ce-wrap .ce-segment__btn--empty:not(.is-active) {
  opacity: 0.56;
}

.ce-wrap .ce-segment__label {
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.2;
  color: currentColor;
}

.ce-wrap .ce-segment__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ce-primary-light) 82%, white);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ce-primary-hover);
  transition:
    color var(--ce-transition),
    background var(--ce-transition);
}

.ce-wrap button.ce-segment__btn.is-active .ce-segment__count {
  background: white;
  color: var(--ce-primary);
}

@media (max-width: 560px) {
  .ce-wrap .ce-portal__el-card {
    flex-direction: column;
    min-height: 0;
  }

  .ce-wrap .ce-segment {
    gap: 8px;
  }

  .ce-wrap button.ce-segment__btn {
    padding: 10px 14px !important;
  }
}

@media (max-width: 720px) {
  .ce-wrap .ce-portal__course-row--record {
    flex-direction: column;
  }

  .ce-wrap .ce-portal__course-row-aside--record,
  .ce-wrap .ce-portal__course-row-aside--document,
  .ce-wrap .ce-portal__course-row-aside--action {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
  }
}

.ce-wrap .ce-portal__data-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--ce-bg);
  border: 1px solid var(--ce-border);
  border-radius: var(--ce-radius-lg);
  box-shadow: var(--ce-shadow);
  transition:
    box-shadow var(--ce-transition),
    border-color var(--ce-transition),
    transform var(--ce-transition);
}

.ce-wrap .ce-portal__data-card:hover {
  box-shadow: var(--ce-shadow-md);
  border-color: color-mix(in srgb, var(--ce-primary) 30%, var(--ce-border));
  transform: translateY(-1px);
}

.ce-wrap .ce-portal__data-card-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--ce-radius);
  background: var(--ce-primary-light);
  color: var(--ce-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ce-wrap .ce-portal__data-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ce-wrap .ce-portal__data-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ce-text);
}

.ce-wrap .ce-portal__data-card-body span {
  font-size: 0.813rem;
  color: var(--ce-text-secondary);
}

.ce-wrap .ce-portal__data-card-meta {
  font-size: 0.75rem !important;
  color: var(--ce-text-secondary);
  opacity: 0.7;
}

.ce-wrap .ce-portal__data-card-actions {
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 4px !important;
  align-items: center !important;
}

/* ---- Approve Documents View ---- */

/* meta rows with inline icon */
.ce-wrap .ce-portal__data-card-meta {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Right side: badge + buttons side-by-side in a single row, vertically centered */
.ce-wrap .ce-portal__data-card .ce-portal__course-row-aside {
  flex-direction: row;
  align-items: center;
  align-self: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Action buttons row (Ablehnen / Freigeben / ⋮) */
.ce-wrap .ce-approve-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ⋮ trigger button active state */
.ce-wrap .ce-approve-menu-trigger.is-active {
  background: var(--ce-bg-subtle, #f3f4f6) !important;
  border-color: var(--ce-text-secondary, #9ca3af) !important;
}

/* Dropdown panel – teleported to <body>, uses position:fixed */
.ce-approve-menu {
  position: fixed;
  min-width: 200px;
  max-width: min(320px, calc(100vw - 16px));
  background: #fff;
  border: 1px solid var(--ce-border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 99999;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
}
.ce-approve-menu__label {
  padding: 6px 14px 3px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}
.ce-approve-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 0.875rem;
  color: #111827;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.1s ease;
}
.ce-approve-menu__item:hover:not(:disabled):not(.ce-approve-menu__item--disabled) {
  background: #f9fafb;
}
.ce-approve-menu__item--disabled {
  opacity: 0.4;
  pointer-events: none;
}
.ce-approve-menu__item-size {
  margin-left: auto;
  font-size: 0.72rem;
  color: #6b7280;
  flex-shrink: 0;
}

/* ---- E-Learning Detail View ---- */
.ce-wrap .ce-portal__back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--ce-primary, #2563eb) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-bottom: 20px !important;
}
.ce-wrap .ce-portal__back-link:hover {
  text-decoration: underline !important;
}
.ce-wrap .ce-portal__loading {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 80px 0 !important;
  flex: 1 !important;
}

/* Self-contained spinner – all rules use !important so WordPress themes
   cannot override border/animation/transform. */
.ce-wrap .ce-portal__spinner {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 50% !important;
  border: 3px solid var(--ce-border, #e5e7eb) !important;
  border-top-color: var(--ce-primary, #2563eb) !important;
  box-sizing: border-box !important;
  animation: ce-portal-spin 0.75s linear infinite !important;
  flex-shrink: 0 !important;
}

@keyframes ce-portal-spin {
  to {
    transform: rotate(360deg);
  }
}
.ce-wrap .ce-portal__detail-thumbnail {
  width: 100% !important;
  height: clamp(220px, 32vw, 320px) !important;
  margin-bottom: 24px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
}
.ce-wrap .ce-portal__detail-thumbnail-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 320px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  position: relative !important;
  z-index: 1 !important;
}

.ce-wrap .ce-portal__detail-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}
.ce-wrap .ce-portal__detail-icon {
  flex-shrink: 0 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: var(--ce-primary-light, #eff6ff) !important;
  color: var(--ce-primary, #2563eb) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ce-wrap .ce-portal__detail-icon svg {
  width: 24px !important;
  height: 24px !important;
}
.ce-wrap .ce-portal__detail-heading {
  flex: 1 !important;
  min-width: 0 !important;
}
.ce-wrap .ce-portal__detail-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ce-text, #111827) !important;
  margin: 0 0 4px !important;
}
.ce-wrap .ce-portal__detail-subtitle {
  font-size: 14px !important;
  color: var(--ce-text-muted, #6b7280) !important;
  margin: 0 0 8px !important;
}
.ce-wrap .ce-portal__detail-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.ce-wrap .ce-portal__detail-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: var(--ce-bg) !important;
  border: 1px solid var(--ce-border) !important;
  border-radius: var(--ce-radius-lg) !important;
  box-shadow: var(--ce-shadow) !important;
  overflow: hidden !important;
  margin-bottom: 28px !important;
}
.ce-wrap .ce-portal__detail-meta-group {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, max-content)) !important;
  gap: 0 !important;
  padding: 4px 8px !important;
}
.ce-wrap .ce-portal__detail-meta-divider {
  display: none !important;
}
.ce-wrap .ce-portal__detail-meta-stats {
  display: flex !important;
  border-top: 1px solid var(--ce-border) !important;
  background: var(--ce-bg-subtle) !important;
}
.ce-wrap .ce-portal__detail-meta-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 12px 16px !important;
}
.ce-wrap .ce-portal__detail-meta-item--stat {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 14px 12px !important;
  border-right: 1px solid var(--ce-border) !important;
  text-align: center !important;
}
.ce-wrap .ce-portal__detail-meta-item--stat:last-child {
  border-right: none !important;
}
.ce-wrap .ce-portal__detail-meta-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--ce-text-secondary, #6b7280) !important;
}
.ce-wrap .ce-portal__detail-meta-value {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--ce-text) !important;
}
.ce-wrap .ce-portal__detail-meta-stat-value {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: var(--ce-primary) !important;
}
.ce-wrap .ce-portal__detail-meta-stat-value--sm {
  font-size: 1rem !important;
  color: var(--ce-primary) !important;
}
.ce-wrap .ce-portal__detail-meta-stat-value svg {
  width: 24px !important;
  height: 24px !important;
  color: var(--ce-primary) !important;
}

.ce-wrap .ce-portal__detail-section {
  margin-bottom: 24px !important;
}
.ce-wrap .ce-portal__detail-section-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--ce-secondary, #00294b) !important;
  margin: 0 0 12px !important;
  padding-left: 0.75rem !important;
  border-left: 3px solid var(--ce-primary, #00a9cb) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.ce-wrap .ce-portal__detail-excerpt {
  font-size: 15px !important;
  font-style: italic !important;
  color: var(--ce-text-muted, #6b7280) !important;
  margin: 0 0 12px !important;
}
.ce-wrap .ce-portal__detail-body {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--ce-text, #111827) !important;
}
.ce-wrap .ce-portal__detail-body h1,
.ce-wrap .ce-portal__detail-body h2,
.ce-wrap .ce-portal__detail-body h3,
.ce-wrap .ce-portal__detail-body h4,
.ce-wrap .ce-portal__detail-body h5,
.ce-wrap .ce-portal__detail-body h6 {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--ce-text, #111827) !important;
  margin: 12px 0 2px !important;
  line-height: 1.4 !important;
}
.ce-wrap .ce-portal__detail-body ul,
.ce-wrap .ce-portal__detail-body ol {
  padding-left: 20px !important;
  margin: 8px 0 !important;
}
.ce-wrap .ce-portal__detail-body ul {
  list-style: none !important;
  padding-left: 0 !important;
}
.ce-wrap .ce-portal__detail-body li {
  margin-bottom: 6px !important;
}
.ce-wrap .ce-portal__detail-body ul li {
  position: relative !important;
  padding-left: 18px !important;
}
.ce-wrap .ce-portal__detail-body ul li::before {
  content: "" !important;
  position: absolute !important;
  top: 0.8em !important;
  left: 0 !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: var(--ce-primary, #00a9cb) !important;
  transform: translateY(-50%) !important;
}

/* ---- Course detail: cancel action ---- */
.ce-wrap .ce-portal__detail-actions {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  align-self: flex-start !important;
}

/* ---- Course detail: lecturer list ---- */
.ce-wrap .ce-portal__lecturer-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.ce-wrap .ce-portal__lecturer-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.ce-wrap .ce-portal__lecturer-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--ce-primary, #2563eb) !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.ce-wrap .ce-portal__lecturer-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.ce-wrap .ce-portal__lecturer-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ce-text, #111827) !important;
}
.ce-wrap .ce-portal__lecturer-title {
  font-size: 13px !important;
  color: var(--ce-text-muted, #6b7280) !important;
}

/* ---- Course detail: participant list (lecturer view) ---- */
.ce-wrap .ce-portal__participant-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.ce-wrap .ce-portal__participant-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--ce-border, #e5e7eb) !important;
  gap: 12px !important;
}
.ce-wrap .ce-portal__participant-row:last-child {
  border-bottom: none !important;
}
.ce-wrap .ce-portal__participant-name {
  font-size: 14px !important;
  color: var(--ce-text, #111827) !important;
}

/* ---- E-Learning downloads list ---- */
.ce-wrap .ce-portal__detail-files {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.ce-wrap .ce-portal__detail-file {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  background: var(--ce-surface, #f9fafb) !important;
  border: 1px solid var(--ce-border, #e5e7eb) !important;
  border-radius: var(--ce-radius, 8px) !important;
}
.ce-wrap .ce-portal__detail-file-icon {
  flex-shrink: 0 !important;
  color: var(--ce-primary, #00a9cb) !important;
}
.ce-wrap .ce-portal__detail-file-info {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.ce-wrap .ce-portal__detail-file-name {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--ce-primary, #00a9cb) !important;
  text-decoration: none !important;
}
.ce-wrap .ce-portal__detail-file-name:hover {
  text-decoration: underline !important;
}
.ce-wrap .ce-portal__detail-file-desc {
  font-size: 0.775rem !important;
  color: var(--ce-text-secondary, #6b7280) !important;
}
.ce-wrap .ce-portal__detail-file-size {
  flex-shrink: 0 !important;
  font-size: 0.75rem !important;
  color: var(--ce-text-secondary, #6b7280) !important;
  white-space: nowrap !important;
}

.ce-wrap .ce-badge--neutral {
  background: var(--ce-surface, #f3f4f6) !important;
  color: var(--ce-text-muted, #6b7280) !important;
}

.ce-wrap .ce-btn--sm {
  padding: 6px 14px !important;
  font-size: 13px !important;
}

/* ---- E-Learning launch button ---- */
.ce-wrap .ce-portal__launch-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* ---- SCORM / E-Learning player modal ---- */
.ce-player-modal {
  /* Rendered via <Teleport to="body"> — no extra overrides needed;
     .ce-modal and .ce-modal--open already set position:fixed + z-index */
}
.ce-player-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  cursor: default;
}
.ce-player-modal__container {
  position: relative;
  z-index: 1;
  width: min(1100px, 96vw);
  height: min(750px, 92vh);
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}
.ce-player-modal__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--ce-secondary, #00294b);
  color: #fff;
  flex-shrink: 0;
  gap: 12px;
}
.ce-player-modal__toolbar-title {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ce-player-modal__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.ce-player-modal__close:hover {
  background: rgba(255, 255, 255, 0.3);
}
.ce-player-modal__frame {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
}
.ce-wrap .ce-btn--icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: var(--ce-radius, 8px) !important;
  border: 1px solid var(--ce-border) !important;
  background: transparent !important;
  color: var(--ce-text-secondary) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.ce-wrap .ce-btn--icon:hover {
  background: var(--ce-bg-subtle) !important;
  color: var(--ce-text) !important;
  border-color: var(--ce-text-secondary) !important;
}

.ce-wrap .ce-btn--icon-danger:hover {
  background: #fef2f2 !important;
  color: var(--ce-error) !important;
  border-color: var(--ce-error) !important;
}

/* Confirm dialog */
.ce-modal__dialog--sm {
  max-width: 380px !important;
}

.ce-confirm__icon-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.ce-confirm__icon-wrap--danger {
  background: #fef2f2 !important;
  color: var(--ce-error) !important;
}

.ce-confirm__icon-wrap--info {
  background: var(--ce-primary-light, #e0f7fa) !important;
  color: var(--ce-primary) !important;
}

.ce-confirm__title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--ce-secondary, #00294b) !important;
  margin: 0 0 4px !important;
  line-height: 1.3 !important;
}

.ce-confirm__message {
  font-size: 0.8125rem !important;
  color: var(--ce-text-secondary, #6b7280) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

.ce-wrap .ce-portal__addr-types {
  display: flex !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  margin-top: 4px !important;
}

.ce-wrap .ce-form__row {
  display: flex !important;
  gap: 12px !important;
}

.ce-wrap .ce-form__group--wide {
  flex: 2 !important;
}

.ce-wrap .ce-form__group--narrow {
  flex: 1 !important;
  max-width: 120px !important;
}

.ce-wrap .ce-form__chip-group {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.ce-wrap .ce-form__chip {
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
  user-select: none !important;
  margin: 0 !important;
}

.ce-wrap .ce-form__chip input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

.ce-wrap .ce-form__chip-label {
  display: inline-block !important;
  padding: 6px 16px !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  border-radius: 20px !important;
  border: 1px solid var(--ce-border) !important;
  background: var(--ce-bg) !important;
  color: var(--ce-text-secondary) !important;
  transition: all 0.15s ease !important;
}

.ce-wrap .ce-form__chip-label:hover {
  border-color: var(--ce-primary) !important;
  color: var(--ce-primary) !important;
}

.ce-wrap .ce-form__chip input[type="checkbox"]:checked + .ce-form__chip-label {
  background: var(--ce-primary) !important;
  border-color: var(--ce-primary) !important;
  color: #fff !important;
}

.ce-wrap .ce-modal__dialog--wide {
  max-width: 520px !important;
}

.ce-wrap .ce-btn--sm {
  padding: 6px 14px !important;
  font-size: 0.8125rem !important;
}

/* ============================================================
   8h. Portal – empty state
   ============================================================ */
.ce-wrap .ce-portal__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 28px;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--ce-primary) 22%, var(--ce-border));
  border-radius: var(--ce-radius-lg);
  margin-top: 16px;
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--ce-primary) 8%, transparent) 0, transparent 52%),
    linear-gradient(180deg, color-mix(in srgb, var(--ce-primary-light) 42%, white) 0%, var(--ce-bg-subtle) 100%);
  box-shadow: var(--ce-shadow);
}

.ce-wrap .ce-portal__empty-icon {
  width: 48px;
  height: 48px;
  color: var(--ce-primary);
  opacity: 0.45;
  margin-bottom: 12px;
}

.ce-wrap .ce-portal__empty-icon svg {
  width: 48px;
  height: 48px;
}

.ce-wrap .ce-portal__empty-text {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--ce-text-secondary) 78%, var(--ce-primary) 22%);
  margin: 0;
}

/* ============================================================
   8i. Portal – readonly info section
   ============================================================ */
.ce-wrap .ce-portal__readonly {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--ce-border);
}

.ce-wrap .ce-portal__readonly-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ce-secondary);
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ============================================================
   8j. Portal – responsive
   ============================================================ */
@media (max-width: 768px) {
  .ce-wrap .ce-portal {
    grid-template-columns: 1fr;
  }

  .ce-wrap .ce-portal__sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: none;
    background: var(--ce-bg);
    border-right: 1px solid var(--ce-border);
  }

  .ce-wrap .ce-portal--sidebar-colored .ce-portal__sidebar {
    background: var(--ce-sidebar-bg);
    border-right: none;
    border-radius: 0;
    margin: 0;
    padding: 16px 10px;
  }

  .ce-wrap .ce-portal--sidebar-open .ce-portal__sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
  }

  .ce-wrap .ce-portal--sidebar-open .ce-portal__overlay {
    display: block;
  }

  .ce-wrap .ce-portal__mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ce-wrap .ce-portal__content-header {
    padding: 0 0 16px;
  }

  .ce-wrap .ce-portal__page-subtitle {
    max-width: none;
  }

  .ce-wrap .ce-portal__content {
    padding: 20px 0 0;
  }

  .ce-wrap.ce-portal__flash {
    top: calc(env(safe-area-inset-top, 0px) + var(--ce-flash-top-offset-mobile, 72px));
    right: 12px;
    bottom: auto;
    left: 12px;
    width: auto;
  }

  body.admin-bar .ce-wrap.ce-portal__flash {
    top: calc(env(safe-area-inset-top, 0px) + var(--ce-flash-top-offset-mobile, 72px) + 46px);
  }

  .ce-wrap .ce-portal__welcome {
    display: none;
  }

  .ce-wrap .ce-portal__cards {
    grid-template-columns: 1fr;
  }

  .ce-wrap .ce-portal__quick-grid {
    grid-template-columns: 1fr;
  }

  .ce-wrap .ce-portal__panel-header {
    padding: 0 0 16px;
  }

  .ce-wrap .ce-portal__panel .ce-form {
    padding: 16px 0 0;
  }

  .ce-wrap .ce-portal__data-cards {
    padding: 16px 0 0;
  }
  .ce-wrap .ce-portal__data-cards:has(.ce-portal__el-card) {
    display: flex;
    flex-direction: column;
  }

  .ce-wrap .ce-portal__el-card {
    flex-direction: column;
    min-height: 0;
  }

  .ce-wrap .ce-portal__el-card-image {
    align-self: stretch;
    width: 100%;
    min-width: 0;
    height: 144px;
  }
}

/* ============================================================
   9. Section & Divider
   ============================================================ */
.ce-wrap .ce-section {
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--ce-border);
}

.ce-wrap .ce-section__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ce-secondary);
  margin: 0 0 16px;
}

.ce-wrap .ce-divider {
  height: 1px;
  background: var(--ce-border);
  border: none;
  margin: 24px 0;
}

/* ============================================================
   10. Info display (read-only data)
   ============================================================ */
.ce-wrap .ce-info {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px 20px;
  font-size: 0.938rem;
}

.ce-wrap .ce-info__label {
  font-weight: 600;
  color: var(--ce-text-secondary);
}

.ce-wrap .ce-info__value {
  color: var(--ce-text);
  word-break: break-word;
}

@media (max-width: 540px) {
  .ce-wrap .ce-info {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }

  .ce-wrap .ce-info__value {
    margin-bottom: 12px;
  }
}

/* ============================================================
   10b. (Profile page – merged into User Portal, section 8)
   ============================================================ */

/* ============================================================
   11. Badge
   ============================================================ */
.ce-wrap .ce-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
}

.ce-wrap .ce-badge--success {
  background: var(--ce-success-light);
  color: #065f46;
}

.ce-wrap .ce-badge--warning {
  background: var(--ce-warning-light);
  color: #92400e;
}

.ce-wrap .ce-badge--error {
  background: var(--ce-error-light);
  color: #991b1b;
}

.ce-wrap .ce-badge-page {
  width: 100%;
}

.ce-wrap .ce-badge-page__card,
.ce-wrap .ce-badge-page__state-card {
  position: relative;
  max-width: 820px;
  overflow: hidden;
}

.ce-wrap .ce-badge-page__card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: min(100%, 420px);
  height: 220px;
  background:
    radial-gradient(circle at top left, rgba(0, 169, 203, 0.14), transparent 68%),
    linear-gradient(135deg, rgba(0, 41, 75, 0.08), rgba(0, 169, 203, 0));
  pointer-events: none;
}

.ce-wrap .ce-badge-page__hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  margin-bottom: 30px;
  padding: 28px;
  border: 1px solid rgba(0, 41, 75, 0.08);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 249, 250, 0.92)), var(--ce-bg);
  box-shadow: 0 18px 40px -28px rgba(0, 41, 75, 0.35);
}

.ce-wrap .ce-badge-page__hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.ce-wrap .ce-badge-page__hero-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.ce-wrap .ce-badge-page__title {
  margin-bottom: 0;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.ce-wrap .ce-badge-page__subtitle {
  margin-bottom: 0;
  font-size: 1.05rem;
  max-width: 40rem;
}

.ce-wrap .ce-badge-page__eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ce-primary);
}

.ce-wrap .ce-badge-page__expires {
  font-size: 0.875rem;
  color: var(--ce-text-secondary);
}

.ce-wrap .ce-badge-page__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 132px;
  margin-left: auto;
}

.ce-wrap .ce-badge-page__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  padding: 12px;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(230, 247, 250, 0.95)), var(--ce-bg);
  border: 1px solid rgba(0, 41, 75, 0.08);
  box-shadow: 0 14px 28px -22px rgba(0, 41, 75, 0.45);
}

.ce-wrap .ce-badge-page__brand-logo {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.ce-wrap .ce-badge-page__brand-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--ce-secondary), #0b5f73);
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ce-wrap .ce-badge-page__brand-name {
  max-width: 170px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ce-text-secondary);
  text-align: right;
  word-break: break-word;
}

.ce-wrap .ce-badge-page__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.ce-wrap .ce-badge-page__fact {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-height: 142px;
  padding: 18px 20px;
  border: 1px solid rgba(0, 41, 75, 0.08);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(248, 249, 250, 0.94)), var(--ce-bg-subtle);
  box-shadow: 0 16px 34px -28px rgba(0, 41, 75, 0.28);
}

.ce-wrap .ce-badge-page__fact-label {
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
}

.ce-wrap .ce-badge-page__fact-value {
  font-size: 1.32rem;
  line-height: 1.2;
  color: var(--ce-secondary);
  text-wrap: balance;
}

.ce-wrap .ce-badge-page__section {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 41, 75, 0.08);
}

.ce-wrap .ce-badge-page__section-title {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ce-secondary);
}

.ce-wrap .ce-badge-page__details {
  display: grid;
  gap: 14px;
  margin: 0;
}

.ce-wrap .ce-badge-page__detail {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
  gap: 10px 18px;
  padding: 16px 18px;
  border: 1px solid rgba(0, 41, 75, 0.08);
  border-radius: 18px;
  background: rgba(248, 249, 250, 0.8);
}

.ce-wrap .ce-badge-page__detail:first-child {
  padding-top: 16px;
}

.ce-wrap .ce-badge-page__detail dt {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ce-text-secondary);
}

.ce-wrap .ce-badge-page__detail dd {
  margin: 0;
  color: var(--ce-text);
}

.ce-wrap .ce-badge-page__detail a {
  color: var(--ce-primary);
  text-decoration: none;
}

.ce-wrap .ce-badge-page__detail a:hover,
.ce-wrap .ce-badge-page__detail a:focus {
  text-decoration: underline;
}

.ce-wrap .ce-badge-page__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.ce-wrap .ce-badge-page--empty .ce-card {
  text-align: center;
}

@media (max-width: 720px) {
  .ce-wrap .ce-badge-page__hero {
    padding: 22px;
  }

  .ce-wrap .ce-badge-page__hero-top {
    flex-direction: column;
  }

  .ce-wrap .ce-badge-page__brand {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-left: 0;
  }

  .ce-wrap .ce-badge-page__brand-name {
    text-align: left;
  }

  .ce-wrap .ce-badge-page__facts {
    grid-template-columns: 1fr;
  }

  .ce-wrap .ce-badge-page__detail {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (max-width: 540px) {
  .ce-wrap .ce-badge-page__title {
    font-size: 2.1rem;
  }

  .ce-wrap .ce-badge-page__brand-mark {
    width: 76px;
    height: 76px;
    border-radius: 20px;
  }

  .ce-wrap .ce-badge-page__fact {
    min-height: 0;
  }

  .ce-wrap .ce-badge-page__fact-value {
    font-size: 1.15rem;
  }
}

/* ============================================================
   12. Password strength indicator
   ============================================================ */
.ce-wrap .ce-password-strength {
  display: flex;
  gap: 4px;
  height: 4px;
  margin-top: 6px;
}

.ce-wrap .ce-password-strength__bar {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background: var(--ce-border);
  transition: background var(--ce-transition);
}

.ce-wrap .ce-password-strength[data-strength="1"] .ce-password-strength__bar:nth-child(-n + 1) {
  background: var(--ce-error);
}

.ce-wrap .ce-password-strength[data-strength="2"] .ce-password-strength__bar:nth-child(-n + 2) {
  background: var(--ce-warning);
}

.ce-wrap .ce-password-strength[data-strength="3"] .ce-password-strength__bar:nth-child(-n + 3) {
  background: #eab308;
}

.ce-wrap .ce-password-strength[data-strength="4"] .ce-password-strength__bar:nth-child(-n + 4) {
  background: var(--ce-success);
}

.ce-wrap .ce-password-strength__text {
  font-size: 0.75rem;
  color: var(--ce-text-secondary);
  margin-top: 4px;
}

.ce-wrap .fjs-form-field .ce-password-strength {
  display: flex;
  gap: 4px;
  height: 4px;
  margin-top: 6px;
}

.ce-wrap .fjs-form-field .ce-password-strength__bar {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background: var(--ce-border);
  transition: background var(--ce-transition);
}

.ce-wrap .fjs-form-field .ce-password-strength[data-strength="1"] .ce-password-strength__bar:nth-child(-n + 1) {
  background: var(--ce-error);
}

.ce-wrap .fjs-form-field .ce-password-strength[data-strength="2"] .ce-password-strength__bar:nth-child(-n + 2) {
  background: var(--ce-warning);
}

.ce-wrap .fjs-form-field .ce-password-strength[data-strength="3"] .ce-password-strength__bar:nth-child(-n + 3) {
  background: #eab308;
}

.ce-wrap .fjs-form-field .ce-password-strength[data-strength="4"] .ce-password-strength__bar:nth-child(-n + 4) {
  background: var(--ce-success);
}

.ce-wrap .fjs-form-field .ce-password-strength__text {
  font-size: 0.75rem;
  color: var(--ce-text-secondary);
  margin-top: 4px;
}

/* ============================================================
   13. Actions bar
   ============================================================ */
.ce-wrap .ce-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.ce-wrap .ce-actions--between {
  justify-content: space-between;
}

.ce-wrap .ce-actions--end {
  justify-content: flex-end;
}

/* ============================================================
   14. Table (for lists like addresses, documents)
   ============================================================ */
.ce-wrap .ce-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.ce-wrap .ce-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  color: var(--ce-text-secondary);
  border-bottom: 2px solid var(--ce-border);
  font-size: 0.813rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ce-wrap .ce-table td {
  padding: 12px;
  border-bottom: 1px solid var(--ce-border);
  vertical-align: middle;
}

.ce-wrap .ce-table tbody tr:last-child td {
  border-bottom: none;
}

.ce-wrap .ce-table tbody tr:hover {
  background: var(--ce-bg-subtle);
}

.ce-wrap .ce-table__empty {
  text-align: center;
  color: var(--ce-text-secondary);
  padding: 32px 12px;
}

/* ============================================================
   15. Utilities
   ============================================================ */
.ce-wrap .ce-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ce-wrap .ce-text-center {
  text-align: center;
}

.ce-wrap .ce-mt-0 {
  margin-top: 0;
}

/* ============================================================
   16. Responsive
   ============================================================ */
@media (max-width: 540px) {
  .ce-wrap .ce-card {
    padding: 24px 20px;
    margin: 16px auto;
    border-radius: var(--ce-radius);
  }

  .ce-wrap .ce-tab-content {
    padding: 24px 20px;
  }

  .ce-wrap .ce-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================================
   17. Account info table
   ============================================================ */
.ce-wrap .ce-portal-records {
  display: flex;
  flex-direction: column;
}

.ce-wrap .ce-portal-records__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-top: 18px;
}

.ce-wrap .ce-portal-records__metric {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 102px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, white 38%, var(--ce-border));
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.62) 54%,
    rgba(248, 250, 252, 0.5) 100%
  );
  box-shadow:
    0 16px 30px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
}

.ce-wrap .ce-portal-records__metric::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, transparent 38%),
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.24) 0, transparent 34%);
  pointer-events: none;
}

.ce-wrap .ce-portal-records__metric--blue {
  border-color: color-mix(in srgb, var(--ce-primary) 18%, var(--ce-border));
}

.ce-wrap .ce-portal-records__metric--green {
  border-color: color-mix(in srgb, #16a34a 18%, var(--ce-border));
}

.ce-wrap .ce-portal-records__metric--purple {
  border-color: color-mix(in srgb, #7c3aed 18%, var(--ce-border));
}

.ce-wrap .ce-portal-records__metric--amber {
  border-color: color-mix(in srgb, #d97706 18%, var(--ce-border));
}

.ce-wrap .ce-portal-records__metric-value {
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ce-text);
}

.ce-wrap .ce-portal-records__metric-label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
}

.ce-wrap .ce-portal-records__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
  padding-top: 18px;
}

.ce-wrap .ce-portal-records__grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.ce-wrap .ce-portal-records__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border: 1px solid color-mix(in srgb, white 38%, var(--ce-border));
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.64) 56%,
    rgba(248, 250, 252, 0.52) 100%
  );
  box-shadow:
    var(--ce-shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
}

.ce-wrap .ce-portal-records__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, transparent 36%),
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.28) 0, transparent 38%);
  pointer-events: none;
}

.ce-wrap .ce-portal-records__card--blue {
  border-color: color-mix(in srgb, var(--ce-primary) 18%, var(--ce-border));
}

.ce-wrap .ce-portal-records__card--address {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--ce-primary) 10%, transparent) 0, transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.66) 56%, rgba(248, 250, 252, 0.54) 100%);
  border-color: color-mix(in srgb, var(--ce-primary) 24%, var(--ce-border));
  box-shadow:
    var(--ce-shadow-lg),
    0 10px 28px color-mix(in srgb, var(--ce-primary) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

.ce-wrap .ce-portal-records__card--green {
  border-color: color-mix(in srgb, #16a34a 18%, var(--ce-border));
}

.ce-wrap .ce-portal-records__card--purple {
  border-color: color-mix(in srgb, #7c3aed 18%, var(--ce-border));
}

.ce-wrap .ce-portal-records__card--amber {
  border-color: color-mix(in srgb, var(--ce-primary) 24%, var(--ce-border));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--ce-primary) 10%, transparent) 0, transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.66) 56%, rgba(248, 250, 252, 0.54) 100%);
  box-shadow:
    var(--ce-shadow-lg),
    0 10px 28px color-mix(in srgb, var(--ce-primary) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

.ce-wrap .ce-portal-records__card--document {
  min-height: 188px;
}

.ce-wrap .ce-portal-records__card--document .ce-portal-records__meta-list {
  gap: 12px;
}

.ce-wrap .ce-portal-records__card--document .ce-portal-records__meta-row {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--ce-border) 82%, white);
}

.ce-wrap .ce-portal-records__card--document .ce-portal-records__meta-row:first-child {
  padding-top: 0;
  border-top: none;
}

.ce-wrap .ce-portal-records__downloads {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ce-wrap .ce-portal-records__download {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ce-primary) 12%, var(--ce-border));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.48) 100%);
  color: var(--ce-text);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
  transition:
    border-color var(--ce-transition),
    box-shadow var(--ce-transition),
    transform var(--ce-transition);
}

.ce-wrap .ce-portal-records__download:hover {
  border-color: color-mix(in srgb, var(--ce-primary) 24%, var(--ce-border));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 12px 22px color-mix(in srgb, var(--ce-primary) 10%, transparent);
  transform: translateY(-1px);
}

.ce-wrap .ce-portal-records__download--disabled {
  opacity: 0.6;
  pointer-events: none;
}

.ce-wrap .ce-portal-records__download-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ce-wrap .ce-portal-records__download-title {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ce-primary-hover);
}

.ce-wrap .ce-portal-records__download-meta {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--ce-text-secondary);
  white-space: nowrap;
}

.ce-wrap .ce-portal-records__card--split {
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
}

.ce-wrap .ce-portal-records__card-main {
  flex: 1;
  min-width: 0;
}

.ce-wrap .ce-portal-records__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ce-wrap .ce-portal-records__card-head--stacked {
  justify-content: flex-start;
}

.ce-wrap .ce-portal-records__card-head--address {
  align-items: center;
  justify-content: flex-start;
}

.ce-wrap .ce-portal-records__card-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.ce-wrap .ce-portal-records__card-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  flex-shrink: 0;
  color: var(--ce-primary);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ce-primary) 15%, white) 0%,
    color-mix(in srgb, var(--ce-primary) 6%, white) 100%
  );
  border: 1px solid color-mix(in srgb, var(--ce-primary) 18%, white);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 10px 20px color-mix(in srgb, var(--ce-primary) 12%, transparent);
}

.ce-wrap .ce-portal-records__card-title {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ce-text);
}

.ce-wrap .ce-portal-records__card-subtitle {
  display: block;
  margin-top: 4px;
  font-size: 0.79rem;
  line-height: 1.45;
  color: var(--ce-text-secondary);
}

.ce-wrap .ce-portal-records__meta-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.ce-wrap .ce-portal-records__meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.ce-wrap .ce-portal-records__meta-row dt {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
}

.ce-wrap .ce-portal-records__meta-row dd {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ce-text);
  text-align: right;
}

.ce-wrap .ce-portal-records__card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: auto;
}

.ce-wrap .ce-portal-records__card-footer--actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ce-wrap .ce-portal-records__action-btn {
  min-width: 118px;
  justify-content: center;
}

.ce-wrap .ce-portal-records__taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ce-wrap .ce-portal-records__tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--ce-bg-subtle);
  border: 1px solid var(--ce-border);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ce-text-secondary);
}

.ce-wrap .ce-portal-records__card--address .ce-portal-records__tag {
  background: color-mix(in srgb, var(--ce-primary) 8%, white);
  border-color: color-mix(in srgb, var(--ce-primary) 16%, var(--ce-border));
  color: var(--ce-primary-hover);
}

.ce-wrap .ce-portal-records__address {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-style: normal;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ce-text);
}

.ce-wrap .ce-portal-records__card--address .ce-portal-records__address {
  padding: 14px 15px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.46) 100%);
  border: 1px solid color-mix(in srgb, var(--ce-primary) 12%, var(--ce-border));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.ce-wrap .ce-portal-records__card--address .ce-portal-records__card-footer {
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--ce-primary) 10%, var(--ce-border));
}

.ce-wrap .ce-portal-records__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--ce-primary-light) 58%, white);
  border: 1px solid color-mix(in srgb, var(--ce-primary) 18%, var(--ce-border));
  box-shadow: var(--ce-shadow);
}

.ce-wrap .ce-portal-records__score-value {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ce-primary-hover);
}

.ce-wrap .ce-portal-records__score-label {
  margin-top: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-primary-hover);
}

.ce-wrap .ce-training-summary {
  padding-bottom: 14px;
}

.ce-wrap .ce-training-summary__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 128px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--ce-primary) 24%, var(--ce-border));
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--ce-primary) 12%, transparent) 0, transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.66) 54%, rgba(248, 250, 252, 0.54) 100%);
  box-shadow:
    var(--ce-shadow-lg),
    0 10px 28px color-mix(in srgb, var(--ce-primary) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
}

.ce-wrap .ce-training-summary__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68) 0%, transparent 36%),
    radial-gradient(circle at 18% 0, rgba(255, 255, 255, 0.3) 0, transparent 32%);
  pointer-events: none;
}

.ce-wrap .ce-training-summary__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ce-wrap .ce-training-summary__eyebrow {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ce-primary-hover);
}

.ce-wrap .ce-training-summary__value {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 0.95;
  font-weight: 800;
  color: var(--ce-text);
}

.ce-wrap .ce-training-summary__label {
  font-size: 0.88rem;
  line-height: 1.3;
  color: var(--ce-text-secondary);
}

.ce-wrap .ce-training-summary__icon-wrap {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 18px;
  color: var(--ce-primary);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ce-primary-light) 86%, white) 0%,
    color-mix(in srgb, var(--ce-primary) 6%, white) 100%
  );
  border: 1px solid color-mix(in srgb, var(--ce-primary) 20%, white);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    var(--ce-shadow-md),
    0 12px 24px color-mix(in srgb, var(--ce-primary) 16%, transparent);
}

.ce-wrap .ce-account {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ce-wrap .ce-account__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1.15fr) minmax(240px, 0.85fr);
  gap: 18px;
  align-items: center;
  padding: 24px;
  border: 1px solid color-mix(in srgb, white 38%, var(--ce-border));
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--ce-primary) 12%, transparent) 0, transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.66) 54%, rgba(248, 250, 252, 0.54) 100%);
  box-shadow:
    0 20px 40px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
}

.ce-wrap .ce-account__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68) 0%, transparent 36%),
    radial-gradient(circle at 18% 0, rgba(255, 255, 255, 0.34) 0, transparent 30%);
  pointer-events: none;
}

.ce-wrap .ce-account__avatar {
  width: 78px;
  height: 78px;
  font-size: 1.55rem;
  flex-shrink: 0;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--ce-primary) 22%, transparent);
  align-self: start;
}

.ce-wrap .ce-account__hero-copy {
  min-width: 0;
  align-self: center;
}

.ce-wrap .ce-account__eyebrow {
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ce-primary);
}

.ce-wrap .ce-account__name {
  margin: 0;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1.15;
  color: var(--ce-text);
}

.ce-wrap .ce-account__email {
  margin: 8px 0 0;
  font-size: 0.93rem;
  color: var(--ce-text-secondary);
}

.ce-wrap .ce-account__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ce-wrap .ce-account__chips--hero {
  grid-column: 2 / 4;
  margin-top: -4px;
}

.ce-wrap .ce-account__chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.35rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--ce-primary) 16%, white);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ce-primary) 6%, white);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ce-text);
}

.ce-wrap .ce-account__hero-side {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  min-width: 0;
}

.ce-wrap .ce-account__status-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 260px);
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, #16a34a 22%, color-mix(in srgb, white 32%, var(--ce-border)));
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #16a34a 8%, white) 0%,
    rgba(255, 255, 255, 0.68) 54%,
    rgba(248, 250, 252, 0.52) 100%
  );
  box-shadow:
    0 14px 28px rgba(21, 128, 61, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(22px) saturate(1.16);
  -webkit-backdrop-filter: blur(22px) saturate(1.16);
}

.ce-wrap .ce-account__status-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, transparent 42%),
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.22) 0, transparent 34%);
  pointer-events: none;
}

.ce-wrap .ce-account__status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: color-mix(in srgb, #16a34a 14%, transparent);
  color: #16a34a;
  flex-shrink: 0;
}

.ce-wrap .ce-account__status-label {
  display: block;
  margin-bottom: 2px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #15803d;
}

.ce-wrap .ce-account__status-value {
  display: block;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ce-text);
}

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

.ce-wrap .ce-account__delete-row {
  display: flex;
  justify-content: stretch;
  margin-top: 12px;
}

.ce-wrap .ce-account__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, white 38%, var(--ce-border));
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.64) 56%,
    rgba(248, 250, 252, 0.52) 100%
  );
  box-shadow:
    0 18px 34px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
}

.ce-wrap .ce-account__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, transparent 38%),
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.24) 0, transparent 34%);
  pointer-events: none;
}

.ce-wrap .ce-account__card--details {
  gap: 16px;
  border-color: color-mix(in srgb, var(--ce-primary) 18%, var(--ce-border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ce-primary) 3%, white) 0%,
    rgba(255, 255, 255, 0.98) 100%
  );
}

.ce-wrap .ce-account__card--security {
  border-color: color-mix(in srgb, #7c3aed 24%, var(--ce-border));
  background: linear-gradient(180deg, color-mix(in srgb, #7c3aed 5%, white) 0%, rgba(255, 255, 255, 0.99) 100%);
  box-shadow:
    0 20px 38px rgba(76, 29, 149, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

.ce-wrap .ce-account__card--doccheck {
  grid-column: 1 / -1;
  gap: 10px;
  border-color: color-mix(in srgb, #059669 22%, var(--ce-border));
  background: linear-gradient(180deg, color-mix(in srgb, #059669 4%, white) 0%, rgba(255, 255, 255, 0.99) 100%);
  box-shadow:
    0 20px 38px rgba(5, 150, 105, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

.ce-wrap .ce-account__doccheck-row {
  padding-top: 0;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.ce-wrap .ce-account__doccheck-row .ce-btn {
  margin-left: auto;
}

.ce-wrap .ce-account__card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.ce-wrap .ce-account__card-head--doccheck {
  justify-content: space-between;
  gap: 12px;
}

.ce-wrap .ce-account__card-head-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.ce-wrap .ce-account__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  flex-shrink: 0;
}

.ce-wrap .ce-account__card-icon--blue {
  background: color-mix(in srgb, var(--ce-primary) 12%, transparent);
  color: var(--ce-primary);
}

.ce-wrap .ce-account__card-icon--green {
  background: color-mix(in srgb, #16a34a 12%, transparent);
  color: #16a34a;
}

.ce-wrap .ce-account__card-icon--purple {
  background: color-mix(in srgb, #7c3aed 12%, transparent);
  color: #7c3aed;
}

.ce-wrap .ce-account__card-icon--orange {
  background: color-mix(in srgb, #ea580c 12%, transparent);
  color: #ea580c;
}

.ce-wrap .ce-account__card-title {
  margin: 0 0 4px;
  font-size: 1.08rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--ce-text) 82%, black);
}

.ce-wrap .ce-account__card-desc {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ce-text-secondary) 88%, var(--ce-text));
}

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

.ce-wrap .ce-account__detail-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ce-border);
  min-width: 0;
}

.ce-wrap .ce-account__detail-row dt {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
}

.ce-wrap .ce-account__detail-row dd {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--ce-text);
  word-break: break-word;
}

.ce-wrap .ce-account__inline-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0 0;
}

.ce-wrap .ce-account__inline-setting-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ce-wrap .ce-account__inline-setting-label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text);
}

.ce-wrap .ce-account__language-row,
.ce-wrap .ce-account__action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ce-wrap .ce-account__action-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ce-wrap .ce-account__card--doccheck .ce-account__action-copy {
  gap: 6px;
}

.ce-wrap .ce-account__doccheck-copy {
  max-width: 720px;
}

.ce-wrap .ce-account__doccheck-badge {
  flex-shrink: 0;
  align-self: flex-start;
}

.ce-wrap .ce-account__action-copy strong {
  font-size: 0.92rem;
  color: var(--ce-text);
  word-break: break-word;
}

.ce-wrap .ce-account__action-value--email {
  font-weight: 500;
  color: color-mix(in srgb, var(--ce-text) 88%, var(--ce-text-secondary));
}

.ce-wrap .ce-account__action-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text-secondary);
}

.ce-wrap .ce-account__action-label--danger {
  color: var(--ce-error);
}

.ce-wrap .ce-account__security-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ce-wrap .ce-account__security-stack > .ce-account__action-row + .ce-account__action-row,
.ce-wrap .ce-account__security-danger {
  padding-top: 14px;
  border-top: 1px solid var(--ce-border);
}

.ce-wrap .ce-account__security-danger {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.ce-wrap .ce-account__security-danger--subtle {
  align-items: center;
  padding: 12px 14px 0;
  border-top-color: color-mix(in srgb, var(--ce-border) 82%, transparent);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.05) 0%, rgba(148, 163, 184, 0.02) 100%);
}

.ce-wrap .ce-account__security-danger--standalone {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--ce-border) 90%, transparent);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.74) 0%, rgba(248, 250, 252, 0.86) 100%);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}

.ce-wrap .ce-account__security-danger--subtle .ce-account__action-copy strong {
  font-size: 0.84rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--ce-text-secondary) 88%, var(--ce-text));
}

.ce-wrap .ce-account__security-danger--subtle .ce-account__action-label--danger {
  color: color-mix(in srgb, var(--ce-text-secondary) 94%, var(--ce-text));
  font-weight: 700;
}

.ce-wrap .ce-account__security-danger--subtle .ce-account__muted {
  color: color-mix(in srgb, var(--ce-text-secondary) 96%, white);
}

.ce-wrap .ce-account__muted {
  font-size: 0.78rem;
  color: var(--ce-text-secondary);
}

.ce-wrap .ce-account__danger-btn {
  flex-shrink: 0;
  color: var(--ce-text-secondary);
  border-color: color-mix(in srgb, var(--ce-border) 86%, var(--ce-text-secondary));
  background: rgba(255, 255, 255, 0.65);
}

.ce-wrap .ce-account__danger-btn:hover,
.ce-wrap .ce-account__danger-btn:focus-visible {
  color: var(--ce-error);
  border-color: var(--ce-error);
}

.ce-wrap .ce-portal__info-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.ce-wrap .ce-portal__info-table tbody tr {
  transition: background 0.15s ease !important;
}

.ce-wrap .ce-portal__info-table tbody tr:hover {
  background: var(--ce-bg-subtle) !important;
}

.ce-wrap .ce-portal__info-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--ce-border) !important;
}

.ce-wrap .ce-portal__info-table td {
  padding: 14px 12px !important;
  font-size: 0.875rem !important;
  vertical-align: middle !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
}

.ce-wrap .ce-portal__info-label {
  font-weight: 600 !important;
  color: var(--ce-text-secondary) !important;
  white-space: nowrap !important;
  width: 160px !important;
  font-size: 0.8125rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.ce-wrap .ce-portal__info-value {
  color: var(--ce-text) !important;
  word-break: break-word !important;
  font-weight: 500 !important;
}

.ce-wrap .ce-portal__info-code {
  display: inline-block !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  background: var(--ce-bg-subtle) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.8125rem !important;
  color: var(--ce-text-secondary) !important;
  border: 1px solid var(--ce-border) !important;
  letter-spacing: 0.02em !important;
}

.ce-wrap .ce-portal__inline-form {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ce-wrap .ce-select--inline {
  display: inline-block !important;
  padding: 4px 8px !important;
  font-size: 0.875rem !important;
  font-family: var(--ce-font) !important;
  font-weight: 500 !important;
  color: var(--ce-text) !important;
  background: var(--ce-bg) !important;
  border: 1px solid var(--ce-border) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  min-width: 120px !important;
}

@media (max-width: 540px) {
  .ce-wrap .ce-portal-records__metrics,
  .ce-wrap .ce-portal-records__grid,
  .ce-wrap .ce-account__hero,
  .ce-wrap .ce-account__content-grid,
  .ce-wrap .ce-account__detail-list {
    grid-template-columns: 1fr;
  }

  .ce-wrap .ce-portal-records__card--split,
  .ce-wrap .ce-portal-records__meta-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .ce-wrap .ce-portal-records__meta-row dd {
    text-align: left;
  }

  .ce-wrap .ce-portal-records__score,
  .ce-wrap .ce-portal-records__card-footer--actions {
    width: 100%;
    justify-content: flex-start;
  }

  .ce-wrap .ce-training-summary__card {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
  }

  .ce-wrap .ce-training-summary__icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 18px;
  }

  .ce-wrap .ce-account__hero-main,
  .ce-wrap .ce-account__inline-setting,
  .ce-wrap .ce-account__language-row,
  .ce-wrap .ce-account__action-row,
  .ce-wrap .ce-account__doccheck-row,
  .ce-wrap .ce-account__security-danger {
    flex-direction: column;
    align-items: flex-start;
  }

  .ce-wrap .ce-account__chips--hero {
    grid-column: auto;
    margin-top: 0;
  }

  .ce-wrap .ce-account__delete-row {
    margin-top: 10px;
  }

  .ce-wrap .ce-account__card,
  .ce-wrap .ce-account__hero {
    padding: 16px;
  }

  .ce-wrap .ce-account__security-danger--standalone,
  .ce-wrap .ce-account__action-row .ce-btn,
  .ce-wrap .ce-account__language-row .ce-select-wrap {
    width: 100%;
  }

  .ce-wrap .ce-account__doccheck-row .ce-btn {
    width: auto;
    margin-left: auto;
    align-self: flex-end;
  }

  .ce-wrap .ce-portal__info-label {
    width: auto !important;
    white-space: normal !important;
    font-size: 0.6875rem !important;
  }

  .ce-wrap .ce-portal__info-table {
    table-layout: fixed !important;
  }

  .ce-wrap .ce-portal__info-table td {
    padding: 10px 8px !important;
  }

  .ce-wrap .ce-portal__info-table td:first-child {
    width: 110px !important;
  }

  .ce-wrap .ce-portal__info-table td:last-child {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .ce-wrap .ce-portal__info-code {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.6875rem !important;
  }

  .ce-wrap .ce-select--inline {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   18. Menu visibility helpers
   ============================================================ */
/* These classes are added to WP menu items via Appearance > Menus > CSS Classes.
   The plugin's JS toggles a body class based on login state. */
body.ce-logged-in .ce-show-logged-out,
body.ce-logged-out .ce-show-logged-in {
  display: none !important;
}

/* ============================================================
   19. Course listing – Container & Header
   ============================================================ */
.ce-courses {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.ce-courses__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.ce-courses__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: var(--ce-text, #1a1a1a);
}

.ce-courses__toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ============================================================
   20. Course listing – Filter bar
   ============================================================ */
.ce-courses-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ce-courses-filter__pill {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid var(--ce-border, #d1d5db);
  border-radius: var(--ce-radius-btn, 0px);
  color: var(--ce-text, #1a1a1a);
  background: transparent;
  text-decoration: none;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
  cursor: pointer;
  line-height: 1.4;
}

.ce-courses-filter__pill:hover {
  border-color: var(--ce-primary, #00a9cb);
  color: var(--ce-primary, #00a9cb);
  text-decoration: none;
}

.ce-courses-filter__pill--active {
  background: var(--ce-primary, #00a9cb);
  border-color: var(--ce-primary, #00a9cb);
  color: #fff;
}

.ce-courses-filter__pill--active:hover {
  background: var(--ce-primary-hover, #008da8);
  border-color: var(--ce-primary-hover, #008da8);
  color: #fff;
}

/* Tag filter row: appears below the category/layout row */
.ce-courses-filter--tags {
  margin-top: 0.5rem;
}

.ce-courses-filter__pill--tag {
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
}

/* ============================================================
   21. Course listing – Layout toggle
   ============================================================ */
.ce-layout-toggle {
  display: flex;
  border: 1px solid var(--ce-border, #d1d5db);
  border-radius: var(--ce-radius-btn, 0px);
  overflow: hidden;
}

.ce-layout-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ce-secondary-text, #6b7280);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.ce-layout-toggle__btn:hover {
  background: var(--ce-bg-subtle, #f3f4f6);
  color: var(--ce-text, #1a1a1a);
}

.ce-layout-toggle__btn--active {
  background: var(--ce-primary, #00a9cb);
  color: #fff;
}

.ce-layout-toggle__btn--active:hover {
  background: var(--ce-primary-hover, #008da8);
  color: #fff;
}

.ce-layout-toggle__btn + .ce-layout-toggle__btn {
  border-left: 1px solid var(--ce-border, #d1d5db);
}

/* ============================================================
   21b. Course listing – Search bar
   ============================================================ */
.ce-courses-search {
  margin-bottom: 1.5rem;
}

.ce-courses-search__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: stretch;
}

.ce-courses-search__field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 300px;
  min-width: 0;
}

.ce-courses-search__field--select {
  flex: 0 1 260px;
}

.ce-courses-search__field--select-filter {
  flex-basis: 220px;
}

.ce-courses-search__icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  color: var(--ce-secondary-text, #6b7280);
  pointer-events: none;
  z-index: 1;
}

/* CeSelect inside courses search: white background, icon padding, matching height */
.ce-courses .ce-courses-search__field--select {
  align-items: stretch;
}
.ce-courses .ce-courses-search__field--select .ce-select-wrap {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
.ce-courses .ce-courses-search__field--select .ce-select__trigger {
  flex: 0 0 auto !important;
  min-height: 49px !important;
  height: 49px !important;
  padding: 0.75rem 1.75rem 0.75rem 2.35rem !important;
  font-size: 0.875rem !important;
  align-items: center !important;
  white-space: nowrap !important;
  background: var(--ce-bg, #fff) !important;
  background-color: var(--ce-bg, #fff) !important;
  border-radius: var(--ce-radius, 6px) !important;
}

.ce-courses .ce-courses-search__field--select .ce-select__value,
.ce-courses .ce-courses-search__field--select .ce-select__option {
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

.ce-courses .ce-courses-search__field--select .ce-select__option-label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ce-courses .ce-courses-search__field .ce-courses-search__input {
  width: 100%;
  height: auto;
  padding: 0.75rem 0.875rem 0.75rem 2.35rem !important;
  margin: 0 !important;
  font-size: 0.875rem;
  border: 1px solid var(--ce-border, #d1d5db) !important;
  border-radius: var(--ce-radius, 6px) !important;
  background: var(--ce-bg, #fff) !important;
  color: var(--ce-text, #1a1a1a);
  box-shadow: none !important;
  box-sizing: border-box !important;
  line-height: 1.4;
  transition:
    border-color var(--ce-transition, 150ms ease),
    box-shadow var(--ce-transition, 150ms ease);
  outline: none;
}

.ce-courses .ce-courses-search__field .ce-courses-search__input:focus {
  border-color: var(--ce-primary, #00a9cb);
  box-shadow: 0 0 0 3px var(--ce-primary-light, rgba(0, 169, 203, 0.15));
}

.ce-courses .ce-courses-search__field .ce-courses-search__input::placeholder {
  color: var(--ce-secondary-text, #9ca3af);
}

.ce-courses .ce-courses-search__select {
  width: 100%;
  height: auto;
  padding: 0.75rem 2rem 0.75rem 2.75rem !important;
  margin: 0 !important;
  font-size: 0.875rem;
  border: 1px solid var(--ce-border, #d1d5db) !important;
  border-radius: var(--ce-radius, 6px) !important;
  background-color: var(--ce-bg, #fff) !important;
  color: var(--ce-text, #1a1a1a);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 12px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  line-height: 1.4;
  outline: none;
  transition:
    border-color var(--ce-transition, 150ms ease),
    box-shadow var(--ce-transition, 150ms ease);
}

.ce-courses .ce-courses-search__select:focus {
  border-color: var(--ce-primary, #00a9cb);
  box-shadow: 0 0 0 3px var(--ce-primary-light, rgba(0, 169, 203, 0.15));
}

.ce-courses .ce-courses-search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem !important;
  margin: 0 !important;
  font-size: 0.875rem;
  font-weight: 600;
  border: none !important;
  border-radius: var(--ce-radius-btn, 0px) !important;
  background: var(--ce-primary, #00a9cb) !important;
  color: #fff !important;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box !important;
  line-height: 1.4;
  transition:
    background var(--ce-transition, 150ms ease),
    box-shadow var(--ce-transition, 150ms ease);
}

.ce-courses .ce-courses-search__btn:hover {
  background: var(--ce-primary-hover, #008da8);
}

/* Active filter tags */
.ce-courses-search__active {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.ce-courses-search__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: min(100%, 34rem);
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--ce-radius-btn, 0px);
  background: var(--ce-primary-light, #e6f7fa);
  color: var(--ce-primary, #00a9cb);
  text-decoration: none;
  transition: background var(--ce-transition, 150ms ease);
}

.ce-courses-search__tag svg {
  flex: 0 0 auto;
}

.ce-courses-search__tag-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ce-courses-search__tag:hover {
  background: var(--ce-primary, #00a9cb);
  color: #fff;
  text-decoration: none;
}

/* ============================================================
   22. Course listing – Grid layout
   ============================================================ */
.ce-courses__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

/* List layout override */
.ce-courses__grid--list {
  grid-template-columns: 1fr;
  gap: 0;
}

/* ============================================================
   23. Course listing – Card (grid mode)
   ============================================================ */
.ce-course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--ce-radius-lg, 8px);
  background:
    radial-gradient(ellipse at top right, rgba(0, 169, 203, 0.07) 0%, transparent 65%),
    radial-gradient(ellipse at bottom left, rgba(0, 41, 75, 0.04) 0%, transparent 60%), var(--ce-bg, #fff);
  box-shadow:
    var(--ce-shadow),
    0 0 0 1px rgba(0, 169, 203, 0.07),
    0 4px 18px -6px rgba(0, 169, 203, 0.18);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition:
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ce-course-card:hover {
  box-shadow:
    var(--ce-shadow-lg),
    0 0 0 1px rgba(0, 169, 203, 0.2),
    0 16px 40px -10px rgba(0, 169, 203, 0.4);
  transform: translateY(-6px);
}

/* Card image */
.ce-course-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ce-secondary, #00294b);
}

.ce-course-card__image img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition:
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.5s ease;
}

.ce-course-card:hover .ce-course-card__image img {
  transform: scale(1.08);
}

/* Cinematic gradient overlay on image */
.ce-course-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 78%, rgba(0, 41, 75, 0.45) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Category chip — overlaid on image bottom-left */
.ce-course-card__image::before {
  content: attr(data-category);
  display: none; /* using PHP-rendered category instead */
}

.ce-course-card__image-badges {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  gap: 0.375rem;
  z-index: 2;
}

/* Card body */
.ce-course-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem 1.25rem 1rem;
}

.ce-course-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.ce-course-card__category {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ce-primary, #00a9cb);
  padding: 0.125rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: var(--ce-radius-btn, 0px);
  line-height: 1.6;
}

.ce-course-card__badges {
  display: flex;
  gap: 0.375rem;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}

/* Badge base */
.ce-course-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--ce-radius-btn, 0px);
  line-height: 1.5;
  text-transform: uppercase;
}

.ce-course-card__badge--success {
  background: var(--ce-success, #16a34a);
  color: #fff;
}

.ce-course-card__badge--warning {
  background: var(--ce-warning, #ca8a04);
  color: #fff;
}

.ce-course-card__badge--error {
  background: var(--ce-error, #dc2626);
  color: #fff;
}

.ce-course-card__badge--new {
  background: var(--ce-primary, #00a9cb);
  color: #fff;
}

/* Glassmorphic badges on image overlay */
.ce-course-card__image-badges .ce-course-card__badge {
  backdrop-filter: blur(16px) saturate(1.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ce-course-card__image-badges .ce-course-card__badge--success {
  background: rgba(22, 163, 74, 0.7);
}

.ce-course-card__image-badges .ce-course-card__badge--warning {
  background: rgba(202, 138, 4, 0.75);
}

.ce-course-card__image-badges .ce-course-card__badge--error {
  background: rgba(220, 38, 38, 0.7);
}

.ce-course-card__image-badges .ce-course-card__badge--new {
  background: rgba(0, 169, 203, 0.7);
}

.ce-course-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 0.125rem;
  color: var(--ce-text, #1a1a1a);
  line-height: 1.35;
}

.ce-course-card__course-number {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ce-secondary-text, #9ca3af);
  font-family: monospace, monospace;
  letter-spacing: 0.03em;
  margin-bottom: 0.375rem;
}

.ce-course-card__desc {
  font-size: 0.8125rem;
  color: var(--ce-secondary-text, #6b7280);
  margin: 0 0 0.75rem;
  line-height: 1.55;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ce-course-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}

.ce-course-card__meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ce-secondary-text, #6b7280);
}

.ce-course-card__meta-item svg {
  flex-shrink: 0;
  color: var(--ce-primary, #00a9cb);
  opacity: 0.8;
}

.ce-course-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ce-border, #d1d5db);
  margin-top: auto;
}

.ce-course-card__price-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ce-course-card__price {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ce-secondary, #00294b);
  letter-spacing: -0.01em;
}

.ce-course-card__vat {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--ce-secondary-text, #6b7280);
}

.ce-course-card__details-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ce-text-secondary, #9ca3af);
  border: none;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--ce-transition, 150ms ease);
}

.ce-course-card__details-btn:hover {
  color: var(--ce-primary, #00a9cb);
  background: transparent;
}

/* Stretched link – macht die gesamte Karte klickbar */
.ce-course-card__details-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}

.ce-course-card__details-btn svg {
  flex-shrink: 0;
}

/* Grid mode: hide body badges when image is present (shown on image overlay instead) */
.ce-course-card__image + .ce-course-card__body .ce-course-card__badges {
  display: none;
}

/* Disabled card (booked out) */
.ce-course-card--disabled {
  opacity: 0.55;
  filter: grayscale(0.3);
}

.ce-course-card--disabled:hover {
  transform: none;
  box-shadow: var(--ce-shadow);
}

.ce-course-card--disabled .ce-course-card__image img {
  filter: grayscale(0.7) brightness(0.85);
}

/* ============================================================
   23b. Course listing – Seats progress bar
   ============================================================ */
.ce-course-card__seats {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}

.ce-course-card__seats-bar {
  width: 100%;
  height: 6px;
  background: var(--ce-bg-subtle, #f3f4f6);
  border-radius: var(--ce-radius, 6px);
  overflow: hidden;
}

.ce-course-card__seats-fill {
  height: 100%;
  border-radius: var(--ce-radius, 6px);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.ce-course-card__seats-fill--success {
  background: linear-gradient(90deg, var(--ce-success, #16a34a), #34d399);
}

.ce-course-card__seats-fill--warning {
  background: linear-gradient(90deg, var(--ce-warning, #ca8a04), #fbbf24);
}

.ce-course-card__seats-fill--error {
  background: linear-gradient(90deg, var(--ce-error, #dc2626), #f87171);
}

.ce-course-card__seats-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--ce-secondary-text, #6b7280);
}

.ce-course-card__seats-label svg {
  opacity: 0.6;
  flex-shrink: 0;
}

/* ============================================================
   24. Course listing – List mode card overrides
   ============================================================ */

/* List layout: single column, standalone cards */
.ce-courses__grid--list {
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Card becomes a horizontal layout */
.ce-courses__grid--list .ce-course-card {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}

/* Thumbnail on the left — larger, cinematic */
.ce-courses__grid--list .ce-course-card__image {
  width: 280px;
  min-width: 280px;
  aspect-ratio: auto;
  align-self: stretch;
}

.ce-courses__grid--list .ce-course-card__image img {
  height: 100%;
  object-fit: cover;
}

/* Hide image overlay badges in list mode — body badges are shown instead */
.ce-courses__grid--list .ce-course-card__image-badges {
  display: none;
}

/* Body: vertical stack on the right */
.ce-courses__grid--list .ce-course-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.75rem;
}

/* Show body badges in list mode (override grid rule) */
.ce-courses__grid--list .ce-course-card__image + .ce-course-card__body .ce-course-card__badges {
  display: flex;
}

/* Header */
.ce-courses__grid--list .ce-course-card__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.375rem;
}

/* Title */
.ce-courses__grid--list .ce-course-card__title {
  font-size: 1.25rem;
  margin-bottom: 0.375rem;
}

/* Show excerpt in list mode */
.ce-courses__grid--list .ce-course-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ce-secondary-text, #6b7280);
  margin-bottom: 0.75rem;
}

/* Meta row: horizontal, compact */
.ce-courses__grid--list .ce-course-card__meta {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 0.75rem;
}

/* Footer */
.ce-courses__grid--list .ce-course-card__footer {
  margin-top: auto;
  padding-top: 0.75rem;
}

/* Seats bar wider in list mode */
.ce-courses__grid--list .ce-course-card__seats {
  max-width: 280px;
}

/* Price bigger in list mode */
.ce-courses__grid--list .ce-course-card__price {
  font-size: 1.375rem;
}

/* ============================================================
   25. Course listing – Pagination
   ============================================================ */
.ce-courses-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ce-border, #d1d5db);
}

.ce-courses-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--ce-border, #d1d5db);
  border-radius: var(--ce-radius-btn, 0px);
  color: var(--ce-text, #1a1a1a);
  text-decoration: none;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.ce-courses-pagination__link:hover {
  border-color: var(--ce-primary, #00a9cb);
  color: var(--ce-primary, #00a9cb);
  text-decoration: none;
}

.ce-courses-pagination__link--active {
  background: var(--ce-primary, #00a9cb);
  border-color: var(--ce-primary, #00a9cb);
  color: #fff;
}

/* ============================================================
   26. Course listing – Empty state
   ============================================================ */
.ce-courses__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4rem 1.5rem;
  color: var(--ce-secondary-text, #6b7280);
  border: 1px dashed var(--ce-border, #d1d5db);
  border-radius: var(--ce-radius-lg, 8px);
  gap: 0.5rem;
}

.ce-courses__empty-icon {
  color: var(--ce-border, #d1d5db);
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.ce-courses__empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ce-text, #1a1a1a);
  margin: 0;
}

.ce-courses__empty-hint {
  font-size: 0.875rem;
  color: var(--ce-text-secondary, #9ca3af);
  margin: 0;
}

/* ============================================================
   27. Course listing – Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .ce-courses__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ce-courses__grid--list .ce-course-card__image {
    width: 220px;
    min-width: 220px;
  }
}

@media (max-width: 640px) {
  .ce-courses__grid {
    grid-template-columns: 1fr;
  }

  .ce-courses__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .ce-courses__toolbar {
    width: 100%;
    justify-content: space-between;
  }

  /* Search bar: stack on mobile */
  .ce-courses-search__row {
    flex-direction: column;
  }

  .ce-courses-search__field--select {
    flex: 1;
  }

  .ce-courses-results-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .ce-courses-results-bar__controls {
    width: 100%;
    justify-content: space-between;
  }

  .ce-courses-sort {
    width: 100%;
    flex-basis: auto;
  }

  /* List mode: stack vertically on mobile */
  .ce-courses__grid--list .ce-course-card {
    flex-direction: column;
    align-items: stretch;
  }

  .ce-courses__grid--list .ce-course-card__image {
    width: 100%;
    min-width: 0;
    aspect-ratio: 2.5 / 1;
  }

  .ce-courses__grid--list .ce-course-card__image-badges {
    display: flex;
  }

  .ce-courses__grid--list .ce-course-card__image + .ce-course-card__body .ce-course-card__badges {
    display: none;
  }

  .ce-courses__grid--list .ce-course-card__body {
    padding: 1rem;
  }

  .ce-courses__grid--list .ce-course-card__meta {
    flex-direction: column;
    gap: 0.5rem;
  }

  .ce-courses__grid--list .ce-course-card__seats {
    max-width: 100%;
  }

  .ce-courses__grid--list .ce-course-card__footer {
    margin-left: 0;
    width: 100%;
  }
}

/* ============================================================
   28. Course listing – Results count
   ============================================================ */
.ce-courses-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.1rem;
}

.ce-courses-results-bar__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-left: auto;
}

.ce-courses__results-count {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0.45rem 0.95rem 0.45rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--ce-primary, #00a9cb) 16%, white);
  border-radius: var(--ce-radius-btn, 0px);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ce-primary, #00a9cb) 7%, white) 0%,
    rgba(255, 255, 255, 0.98) 100%
  );
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.ce-courses__results-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.65rem;
  border-radius: var(--ce-radius-btn, 0px);
  background: color-mix(in srgb, var(--ce-primary, #00a9cb) 13%, white);
  color: var(--ce-primary, #00a9cb);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

.ce-courses__results-count-text {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ce-text, #1a1a1a);
  white-space: nowrap;
}

.ce-courses-sort {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 180px;
  min-width: 160px;
}

.ce-courses-sort__icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  color: var(--ce-secondary-text, #6b7280);
  pointer-events: none;
  z-index: 1;
}

.ce-courses .ce-courses-sort .ce-select-wrap {
  width: 100% !important;
}

.ce-courses .ce-courses-sort .ce-select__trigger {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 0.55rem 1.75rem 0.55rem 2.35rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  background: var(--ce-bg, #fff) !important;
  border: 1px solid var(--ce-border, #d1d5db) !important;
  border-radius: var(--ce-radius-btn, 0px) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04) !important;
}

/* ============================================================
   29. Course listing – Card entrance animation
   ============================================================ */
@keyframes ceCardIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ce-courses__grid .ce-course-card {
  animation: ceCardIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ce-courses__grid .ce-course-card:nth-child(1) {
  animation-delay: 0ms;
}
.ce-courses__grid .ce-course-card:nth-child(2) {
  animation-delay: 55ms;
}
.ce-courses__grid .ce-course-card:nth-child(3) {
  animation-delay: 110ms;
}
.ce-courses__grid .ce-course-card:nth-child(4) {
  animation-delay: 165ms;
}
.ce-courses__grid .ce-course-card:nth-child(5) {
  animation-delay: 220ms;
}
.ce-courses__grid .ce-course-card:nth-child(6) {
  animation-delay: 275ms;
}
.ce-courses__grid .ce-course-card:nth-child(n + 7) {
  animation-delay: 310ms;
}

@media (prefers-reduced-motion: reduce) {
  .ce-courses__grid .ce-course-card {
    animation: none;
  }

  .ce-course-card {
    transition: none;
  }

  .ce-course-card__image img {
    transition: none;
  }
}

/* ============================================================
   30a. Courses Vue – button reset overrides
   The global .ce-wrap button reset uses !important which
   strips border/padding/background from pill & tag buttons.
   These overrides restore the visual intent for <button> variants.
   ============================================================ */

/* Layout toggle active state */
.ce-wrap .ce-layout-toggle__btn--active {
  background: var(--ce-primary, #00a9cb) !important;
  color: #fff !important;
}
.ce-wrap .ce-layout-toggle__btn--active:hover {
  background: var(--ce-primary-hover, #008da8) !important;
  color: #fff !important;
}

/* Filter pills rendered as <button> */
.ce-courses button.ce-courses-filter__pill {
  display: inline-block !important;
  padding: 0.375rem 0.875rem !important;
  background: transparent !important;
  border: 1px solid var(--ce-border, #d1d5db) !important;
  border-radius: var(--ce-radius-btn, 0px) !important;
  color: var(--ce-text, #1a1a1a) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s !important;
}
.ce-courses button.ce-courses-filter__pill:hover {
  border-color: var(--ce-primary, #00a9cb) !important;
  color: var(--ce-primary, #00a9cb) !important;
}
.ce-courses button.ce-courses-filter__pill--active {
  background: var(--ce-primary, #00a9cb) !important;
  border-color: var(--ce-primary, #00a9cb) !important;
  color: #fff !important;
}
.ce-courses button.ce-courses-filter__pill--active:hover {
  background: var(--ce-primary-hover, #008da8) !important;
  border-color: var(--ce-primary-hover, #008da8) !important;
}

/* Active search-filter tags rendered as <button> */
.ce-courses button.ce-courses-search__tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding: 0.25rem 0.625rem !important;
  background: var(--ce-primary-light, #e6f7fa) !important;
  border-radius: var(--ce-radius-btn, 0px) !important;
  color: var(--ce-primary, #00a9cb) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  transition: background var(--ce-transition, 150ms ease) !important;
}
.ce-courses button.ce-courses-search__tag:hover {
  background: var(--ce-primary, #00a9cb) !important;
  color: #fff !important;
}

/* Pagination links rendered as <button> */
.ce-courses-pagination button.ce-courses-pagination__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border: 1px solid var(--ce-border, #d1d5db) !important;
  border-radius: var(--ce-radius-btn, 0px) !important;
  color: var(--ce-text, #1a1a1a) !important;
  background: transparent !important;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s !important;
}
.ce-courses-pagination button.ce-courses-pagination__link:hover:not(:disabled) {
  border-color: var(--ce-primary, #00a9cb) !important;
  color: var(--ce-primary, #00a9cb) !important;
}
.ce-courses-pagination button.ce-courses-pagination__link:disabled {
  opacity: 0.35 !important;
  cursor: default !important;
}

/* ============================================================
   30. Course listing – No-image card accent strip
   ============================================================ */
.ce-course-card--no-image {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--ce-primary, #00a9cb), var(--ce-secondary, #00294b)) 1;
}

/* ============================================================
   31. Course listing – Pagination ellipsis
   ============================================================ */
.ce-courses-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  font-size: 0.875rem;
  color: var(--ce-text-secondary, #9ca3af);
  user-select: none;
}

/* ============================================================
   32. Course listing – Skeleton loader
   ============================================================ */

/* Hide real cards while loading; hide skeletons when ready */
.ce-courses__grid--loading .ce-course-card {
  display: none;
}

.ce-courses__grid:not(.ce-courses__grid--loading) .ce-course-card-skeleton {
  display: none;
}

@keyframes ceShimmer {
  0% {
    background-position: -600px 0;
  }
  100% {
    background-position: 600px 0;
  }
}

.ce-course-card-skeleton {
  border-radius: var(--ce-radius-lg, 8px);
  background: var(--ce-bg, #fff);
  box-shadow: var(--ce-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ce-course-card-skeleton__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(90deg, #f0f2f5 25%, #e4e8ed 50%, #f0f2f5 75%);
  background-size: 1200px 100%;
  animation: ceShimmer 1.5s infinite linear;
}

.ce-course-card-skeleton__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.ce-course-card-skeleton__line {
  height: 12px;
  border-radius: var(--ce-radius, 6px);
  background: linear-gradient(90deg, #f0f2f5 25%, #e4e8ed 50%, #f0f2f5 75%);
  background-size: 1200px 100%;
  animation: ceShimmer 1.5s infinite linear;
  width: 100%;
}

.ce-course-card-skeleton__line--sm {
  height: 10px;
  width: 45%;
}
.ce-course-card-skeleton__line--title {
  height: 18px;
  width: 85%;
  animation-delay: 0.1s;
}
.ce-course-card-skeleton__line--short {
  width: 65%;
  animation-delay: 0.15s;
}

/* List-mode skeleton */
.ce-courses__grid--list .ce-course-card-skeleton {
  flex-direction: row;
}

.ce-courses__grid--list .ce-course-card-skeleton__image {
  width: 280px;
  min-width: 280px;
  aspect-ratio: auto;
  align-self: stretch;
}

@media (max-width: 640px) {
  .ce-courses__grid--list .ce-course-card-skeleton {
    flex-direction: column;
  }

  .ce-courses__grid--list .ce-course-card-skeleton__image {
    width: 100%;
    min-width: 0;
    aspect-ratio: 2.5 / 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ce-course-card-skeleton__image,
  .ce-course-card-skeleton__line {
    animation: none;
  }
}

/* ==========================================================================
   33. Course Detail Page
   ========================================================================== */

/* -- Wrapper ---------------------------------------------------------------- */
.ce-course-detail {
  --detail-hero-image: none;
  font-family: var(--ce-font, inherit);
  color: var(--ce-text, #1f2937);
}

/* -- Hero ------------------------------------------------------------------- */
.ce-course-detail__hero {
  position: relative;
  min-height: 480px;
  background-image: var(--detail-hero-image);
  background-size: cover;
  background-position: center;
  background-color: var(--ce-secondary, #00294b);
  display: flex;
  flex-direction: column;
  border-radius: var(--ce-radius-lg) var(--ce-radius-lg) 0 0;
  overflow: hidden;
}

.ce-course-detail__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(0, 41, 75, 0.4) 0%, rgba(0, 41, 75, 0.72) 55%, rgba(0, 41, 75, 0.93) 100%);
}

.ce-course-detail__hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: 2rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.ce-course-detail__hero-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ce-wrap .ce-course-detail__share-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.28) !important;
  background-image: none !important;
  border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  font-size: inherit !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition:
    background 0.18s,
    transform 0.15s;
}

.ce-wrap .ce-course-detail__share-btn:hover {
  background: rgba(255, 255, 255, 0.42) !important;
  background-image: none !important;
  transform: scale(1.1);
}

.ce-course-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition:
    color 0.18s,
    background 0.18s;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 20px;
  margin-left: -10px;
}

.ce-course-detail__back:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.ce-course-detail__hero-bottom {
  margin-top: auto;
  padding-top: 2rem;
}

.ce-course-detail__hero-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1rem;
}

.ce-course-detail__hero-cat {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.ce-course-detail__hero-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 0.6rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.ce-course-detail__hero-sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ce-course-detail__hero-sep {
  opacity: 0.5;
}

/* -- Facts Strip ------------------------------------------------------------ */
.ce-course-detail__facts-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--ce-secondary, #00294b);
  border-radius: 0 0 var(--ce-radius-lg) var(--ce-radius-lg);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 41, 75, 0.18);
}

.ce-course-detail__fact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1.1rem 1.5rem;
  color: rgba(255, 255, 255, 0.9);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.18s;
  cursor: default;
}

.ce-course-detail__fact:last-child {
  border-right: none;
}

.ce-course-detail__fact svg {
  flex-shrink: 0;
  color: var(--ce-primary, #00a9cb);
}

.ce-course-detail__fact-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1;
  margin-bottom: 3px;
}

.ce-course-detail__fact-value {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
}

/* -- Body: 3-col ------------------------------------------------------------ */
.ce-course-detail__body {
  display: grid;
  grid-template-columns: 80px 1fr 300px;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2.5rem 2rem 3rem;
  width: 100%;
  box-sizing: border-box;
  align-items: start;
}

/* -- Main column ------------------------------------------------------------ */
.ce-course-detail__main {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.ce-course-detail__section {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--ce-border, #e5e7eb);
  scroll-margin-top: 2rem;
  min-width: 0;
}

.ce-course-detail__section:first-child {
  padding-top: 0;
}

.ce-course-detail__section:last-child {
  border-bottom: none;
}

.ce-course-detail__section-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ce-secondary, #00294b);
  margin: 0 0 1rem;
  padding-left: 0.875rem;
  border-left: 3px solid var(--ce-primary, #00a9cb);
}

.ce-course-detail__section-text {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--ce-text, #374151);
  margin: 0;
}

.ce-course-detail__custom-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 0;
}

.ce-course-detail__custom-field {
  padding: 0.85rem 1rem;
  border: 1px solid var(--ce-border, #e5e7eb);
  border-radius: var(--ce-radius);
  background: #fff;
}

.ce-course-detail__custom-field-label {
  margin: 0 0 0.35rem;
  color: var(--ce-muted, #6b7280);
  font-size: 0.78rem;
  font-weight: 700;
}

.ce-course-detail__custom-field-value {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  color: var(--ce-secondary, #00294b);
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.45;
}

.ce-course-detail__custom-field-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--ce-soft, #eef6f8);
  padding: 0.2rem 0.55rem;
}

.ce-course-detail__custom-fields--compact {
  grid-template-columns: 1fr;
  margin-top: 1rem;
}

.ce-course-detail__custom-fields--compact .ce-course-detail__custom-field {
  padding: 0;
  border: none;
  background: transparent;
}

/* Highlights (checklist) */
.ce-course-detail__highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1.5rem;
}

.ce-course-detail__highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ce-text, #374151);
}

.ce-course-detail__check {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--ce-primary, #00a9cb);
}

/* Agenda (timeline) */
.ce-course-detail__agenda {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ce-course-detail__agenda-item {
  display: flex;
  gap: 1.45rem;
  align-items: flex-start;
  padding-bottom: 1.65rem;
  margin-bottom: 0 !important;
  position: relative;
}

.ce-course-detail__agenda-item:last-child {
  padding-bottom: 0;
}

/* Vertical line connecting steps */
.ce-course-detail__agenda-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 52px;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ce-primary, #00a9cb) 24%, transparent),
    var(--ce-border, #e5e7eb)
  );
}

.ce-course-detail__agenda-step {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ce-primary, #00a9cb);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  border: 3px solid #fff;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ce-primary, #00a9cb) 18%, transparent),
    0 0 0 7px color-mix(in srgb, var(--ce-primary, #00a9cb) 8%, transparent);
}

.ce-course-detail__agenda-step::after {
  content: "";
  position: absolute;
  inset: -12px;
  border: 1px dashed color-mix(in srgb, var(--ce-primary, #00a9cb) 26%, transparent);
  border-radius: inherit;
  pointer-events: none;
}

.ce-course-detail__agenda-step svg {
  width: 18px;
  height: 18px;
}

.ce-course-detail__agenda-content {
  padding-top: 5px;
  flex: 1;
}

.ce-course-detail__agenda-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ce-secondary, #00294b);
  display: block;
  margin-bottom: 4px;
}

.ce-course-detail__agenda-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
  margin-bottom: 4px;
}

.ce-course-detail__agenda-time {
  display: inline-flex;
  align-items: center;
  color: var(--ce-primary, #00a9cb);
  font-size: 0.78rem;
  font-weight: 700;
}

.ce-course-detail__agenda-duration {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  width: fit-content;
  min-height: 24px;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #f3f4f6;
  border: 1px solid rgba(17, 24, 39, 0.08);
  color: #111827;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
}

.ce-course-detail__agenda-duration svg {
  width: 12px;
  height: 12px;
  color: #6b7280;
  stroke-width: 2.4;
}

.ce-course-detail__agenda-desc {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.55;
}

/* Portal agenda */
.ce-wrap .ce-portal__agenda {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.ce-wrap .ce-portal__agenda-item {
  position: relative !important;
  display: flex !important;
  gap: 1rem !important;
  align-items: flex-start !important;
  padding-bottom: 1.25rem !important;
  margin-bottom: 0 !important;
}

.ce-wrap .ce-portal__agenda-item:last-child {
  padding-bottom: 0 !important;
}

.ce-wrap .ce-portal__agenda-item:not(:last-child)::before {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  top: 36px !important;
  bottom: 0 !important;
  width: 2px !important;
  transform: translateX(-50%) !important;
  background: var(--ce-border, #e5e7eb) !important;
}

.ce-wrap .ce-portal__agenda-step {
  position: relative !important;
  z-index: 1 !important;
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--ce-primary, #00a9cb) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
}

.ce-wrap .ce-portal__agenda-step svg {
  width: 18px !important;
  height: 18px !important;
}

.ce-wrap .ce-portal__agenda-content {
  flex: 1 !important;
  min-width: 0 !important;
  padding-top: 5px !important;
}

.ce-wrap .ce-portal__agenda-title {
  display: block !important;
  margin-bottom: 4px !important;
  color: var(--ce-secondary, #00294b) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

.ce-wrap .ce-portal__agenda-time {
  display: block !important;
  margin-bottom: 4px !important;
  color: var(--ce-primary, #00a9cb) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
}

.ce-wrap .ce-portal__agenda-desc {
  margin: 0 !important;
  color: var(--ce-text-muted, #6b7280) !important;
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
}

/* Requirements */
.ce-course-detail__requirements {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ce-course-detail__req-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.9rem;
  color: var(--ce-text, #374151);
  line-height: 1.5;
}

.ce-course-detail__req-item svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #9ca3af;
}

.ce-course-detail__req-item--met svg {
  color: #1f7a52;
}

.ce-course-detail__req-item--unmet svg {
  color: #b42318;
}

.ce-course-detail__req-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ce-course-detail__req-link {
  color: #8a4d23;
  font-size: 0.825rem;
  font-weight: 600;
  text-decoration: none;
}

.ce-course-detail__req-link:hover,
.ce-course-detail__req-link:focus-visible {
  text-decoration: underline;
}

/* Lecturer cards */
.ce-course-detail__lecturers {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.ce-course-detail__lecturers--stack {
  grid-template-columns: 1fr;
}

.ce-course-detail__lecturers--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.ce-course-detail__lecturer-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-height: 100%;
  min-width: 0;
  padding: 1.25rem 1.4rem;
  border: 1px solid rgba(0, 41, 75, 0.1);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(0, 169, 203, 0.12), transparent 42%),
    linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  box-shadow: 0 16px 40px rgba(0, 41, 75, 0.08);
}

.ce-course-detail__lecturer-head {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.ce-course-detail__lecturer-avatar,
.ce-course-detail__lecturer-avatar-image {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 22px;
}

.ce-course-detail__lecturer-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ce-primary, #00a9cb), var(--ce-secondary, #00294b));
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 24px rgba(0, 41, 75, 0.18);
}

.ce-course-detail__lecturer-avatar-image {
  display: block;
  object-fit: cover;
  border: 1px solid rgba(0, 41, 75, 0.08);
  box-shadow: 0 10px 24px rgba(0, 41, 75, 0.12);
}

.ce-course-detail__lecturer-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.35rem;
}

.ce-course-detail__lecturer-name {
  font-size: 1.03rem;
  font-weight: 700;
  color: var(--ce-secondary, #00294b);
}

.ce-course-detail__lecturer-title {
  font-size: 0.8rem;
  color: var(--ce-primary, #00a9cb);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ce-course-detail__lecturer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ce-course-detail__lecturer-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.36rem 0.7rem;
  border-radius: 999px;
  background: rgba(0, 169, 203, 0.1);
  color: var(--ce-secondary, #00294b);
  font-size: 0.78rem;
  font-weight: 600;
}

.ce-course-detail__lecturer-bio {
  margin: 0;
  color: #4b5563;
  font-size: 0.92rem;
  line-height: 1.65;
}

.ce-course-detail__lecturer-bio p {
  margin: 0 0 0.55em;
}

.ce-course-detail__lecturer-bio p:last-child {
  margin-bottom: 0;
}

.ce-course-detail__lecturer-bio ul,
.ce-course-detail__lecturer-bio ol {
  margin: 0.45em 0 0;
  padding-left: 1.25em;
}

/* -- Sidebar (Sticky Booking Card) ----------------------------------------- */
.ce-course-detail__sidebar {
  position: sticky;
  top: 2rem;
}

.ce-course-detail__booking {
  background: #fff;
  border: 1px solid var(--ce-border, #e5e7eb);
  border-radius: var(--ce-radius-lg);
  padding: 1.5rem;
  box-shadow:
    0 4px 24px rgba(0, 41, 75, 0.12),
    0 1px 4px rgba(0, 41, 75, 0.06);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ce-course-detail__booking-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ce-course-detail__booking-price--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.ce-course-detail__booking-amount {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--ce-secondary, #00294b);
  line-height: 1;
}

.ce-course-detail__booking-vat {
  font-size: 0.78rem;
  color: #9ca3af;
  line-height: 1.25;
}

/* CTA button (reuse existing .ce-btn styles) */
.ce-btn--full {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.ce-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.7rem 1.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    background 0.18s,
    color 0.18s,
    border-color 0.18s,
    opacity 0.18s;
  border-radius: var(--ce-radius-btn, 0px);
}

.ce-btn--primary {
  background: var(--ce-primary, #00a9cb);
  color: #fff;
  border-color: var(--ce-primary, #00a9cb);
}

.ce-btn--primary:hover {
  background: var(--ce-secondary, #00294b);
  border-color: var(--ce-secondary, #00294b);
  color: #fff;
}

.ce-btn--secondary {
  background: transparent;
  color: var(--ce-secondary, #00294b);
  border-color: var(--ce-secondary, #00294b);
  opacity: 0.6;
  cursor: not-allowed;
}

.ce-course-detail__booking > .ce-btn:disabled,
.ce-course-detail__mobile-cta > .ce-btn:disabled {
  background: #dbe7ee;
  color: #355066;
  border-color: #dbe7ee;
  opacity: 1;
  box-shadow: none;
}

.ce-course-detail__booking > .ce-course-detail__booking-cta--blocked:disabled,
.ce-course-detail__mobile-cta > .ce-course-detail__booking-cta--blocked:disabled {
  background: #f6f9fb !important;
  color: var(--ce-secondary, #00294b) !important;
  border: 1px solid #cddbe5 !important;
  cursor: not-allowed !important;
  font-weight: 700;
  opacity: 1 !important;
}

.ce-course-detail__booking-alert {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.95rem;
  border: 1px solid color-mix(in srgb, #f59e0b 22%, white);
  border-left: 4px solid #f59e0b;
  border-radius: var(--ce-radius, 6px);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(255, 255, 255, 0.96));
}

.ce-course-detail__booking-alert-message {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  color: #7c4a03;
}

.ce-course-detail__booking-alert-message svg {
  margin-top: 0.15rem;
  color: #d97706;
}

.ce-course-detail__booking-alert-message p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
}

.ce-course-detail__booking-help-action.ce-btn--secondary {
  background: #fff !important;
  color: var(--ce-secondary, #00294b) !important;
  border: 1px solid #b9cbd8 !important;
  opacity: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 6px 14px rgba(0, 41, 75, 0.06);
}

.ce-course-detail__booking-help-action.ce-btn--secondary:hover,
.ce-course-detail__booking-help-action.ce-btn--secondary:focus {
  background: var(--ce-secondary, #00294b) !important;
  color: #fff !important;
  border-color: var(--ce-secondary, #00294b) !important;
}

/* Key info list */
.ce-course-detail__booking-info {
  list-style: none;
  padding: 0.75rem 0 !important;
  margin: 0 !important;
  border-top: 1px solid var(--ce-border, #e5e7eb);
  border-bottom: 1px solid var(--ce-border, #e5e7eb);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ce-course-detail__booking-info li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.855rem;
  color: #374151;
  line-height: 1.4;
}

.ce-modal__dialog--course-inquiry {
  max-width: 560px !important;
  border: 1px solid #cddbe5 !important;
  background: #fff !important;
}
.ce-course-inquiry__meta {
  margin: 0 0 4px;
  color: #5f6f78;
  font-size: 0.92rem;
  line-height: 1.45;
}
.ce-modal__dialog--course-inquiry .ce-form__label {
  color: #17313b !important;
  font-weight: 700 !important;
}
.ce-course-inquiry .ce-form__group {
  gap: 2px !important;
  margin-bottom: 10px !important;
}
.ce-course-inquiry .ce-form__field {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.ce-course-inquiry .ce-form__field > .ce-form__input {
  margin: 0 !important;
}
.ce-modal__dialog--course-inquiry .ce-form__input {
  border-color: #cddbe5 !important;
  background: #fff !important;
  color: #17313b !important;
}
.ce-course-inquiry .ce-form__input::placeholder {
  color: #8b98a1;
  opacity: 1;
}
.ce-modal__dialog--course-inquiry .ce-course-inquiry__message {
  min-height: 130px !important;
  resize: vertical;
}
.ce-course-inquiry .ce-form__error {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ce-error) !important;
  line-height: 1.25 !important;
}
.ce-course-inquiry__status {
  margin: 2px 0 14px;
  color: #166534;
  font-size: 0.92rem;
  font-weight: 700;
}
.ce-course-inquiry__status--error {
  color: #b42318;
}

.ce-course-detail__booking-info li svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--ce-primary, #00a9cb);
}

.ce-course-detail__booking-deadline svg {
  color: #f59e0b !important;
}

.ce-course-detail__booking-deadline span {
  color: #92400e;
  font-weight: 500;
}

/* Seats */
.ce-course-detail__booking-seats {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ce-course-detail__booking-seats-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #6b7280;
}

.ce-course-detail__booking-seats-label svg {
  color: var(--ce-primary, #00a9cb);
}

/* Back link at bottom of booking card */
.ce-course-detail__booking-back {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #9ca3af;
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 0.18s;
}

.ce-course-detail__booking-back:hover {
  color: var(--ce-primary, #00a9cb);
}

/* -- Related Courses -------------------------------------------------------- */
.ce-course-detail__related {
  background: #f8fafc;
  border-top: 1px solid var(--ce-border, #e5e7eb);
  padding: 3rem 2rem;
}

.ce-course-detail__related-title {
  max-width: 1200px;
  margin: 0 auto 1.75rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ce-secondary, #00294b);
}

.ce-course-detail__related .ce-courses__grid {
  max-width: 1200px;
  margin: 0 auto;
}

/* -- Responsive ------------------------------------------------------------- */
@media (max-width: 900px) {
  .ce-course-detail__facts-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .ce-course-detail__fact:nth-child(2) {
    border-right: none;
  }
  .ce-course-detail__fact:nth-child(1),
  .ce-course-detail__fact:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .ce-course-detail__body {
    grid-template-columns: 1fr;
    padding: 1.5rem 1rem 2rem;
    gap: 2rem;
  }
  .ce-course-detail__toc {
    display: none;
  }
  .ce-course-detail__sidebar {
    position: static;
    order: -1;
  }
  .ce-course-detail__highlights {
    grid-template-columns: 1fr;
  }
  .ce-course-detail__lecturers--grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .ce-course-detail__hero {
    min-height: 320px;
  }
  .ce-course-detail__hero-inner {
    padding: 1.25rem 1rem 1.5rem;
  }
  .ce-course-detail__hero-title {
    font-size: 1.4rem;
  }
  .ce-course-detail__facts-strip {
    grid-template-columns: 1fr 1fr;
  }
  .ce-course-detail__fact {
    padding: 0.9rem 1rem;
  }
  .ce-course-detail__related {
    padding: 2rem 1rem;
  }
  .ce-course-detail__lecturer-card {
    padding: 1rem;
    border-radius: 20px;
  }
  .ce-course-detail__lecturer-head {
    gap: 0.85rem;
    align-items: flex-start;
  }
  .ce-course-detail__lecturer-avatar,
  .ce-course-detail__lecturer-avatar-image {
    width: 60px;
    height: 60px;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ce-course-detail__back,
  .ce-btn {
    transition: none;
  }
}

/* ==========================================================================
   34. Course Detail – New Sections (dates, files, extended sidebar)
   ========================================================================== */

/* -- Hero Subline ----------------------------------------------------------- */
.ce-course-detail__hero-subline {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.925rem;
  font-weight: 400;
  font-style: italic;
  margin: 0 0 0.6rem;
}

/* -- Dates Table ------------------------------------------------------------ */
.ce-course-detail__dates {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ce-course-detail__date-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--ce-border, #e5e7eb);
  border-radius: var(--ce-radius);
  text-decoration: none;
  color: var(--ce-text, #374151);
  background: #fff;
  transition:
    border-color 0.18s,
    box-shadow 0.18s;
}

.ce-course-detail__date-row:hover {
  border-color: var(--ce-primary, #00a9cb);
  box-shadow: 0 0 0 3px rgba(0, 169, 203, 0.1);
}

.ce-course-detail__date-row--active {
  border-color: var(--ce-primary, #00a9cb);
  background: rgba(0, 169, 203, 0.04);
}

.ce-course-detail__date-range {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ce-secondary, #00294b);
}

.ce-course-detail__date-loc {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  color: #6b7280;
}

.ce-course-detail__date-deadline {
  font-size: 0.78rem;
  color: #92400e;
  white-space: nowrap;
}

.ce-course-detail__date-seats {
  font-size: 0.78rem;
  color: #6b7280;
  white-space: nowrap;
}

.ce-course-detail__date-arrow {
  color: #9ca3af;
  flex-shrink: 0;
}

.ce-course-detail__date-row:hover .ce-course-detail__date-arrow {
  color: var(--ce-primary, #00a9cb);
}

@media (max-width: 700px) {
  .ce-course-detail__date-row {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 4px;
  }
  .ce-course-detail__date-deadline,
  .ce-course-detail__date-seats,
  .ce-course-detail__date-arrow {
    display: none;
  }
}

/* -- Downloads ------------------------------------------------------------- */
.ce-course-detail__files {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ce-course-detail__file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--ce-border, #e5e7eb);
  border-radius: var(--ce-radius);
  background: #fff;
  transition:
    border-color 0.18s,
    box-shadow 0.18s;
}

.ce-course-detail__file-icon {
  flex-shrink: 0;
  color: var(--ce-primary, #00a9cb);
}

.ce-course-detail__file-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ce-course-detail__file-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ce-secondary, #00294b);
  text-decoration: none;
}

.ce-course-detail__file-name:hover {
  color: var(--ce-primary, #00a9cb);
  text-decoration: underline;
}

.ce-course-detail__file-desc {
  font-size: 0.78rem;
  color: #6b7280;
}

.ce-course-detail__file-size {
  font-size: 0.75rem;
  color: #9ca3af;
  white-space: nowrap;
  flex-shrink: 0;
}

/* -- Sidebar: Date Selector ------------------------------------------------ */
.ce-course-detail__booking-dates {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid var(--ce-border, #e5e7eb);
  padding-bottom: 1rem;
}

.ce-course-detail__booking-dates-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}

.ce-course-detail__booking-dates-label svg {
  color: var(--ce-primary, #00a9cb);
}

.ce-course-detail__date-select {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--ce-border, #e5e7eb);
  border-radius: var(--ce-radius);
  font-size: 0.875rem;
  color: var(--ce-text, #374151);
  background: #fff;
  cursor: pointer;
  appearance: auto;
}

.ce-course-detail__date-select:focus {
  outline: 2px solid var(--ce-primary, #00a9cb);
  outline-offset: 1px;
}

/* -- Sidebar: Extended Info ------------------------------------------------ */
.ce-course-detail__booking-extras {
  border-top: 1px solid var(--ce-border, #e5e7eb);
  border-bottom: none !important;
  padding: 0.75rem 0 0 !important;
  margin-left: 0 !important;
}

.ce-course-detail__booking-info + .ce-course-detail__booking-extras {
  border-top: none !important;
}

.ce-course-detail__booking-extras li svg {
  color: var(--ce-primary, #00a9cb) !important;
}

/* ==========================================================================
   35. Course Detail – Visual Enhancements v2
   ========================================================================== */

/* -- Hero entrance animation ----------------------------------------------- */
@keyframes ce-hero-slide-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ce-course-detail__hero-bottom {
  animation: ce-hero-slide-up 0.45s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* -- Facts strip: subtle hover --------------------------------------------- */
.ce-course-detail__fact:hover {
  background: rgba(255, 255, 255, 0.07);
}

/* -- File item: hover focus ring ------------------------------------------- */
.ce-course-detail__file-item:hover {
  border-color: var(--ce-primary, #00a9cb);
  box-shadow: 0 0 0 3px rgba(0, 169, 203, 0.1);
}

/* -- Date row: improved mid-screen layout (701–900 px) --------------------- */
@media (min-width: 701px) and (max-width: 900px) {
  .ce-course-detail__date-row {
    grid-template-columns: auto 1fr auto auto auto;
  }
}

/* -- Mobile sticky CTA – hidden on desktop --------------------------------- */
.ce-course-detail__mobile-cta {
  display: none;
}

@media (max-width: 900px) {
  .ce-course-detail__mobile-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--ce-border, #e5e7eb);
    padding: 0.85rem 1.25rem;
    padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 24px rgba(0, 41, 75, 0.12);
    z-index: 200;
  }

  .ce-course-detail__mobile-cta-price {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }

  .ce-course-detail__mobile-cta-amount {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ce-secondary, #00294b);
    line-height: 1;
  }

  .ce-course-detail__mobile-cta-vat {
    font-size: 0.72rem;
    color: #9ca3af;
    margin-top: 3px;
  }

  /* Prevent content being hidden behind the fixed CTA bar */
  .ce-course-detail__body {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  }

  .ce-course-detail__related {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* -- prefers-reduced-motion: disable entrance animation -------------------- */
@media (prefers-reduced-motion: reduce) {
  .ce-course-detail__hero-bottom {
    animation: none;
  }
}

/* ==========================================================================
   36. Course Detail – Sticky TOC nav (left column)
   ========================================================================== */

.ce-course-detail__toc {
  position: sticky;
  top: 2rem;
  align-self: start;
  padding-top: 1.75rem; /* align with first section content */
  margin-left: -1rem; /* pull flush against grid boundary */
}

.ce-course-detail__toc ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.ce-course-detail__toc li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ce-course-detail__toc li::before,
.ce-course-detail__toc li::after {
  display: none;
}

/* Vertical connecting line through all dots */
.ce-course-detail__toc ul::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--ce-border, #e5e7eb);
}

.ce-course-detail__toc-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  text-decoration: none;
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  transition: color 0.18s;
  position: relative;
  z-index: 1;
}

.ce-course-detail__toc-link:hover {
  color: var(--ce-secondary, #00294b);
}

.ce-course-detail__toc-link.is-active {
  color: var(--ce-secondary, #00294b);
  font-weight: 600;
}

.ce-course-detail__toc-dot {
  flex-shrink: 0;
  margin-top: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--ce-border, #e5e7eb);
  background: #fff;
  transition:
    border-color 0.18s,
    background 0.18s,
    transform 0.18s;
  position: relative;
  z-index: 1;
}

.ce-course-detail__toc-link:hover .ce-course-detail__toc-dot {
  border-color: var(--ce-primary, #00a9cb);
  transform: scale(1.25);
}

.ce-course-detail__toc-link.is-active .ce-course-detail__toc-dot {
  border-color: var(--ce-primary, #00a9cb);
  background: var(--ce-primary, #00a9cb);
  transform: scale(1.25);
}

@media (prefers-reduced-motion: reduce) {
  .ce-course-detail__toc-dot,
  .ce-course-detail__toc-link {
    transition: none;
  }
}

/* ============================================================
   OAuth / SSO Login Buttons
   ============================================================ */
.ce-oauth {
  margin-top: 1.25rem;
}

.ce-oauth__divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  color: var(--ce-text-secondary, #9ca3af);
  font-size: 0.8125rem;
}

.ce-oauth__divider::before,
.ce-oauth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ce-border, #e5e7eb);
}

.ce-oauth__buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ce-btn--oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.6rem 1rem;
  border: 1px solid var(--ce-border, #e5e7eb);
  border-radius: var(--ce-radius-btn, 0px);
  background: #ffffff;
  color: var(--ce-text, #676a70);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--ce-transition, 150ms ease),
    border-color var(--ce-transition, 150ms ease);
}

.ce-btn--oauth:hover {
  background: var(--ce-bg-subtle, #f8f9fa);
  border-color: #c9cdd4;
  color: var(--ce-text, #676a70);
  text-decoration: none;
}

.ce-oauth__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ce-btn--oauth-thieme .ce-oauth__icon {
  width: 13px;
  height: 18px;
  color: #013476;
}

/* ============================================================
   Skeleton loading screens
   ============================================================ */

@keyframes ce-shimmer {
  0% {
    background-position: -600px 0;
  }
  100% {
    background-position: 600px 0;
  }
}

.ce-skeleton {
  display: block;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--ce-border) 25%, #e9ebee 50%, var(--ce-border) 75%);
  background-size: 1200px 100%;
  animation: ce-shimmer 1.5s infinite linear;
}

/* shape variants */
.ce-skeleton--title {
  height: 22px;
  margin-bottom: 10px;
}
.ce-skeleton--text {
  height: 14px;
  margin-bottom: 6px;
}
.ce-skeleton--text-sm {
  height: 12px;
  margin-bottom: 4px;
}
.ce-skeleton--input {
  height: 40px;
  margin-bottom: 16px;
  border-radius: var(--ce-radius);
}
.ce-skeleton--badge {
  height: 22px;
  width: 72px;
  border-radius: 20px;
  display: inline-block;
}
.ce-skeleton--icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
}
.ce-skeleton--avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ce-skeleton--thumb {
  width: 100%;
  aspect-ratio: 16/5;
  border-radius: var(--ce-radius-lg);
  margin-bottom: 20px;
}
.ce-skeleton--btn {
  height: 38px;
  width: 130px;
  border-radius: var(--ce-radius-btn);
}

/* portal-specific composite helpers */
.ce-portal__content--loading {
  pointer-events: none;
}

.ce-portal__content--loading .ce-skeleton {
  opacity: 1;
}

/* ============================================================
   CHECKOUT MODAL
   ============================================================ */

.ce-checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ce-checkout-modal[hidden] {
  display: none !important;
}

.ce-checkout-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
}

.ce-checkout-modal__dialog {
  position: relative;
  z-index: 1;
  background: var(--ce-bg, #fff);
  border-radius: 16px;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.24),
    0 8px 24px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 700px;
  max-height: min(92vh, 860px);
  overflow-y: auto;
  outline: none;
  scrollbar-width: thin;
  scrollbar-color: var(--ce-border, #d1d5db) transparent;
}

/* ---- Header ---- */
.ce-checkout-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--ce-secondary, #00294b);
  border-radius: 16px 16px 0 0;
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}

.ce-checkout-modal__header-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ce-checkout-modal__header-icon {
  color: var(--ce-primary, #00a9cb);
  flex-shrink: 0;
}

.ce-checkout-modal__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: #fff;
}

.ce-checkout-modal__close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  transition:
    color 0.15s,
    background 0.15s,
    border-color 0.15s;
  flex-shrink: 0;
}

.ce-checkout-modal__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ---- Step indicator ---- */
.ce-checkout-modal__steps {
  display: flex;
  align-items: flex-start;
  padding: 20px 32px 16px;
  border-bottom: 1px solid var(--ce-border, #e5e7eb);
  background: var(--ce-bg, #fff);
  position: relative;
}

/* Full-width connecting line running behind all bubbles */
.ce-checkout-modal__steps::before {
  content: "";
  position: absolute;
  top: calc(20px + 13px);
  left: calc(32px + 14px);
  right: calc(32px + 14px);
  height: 2px;
  background: var(--ce-border, #e5e7eb);
  z-index: 0;
}

.ce-checkout-modal__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.ce-checkout-modal__step-bubble {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ce-bg, #fff);
  border: 2px solid var(--ce-border, #d1d5db);
  color: var(--ce-text-secondary, #9ca3af);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px var(--ce-bg, #fff);
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s;
}

.ce-checkout-modal__step-num {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.ce-checkout-modal__step-done-icon {
  display: none;
}

.ce-checkout-modal__step--active .ce-checkout-modal__step-bubble {
  background: var(--ce-primary, #00a9cb);
  border-color: var(--ce-primary, #00a9cb);
  color: #fff;
}

.ce-checkout-modal__step--done .ce-checkout-modal__step-bubble {
  background: var(--ce-primary, #00a9cb);
  border-color: var(--ce-primary, #00a9cb);
  color: #fff;
}

.ce-checkout-modal__step--done .ce-checkout-modal__step-num {
  display: none;
}

.ce-checkout-modal__step--done .ce-checkout-modal__step-done-icon {
  display: block;
}

.ce-checkout-modal__step-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ce-text-secondary, #9ca3af);
  text-align: center;
  line-height: 1.2;
}

.ce-checkout-modal__step--active .ce-checkout-modal__step-label {
  color: var(--ce-primary, #00a9cb);
  font-weight: 700;
}

/* ---- Panels ---- */
.ce-checkout-modal__panel {
  padding: 24px;
}

/* ---- Panel 1: Kursdetails card grid ---- */
.ce-co-kurs__name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ce-secondary, #00294b);
  margin: 0 0 20px;
  line-height: 1.4;
}

.ce-co-kurs__meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

@media (max-width: 480px) {
  .ce-co-kurs__meta-grid {
    grid-template-columns: 1fr;
  }
}

.ce-co-kurs__meta-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--ce-bg-subtle, #f8f9fa);
  border: 1px solid var(--ce-border, #e5e7eb);
  border-radius: var(--ce-radius-lg, 8px);
  padding: 12px;
}

.ce-co-kurs__meta-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--ce-radius, 6px);
  background: var(--ce-primary-light, #e6f7fa);
  color: var(--ce-primary, #00a9cb);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ce-co-kurs__meta-icon--warn {
  background: var(--ce-warning-light, #fffbeb);
  color: var(--ce-warning, #d97706);
}

.ce-co-kurs__meta-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ce-text-secondary, #9ca3af);
  font-weight: 600;
  margin-bottom: 3px;
}

.ce-co-kurs__meta-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ce-secondary, #00294b);
  word-break: break-word;
}

.ce-co-kurs__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--ce-secondary, #00294b) 0%, #0a5570 100%);
  border-radius: var(--ce-radius-lg, 8px);
  padding: 16px 20px;
  color: #fff;
  margin-bottom: 24px;
}

.ce-co-kurs__price-label {
  font-size: 0.8125rem;
  opacity: 0.8;
  font-weight: 500;
}

.ce-co-kurs__price-main {
  text-align: right;
}

.ce-co-kurs__price-amount {
  font-size: 1.625rem;
  font-weight: 800;
  display: block;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.ce-co-kurs__price-vat {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* ---- Panel 2: Kosten table ---- */
.ce-checkout-modal__section-lead {
  font-size: 0.875rem;
  color: var(--ce-text-secondary, #9ca3af);
  margin: 0 0 16px;
}

.ce-checkout-costs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin: 0 0 24px;
}

.ce-checkout-costs-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ce-text-secondary, #9ca3af);
  padding: 0 8px 10px;
  border-bottom: 2px solid var(--ce-border, #e5e7eb);
}

.ce-checkout-costs-table thead th:nth-child(2),
.ce-checkout-costs-table thead th:last-child {
  text-align: right;
}

.ce-checkout-costs-table tbody tr {
  border-bottom: 1px solid var(--ce-bg-subtle, #f3f4f6);
  transition: background 0.1s;
}

.ce-checkout-costs-table tbody tr:hover {
  background: var(--ce-bg-subtle, #f9fafb);
}

.ce-checkout-costs-table tbody td {
  padding: 12px 8px;
  vertical-align: middle;
}

.ce-checkout-costs-table__col-name {
  width: 50%;
}

.ce-checkout-costs-table__col-name small {
  color: var(--ce-text-secondary, #9ca3af);
  display: block;
  line-height: 1.4;
  font-size: 0.8em;
  margin-top: 2px;
}

.ce-checkout-costs-table__excl-tax {
  color: var(--ce-text-secondary, #9ca3af);
  font-size: 0.8em;
}

.ce-checkout-costs-table__col-price {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}

.ce-checkout-costs-table__col-opt {
  width: 110px;
  text-align: right;
  white-space: nowrap;
  color: var(--ce-text-secondary, #9ca3af);
  font-size: 0.8em;
}

.ce-checkout-costs-table__row--optional td {
  opacity: 0.6;
  transition: opacity 0.15s;
}

.ce-checkout-costs-table__row--optional:has(.ce-checkout-opt-cb:checked) td {
  opacity: 1;
}

.ce-checkout-opt-cb {
  margin-right: 4px;
  vertical-align: middle;
  cursor: pointer;
  accent-color: var(--ce-primary, #00a9cb);
}

.ce-checkout-costs-table tfoot tr td {
  padding: 8px;
}

.ce-checkout-costs-table__row--subtotal td,
.ce-checkout-costs-table__row--tax td {
  color: var(--ce-text-secondary, #9ca3af);
  font-size: 0.85em;
}

.ce-checkout-costs-table__row--subtotal td {
  border-top: 1px solid var(--ce-border, #e5e7eb);
}

.ce-checkout-costs-table__row--subtotal td:last-child,
.ce-checkout-costs-table__row--tax td:last-child {
  text-align: right;
}

.ce-checkout-costs-table__row--total td {
  border-top: 2px solid var(--ce-secondary, #00294b);
  padding-top: 14px;
}

.ce-checkout-costs-table__row--total td:last-child {
  text-align: right;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ce-secondary, #00294b);
}

/* ---- Panel 3: two-column confirm layout ---- */
.ce-checkout-panel-confirm {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

@media (min-width: 520px) {
  .ce-checkout-panel-confirm {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Billing address card */
.ce-checkout-billing-card {
  border: 1px solid var(--ce-border, #e5e7eb);
  border-radius: var(--ce-radius-lg, 8px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ce-checkout-billing-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--ce-bg-subtle, #f9fafb);
  border-bottom: 1px solid var(--ce-border, #e5e7eb);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ce-text-secondary, #6b7280);
}

.ce-checkout-billing-card__header svg {
  color: var(--ce-primary, #00a9cb);
  flex-shrink: 0;
}

.ce-checkout-billing-card__body {
  padding: 14px;
  font-size: 0.875rem;
  line-height: 1.65;
  flex: 1;
}

.ce-checkout-billing-card__address {
  font-style: normal;
  color: var(--ce-secondary, #00294b);
}

.ce-checkout-billing-card__empty {
  color: var(--ce-text-secondary, #9ca3af);
  font-style: italic;
  margin: 0 0 0;
  font-size: 0.8125rem;
}

.ce-checkout-billing-card__loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ce-text-secondary, #9ca3af);
  font-size: 0.8125rem;
  padding: 4px 0;
}

.ce-checkout-billing-card__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--ce-border, #e5e7eb);
  border-top-color: var(--ce-primary, #00a9cb);
  border-radius: 50%;
  animation: ce-checkout-spin 0.7s linear infinite;
  flex-shrink: 0;
}

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

.ce-checkout-billing-card__footer {
  padding: 10px 14px;
  border-top: 1px solid var(--ce-border, #e5e7eb);
  background: var(--ce-bg-subtle, #f9fafb);
}

.ce-checkout-billing-card__edit-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ce-primary, #00a9cb);
  text-decoration: none;
  transition: color 0.15s;
}

.ce-checkout-billing-card__edit-link:hover {
  color: var(--ce-primary-hover, #008da8);
  text-decoration: underline;
}

/* Order summary card */
.ce-checkout-modal__summary {
  background: linear-gradient(160deg, var(--ce-primary-light, #e6f7fa) 0%, #ddf1f6 100%);
  border: 1px solid rgba(0, 169, 203, 0.4);
  border-radius: var(--ce-radius-lg, 8px);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ce-checkout-modal__summary-head {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ce-primary, #00a9cb);
  margin: 0 0 6px;
}

.ce-checkout-modal__summary-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ce-secondary, #00294b);
  display: block;
  line-height: 1.35;
}

.ce-checkout-modal__summary-date {
  font-size: 0.8125rem;
  color: var(--ce-text-secondary, #6b7280);
}

.ce-checkout-modal__summary-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 169, 203, 0.25);
}

.ce-checkout-modal__summary-total-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ce-text-secondary, #6b7280);
}

.ce-checkout-modal__summary-total {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--ce-secondary, #00294b);
}

/* Terms */
.ce-checkout-modal__terms {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--ce-bg-subtle, #f8f9fa);
  border: 1px solid var(--ce-border, #e5e7eb);
  border-radius: var(--ce-radius-lg, 8px);
}

.ce-checkout-modal__term-label {
  display: flex;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--ce-text, #374151);
  cursor: pointer;
  align-items: flex-start;
  line-height: 1.5;
}

.ce-checkout-modal__checkbox {
  margin-top: 2px;
  accent-color: var(--ce-primary, #00a9cb);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Error box */
.ce-checkout-modal__error {
  background: var(--ce-error-light, #fef2f2);
  border: 1px solid #fca5a5;
  border-left: 4px solid var(--ce-error, #dc2626);
  color: var(--ce-error, #dc2626);
  border-radius: var(--ce-radius, 6px);
  padding: 10px 14px;
  font-size: 0.875rem;
  margin-bottom: 16px;
}

.ce-checkout-modal__error[hidden] {
  display: none !important;
}

/* Actions bar */
.ce-checkout-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ce-checkout-modal__actions--row {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* Ghost button */
.ce-btn--ghost {
  background: none;
  border: 1px solid var(--ce-border, #d1d5db);
  color: var(--ce-text-secondary, #374151);
  padding: 0.5rem 1rem;
  border-radius: var(--ce-radius-btn, 8px);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.ce-btn--ghost:hover {
  background: var(--ce-bg-subtle, #f5f5f5);
  border-color: var(--ce-text-secondary, #9ca3af);
}

/* Success state */
.ce-checkout-modal__success {
  padding: 48px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ce-checkout-modal__success[hidden] {
  display: none !important;
}

.ce-checkout-modal__success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ce-success-light, #ecfdf5);
  border: 2px solid var(--ce-success, #059669);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ce-success, #059669);
  margin-bottom: 8px;
}

.ce-checkout-modal__success-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ce-secondary, #00294b);
  margin: 0;
}

.ce-checkout-modal__success-text {
  font-size: 0.875rem;
  color: var(--ce-text-secondary, #6b7280);
  margin: 0 0 8px;
  max-width: 380px;
  line-height: 1.6;
}

/* Body scroll lock */
body.ce-modal-open {
  overflow: hidden;
}

/* ============================================================
   AUTH GATE  .ce-bk-gate  (ce_book=1 but not logged in)
   Clean two-panel card: instructions + course summary
   ============================================================ */

.ce-bk-gate {
  background: var(--ce-bg);
  border-radius: 16px;
  box-shadow:
    0 2px 8px rgba(0, 41, 75, 0.06),
    0 8px 32px rgba(0, 41, 75, 0.06);
  overflow: hidden;
  margin: 32px 0;
}

.ce-bk-gate__inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  min-height: 460px;
}

/* ── Left: main content ── */
.ce-bk-gate__main {
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
}

.ce-bk-gate__icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--ce-primary-light);
  color: var(--ce-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  flex-shrink: 0;
}

.ce-bk-gate__kicker {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ce-primary);
  margin: 0 0 8px;
}

.ce-bk-gate__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ce-secondary);
  margin: 0 0 12px;
  line-height: 1.25;
}

.ce-bk-gate__desc {
  font-size: 0.9rem;
  color: var(--ce-text);
  line-height: 1.65;
  margin: 0 0 28px;
  max-width: 480px;
}

.ce-bk-gate__steps {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ce-bk-gate__step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.ce-bk-gate__step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ce-bg-subtle);
  border: 2px solid var(--ce-border);
  color: var(--ce-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.ce-bk-gate__step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ce-bk-gate__step-body strong {
  font-size: 0.9rem;
  color: var(--ce-secondary);
  font-weight: 600;
}

.ce-bk-gate__step-body span {
  font-size: 0.84rem;
  color: var(--ce-text);
  line-height: 1.55;
}

.ce-bk-gate__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
  margin-top: auto;
  padding-top: 8px;
}

/* ── Right: course summary card ── */
.ce-bk-gate__course {
  background: var(--ce-bg-subtle);
  padding: 52px 32px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--ce-border);
}

.ce-bk-gate__course-eyebrow {
  font-size: 0.73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ce-primary);
  margin: 0 0 12px;
}

.ce-bk-gate__course-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ce-secondary);
  line-height: 1.35;
  display: block;
  margin-bottom: 20px;
}

.ce-bk-gate__course-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ce-bk-gate__course-meta li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.88rem;
  color: var(--ce-text);
  line-height: 1.4;
}

.ce-bk-gate__course-meta svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--ce-primary);
  opacity: 0.65;
}

.ce-bk-gate__course-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 0.82rem;
  color: var(--ce-text-secondary);
  background: var(--ce-bg);
  border-radius: var(--ce-radius);
  padding: 10px 12px;
  margin-top: 24px;
  line-height: 1.5;
}

.ce-bk-gate__course-note svg {
  flex-shrink: 0;
  color: var(--ce-success);
  margin-top: 1px;
}

/* Auth gate – responsive */
@media (max-width: 820px) {
  .ce-bk-gate__inner {
    grid-template-columns: 1fr;
  }
  .ce-bk-gate__main {
    padding: 36px 28px;
  }
  .ce-bk-gate__course {
    border-left: none;
    border-top: 1px solid var(--ce-border);
    padding: 28px 28px;
  }
  .ce-bk-gate__actions {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .ce-bk-gate__main {
    padding: 28px 20px;
  }
  .ce-bk-gate__course {
    padding: 24px 20px;
  }
  .ce-bk-gate__title {
    font-size: 1.25rem;
  }
}

/* ============================================================
   BOOKING / CHECKOUT PAGE  .ce-bk  (ce_book=1, logged in)
   Multi-step wizard — two-column layout on desktop
   No colored top borders on cards. Relies on shadows for depth.
   ============================================================ */

/* ── Checkout wrapper ── */
.ce-bk {
  font-family: var(--ce-font);
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

/* ── Top navigation bar ── */
.ce-bk__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--ce-border);
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.ce-bk__back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ce-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.15s;
  flex-shrink: 0;
}
.ce-bk__back-link:hover {
  color: var(--ce-primary);
}
.ce-bk__back-link svg {
  opacity: 0.55;
  transition: opacity 0.15s;
}
.ce-bk__back-link:hover svg {
  opacity: 1;
}

.ce-bk__topbar-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Info chips ── */
.ce-bk__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ce-bg-subtle);
  border: 1px solid var(--ce-border);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 0.82rem;
  color: var(--ce-text);
  white-space: nowrap;
}
.ce-bk__chip svg {
  opacity: 0.5;
  flex-shrink: 0;
}

.ce-bk__chip--block {
  display: flex;
  border-radius: var(--ce-radius);
  font-size: 0.84rem;
  white-space: normal;
}

/* ── Page header ── */
.ce-bk__header {
  margin-bottom: 28px;
}

.ce-bk__course-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ce-secondary);
  margin: 0 0 24px;
  line-height: 1.25;
}

/* ── Progress stepper ── */
.ce-bk__stepper {
  display: flex;
  align-items: center;
  gap: 0;
  overflow: visible;
}

.ce-bk__step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ce-bk__step-bubble {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ce-bg-subtle);
  border: 2px solid var(--ce-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ce-text-secondary);
  flex-shrink: 0;
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s,
    box-shadow 0.25s;
}

.ce-bk__step-num {
  display: block;
}
.ce-bk__step-check {
  display: none;
}

.ce-bk__step-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ce-text-secondary);
  transition: color 0.2s;
  white-space: nowrap;
}

.ce-bk__step-line {
  flex: 1;
  height: 2px;
  background: var(--ce-border);
  min-width: 20px;
  max-width: 80px;
  margin: 0 6px;
  border-radius: 2px;
  transition: background 0.3s;
}
.ce-bk__step-line--done {
  background: var(--ce-primary);
}

/* Active step */
.ce-bk__step--active .ce-bk__step-bubble {
  background: var(--ce-primary);
  border-color: var(--ce-primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(0, 169, 203, 0.15);
}
.ce-bk__step--active .ce-bk__step-label {
  color: var(--ce-secondary);
  font-weight: 600;
}

/* Done step */
.ce-bk__step--done .ce-bk__step-bubble {
  background: var(--ce-success);
  border-color: var(--ce-success);
  color: #fff;
  box-shadow: none;
}
.ce-bk__step--done .ce-bk__step-num {
  display: none;
}
.ce-bk__step--done .ce-bk__step-check {
  display: block;
}
.ce-bk__step--done .ce-bk__step-label {
  color: var(--ce-success);
}

/* ── Two-column body layout ── */
.ce-bk__body {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(252px, 340px);
  gap: 32px;
  align-items: start;
}

.ce-bk__main {
  min-width: 0;
}

/* ── Step panels — visual language matches auth gate card ── */
.ce-bk__panel {
  background: var(--ce-bg);
  border-radius: 16px;
  padding: 36px;
  box-shadow:
    0 2px 8px rgba(0, 41, 75, 0.06),
    0 8px 32px rgba(0, 41, 75, 0.06);
}
.ce-bk__panel[hidden] {
  display: none !important;
}

/* ── Panel header: icon-wrap + kicker + title (matches .ce-bk-gate__main) ── */
.ce-bk__panel-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ce-border);
}

/* Square icon-wrap — identical to .ce-bk-gate__icon-wrap */
.ce-bk__panel-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--ce-primary-light);
  color: var(--ce-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Eyebrow / step counter — matches .ce-bk-gate__kicker */
.ce-bk__panel-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ce-primary);
  margin: 0 0 4px;
}

.ce-bk__panel-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ce-secondary);
  margin: 0;
  line-height: 1.25;
}

.ce-bk__panel-desc {
  font-size: 0.9rem;
  color: var(--ce-text);
  margin: 0 0 20px;
  line-height: 1.6;
}

/* ── Step 1: Meta info grid ── */
.ce-bk__meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

/* Clean info tiles — no colored border */
.ce-bk__meta-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--ce-bg-subtle);
  border-radius: var(--ce-radius);
  padding: 14px 16px;
}

/* Warning variant — highlight via background only, no colored border */
.ce-bk__meta-item--warn {
  background: var(--ce-warning-light);
}

.ce-bk__meta-icon {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: var(--ce-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ce-primary);
}
.ce-bk__meta-icon--warn {
  color: var(--ce-warning);
}

.ce-bk__meta-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ce-text-secondary);
  font-weight: 600;
  margin-bottom: 3px;
}

.ce-bk__meta-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ce-secondary);
  line-height: 1.35;
}

/* ── Step 1: Price display row (replaces dark gradient banner) ── */
.ce-bk__price-banner {
  background: var(--ce-bg-subtle);
  border-radius: var(--ce-radius);
  padding: 18px 20px;
  margin-bottom: 24px;
}

.ce-bk__price-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ce-bk__price-banner-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ce-text-secondary);
  margin-bottom: 1px;
}

.ce-bk__price-banner-amount {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--ce-secondary);
  letter-spacing: -0.025em;
  line-height: 1;
}

.ce-bk__price-banner-vat {
  font-size: 0.76rem;
  color: var(--ce-text-secondary);
  display: block;
  margin-top: 1px;
}

/* ── Panel action buttons ── */
.ce-bk__panel-actions {
  margin-top: 28px;
  display: flex;
  justify-content: flex-end;
}

.ce-bk__panel-actions--split {
  justify-content: space-between;
}

/* ── Step 2: Costs table ── */
.ce-bk__costs-table-wrap {
  border: 1px solid var(--ce-border);
  border-radius: var(--ce-radius-lg);
  overflow: hidden;
  margin-bottom: 4px;
}

.ce-bk__costs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  table-layout: fixed;
}

.ce-bk__table-col-check {
  width: 72px;
}

.ce-bk__table-col-price {
  width: 160px;
}
.ce-bk__table-col-opt {
  width: 140px;
}

.ce-bk__costs-table thead tr {
  background: var(--ce-bg-subtle);
  border-bottom: 1px solid var(--ce-border);
}

.ce-bk__costs-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ce-text-secondary);
}

.ce-bk__costs-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ce-border);
  vertical-align: middle;
  color: var(--ce-secondary);
}

.ce-bk__costs-table tbody tr:last-child td {
  border-bottom: none;
}

.ce-bk__col-check {
  text-align: center;
  width: 72px;
}

.ce-bk__col-price {
  text-align: right;
  white-space: nowrap;
  width: 130px;
}
.ce-bk__col-opt {
  text-align: center;
  width: 110px;
}

.ce-bk__costs-desc {
  color: var(--ce-text);
  font-size: 0.82rem;
}

.ce-bk__costs-price-group {
  color: var(--ce-text-secondary);
  font-size: 0.76rem;
  font-weight: 500;
}

.ce-bk__costs-tax-note {
  color: var(--ce-text-secondary);
  font-size: 0.76rem;
}

.ce-bk__costs-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 0;
  color: var(--ce-text);
  font-size: 0.9rem;
}

.ce-bk__opt-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.83rem;
  color: var(--ce-text);
  cursor: pointer;
  user-select: none;
}

.ce-bk__included-badge {
  display: inline-block;
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--ce-success);
  background: var(--ce-success-light);
  border-radius: 100px;
  padding: 2px 8px;
}

.ce-bk__foot-subtotal td,
.ce-bk__foot-tax td {
  padding: 10px 16px;
  font-size: 0.85rem;
  color: var(--ce-text);
  border-bottom: 1px solid var(--ce-border);
  background: var(--ce-bg-subtle);
}

.ce-bk__foot-total td {
  padding: 14px 16px;
  background: var(--ce-bg-subtle);
  font-size: 0.95rem;
  color: var(--ce-secondary);
  border-top: 2px solid var(--ce-border);
}

.ce-bk__price-group-sections {
  display: grid;
  gap: 18px;
  margin-top: 20px;
}

.ce-bk__price-group-section {
  border-top: 1px solid var(--ce-border);
  padding-top: 18px;
}

.ce-bk__price-group-title {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ce-secondary);
}

.ce-bk__price-group-options {
  display: grid;
  gap: 10px;
}

.ce-bk__price-group-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  font-size: 0.92rem;
  color: var(--ce-text);
  cursor: pointer;
}

/* ── Step 3: Address loading ── */
.ce-bk__addr-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 0;
  color: var(--ce-text);
  font-size: 0.9rem;
}
.ce-bk__addr-loading[hidden] {
  display: none !important;
}

.ce-bk__spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--ce-border);
  border-top-color: var(--ce-primary);
  border-radius: 50%;
  animation: ce-bk-spin 0.75s linear infinite;
  flex-shrink: 0;
}
@keyframes ce-bk-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Step 3: Address toolbar ── */
.ce-bk__addr-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ce-bk__addr-toolbar-title {
  display: block;
  color: var(--ce-secondary);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.ce-bk__addr-toolbar-text {
  margin: 0;
  color: var(--ce-text);
  font-size: 0.86rem;
  line-height: 1.55;
}

/* ── Step 3: Address list ── */
.ce-bk__addr-list {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  transition: opacity 0.15s ease;
}
.ce-bk__addr-list[hidden] {
  display: none !important;
}
.ce-bk__addr-list--busy {
  opacity: 0.45;
  pointer-events: none;
}

/* Address option cards — no colored top border, selection via background + border */
.ce-bk__addr-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--ce-bg-subtle);
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 18px 20px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
}

.ce-bk__addr-option:hover {
  background: var(--ce-bg);
  border-color: var(--ce-border);
  box-shadow: 0 2px 12px rgba(0, 41, 75, 0.06);
}

.ce-bk__addr-option--active {
  background: var(--ce-primary-light);
  border-color: var(--ce-primary);
  box-shadow: 0 0 0 3px rgba(0, 169, 203, 0.1);
}

.ce-bk__addr-option-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  cursor: pointer;
}

.ce-bk__addr-radio {
  width: 18px;
  height: 18px;
  margin-top: 4px;
  flex-shrink: 0;
  accent-color: var(--ce-primary);
}

.ce-bk__addr-option-copy {
  min-width: 0;
}

.ce-bk__addr-option-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  color: var(--ce-secondary);
}

.ce-bk__addr-option-address {
  font-style: normal;
  color: var(--ce-secondary);
  line-height: 1.65;
  font-size: 0.9rem;
  margin: 0;
}

.ce-bk__addr-current {
  display: inline-flex;
  align-items: center;
  background: var(--ce-primary-light);
  color: var(--ce-primary);
  border-radius: 999px;
  font-size: 0.71rem;
  font-weight: 700;
  padding: 2px 8px;
}

.ce-bk__addr-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.ce-bk__addr-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--ce-border);
  color: var(--ce-text);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
}

.ce-bk__addr-edit-btn {
  flex-shrink: 0;
}

/* Empty state */
.ce-bk__addr-empty {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1.5px dashed var(--ce-border);
  border-radius: 10px;
  padding: 24px;
  background: var(--ce-bg-subtle);
  color: var(--ce-text);
}

.ce-bk__addr-empty strong {
  display: block;
  color: var(--ce-secondary);
  margin-bottom: 4px;
}
.ce-bk__addr-empty p {
  margin: 0;
  line-height: 1.55;
  font-size: 0.88rem;
}

.ce-bk__addr-empty-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ce-radius);
  background: var(--ce-bg);
  border: 1px solid var(--ce-border);
  color: var(--ce-primary);
  flex-shrink: 0;
}

/* ── Form errors + invalid state ── */
.ce-bk__form-error {
  background: var(--ce-error-light);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: var(--ce-radius);
  padding: 10px 14px;
  font-size: 0.875rem;
  color: var(--ce-error);
  margin-top: 12px;
}
.ce-bk__form-error[hidden] {
  display: none !important;
}

.ce-bk__form-input--invalid {
  border-color: var(--ce-error) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

.ce-bk__modal-form .ce-bk__form-error {
  margin-top: 0;
}

.ce-bk__form-req {
  color: var(--ce-error);
  font-weight: 700;
}

/* ── Step 4: Summary grid ── */
.ce-bk__summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

/* Summary cards — no colored top border */
.ce-bk__summary-block {
  background: var(--ce-bg-subtle);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 14px;
}

.ce-bk__summary-grid .ce-bk__summary-block {
  margin-bottom: 0;
}
.ce-bk__summary-block--hero {
  grid-column: 1 / -1;
}

.ce-bk__summary-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ce-text-secondary);
  margin: 0 0 14px;
}
.ce-bk__summary-block-title svg {
  color: var(--ce-primary);
  opacity: 0.75;
  flex-shrink: 0;
}

.ce-bk__summary-course-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ce-secondary);
  margin: 0 0 12px;
  line-height: 1.35;
}

.ce-bk__summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ce-bk__summary-address {
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--ce-secondary);
  margin-bottom: 12px;
}

.ce-bk__summary-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ce-bk__summary-total-label {
  font-size: 0.9rem;
  color: var(--ce-text);
  font-weight: 500;
}

.ce-bk__summary-total {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--ce-secondary);
  letter-spacing: -0.025em;
}

.ce-bk__summary-vat-note {
  font-size: 0.76rem;
  color: var(--ce-text-secondary);
  margin: 4px 0 0;
}

.ce-bk__summary-price-lines {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.ce-bk__summary-price-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.9rem;
  color: var(--ce-secondary);
}

.ce-bk__summary-price-sub {
  margin-top: 4px;
  color: var(--ce-text-secondary);
  font-size: 0.76rem;
  font-weight: 500;
}

.ce-bk__summary-total-row--final {
  padding-top: 14px;
  border-top: 1px solid var(--ce-border);
}

/* Notice box — neutral border, no color accent */
.ce-bk__summary-note {
  background: var(--ce-bg);
  border: 1px solid var(--ce-border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 20px;
}

.ce-bk__summary-note strong {
  display: block;
  color: var(--ce-secondary);
  margin-bottom: 6px;
  font-size: 0.9rem;
}
.ce-bk__summary-note p {
  margin: 0;
  color: var(--ce-text);
  line-height: 1.6;
  font-size: 0.875rem;
}

/* ── AGB / Privacy checkboxes ── */
.ce-bk__terms {
  background: var(--ce-bg-subtle);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ce-bk__term-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.ce-bk__checkbox {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--ce-primary);
  cursor: pointer;
}

.ce-bk__term-text {
  font-size: 0.875rem;
  color: var(--ce-text);
  line-height: 1.55;
}

.ce-bk__term-link {
  color: var(--ce-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  font-weight: 500;
  transition: color 0.15s;
}
.ce-bk__term-link:hover {
  color: var(--ce-primary-hover);
}

/* ── Success screen — clean card, no colored top border ── */
.ce-bk__success {
  background: var(--ce-bg);
  border-radius: 12px;
  padding: 60px 40px;
  text-align: center;
  box-shadow:
    0 1px 3px rgba(0, 41, 75, 0.06),
    0 4px 20px rgba(0, 41, 75, 0.05);
}
.ce-bk__success[hidden] {
  display: none !important;
}

.ce-bk__success-icon {
  width: 72px;
  height: 72px;
  background: var(--ce-success-light);
  color: var(--ce-success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.ce-bk__success-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ce-secondary);
  margin: 0 0 12px;
}

.ce-bk__success-text {
  font-size: 0.925rem;
  color: var(--ce-text);
  margin: 0 0 28px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}

.ce-bk__success-note {
  max-width: 480px;
  margin: -8px auto 28px;
  padding: 12px 14px;
  border: 1px solid rgba(193, 111, 0, 0.18);
  border-radius: 10px;
  background: rgba(255, 244, 214, 0.75);
  color: #7a4b00;
  font-size: 0.9rem;
  line-height: 1.55;
}

.ce-bk__success-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* ── Sticky sidebar — clean card, no colored border ── */
.ce-bk__aside {
  position: sticky;
  top: 24px;
}
.ce-bk__aside[hidden] {
  display: none !important;
}

.ce-bk__sidebar {
  background: var(--ce-bg);
  border-radius: 12px;
  padding: 24px;
  box-shadow:
    0 1px 3px rgba(0, 41, 75, 0.06),
    0 4px 20px rgba(0, 41, 75, 0.05);
}

.ce-bk__sidebar-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ce-primary);
  margin: 0 0 8px;
}

.ce-bk__sidebar-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ce-secondary);
  margin: 0 0 16px;
  line-height: 1.35;
}

.ce-bk__sidebar-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.ce-bk__sidebar-divider {
  height: 1px;
  background: var(--ce-border);
  margin: 16px 0;
}

.ce-bk__sidebar-pricing {
  display: block;
}

.ce-bk__sidebar-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.ce-bk__sidebar-price-label {
  font-size: 0.83rem;
  color: var(--ce-text);
  font-weight: 500;
}

.ce-bk__sidebar-total {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ce-secondary);
  letter-spacing: -0.025em;
}

.ce-bk__sidebar-vat {
  font-size: 0.73rem;
  color: var(--ce-text-secondary);
  margin: 0;
}

/* Step 1: sidebar pricing hidden (no price groups calculated yet) */
.ce-bk[data-ce-bk-step="1"] .ce-bk__sidebar-pricing {
  display: none;
}

/* Summary step (4): hide sidebar, go full-width */
.ce-bk[data-ce-bk-step="4"] .ce-bk__body {
  grid-template-columns: minmax(0, 1fr);
}
.ce-bk[data-ce-bk-step="4"] .ce-bk__aside {
  display: none;
}

/* ── Button extras ── */
.ce-btn--link {
  background: transparent;
  border: none;
  padding: 3px 0;
  color: var(--ce-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  font-size: 0.83rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ce-font);
  transition: color 0.15s;
}
.ce-btn--link:hover {
  color: var(--ce-primary-hover);
}

.ce-btn--lg {
  padding: 11px 24px;
  font-size: 0.95rem;
}

/* ── Responsive: tablet (≤ 960px) ── */
@media (max-width: 960px) {
  .ce-bk__body {
    grid-template-columns: 1fr;
  }

  .ce-bk__aside {
    position: static;
    order: -1;
  }

  .ce-bk__sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
    align-items: start;
  }

  .ce-bk__sidebar-eyebrow,
  .ce-bk__sidebar-title {
    grid-column: 1 / -1;
  }

  .ce-bk__sidebar-chips {
    flex-direction: row;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .ce-bk__sidebar-divider {
    grid-column: 1 / -1;
  }
  .ce-bk__sidebar-pricing {
    grid-column: 1 / -1;
  }
}

/* ── Responsive: mobile (≤ 640px) ── */
@media (max-width: 640px) {
  .ce-bk {
    padding: 0 16px 56px;
  }
  .ce-bk__course-title {
    font-size: 1.25rem;
  }
  .ce-bk__panel {
    padding: 22px 18px;
  }
  .ce-bk__panel-title {
    font-size: 1.05rem;
  }
  .ce-bk__meta-grid {
    grid-template-columns: 1fr;
  }

  .ce-bk__addr-toolbar,
  .ce-bk__addr-option {
    flex-direction: column;
  }

  .ce-bk__addr-option-body {
    width: 100%;
  }
  .ce-bk__addr-edit-btn {
    width: 100%;
    justify-content: center;
  }

  .ce-bk__summary-grid {
    grid-template-columns: 1fr;
  }

  .ce-bk__stepper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .ce-bk__step-label {
    display: none;
  }
  .ce-bk__step-line {
    min-width: 12px;
    max-width: 32px;
  }

  .ce-bk__summary-total {
    font-size: 1.2rem;
  }

  .ce-bk__sidebar {
    display: block;
  }

  .ce-bk__panel-actions--split {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .ce-bk__panel-actions--split .ce-btn {
    width: 100%;
    justify-content: center;
  }

  .ce-bk__success {
    padding: 40px 20px;
  }
}

/* ============================================================
   Course List Shortcode (course_explorer_course_list)
   ============================================================ */
.ce-wrap.ce-course-list-wrap {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 18px 0;
  background: var(--ce-card-bg, var(--ce-bg, #fff));
  border: 1px solid var(--ce-border, #e2e8f0);
  border-radius: var(--ce-radius-lg, 8px);
}
.ce-wrap .ce-course-list-table {
  min-width: 760px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ce-text, #334155);
  font-size: 0.94rem;
  overflow: hidden;
}
.ce-wrap .ce-course-list-table thead,
.ce-wrap .ce-course-list-table thead tr {
  background: var(--ce-bg-subtle, #f8f9fa);
  background: color-mix(in srgb, var(--ce-bg-subtle, #f8f9fa) 86%, var(--ce-border, #e2e8f0));
}
.ce-wrap .ce-course-list-table thead th {
  position: relative;
  background: var(--ce-bg-subtle, #f8f9fa);
  background: color-mix(in srgb, var(--ce-bg-subtle, #f8f9fa) 86%, var(--ce-border, #e2e8f0));
  color: var(--ce-secondary, var(--ce-primary, #2563eb));
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  padding: 16px 18px;
  text-align: left;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ce-border, #e2e8f0);
}
.ce-wrap .ce-course-list-table tbody td {
  position: relative;
  padding: 18px;
  border-bottom: 1px solid var(--ce-border, #e2e8f0);
  vertical-align: middle;
}
.ce-wrap .ce-course-list-table tbody tr {
  background: var(--ce-bg, #fff);
  transition:
    background 0.16s ease,
    box-shadow 0.16s ease;
}
.ce-wrap .ce-course-list-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--ce-bg-subtle, #f8fafc) 62%, var(--ce-bg, #fff));
}
.ce-wrap .ce-course-list-table tbody tr:last-child td {
  border-bottom: none;
}
.ce-wrap .ce-course-list-table tbody tr:hover td {
  background: color-mix(in srgb, var(--ce-primary-light, #f0f4ff) 58%, var(--ce-bg, #fff));
}
.ce-wrap .ce-course-list-table a {
  color: var(--ce-primary, #2563eb);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}
.ce-wrap .ce-course-list-table a:hover {
  color: var(--ce-primary-hover, var(--ce-primary, #2563eb));
}
.ce-wrap .ce-course-list-table .ce-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--ce-radius-btn, 0px);
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--ce-primary-light, #f0f4ff);
  color: var(--ce-primary, #2563eb);
}

/* ============================================================
   Lecturers Shortcode (course_explorer_lecturers)
   ============================================================ */
.ce-wrap .ce-lecturers-wrap {
  padding: 0;
}
.ce-wrap .ce-lecturers__empty {
  color: var(--ce-text-muted, #6b7280);
  font-size: 0.95rem;
}
.ce-wrap .ce-lecturers__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(var(--ce-lec-cols, 3), 1fr);
}
.ce-wrap .ce-lecturers__grid--cols-1 {
  --ce-lec-cols: 1;
}
.ce-wrap .ce-lecturers__grid--cols-2 {
  --ce-lec-cols: 2;
}
.ce-wrap .ce-lecturers__grid--cols-3 {
  --ce-lec-cols: 3;
}
.ce-wrap .ce-lecturers__grid--cols-4 {
  --ce-lec-cols: 4;
}
@media (max-width: 600px) {
  .ce-wrap .ce-lecturers__grid {
    --ce-lec-cols: 1 !important;
  }
}
.ce-wrap .ce-lecturers__card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: var(--ce-card-bg, #fff);
  border: 1px solid var(--ce-border, #e2e8f0);
  border-radius: var(--ce-radius-lg, 8px);
}
.ce-wrap .ce-lecturers__avatar {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
}
.ce-wrap .ce-lecturers__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ce-wrap .ce-lecturers__avatar-placeholder {
  width: 100%;
  height: 100%;
  background: var(--ce-primary-light, #f0f4ff);
  color: var(--ce-primary, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  border-radius: 50%;
}
.ce-wrap .ce-lecturers__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ce-wrap .ce-lecturers__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ce-text, #1a202c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ce-wrap .ce-lecturers__job-title {
  font-size: 0.8rem;
  color: var(--ce-text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ce-wrap .ce-lecturers__bio {
  margin: 2px 0 0;
  color: var(--ce-text-muted, #6b7280);
  font-size: 0.84rem;
  line-height: 1.5;
}
.ce-wrap .ce-lecturers__bio p {
  margin: 0 0 0.45em;
}
.ce-wrap .ce-lecturers__bio p:last-child {
  margin-bottom: 0;
}
.ce-wrap .ce-lecturers__bio ul,
.ce-wrap .ce-lecturers__bio ol {
  margin: 0.35em 0 0;
  padding-left: 1.25em;
}
.ce-wrap .ce-lecturers__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.ce-wrap .ce-lecturers__skill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--ce-radius-btn, 0px);
  background: var(--ce-primary-light, #f0f4ff);
  color: var(--ce-primary, #2563eb);
  font-size: 0.76rem;
  font-weight: 600;
}
.ce-wrap .ce-lecturers__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
  font-size: 0.8rem;
}
.ce-wrap .ce-lecturers__contact a {
  color: var(--ce-primary, #2563eb);
  text-decoration: none;
}
.ce-wrap .ce-lecturers__contact a:hover {
  text-decoration: underline;
}

/* ================================================================
   Lecturer Management View (.ce-lect-*)
   ================================================================ */

/* Header */
.ce-wrap .ce-lect-header {
  padding: 20px 20px 0 24px;
}
.ce-wrap .ce-lect-header__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.ce-wrap .ce-lect-header__coursenr {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ce-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ce-wrap .ce-lect-header__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ce-text, #1a202c);
  margin: 0 0 4px;
}
.ce-wrap .ce-lect-header__subtitle {
  font-size: 0.9rem;
  color: var(--ce-text-muted, #6b7280);
  margin: 0 0 12px;
}
.ce-wrap .ce-lect-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.ce-wrap .ce-lect-header__meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: var(--ce-text-muted, #6b7280);
}

/* Stats row */
.ce-wrap .ce-lect-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.ce-wrap .ce-lect-stat {
  flex: 1 1 90px;
  min-width: 80px;
  border-radius: var(--ce-radius, 10px);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 1px solid transparent;
}
.ce-wrap .ce-lect-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
.ce-wrap .ce-lect-stat__label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.75;
}
.ce-wrap .ce-lect-stat--blue {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.ce-wrap .ce-lect-stat--green {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}
.ce-wrap .ce-lect-stat--amber {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}
.ce-wrap .ce-lect-stat--teal {
  background: #f0fdfa;
  border-color: #99f6e4;
  color: #0f766e;
}
.ce-wrap .ce-lect-stat--purple {
  background: #faf5ff;
  border-color: #e9d5ff;
  color: #7c3aed;
}
.ce-wrap .ce-lect-stat--red {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}
.ce-wrap .ce-lect-stat--gray {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #6b7280;
}

/* Section tabs */
.ce-wrap .ce-lect-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ce-wrap .ce-lect-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ce-text-muted, #6b7280);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
  white-space: nowrap;
}
.ce-wrap .ce-lect-tab:hover {
  color: var(--ce-primary, #2563eb);
}
.ce-wrap .ce-lect-tab--active {
  color: var(--ce-primary, #2563eb);
  border-bottom-color: var(--ce-primary, #2563eb);
  font-weight: 600;
}
.ce-wrap .ce-lect-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ce-border, #e5e7eb);
  color: var(--ce-text-muted, #6b7280);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
}
.ce-wrap .ce-lect-tab--active .ce-lect-tab__count {
  background: var(--ce-primary-light, #eff6ff);
  color: var(--ce-primary, #2563eb);
}

/* Sections */
.ce-wrap .ce-lect-section {
  animation: ce-fadein 0.18s ease;
}
@keyframes ce-fadein {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.ce-wrap .ce-lect-section__hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--ce-text-muted, #6b7280);
  margin-bottom: 16px;
  background: #f9fafb;
  border: 1px solid var(--ce-border, #e5e7eb);
  border-radius: 8px;
  padding: 10px 14px;
}

/* Participant table */
.ce-wrap .ce-lect-participant-table {
  border: 1px solid var(--ce-border, #e5e7eb);
  border-radius: var(--ce-radius, 10px);
  overflow: hidden;
}
.ce-wrap .ce-lect-participant-table__head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  padding: 10px 16px;
  background: #f9fafb;
  border-bottom: 1px solid var(--ce-border, #e5e7eb);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ce-text-muted, #6b7280);
}
.ce-wrap .ce-lect-participant-table__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ce-border, #e5e7eb);
  transition: background 0.1s ease;
}
.ce-wrap .ce-lect-participant-table__row:last-child {
  border-bottom: none;
}
.ce-wrap .ce-lect-participant-table__row:hover {
  background: #f9fafb;
}
.ce-wrap .ce-lect-participant-table__row--cancelled {
  opacity: 0.55;
}
.ce-wrap .ce-lect-participant-table__name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ce-text, #1a202c);
}
.ce-wrap .ce-lect-participant-table__date {
  font-size: 0.78rem;
  color: var(--ce-text-muted, #6b7280);
  white-space: nowrap;
}

/* Attendance list */
.ce-wrap .ce-lect-attendance-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ce-wrap .ce-lect-attendance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--ce-border, #e5e7eb);
  border-radius: 8px;
  transition: opacity 0.15s ease;
}
.ce-wrap .ce-lect-attendance-row--loading {
  opacity: 0.6;
  pointer-events: none;
}
.ce-wrap .ce-lect-attendance-row__name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ce-text, #1a202c);
  flex: 1 1 0;
  min-width: 0;
}
.ce-wrap .ce-lect-attendance-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ce-wrap .ce-lect-attendance-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid var(--ce-border, #e5e7eb);
  border-radius: 6px;
  background: #fff;
  color: var(--ce-text-muted, #6b7280);
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease;
}
.ce-wrap .ce-lect-attendance-btn:hover {
  border-color: #9ca3af;
  color: var(--ce-text, #1a202c);
}
.ce-wrap .ce-lect-attendance-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.ce-wrap .ce-lect-attendance-btn--active.ce-lect-attendance-btn--registered {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.ce-wrap .ce-lect-attendance-btn--active.ce-lect-attendance-btn--attended {
  background: #f0fdfa;
  border-color: #99f6e4;
  color: #0f766e;
}
.ce-wrap .ce-lect-attendance-btn--active.ce-lect-attendance-btn--passed {
  background: #faf5ff;
  border-color: #e9d5ff;
  color: #7c3aed;
}
.ce-wrap .ce-lect-attendance-btn--active.ce-lect-attendance-btn--noshow {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

/* File list */
.ce-wrap .ce-lect-file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ce-wrap .ce-lect-file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--ce-border, #e5e7eb);
  border-radius: 8px;
  text-decoration: none;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}
.ce-wrap .ce-lect-file-row:hover {
  background: #f0f4ff;
  border-color: #bfdbfe;
}
.ce-wrap .ce-lect-file-row__icon {
  color: var(--ce-primary, #2563eb);
  flex-shrink: 0;
}
.ce-wrap .ce-lect-file-row__info {
  flex: 1 1 0;
  min-width: 0;
}
.ce-wrap .ce-lect-file-row__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ce-text, #1a202c);
  display: block;
}
.ce-wrap .ce-lect-file-row__desc {
  font-size: 0.78rem;
  color: var(--ce-text-muted, #6b7280);
  display: block;
  margin-top: 2px;
}
.ce-wrap .ce-lect-file-row__aside {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ce-wrap .ce-lect-file-row__size {
  font-size: 0.75rem;
  color: var(--ce-text-muted, #6b7280);
}
.ce-wrap .ce-lect-file-row__dl {
  color: var(--ce-primary, #2563eb);
}

/* Message form */
.ce-wrap .ce-lect-msg-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 600px;
}
.ce-wrap .ce-lect-msg-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ce-wrap .ce-lect-msg-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ce-text, #1a202c);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ce-wrap .ce-lect-msg-select,
.ce-wrap .ce-lect-msg-input,
.ce-wrap .ce-lect-msg-textarea {
  width: 100%;
  padding: 9px 12px;
  font-size: 0.9rem;
  border: 1px solid var(--ce-border, #e5e7eb);
  border-radius: 8px;
  color: var(--ce-text, #1a202c);
  background: #fff;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-sizing: border-box;
}
.ce-wrap .ce-lect-msg-select:focus,
.ce-wrap .ce-lect-msg-input:focus,
.ce-wrap .ce-lect-msg-textarea:focus {
  outline: none;
  border-color: var(--ce-primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.ce-wrap .ce-lect-msg-textarea {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
  line-height: 1.5;
}
.ce-wrap .ce-lect-msg-error {
  font-size: 0.82rem;
  color: #dc2626;
  padding: 8px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
}
.ce-wrap .ce-lect-msg-success {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.ce-wrap .ce-lect-msg-submit {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
}

/* Lecturer course list – search input reset */
.ce-wrap .ce-lecturer-list__search .ce-lecturer-list__search-input {
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  color: var(--ce-text) !important;
  line-height: inherit !important;
  display: inline-block !important;
  transition: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.ce-wrap .ce-lecturer-list__search .ce-lecturer-list__search-input:focus {
  border-color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Responsive adjustments */
@media (max-width: 540px) {
  .ce-wrap .ce-lect-stats {
    gap: 6px;
  }
  .ce-wrap .ce-lect-stat {
    flex: 1 1 70px;
    padding: 10px 10px;
  }
  .ce-wrap .ce-lect-stat__value {
    font-size: 1.25rem;
  }
  .ce-wrap .ce-lect-attendance-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .ce-wrap .ce-lect-participant-table__head,
  .ce-wrap .ce-lect-participant-table__row {
    grid-template-columns: 1fr auto;
  }
  .ce-wrap .ce-lect-participant-table__head span:last-child,
  .ce-wrap .ce-lect-participant-table__row .ce-lect-participant-table__date {
    display: none;
  }
  .ce-wrap .ce-lect-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
}