/**
 * Andalali - Career & Learning Network
 * Custom design layer (loaded after style.min.css)
 * Every component is namespaced with .al- to avoid clashing with Sngine core.
 */

:root {
  --al-primary: #5426ef;
  --al-primary-soft: #f0ecff;
  --al-primary-dark: #3f18c9;
  --al-accent: #169363;
  --al-accent-soft: #e8f9f2;
  --al-warn: #bc7311;
  --al-warn-soft: #fff6e8;
  --al-danger: #ed4266;
  --al-danger-soft: #fff0f2;
  --al-ink: #10112f;
  --al-bg: #f7f9fd;
  --al-card: #ffffff;
  --al-border: #eceefa;
  --al-text: #10112f;
  --al-radius: 12px;
  --al-shadow: 0 1px 2px rgba(16, 17, 47, .04), 0 1px 3px rgba(16, 17, 47, .03);
  --al-shadow-lg: 0 12px 32px rgba(16, 17, 47, .10);
}

body.al-theme {
  background: var(--al-bg);
  color: var(--al-text);
}

/* ==========================================================================
   Header
   ========================================================================== */

.al-header {
  background: #fff !important;
  border-bottom: 1px solid var(--al-border);
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.al-header .al-header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 64px;
}

.al-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.3px;
  color: var(--al-text) !important;
}

.al-brand .al-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--al-primary), #6f8cff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 17px;
  flex: 0 0 auto;
}

.al-brand img {
  max-height: 34px;
  width: auto;
}

.al-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  overflow: hidden;
}

.al-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #55617a !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.al-nav a:hover {
  background: var(--al-primary-soft);
  color: var(--al-primary) !important;
}

.al-nav a.active {
  background: var(--al-primary-soft);
  color: var(--al-primary) !important;
}

.al-nav a svg,
.al-nav a i {
  width: 16px;
  height: 16px;
}
/* standalone nav bar (site-wide career navigation) */
.al-navbar {
  background: #fff;
  border-bottom: 1px solid var(--al-border);
}

.al-navbar .al-nav {
  min-height: 46px;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.al-navbar .al-nav::-webkit-scrollbar {
  display: none;
}

.al-navbar .al-nav a {
  padding: 7px 11px;
  font-size: 13px;
}

.al-navbar .al-nav a span {
  white-space: nowrap;
}



.al-header-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.al-search {
  position: relative;
  width: 230px;
}

.al-search input {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--al-border);
  background: #f7f9fd;
  padding: 0 14px 0 38px;
  font-size: 13.5px;
  color: var(--al-text);
  outline: none;
  transition: border-color .15s, background .15s;
}

.al-search input::placeholder {
  color: #9aa5ba;
}

.al-search input:focus {
  background: #fff;
  border-color: var(--al-primary);
}

.al-search .al-search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa5ba;
  pointer-events: none;
  width: 16px;
  height: 16px;
}

.al-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--al-border);
  background: #fff;
  color: #55617a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.al-icon-btn:hover {
  background: var(--al-primary-soft);
  color: var(--al-primary);
}

.al-icon-btn .al-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--al-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.al-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  border: 1px solid var(--al-border);
  background: #fff;
  text-decoration: none !important;
  color: var(--al-text) !important;
}

.al-user-chip img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.al-user-chip .al-user-chip-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-user-chip .al-user-chip-role {
  font-size: 11px;
  color: #4f5670;
  line-height: 1.1;
}

.al-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s, background .15s, color .15s;
}

.al-btn svg,
.al-btn i {
  width: 16px;
  height: 16px;
}

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

.al-btn-primary:hover {
  filter: brightness(1.07);
}

.al-btn-dark {
  background: #17233c;
  color: #fff !important;
}

.al-btn-dark:hover {
  filter: brightness(1.35);
}

.al-btn-ghost {
  background: #fff;
  border-color: var(--al-border);
  color: var(--al-text) !important;
}

.al-btn-ghost:hover {
  border-color: var(--al-primary);
  color: var(--al-primary) !important;
}

.al-btn-soft {
  background: var(--al-primary-soft);
  color: var(--al-primary) !important;
}

.al-btn-block {
  width: 100%;
  white-space: normal;
  line-height: 1.2;
}

.al-btn-sm {
  height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
  border-radius: 8px;
}

.al-btn-xs {
  height: 28px;
  padding: 0 10px;
  font-size: 11.5px;
  border-radius: 8px;
}

.al-header-mobile-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--al-border);
  background: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ==========================================================================
   Dashboard shell / columns
   (column ratios, gaps & breakpoints follow the reference UI design)
   ========================================================================== */

/* full width :: the dashboard stretches, but keeps a safe gutter on every screen */
.al-shell {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 10px clamp(10px, 1.5vw, 24px) 48px;
}

.al-dashboard {
  display: grid;
  /* jobs | candidates | feed | profile | extra
     Five real columns from 1200px up. The candidates + quick-filters column
     (column 2) is intentionally wider than the jobs column so its rows have
     breathing room, and the feed takes what is left (slightly narrower than
     it was before, but still the widest column). */
  grid-template-columns:
    clamp(170px, 13.5vw, 245px) clamp(200px, 16vw, 300px) minmax(0, 1fr) clamp(180px, 14vw, 240px) clamp(160px, 12.5vw, 225px);
  gap: clamp(8px, 0.65vw, 12px);
  align-items: start;
}

.al-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.al-sticky {
  position: sticky;
  top: 82px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* the design stacks the column blocks with the 10px gap, not with card margins */
.al-dashboard .al-card,
.al-dashboard .al-promo {
  margin-bottom: 0;
}

.al-card {
  background: var(--al-card);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius);
  box-shadow: var(--al-shadow);
  margin-bottom: 16px;
  overflow: hidden;
}

.al-card:last-child {
  margin-bottom: 0;
}

.al-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  padding: 14px 16px 10px;
}

.al-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--al-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.al-card-title>span {
  min-width: 0;
  overflow-wrap: break-word;
}

.al-card-title svg,
.al-card-title i {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--al-primary);
}

.al-card-link {
  flex: 0 0 auto;
  margin-inline-start: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--al-primary) !important;
  text-decoration: none !important;
  white-space: nowrap;
}

/* a narrow community column: a long "See More Events" link moves to its own
   right-aligned line instead of forcing the title to break mid-word */
.al-col-extra .al-card-head {
  flex-wrap: wrap;
  gap: 4px 8px;
}

.al-col-extra .al-card-link {
  margin-inline-start: auto;
}

.al-card-body {
  padding: 6px 16px 16px;
}

.al-card-pad {
  padding: 16px;
}

.al-text-sm {
  font-size: 12.5px;
}

.al-text-xs {
  font-size: 11.5px;
}

.al-strong {
  font-weight: 600;
  color: var(--al-text);
}

.al-divider {
  height: 1px;
  background: var(--al-border);
  margin: 10px 0;
  border: 0;
}

.al-empty {
  padding: 18px 12px;
  text-align: center;
  color: #4f5670;
  font-size: 12.5px;
}

/* category list (All Jobs) */
.al-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.al-cat-list li a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  color: #4c5871 !important;
  text-decoration: none !important;
  transition: background .15s, color .15s;
}

.al-cat-list li a:hover {
  background: #f5f7fc;
  color: var(--al-primary) !important;
}

.al-cat-list li a.active {
  background: var(--al-primary);
  color: #fff !important;
}

.al-cat-list li a.active .al-cat-count {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

.al-cat-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-cat-count {
  flex: 0 0 auto;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  background: #f0f3fa;
  color: #4f5670;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* jobs sidebar: open jobs counter next to every category */
.side-nav a .al-cat-count {
  margin-top: 1px;
  margin-left: 6px;
}

/* dark promo card */
.al-promo {
  background: linear-gradient(150deg, #12305e 0%, #1a5cff 100%);
  border-radius: var(--al-radius);
  padding: 16px;
  color: #fff;
  margin-bottom: 16px;
  box-shadow: var(--al-shadow);
}

.al-promo-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
}

.al-promo-sub {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .75);
  margin: 0 0 14px;
}

.al-toggle {
  display: flex;
  background: rgba(255, 255, 255, .14);
  border-radius: 9px;
  padding: 3px;
  margin-bottom: 14px;
}

.al-toggle button {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .78);
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 4px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.al-toggle button.active {
  background: #fff;
  color: #12305e;
}

.al-stat-value {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 2px;
}

.al-stat-label {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .75);
}

.al-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .9);
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.al-mini-row:first-of-type {
  border-top: 0;
}

.al-mini-row b {
  color: #fff;
}

/* candidate / people rows */
.al-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--al-border);
}

.al-person:last-child {
  border-bottom: 0;
}

.al-person img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.al-person-info {
  flex: 1 1 auto;
  min-width: 0;
}

.al-person-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--al-text) !important;
  text-decoration: none !important;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-person-role {
  font-size: 11.5px;
  color: #4f5670;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-match {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 7px;
  background: var(--al-accent-soft);
  color: #0a8a63;
}

/* ==========================================================================
   Feed column
   ========================================================================== */

.al-feed {
  min-width: 0;
}

.al-hero {
  position: relative;
  border-radius: var(--al-radius);
  overflow: hidden;
  background: linear-gradient(100deg, #0a0d24 0%, #131a33 48%, #26312e 100%);
  color: #fff;
  padding: 26px 24px;
  margin-bottom: 16px;
  box-shadow: var(--al-shadow);
}

.al-hero:after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
}

.al-hero:before {
  content: "";
  position: absolute;
  right: 90px;
  top: -110px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
}

/* the feed hero is height matched to the "for candidates" card by the
   dashboard script, so its copy is centred inside the (taller) band */
.al-feed>.al-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.al-hero-grid {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.al-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 62%;
}

/* right hand stat tiles inside the hero */
.al-hero-side {
  display: grid;
  gap: 6px;
  min-width: 118px;
  z-index: 2;
}

.al-hero-side a {
  display: block;
  background: rgba(255, 255, 255, .96);
  color: var(--al-text) !important;
  border-radius: 9px;
  padding: 6px 10px;
  text-decoration: none !important;
  transition: transform .15s;
}

.al-hero-side a:hover {
  transform: translateY(-1px);
}

.al-hero-side b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--al-primary);
}

.al-hero-side span {
  font-size: 10px;
  color: #4f5670;
}

.al-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  margin-bottom: 10px;
}

.al-hero h1 {
  font-size: 25px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 8px;
  color: #fff;
}

.al-hero p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 18px;
  line-height: 1.55;
}

.al-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.al-hero-actions .al-btn {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff !important;
}

.al-hero-actions .al-btn:hover {
  background: rgba(255, 255, 255, .26);
}

.al-hero-actions .al-btn.al-btn-solid {
  background: #fff;
  border-color: #fff;
  color: #12305e !important;
}

.al-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.al-hero-stat b {
  display: block;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
}

.al-hero-stat span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .75);
}

/* composer */
.al-composer {
  background: #fff;
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius);
  box-shadow: var(--al-shadow);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.al-composer-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.al-composer-top img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.al-composer-fake {
  flex: 1 1 auto;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--al-border);
  background: #f7f9fd;
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-size: 13.5px;
  color: #98a3b8;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s;
}

.al-composer-fake:hover {
  background: #fff;
  border-color: var(--al-primary);
}

.al-composer-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--al-border);
}

.al-composer-tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: #55617a;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.al-composer-tool:hover {
  background: #f5f7fc;
  color: var(--al-primary);
}

.al-composer-tool svg,
.al-composer-tool i {
  width: 17px;
  height: 17px;
}

.al-composer-tool.al-t-photo svg {
  color: #00b884;
}

.al-composer-tool.al-t-video svg {
  color: #ff9f0a;
}

.al-composer-tool.al-t-job svg {
  color: #1a5cff;
}

.al-composer-tool.al-t-course svg {
  color: #8b5cf6;
}

/* feed tabs (reference design: white bar with an underline on the active tab) */
.al-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--al-card);
  border: 1px solid var(--al-border);
  border-radius: 7px;
  padding: 0 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.al-tabs::-webkit-scrollbar {
  display: none;
}

.al-tabs a {
  padding: 10px 2px;
  border-bottom: 2px solid transparent;
  font-size: 12px;
  font-weight: 600;
  color: #55617a !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}

.al-tabs a:hover,
.al-tabs a.active {
  color: var(--al-primary) !important;
  border-bottom-color: var(--al-primary);
}

.al-feed-stream {
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   The shared newsfeed panel (announcements, stories, composer, widgets) and
   the post stream live inside the feed column: they keep the design's 10px
   rhythm instead of the theme's stacked card margins.
   --------------------------------------------------------------------------- */

.al-feed>*,
.al-feed-stream>* {
  margin-bottom: 0;
}

.al-feed .publisher {
  margin-bottom: 0;
}

/* theme cards coming from the newsfeed panel follow the reference design */
.al-feed .card,
.al-feed .post {
  margin-bottom: 10px;
  border-radius: 7px;
}

.al-feed .card-header {
  border-radius: 7px 7px 0 0 !important;
}

.al-feed .card-footer {
  border-radius: 0 0 7px 7px !important;
}

.al-feed .post:last-child,
.al-feed .card:last-child {
  margin-bottom: 0;
}

.al-feed-stream ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the theme pins "View N New Posts" over the centre of the viewport, where it
   lands on top of the hero/feed content; inside the dashboard it sits in the
   stream above the posts instead */
.al-feed .posts-staging-btn {
  position: relative;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 0 10px;
  z-index: 20;
  box-shadow: var(--al-shadow-lg);
}

/* ==========================================================================
   Right hand asides
   ========================================================================== */

.al-profile-head {
  padding: 16px;
  text-align: center;
  border-bottom: 1px solid var(--al-border);
}

.al-profile-avatar {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto 10px;
}

.al-profile-avatar img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--al-primary-soft);
}

.al-profile-avatar .al-profile-online {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--al-accent);
  border: 2px solid #fff;
}

.al-profile-name {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--al-text) !important;
  text-decoration: none !important;
  display: block;
}

.al-profile-headline {
  font-size: 12px;
  color: #4f5670;
  margin: 0 0 3px;
}

.al-profile-loc {
  font-size: 11.5px;
  color: #4f5670;
}

.al-badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--al-accent-soft);
  color: #0a8a63;
}

.al-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--al-border);
  text-align: center;
}

.al-profile-stats a {
  padding: 11px 4px;
  text-decoration: none !important;
  border-left: 1px solid var(--al-border);
}

.al-profile-stats a:first-child {
  border-left: 0;
}

.al-profile-stats b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--al-text);
  line-height: 1.1;
}

.al-profile-stats span {
  font-size: 10.5px;
  color: #4f5670;
}

/* intro video */
.al-video {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #0f172a;
  aspect-ratio: 16/10;
  margin-bottom: 10px;
}

.al-video video,
.al-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.al-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

img.al-list-icon {
  object-fit: cover;
}

.al-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(15, 23, 42, .12), rgba(15, 23, 42, .55));
  cursor: pointer;
  border: 0;
  width: 100%;
}

.al-video-play span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #12305e;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}

.al-video-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: repeating-linear-gradient(45deg, #16233c, #16233c 12px, #1b2b48 12px, #1b2b48 24px);
  color: rgba(255, 255, 255, .72);
  font-size: 11.5px;
  text-align: center;
  padding: 14px;
}

/* single content :: admin managed images + videos */
.al-single-image {
  position: relative;
  border-radius: var(--al-radius);
  overflow: hidden;
  background: #eef2f9;
  box-shadow: var(--al-shadow);
  aspect-ratio: 4/5;
}

.al-single-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the images are stacked one below another, each one is a card */
.al-single-image.is-linked {
  display: block;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.al-single-image.is-linked:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(16, 17, 47, .14);
}

.al-single-image.is-linked:focus-visible {
  outline: 2px solid var(--al-primary);
  outline-offset: 2px;
}

/* featured video :: taller player (it sits in the narrow last column) */
.al-single-video .al-video {
  margin-bottom: 0;
  aspect-ratio: 1/1;
}

/* progress */
.al-progress {
  height: 8px;
  border-radius: 999px;
  background: #eef2f9;
  overflow: hidden;
  margin: 8px 0 6px;
}

.al-progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--al-primary), #6f8cff);
}

.al-progress.al-progress-green span {
  background: linear-gradient(90deg, #00b884, #4dd6ab);
}

/* job match rows */
.al-job {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--al-border);
  border-radius: 11px;
  margin-bottom: 8px;
  text-decoration: none !important;
  transition: border-color .15s, box-shadow .15s;
}

.al-job:hover {
  border-color: var(--al-primary);
  box-shadow: var(--al-shadow);
}

.al-job-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.al-job-title {
  font-size: 12.8px;
  font-weight: 700;
  color: var(--al-text) !important;
  line-height: 1.25;
}

.al-job-company {
  font-size: 11.5px;
  color: #4f5670;
  margin-top: 1px;
}

.al-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.al-tag {
  font-size: 10.8px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f2f5fb;
  color: #64708a;
}

.al-tag-blue {
  background: var(--al-primary-soft);
  color: var(--al-primary);
}

.al-tag-green {
  background: var(--al-accent-soft);
  color: #0a8a63;
}

/* courses */
.al-course {
  display: block;
  text-decoration: none !important;
  margin-bottom: 12px;
}

.al-course:last-child {
  margin-bottom: 0;
}

.al-course-thumb {
  width: 100%;
  height: 78px;
  border-radius: 10px;
  object-fit: cover;
  background: #eef2f9;
  margin-bottom: 8px;
  display: block;
}

.al-course-title {
  font-size: 12.8px;
  font-weight: 700;
  color: var(--al-text) !important;
  line-height: 1.3;
  margin-bottom: 4px;
}

.al-course-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #4f5670;
}

/* group rows */
.al-group-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  text-decoration: none !important;
}

.al-group-row img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  flex: 0 0 auto;
}

/* events */
.al-event {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid var(--al-border);
  text-decoration: none !important;
}

.al-event:last-child {
  border-bottom: 0;
}

.al-event-date {
  flex: 0 0 auto;
  width: 40px;
  border-radius: 9px;
  background: var(--al-primary-soft);
  color: var(--al-primary);
  text-align: center;
  padding: 5px 0 6px;
}

.al-event-date b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.al-event-date span {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.al-event>span:last-child {
  min-width: 0;
}

.al-event-title {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--al-text) !important;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.al-event-sub {
  display: block;
  font-size: 11px;
  color: #4f5670;
  margin-top: 2px;
}

/* ==========================================================================
   Shared helpers
   ========================================================================== */

.al-card-sub {
  font-size: 11.5px;
  color: #4f5670;
  line-height: 1.5;
  margin: 0;
}

.al-head-block {
  padding: 14px 16px 0;
}

.al-section-hint {
  font-size: 10.5px;
  font-weight: 600;
  color: #4f5670;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* Experience pane heading (icon + "Experience Professional") */

.al-exp-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  margin: 0 0 8px;
  border-radius: 9px;
  background: linear-gradient(90deg, var(--al-primary-soft), rgba(255, 255, 255, 0));
}

.al-exp-head-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--al-card);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(51, 51, 91, .12);
}

.al-exp-head-icon svg {
  width: 15px;
  height: 15px;
}

.al-exp-head-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--al-text);
  letter-spacing: .2px;
}

/* ==========================================================================
   Category rows (All Jobs / specialisations)
   ========================================================================== */

.al-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid #f5f5fa;
  text-decoration: none !important;
  border-radius: 8px;
}

.al-cat-row:last-of-type {
  border-bottom: 0;
}

.al-cat-row:hover {
  background: #f7f4ff;
}

.al-cat-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--al-primary-soft);
  color: var(--al-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.al-cat-icon svg,
.al-cat-icon i {
  width: 18px;
  height: 18px;
}

.al-cat-row:nth-of-type(3n+2) .al-cat-icon {
  background: var(--al-accent-soft);
  color: var(--al-accent);
}

.al-cat-row:nth-of-type(3n+3) .al-cat-icon {
  background: var(--al-warn-soft);
  color: var(--al-warn);
}

.al-cat-row:nth-of-type(5n+4) .al-cat-icon {
  background: var(--al-danger-soft);
  color: var(--al-danger);
}

.al-cat-text {
  flex: 1 1 auto;
  min-width: 0;
}

.al-cat-text .al-cat-name {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--al-text) !important;
  line-height: 1.35;
  /* category names are never truncated: long labels wrap onto a second line */
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.al-cat-text small {
  display: block;
  font-size: 10.5px;
  color: #4f5670;
}

.al-cat-arrow {
  flex: 0 0 auto;
  color: #c3c8dc;
  font-size: 15px;
  line-height: 1;
}

/* ==========================================================================
   Call to action cards
   ========================================================================== */

.al-cta {
  position: relative;
  border-radius: var(--al-radius);
  padding: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: var(--al-shadow);
}

.al-cta h6 {
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 5px;
  letter-spacing: -.2px;
}

.al-cta p {
  font-size: 11.5px;
  line-height: 1.5;
  margin: 0 0 12px;
  position: relative;
  z-index: 1;
}

.al-cta .al-btn {
  position: relative;
  z-index: 1;
}

.al-cta-employer {
  background: #ece8ff;
  color: var(--al-primary);
}

.al-cta-employer p {
  color: #5b4bb5;
}

.al-cta-employer .al-btn-ghost {
  background: #fff;
  border-color: #ddd4ff;
  color: var(--al-primary) !important;
}

.al-cta-candidate {
  background: linear-gradient(135deg, #4f29dc 0%, #3015ad 100%);
  color: #fff;
}

.al-cta-candidate p {
  color: rgba(255, 255, 255, .82);
}

.al-cta-candidate .al-btn {
  background: #fff;
  border-color: #fff;
  color: #3015ad !important;
}

.al-cta-art {
  position: absolute;
  right: -4px;
  bottom: -10px;
  font-size: 62px;
  line-height: 1;
  opacity: .14;
  z-index: 0;
}

.al-cta-candidate .al-cta-art {
  opacity: .22;
}

/* job seekers get the platform numbers inside the "for candidates" card: the
   column is narrow, so the strip is kept compact and the content is centred
   once the dashboard script stretches the card to the hero height */
.al-col-candidates .al-cta-candidate {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.al-cta-candidate .al-hero-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top-color: rgba(255, 255, 255, .24);
}

.al-cta-candidate .al-hero-stat b {
  font-size: 16px;
}

.al-cta-candidate .al-hero-stat span {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .78);
}

/* job seekers: on wide screens the "for candidates" card sits right next to
   the hero and carries the numbers itself, so the hero copy steps aside
   (below this width the two blocks are stacked and the hero keeps them) */
@media (min-width: 1200px) {
  .al-dashboard.al-has-candidate-cta .al-feed>.al-hero .al-hero-stats {
    display: none;
  }
}

/* ...and below that width the hero keeps the strip, so the card hides its
   own copy (the blocks are stacked there and must not repeat the numbers) */
@media (max-width: 1199.98px) {
  .al-cta-candidate .al-hero-stats {
    display: none;
  }
}

/* ==========================================================================
   In-card filter controls
   ========================================================================== */

.al-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  border-bottom: 1px solid var(--al-border);
  margin: 6px 0 10px;
}

.al-seg::-webkit-scrollbar {
  display: none;
}

.al-seg button {
  border: 0;
  background: none;
  padding: 8px 3px;
  font-size: 10.5px;
  font-weight: 600;
  color: #4f5670;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
}

.al-seg button.active {
  color: var(--al-primary);
  box-shadow: inset 0 -2px 0 var(--al-primary);
}

.al-checks {
  display: grid;
  gap: 7px;
  margin: 8px 0 16px;
}

.al-checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 11.5px;
  color: #4f5670;
  cursor: pointer;
}

.al-checks input {
  margin: 0;
  accent-color: var(--al-primary);
}

.al-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 16px;
}

.al-chip {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 7px;
  background: #f0f1f8;
  color: #4d5871 !important;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .15s, color .15s;
}

.al-chip:hover {
  background: var(--al-primary-soft);
  color: var(--al-primary) !important;
}

.al-chip.al-chip-active {
  background: var(--al-primary);
  color: #fff !important;
}

/* ==========================================================================
   Profile strength / checklists
   ========================================================================== */

.al-strength-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.al-strength-val {
  margin-inline-start: auto;
  font-size: 20px;
  font-weight: 800;
  color: var(--al-text);
  line-height: 1;
  text-align: right;
}

.al-strength-val small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #4f5670;
  letter-spacing: .3px;
}

/* checklist of the profile strength steps: currently NOT rendered by the
   dashboard (only the percent & the done counter are shown) - the rules are
   kept here so the list can be re-enabled in index.andalali.tpl if needed */
.al-checklist {
  list-style: none;
  margin: 10px 0 14px;
  padding: 0;
  display: grid;
  gap: 8px;
}

/* 100% complete: the checklist is removed, so keep the CTA away from the text */
.al-progress + .al-card-sub + .al-btn {
  margin-top: 14px;
}

.al-checklist li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  color: #4d5871;
  line-height: 1.4;
}

.al-checklist li a {
  color: #4d5871 !important;
  text-decoration: none !important;
}

.al-checklist li a:hover {
  color: var(--al-primary) !important;
}

.al-check-done {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--al-accent);
  color: #fff;
  font-size: 9px;
  line-height: 15px;
  text-align: center;
}

.al-check-pending {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid #c9cfe0;
}

/* completed step: it stays in the list, just reads as secondary */
.al-checklist li.is-done {
  color: #8b97ae;
}

.al-checklist li.is-done a {
  color: #8b97ae !important;
}

.al-checklist li.is-done a:hover {
  color: var(--al-accent) !important;
}

/* ==========================================================================
   List rows with icon tiles / badges
   ========================================================================== */

.al-list-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--al-border);
  text-decoration: none !important;
}

.al-list-row:last-of-type {
  border-bottom: 0;
}

.al-list-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #142e5c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.al-list-icon svg,
.al-list-icon i {
  width: 17px;
  height: 17px;
}

.al-list-body {
  flex: 1 1 auto;
  min-width: 0;
}

.al-list-title {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--al-text) !important;
  line-height: 1.3;
}

.al-list-title a {
  color: var(--al-text) !important;
  text-decoration: none !important;
}

.al-list-sub {
  display: block;
  font-size: 11px;
  color: #4f5670;
  line-height: 1.5;
}

.al-list-sub.al-list-sub-green {
  color: var(--al-accent);
  font-weight: 600;
}

.al-new {
  position: absolute;
  right: 0;
  top: 8px;
  background: var(--al-primary-soft);
  color: var(--al-primary);
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
}

.al-list-row.has-badge .al-list-title {
  padding-right: 42px;
}

/* ==========================================================================
   Premium / upgrade card
   ========================================================================== */

.al-premium {
  position: relative;
  border-radius: var(--al-radius);
  padding: 16px;
  margin-bottom: 16px;
  color: #fff;
  background: linear-gradient(120deg, #4925dd 0%, #8b62dd 100%);
  box-shadow: var(--al-shadow);
}

.al-premium h6 {
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 4px;
}

.al-premium p {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .85);
  margin: 0 0 8px;
}

.al-premium ul {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-size: 11.5px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .94);
}

.al-premium .al-btn {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .35);
  color: #fff !important;
}

.al-premium .al-btn:hover {
  background: rgba(255, 255, 255, .3);
}

/* ==========================================================================
   Quick tools strip
   ========================================================================== */

.al-tools {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
  margin-top: 9px;
}

.al-tool {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--al-card);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius);
  box-shadow: var(--al-shadow);
  text-decoration: none !important;
  transition: border-color .15s, transform .15s;
}

.al-tool:hover {
  border-color: var(--al-primary);
  transform: translateY(-1px);
}

.al-tool .al-cat-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.al-tool b {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--al-text) !important;
  line-height: 1.25;
}

.al-tool small {
  display: block;
  font-size: 10px;
  color: #4f5670;
}

/* ==========================================================================
   Feed embedded job card
   ========================================================================== */

.al-job-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--al-border);
  border-radius: 11px;
  padding: 8px 10px;
  margin-top: 8px;
}

.al-job-card .al-list-icon {
  background: #172949;
}

.al-job-apply {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #e4ddff;
  background: var(--al-primary-soft);
  color: var(--al-primary) !important;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
}

.al-job-apply:hover {
  background: var(--al-primary);
  color: #fff !important;
}

/* ==========================================================================
   Sign up - account type picker
   ========================================================================== */

.al-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}

/* compact account type picker (sign up forms) */
.al-type-grid-compact {
  gap: 8px;
  margin-bottom: 4px;
}

.al-type-grid-compact .al-type-box {
  padding: 11px 6px;
}

.al-type-grid-compact .al-type-box span {
  font-size: 10px;
}

/* conditional fields (company / institute name) */
.al-type-field {
  margin-top: 10px;
}

.al-type-field input {
  width: 100%;
  height: 44px;
  border: 1.5px solid var(--al-border);
  border-radius: 12px;
  padding: 0 14px;
  font-size: 13.5px;
  color: var(--al-text);
  background: #fff;
  outline: none;
}

.al-type-field input:focus {
  border-color: var(--al-primary);
}

.al-type {
  position: relative;
  display: block;
  cursor: pointer;
  margin: 0;
}

.al-type input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.al-type-box {
  display: block;
  border: 1.5px solid var(--al-border);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
  transition: border-color .15s, background .15s, box-shadow .15s;
  height: 100%;
}

.al-type-box svg,
.al-type-box i {
  width: 22px;
  height: 22px;
  margin-bottom: 6px;
  color: #8b97ae;
}

.al-type-box b {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--al-text);
}

.al-type-box span {
  display: block;
  font-size: 10.5px;
  color: #4f5670;
  line-height: 1.35;
  margin-top: 2px;
}

.al-type input:checked+.al-type-box {
  border-color: var(--al-primary);
  background: var(--al-primary-soft);
  box-shadow: 0 0 0 3px rgba(26, 92, 255, .1);
}

.al-type input:checked+.al-type-box svg,
.al-type input:checked+.al-type-box i {
  color: var(--al-primary);
}

.al-type-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--al-text);
  margin-bottom: 7px;
}

.al-type input:checked+.al-type-box b:after {
  content: "";
}

.al-type-box:hover {
  border-color: #cfc4ff;
}

.al-type-hint {
  display: block;
  font-size: 10.5px;
  color: #4f5670;
  text-align: center;
  margin: 2px 0 14px;
}

/* ==========================================================================
   Auth cards (sign in / sign up)
   ========================================================================== */

.al-auth {
  max-width: 560px;
  margin: 24px auto;
  padding: 24px 22px 20px;
  background: var(--al-card);
  border: 1px solid var(--al-border);
  border-radius: 18px;
  box-shadow: var(--al-shadow-lg);
}

.al-auth.al-auth-wide {
  max-width: 640px;
}

.al-auth-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.al-auth-head .al-brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--al-primary), #8b62dd);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 19px;
  flex: 0 0 auto;
}

.al-auth-head b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: var(--al-text);
  line-height: 1.2;
  letter-spacing: -.3px;
}

.al-auth-head small {
  display: block;
  font-size: 11px;
  color: #4f5670;
}

.al-auth h2,
.al-auth .fr_welcome_title {
  font-size: 19px;
  font-weight: 800;
  color: var(--al-text);
  letter-spacing: -.3px;
  margin: 0 0 4px;
}

.al-auth-sub {
  font-size: 12px;
  color: #4f5670;
  margin: 0 0 16px;
}

/* elengine based fields inside the Andalali auth card */
.al-auth .fr_welcome_field {
  position: relative;
  margin-bottom: 10px;
}

.al-auth .fr_welcome_field input,
.al-auth .fr_welcome_field select {
  width: 100%;
  height: 46px;
  border: 1.5px solid var(--al-border);
  border-radius: 12px;
  background: #fff;
  color: var(--al-text);
  font-size: 13.5px;
  padding: 0 44px 0 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.al-auth .fr_welcome_field input::placeholder {
  color: #9aa5ba;
}

.al-auth .fr_welcome_field input:focus,
.al-auth .fr_welcome_field select:focus {
  border-color: var(--al-primary);
  box-shadow: 0 0 0 3px rgba(84, 38, 239, .10);
}

.al-auth .fr_welcome_field>svg {
  position: absolute;
  right: 14px;
  top: calc(50% + 11px);
  margin: 0;
  width: 17px;
  height: 17px;
  color: #9aa5ba;
  opacity: 1;
  pointer-events: none;
}

.al-auth .fr_welcome_field .js_toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  left: auto;
  cursor: pointer;
  line-height: 0;
}

.al-auth .fr_welcome_field .js_toggle-password svg {
  width: 18px;
  height: 18px;
  margin: 0;
  fill: #9aa5ba;
  opacity: .75;
  cursor: pointer;
}

.al-auth .fr_welcome_btn,
.al-auth .btn-primary {
  height: 46px;
  border: 0;
  border-radius: 12px;
  background: var(--al-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: none;
}

.al-auth .fr_welcome_btn:hover,
.al-auth .btn-primary:hover {
  background: var(--al-primary-dark);
}

.al-auth .form-control,
.al-auth .form-select {
  height: 46px;
  border: 1.5px solid var(--al-border);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--al-text);
}

.al-auth .form-control:focus,
.al-auth .form-select:focus {
  border-color: var(--al-primary);
  box-shadow: 0 0 0 3px rgba(84, 38, 239, .10);
}

.al-auth .al-type-field {
  margin: 0 0 10px;
}

.al-auth .al-type-field input {
  height: 46px;
  border-radius: 12px;
  border: 1.5px solid var(--al-border);
  font-size: 13.5px;
  padding: 0 14px;
}

.al-auth .al-type-field input:focus {
  border-color: var(--al-primary);
  box-shadow: 0 0 0 3px rgba(84, 38, 239, .10);
}

.al-auth .al-type-field-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--al-text);
  margin-bottom: 5px;
}

.al-auth .al-field-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--al-text);
  margin-bottom: 5px;
}

.al-auth .fr_welcome_field>svg,
.al-auth .fr_welcome_field .js_toggle-password {
  top: calc(50% + 11px);
}

.al-auth-head b {
  text-transform: capitalize;
}

.al-auth .alert {
  border-radius: 12px;
  font-size: 12.5px;
}

.al-auth .fr_welcome_switch {
  margin-top: 16px;
  font-size: 12.5px;
  color: #4f5670;
  text-align: center;
}

.al-auth .al-auth-switch a,
.al-auth .fr_welcome_switch a {
  color: var(--al-primary) !important;
  font-weight: 700;
  text-decoration: none !important;
}

.al-auth .form-check-label {
  font-size: 12px;
  color: #4f5670;
}

.al-auth .js_hidden-section .form-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--al-text);
}

/* ==========================================================================
   Responsive
   One predictable ladder:
   >=1200  five columns (compact spacing at 1200-1439)
   992-1199  three columns
   768-991  two columns
   <768  one column, feed first
   ========================================================================== */

/* 1600px and up :: the design bumps the type scale */
@media (min-width: 1600px) {
  .al-hero h1 {
    font-size: 27px;
  }

  .al-cat-row {
    min-height: 52px;
  }

  .al-cat-text .al-cat-name,
  .al-list-title {
    font-size: 12px;
  }
}

/* 1200px-1439px :: all five columns, compact type/spacing so 1280/1366
   laptops still show the complete four-aside + feed design */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .al-card-head {
    padding: 12px 12px 8px;
  }

  .al-head-block {
    padding: 10px 12px 0;
  }

  .al-card-body {
    padding: 4px 12px 12px;
  }

  .al-card-pad {
    padding: 12px;
  }

  .al-card-title {
    gap: 6px;
    font-size: 13px;
  }

  .al-card-title svg,
  .al-card-title i {
    width: 15px;
    height: 15px;
  }

  .al-card-link {
    font-size: 11.5px;
  }

  .al-card-sub {
    font-size: 11px;
  }

  /* block buttons in the narrow asides wrap instead of clipping their label */
  .al-btn {
    padding: 0 10px;
    font-size: 12px;
  }

  .al-exp-head {
    gap: 7px;
    padding: 6px 7px;
  }

  .al-exp-head-icon {
    width: 24px;
    height: 24px;
  }

  .al-exp-head-icon svg {
    width: 14px;
    height: 14px;
  }

  .al-exp-head-title {
    font-size: 12px;
    line-height: 1.25;
  }

  .al-cat-row {
    gap: 7px;
    padding: 6px 2px;
  }

  .al-cat-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .al-cat-icon svg,
  .al-cat-icon i {
    width: 16px;
    height: 16px;
  }

  .al-cat-text .al-cat-name {
    font-size: 12px;
  }

  .al-cat-text small {
    font-size: 10px;
  }

  .al-cat-arrow {
    font-size: 14px;
  }

  .al-profile-head {
    padding: 12px;
  }

  .al-profile-avatar {
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
  }

  .al-profile-avatar img {
    width: 64px;
    height: 64px;
  }

  .al-profile-name {
    font-size: 14px;
  }

  .al-profile-headline {
    font-size: 11.5px;
  }

  .al-profile-loc {
    font-size: 11px;
  }

  .al-profile-stats b {
    font-size: 13px;
  }

  .al-profile-stats span {
    display: block;
    font-size: 9.5px;
    line-height: 1.25;
  }

  .al-profile-stats a {
    padding: 9px 2px;
  }

  .al-badge-verified {
    padding: 3px 7px;
    font-size: 10px;
  }

  .al-promo {
    padding: 14px;
  }

  .al-promo-title {
    font-size: 13px;
  }

  .al-promo-sub {
    margin-bottom: 12px;
    font-size: 11px;
  }

  .al-stat-value {
    font-size: 23px;
  }

  .al-mini-row {
    padding: 6px 0;
    font-size: 11.5px;
  }

  .al-toggle {
    margin-bottom: 12px;
  }

  .al-list-row {
    gap: 8px;
    padding: 8px 0;
  }

  .al-list-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .al-list-title {
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  .al-list-sub {
    font-size: 10.5px;
    overflow-wrap: anywhere;
  }

  .al-list-row.has-badge .al-list-title {
    padding-right: 32px;
  }

  .al-new {
    font-size: 9px;
    padding: 2px 5px;
  }

  .al-course-thumb {
    height: 70px;
  }

  .al-course-title {
    font-size: 12px;
  }

  .al-course-meta {
    flex-wrap: wrap;
    gap: 2px 8px;
    font-size: 10.5px;
  }

  .al-event {
    gap: 8px;
    padding: 8px 0;
  }

  .al-event-date {
    width: 34px;
    border-radius: 8px;
  }

  .al-event-date b {
    font-size: 13px;
  }

  .al-event-date span {
    font-size: 8.5px;
    letter-spacing: .2px;
  }

  .al-event-title {
    font-size: 11.5px;
  }

  .al-event-sub {
    font-size: 10.5px;
    overflow-wrap: anywhere;
  }

  .al-cta {
    padding: 14px;
  }

  .al-cta h6 {
    font-size: 13px;
  }

  .al-cta p {
    font-size: 11px;
  }

  .al-hero h1 {
    font-size: 21px;
  }

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

/* 1440px-1599px :: same five columns with the design's regular type scale */
@media (min-width: 1440px) and (max-width: 1599.98px) {
  .al-btn {
    padding: 0 12px;
    font-size: 12.5px;
  }

  /* free a little horizontal room inside the compact sidebars */
  .al-cat-row {
    gap: 8px;
    padding: 6px 2px;
  }

  .al-cat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .al-cat-icon svg,
  .al-cat-icon i {
    width: 16px;
    height: 16px;
  }

  .al-cat-text .al-cat-name {
    font-size: 12px;
  }

  .al-cat-text small {
    font-size: 10px;
  }

  .al-list-row {
    gap: 8px;
    padding: 8px 0;
  }

  .al-list-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .al-list-title {
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  .al-list-sub {
    font-size: 10.5px;
    overflow-wrap: anywhere;
  }

  .al-list-row.has-badge .al-list-title {
    padding-right: 32px;
  }

  .al-course-meta {
    flex-wrap: wrap;
    gap: 2px 8px;
  }

  .al-event-sub {
    overflow-wrap: anywhere;
  }

  .al-hero h1 {
    font-size: 22px;
  }

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

/* 1200px-1279px :: the feed is at its narrowest, so the duplicate hero
   stat tiles step aside and the copy uses the full feed width */
@media (min-width: 1200px) and (max-width: 1279.98px) {
  .al-hero-inner {
    max-width: 100%;
  }

  .al-hero-side {
    display: none;
  }
}

/* 992px-1199px :: three columns, jobs + candidates share the first one */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .al-dashboard {
    grid-template-columns: 220px minmax(0, 1fr) 235px;
  }

  .al-feed {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .al-col-profile {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .al-col-extra {
    grid-column: 1 / -1;
    grid-row: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .al-col-extra>.al-sticky {
    display: contents;
  }

  .al-col-extra .al-premium {
    margin-bottom: 0;
  }

  .al-hero h1 {
    font-size: 20px;
  }

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

/* 768px-991px :: two columns, the feed stays wide and the rest becomes bands */
@media (min-width: 768px) and (max-width: 991.98px) {
  .al-dashboard {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .al-feed {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .al-col-profile {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
  }

  .al-col-profile>.al-sticky {
    display: contents;
  }

  .al-col-extra {
    grid-column: 1 / -1;
    grid-row: 4;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .al-col-extra>.al-sticky {
    display: contents;
  }

  .al-col-extra .al-premium {
    margin-bottom: 0;
  }

  .al-hero {
    padding: 20px 14px;
  }

  .al-hero-inner {
    max-width: 260px;
  }

  .al-hero h1 {
    font-size: 20px;
    white-space: normal;
    max-width: 230px;
  }

  .al-hero-side {
    display: none;
  }

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

/* 767px and down :: one column, the feed comes first */
@media (max-width: 767.98px) {
  .al-dashboard {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .al-col {
    width: 100%;
  }

  .al-feed {
    grid-column: auto;
    grid-row: auto;
    order: 0;
  }

  .al-col-jobs {
    order: 1;
  }

  .al-single-image {
    aspect-ratio: 16/9;
  }

  /* the last column is full width on phones, keep the player landscape */
  .al-single-video .al-video {
    aspect-ratio: 16/9;
  }

  .al-col-candidates {
    order: 2;
  }

  .al-col-profile {
    grid-column: auto;
    grid-row: auto;
    order: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .al-col-extra {
    grid-column: auto;
    grid-row: auto;
    order: 4;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .al-col-profile>.al-sticky,
  .al-col-extra>.al-sticky {
    display: contents;
  }

  .al-col-extra .al-premium {
    margin-bottom: 0;
  }

  .al-hero {
    padding: 24px 16px;
  }

  .al-hero-inner {
    max-width: 100%;
  }

  .al-hero-side {
    display: none;
  }

  .al-hero h1 {
    font-size: 23px;
  }

  .al-cat-row {
    min-height: 48px;
  }

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

/* the site header keeps its own mobile behaviour */
@media (max-width: 860px) {
  .al-nav,
  .al-search {
    display: none;
  }

  .al-header-mobile-toggle {
    display: inline-flex;
  }

  .al-shell {
    padding: 10px 10px 40px;
  }

  .main-header.al-topbar>.container,
  .main-header.al-topbar>.container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 520px) {
  .al-type-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .al-auth {
    margin: 14px auto;
    padding: 18px 14px 16px;
    border-radius: 14px;
  }

  .al-cat-text .al-cat-name {
    font-size: 12px;
  }

  .al-type-box {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .al-type-box svg,
  .al-type-box i {
    margin-bottom: 0;
    flex: 0 0 auto;
  }

  .al-composer-tool span {
    display: none;
  }
}


/* ==========================================================================
   Auth (sign in / sign up) - professional card, picker & field system
   ========================================================================== */

.al-auth {
  width: 100%;
  max-width: 470px;
  margin: 30px auto;
  padding: 30px 28px 24px;
  background: var(--al-card);
  border: 1px solid var(--al-border);
  border-radius: 22px;
  box-shadow: 0 20px 48px rgba(16, 17, 47, .10);
}

.al-auth.al-auth-signup {
  max-width: 640px;
}

/* head ------------------------------------------------------------------- */

.al-auth-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--al-border);
}

.al-auth-head .al-brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--al-primary), #8b62dd);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  flex: 0 0 auto;
  box-shadow: 0 8px 18px rgba(84, 38, 239, .26);
}

.al-auth-head-text {
  min-width: 0;
}

.al-auth-head b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: var(--al-text);
  line-height: 1.25;
  letter-spacing: -.3px;
  text-transform: capitalize;
}

.al-auth-head small {
  display: block;
  font-size: 11.5px;
  color: #4f5670;
  margin-top: 1px;
}

/* title ------------------------------------------------------------------ */

.al-auth-title {
  margin-bottom: 20px;
}

.al-auth h2,
.al-auth .fr_welcome_title {
  font-size: 21px;
  font-weight: 800;
  color: var(--al-text);
  letter-spacing: -.4px;
  line-height: 1.3;
  margin: 0 0 5px;
}

/* account type picker ---------------------------------------------------- */

.al-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}

.al-type {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.al-type input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.al-type-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  height: 100%;
  padding: 18px 14px 16px;
  background: #fff;
  border: 1.5px solid var(--al-border);
  border-radius: 16px;
  text-align: center;
  transition: border-color .16s, background .16s, box-shadow .16s;
}

.al-type-box:hover {
  border-color: #cec3fa;
  background: #fdfcff;
}

.al-type-icon {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: #f2f4fb;
  color: #7a869c;
  flex: 0 0 auto;
  transition: background .16s, color .16s, box-shadow .16s;
}

.al-type-icon svg,
.al-type-icon i {
  width: 21px;
  height: 21px;
  margin: 0;
  color: inherit;
}

.al-type-text {
  display: block;
  min-width: 0;
}

.al-type-text b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--al-text);
  letter-spacing: -.2px;
}

.al-type-text small {
  display: block;
  font-size: 11.5px;
  line-height: 1.4;
  color: #4f5670;
  margin-top: 3px;
}

.al-type-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #dde2f2;
  background: #fff;
  transition: border-color .16s, background .16s;
}

.al-type-check:after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--al-primary);
  transform: scale(0);
  transition: transform .16s;
}

.al-type input:checked+.al-type-box {
  border-color: var(--al-primary);
  background: linear-gradient(180deg, #f8f6ff, #fff);
  box-shadow: 0 0 0 4px rgba(84, 38, 239, .10);
}

.al-type input:checked+.al-type-box .al-type-icon {
  background: var(--al-primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(84, 38, 239, .26);
}

.al-type input:checked+.al-type-box .al-type-check {
  border-color: var(--al-primary);
}

.al-type input:checked+.al-type-box .al-type-check:after {
  transform: scale(1);
}

.al-type input:focus-visible+.al-type-box {
  box-shadow: 0 0 0 4px rgba(84, 38, 239, .18);
}

.al-type-label {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #98a3ba;
  margin-bottom: 12px;
}

.al-type-hint {
  display: block;
  font-size: 11.5px;
  color: #4f5670;
  text-align: center;
  line-height: 1.5;
  margin: 12px 0 20px;
}

.al-auth-sub {
  font-size: 12.5px;
  color: #4f5670;
  line-height: 1.5;
  margin: 0;
}

/* section labels --------------------------------------------------------- */

.al-form-section {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 14px;
}

.al-form-section:first-child {
  margin-top: 0;
}

.al-form-section span {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #98a3ba;
  white-space: nowrap;
}

.al-form-section:after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--al-border);
}

/* fields ----------------------------------------------------------------- */

.al-field {
  margin-bottom: 15px;
}

/* scoped so it wins over the legacy auth rules above */
.al-auth .al-field-label,
.al-field-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #2b2c46;
  letter-spacing: .1px;
  margin-bottom: 7px;
}

.al-input {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: stretch;
  min-height: 50px;
  background: #fff;
  border: 1.5px solid #e5e9f4;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .16s, box-shadow .16s;
}

.al-input.has-action {
  grid-template-columns: 48px minmax(0, 1fr) 46px;
}

.al-input:hover {
  border-color: #d5dbf0;
}

.al-input:focus-within {
  border-color: var(--al-primary);
  box-shadow: 0 0 0 4px rgba(84, 38, 239, .10);
}

.al-input-icon {
  display: grid;
  place-items: center;
  color: #94a0b8;
  background: #f8f9fd;
  border-inline-end: 1px solid #eef0f8;
  transition: color .16s, background .16s;
}

.al-input-icon svg,
.al-input-icon i {
  width: 18px;
  height: 18px;
  margin: 0;
}

.al-input:focus-within .al-input-icon {
  color: var(--al-primary);
  background: var(--al-primary-soft);
}

.al-input input,
.al-input select,
.al-input textarea {
  width: 100%;
  min-width: 0;
  height: auto;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--al-text);
  font-size: 14px;
  font-family: inherit;
  padding: 14px 15px;
  margin: 0;
  line-height: 1.35;
  -webkit-appearance: none;
  appearance: none;
}

.al-input input::placeholder,
.al-input textarea::placeholder {
  color: #9aa5ba;
}

.al-input select {
  cursor: pointer;
  padding-inline-end: 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a869c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  background-size: 15px !important;
}

.al-input textarea {
  resize: vertical;
  min-height: 96px;
}

.al-input-action {
  display: grid;
  place-items: center;
  border: 0;
  border-inline-start: 1px solid #eef0f8;
  background: transparent;
  color: #94a0b8;
  cursor: pointer;
  padding: 0;
  transition: color .16s, background .16s;
}

.al-input-action:hover {
  color: var(--al-primary);
  background: #f8f9fd;
}

.al-input-action svg {
  width: 18px !important;
  height: 18px !important;
  margin: 0;
  fill: currentColor;
}

.al-input-action svg.eye-icon-slash {
  fill: currentColor;
}

/* two column rows -------------------------------------------------------- */

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

.al-field-help {
  display: block;
  font-size: 11px;
  color: #4f5670;
  line-height: 1.5;
  margin-top: 6px;
}

.al-inline-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  color: #4f5670;
  line-height: 1.55;
  background: #f8f9fd;
  border: 1px solid var(--al-border);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 4px 0 18px;
}

.al-inline-note svg,
.al-inline-note i {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--al-primary);
}



/* consent rows ----------------------------------------------------------- */

.al-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #fbfcff;
  border: 1.5px solid #eef0f8;
  border-radius: 14px;
  margin-bottom: 10px;
  transition: border-color .16s, background .16s;
}

.al-consent:hover {
  border-color: #dfe4f5;
}

.al-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--al-primary);
  cursor: pointer;
}

.al-consent .form-check-label,
.al-consent label {
  font-size: 12px;
  line-height: 1.55;
  color: #5b6379;
  cursor: pointer;
  margin: 0;
}

.al-consent a {
  color: var(--al-primary) !important;
  font-weight: 700;
  text-decoration: none !important;
}

.al-consent a:hover {
  text-decoration: underline !important;
}

/* submit ----------------------------------------------------------------- */

.al-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border: 0 !important;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--al-primary), #6b3ff2);
  color: #fff !important;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 12px 24px rgba(84, 38, 239, .24);
  cursor: pointer;
  transition: filter .16s, box-shadow .16s, transform .16s;
}

.al-submit:hover {
  filter: brightness(1.06);
  box-shadow: 0 14px 28px rgba(84, 38, 239, .3);
  color: #fff !important;
}

.al-submit:active {
  transform: translateY(1px);
}

.al-submit:disabled {
  opacity: .78;
  cursor: not-allowed;
}

.al-submit .spinner-grow {
  width: 13px;
  height: 13px;
}

.al-form-actions {
  margin-top: 22px;
}

/* social logins ---------------------------------------------------------- */

.al-social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 9px;
}

.al-auth .al-social-grid .btn-social {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  margin: 0 !important;
  padding: 0 14px;
  background: #fff !important;
  border: 1.5px solid #e5e9f4 !important;
  border-radius: 14px !important;
  color: var(--al-text) !important;
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: none !important;
  transition: border-color .16s, background .16s;
}

.al-auth .al-social-grid .btn-social:hover {
  border-color: #d5dbf0 !important;
  background: #fbfcff !important;
}

.al-auth .al-social-grid .btn-social svg,
.al-auth .al-social-grid .btn-social img {
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  flex: 0 0 auto;
}

.al-auth .hr-heading {
  margin: 18px 0;
}

/* the "or" divider of the social login include must span the whole grid */
.al-social-grid>.hr-heading {
  grid-column: 1 / -1;
}

.al-auth .al-social-grid .btn-social .svg-container {
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  line-height: 0;
  flex: 0 0 auto;
}

.al-auth .hr-heading-text {
  font-size: 11px;
  font-weight: 700;
  color: #4f5670;
  letter-spacing: .6px;
  text-transform: uppercase;
}

/* card footer / switch --------------------------------------------------- */

.al-auth-switch {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--al-border);
  font-size: 12.5px;
  color: #4f5670;
  text-align: center;
}

.al-auth-switch a {
  color: var(--al-primary) !important;
  font-weight: 800;
  text-decoration: none !important;
}

.al-auth-switch a:hover {
  text-decoration: underline !important;
}


/* inline toggle row (remember me / forgotten password) ------------------- */

.al-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 22px;
}

.al-toggle-row .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: auto;
  margin: 0;
  padding: 0;
}

.al-toggle-row .form-check-input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--al-primary);
}

.al-toggle-row .form-check-label {
  font-size: 12px;
  color: #5b6379;
  margin: 0;
  cursor: pointer;
}

.al-toggle-row a {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--al-primary) !important;
  text-decoration: none !important;
}

.al-toggle-row a:hover {
  text-decoration: underline !important;
}

/* alerts ----------------------------------------------------------------- */

.al-auth .alert {
  border: 0;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.55;
  margin-bottom: 16px;
}

.al-auth .alert-danger {
  background: var(--al-danger-soft);
  color: #a3223f;
}

.al-auth .alert-success {
  background: var(--al-accent-soft);
  color: #0f6b49;
}

.al-auth .alert-warning {
  background: var(--al-warn-soft);
  color: #8a5308;
}

/* night mode ------------------------------------------------------------- */

body.night-mode .al-auth {
  background: #14162b;
  border-color: #262a45;
}

body.night-mode .al-auth-head,
body.night-mode .al-auth-switch {
  border-color: #262a45;
}

body.night-mode .al-auth-head b,
body.night-mode .al-auth h2,
body.night-mode .al-type-text b,
body.night-mode .al-field-label {
  color: #eef1ff;
}

body.night-mode .al-input,
body.night-mode .al-type-box,
body.night-mode .al-auth .al-social-grid .btn-social {
  background: #1b1e37 !important;
  border-color: #2b3052 !important;
}

body.night-mode .al-input-icon {
  background: #202444;
  border-inline-end-color: #2b3052;
}

body.night-mode .al-input-action {
  border-inline-start-color: #2b3052;
}

body.night-mode .al-input input,
body.night-mode .al-input select {
  color: #eef1ff !important;
  background-color: transparent !important;
}

body.night-mode .al-type-box:hover,
body.night-mode .al-input:hover {
  border-color: #3a4070 !important;
}

body.night-mode .al-consent,
body.night-mode .al-inline-note {
  background: #1a1d34;
  border-color: #2b3052;
}

body.night-mode .al-consent .form-check-label,
body.night-mode .al-toggle-row .form-check-label {
  color: #aeb6d4;
}

body.night-mode .al-type-check {
  background: #1b1e37;
  border-color: #3a4070;
}

/* rtl -------------------------------------------------------------------- */

html[dir="RTL"] .al-input select {
  background-position: left 13px center !important;
  padding-inline-end: 15px;
  padding-inline-start: 38px;
}

/* responsive ------------------------------------------------------------- */

@media (max-width: 760px) {
  .al-auth,
  .al-auth.al-auth-signup {
    max-width: 100%;
    margin: 18px auto;
    padding: 24px 20px 20px;
    border-radius: 18px;
  }
}

@media (max-width: 700px) {
  .al-type-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .al-type-box {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 13px 48px 13px 14px;
  }

  .al-type-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .al-type-text {
    text-align: start;
  }

  .al-type-text small {
    margin-top: 2px;
  }

  .al-type-check {
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
  }
}

@media (max-width: 640px) {
  .al-form-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

@media (max-width: 420px) {
  .al-auth,
  .al-auth.al-auth-signup {
    padding: 20px 16px 18px;
  }

  .al-auth h2,
  .al-auth .fr_welcome_title {
    font-size: 19px;
  }

  .al-input {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .al-input.has-action {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .al-submit {
    min-height: 50px;
    font-size: 14px;
  }
}


/* field layout variants -------------------------------------------------- */

.al-input.al-input-plain {
  grid-template-columns: minmax(0, 1fr);
}

.al-form-row.al-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.al-field-group-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #2b2c46;
  letter-spacing: .1px;
  margin-bottom: 7px;
}

/* icon inside input groups is an inline stroke svg */
.al-input-icon svg,
.al-type-icon svg,
.al-inline-note svg {
  stroke-width: 1.9;
}

@media (max-width: 560px) {
  .al-form-row.al-cols-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ==========================================================================
   Auth pages (sign in / sign up) — v2
   Backdrop, panel switcher and field polish. Palette is unchanged:
   primary #5426ef, indigo #6f8cff, accent #169363.
   ========================================================================== */

/* page backdrop ----------------------------------------------------------- */

.al-auth-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1200px 640px at 10% -12%, rgba(84, 38, 239, .18), transparent 62%),
    radial-gradient(980px 560px at 94% 2%, rgba(111, 140, 255, .20), transparent 62%),
    radial-gradient(900px 620px at 82% 104%, rgba(22, 147, 99, .12), transparent 64%),
    linear-gradient(180deg, #f5f3ff 0%, #f7f9fd 44%, #f3f7ff 100%);
}

.al-auth-bg-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(16, 17, 47, .085) 1px, transparent 1.4px);
  background-size: 22px 22px;
  opacity: .55;
  -webkit-mask-image: radial-gradient(130% 92% at 50% -12%, #000 6%, transparent 68%);
  mask-image: radial-gradient(130% 92% at 50% -12%, #000 6%, transparent 68%);
}

.al-auth-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(24px);
  animation: al-auth-drift 24s ease-in-out infinite alternate;
}

.al-auth-bg-glow-a {
  width: 42vmax;
  height: 42vmax;
  top: -16vmax;
  left: -12vmax;
  background: radial-gradient(circle at 38% 38%, rgba(84, 38, 239, .34), rgba(84, 38, 239, 0) 68%);
}

.al-auth-bg-glow-b {
  width: 34vmax;
  height: 34vmax;
  right: -12vmax;
  bottom: -14vmax;
  background: radial-gradient(circle at 55% 40%, rgba(111, 140, 255, .34), rgba(111, 140, 255, 0) 70%);
  animation-duration: 28s;
  animation-delay: -8s;
}

.al-auth-bg-glow-c {
  width: 26vmax;
  height: 26vmax;
  top: 32%;
  right: 24%;
  background: radial-gradient(circle, rgba(22, 147, 99, .20), rgba(22, 147, 99, 0) 70%);
  animation-duration: 32s;
  animation-delay: -14s;
}

@keyframes al-auth-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(2.5%, 3.5%, 0) scale(1.07);
  }
}

@media (prefers-reduced-motion: reduce) {
  .al-auth-bg-glow {
    animation: none;
  }
}

/* card -------------------------------------------------------------------- */

.al-auth {
  position: relative;
  max-width: 660px;
  margin: clamp(16px, 3.4vh, 40px) auto;
  padding: clamp(20px, 2.4vw, 32px) clamp(16px, 2.4vw, 30px) clamp(18px, 2vw, 28px);
  border: 1px solid #ebe9fa;
  border-radius: 24px;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(16, 17, 47, .04),
    0 2px 6px rgba(16, 17, 47, .03),
    0 30px 64px -34px rgba(16, 17, 47, .34),
    0 18px 40px -32px rgba(84, 38, 239, .55);
  overflow: hidden;
}

/* sign in and sign up share the same card width and layout */
.al-auth.al-auth-signup {
  max-width: 660px;
}

.al-auth::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--al-primary) 0%, #6f8cff 52%, var(--al-accent) 100%);
}

@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .al-auth {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(150%) blur(18px);
    backdrop-filter: saturate(150%) blur(18px);
  }
}

/* the elengine landing template injects its .fr_auth_form card rules after
   this stylesheet, so the card styles are repeated with a higher specificity
   to keep the redesign intact */
.fr_auth_form.al-auth {
  padding: clamp(20px, 2.4vw, 32px) clamp(16px, 2.4vw, 30px) clamp(18px, 2vw, 28px);
  border: 1px solid #ebe9fa;
  border-radius: 24px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  backdrop-filter: saturate(150%) blur(18px);
}

body.night-mode .fr_auth_form.al-auth {
  background: #14162b;
  border-color: #262a45;
  color: #e7eafd;
}

/* panel switcher ---------------------------------------------------------- */

.al-auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  margin-bottom: clamp(16px, 2.2vw, 22px);
  background: #f3f4fc;
  border: 1px solid #eceefa;
  border-radius: 15px;
}

.al-auth-tab {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #666c88;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1px;
  line-height: 40px;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
}

.al-auth-tab:hover {
  color: var(--al-primary);
}

.al-auth-tab.is-active {
  background: #fff;
  color: var(--al-primary);
  box-shadow: 0 1px 2px rgba(16, 17, 47, .06), 0 4px 12px -6px rgba(16, 17, 47, .22);
}

.al-auth-tab:focus-visible {
  outline: 2px solid var(--al-primary);
  outline-offset: 2px;
}

/* card head --------------------------------------------------------------- */

.al-auth-head {
  gap: 13px;
  padding-bottom: 16px;
  margin-bottom: 18px;
}

.al-auth-logo {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 5px;
  background: #fff;
  border: 1px solid #eceafa;
  border-radius: 15px;
  box-shadow: 0 8px 18px -12px rgba(16, 17, 47, .5);
}

.al-auth-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.al-auth-logo .logo-dark {
  display: none;
}

.al-auth-head .al-brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  font-size: 21px;
  background: linear-gradient(150deg, #7a52ff 0%, var(--al-primary) 52%, var(--al-primary-dark) 100%);
  box-shadow: 0 10px 22px -12px rgba(84, 38, 239, .85), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.al-auth-head b {
  letter-spacing: -.2px;
}

/* title ------------------------------------------------------------------- */

.al-auth-title {
  margin-bottom: 18px;
}

.al-auth h2,
.al-auth .fr_welcome_title {
  font-size: clamp(19px, 1.2vw + 14px, 23px);
  line-height: 1.28;
}

.al-auth-sub {
  font-size: 13px;
  margin-top: 2px;
}

/* account type picker ----------------------------------------------------- */

.al-type-box {
  border-radius: 16px;
  transition: border-color .16s, background .16s, box-shadow .16s, transform .16s;
}

.al-type:hover .al-type-box {
  border-color: #cfc6fb;
  background: #fdfcff;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -22px rgba(84, 38, 239, .85);
}

.al-type input:checked+.al-type-box .al-type-icon {
  background: linear-gradient(150deg, #7a52ff, var(--al-primary));
  box-shadow: 0 10px 20px -10px rgba(84, 38, 239, .85);
}

/* fields ------------------------------------------------------------------ */

.al-input {
  min-height: 52px;
  border-color: #e7eaf6;
  border-radius: 14px;
  background: #fff;
  transition: border-color .16s, box-shadow .16s, background .16s;
}

.al-input:hover {
  border-color: #d8ddf0;
}

.al-input:focus-within {
  border-color: var(--al-primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(84, 38, 239, .11);
}

.al-input-icon {
  color: #98a2ba;
}

.al-input:focus-within .al-input-icon {
  color: var(--al-primary);
  background: var(--al-primary-soft);
}

.al-input input,
.al-input select,
.al-input textarea {
  font-size: 14px;
}

.al-input input::placeholder,
.al-input textarea::placeholder {
  color: #a0aabf;
}

.al-input-action:hover {
  color: var(--al-primary);
  background: var(--al-primary-soft);
}

/* helper rows ------------------------------------------------------------- */

.al-inline-note {
  background: linear-gradient(180deg, #f8f7ff, #f8f9fd);
  border-color: #eceafa;
  border-radius: 13px;
}

.al-consent {
  border-radius: 13px;
  background: #fbfcff;
}

.al-consent:hover {
  background: #f8f9ff;
}

/* submit ------------------------------------------------------------------ */

.al-submit {
  min-height: 54px;
  gap: 10px;
  border-radius: 15px;
  font-size: 15px;
  letter-spacing: .2px;
  background: linear-gradient(135deg, #6b3ff2 0%, var(--al-primary) 54%, var(--al-primary-dark) 100%);
  box-shadow: 0 14px 26px -14px rgba(84, 38, 239, .7), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: filter .16s, box-shadow .16s, transform .16s;
}

.al-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 30px -14px rgba(84, 38, 239, .78), inset 0 1px 0 rgba(255, 255, 255, .26);
}

.al-submit:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px -12px rgba(84, 38, 239, .8), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.al-submit:disabled,
.al-submit[disabled] {
  transform: none;
  filter: none;
}

.al-submit:focus-visible {
  outline: 2px solid var(--al-primary);
  outline-offset: 3px;
}

.al-submit-label {
  display: inline-block;
}

.al-submit-arrow {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  transition: transform .18s, background .18s;
}

.al-submit-arrow svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.al-submit:hover .al-submit-arrow {
  transform: translateX(2px);
  background: rgba(255, 255, 255, .28);
}

.al-submit .spinner-grow {
  margin: 0 !important;
}

/* social logins ----------------------------------------------------------- */

.al-auth .al-social-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.al-auth .al-social-grid > .hr-heading {
  flex: 1 1 100%;
  grid-column: auto;
}

.al-auth .al-social-grid > .btn-social {
  flex: 1 1 190px;
  min-width: 0;
  min-height: 50px;
  margin: 0 !important;
  padding: 0 14px;
  border-radius: 14px !important;
  border-color: #e9ecf7 !important;
  font-size: 12.5px;
  font-weight: 700;
  transition: border-color .16s, background .16s, transform .16s, box-shadow .16s;
}

.al-auth .al-social-grid > .btn-social > span:not(.svg-container) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-auth .al-social-grid > .btn-social:hover {
  border-color: #cfc6fb !important;
  background: #fbfaff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -20px rgba(16, 17, 47, .7);
}

/* footer switch ----------------------------------------------------------- */

.al-auth-switch {
  margin-top: 22px;
  padding-top: 18px;
  font-size: 13px;
}

.al-auth-switch a {
  border-radius: 6px;
}

.al-auth-switch a:focus-visible {
  outline: 2px solid var(--al-primary);
  outline-offset: 2px;
}

/* night mode -------------------------------------------------------------- */

body.night-mode .al-auth-bg {
  background:
    radial-gradient(1100px 620px at 8% -14%, rgba(84, 38, 239, .34), transparent 62%),
    radial-gradient(920px 540px at 96% 0%, rgba(63, 24, 201, .34), transparent 62%),
    radial-gradient(860px 580px at 78% 106%, rgba(22, 147, 99, .16), transparent 64%),
    linear-gradient(180deg, #0b0d1c 0%, #0f111f 52%, #0c1020 100%);
}

body.night-mode .al-auth-bg-grid {
  background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.4px);
  opacity: .4;
}

body.night-mode .al-auth-bg-glow-c {
  background: radial-gradient(circle, rgba(22, 147, 99, .28), rgba(22, 147, 99, 0) 70%);
}

body.night-mode .al-auth {
  background: #14162b;
  border-color: #262a45;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 30px 60px -32px rgba(0, 0, 0, .95);
}

body.night-mode .al-auth-logo {
  background: #1b1e37;
  border-color: #2b3052;
  box-shadow: none;
}

body.night-mode .al-auth-logo .logo-light {
  display: none;
}

body.night-mode .al-auth-logo .logo-dark {
  display: block;
}

body.night-mode .al-auth-tabs {
  background: #171a30;
  border-color: #262a45;
}

body.night-mode .al-auth-tab {
  color: #c2c9e6;
  line-height: 40px;
}

body.night-mode .al-auth-tab:hover {
  color: #e7e3ff;
}

body.night-mode .al-auth-tab.is-active {
  background: #232746;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

body.night-mode .al-auth .al-social-grid > .btn-social {
  color: #e3e8ff !important;
}

body.night-mode .al-input:focus-within .al-input-icon {
  background: rgba(84, 38, 239, .26);
  color: #b9a8ff;
}

body.night-mode .al-input-action:hover {
  background: rgba(84, 38, 239, .26);
}

body.night-mode .al-consent {
  background: #1a1d34;
}

body.night-mode .al-consent:hover {
  background: #1f2340;
}

body.night-mode .al-inline-note {
  background: linear-gradient(180deg, #1c1f38, #1a1d34);
  border-color: #2b3052;
}

body.night-mode .al-type:hover .al-type-box {
  border-color: #3a4070 !important;
}

body.night-mode .al-auth .al-social-grid .btn-social:hover {
  border-color: #3a4070 !important;
}

/* responsive -------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .al-auth {
    border-radius: 22px;
  }

  .al-auth-tab {
    height: 38px;
    font-size: 12.5px;
    line-height: 38px;
  }

  .al-type-grid {
    gap: 10px;
  }
}

@media (max-width: 575.98px) {
  .al-auth,
  .al-auth.al-auth-signup {
    margin: 10px auto 0;
    padding: 18px 15px 16px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(16, 17, 47, .04), 0 18px 40px -30px rgba(16, 17, 47, .5);
  }

  .al-auth::before {
    height: 2px;
  }

  .al-auth-head {
    gap: 11px;
    padding-bottom: 14px;
    margin-bottom: 16px;
  }

  .al-auth-logo,
  .al-auth-head .al-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .al-auth-head .al-brand-mark {
    font-size: 19px;
  }

  .al-auth-tabs {
    margin-bottom: 16px;
  }

  .al-auth-tab {
    height: 36px;
    line-height: 36px;
  }

  .al-auth h2,
  .al-auth .fr_welcome_title {
    font-size: 19px;
  }

  .al-submit {
    min-height: 50px;
    font-size: 14.5px;
  }

  .al-auth-bg-glow-c {
    display: none;
  }
}

@media (hover: none) {
  .al-type:hover .al-type-box,
  .al-auth .al-social-grid .btn-social:hover,
  .al-submit:hover {
    transform: none;
  }
}


/* ==========================================================================
   Site header — converted from the reference design
   (.topbar / .brand / .navigation / .search / .account)
   ========================================================================== */

.main-header.al-topbar {
  background: #fff !important;
  border-bottom: 1px solid var(--al-border);
  box-shadow: none;
  /* the core RTL stylesheet reserves 75px on the inline start at >=1200px
     (chat sidebar gutter); this topbar spans the full width in both directions */
  padding-left: 0;
  padding-right: 0;
}

/* the topbar box follows the full width page shell (no centred 1320px box) */
.main-header.al-topbar>.container,
.main-header.al-topbar>.container-fluid {
  width: 100%;
  max-width: none;
  padding-left: 14px;
  padding-right: 14px;
}

body.night-mode .main-header.al-topbar {
  background: #14162b !important;
  border-bottom-color: #262a45;
}

.main-header.al-topbar .al-topbar-inner {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 70px;
}

/* brand ------------------------------------------------------------------- */

.main-header .logo-wrapper.al-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 235px;
  height: auto;
  padding-left: 0;
  overflow: visible;
  word-break: normal;
  position: relative;
}

.al-brand .al-brand-mark {
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  color: var(--al-primary);
  transform: skew(-12deg);
  text-shadow: 5px 0 #c4b7ff;
}

.al-brand .logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
}

.main-header .al-brand .logo img {
  max-height: 44px;
  width: auto;
}

.al-brand .al-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.al-brand .al-brand-text b {
  display: block;
  font-size: 26px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.8px;
  color: var(--al-ink);
  text-transform: lowercase;
}

.al-brand .al-brand-text small {
  display: block;
  font-size: 10px;
  line-height: 1.5;
  color: #4f5670;
  white-space: nowrap;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.night-mode .al-brand .al-brand-text b {
  color: #eef1ff;
}

body.night-mode .al-brand .al-brand-text small {
  color: #9aa0c2;
}

/* mobile menu toggle ------------------------------------------------------ */

.main-header .al-topbar-toggle.menu-icon {
  position: static;
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  color: #55617a;
  flex: 0 0 auto;
}

.main-header .al-topbar-toggle.menu-icon:hover {
  background: var(--al-primary-soft);
  color: var(--al-primary);
}

.main-header .al-topbar-toggle.menu-icon .header-icon,
.main-header .al-topbar-toggle.menu-icon .header-icon * {
  width: 20px;
  height: 20px;
}

body.night-mode .main-header .al-topbar-toggle.menu-icon {
  color: #c1c8e3;
}

/* navigation -------------------------------------------------------------- */

.main-header .al-navigation {
  display: flex;
  align-items: stretch;
  gap: 27px;
  white-space: nowrap;
  flex: 0 1 auto;
  position: relative;
  z-index: 5;
  /* IMPORTANT: never turn this into a scroll container.
     Bootstrap positions the mega menus with Popper *inside* this element,
     so overflow would clip every panel (and silently cut the last items). */
  overflow: visible;
  flex-wrap: nowrap;
}

.al-navigation .al-nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.al-navigation .al-nav-item>a,
.al-navigation .al-nav-item>button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 13px 0;
  border: 0;
  background: none;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  color: var(--al-ink);
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
}

.al-navigation .al-nav-item>a:hover,
.al-navigation .al-nav-item>button:hover {
  color: var(--al-primary);
}

.al-navigation .al-nav-item>a.active {
  color: var(--al-primary);
}

.al-navigation .al-nav-item>a.active:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--al-primary);
}

.al-navigation .al-nav-item>a svg,
.al-navigation .al-nav-item>button svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.al-navigation .al-nav-item .al-nav-label-short {
  display: none;
}

.al-navigation .al-nav-item .al-nav-caret {
  width: 11px;
  height: 11px;
  opacity: .5;
  transition: transform .15s;
}

.al-navigation .al-nav-item.show .al-nav-caret {
  transform: rotate(180deg);
}

.al-navigation .al-nav-item.al-nav-cta>a,
.al-navigation .al-nav-item.al-nav-cta>button {
  color: var(--al-primary);
}

body.night-mode .al-navigation .al-nav-item>a,
body.night-mode .al-navigation .al-nav-item>button {
  color: #d3d8f2;
}

/* navigation panels (mega menus) ------------------------------------------ */

.al-navigation .al-nav-item>.dropdown-menu.al-nav-panel {
  margin: 12px 0 0;
  padding: 12px;
  width: 330px;
  max-width: calc(100vw - 24px);
  min-width: 0;
  border: 1px solid var(--al-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--al-shadow-lg);
  z-index: 1080;
  white-space: normal;
}

.al-navigation .al-nav-item>.al-nav-panel.al-nav-panel-wide {
  width: 560px;
}

.al-nav-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 4px;
}

.al-nav-panel-head h6 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--al-ink);
  letter-spacing: -.2px;
}

.al-nav-panel-head a {
  font-size: 11px;
  font-weight: 600;
  color: var(--al-primary) !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.al-nav-panel-sub {
  display: block;
  font-size: 11px;
  color: #4f5670;
  padding: 0 2px 8px;
}

.al-nav-panel-body {
  max-height: 330px;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}

.al-nav-panel-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
}

.al-nav-panel-foot {
  display: block;
  margin-top: 10px;
  padding: 8px 9px;
  border: 1px solid #e4ddff;
  border-radius: 6px;
  background: #fff;
  color: var(--al-primary) !important;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  text-decoration: none !important;
}

.al-nav-panel-foot:hover {
  background: #f0ebff;
}

/* panel rows -------------------------------------------------------------- */

.al-nav-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 7px 4px;
  border: 0;
  border-bottom: 1px solid #f5f5fa;
  background: none;
  text-align: start;
  text-decoration: none !important;
  cursor: pointer;
}

.al-nav-panel-body .al-nav-row:last-child {
  border-bottom: 0;
}

.al-nav-row:hover {
  background: #f7f4ff;
}

.al-nav-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--al-primary-soft);
  color: var(--al-primary);
  flex: 0 0 auto;
}

.al-nav-row-icon svg {
  width: 16px;
  height: 16px;
}

.al-nav-row-text {
  flex: 1 1 auto;
  min-width: 0;
}

.al-nav-row-text strong {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--al-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-nav-row-text small {
  display: block;
  font-size: 10px;
  line-height: 1.5;
  color: #4f5670;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-nav-row-chevron {
  margin-inline-start: auto;
  color: #b9bccf;
  font-size: 15px;
  line-height: 1;
  flex: 0 0 auto;
}

.al-nav-row img.al-nav-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.al-nav-row img.al-nav-thumb {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 auto;
}

.al-nav-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 6px;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #4f5670;
  border-bottom: 1px solid var(--al-border);
}

.al-nav-section-title + .al-nav-row {
  border-bottom-color: #f5f5fa;
}

body.night-mode .al-nav-section-title {
  color: #9aa0c2;
  border-bottom-color: #262a45;
}

.al-nav-badge {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--al-accent-soft);
  color: var(--al-accent);
  font-size: 9px;
  font-weight: 700;
  vertical-align: middle;
}

.al-nav-empty {
  padding: 14px 4px;
  text-align: center;
  font-size: 11px;
  color: #4f5670;
}

body.night-mode .al-navigation .al-nav-item>.dropdown-menu.al-nav-panel {
  background: #1b1e36;
  border-color: #262a45;
}

body.night-mode .al-nav-panel-head h6,
body.night-mode .al-nav-row-text strong {
  color: #eef1ff;
}

body.night-mode .al-nav-row {
  border-bottom-color: #23273f;
}

body.night-mode .al-nav-row:hover {
  background: #22264a;
}

body.night-mode .al-nav-row-icon {
  background: #272b4d;
  color: #b9a8ff;
}

body.night-mode .al-nav-panel-foot {
  background: #1b1e36;
  border-color: #2f3260;
}

body.night-mode .al-nav-panel-foot:hover {
  background: #22264a;
}

/* search ------------------------------------------------------------------ */

.al-topbar-search {
  position: relative;
  flex: 0 1 280px;
  min-width: 180px;
  margin-inline-start: auto;
}

.al-topbar-search .search-wrapper {
  position: relative;
  width: 100%;
}

.al-topbar-search .search-wrapper .form-control {
  width: 100%;
  height: 40px;
  border: 1px solid var(--al-border);
  border-radius: 8px;
  background: #f9f9ff;
  padding: 0 14px 0 38px;
  font-size: 12.5px;
  color: var(--al-text);
  box-shadow: none;
  outline: none;
}

.al-topbar-search .search-wrapper .form-control:focus {
  background: #fff;
  border-color: var(--al-primary);
  box-shadow: none;
}

.al-topbar-search .search-wrapper .form-control::placeholder {
  color: #9aa5ba;
}

.al-topbar-search .search-input-icon {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa5ba;
  line-height: 0;
  pointer-events: none;
}

.al-topbar-search .search-input-icon svg {
  width: 17px;
  height: 17px;
}

html[dir="RTL"] .al-topbar-search .search-wrapper .form-control {
  padding: 0 38px 0 14px;
}

html[dir="RTL"] .al-topbar-search .search-input-icon {
  inset-inline-start: auto;
  inset-inline-end: 12px;
}

body.night-mode .al-topbar-search .search-wrapper .form-control {
  background: #1b1e36;
  border-color: #262a45;
  color: #e6e9f7;
}

/* account (messages, notifications, requests, user) ---------------------- */

.main-header .navbar-wrapper.al-account {
  position: static;
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  flex: 0 0 auto;
  width: auto;
}

.main-header .al-account>ul {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-header .al-account>ul>li {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
}

.main-header .al-account>ul>li>a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  line-height: 1;
  border-radius: 9px;
  color: #55617a;
}

.main-header .al-account>ul>li>a:hover,
.main-header .al-account>ul>li.show>a {
  background: var(--al-primary-soft);
}

.main-header .al-account .counter {
  top: -1px;
  inset-inline-end: -1px;
  inset-inline-start: auto;
  border-radius: 999px;
  padding: 0 5px;
  font-size: 10px;
  line-height: 16px;
}

.main-header .al-account .user-menu {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  height: 46px;
  margin: 0;
  padding: 0 6px;
  border-radius: 10px;
  line-height: 1.15;
  text-decoration: none !important;
}

.main-header .al-account .user-menu>img {
  width: 34px;
  height: 34px;
  margin-top: 0;
  border-radius: 50%;
  object-fit: cover;
}

.main-header .al-account .user-menu .title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
}

.main-header .al-account .al-account-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--al-ink);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-header .al-account .al-account-role {
  font-size: 9.5px;
  color: #4f5670;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* guest "join" pill ------------------------------------------------------- */

.main-header .al-account .al-account-guest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--al-primary);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none !important;
  box-shadow: 0 8px 18px -12px rgba(84, 38, 239, .9), inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: box-shadow .16s ease, transform .16s ease, filter .16s ease;
}

/* the generic account-icon rules would repaint the pill as a soft square,
   so every state below restates the solid primary fill */
.main-header .al-account>ul>li>a.al-account-guest:hover,
.main-header .al-account .al-account-guest:hover {
  background: var(--al-primary);
  color: #fff !important;
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px -12px rgba(84, 38, 239, .95), inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* while the sign in / sign up menu is open */
.main-header .al-account>ul>li.show>a.al-account-guest {
  background: var(--al-primary);
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(84, 38, 239, .22), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.main-header .al-account .al-account-guest:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(16, 17, 47, .18);
}

.main-header .al-account .al-account-guest:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(84, 38, 239, .35), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.main-header .al-account .al-account-guest .al-account-guest-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* the icon ships with a hard coded brand fill (and .main-icon forces it too),
   which is invisible on the primary pill - it has to follow the white label */
.main-header .al-account .al-account-guest svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.main-header .al-account .al-account-guest svg,
.main-header .al-account .al-account-guest svg * {
  color: #fff !important;
  fill: #fff !important;
}

body.night-mode .main-header .al-account>ul>li>a {
  color: #c1c8e3;
}

body.night-mode .main-header .al-account .al-account-name {
  color: #eef1ff;
}

body.night-mode .main-header .al-account .al-account-role {
  color: #9aa0c2;
}

/* nav buttons (dropdown toggles) ----------------------------------------- */

.al-navigation .al-nav-item>button.dropdown-toggle::after {
  display: none;
}

.al-navigation .al-nav-item>button.active {
  color: var(--al-primary);
}

.al-navigation .al-nav-item>button.active:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--al-primary);
}

/* header search used to be hidden below 768px by the core theme */
@media (max-width: 767.98px) {
  .main-header.al-topbar .al-topbar-search {
    display: none;
  }
}

/* responsive (mirrors the reference design breakpoints) ------------------ */

@media (min-width: 1600px) {
  .main-header.al-topbar .al-topbar-inner {
    gap: 20px;
  }

  .main-header .logo-wrapper.al-brand {
    min-width: 240px;
  }

  .main-header .al-navigation {
    gap: 18px;
  }

  .al-topbar-search {
    min-width: 160px;
    max-width: 240px;
  }

  .main-header .al-account {
    gap: 12px;
  }
}

@media (max-width: 1390px) {
  .main-header.al-topbar .al-topbar-inner {
    gap: 15px;
  }

  .main-header .logo-wrapper.al-brand {
    min-width: 185px;
  }

  .main-header .al-navigation {
    gap: 16px;
  }

  .main-header .al-account {
    gap: 10px;
  }

  .main-header .al-account>ul {
    gap: 10px;
  }

  .al-topbar-search {
    min-width: 150px;
    max-width: 190px;
  }

  /* the reference design hides the account name & role under 1390px */
  .main-header .al-account .al-account-name,
  .main-header .al-account .al-account-role {
    display: none;
  }
}

@media (max-width: 1100px) {
  .main-header .logo-wrapper.al-brand {
    min-width: 0;
  }

  .main-header .al-brand .al-brand-text small {
    display: none;
  }

  .main-header .al-navigation {
    gap: 13px;
  }

  .al-topbar-search {
    min-width: 140px;
    max-width: 180px;
  }

  .main-header .al-account {
    gap: 6px;
  }

  .main-header .al-account>ul {
    gap: 4px;
  }
}

/* keep the six sections inside the header row on narrow desktops/laptops */
@media (max-width: 1199.98px) {
  .main-header .al-navigation {
    gap: 10px;
  }

  .main-header .al-navigation .al-nav-item {
    flex: 0 1 auto;
    min-width: 0;
  }

  .main-header .al-navigation .al-nav-item>a,
  .main-header .al-navigation .al-nav-item>button {
    min-width: 0;
    max-width: 100%;
    font-size: 12px;
  }

  /* last resort: a label may ellipsize, it can never spill out of the header */
  .main-header .al-navigation .al-nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* compact desktop nav: the eight items wrap into two tidy rows of four.
   With a search box, the brand and a full (logged-in) account, eight inline
   items simply cannot fit on 992px-1599px laptops - the header row used to
   overflow and clip the account icons, so the nav now uses a small grid. */
@media (min-width: 992px) and (max-width: 1599.98px) {
  .main-header .al-navigation {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
  }

  .main-header .al-navigation .al-nav-item {
    flex: 0 1 auto;
    min-width: 0;
    justify-content: center;
  }

  .main-header .al-navigation .al-nav-item>a,
  .main-header .al-navigation .al-nav-item>button {
    min-width: 0;
    max-width: 100%;
    padding: 12px 0;
    justify-content: center;
    font-size: 11.5px;
    letter-spacing: -.1px;
  }

  .main-header .al-navigation .al-nav-item>a.active:before,
  .main-header .al-navigation .al-nav-item>button.active:before {
    bottom: -1px;
    height: 2px;
  }

  /* the brand gives way first so the nav labels stay readable */
  .main-header .logo-wrapper.al-brand {
    flex: 0 1 auto;
    min-width: 0;
    flex-shrink: 5;
  }

  /* the tagline goes before any nav label has to be cut */
  .main-header .al-brand .al-brand-text small {
    display: none;
  }

  .main-header .al-brand .al-brand-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .main-header .al-brand .al-brand-text b {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* last resort: a nav label may ellipsize, it can never spill out */
  .main-header .al-navigation .al-nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .al-navigation .al-nav-item>.dropdown-menu.al-nav-panel {
    margin-top: 8px;
    max-width: calc(100vw - 24px);
  }

  /* a shorter search box pays for the inline nav row */
  .main-header.al-topbar .al-topbar-search {
    flex-basis: 170px;
    min-width: 140px;
    max-width: 200px;
  }
}

/* 992px-1199.98px: a tighter row + shorter search keeps the brand readable */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .main-header.al-topbar .al-topbar-inner {
    gap: 10px;
  }

  .main-header .al-navigation {
    gap: 8px;
  }

  .main-header .al-navigation .al-nav-item>a,
  .main-header .al-navigation .al-nav-item>button {
    font-size: 11px;
  }

  .main-header.al-topbar .al-topbar-search {
    flex-basis: 160px;
    min-width: 130px;
    max-width: 170px;
  }
}

/* two rows: (menu + brand + search + account) then the career navigation */
@media (max-width: 991.98px) {
  body {
    padding-top: 104px;
  }

  body.n_activated,
  body.n_live {
    padding-top: 154px;
  }

  .main-header.al-topbar {
    height: 104px;
  }

  .main-header.al-topbar .al-topbar-inner {
    flex-wrap: wrap;
    align-content: space-between;
    height: 104px;
    min-height: 0;
    padding: 0;
    gap: 0 10px;
  }

  .main-header .al-topbar-toggle.menu-icon {
    display: inline-flex;
    order: 0;
  }

  .main-header .logo-wrapper.al-brand {
    order: 1;
    margin-inline-end: auto;
  }

  .main-header .al-topbar-search {
    order: 2;
    margin-inline-start: 0;
    flex: 0 1 220px;
  }

  .main-header .al-account {
    order: 3;
  }

  .main-header .al-navigation {
    order: 4;
    width: 100%;
    height: 42px;
    min-height: 42px;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    justify-content: center;
    border-top: 1px solid var(--al-border);
  }

  body.night-mode .main-header .al-navigation {
    border-top-color: #262a45;
  }

  .main-header .al-navigation .al-nav-item {
    flex: 0 1 auto;
    min-width: 0;
    justify-content: center;
  }

  .main-header .al-navigation .al-nav-item>a,
  .main-header .al-navigation .al-nav-item>button {
    padding: 11px 0;
    font-size: 11.5px;
    justify-content: center;
  }

  .main-header .al-navigation .al-nav-item .al-nav-caret {
    width: 9px;
    height: 9px;
  }

  .main-header .al-navigation .al-nav-item>a.active:before,
  .main-header .al-navigation .al-nav-item>button.active:before {
    bottom: 2px;
  }

  /* "post a job" becomes a compact icon button (keeps all six sections visible) */
  .main-header .al-navigation .al-nav-item.al-nav-cta>a,
  .main-header .al-navigation .al-nav-item.al-nav-cta>button {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
    border-radius: 9px;
    background: var(--al-primary-soft);
  }

  .main-header .al-navigation .al-nav-item.al-nav-cta>a span,
  .main-header .al-navigation .al-nav-item.al-nav-cta>button span {
    display: none;
  }

  /* panels always stay inside the viewport on tablets/phones */
  .al-navigation .al-nav-item>.dropdown-menu.al-nav-panel {
    margin-top: 8px;
    max-width: calc(100vw - 20px);
  }

  .al-nav-panel-body {
    max-height: 46vh;
  }
}

/* phones & small tablets: row 1 = menu + brand + account, row 2 = the career
   navigation. Every section stays on ONE row and the labels scale down. */
@media (max-width: 767.98px) {
  /* the header grows by one compact nav row (62px + 50px) */
  body {
    padding-top: 112px;
  }

  body.n_activated,
  body.n_live {
    padding-top: 162px;
  }

  .main-header.al-topbar {
    height: 112px;
  }

  .main-header.al-topbar .al-topbar-inner {
    height: 112px;
    gap: 0 6px;
  }

  /* the brand grows/shrinks inside row 1 instead of pushing the account
     onto a second line (flex line breaking uses the brand's content width) */
  .main-header .logo-wrapper.al-brand {
    flex: 1 1 0%;
    min-width: 0;
  }

  .main-header .al-navigation {
    height: 50px;
    min-height: 50px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }

  .main-header .al-navigation .al-nav-item {
    flex: 0 1 auto;
    min-width: 0;
    height: 50px;
    justify-content: center;
  }

  .main-header .al-navigation .al-nav-item>a,
  .main-header .al-navigation .al-nav-item>button {
    height: 50px;
    padding: 4px 2px;
    justify-content: center;
    gap: 3px;
    /* the six sections always stay in this row: the labels scale with the width */
    font-size: clamp(9px, 2.7vw, 11.2px);
    letter-spacing: -.1px;
    line-height: 1.15;
    white-space: nowrap;
  }

  .main-header .al-navigation .al-nav-item .al-nav-caret {
    display: none;
  }

  .main-header .al-navigation .al-nav-item>a.active:before,
  .main-header .al-navigation .al-nav-item>button.active:before {
    left: 28%;
    right: 28%;
    bottom: 2px;
    height: 2px;
  }

  .main-header .al-navigation .al-nav-item.al-nav-cta>a,
  .main-header .al-navigation .al-nav-item.al-nav-cta>button {
    width: 34px;
    height: 34px;
    margin: 8px auto;
  }
}

/* guests only ever reach the sign in / sign up / reset pages: there is no
   career navigation and no search box in the topbar, so the "join" pill is
   pushed to the far end of the row instead of sitting next to the brand */
@media (min-width: 992px) {
  body.visitor:not(.index-body) .main-header.al-topbar .al-account {
    margin-inline-start: auto;
  }
}

/* visitors and the sign in / sign up pages have no career navigation (the
   template skips it), so the topbar falls back to a single row: the nav row
   reserved by the two-row heights above is not needed there */
@media (max-width: 991.98px) {
  body.visitor:not(.index-body) {
    /* 64px for the single-row header */
    padding-top: 64px;
  }

  body.visitor:not(.index-body).n_live {
    /* 64px for the header + 50px for the top bar */
    padding-top: 114px;
  }

  body.visitor:not(.index-body) .main-header.al-topbar,
  body.visitor:not(.index-body) .main-header.al-topbar .al-topbar-inner {
    height: 64px;
  }

  body.visitor:not(.index-body) .main-header.al-topbar .al-topbar-inner {
    flex-wrap: nowrap;
    align-content: center;
  }
}

@media (max-width: 767.98px) {
  body.visitor:not(.index-body) {
    /* 62px for the single-row header */
    padding-top: 62px;
  }

  body.visitor:not(.index-body).n_live {
    /* 62px for the header + 50px for the top bar */
    padding-top: 112px;
  }

  body.visitor:not(.index-body) .main-header.al-topbar,
  body.visitor:not(.index-body) .main-header.al-topbar .al-topbar-inner {
    height: 62px;
  }
}

/* the master admin (user_id = 1) keeps only the logo, the notifications and the
   account menu: there is no career navigation and no search box in the topbar,
   so the account area is pinned to the far end of the row and the header keeps
   the single-row height on small screens */
@media (min-width: 992px) {
  body.master-admin .main-header.al-topbar .al-account {
    margin-inline-start: auto;
  }
}

@media (max-width: 991.98px) {
  body.master-admin {
    /* 64px for the single-row header */
    padding-top: 64px;
  }

  body.master-admin.n_activated,
  body.master-admin.n_live {
    /* 64px for the header + 50px for the top bar */
    padding-top: 114px;
  }

  body.master-admin .main-header.al-topbar,
  body.master-admin .main-header.al-topbar .al-topbar-inner {
    height: 64px;
  }

  body.master-admin .main-header.al-topbar .al-topbar-inner {
    flex-wrap: nowrap;
    align-content: center;
  }
}

@media (max-width: 767.98px) {
  body.master-admin {
    /* 62px for the single-row header */
    padding-top: 62px;
  }

  body.master-admin.n_activated,
  body.master-admin.n_live {
    /* 62px for the header + 50px for the top bar */
    padding-top: 112px;
  }

  body.master-admin .main-header.al-topbar,
  body.master-admin .main-header.al-topbar .al-topbar-inner {
    height: 62px;
  }
}

/* phones: brand & account compact + single column megamenus */
@media (max-width: 575.98px) {
  .main-header .al-brand .al-brand-mark {
    font-size: 30px;
  }

  /* the brand may shrink so the account icons always stay inside the header */
  .main-header .logo-wrapper.al-brand {
    flex: 1 1 0%;
    min-width: 0;
    gap: 8px;
  }

  .main-header .al-brand .al-brand-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .main-header .al-brand .al-brand-text b {
    display: block;
    font-size: 19px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .main-header .al-account>ul {
    gap: 2px;
  }

  .main-header .al-topbar-toggle.menu-icon {
    width: 34px;
    height: 34px;
  }

  .main-header .al-account>ul>li>a {
    width: 34px;
    height: 34px;
  }

  /* the square sizing above is for the round account icons only: the guest
     pill keeps its label, so it stays a real button inside the 62px row */
  .main-header .al-account>ul>li>a.al-account-guest {
    width: auto;
    height: 36px;
    padding: 0 15px;
    font-size: 12.5px;
  }

  .main-header .al-account .user-menu {
    height: 40px;
    padding: 0 2px;
  }

  .main-header .al-account .user-menu>img {
    width: 30px;
    height: 30px;
  }

  .al-nav-panel-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .al-navigation .al-nav-item>.al-nav-panel.al-nav-panel-wide {
    width: 330px;
  }
}




/* small phones: the mark alone is cleaner than a 2-3 letter stub of the name */
@media (max-width: 419.98px) {
  .main-header .al-brand .al-brand-text {
    display: none;
  }
}



/* only an item that carries a short form swaps its longest label where the row
   is tight (small phones and inline laptops). Every section keeps a visible
   label - the row must never degrade into bare carets. */
@media (max-width: 539.98px), (min-width: 992px) and (max-width: 1399.98px) {
  .main-header .al-navigation .al-nav-has-short .al-nav-label-full {
    display: none;
  }

  .main-header .al-navigation .al-nav-has-short .al-nav-label-short {
    display: inline;
  }
}

/* phones: the six career sections + the CTA fill the whole header row edge to
   edge and the labels scale with the viewport, so every button stays readable
   on one line. "Home" is left out here: the logo, the drawer and the mobile
   tab-bar already take you there. */
@media (max-width: 575.98px) {
  .main-header .al-navigation {
    width: calc(100% + 24px);
    margin-inline: -12px;
    gap: 2px;
    justify-content: center;
  }

  .main-header .al-navigation .al-nav-item.al-nav-home {
    display: none;
  }

  .main-header .al-navigation .al-nav-item>a,
  .main-header .al-navigation .al-nav-item>button {
    padding: 4px 1px;
    gap: 2px;
    font-size: clamp(8.5px, 2.7vw, 12px);
    letter-spacing: -.2px;
  }

  /* last resort on the narrowest phones: a label may ellipsize, it can never
     push the row into a second line or spill out of the header */
  .main-header .al-navigation .al-nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .main-header .al-navigation .al-nav-item.al-nav-cta>a,
  .main-header .al-navigation .al-nav-item.al-nav-cta>button {
    width: 32px;
    height: 32px;
    margin: 9px auto;
  }
}

/* very small phones: shrink the row labels one last step so nothing is cut */
@media (max-width: 359.98px) {
  .main-header .al-navigation {
    gap: 1px;
  }

  .main-header .al-navigation .al-nav-item>a,
  .main-header .al-navigation .al-nav-item>button {
    padding: 4px 0;
    font-size: clamp(8.5px, 2.6vw, 10px);
    letter-spacing: -.3px;
  }
}

/* 992px-1399.98px (small laptops): the eight labels stay visible, so the
   carets give way, the CTA turns into the compact icon button and the row
   tightens up - nothing is ever clipped or pushed to a second line */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .main-header .al-navigation {
    gap: 4px;
  }

  .main-header .al-navigation .al-nav-item .al-nav-caret {
    display: none;
  }

  .main-header .al-navigation .al-nav-item>a,
  .main-header .al-navigation .al-nav-item>button {
    padding: 12px 0;
    gap: 4px;
    font-size: 11px;
    letter-spacing: -.1px;
  }

  /* a hair of slack: a sub-pixel overflow would otherwise paint a whole
     "…" and cut a full character off a label that actually fits */
  .main-header .al-navigation .al-nav-label {
    padding-inline-end: 1px;
  }

  .main-header .al-navigation .al-nav-item.al-nav-cta>a,
  .main-header .al-navigation .al-nav-item.al-nav-cta>button {
    width: 34px;
    height: 34px;
    margin: 0 auto;
    padding: 0;
    justify-content: center;
    border-radius: 9px;
    background: var(--al-primary-soft);
  }

  .main-header .al-navigation .al-nav-item.al-nav-cta>a span,
  .main-header .al-navigation .al-nav-item.al-nav-cta>button span {
    display: none;
  }

}

/* 992px-1199.98px: the tightest desktop row - the shorter search box is what
   pays for the brand and for labels that are never cut */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .main-header.al-topbar .al-topbar-search {
    flex-basis: 130px;
    min-width: 110px;
    max-width: 150px;
  }
}

/* 1200px-1399.98px: there is room again, so the CTA gets its label back */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .main-header .al-navigation {
    gap: 10px;
  }

  .main-header .al-navigation .al-nav-item.al-nav-cta>a,
  .main-header .al-navigation .al-nav-item.al-nav-cta>button {
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 0;
    background: none;
    border-radius: 0;
  }

  .main-header .al-navigation .al-nav-item.al-nav-cta>a span,
  .main-header .al-navigation .al-nav-item.al-nav-cta>button span {
    display: inline;
  }
}

/* ==========================================================================
   Category / company / institute grids (Jobs, Courses, Companies, Network)
   ========================================================================== */

.al-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 10px;
}

.al-cat-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--al-border);
  border-radius: 10px;
  background: var(--al-card);
  text-decoration: none !important;
  transition: border-color .15s, background .15s;
}

.al-cat-card:hover {
  border-color: var(--al-primary);
  background: var(--al-primary-soft);
}

.al-cat-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.al-cat-card-name {
  display: block;
  max-width: 100%;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--al-text) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-cat-card-sub {
  display: block;
  font-size: 10.5px;
  color: #4f5670;
}

/* companies page cards */
.al-company-grid {
  grid-template-columns: repeat(auto-fill, minmax(266px, 1fr));
  align-items: start;
}

.al-company-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 0;
  padding: 14px;
}

.al-company-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.al-company-mark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--al-primary-soft);
  color: var(--al-primary);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.al-company-id {
  flex: 1 1 auto;
  min-width: 0;
}

.al-company-name {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--al-text) !important;
  text-decoration: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-company-name:hover {
  color: var(--al-primary) !important;
}

.al-company-meta {
  display: block;
  font-size: 11px;
  color: #4f5670;
}

.al-company-jobs {
  display: block;
}

.al-company-banner {
  width: 100%;
  height: 110px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 12px;
  background-color: var(--al-primary-soft);
}

.al-company-logo {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}

/* network rows (people / pages / groups) */
.al-net-row {
  align-items: center;
  padding: 8px 0;
}

.al-net-avatar,
.al-net-thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #f0f1f8;
}

.al-net-thumb {
  border-radius: 10px;
}

.al-net-row .al-list-body {
  min-width: 0;
}

.al-net-row .al-list-title,
.al-net-row .al-list-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* phones: one column of companies, two columns of categories */
@media (max-width: 575.98px) {
  .al-company-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .al-cat-grid {
    grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  }
}


/* ==========================================================================
   Profile :: job seeker panels (employment, skills & CV)
   ========================================================================== */

.al-entry {
  padding: 12px 0;
  border-top: 1px solid var(--al-border);
}

.al-entry:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.al-entry-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.al-entry-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--al-primary-soft);
  color: var(--al-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.al-entry-icon svg {
  width: 16px;
  height: 16px;
}

.al-entry-text {
  display: block;
  min-width: 0;
}

.al-entry-title {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--al-text);
  line-height: 1.3;
}

.al-entry-sub {
  display: block;
  font-size: 11px;
  color: #4f5670;
  line-height: 1.5;
}

.al-entry-note {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: #4f5670;
  line-height: 1.6;
}

.al-entry .al-tag {
  display: inline-block;
  margin-top: 8px;
}

.al-entry-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.al-inline-form {
  margin: 0;
}

.al-skill-add {
  display: flex;
  align-items: center;
  gap: 6px;
}

.al-skill-add .form-control {
  min-width: 0;
}

.al-chip-x {
  border: 0;
  background: none;
  margin: 0 0 0 6px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  color: inherit;
  opacity: .6;
}

.al-chip-x:hover {
  opacity: 1;
  color: var(--al-danger);
}

/* keep the job seeker panels spaced inside the classic profile column */
.col-lg-4 > .al-card + .al-card {
  margin-top: 14px;
}

/* ==========================================================================
   Chat rail (overlay, no layout lane)
   The rail is a fixed strip pinned to the right edge, it is not part of the
   page grid, so instead of reserving a padding lane (which used to shift the
   header, the top bar and the shell on every page) it now parks outside the
   viewport and slides in on hover / keyboard focus. Nothing is clickable
   while it is parked, so it never steals clicks from the last column.
   ========================================================================== */

@media (min-width: 1200px) {
  .chat-sidebar {
    right: -50px;
    width: 68px;
    z-index: 1025;
    padding: 6px 0 8px;
    border-radius: 16px 0 0 16px;
    background: var(--al-card);
    box-shadow: -8px 0 26px rgba(13, 31, 61, .12);
    transition: right .22s ease, box-shadow .22s ease;
  }

  body.night-mode .chat-sidebar {
    background: var(--card-dark-color, #1f2430);
  }

  /* the grab handle that stays visible when the rail is parked */
  .chat-sidebar::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 3px;
    height: 38px;
    margin-top: -19px;
    border-radius: 3px;
    background: #9aa1b8;
    opacity: .4;
    transition: opacity .18s ease;
  }

  .chat-sidebar:hover,
  .chat-sidebar:focus-within {
    right: 10px;
    box-shadow: -12px 0 32px rgba(13, 31, 61, .18);
  }

  .chat-sidebar:hover::after,
  .chat-sidebar:focus-within::after {
    opacity: 0;
  }

  .chat-sidebar .chat-sidebar-content,
  .chat-sidebar .chat-sidebar-footer {
    transition: opacity .18s ease, visibility .18s ease;
  }

  /* parked :: hidden from sight and from the pointer */
  .chat-sidebar:not(:hover):not(:focus-within) .chat-sidebar-content,
  .chat-sidebar:not(:hover):not(:focus-within) .chat-sidebar-footer {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}


/* ==========================================================================
   Job apply :: profile data sharing
   ========================================================================== */

.al-job-share-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.al-job-share-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.al-job-inline-share {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: #4f5670;
  cursor: pointer;
  user-select: none;
}

.al-job-inline-share input {
  margin: 0;
  accent-color: var(--al-primary);
}

.al-job-share-list {
  display: grid;
  gap: 8px;
}

.al-job-share-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--al-border);
  border-radius: 10px;
  background: var(--al-card);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.al-job-share-item:hover {
  border-color: var(--al-primary);
  box-shadow: var(--al-shadow);
}

.al-job-share-item > input {
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--al-primary);
}

.al-job-share-body {
  display: block;
  min-width: 0;
}

.al-job-share-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--al-text);
}

.al-job-share-text {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.5;
  color: #4f5670;
  word-break: break-word;
}

.al-job-share-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.al-job-share-off {
  opacity: .55;
}

.job-candidate-section-title {
  margin: 16px 0 8px;
  font-size: 15px;
  font-weight: 600;
}

body.night-mode .al-job-share-item {
  background: #1e1f2e;
  border-color: #2e3047;
}

body.night-mode .al-job-share-title {
  color: #e7e8f2;
}

body.night-mode .al-job-share-text,
body.night-mode .al-job-inline-share {
  color: #a7a9bd;
}

body.night-mode .al-job-share-chips .al-chip {
  background: #2a2c40;
  color: #cfd1e2 !important;
}

/* ==========================================================================
   Profile page (profile.tpl)
   Follows the dashboard language: full width shell, white cards with the
   al radius/shadow, a dark hero band, sticky pill tabs and a three column
   reading grid that collapses to two and then to one column.
   ========================================================================== */

/* page shell :: stretches like the dashboard, keeps a comfortable reading
   width on ultra wide screens */
.al-shell.al-pf-page {
  max-width: 1680px;
  padding-top: 16px;
}

/* the page shell already owns the gutter :: the bootstrap row/column pair that
   wraps the hero + timeline must not add negative margins (the -12px row
   margins used to poke ~2px out of the shell at tablet widths) */
.al-pf-page>.row {
  --bs-gutter-x: 0;
  margin-inline: 0;
}

.al-pf-page>.row>[class*="col-"] {
  width: 100%;
  padding-inline: 0;
}

/* sub pages (friends, photos, videos …) still live in a bootstrap row */
.al-pf-page .row.al-pf-view-row {
  --bs-gutter-x: 0;
  margin-inline: auto;
}

.al-pf-page .row.al-pf-view-row>[class*="col-"] {
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   Hero :: cover, avatar, identity, actions & counters
   -------------------------------------------------------------------------- */

.al-pf-hero {
  position: relative;
  background: var(--al-card);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius);
  box-shadow: var(--al-shadow);
  margin-bottom: 14px;
  /* not clipped: the cover dropdowns (avatar & cover menus) open outside it */
  overflow: visible;
}

/* the theme forces a fixed height and square bottom corners on the cover */
.al-pf-page .profile-cover-wrapper.al-pf-cover {
  position: relative;
  height: clamp(140px, 17vw, 250px);
  border-radius: var(--al-radius) var(--al-radius) 0 0;
  background: linear-gradient(100deg, #0a0d24 0%, #131a33 48%, #26312e 100%);
}

.al-pf-page .profile-cover-wrapper.al-pf-cover:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(16, 17, 47, 0) 42%, rgba(16, 17, 47, .55) 100%);
  pointer-events: none;
}

.al-pf-page .profile-cover-wrapper.al-pf-cover img {
  border-radius: 0;
}

/* keep the cover controls above the gradient */
.al-pf-page .profile-cover-wrapper.al-pf-cover .profile-cover-buttons,
.al-pf-page .profile-cover-wrapper.al-pf-cover .profile-cover-position,
.al-pf-page .profile-cover-wrapper.al-pf-cover .profile-cover-position-buttons,
.al-pf-page .profile-cover-wrapper.al-pf-cover .profile-cover-delete,
.al-pf-page .profile-cover-wrapper.al-pf-cover .profile-cover-position-loader {
  z-index: 3;
}

.al-pf-page .profile-cover-wrapper.al-pf-cover .profile-cover-buttons>div:not(.profile-cover-position-buttons) {
  border-radius: 9px;
  padding: 7px 9px;
  background: rgba(16, 17, 47, .48);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  backdrop-filter: blur(6px);
  transition: background .15s;
}

.al-pf-page .profile-cover-wrapper.al-pf-cover .profile-cover-buttons>div:hover {
  background: rgba(16, 17, 47, .72);
}

.al-pf-page .profile-cover-wrapper.al-pf-cover .profile-cover-buttons {
  top: 12px;
  inset-inline-start: 12px;
  inset-inline-end: auto;
  opacity: .95;
}

/* -- head row ------------------------------------------------------------- */

.al-pf-head {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 0 18px 16px;
}

/* avatar pulled up over the cover, following the dashboard avatar ring */
.al-pf-page .profile-avatar-wrapper.al-pf-avatar {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  inset-inline-start: auto;
  transform: none;
  align-self: flex-start;
  flex: 0 0 auto;
  width: 132px;
  height: 132px;
  margin-top: -54px;
  padding: 5px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(16, 17, 47, .18);
  z-index: 5;
}

.al-pf-page .profile-avatar-wrapper.al-pf-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* the avatar controls are always readable (touch devices have no hover) */
.al-pf-page .profile-avatar-wrapper.al-pf-avatar .profile-avatar-change,
.al-pf-page .profile-avatar-wrapper.al-pf-avatar .profile-avatar-crop,
.al-pf-page .profile-avatar-wrapper.al-pf-avatar .profile-avatar-delete {
  opacity: .92;
  background: rgba(16, 17, 47, .55);
  color: #fff;
  font-size: 12px;
  padding: 5px 8px;
  inset-inline-end: 6px;
}

.al-pf-page .profile-avatar-wrapper.al-pf-avatar .profile-avatar-change {
  bottom: 6px;
}

.al-pf-page .profile-avatar-wrapper.al-pf-avatar .profile-avatar-crop {
  bottom: 44px;
  right: 6px;
}

.al-pf-page .profile-avatar-wrapper.al-pf-avatar .profile-avatar-delete {
  bottom: 82px;
  right: 6px;
}

.al-pf-page .profile-avatar-wrapper.al-pf-avatar:hover .profile-avatar-change,
.al-pf-page .profile-avatar-wrapper.al-pf-avatar:hover .profile-avatar-crop,
.al-pf-page .profile-avatar-wrapper.al-pf-avatar:hover .profile-avatar-delete {
  opacity: 1;
  background: rgba(16, 17, 47, .75);
}



/* -- identity ------------------------------------------------------------- */

.al-pf-page .profile-name-wrapper.al-pf-identity {
  flex: 1 1 260px;
  min-width: 0;
  padding: 12px 0 0;
  background: transparent;
  text-align: start;
}

.al-pf-page .profile-name-wrapper.al-pf-identity a {
  color: var(--al-text);
}

.al-pf-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 9px;
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.4px;
  color: var(--al-text);
}

.al-pf-name>a {
  color: var(--al-text) !important;
  text-decoration: none !important;
}

.al-pf-name .verified-badge,
.al-pf-name .pro-badge,
.al-pf-name .verified-badge:hover,
.al-pf-name .pro-badge:hover {
  display: inline-flex;
  align-items: center;
  cursor: default;
}

.al-pf-page .profile-name-wrapper.al-pf-identity .badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 4px 10px;
  border-radius: 999px;
}

.al-pf-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.al-pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: #f4f6fb;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: #4f5670;
  text-decoration: none !important;
}

.al-pf-chip>span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-pf-chip .svg-container,
.al-pf-chip i {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 auto;
  font-size: 11.5px;
}

.al-pf-chip.is-type {
  background: var(--al-primary-soft);
  border-color: transparent;
  color: #4322c4;
}

.al-pf-chip.is-employer {
  background: #eaf1ff;
  border-color: transparent;
  color: #1a5cff;
}

.al-pf-chip.is-trainer {
  background: var(--al-accent-soft);
  border-color: transparent;
  color: #0a8a63;
}

.al-pf-chip.is-seeker {
  background: var(--al-warn-soft);
  border-color: transparent;
  color: #a9640a;
}

/* -- action buttons ------------------------------------------------------- */

.al-pf-page .profile-buttons-wrapper.al-pf-actions {
  position: relative;
  bottom: auto;
  right: auto;
  inset-inline-end: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px auto;
  padding: 0;
  background: transparent !important;
  text-align: start;
}

.al-pf-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none !important;
}

.al-pf-actions .btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
}

.al-pf-actions .btn .svg-container,
.al-pf-actions .btn i {
  width: 16px !important;
  height: 16px !important;
  font-size: 15px;
}

.al-pf-actions .btn-success {
  background: var(--al-primary);
  border-color: var(--al-primary);
  color: #fff;
}

.al-pf-actions .btn-success:hover,
.al-pf-actions .btn-success:focus {
  background: var(--al-primary-dark);
  border-color: var(--al-primary-dark);
  color: #fff;
}

.al-pf-actions .btn-danger {
  background: var(--al-danger-soft);
  border-color: #ffd3db;
  color: #c92a4c;
}

.al-pf-actions .btn-danger:hover,
.al-pf-actions .btn-danger:focus {
  background: #ffe3e8;
  border-color: #ffc0cb;
  color: #b31f3f;
}

.al-pf-actions .btn-light {
  background: #fff;
  border-color: var(--al-border);
  color: var(--al-text);
}

.al-pf-actions .btn-light:hover,
.al-pf-actions .btn-light:focus,
.al-pf-actions .btn-light.show {
  background: #fff;
  border-color: var(--al-primary);
  color: var(--al-primary);
}

.al-pf-actions .btn-primary {
  background: var(--al-primary);
  border-color: var(--al-primary);
}

.al-pf-btn-label {
  display: inline-block;
  margin-inline-start: 6px;
}

/* -- counters ------------------------------------------------------------- */

.al-pf-stats {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid var(--al-border);
  border-radius: 0 0 var(--al-radius) var(--al-radius);
  background: #fbfcff;
}

.al-pf-stats::-webkit-scrollbar {
  display: none;
}

.al-pf-stats a {
  flex: 1 1 0;
  min-width: 92px;
  padding: 11px 8px;
  text-align: center;
  text-decoration: none !important;
  border-inline-start: 1px solid var(--al-border);
  transition: background .15s;
}

.al-pf-stats a:first-child {
  border-inline-start: 0;
}

.al-pf-stats a:hover {
  background: #f3f5ff;
}

.al-pf-stats b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--al-text);
}

.al-pf-stats span {
  display: block;
  overflow: hidden;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .25px;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #4f5670;
}


/* --------------------------------------------------------------------------
   Tabs :: scrollable underline bar (the same bar used on the dashboard feed)
   -------------------------------------------------------------------------- */

.al-pf-tabs {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: 12px;
  padding: 0 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: var(--al-card);
  border: 1px solid var(--al-border);
  border-radius: 7px;
  box-shadow: var(--al-shadow);
}

.al-pf-tabs::-webkit-scrollbar {
  display: none;
}

.al-pf-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 10px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  color: #55617a !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}

.al-pf-tabs a:hover {
  color: var(--al-primary) !important;
  border-bottom-color: #d9d0ff;
}

.al-pf-tabs a.active {
  background: transparent;
  color: var(--al-primary) !important;
  border-bottom-color: var(--al-primary);
}

.al-pf-tabs a .svg-container,
.al-pf-tabs a i {
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 auto;
  font-size: 15px;
  color: currentColor;
}

.al-pf-tabs a span {
  line-height: 1.2;
}

/* the tab bar follows the reader down the timeline (from 768px up; below that
   the off-canvas wrapper is overflow:hidden and would clip it) */
@media (min-width: 768px) {
  .al-pf-page .al-pf-tabs {
    position: sticky;
    z-index: 30;
  }
}

/* 768–991 :: the header wraps onto two rows and is 104px tall */
@media (min-width: 768px) and (max-width: 991.98px) {
  .al-pf-page .al-pf-tabs {
    top: 112px;
  }

  body.n_activated .al-pf-page .al-pf-tabs,
  body.n_live .al-pf-page .al-pf-tabs {
    /* 50px alert bar above the header */
    top: 162px;
  }
}

/* 992 and up :: the header is one 70px row */
@media (min-width: 992px) {
  .al-pf-page .al-pf-tabs {
    top: 78px;
  }

  body.n_activated .al-pf-page .al-pf-tabs,
  body.n_live .al-pf-page .al-pf-tabs {
    /* 50px alert bar above the header */
    top: 128px;
  }
}

/* --------------------------------------------------------------------------
   Reading grid :: side panels | feed | side panels
   -------------------------------------------------------------------------- */

.al-pf-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

/* the two panel columns behave as one block on tablet & mobile and as two
   separate grid columns on wide screens */
.al-pf-asides {
  display: contents;
}

.al-pf-main {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.al-pf-side {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* the flex gap owns the rhythm inside the grid, not the theme margins */
.al-pf-main>*,
.al-pf-side>* {
  margin-bottom: 0;
}

/* the timeline follows the dashboard feed: 10px rhythm, 7px corners */
.al-pf-main>.al-feed,
.al-pf-main>.card {
  border-radius: 7px;
}

.al-pf-main .post {
  margin-bottom: 10px;
  border-radius: 7px;
}

.al-pf-main .post:last-child {
  margin-bottom: 0;
}

/* "view N new posts" is pinned over the viewport by the theme */
.al-pf-main .posts-staging-btn {
  position: relative;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 0 14px;
  z-index: 20;
  box-shadow: var(--al-shadow-lg);
}

/* sub pages (friends, photos, videos, …) keep a readable width */
.al-pf-page .al-pf-view-row {
  max-width: 1240px;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Panels :: al cards and theme cards share one look inside the profile
   -------------------------------------------------------------------------- */

.al-pf-page .al-card,
.al-pf-page .card {
  background: var(--al-card);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius);
  box-shadow: var(--al-shadow);
}

.al-pf-page .al-pf-side>.al-card {
  margin-bottom: 0;
}

.al-pf-page .card {
  margin-bottom: 14px;
}

.al-pf-page .card:last-child {
  margin-bottom: 0;
}

/* inside the panel columns the flex gap owns the rhythm */
.al-pf-page .al-pf-side>.card {
  margin-bottom: 0;
}

/* theme panel headers mirror .al-card-head: 14px title, no divider line */
.al-pf-page .card-header {
  padding: 14px 16px 10px;
  background: transparent !important;
  border-bottom: 0;
  border-radius: var(--al-radius) var(--al-radius) 0 0 !important;
  font-size: 14px;
}

.al-pf-page .card-header.with-icon {
  padding: 16px 16px 10px;
}

.al-pf-page .card-header strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--al-text);
}

.al-pf-page .card-header strong a {
  color: var(--al-text) !important;
  text-decoration: none !important;
}

.al-pf-page .card-header strong a:hover {
  color: var(--al-primary) !important;
}

.al-pf-page .card-header .main-icon {
  width: 16px !important;
  height: 16px !important;
  color: var(--al-primary);
}

/* page level headers (friends, photos, videos …) keep the bigger icon */
.al-pf-page .card-header.with-icon .main-icon {
  width: 24px !important;
  height: 24px !important;
}

.al-pf-page .card-body {
  padding: 6px 16px 16px;
}

.al-pf-page .card-header.with-icon+.card-body {
  padding-top: 0;
}

.al-pf-page .card-footer {
  border-top: 1px solid var(--al-border);
  border-radius: 0 0 var(--al-radius) var(--al-radius) !important;
}

/* profile completion :: percentage chip in the head, bar right under it */
.al-pf-pct {
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--al-primary-soft);
  color: var(--al-primary);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.7;
}

.al-pf-progress {
  height: 6px;
  margin: 0 0 12px;
  border-radius: 999px;
  background: #eef1f9;
}

.al-pf-progress .progress-bar {
  border-radius: 999px;
  background: var(--al-primary);
}

/* the completion checklist reads as one compact, aligned list inside the panel */
.al-pf-side .al-card-body .mb5 {
  margin-bottom: 6px;
  font-size: 12.5px;
  line-height: 1.55;
}

.al-pf-side .al-card-body .mb5:last-child {
  margin-bottom: 0;
}

.al-pf-side .al-card-body .mb5 i {
  font-size: 11px;
  vertical-align: 1px;
}

/* a done step is ticked in the accent colour, the label stays readable */
.al-pf-side .al-card-body .mb5 i.green {
  color: var(--al-accent);
}

.al-pf-side .al-card-body .mb5 span[style*="line-through"] {
  color: #4f5670;
}

/* group labels inside the checklist (Company Account, Company Information …) */
.al-pf-side .al-card-body .mb5.mt10 {
  margin-top: 12px;
  margin-bottom: 7px;
}

.al-pf-side .al-card-body .mb5.mt10 strong {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .35px;
  text-transform: uppercase;
  color: #4f5670;
}

/* flush grid bodies (friends, photos, pages, groups …) */
.al-pf-page .al-card-body.is-flush {
  padding: 12px 12px 14px;
}

/* counters & notes that sit next to a panel title */
.al-pf-page .al-pf-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--al-primary-soft);
  color: var(--al-primary);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.8;
}

.al-pf-page .al-pf-head-note {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: #4f5670;
  white-space: nowrap;
}

/* merits :: three compact tiles, the same rhythm as the hero counters */
.al-merits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.al-merit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 10px 4px;
  border: 1px solid var(--al-border);
  border-radius: 10px;
  background: #f7f9fd;
  text-align: center;
}

.al-merit i {
  font-size: 13px;
  line-height: 1.4;
  color: var(--al-primary);
}

.al-merit b {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--al-text);
}

.al-merit span {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .25px;
  text-transform: uppercase;
  color: #4f5670;
}


/* --------------------------------------------------------------------------
   Panel content :: about list, custom fields, grids, buttons
   -------------------------------------------------------------------------- */

.al-pf-page .about-bio {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: #f7f9fd;
  border: 1px solid var(--al-border);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: #3c4158;
  text-align: start;
}

.al-pf-page .about-list {
  display: grid;
  gap: 11px;
}

.al-pf-page .about-list li {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.55;
  color: #4b5069;
}

.al-pf-page .about-list li>strong {
  display: block;
  margin-bottom: 1px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #5b6478;
}

.al-pf-page .about-list-item {
  padding-inline-start: 28px;
  font-size: 12.5px;
  color: #4b5069;
}

.al-pf-page .about-list-item .svg-container {
  width: 17px !important;
  height: 17px !important;
  top: 2px;
  color: var(--al-primary);
}

.al-pf-page .about-list-item a,
.al-pf-page .about-list li a {
  color: var(--al-primary) !important;
  font-weight: 600;
  text-decoration: none !important;
}

.al-pf-page .about-list-item a:hover,
.al-pf-page .about-list li a:hover {
  text-decoration: underline !important;
}

/* completion checklist (job seekers / company sections) */
.al-pf-page .card-body>.mb5,
.al-pf-page .al-card-body>.mb5 {
  font-size: 12.5px;
  line-height: 1.7;
  color: #4b5069;
}

.al-pf-page .card-body>.mb5>strong,
.al-pf-page .al-card-body>.mb5>strong {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #5b6478;
}

.al-pf-page .card-body>.mb5 a,
.al-pf-page .al-card-body>.mb5 a {
  color: var(--al-primary) !important;
  font-weight: 600;
  text-decoration: none !important;
}

.al-pf-page .card-body>.mb5 a:hover,
.al-pf-page .al-card-body>.mb5 a:hover {
  text-decoration: underline !important;
}

/* inline search form */
.al-pf-page .input-group>.form-control {
  height: 40px;
  border-color: var(--al-border);
  font-size: 13px;
  border-start-start-radius: 9px;
  border-end-start-radius: 9px;
}

.al-pf-page .input-group>.form-control:focus {
  border-color: var(--al-primary);
  box-shadow: 0 0 0 3px var(--al-primary-soft);
}

.al-pf-page .input-group>.btn-primary {
  background: var(--al-primary);
  border-color: var(--al-primary);
  border-start-end-radius: 9px;
  border-end-end-radius: 9px;
  font-size: 13px;
  font-weight: 600;
}

/* friend / page / group / event circles */
.al-pf-page .circled-user-box {
  margin: 0 0 14px;
}

.al-pf-page .circled-user-box .user-box {
  margin-bottom: 0;
}

.al-pf-page .circled-user-box .user-box .name {
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #4b5069;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-pf-page .circled-user-box .user-box:hover .name {
  color: var(--al-primary);
}

/* panel navigation (friends, followers, subscribers, …) */
.al-pf-page .nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 0;
}

.al-pf-page .nav-tabs .nav-link {
  padding: 7px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: #55617a;
}

.al-pf-page .nav-tabs .nav-link:hover {
  background: #f4f6fb;
  color: var(--al-primary);
}

.al-pf-page .nav-tabs .nav-link.active {
  background: var(--al-primary-soft);
  color: var(--al-primary);
}

.al-pf-page .nav-tabs .nav-link .badge {
  font-size: 10.5px;
  font-weight: 700;
}

/* see more */
.al-pf-page .see-more {
  padding: 11px;
  border: 1px dashed #d5dbf0;
  border-radius: 10px;
  background: #fbfcff;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--al-primary);
}

/* "nothing here yet" notes in the sub pages (friends, photos, videos …) read as
   one soft placeholder instead of a loose grey line */
.al-pf-page .card-body>p.text-center.text-muted {
  margin: 4px 0 0;
  padding: 22px 16px;
  border: 1px dashed #dfe4f3;
  border-radius: 10px;
  background: #fbfcff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  color: #5b6478 !important;
}

/* subscribe / tip / gift call-to-actions in the rail follow the card language
   (they are plain theme pills, not al-cards) */
.al-pf-side .d-grid>.btn,
.al-pf-side>.d-grid>.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 10px !important;
  border: 1px solid var(--al-primary);
  background: var(--al-primary);
  box-shadow: none !important;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .15px;
  line-height: 1.3;
  white-space: normal;
}

.al-pf-side .d-grid>.btn-primary:hover,
.al-pf-side .d-grid>.btn-primary:focus,
.al-pf-side>.d-grid>.btn-primary:hover,
.al-pf-side>.d-grid>.btn-primary:focus {
  background: var(--al-primary-dark);
  border-color: var(--al-primary-dark);
  color: #fff;
}

.al-pf-side .d-grid>.btn .svg-container,
.al-pf-side .d-grid>.btn i {
  width: 16px !important;
  height: 16px !important;
  font-size: 14px;
}

/* keyboard focus stays visible on every profile control */
.al-pf-page .al-pf-tabs a:focus-visible,
.al-pf-page .al-pf-stats a:focus-visible,
.al-pf-page .nav-tabs .nav-link:focus-visible,
.al-pf-actions .btn:focus-visible,
.al-pf-page .al-card-link:focus-visible,
.al-pf-page .al-pf-cover .profile-cover-buttons>div:focus-visible {
  outline: 2px solid var(--al-primary);
  outline-offset: 2px;
  border-radius: 8px;
}

/* feed publisher + posts inside the centre column */
.al-pf-main .publisher {
  margin-bottom: 0;
}

/* only the direct blocks of the centre column lose their theme margins */
.al-pf-main>.card {
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   Responsive :: hero, tabs & grid
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .al-pf-head {
    padding: 0 22px 16px;
    gap: 14px 22px;
  }
}

/* 768px-1199px :: the feed keeps the left column, the panels stack on the right */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .al-pf-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  }

  .al-pf-main {
    grid-column: 1;
    grid-row: 1;
    order: 0;
  }

  .al-pf-asides {
    display: flex;
    flex-direction: column;
    gap: 14px;
    grid-column: 2;
    grid-row: 1;
    order: 0;
    min-width: 0;
  }
}

/* 768px-991px :: the panels get a little narrower so the feed keeps its width */
@media (min-width: 768px) and (max-width: 991.98px) {
  .al-pf-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 270px);
  }
}

/* 768px-991px :: the topbar is 104px tall, the tab bar docks right below it */
@media (min-width: 768px) and (max-width: 991.98px) {
  .al-pf-tabs {
    padding: 0 6px;
  }
}

/* 1200px and up :: three columns, the feed in the middle */
@media (min-width: 1200px) {
  .al-pf-layout {
    grid-template-columns: minmax(0, 272px) minmax(0, 1fr) minmax(0, 306px);
  }

  .al-pf-main {
    grid-column: 2;
    grid-row: 1;
  }

  .al-pf-side-a {
    grid-column: 1;
    grid-row: 1;
  }

  .al-pf-side-b {
    grid-column: 3;
    grid-row: 1;
  }

  /* the rails scroll with the page: a height capped, sticky rail pushed every
     panel past the first screen (employment actions, skills, CV, photos,
     pages, search) behind an inner scrollbar that members never noticed, so
     those controls looked missing. A normal flow column shows all of them. */
  .al-pf-side {
    position: static;
    max-height: none;
    overflow: visible;
    padding-inline-end: 0;
    align-self: start;
  }
}

@media (min-width: 1440px) {
  .al-pf-layout {
    grid-template-columns: minmax(0, 292px) minmax(0, 1fr) minmax(0, 322px);
  }
}

/* --------------------------------------------------------------------------
   Empty rails :: a rail without panels must not reserve a column
   (on most members' profiles the left rail has no merits / checklist at all,
   which used to leave a 292px hole and push the feed off centre)
   -------------------------------------------------------------------------- */

@supports selector(:has(*)) {
  /* an empty side is removed from the grid entirely … */
  .al-pf-side:not(:has(> *)) {
    display: none;
  }

  /* … and when both sides are empty the stack wrapper goes with it */
  .al-pf-asides:not(:has(> .al-pf-side > *)) {
    display: none;
  }

  @media (min-width: 1200px) {

    /* left rail empty :: feed + right rail (the feed keeps a readable 900px and
       the pair is centred under the cover instead of the feed stretching to
       1000px+ or hugging the left edge) */
    .al-pf-layout:not(:has(.al-pf-side-a > *)) {
      grid-template-columns: minmax(0, 900px) minmax(0, 322px);
      justify-content: center;
    }

    .al-pf-layout:not(:has(.al-pf-side-a > *))>.al-pf-main {
      grid-column: 1;
      width: 100%;
      max-width: none;
    }

    .al-pf-layout:not(:has(.al-pf-side-a > *)) .al-pf-side-b {
      grid-column: 2;
    }

    /* right rail empty :: left rail + feed */
    .al-pf-layout:not(:has(.al-pf-side-b > *)) {
      grid-template-columns: minmax(0, 292px) minmax(0, 1fr);
    }

    /* both rails empty :: one centred reading column */
    .al-pf-layout:not(:has(.al-pf-side-a > *)):not(:has(.al-pf-side-b > *)) {
      grid-template-columns: minmax(0, 1fr);
    }

    .al-pf-layout:not(:has(.al-pf-side-a > *)):not(:has(.al-pf-side-b > *))>.al-pf-main {
      grid-column: 1;
      width: 100%;
      max-width: 760px;
      margin-inline: auto;
    }
  }

  @media (min-width: 768px) and (max-width: 1199.98px) {

    /* tablet: the panels stack next to the feed, so only a completely empty
       stack frees the second column */
    .al-pf-layout:not(:has(.al-pf-side-a > *)):not(:has(.al-pf-side-b > *)) {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

/* on wide screens the tab bar keeps natural tab widths (underline style, no stretching) */

/* 767px and down :: one column, feed first, then the panels */
@media (max-width: 767.98px) {
  .al-shell.al-pf-page {
    padding: 8px 10px 40px;
  }

  .al-pf-page .profile-cover-wrapper.al-pf-cover {
    height: 148px;
  }

  .al-pf-head {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 12px 14px;
    text-align: center;
  }

  .al-pf-page .profile-avatar-wrapper.al-pf-avatar {
    width: 96px;
    height: 96px;
    margin-top: -46px;
    padding: 4px;
    align-self: center;
  }

  .al-pf-page .profile-name-wrapper.al-pf-identity {
    flex: 0 0 auto;
    width: 100%;
    padding-top: 0;
    text-align: center;
  }

  .al-pf-name {
    justify-content: center;
    margin-bottom: 6px;
    font-size: 19px;
  }

  .al-pf-meta {
    justify-content: center;
  }

  .al-pf-chip {
    padding: 4px 10px;
    font-size: 11.5px;
  }

  .al-pf-page .profile-buttons-wrapper.al-pf-actions {
    justify-content: center;
    width: 100%;
    margin: 0 0 8px;
  }

  .al-pf-tabs {
    padding: 0 6px;
    gap: 2px;
  }

  .al-pf-tabs a {
    padding: 10px 8px;
    gap: 6px;
  }

  .al-pf-stats a {
    min-width: 82px;
    padding: 9px 6px;
  }

  .al-pf-stats b {
    font-size: 14px;
  }

  .al-pf-page .card-body {
    padding: 10px 13px 14px;
  }

  .al-pf-page .card-header {
    padding: 12px 13px 8px;
  }

  .al-pf-page .al-card-body.is-flush {
    padding: 10px 10px 12px;
  }

  .al-merits {
    gap: 6px;
  }

  .al-merit {
    padding: 8px 3px;
  }

  .al-merit b {
    font-size: 14px;
  }

  .al-pf-page .al-pf-view-row {
    margin-inline: 0;
  }
}

/* very small screens :: the avatar controls stack tighter */
@media (max-width: 420px) {
  .al-pf-page .profile-avatar-wrapper.al-pf-avatar .profile-avatar-change,
  .al-pf-page .profile-avatar-wrapper.al-pf-avatar .profile-avatar-crop,
  .al-pf-page .profile-avatar-wrapper.al-pf-avatar .profile-avatar-delete {
    font-size: 10.5px;
    padding: 4px 6px;
  }

  .al-pf-actions .btn {
    height: 36px;
    padding: 0 11px;
    font-size: 12.5px;
  }

  .al-pf-actions .btn-icon {
    width: 36px;
  }
}

/* small phones :: four to six counters still share one row, no sideways scroll */
@media (max-width: 479.98px) {
  .al-pf-stats a {
    min-width: 0;
    padding: 9px 3px;
  }

  .al-pf-stats b {
    font-size: 15px;
  }

  .al-pf-stats span {
    font-size: 10.5px;
    letter-spacing: 0;
    text-transform: none;
  }

  .al-pf-page .al-pf-tabs a .al-pf-tab-label {
    font-size: 11.5px;
  }
}



/* ==========================================================================
   Profile :: about, photos, pages & job seeker tool panels
   The rails flow with the page now, so every panel is reachable; these rules
   only shape that content (about card, media grid, entity cards, actions).
   ========================================================================== */

/* --------------------------------------------------------------------------
   About panel
   -------------------------------------------------------------------------- */

/* the collapsed biography fades out instead of ending on a half cut line */
.al-pf-page .about-bio {
  position: relative;
  display: block;
  margin-bottom: 12px;
  padding: 12px 14px 8px;
  border: 1px solid var(--al-border);
  border-radius: 12px;
  background: #f7f9fd;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.65;
  color: #3c4158;
  text-align: start;
  overflow-wrap: anywhere;
}

.al-pf-page .about-bio .js_readmore[data-readmore] {
  position: relative;
}

.al-pf-page .about-bio .js_readmore[data-readmore]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 32px;
  background: linear-gradient(rgba(247, 249, 253, 0), #f7f9fd 82%);
  pointer-events: none;
}

.al-pf-page .about-bio [data-readmore-toggle] {
  display: inline-block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--al-primary) !important;
  text-decoration: none !important;
}

.al-pf-page .about-bio [data-readmore-toggle]:hover {
  text-decoration: underline !important;
}

/* one aligned list: soft icon tile, single text line, faded divider */
.al-pf-page .about-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.al-pf-page .about-list li {
  padding: 7px 0;
  border-bottom: 1px dashed #e9edf8;
}

.al-pf-page .about-list li:first-child {
  padding-top: 0;
}

.al-pf-page .about-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.al-pf-page .about-list-item {
  min-height: 22px;
  padding-inline-start: 32px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.55;
  color: #4b5069;
  word-break: break-word;
}

.al-pf-page .about-list-item .svg-container {
  top: 1px;
  left: 0;
  width: 22px !important;
  height: 22px !important;
  padding: 4px;
  border-radius: 7px;
  background: var(--al-primary-soft);
  color: var(--al-primary);
  box-sizing: border-box;
}

.al-pf-page .about-list-item .svg-container svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.al-pf-page .about-list-item .details {
  margin-top: 1px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  color: #5b6478;
}

/* values (city, school, specialisation …) read in the text colour instead of
   the stray cyan text-info class bootstrap forces with !important */
.al-pf-page .about-list-item .text-info {
  color: var(--al-text) !important;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Search panel
   -------------------------------------------------------------------------- */

/* the button keeps its own width and the input takes the rest, so the group
   never spills out of the narrow panel */
.al-pf-page .al-pf-side .input-group,
.al-pf-page .al-pf-view-row .input-group {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
}

.al-pf-page .al-pf-side .input-group>.form-control,
.al-pf-page .al-pf-view-row .input-group>.form-control {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.al-pf-page .al-pf-side .input-group>.btn,
.al-pf-page .al-pf-view-row .input-group>.btn {
  flex: 0 0 auto;
  padding-inline: 16px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Photos :: one square tile scale for every photo grid on the profile
   (the bootstrap columns left the tiles one line taller than wide and put the
   pin / delete badges on a transparent background)
   -------------------------------------------------------------------------- */

.al-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.al-media-grid>* {
  width: auto !important;
  max-width: none;
  flex: none;
  min-width: 0;
  margin: 0;
  padding: 0 !important;
}

/* the narrow rail keeps a fixed three across */
.al-media-grid.al-media-grid-sm {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.al-pf-page .panel-photos .pg_photo,
.al-pf-page .panel-photos .pg_photo.large {
  height: auto;
  min-height: 0;
  padding-top: 0;
  aspect-ratio: 1 / 1;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(16, 17, 47, .07);
  transition: box-shadow .18s, filter .18s;
}

.al-pf-page .panel-photos .pg_photo:hover,
.al-pf-page .panel-photos .pg_photo:focus-visible {
  filter: brightness(1.04);
  box-shadow: inset 0 0 0 1px rgba(84, 38, 239, .3), 0 6px 16px rgba(16, 17, 47, .14);
}

.al-pf-page .panel-photos .pg_photo-pin-btn {
  top: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  background: rgba(16, 17, 47, .55);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(16, 17, 47, .25);
}

.al-pf-page .panel-photos .pg_photo-pin-btn.pinned {
  background: var(--al-primary);
}

.al-pf-page .panel-photos .pg_photo-delete-btn {
  top: 6px;
  right: 6px;
  left: auto;
}

.al-pf-page .panel-photos .pg_photo-delete-btn .btn-close {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  background-color: rgba(16, 17, 47, .6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 9px;
  box-shadow: 0 2px 6px rgba(16, 17, 47, .25);
  opacity: 1;
  filter: none;
}

.al-pf-page .panel-photos .pg_photo-delete-btn .btn-close:hover {
  background-color: var(--al-danger);
}

/* --------------------------------------------------------------------------
   Pages / groups / events :: entity cards
   -------------------------------------------------------------------------- */

.al-entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.al-entity-grid>* {
  width: auto !important;
  max-width: none;
  flex: none;
  min-width: 0;
  margin: 0;
  padding: 0 !important;
}

/* the theme ui-box hangs the avatar 50px above the box; on the profile it
   becomes a plain card: avatar, name, likes, action */
.al-pf-page .ui-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  height: 100%;
  margin: 0;
  padding: 16px 14px;
  border: 1px solid var(--al-border);
  border-radius: 14px;
  background: #fbfcff;
  text-align: center;
}

.al-pf-page .ui-box.darker {
  background: #f7f9fd;
}

.al-pf-page .ui-box .img {
  position: static;
  transform: none;
  margin: 0 0 10px;
  padding: 0;
  background: transparent;
  border-radius: 50%;
}

.al-pf-page .ui-box img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(16, 17, 47, .12);
}

.al-pf-page .ui-box .h6 {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--al-text) !important;
  text-decoration: none !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-pf-page .ui-box .h6:hover {
  color: var(--al-primary) !important;
}

.al-pf-page .ui-box .mt10 {
  margin-top: 6px !important;
  font-size: 11.5px;
  line-height: 1.5;
  color: #5b6478;
}

/* the action row sits at the bottom so a row of cards lines up */
.al-pf-page .ui-box>*:last-child {
  margin-top: auto !important;
  padding-top: 10px;
}

.al-pf-page .ui-box .btn {
  min-height: 30px;
  padding: 5px 14px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  box-shadow: none !important;
}


/* --------------------------------------------------------------------------
   Rail :: people circles (friends, subscribers, pages, groups, events)
   -------------------------------------------------------------------------- */

.al-people-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.al-people-grid>* {
  width: auto !important;
  max-width: none;
  flex: none;
  min-width: 0;
  margin: 0;
  padding: 0 !important;
}

.al-pf-page .al-pf-side .circled-user-box {
  margin: 0;
}

.al-pf-page .al-pf-side .circled-user-box .user-box {
  margin: 0;
}

/* the name sits under the circle instead of floating over the next row */
.al-pf-page .al-pf-side .circled-user-box .user-box .name {
  position: static;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  color: #4b5069;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-pf-page .al-pf-side .circled-user-box .user-box img {
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--al-border);
  transition: box-shadow .18s;
}

.al-pf-page .al-pf-side .circled-user-box .user-box:hover img {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--al-primary);
}

/* --------------------------------------------------------------------------
   Rail :: employment, skills & CV actions
   -------------------------------------------------------------------------- */

.al-pf-page .al-entry-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #e9edf8;
}

.al-pf-page .al-entry-actions .al-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 11.5px;
}

.al-pf-page .al-entry-actions .al-inline-form {
  display: flex;
  margin: 0;
}

.al-pf-page .al-entry-actions .al-btn-ghost {
  background: #fff;
  border-color: #f2dbe1;
  color: var(--al-danger) !important;
}

.al-pf-page .al-entry-actions .al-btn-ghost:hover,
.al-pf-page .al-entry-actions .al-btn-ghost:focus-visible {
  background: #fdf3f5;
  border-color: var(--al-danger);
  color: var(--al-danger) !important;
}

.al-pf-page .al-entry-actions .al-btn .svg-container,
.al-pf-page .al-entry-actions .al-btn i {
  width: 12px !important;
  height: 12px !important;
  font-size: 11px;
}

.al-pf-page .al-chips {
  margin: 2px 0 10px;
}

/* the remove chip is a real target, not an 8px × */
.al-pf-page .al-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px 5px 10px;
}

.al-pf-page .al-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0 0 0 4px;
  padding: 0;
  border-radius: 50%;
  background: #e4e7f4;
  color: #4d5871;
  font-size: 13px;
  line-height: 1;
  opacity: 1;
  transition: background .15s, color .15s;
}

.al-pf-page .al-chip-x:hover,
.al-pf-page .al-chip-x:focus-visible {
  background: var(--al-danger);
  color: #fff;
}

/* add skill :: input + button share one row at every width */
.al-pf-page .al-skill-add {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.al-pf-page .al-skill-add .form-control {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  border-color: var(--al-border);
  border-radius: 9px;
  font-size: 12.5px;
}

.al-pf-page .al-skill-add .form-control:focus {
  border-color: var(--al-primary);
  box-shadow: 0 0 0 3px var(--al-primary-soft);
}

.al-pf-page .al-skill-add .al-btn {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 12px;
}

/* CV :: replace + delete share the row under the file */
.al-pf-page .al-cv-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.al-pf-page .al-cv-actions>.al-btn {
  flex: 1 1 auto;
  height: 38px;
  border-radius: 9px;
  font-size: 12.5px;
}

.al-pf-page .al-cv-actions>.al-inline-form {
  display: flex;
  flex: 0 0 auto;
  margin: 0;
}

.al-pf-page .al-cv-actions .al-btn-ghost {
  height: 38px;
  padding: 0 14px;
  border-color: #f2dbe1;
  color: var(--al-danger) !important;
}

.al-pf-page .al-cv-actions .al-btn-ghost:hover,
.al-pf-page .al-cv-actions .al-btn-ghost:focus-visible {
  background: #fdf3f5;
  border-color: var(--al-danger);
  color: var(--al-danger) !important;
}


/* --------------------------------------------------------------------------
   Panel grids :: responsive scale
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .al-entity-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
  }
}

@media (max-width: 767.98px) {

  /* one phone column: three square photos per row, two entity cards */
  .al-media-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .al-entity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .al-people-grid {
    gap: 12px 6px;
  }

  .al-pf-page .about-bio {
    padding: 10px 12px 8px;
  }

  .al-pf-page .about-list-item {
    padding-inline-start: 30px;
  }
}

@media (max-width: 420px) {
  .al-media-grid {
    gap: 6px;
  }

  .al-entity-grid {
    gap: 8px;
  }

  .al-pf-page .ui-box {
    padding: 14px 10px;
  }

  .al-pf-page .ui-box img {
    width: 56px;
    height: 56px;
  }

  .al-pf-page .al-cv-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .al-pf-page .al-cv-actions>.al-inline-form {
    flex: 1 1 auto;
  }

  .al-pf-page .al-cv-actions .al-btn-ghost {
    width: 100%;
  }
}


/* ==========================================================================
   Admin - Static page header settings
   ========================================================================== */

.al-hdr-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 18px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #7b819b;
}

.al-hdr-sep::before,
.al-hdr-sep::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: #e8eaf5;
}

.al-hdr-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.al-hdr-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #e6e8f4;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.al-hdr-choice:hover {
  border-color: #c9c2ff;
}

.al-hdr-choice.is-active {
  border-color: var(--al-primary);
  background: #faf9ff;
  box-shadow: 0 0 0 3px rgba(84, 38, 239, .10);
}

.al-hdr-choice input {
  flex: 0 0 auto;
  margin-top: 3px;
}

.al-hdr-choice-swatch {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(16, 17, 47, .08);
  background-size: cover;
  background-position: center;
}

.al-hdr-choice-swatch-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f3fb;
  color: #7b819b;
  font-size: 15px;
}

.al-hdr-choice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.al-hdr-choice-text b {
  font-size: 13.5px;
  color: var(--al-ink);
}

.al-hdr-choice-text small {
  font-size: 12px;
  line-height: 1.45;
  color: #6b7290;
}

.al-hdr-color {
  flex: 0 0 56px;
  max-width: 56px;
  padding: 4px;
  cursor: pointer;
}

.al-hdr-upload {
  height: 168px;
}

.al-hdr-upload .x-uploader {
  padding-top: 66px;
}

.al-hdr-upload .x-image-loader {
  padding-top: 58px;
}

.al-hdr-preview {
  position: relative;
  overflow: hidden;
  padding: 18px 20px 20px;
  border-radius: 12px;
  border: 1px solid rgba(16, 17, 47, .06);
  background-image: linear-gradient(135deg, #5426ef, #6f8cff);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}

.al-hdr-preview::after {
  content: '';
  position: absolute;
  inset-block-start: -60px;
  inset-inline-end: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.al-hdr-preview-crumbs {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 11px;
  font-weight: 600;
  opacity: .82;
}

.al-hdr-preview-title {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 6px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.3px;
}

.al-hdr-preview-desc {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  opacity: .82;
}

.al-hdr-swatch {
  display: inline-block;
  width: 34px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(16, 17, 47, .10);
  background-size: cover;
  background-position: center;
  vertical-align: middle;
}

body.night-mode .al-hdr-sep {
  color: #8f93b2;
}

body.night-mode .al-hdr-sep::before,
body.night-mode .al-hdr-sep::after {
  background: #2b2f4a;
}

body.night-mode .al-hdr-choice {
  background: #1b1d31;
  border-color: #2b2f4a;
}

body.night-mode .al-hdr-choice.is-active {
  background: #221d3d;
  border-color: #7c66ff;
  box-shadow: 0 0 0 3px rgba(124, 102, 255, .16);
}

body.night-mode .al-hdr-choice-text b {
  color: #f2f0ff;
}

body.night-mode .al-hdr-choice-text small {
  color: #a4a8c4;
}

body.night-mode .al-hdr-choice-swatch-icon {
  background: #24263d;
  color: #a4a8c4;
}

body.night-mode .al-hdr-swatch {
  border-color: rgba(255, 255, 255, .14);
}

@media (max-width: 575.98px) {
  .al-hdr-choices {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ==========================================================================
   Blog studio :: create new blog & edit blog
   The two pages share one column: a gradient intro panel, a sectioned form
   card and an action bar that sticks to the bottom on desktop. Only new
   .al- classes are used, the Sngine form controls stay untouched so the
   AJAX publisher (core.js) keeps finding its fields.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Intro panel :: breadcrumbs, title, description & page actions
   -------------------------------------------------------------------------- */

.al-blog-hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 20px 22px;
  border-radius: var(--al-radius);
  background: linear-gradient(120deg, #2c1a86 0%, #5426ef 58%, #7d5bff 100%);
  color: #fff;
  box-shadow: var(--al-shadow-lg);
  overflow: hidden;
}

/* soft light blob, purely decorative */
.al-blog-hero::after {
  content: '';
  position: absolute;
  inset-block-start: -90px;
  inset-inline-end: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 68%);
  pointer-events: none;
}

.al-blog-hero-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.al-blog-hero-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .16);
}

.al-blog-hero-icon .main-icon {
  width: 24px !important;
  height: 24px !important;
  color: #fff;
}

.al-blog-hero-text {
  min-width: 0;
}

.al-blog-hero-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, .78);
}

.al-blog-hero-crumbs a {
  color: rgba(255, 255, 255, .92) !important;
  text-decoration: none;
}

.al-blog-hero-crumbs a:hover {
  color: #fff !important;
  text-decoration: underline;
}

.al-blog-hero-crumbs i {
  font-size: 8px;
  opacity: .65;
}

.al-blog-hero-crumbs span {
  color: #fff;
}

.al-blog-hero-title {
  margin: 6px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.3px;
  color: #fff;
}

.al-blog-hero-desc {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}

.al-blog-hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.al-blog-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 10px;
  background: rgba(255, 255, 255, .14);
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  transition: background .15s, border-color .15s;
}

.al-blog-hero-btn:hover,
.al-blog-hero-btn:focus {
  border-color: rgba(255, 255, 255, .44);
  background: rgba(255, 255, 255, .24);
}

.al-blog-hero-btn .main-icon {
  color: #fff;
}

/* the AI label sits on a coloured panel now, so drop the gradient fill */
.al-blog-hero-btn .text-gradient {
  background: none;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

/* --------------------------------------------------------------------------
   Form card :: one card, split in titled sections
   -------------------------------------------------------------------------- */

.al-blog-card {
  position: relative;
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius);
  background: var(--al-card);
  box-shadow: var(--al-shadow);
}

.al-blog-body {
  padding: 4px 22px;
}

.al-blog-section {
  padding: 18px 0;
  border-bottom: 1px solid var(--al-border);
}

.al-blog-section:last-of-type {
  border-bottom: 0;
}

.al-blog-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.al-blog-section-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--al-primary-soft);
  color: var(--al-primary);
  font-size: 13px;
}

.al-blog-section-text {
  min-width: 0;
}

.al-blog-section-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--al-ink);
}

.al-blog-section-hint {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #6b7290;
}

/* --------------------------------------------------------------------------
   Fields :: stacked labels (they stay readable on narrow screens)
   -------------------------------------------------------------------------- */

.al-blog-field {
  margin-bottom: 14px;
}

.al-blog-field:last-child {
  margin-bottom: 0;
}

.al-blog-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #42496b;
}

.al-blog-label-hint,
.al-blog-field-hint {
  font-size: 11.5px;
  font-weight: 500;
  color: #8a90ab;
}

.al-blog-field-hint {
  margin-top: 6px;
  line-height: 1.45;
}

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

.al-blog-grid .al-blog-field {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Cover uploader :: the shared .x-image box, widened to a banner
   -------------------------------------------------------------------------- */

.al-blog-cover .x-image {
  width: 100%;
  height: 190px;
  border: 1px dashed #d3d7ea;
  border-radius: 12px;
  background-color: #f7f8fd;
}

.al-blog-cover .x-image .x-uploader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.al-blog-cover .x-image .js_x-uploader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--al-primary);
  font-size: 17px;
  box-shadow: 0 6px 18px rgba(16, 17, 47, .14);
  cursor: pointer;
  transition: transform .15s;
}

.al-blog-cover .x-image .js_x-uploader:hover {
  transform: translateY(-1px);
}

/* an existing cover keeps the camera out of the way until hover */
.al-blog-cover.has-image .x-image .x-uploader {
  opacity: 0;
  transition: opacity .18s;
}

.al-blog-cover.has-image .x-image:hover .x-uploader {
  opacity: 1;
}

/* touch screens have no hover, so the change control stays visible */
@media (hover: none) {
  .al-blog-cover.has-image .x-image .x-uploader {
    opacity: 1;
  }
}

.al-blog-cover .x-image-loader {
  padding-top: 0;
}

.al-blog-cover .x-image-loader .x-progress {
  position: absolute;
  inset-inline: 24px;
  top: calc(50% - 2px);
  margin: 0;
}

.al-blog-cover .x-image button.btn-close {
  top: 10px;
  right: 10px;
  padding: 8px;
  border-radius: 50%;
  background-color: #fff;
  opacity: .95;
  box-shadow: 0 2px 8px rgba(16, 17, 47, .18);
}

.al-blog-cover .x-image button.btn-close:hover {
  opacity: 1;
}

html[dir="RTL"] .al-blog-cover .x-image button.btn-close {
  right: auto;
  left: 10px;
}

/* --------------------------------------------------------------------------
   Editor :: TinyMCE frame follows the card surface
   -------------------------------------------------------------------------- */

.al-blog-editor .tox-tinymce {
  border-color: #dfe3f0 !important;
  border-radius: 10px !important;
}

.al-blog-editor .tox .tox-toolbar-overlord,
.al-blog-editor .tox .tox-toolbar__primary,
.al-blog-editor .tox .tox-menubar {
  background-color: #f8f9fe !important;
}

.al-blog-editor .tox .tox-statusbar {
  border-top-color: #eceefa !important;
}

/* --------------------------------------------------------------------------
   Publish to :: the theme radio cards, compacted into a segmented picker
   -------------------------------------------------------------------------- */

.al-blog-publish {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.al-blog-publish .button-label {
  flex: 1 1 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 240px;
  margin: 0;
  padding: 14px 10px;
  border-radius: 12px;
  background: #fbfbff;
  color: #4a5174;
  box-shadow: 0 0 0 1px #e7e9f6;
  text-align: center;
}

.al-blog-publish .button-label .icon {
  width: 38px;
  height: 38px;
  margin: 0;
  background: #eef0fb;
}

.al-blog-publish .button-label .title {
  margin-top: 0;
  font-size: 12.5px;
  font-weight: 600;
}

.al-blog-publish .button-label:hover {
  box-shadow: 0 0 0 2px #c9c2ff;
}

.al-blog-publish .input-label:checked+.button-label,
.al-blog-publish .input-label:checked+.button-label:hover {
  background: var(--al-primary-soft);
  color: var(--al-primary);
  box-shadow: 0 0 0 2px var(--al-primary);
}

/* --------------------------------------------------------------------------
   References :: light cards, title & link side by side
   -------------------------------------------------------------------------- */

.al-blog-refs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.al-blog-refs:not(:empty) {
  margin-bottom: 10px;
}

.al-blog-ref {
  padding: 12px;
  border: 1px solid var(--al-border);
  border-radius: 12px;
  background: #fbfbff;
}

.al-blog-ref-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

/* the shared "add" link becomes a dashed button */
.al-blog-section .add-auto-connect-node {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px dashed #cdd2e8;
  border-radius: 10px;
  color: var(--al-primary);
  font-size: 12.5px;
  font-weight: 600;
}

.al-blog-section .add-auto-connect-node:hover {
  border-color: var(--al-primary);
  background: var(--al-primary-soft);
}

/* --------------------------------------------------------------------------
   Options :: tips / subscribers / paid / collaborative switches
   -------------------------------------------------------------------------- */

.al-blog-switches .al-blog-switch {
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--al-border);
  border-radius: 12px;
  background: #fbfcff;
}

.al-blog-switches .al-blog-switch.disabled {
  opacity: .55;
}

.al-blog-switches .al-blog-switch .form-label {
  font-size: 13.5px;
  color: var(--al-ink);
}

/* --------------------------------------------------------------------------
   Paid blogs note
   -------------------------------------------------------------------------- */

.al-blog-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid #f4d9ae;
  border-radius: 12px;
  background: var(--al-warn-soft);
  color: #8a5a0d;
  font-size: 12.5px;
  line-height: 1.5;
}

.al-blog-note-icon {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--al-warn);
}

/* --------------------------------------------------------------------------
   Action bar :: cancel / delete left, publish right, sticky on desktop
   -------------------------------------------------------------------------- */

.al-blog-actions {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--al-border);
  border-radius: 0 0 var(--al-radius) var(--al-radius);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
}

.al-blog-actions-main {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-inline-start: auto;
}

.al-blog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.al-blog-btn-primary {
  border-color: var(--al-primary);
  background: var(--al-primary);
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(84, 38, 239, .24);
}

.al-blog-btn-primary:hover {
  border-color: var(--al-primary-dark);
  background: var(--al-primary-dark);
  color: #fff !important;
}

.al-blog-btn-ghost {
  border-color: #dfe2f2;
  background: #fff;
  color: #4a5174 !important;
}

.al-blog-btn-ghost:hover {
  border-color: #c9cde4;
  background: #f5f6fd;
}

.al-blog-btn-danger {
  border-color: #f7c2ce;
  background: var(--al-danger-soft);
  color: var(--al-danger) !important;
}

.al-blog-btn-danger:hover {
  border-color: #f2aebd;
  background: #ffe2e8;
}

/* button_status() swaps the label for a spinner while saving */
.al-blog-btn[disabled] {
  opacity: .7;
  cursor: default;
}

/* the AJAX error alert keeps .alert.alert-danger, only its edge is softened */
.al-blog-alert {
  margin: 0 0 14px;
  border-radius: 12px;
}

/* --------------------------------------------------------------------------
   Night mode :: same structure, dark surfaces
   -------------------------------------------------------------------------- */

body.night-mode .al-blog-card {
  border-color: var(--card-dark-divider);
  background: var(--card-dark-color);
}

body.night-mode .al-blog-actions {
  border-top-color: var(--card-dark-divider);
  background: rgba(38, 45, 52, .96);
}

body.night-mode .al-blog-section {
  border-bottom-color: var(--card-dark-divider);
}

body.night-mode .al-blog-section-icon {
  background: rgba(124, 102, 255, .16);
  color: #b3a5ff;
}

body.night-mode .al-blog-section-title,
body.night-mode .al-blog-label,
body.night-mode .al-blog-switches .al-blog-switch .form-label {
  color: #eef1f8;
}

body.night-mode .al-blog-section-hint,
body.night-mode .al-blog-label-hint,
body.night-mode .al-blog-field-hint {
  color: #9fb3c8;
}

body.night-mode .al-blog-cover .x-image {
  border-color: var(--card-dark-divider);
  background-color: var(--card-dark-input);
}

body.night-mode .al-blog-cover .x-image .js_x-uploader {
  background: #22282e;
  color: #b3a5ff;
  box-shadow: none;
}

body.night-mode .al-blog-cover .x-image button.btn-close {
  background-color: #22282e;
}

body.night-mode .al-blog-editor .tox-tinymce {
  border-color: var(--card-dark-divider) !important;
}

body.night-mode .al-blog-editor .tox .tox-toolbar-overlord,
body.night-mode .al-blog-editor .tox .tox-toolbar__primary,
body.night-mode .al-blog-editor .tox .tox-menubar {
  background-color: #1e252b !important;
}

body.night-mode .al-blog-publish .button-label {
  background: var(--card-dark-input);
  color: var(--body-color-dark);
  box-shadow: 0 0 0 1px var(--card-dark-divider);
}

body.night-mode .al-blog-publish .button-label .icon {
  background: #202f3a;
}

body.night-mode .al-blog-publish .input-label:checked+.button-label {
  background: rgba(124, 102, 255, .16);
  color: #b3a5ff;
  box-shadow: 0 0 0 2px #7c66ff;
}

body.night-mode .al-blog-ref,
body.night-mode .al-blog-switches .al-blog-switch {
  border-color: var(--card-dark-divider);
  background: var(--card-dark-input);
}

body.night-mode .al-blog-section .add-auto-connect-node {
  border-color: var(--card-dark-divider);
  color: #b3a5ff;
}

body.night-mode .al-blog-section .add-auto-connect-node:hover {
  border-color: #7c66ff;
  background: rgba(124, 102, 255, .16);
}

body.night-mode .al-blog-note {
  border-color: #4a3b25;
  background: rgba(188, 115, 17, .14);
  color: #e8c58b;
}

body.night-mode .al-blog-btn-ghost {
  border-color: var(--card-dark-divider);
  background: transparent;
  color: var(--body-color-dark) !important;
}

body.night-mode .al-blog-btn-ghost:hover {
  border-color: #3c4a58;
  background: var(--card-dark-hover);
}

body.night-mode .al-blog-btn-danger {
  border-color: rgba(237, 66, 102, .35);
  background: rgba(237, 66, 102, .14);
}

/* --------------------------------------------------------------------------
   Responsive :: tablet keeps the paddings, phones stack everything
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .al-blog-body {
    padding: 4px 16px;
  }

  .al-blog-actions {
    padding: 12px 16px;
  }
}

@media (max-width: 767.98px) {
  .al-blog-hero {
    padding: 16px;
    border-radius: 14px;
  }

  .al-blog-hero-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .al-blog-hero-title {
    font-size: 17px;
  }

  .al-blog-hero-actions {
    width: 100%;
  }

  .al-blog-hero-btn {
    flex: 1 1 auto;
  }

  .al-blog-section {
    padding: 15px 0;
  }

  .al-blog-grid,
  .al-blog-ref-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .al-blog-cover .x-image {
    height: 150px;
  }

  /* the fixed bottom bar owns the bottom edge on phones */
  .al-blog-actions {
    position: static;
  }

  .al-blog-actions .al-blog-btn {
    flex: 1 1 auto;
  }

  .al-blog-actions-main {
    width: 100%;
    margin-inline-start: 0;
  }
}

@media (max-width: 575.98px) {
  .al-blog-publish .button-label {
    flex: 1 1 calc(50% - 10px);
  }

  .al-blog-hero-crumbs a {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}







/* ==========================================================================
   Night mode :: base surfaces, muted copy, forms & buttons
   ========================================================================== */

body.night-mode {
  --al-primary: #8168ff;
  --al-primary-dark: #6b52ff;
  --al-ink: #eef1f8;
  --al-bg: var(--body-bg-color-dark, #1e252b);
  --al-card: var(--card-dark-color, #262d34);
  --al-border: var(--card-dark-divider, #2e3f4d);
  --al-text: var(--body-color-dark, #c1d4e3);
  --al-primary-soft: #2a2459;
  --al-accent-soft: #14332b;
  --al-warn-soft: #3a2c14;
  --al-danger-soft: #3b1a24;
  --al-shadow: 0 1px 2px rgba(0, 0, 0, .38), 0 1px 3px rgba(0, 0, 0, .3);
  --al-shadow-lg: 0 14px 34px rgba(0, 0, 0, .48);
}

body.night-mode.al-theme {
  background: var(--al-bg);
  color: var(--al-text);
}

/* -- muted copy on dark surfaces ------------------------------------------ */

body.night-mode .al-empty,
body.night-mode .al-card-sub,
body.night-mode .al-cat-text small,
body.night-mode .al-cat-card-sub,
body.night-mode .al-course-meta,
body.night-mode .al-event-sub,
body.night-mode .al-company-meta,
body.night-mode .al-entry-sub,
body.night-mode .al-entry-note,
body.night-mode .al-list-sub,
body.night-mode .al-tool small,
body.night-mode .al-type-text small,
body.night-mode .al-strength-val small,
body.night-mode .al-nav-panel-sub,
body.night-mode .al-nav-empty,
body.night-mode .al-profile-headline,
body.night-mode .al-profile-loc,
body.night-mode .al-profile-stats span,
body.night-mode .al-pf-page .al-pf-head-note,
body.night-mode .al-pf-stats span,
body.night-mode .al-merit span,
body.night-mode .al-checks label,
body.night-mode .al-seg button,
body.night-mode .al-pf-side .al-card-body .mb5 span[style*="line-through"],
body.night-mode .al-pf-side .al-card-body .mb5.mt10 strong {
  color: #9fb3c8;
}

body.night-mode .al-seg button.active {
  color: #b3a5ff;
  box-shadow: inset 0 -2px 0 #b3a5ff;
}

body.night-mode .al-checks label:hover {
  color: #e6ecf3;
}

/* -- light chips, tiles and rails ----------------------------------------- */

body.night-mode .al-cat-count {
  background: #2b3843;
  color: #d5e2ec;
}

body.night-mode .al-pf-chip {
  background: #2b3843;
  border-color: #364855;
  color: #d5e2ec;
}

body.night-mode .al-pf-chip>span {
  color: inherit;
}

body.night-mode .al-cat-row {
  border-bottom-color: #2e3f4d;
}

body.night-mode .al-cat-row:hover {
  background: #2b3843;
}

body.night-mode .al-exp-head {
  background: linear-gradient(90deg, #2a2459, rgba(255, 255, 255, 0));
}

body.night-mode .al-pf-stats,
body.night-mode .al-merit {
  background: #1e252b;
}

body.night-mode .al-btn-ghost {
  background: var(--card-dark-input);
  border-color: var(--al-border);
  color: var(--al-text) !important;
}

body.night-mode .al-btn-ghost:hover {
  background: var(--card-dark-hover);
  border-color: #3d4f5d;
}

body.night-mode .al-profile-avatar img {
  border-color: var(--al-card);
}

body.night-mode .al-profile-avatar .al-profile-online {
  border-color: var(--al-card);
}

body.night-mode .al-company-logo {
  border-color: rgba(255, 255, 255, .12);
}

body.night-mode .al-pf-page .see-more {
  background: #1e252b;
  border-color: #3c4560;
  color: #b3a5ff;
}

body.night-mode .al-pf-actions .btn-light,
body.night-mode .al-pf-actions .btn-light:hover,
body.night-mode .al-pf-actions .btn-light:focus,
body.night-mode .al-pf-actions .btn-light.show {
  background: #1e252b;
  border-color: var(--al-border);
  color: var(--al-text);
}

body.night-mode .al-pf-page .al-entry-actions .al-btn-ghost {
  background: #33202a;
  border-color: #4a2b36;
  color: #ff8fa6 !important;
}

body.night-mode .al-blog-editor .tox .tox-statusbar {
  background-color: #1e252b;
  border-top-color: var(--card-dark-divider) !important;
  color: #9fb3c8;
}


/* -- core form controls ---------------------------------------------------- */

body.night-mode .form-control,
body.night-mode .form-select {
  background-color: var(--card-dark-input);
  border-color: var(--card-dark-divider);
  color: var(--card-dark-input-color);
}

body.night-mode .form-control:focus,
body.night-mode .form-select:focus {
  background-color: #232b32;
  border-color: #4b6172;
  color: #fff;
  box-shadow: 0 0 0 .2rem rgba(94, 114, 228, .22);
}

body.night-mode .form-control::placeholder,
body.night-mode .form-control::-webkit-input-placeholder {
  color: #8fa3b4;
  opacity: 1;
}

body.night-mode .form-select option,
body.night-mode .form-control option {
  background-color: var(--card-dark-color);
  color: var(--card-dark-input-color);
}

body.night-mode .input-group-text {
  background-color: var(--card-dark-color);
  border-color: var(--card-dark-divider);
  color: var(--body-color-dark);
}

body.night-mode .form-check-input {
  background-color: #232b32;
  border-color: #4a5c6b;
}

body.night-mode .form-check-input:checked {
  background-color: var(--al-primary);
  border-color: var(--al-primary);
}

body.night-mode .form-label,
body.night-mode .form-text {
  color: var(--body-color-dark);
}

/* -- buttons --------------------------------------------------------------- */

body.night-mode .btn-light,
body.night-mode .btn-light:focus {
  background-color: var(--card-dark-hover);
  border-color: var(--card-dark-divider);
  color: var(--body-color-dark);
}

body.night-mode .btn-light:hover,
body.night-mode .btn-light:active,
body.night-mode .btn-light.show {
  background-color: #354552;
  border-color: #41525f;
  color: #fff;
}

body.night-mode .btn-outline-secondary,
body.night-mode .btn-outline-dark {
  border-color: #46586a;
  color: var(--body-color-dark);
}

body.night-mode .btn-outline-secondary:hover,
body.night-mode .btn-outline-dark:hover {
  background-color: var(--card-dark-hover);
  border-color: #55697a;
  color: #fff;
}

body.night-mode .btn-outline-primary {
  border-color: #4b3f86;
  color: #b3a5ff;
}

body.night-mode .btn-outline-primary:hover,
body.night-mode .btn-outline-primary:focus {
  background-color: #2a2459;
  border-color: #6a55c9;
  color: #e6e0ff;
}

body.night-mode .btn-close {
  filter: invert(1) grayscale(1) brightness(1.6);
}

/* -- tables --------------------------------------------------------------- */

body.night-mode .table {
  --bs-table-color: var(--body-color-dark);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--card-dark-divider);
  --bs-table-striped-color: var(--body-color-dark);
  --bs-table-striped-bg: rgba(255, 255, 255, .03);
  --bs-table-hover-color: #fff;
  --bs-table-hover-bg: rgba(255, 255, 255, .05);
  color: var(--body-color-dark);
}


/* -- menus, tabs, pagination, modals -------------------------------------- */

body.night-mode .dropdown-menu {
  background-color: var(--card-dark-color);
  border-color: var(--card-dark-divider);
}

body.night-mode .dropdown-item {
  color: var(--body-color-dark);
}

body.night-mode .dropdown-item:hover,
body.night-mode .dropdown-item:focus {
  background-color: var(--card-dark-hover);
  color: #fff;
}

body.night-mode .dropdown-header {
  color: #8fa3b4;
}

body.night-mode .dropdown-divider {
  border-top-color: var(--card-dark-divider);
}

body.night-mode .nav-tabs {
  border-bottom-color: var(--card-dark-divider);
}

body.night-mode .nav-tabs .nav-link {
  color: #9fb3c8;
}

body.night-mode .nav-tabs .nav-link:hover,
body.night-mode .nav-tabs .nav-link:focus {
  border-color: transparent transparent transparent;
  color: #fff;
}

body.night-mode .nav-tabs .nav-link.active {
  background-color: var(--card-dark-color);
  border-color: var(--card-dark-divider) var(--card-dark-divider) var(--card-dark-color);
  color: #fff;
}

body.night-mode .nav-pills .nav-link:not(.active) {
  color: #9fb3c8;
}

body.night-mode .page-link {
  background-color: var(--card-dark-color);
  border-color: var(--card-dark-divider);
  color: var(--body-color-dark);
}

body.night-mode .page-link:hover {
  background-color: var(--card-dark-hover);
  border-color: #3d4f5d;
  color: #fff;
}

body.night-mode .page-item.disabled .page-link {
  background-color: #1e252b;
  border-color: var(--card-dark-divider);
  color: #6d7f8f;
}

body.night-mode .modal-content,
body.night-mode .offcanvas,
body.night-mode .toast,
body.night-mode .popover {
  background-color: var(--card-dark-color);
  border-color: var(--card-dark-divider);
  color: var(--body-color-dark);
}

body.night-mode .modal-header,
body.night-mode .modal-footer {
  border-color: var(--card-dark-divider);
}

body.night-mode .list-group-item {
  background-color: var(--card-dark-color);
  border-color: var(--card-dark-divider);
  color: var(--body-color-dark);
}

body.night-mode .accordion-item {
  background-color: var(--card-dark-color);
  border-color: var(--card-dark-divider);
  color: var(--body-color-dark);
}

body.night-mode .accordion-button {
  background-color: var(--card-dark-color);
  color: var(--body-color-dark);
}

body.night-mode .accordion-button:not(.collapsed) {
  background-color: var(--card-dark-hover);
  color: #fff;
}

body.night-mode .progress {
  background-color: #1e252b;
}

/* -- select2 (Sngine core selectors) -------------------------------------- */

body.night-mode .select2-container--default .select2-selection--single,
body.night-mode .select2-container--default .select2-selection--multiple {
  background-color: var(--card-dark-input);
  border-color: var(--card-dark-divider);
  color: var(--card-dark-input-color);
}

body.night-mode .select2-container--default .select2-selection--single .select2-selection__rendered,
body.night-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
  color: var(--card-dark-input-color);
}

body.night-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--card-dark-hover);
  border-color: var(--card-dark-divider);
}

body.night-mode .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #9fb3c8 transparent transparent;
}

body.night-mode .select2-dropdown {
  background-color: var(--card-dark-color);
  border-color: var(--card-dark-divider);
}

body.night-mode .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--card-dark-hover);
  color: #fff;
}

body.night-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--al-primary);
  color: #fff;
}

body.night-mode .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--card-dark-input);
  border-color: var(--card-dark-divider);
  color: var(--card-dark-input-color);
}


/* -- secondary / tertiary text -------------------------------------------- */

body.night-mode .al-tabs a:not(.active),
body.night-mode .al-pf-tabs a:not(.active),
body.night-mode .al-pf-page .nav-tabs .nav-link:not(.active),
body.night-mode .al-pf-page .about-list li,
body.night-mode .al-pf-page .about-list-item,
body.night-mode .al-pf-page .card-body>.mb5,
body.night-mode .al-pf-page .al-card-body>.mb5,
body.night-mode .al-pf-page .circled-user-box .user-box .name,
body.night-mode .al-pf-page .al-pf-side .circled-user-box .user-box .name,
body.night-mode .al-job-company,
body.night-mode .al-section-hint,
body.night-mode .al-type-box span,
body.night-mode .al-type-hint,
body.night-mode .al-field-help,
body.night-mode .al-person-role {
  color: #9fb3c8 !important;
}

body.night-mode .al-tabs a:not(.active):hover,
body.night-mode .al-pf-tabs a:not(.active):hover {
  color: #e6ecf3 !important;
}

body.night-mode .al-tabs a.active,
body.night-mode .al-pf-tabs a.active {
  color: #b3a5ff !important;
  border-bottom-color: #b3a5ff;
}

body.night-mode .al-pf-page .about-list li>strong,
body.night-mode .al-pf-page .al-pf-side .circled-user-box .user-box .name {
  color: #e6ecf3 !important;
}

/* -- dashboard rails ------------------------------------------------------- */

body.night-mode .al-single-image {
  background: #1e252b;
}

body.night-mode .al-single-image.is-linked:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
}

body.night-mode .al-video {
  background: #141a1f;
}

body.night-mode .al-video-empty {
  color: #9fb3c8;
}

/* -- rich text editor (TinyMCE) ------------------------------------------- */

body.night-mode .tox .tox-editor-header,
body.night-mode .tox .tox-sidebar-wrap,
body.night-mode .tox .tox-edit-area,
body.night-mode .tox .tox-edit-area__iframe,
body.night-mode .tox .tox-statusbar,
body.night-mode .tox .tox-toolbar,
body.night-mode .tox .tox-toolbar__group,
body.night-mode .tox .tox-tbtn {
  background-color: #1e252b !important;
  color: #c1d4e3 !important;
}

body.night-mode .tox .tox-editor-header {
  border-bottom-color: #2e3f4d !important;
  box-shadow: none !important;
}

body.night-mode .tox .tox-statusbar {
  border-top-color: #2e3f4d !important;
}

body.night-mode .tox .tox-tbtn svg {
  fill: #c1d4e3 !important;
}

body.night-mode .tox .tox-tbtn:hover,
body.night-mode .tox .tox-tbtn:focus,
body.night-mode .tox .tox-tbtn--enabled {
  background-color: #2b3843 !important;
}

body.night-mode .tox .tox-statusbar__text-container,
body.night-mode .tox .tox-statusbar a,
body.night-mode .tox .tox-statusbar__wordcount {
  color: #9fb3c8 !important;
}

body.night-mode .tox .tox-tinymce {
  border-color: #2e3f4d !important;
}

/* -- notices --------------------------------------------------------------- */

body.night-mode .alert-warning {
  background-color: #a94f18;
  border-color: #c05c1d;
  color: #fff5ec;
}

body.night-mode .alert-success {
  background-color: #17694a;
  border-color: #1c7d58;
  color: #e8fff5;
}


/* -- solid action buttons -------------------------------------------------- */

body.night-mode .btn-success,
body.night-mode .btn-success:focus {
  background-color: #1d9466;
  border-color: #1d9466;
  color: #fff;
}

body.night-mode .btn-success:hover,
body.night-mode .btn-success:active {
  background-color: #177c55;
  border-color: #177c55;
  color: #fff;
}

body.night-mode .btn-info,
body.night-mode .btn-info:focus {
  background-color: #1f7fa8;
  border-color: #1f7fa8;
  color: #fff;
}

body.night-mode .btn-warning,
body.night-mode .btn-warning:focus {
  background-color: #b8730f;
  border-color: #b8730f;
  color: #fff;
}


/* -- dark hero tiles ------------------------------------------------------- */

body.night-mode .al-hero-side a {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #e6ecf3 !important;
}

body.night-mode .al-hero-side b {
  color: #b3a5ff;
}

body.night-mode .al-hero-side span {
  color: #a9b7c6;
}

body.night-mode .al-cta-employer .al-btn-ghost {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .26);
  color: #fff !important;
}

body.night-mode .al-exp-head b,
body.night-mode .al-exp-head strong {
  color: #e6ecf3;
}


/* ==========================================================================
   Auth pages (sign in / sign up) — compact spacing
   The card keeps the v2 look but the vertical rhythm is trimmed so the
   page fits in one screen: less outer margin, tighter paddings and a
   shorter field / button / tab height.
   ========================================================================== */

/* card -------------------------------------------------------------------- */

.al-auth,
.al-auth.al-auth-signup {
  margin: clamp(10px, 1.8vh, 18px) auto;
}

.al-auth {
  padding: clamp(14px, 1.6vw, 22px) clamp(14px, 1.8vw, 22px) clamp(12px, 1.4vw, 18px);
}

/* the elengine stylesheet sets the card padding with one class, keep the
   higher specificity so the compact padding always wins */
.fr_auth_form.al-auth {
  padding: clamp(14px, 1.6vw, 22px) clamp(14px, 1.8vw, 22px) clamp(12px, 1.4vw, 18px);
}

/* panel switcher ---------------------------------------------------------- */

.al-auth-tabs {
  margin-bottom: 12px;
  border-radius: 13px;
}

.al-auth-tab {
  height: 36px;
  line-height: 36px;
}

/* card head --------------------------------------------------------------- */

.al-auth-head {
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.al-auth-logo,
.al-auth-head .al-brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.al-auth-head .al-brand-mark {
  font-size: 18px;
}

.al-auth-logo {
  padding: 4px;
}

/* title ------------------------------------------------------------------- */

.al-auth-title {
  margin-bottom: 12px;
}

.al-auth-sub {
  margin-top: 0;
}

/* fields ------------------------------------------------------------------ */

.al-auth .al-field {
  margin-bottom: 10px;
}

.al-auth .al-field-label,
.al-auth .al-field-group-label {
  margin-bottom: 5px;
}

.al-auth .al-input {
  grid-template-columns: 44px minmax(0, 1fr);
  min-height: 44px;
  border-radius: 12px;
}

.al-auth .al-input.has-action {
  grid-template-columns: 44px minmax(0, 1fr) 44px;
}

.al-auth .al-input.al-input-plain {
  grid-template-columns: minmax(0, 1fr);
}

.al-auth .al-input input,
.al-auth .al-input textarea {
  padding: 10px 14px;
  font-size: 13.5px;
}

/* the select keeps its own inline padding for the custom arrow */
.al-auth .al-input select {
  padding-block: 10px;
  padding-inline-start: 14px;
  padding-inline-end: 34px;
  font-size: 13.5px;
}

.al-auth .al-input textarea {
  min-height: 84px;
}

.al-auth .al-input-icon svg,
.al-auth .al-input-icon i {
  width: 17px;
  height: 17px;
}

.al-auth .al-field-help {
  margin-top: 4px;
}

/* sections & account type picker ------------------------------------------ */

.al-auth .al-form-section {
  margin: 14px 0 10px;
}

.al-auth .al-type-grid {
  gap: 10px;
  margin-bottom: 2px;
}

.al-auth .al-type-box {
  gap: 8px;
  padding: 13px 12px 12px;
  border-radius: 14px;
}

.al-auth .al-type-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.al-auth .al-type-icon svg,
.al-auth .al-type-icon i {
  width: 19px;
  height: 19px;
}

.al-auth .al-type-hint {
  margin: 10px 0 14px;
}

/* notes, consent rows & inline toggles ------------------------------------ */

.al-auth .al-inline-note {
  padding: 8px 10px;
  margin: 2px 0 12px;
  border-radius: 11px;
}

.al-auth .al-consent {
  padding: 9px 11px;
  margin-bottom: 8px;
  border-radius: 12px;
}

.al-auth .al-toggle-row {
  margin: 2px 0 14px;
}

.al-auth .alert {
  margin-bottom: 12px;
}

/* submit & footer switch --------------------------------------------------- */

.al-auth .al-form-actions {
  margin-top: 14px;
}

.al-auth .al-submit {
  min-height: 46px;
  border-radius: 13px;
}

.al-auth .al-submit-arrow {
  width: 22px;
  height: 22px;
}

.al-auth-switch {
  margin-top: 14px;
  padding-top: 12px;
}

/* social logins ----------------------------------------------------------- */

.al-auth .al-social-grid {
  gap: 8px;
}

.al-auth .al-social-grid > .btn-social {
  min-height: 44px;
  border-radius: 12px !important;
}

.al-auth .al-social-grid .btn-social svg,
.al-auth .al-social-grid .btn-social img,
.al-auth .al-social-grid .btn-social .svg-container {
  width: 18px !important;
  height: 18px !important;
}

.al-auth .hr-heading {
  margin: 12px 0;
}

/* responsive -------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .al-auth,
  .al-auth.al-auth-signup {
    margin: 10px auto;
    border-radius: 18px;
  }

  .al-auth-tab {
    height: 34px;
    font-size: 12.5px;
    line-height: 34px;
  }

  .al-auth .al-type-grid {
    gap: 8px;
  }
}

/* below this width the account type boxes become a row with a check mark */
@media (max-width: 700px) {
  .al-auth .al-type-box {
    padding: 11px 46px 11px 12px;
  }
}

@media (max-width: 575.98px) {
  .al-auth,
  .al-auth.al-auth-signup {
    margin: 6px auto 0;
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(16, 17, 47, .04), 0 14px 30px -26px rgba(16, 17, 47, .5);
  }

  .fr_auth_form.al-auth,
  .al-auth {
    padding: 14px 13px 13px;
  }

  .al-auth-head {
    gap: 9px;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  .al-auth-logo,
  .al-auth-head .al-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  .al-auth-head .al-brand-mark {
    font-size: 17px;
  }

  .al-auth h2,
  .al-auth .fr_welcome_title {
    font-size: 18px;
  }

  .al-auth-tabs {
    margin-bottom: 10px;
  }

  .al-auth-tab {
    height: 32px;
    line-height: 32px;
  }

  .al-auth .al-submit {
    min-height: 44px;
    font-size: 14px;
  }

  .al-auth .al-form-row {
    gap: 0;
  }
}