[hidden] { display: none !important; }
.demo-notice { margin: 1rem 0; color: #545577; font-size: .8rem; }
button:disabled { cursor: not-allowed; opacity: .6; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset .checkbox { margin: 1rem 0; }
.legacy-login { margin: 0; }
.legacy-login .card { box-sizing: border-box; max-width: 100%; }
.legacy-nav button { background: transparent; border: 0; color: inherit; font: inherit; padding: 0; }
.legacy-nav button p { font-size: .5rem; }
.hero { position: relative; min-width: 0; }
.hero-slide { box-sizing: border-box; position: relative; isolation: isolate; height: 19.4375rem; border-radius: 1rem; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center right; padding: 2.1rem 2.5rem 1.65rem; }
.hero-copy { position: relative; z-index: 1; width: 68%; max-width: 35rem; }
.hero-slide h3, .hero-slide p { color: #fff; width: auto; }
.hero-slide h3 { font-size: clamp(1.55rem, 2.1vw, 2rem); line-height: 1.12; font-weight: 750; margin: 0; max-width: none; }
.hero-slide p { font-size: .9rem; line-height: 1.24; margin: .7rem 0 1rem; max-width: none; }
.hero-slide .btn { width: fit-content; background: #fff; color: #0A0C3C; }
.slide-controls { position: absolute; z-index: 2; display: flex; gap: .7rem; left: 2.5rem; right: 2.5rem; bottom: .6rem; }
.slide-controls button { appearance: none; border: 0; border-radius: 0; background: rgb(255 255 255 / 35%); flex: 1; height: 2px; min-height: 2px; padding: 0; cursor: pointer; }
.slide-controls button[aria-pressed="true"] { background: #fff; }
.legacy-home .one { align-items: stretch; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.legacy-home .one .hero, .legacy-home .one .legacy-session { min-width: 0; }
.legacy-home .one .legacy-session .card { box-sizing: border-box; height: 100%; }
.legacy-nav .icon-svg img { display: block; width: 20px; height: 20px; }
.legacy-nav a.active .icon-svg img { filter: brightness(0) saturate(100%) invert(68%) sepia(66%) saturate(565%) hue-rotate(135deg) brightness(91%) contrast(94%); }
.legacy-nav .sidebar > ul { padding: 0; margin: 0; }
.legacy-nav .sidebar > ul > li { box-sizing: border-box; }
.legacy-nav .sidebar > ul > li a { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.legacy-nav .tolbar button { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.legacy-nav .sidebar.active-menu { width: 15rem; align-items: stretch; }
.legacy-nav .sidebar.active-menu > ul > li { align-items: stretch; }
.legacy-nav .sidebar.active-menu > ul > li a p { display: block; }
@media (min-width: 641px) {
  .legacy-nav .sidebar.active-menu .dop-menu { display: block; position: absolute; left: calc(100% + .5rem); top: 0; width: 16rem; max-height: calc(100vh - 2.5rem); overflow: auto; background: #fff; border-radius: 1rem; box-shadow: 0 4px 16px #0a0c3c22; }
  .legacy-nav .sidebar.active-menu .dop-menu ul { display: block; padding: .5rem; margin: 0; }
  .legacy-nav .sidebar.active-menu .dop-menu li { padding: .4rem .6rem; }
  .legacy-nav .sidebar.active-menu .dop-menu a { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
  .legacy-nav .sidebar.active-menu .dop-menu p { display: block; font-size: .82rem; margin: 0; }
}
.legacy-home .grid-6 .card { display: block; color: #0A0C3C; }
.legacy-home .couch .block { position: relative; z-index: 1; }
dialog { border: 0; border-radius: 1rem; padding: 2rem; max-width: min(30rem, 80vw); color: #0A0C3C; }
dialog::backdrop { background: #0A0C3C66; }
dialog button { margin-top: 1rem; }
a:focus-visible, button:focus-visible { outline: 3px solid #2BC4D5; outline-offset: 3px; }
@media (max-width: 640.98px) {
  .legacy-nav .sidebar.active-menu { width: calc(100vw - 2rem); }
  .legacy-home .one { grid-template-columns: minmax(0, 1fr); }
  .hero-slide { height: 10rem; padding: .6rem .65rem 1.1rem; background-position: 69% center; }
  .hero-copy { width: 69%; max-width: none; }
  .hero-slide h3 { font-size: .75rem; line-height: 1.1; }
  .hero-slide p { font-size: .55rem; line-height: 1.12; margin: .25rem 0 .35rem; }
  .hero-slide .btn { padding: .25rem .45rem; font-size: .57rem; }
  .slide-controls { left: 1.25rem; right: 1.25rem; bottom: .65rem; gap: .45rem; }
  .legacy-home .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; margin: 0 .75rem; overflow: visible; }
  .legacy-home .one .legacy-session .card { width: 100%; }
  .legacy-home .grid-6 .card { min-width: 0; width: auto; }
  .legacy-home .grid-6 .card img { max-width: 100%; height: auto; margin-right: 0; }
  .demo-notice { padding: 0 .75rem; }
}

/* Keep the disabled login checkbox visible in the demo shell. */
.legacy-login input[type="checkbox"]:disabled + label::before {
    background: #fff url('svg/check-off.svg') center / contain no-repeat;
    opacity: .6;
}
@media (max-width: 640.98px) {
    .legacy-nav #more-toggle {
        display: flex; flex-direction: column; align-items: center;
        justify-content: center; gap: .25rem; min-height: 2.5rem;
    }
    .legacy-nav #more-toggle p { display: block; font-size: .5rem; line-height: 1.125rem; }
}

/* Local authentication forms: the surrounding card provides the padding. */
.legacy-login form { box-sizing: border-box; min-width: 0; padding: 0; }
.legacy-login .checkbox { margin: 1rem 0; }
.auth-error { color: #9f1239; margin: 1rem 0; }
.auth-session p { overflow-wrap: anywhere; margin: 1rem 0; }
.business-view {
  margin: 1.5rem 0 4rem;
  color: #0A0C3C;
}

.business-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.5rem;
  padding: .5rem;
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 0 10px rgba(138, 168, 182, .12);
}

.business-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: .5rem .9rem;
  border-radius: .55rem;
  color: #5f4fd0;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.business-tabs a:hover {
  background: #f3f1ff;
  color: #4936c8;
}

.business-card {
  background: #fff;
  border-radius: .5rem;
  padding: 1rem;
  box-shadow: 0 0 10px rgba(138, 168, 182, .2);
  overflow-wrap: anywhere;
}

.business-card > h1 {
  margin: .25rem 0 1.5rem;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: #0A0C3C;
}

.business-note {
  margin: -1rem 0 1.5rem;
  color: #6b6d80;
}

.business-card [role="alert"] {
  padding: .85rem 1rem;
  margin: 0 0 1.25rem;
  border-radius: .5rem;
  background: #fff1f2;
  color: #9f1239;
}

.business-company-summary,
.business-edit-section {
  padding: 1.25rem;
  border-radius: .5rem;
  background: #fff;
  border: 1px solid #f0eef7;
}

.business-company-summary {
  margin-top: .5rem;
}

.business-edit-section {
  margin-top: 1.5rem;
  background: #fbfafe;
}

.business-profile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #eeecf5;
}

.business-profile-avatar {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  flex: 0 0 4.5rem;
  border-radius: 1rem;
  background: #eaf9fb;
  color: #2bc4d6;
  font-size: 1.75rem;
  font-weight: 600;
}

.business-profile-title {
  min-width: 0;
}

.business-profile-title h2,
.business-section-heading h2 {
  margin: .25rem 0 0;
  color: #0A0C3C;
}

.business-profile-title h2 {
  font-size: 1.4rem;
  overflow-wrap: anywhere;
}

.business-section-heading h2 {
  font-size: 1.25rem;
}

.business-profile-kicker {
  margin: 0;
  color: #77748a;
  font-size: .8rem;
  line-height: 1.35;
}

.business-company-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 1rem 0 0;
}

.business-company-details > div {
  min-width: 0;
  padding: .9rem .75rem;
  border-bottom: 1px solid #f0eef7;
}

.business-company-details dt {
  margin: 0 0 .35rem;
  color: #77748a;
  font-size: .8rem;
  font-weight: 400;
}

.business-company-details dd {
  margin: 0;
  color: #151D2A;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.business-company-details .business-detail-wide {
  grid-column: 1 / -1;
}

.business-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.business-section-heading > p {
  max-width: 21rem;
  margin: .15rem 0 0;
  color: #77748a;
  font-size: .875rem;
  text-align: right;
}

.business-edit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: none;
  margin: 0;
}

.business-edit label {
  display: grid;
  align-content: start;
  gap: .5rem;
  min-width: 0;
  color: #4F4F4F;
  font-size: .875rem;
}

.business-edit label > span {
  font-weight: 500;
}

.business-edit input,
.business-edit textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: .75rem .85rem;
  border: 1px solid #D0D0D0;
  border-radius: .5rem;
  background: #fff;
  color: #151D2A;
  font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.business-edit textarea {
  min-height: 8.75rem;
  resize: vertical;
}

.business-edit input:focus,
.business-edit textarea:focus {
  outline: none;
  border-color: #7E6CFF;
  box-shadow: 0 0 0 3px rgba(126, 108, 255, .12);
}

.business-edit-wide {
  grid-column: 1 / -1;
}

.business-edit-actions {
  display: flex;
  justify-content: flex-start;
  padding-top: .25rem;
}

.business-edit-actions .btn {
  min-width: 12rem;
}

.business-card > dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.business-card > dl dt {
  margin-bottom: .5rem;
  color: #6b6d80;
  font-size: .875rem;
}

.business-card > dl dd {
  margin: 0;
  white-space: pre-wrap;
}

.business-employees {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.business-person {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem;
  border: 1px solid #ececf5;
  border-radius: .75rem;
  background: #fff;
  color: #0A0C3C;
  text-decoration: none;
}

.business-person:hover {
  border-color: #d9d3ff;
  background: #fbfafe;
}

@media (max-width: 640.98px) {
  .business-view {
    margin-top: 1rem;
    margin-bottom: 6rem;
  }

  .business-tabs {
    gap: .25rem;
    padding: .35rem;
  }

  .business-tabs a {
    flex: 1 1 auto;
    justify-content: center;
    padding: .5rem .6rem;
    font-size: .82rem;
  }

  .business-card,
  .business-company-summary,
  .business-edit-section {
    padding: 1rem;
  }

  .business-profile-header {
    align-items: flex-start;
  }

  .business-profile-avatar {
    width: 3.75rem;
    height: 3.75rem;
    flex-basis: 3.75rem;
    border-radius: .75rem;
  }

  .business-company-details,
  .business-edit,
  .business-card > dl,
  .business-employees {
    grid-template-columns: 1fr;
  }

  .business-detail-wide,
  .business-edit-wide {
    grid-column: auto;
  }

  .business-section-heading {
    flex-direction: column;
    gap: .5rem;
  }

  .business-section-heading > p {
    max-width: none;
    text-align: left;
  }

  .business-edit-actions .btn {
    width: 100%;
    min-width: 0;
  }
}




/* UI Patch 05 — browser form validation */
.worker-challenge-form-error {
  margin: 0 0 1.25rem;
  padding: .875rem 1rem;
  border-radius: .5rem;
  background: #fff3f3;
  color: #8a2525;
  line-height: 1.45;
}


/* UI PATCH 06 — Nutrition ingredient editor */

.nutrition-form-error {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid currentColor;
  border-radius: 8px;
}

.nutrition-ingredients-editor {
  margin: 24px 0;
}

.nutrition-ingredients-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.nutrition-ingredients-header h2 {
  margin: 0 0 6px;
  font-size: 20px;
}

.nutrition-ingredients-header p {
  margin: 0;
}

.nutrition-add-ingredient {
  flex: 0 0 auto;
}

.nutrition-ingredient-list {
  display: grid;
  gap: 12px;
}

.nutrition-ingredient-row {
  display: grid;
  grid-template-columns:
    minmax(180px, 2fr)
    minmax(110px, 1fr)
    minmax(150px, 1fr)
    auto;
  align-items: end;
  gap: 12px;

  padding: 14px;

  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
}

.nutrition-ingredient-row label {
  display: grid;
  gap: 6px;
}

.nutrition-ingredient-row input,
.nutrition-ingredient-row select {
  width: 100%;
  min-width: 0;
}

.nutrition-remove-ingredient {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .nutrition-ingredients-header {
    display: grid;
  }

  .nutrition-add-ingredient,
  .nutrition-remove-ingredient {
    width: 100%;
  }

  .nutrition-ingredient-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}


/* UI PATCH 06B — Nutrition visual system */

.nutrition-form-card {
  width: min(1120px, 100%);
  margin-inline: auto;
  box-sizing: border-box;
}

.nutrition-form-card > h1 {
  margin-bottom: 30px;
}

.nutrition-recipe-form {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

.nutrition-recipe-form > p {
  grid-column: span 6;
  margin: 0;
  min-width: 0;
}

.nutrition-recipe-form > p:nth-of-type(1),
.nutrition-recipe-form > p:nth-of-type(2),
.nutrition-recipe-form > p:nth-of-type(10) {
  grid-column: 1 / -1;
}

.nutrition-recipe-form > p:nth-of-type(3),
.nutrition-recipe-form > p:nth-of-type(4),
.nutrition-recipe-form > p:nth-of-type(5),
.nutrition-recipe-form > p:nth-of-type(6) {
  grid-column: span 3;
}

.nutrition-recipe-form > p:nth-of-type(7),
.nutrition-recipe-form > p:nth-of-type(8),
.nutrition-recipe-form > p:nth-of-type(9) {
  grid-column: span 4;
}

.nutrition-recipe-form > p > label,
.nutrition-ingredient-row label {
  display: grid;
  gap: 8px;
  margin: 0;
  color: #28243d;
  font-size: 14px;
  font-weight: 500;
}

.nutrition-recipe-form > p > label > br {
  display: none;
}

.nutrition-recipe-form input:not([type="hidden"]),
.nutrition-recipe-form select,
.nutrition-recipe-form textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid #d9d6e5;
  border-radius: 10px;
  background: #fff;
  color: #19172b;
  font: inherit;
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background-color .16s ease;
}

.nutrition-recipe-form input:not([type="hidden"]),
.nutrition-recipe-form select {
  min-height: 48px;
  padding: 0 14px;
}

.nutrition-recipe-form textarea {
  min-height: 150px;
  padding: 13px 14px;
  resize: vertical;
  line-height: 1.5;
}

.nutrition-recipe-form input::placeholder,
.nutrition-recipe-form textarea::placeholder {
  color: #9893aa;
}

.nutrition-recipe-form input:not([type="hidden"]):focus,
.nutrition-recipe-form select:focus,
.nutrition-recipe-form textarea:focus {
  outline: none;
  border-color: #604fd0;
  box-shadow: 0 0 0 3px rgba(96, 79, 208, .12);
}

.nutrition-form-error {
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid #e7b6b6;
  border-radius: 10px;
  background: #fff4f4;
  color: #982b2b;
  font-size: 14px;
  line-height: 1.45;
}


/* Ingredients */

.nutrition-ingredients-editor {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  padding: 24px;
  border: 1px solid #e4e1ed;
  border-radius: 16px;
  background: #faf9fd;
}

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

.nutrition-ingredients-header h2 {
  margin: 0 0 6px;
  color: #101b4f;
  font-size: 21px;
  line-height: 1.25;
}

.nutrition-ingredients-header p {
  margin: 0;
  color: #77728a;
  font-size: 14px;
  line-height: 1.45;
}

.nutrition-ingredient-list {
  display: grid;
  gap: 12px;
}

.nutrition-ingredient-row {
  display: grid;
  grid-template-columns:
    minmax(220px, 2fr)
    minmax(130px, .8fr)
    minmax(150px, .9fr)
    auto;
  align-items: end;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e1deeb;
  border-radius: 12px;
  background: #fff;
}

.nutrition-add-ingredient,
.nutrition-remove-ingredient,
.nutrition-save-button,
.nutrition-delete-button {
  min-height: 44px;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 0 18px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition:
    transform .12s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background-color .16s ease;
}

.nutrition-add-ingredient {
  flex: 0 0 auto;
  border: 1px solid #604fd0;
  background: #fff;
  color: #604fd0;
}

.nutrition-add-ingredient:hover {
  background: #f1effc;
}

.nutrition-remove-ingredient {
  border: 1px solid #ddd8e9;
  background: #fff;
  color: #696477;
  white-space: nowrap;
}

.nutrition-remove-ingredient:hover {
  border-color: #d8a8a8;
  background: #fff5f5;
  color: #a13a3a;
}


/* Main actions */

.nutrition-save-button {
  grid-column: 1 / -1;
  justify-self: start;
  min-width: 160px;
  margin-top: 4px;
  border: 1px solid #604fd0;
  background: #604fd0;
  color: #fff;
}

.nutrition-save-button:hover {
  background: #5342bd;
  border-color: #5342bd;
  box-shadow: 0 8px 18px rgba(96, 79, 208, .18);
}

.nutrition-save-button:active,
.nutrition-add-ingredient:active,
.nutrition-remove-ingredient:active,
.nutrition-delete-button:active {
  transform: translateY(1px);
}

.nutrition-delete-form {
  margin-top: 14px;
}

.nutrition-delete-button {
  border: 1px solid #e1b6b6;
  background: #fff;
  color: #a03333;
}

.nutrition-delete-button:hover {
  background: #fff4f4;
  border-color: #cf8f8f;
}

.nutrition-back-link {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  color: #604fd0;
  font-weight: 500;
  text-decoration: none;
}

.nutrition-back-link:hover {
  text-decoration: underline;
}


/* Tablet */

@media (max-width: 900px) {
  .nutrition-recipe-form > p:nth-of-type(3),
  .nutrition-recipe-form > p:nth-of-type(4),
  .nutrition-recipe-form > p:nth-of-type(5),
  .nutrition-recipe-form > p:nth-of-type(6),
  .nutrition-recipe-form > p:nth-of-type(7),
  .nutrition-recipe-form > p:nth-of-type(8),
  .nutrition-recipe-form > p:nth-of-type(9) {
    grid-column: span 6;
  }

  .nutrition-ingredient-row {
    grid-template-columns:
      minmax(200px, 2fr)
      minmax(120px, 1fr)
      minmax(140px, 1fr);
  }

  .nutrition-remove-ingredient {
    grid-column: 1 / -1;
    justify-self: end;
  }
}


/* Mobile */

@media (max-width: 640px) {
  .nutrition-form-card {
    padding-left: 18px;
    padding-right: 18px;
  }

  .nutrition-form-card > h1 {
    margin-bottom: 24px;
    font-size: 28px;
  }

  .nutrition-recipe-form {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .nutrition-recipe-form > p,
  .nutrition-recipe-form > p:nth-of-type(1),
  .nutrition-recipe-form > p:nth-of-type(2),
  .nutrition-recipe-form > p:nth-of-type(3),
  .nutrition-recipe-form > p:nth-of-type(4),
  .nutrition-recipe-form > p:nth-of-type(5),
  .nutrition-recipe-form > p:nth-of-type(6),
  .nutrition-recipe-form > p:nth-of-type(7),
  .nutrition-recipe-form > p:nth-of-type(8),
  .nutrition-recipe-form > p:nth-of-type(9),
  .nutrition-recipe-form > p:nth-of-type(10) {
    grid-column: 1 / -1;
  }

  .nutrition-ingredients-editor {
    padding: 18px;
    border-radius: 14px;
  }

  .nutrition-ingredients-header {
    display: grid;
    gap: 14px;
  }

  .nutrition-add-ingredient {
    width: 100%;
  }

  .nutrition-ingredient-row {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .nutrition-remove-ingredient {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
  }

  .nutrition-save-button {
    width: 100%;
    justify-self: stretch;
  }
}

/* =========================================================
   PROD LoginDisplay parity
   Legacy source: Components/Layout/LoginDisplay.razor.css
   ========================================================= */

.legacy-header .user-profile {
    position: relative;
    display: flex;
    margin-left: auto;
    gap: .75rem;
    align-items: center;
}

.prod-header-bell {
    display: flex;
    width: 3rem;
    height: 3rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: .75rem;
    background: #fff;
    cursor: pointer;
}

.prod-profile-select {
    position: relative;
    display: flex;
    flex-direction: column;
}

.prod-profile-button {
    display: flex;
    padding: .3125rem .375rem;
    justify-content: center;
    align-items: center;
    gap: .5rem;

    min-height: 3rem;

    border-radius: .75rem;
    border: 1px solid #fff;
    background: #fff;

    color: #0A0C3C;
    cursor: pointer;
}

.prod-profile-button:hover {
    background: #F8F9FE;
}

.prod-profile-button small {
    display: block;
    margin: 0;

    color: #0A0C3C;
    font-family: Montserrat, sans-serif;
    font-size: .875rem;
    font-weight: 500;
    line-height: normal;
}

.prod-profile-avatar {
    display: flex;
    width: 2.125rem;
    height: 2.125rem;
    flex: 0 0 2.125rem;
}

.prod-profile-avatar svg {
    display: block;
    width: 2.125rem;
    height: 2.125rem;
}

.prod-profile-chevron {
    flex: 0 0 auto;
    transition: transform .15s ease;
}

.prod-profile-select.active .prod-profile-button {
    border-color: #95E2EA;
}

.prod-profile-select.active .prod-profile-chevron {
    transform: rotate(180deg);
}

.prod-profile-menu {
    display: none;

    width: max-content;
    min-width: 13.5rem;

    flex-direction: column;
    align-items: stretch;

    position: absolute;
    top: 3.25rem;
    right: 0;

    border-radius: .75rem;
    background: #fff;

    overflow: hidden;
    z-index: 50;

    box-shadow: 0 .5rem 1.5rem rgba(10, 12, 60, .06);
}

.prod-profile-select.active .prod-profile-menu {
    display: flex;
}

.prod-profile-row {
    display: flex;
    padding: 1rem;

    align-items: center;
    gap: .75rem;

    color: #B6B7C5;

    font-family: Montserrat, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: normal;

    text-decoration: none;
    white-space: nowrap;
}

.prod-profile-row:hover {
    background: #F8F9FE;
}

.prod-profile-row-icon {
    display: inline-flex;
    width: 1.25rem;
    min-width: 1.25rem;

    justify-content: center;
    align-items: center;

    color: #9D9EB1;
}

.prod-profile-row-danger,
.prod-profile-row-danger .prod-profile-row-icon {
    color: #EB4E4E;
}

@media (max-width: 640.98px) {

    .prod-header-bell {
        width: 2.75rem;
        height: 2.75rem;
    }

    .prod-profile-button {
        min-height: 2.75rem;
    }

    .prod-profile-menu {
        top: 3rem;
    }
}

/* =========================================================
   FINAL HEADER NORMALIZATION
   Explicit px values avoid inherited/rem scaling differences.
   ========================================================= */

.legacy-header .user-profile {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-left: auto !important;
    height: 48px !important;
}

/* ---------- guest PROD-like login ---------- */

.legacy-header .prod-header-login {
    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 108px !important;
    height: 48px !important;

    padding: 12px 16px !important;
    gap: 10px !important;

    border-radius: 12px !important;

    font-family: Montserrat, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;

    text-decoration: none !important;
}

.legacy-header .prod-header-login svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
}


/* ---------- notification ---------- */

.legacy-header .prod-header-bell {
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;

    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: none !important;
    border-radius: 12px !important;

    background: #fff !important;
}

.legacy-header .prod-header-bell svg {
    width: 20px !important;
    height: 20px !important;
}


/* ---------- profile ---------- */

.legacy-header .prod-profile-select {
    position: relative !important;

    display: block !important;

    width: auto !important;
    height: 48px !important;

    flex: 0 0 auto !important;
}

.legacy-header .prod-profile-button {
    box-sizing: border-box !important;

    display: inline-flex !important;
    flex-direction: row !important;

    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 110px !important;
    max-width: none !important;

    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;

    padding: 5px 8px !important;
    margin: 0 !important;

    gap: 8px !important;

    border: 1px solid #fff !important;
    border-radius: 12px !important;

    background: #fff !important;

    overflow: visible !important;
}

.legacy-header .prod-profile-select.active .prod-profile-button {
    border-color: #95E2EA !important;
}

.legacy-header .prod-profile-avatar {
    box-sizing: border-box !important;

    display: block !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    flex: 0 0 34px !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 50% !important;
    overflow: hidden !important;

    aspect-ratio: 1 / 1 !important;
}

.legacy-header .prod-profile-avatar svg {
    display: block !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    aspect-ratio: 1 / 1 !important;

    transform: none !important;
}

.legacy-header .prod-profile-button small {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #0A0C3C !important;

    font-family: Montserrat, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;

    white-space: nowrap !important;
}

.legacy-header .prod-profile-chevron {
    display: block !important;

    width: 11px !important;
    min-width: 11px !important;
    max-width: 11px !important;

    height: 6px !important;
    min-height: 6px !important;
    max-height: 6px !important;

    flex: 0 0 11px !important;
}


/* ---------- dropdown ---------- */

.legacy-header .prod-profile-menu {
    box-sizing: border-box !important;

    width: 220px !important;
    min-width: 220px !important;

    top: 52px !important;
    right: 0 !important;

    border-radius: 12px !important;

    background: #fff !important;

    box-shadow:
        0 8px 24px rgba(10, 12, 60, .06) !important;
}

.legacy-header .prod-profile-row {
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 52px !important;

    padding: 14px 16px !important;
    gap: 12px !important;

    border: 0 !important;

    background: transparent !important;

    color: #B6B7C5 !important;

    font-family: Montserrat, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 20px !important;

    text-decoration: none !important;
    text-align: left !important;

    cursor: pointer !important;
}

.legacy-header .prod-profile-row:hover {
    background: #F8F9FE !important;
}

.legacy-header .prod-profile-row-icon {
    display: inline-flex !important;

    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;

    height: 20px !important;

    align-items: center !important;
    justify-content: center !important;

    font-size: 16px !important;

    color: #9D9EB1 !important;
}

.legacy-header .prod-profile-row-icon svg {
    width: 20px !important;
    height: 20px !important;
}

.legacy-header .prod-profile-row-danger,
.legacy-header .prod-profile-row-danger span,
.legacy-header .prod-profile-row-danger svg {
    color: #EB4E4E !important;
    stroke: #EB4E4E;
}

.legacy-header .prod-profile-logout {
    appearance: none !important;
    -webkit-appearance: none !important;
}


/* ---------- mobile ---------- */

@media (max-width: 640.98px) {

    .legacy-header .user-profile {
        height: 44px !important;
        gap: 8px !important;
    }

    .legacy-header .prod-header-bell {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;

        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
    }

    .legacy-header .prod-profile-select,
    .legacy-header .prod-profile-button {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
    }

    .legacy-header .prod-profile-menu {
        top: 48px !important;
    }
}