.brand-layout-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.brand-logo { display:flex!important; flex-flow:row nowrap!important; align-items:center!important; min-width:0; }
.tenant-brand-layout-enabled .brand-logo { width:auto!important; height:auto!important; }
.tenant-brand-layout-enabled .brand-logo-symbol { width:var(--brand-logoSize)!important; height:var(--brand-logoSize)!important; flex:0 0 auto!important; transform:translate(var(--brand-logoX),var(--brand-logoY))!important; }
.tenant-brand-layout-enabled .brand-logo-copy { transform:translate(var(--brand-textX),var(--brand-textY))!important; }
.tenant-brand-layout-enabled .brand-logo-copy strong { font-size:var(--brand-textSize)!important; }
.brand-layout-controls label { display:grid; gap:4px; }
.brand-layout-controls input { width:100%; min-width:0; box-sizing:border-box; font-size:16px; }
.brand-layout-preview { display:flex; align-items:center; gap:10px; min-height:150px; padding:40px; overflow:hidden; background:#faf8f3; }
[data-brand-layout-settings] footer { display:flex; gap:10px; padding-top:14px; }
:is([data-home-logo],.tenant-brand-header,.sales-level-brand,.brand-layout-preview) { display:flex!important; flex-flow:row nowrap!important; align-items:center!important; }
html body [data-home-logo] { min-width:0!important; max-width:100%; }
.tenant-brand-layout-enabled :is([data-home-logo],.tenant-brand-header,.sales-level-brand,.brand-layout-preview) { gap:8px!important; }
.tenant-brand-layout-enabled :is(.tenant-brand-mark,.brand-layout-logo) { width:var(--brand-logoSize)!important; height:var(--brand-logoSize)!important; min-width:0!important; flex:0 0 auto!important; object-fit:contain; transform:translate(var(--brand-logoX),var(--brand-logoY))!important; }
.tenant-brand-layout-enabled :is(.tenant-brand-header>span,.sales-level-brand>strong,.brand-layout-copy) { transform:translate(var(--brand-textX),var(--brand-textY))!important; }
.tenant-brand-layout-enabled :is(.tenant-brand-header strong,.sales-level-brand>strong,.brand-layout-text) { font-size:var(--brand-textSize)!important; }

/* Base branding is always horizontal, including tenants with no saved layout. */
html body .desktop-app .tenant-brand-header,
html body .tenant-brand-header {
  display:flex!important; flex:0 1 auto!important; flex-flow:row nowrap!important;
  align-items:center!important; gap:8px!important; width:auto!important;
  min-width:0!important; max-width:100%!important; height:auto!important;
  margin:0!important; color:#2b2d31;
}
html body .desktop-app [data-home-logo].brand-home-link .tenant-brand-header {
  width:100%!important; min-width:0!important; max-width:100%!important;
  height:auto!important; flex:0 1 auto!important; flex-flow:row nowrap!important;
}
html body .desktop-app [data-home-logo].brand-home-link .tenant-brand-header .tenant-brand-mark,
html body .tenant-brand-header .tenant-brand-mark {
  display:grid!important; place-items:center; flex:0 0 auto!important;
  width:var(--brand-logoSize,40px)!important; height:var(--brand-logoSize,40px)!important;
  min-width:0!important; max-width:none!important; margin:0!important;
  object-fit:contain; background:none!important; font-style:normal;
  font-size:14px; font-weight:700; white-space:nowrap;
}
html body .desktop-app [data-home-logo].brand-home-link .tenant-brand-header > span,
html body .tenant-brand-header > span {
  display:grid!important; grid-template-columns:minmax(0,1fr)!important;
  flex:1 1 auto!important; width:auto!important; min-width:0!important;
  gap:3px!important; margin:0!important;
  transform:translate(var(--brand-textX,0px),var(--brand-textY,0px))!important;
}
html body .desktop-app [data-home-logo].brand-home-link .tenant-brand-header strong,
html body .tenant-brand-header strong {
  display:block!important; width:auto!important; min-width:0; max-width:100%!important;
  margin:0!important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap!important;
  font-size:var(--brand-textSize,18px)!important; font-weight:750!important;
  line-height:1.3!important; letter-spacing:var(--brand-textSpacing,0px)!important; color:var(--brand-textColor,#2b2d31)!important;
}
html body .desktop-app [data-home-logo].brand-home-link .tenant-brand-header small,
html body .tenant-brand-header small {
  display:block!important; min-width:0; width:auto!important; max-width:100%!important;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap!important;
  color:var(--brand-subtitleColor,#7c6a53)!important; font-size:var(--brand-subtitleSize,10px)!important; line-height:1.2!important;
  letter-spacing:var(--brand-subtitleSpacing,var(--brand-textSpacing,.06em))!important; text-align:left!important;
}
html body :is(.brand-logo-copy,.brand-layout-text) { min-width:0; white-space:nowrap!important; }
html body .brand-logo-copy { flex:1 1 auto; overflow:hidden; }
html body .brand-logo-copy strong { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap!important; }
html body .brand-logo-symbol { flex-shrink:0!important; background-position:center; background-repeat:no-repeat; }
html body .sales-level-brand { max-width:calc(100% - 80px); }
html body .sales-level-brand .tenant-brand-header { max-width:100%!important; }
html body .brand-layout-preview { flex-flow:row nowrap!important; }
html body .brand-layout-text { overflow:hidden; text-overflow:ellipsis; }
/* Do not shrink a pre-composed horizontal logo into the icon's square. */
.tenant-brand-layout-enabled .brand-logo-horizontal { object-fit:contain!important; }
/* The neutral login identity uses one logo/name row; its caption remains below. */
body[data-login-mobile-mode="video"][data-tenant-login-brand-mode="tenant-neutral"] .lux-video-login-stage:not(.has-custom-media) .lux-video-tenant-brand {
  display:grid!important; grid-template-columns:auto minmax(0,1fr); gap:4px 14px;
  align-items:center; text-align:left;
}
body[data-login-mobile-mode="video"][data-tenant-login-brand-mode="tenant-neutral"] .lux-video-tenant-brand .lux-video-tenant-mark {
  grid-column:1; grid-row:1 / 3; width:58px; height:58px; margin:0; font-size:24px;
}
body[data-login-mobile-mode="video"][data-tenant-login-brand-mode="tenant-neutral"] .lux-video-tenant-brand strong {
  grid-column:2; grid-row:1; align-self:end; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-size:clamp(18px,5vw,26px); letter-spacing:0;
}
body[data-login-mobile-mode="video"][data-tenant-login-brand-mode="tenant-neutral"] .lux-video-tenant-brand small {
  grid-column:2; grid-row:2; align-self:start; min-width:0; margin:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:.06em;
}
body[data-login-mobile-mode="video"][data-tenant-login-brand-mode="tenant-neutral"] .lux-video-tenant-brand :is(i,p) { grid-column:1 / -1; justify-self:center; }
.brand-layout-direction-note { display:block; margin-top:18px; padding:12px 14px; border-radius:10px; background:#f7f8fa; color:#667085; font-size:14px; line-height:1.5; }
.brand-text-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.brand-text-controls label { display:grid; gap:7px; min-width:0; }
.brand-text-controls input { box-sizing:border-box; width:100%; min-width:0; }
.brand-text-controls small { color:#667085; font-size:12px; line-height:1.5; font-weight:400; }
.brand-layout-copy { display:grid; gap:4px; min-width:0; }
.tenant-brand-text-spacing-enabled :is(.brand-layout-text,.brand-logo-copy strong,.sales-level-brand>strong) {
  letter-spacing:var(--brand-textSpacing)!important;
}
.tenant-brand-text-spacing-enabled :is(.brand-layout-subtitle,.brand-logo-copy small) {
  letter-spacing:var(--brand-subtitleSpacing,var(--brand-textSpacing))!important;
}
#brand-spacing-help { color:#667085; font-size:12px; line-height:1.5; font-weight:400; }
.brand-layout-subtitle { font-size:11px; line-height:1.3; color:#7c6a53; letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Scope typography to brand copy only; absent fields keep each surface's defaults. */
html[data-brand-textfont] body :is(.desktop-app [data-home-logo].brand-home-link .tenant-brand-header strong,.tenant-brand-header strong,.brand-layout-text,.brand-logo-copy strong,.sales-level-brand>strong) { font-family:var(--brand-textFont)!important; }
html[data-brand-textcolor] body :is(.desktop-app [data-home-logo].brand-home-link .tenant-brand-header strong,.tenant-brand-header strong,.brand-layout-text,.brand-logo-copy strong,.sales-level-brand>strong) { color:var(--brand-textColor)!important; }
html[data-brand-subtitlefont] body :is(.desktop-app [data-home-logo].brand-home-link .tenant-brand-header small,.tenant-brand-header small,.brand-layout-subtitle,.brand-logo-copy small) { font-family:var(--brand-subtitleFont)!important; }
html[data-brand-subtitlecolor] body :is(.desktop-app [data-home-logo].brand-home-link .tenant-brand-header small,.tenant-brand-header small,.brand-layout-subtitle,.brand-logo-copy small) { color:var(--brand-subtitleColor)!important; }
html[data-brand-subtitlesize] body :is(.desktop-app [data-home-logo].brand-home-link .tenant-brand-header small,.tenant-brand-header small,.brand-layout-subtitle,.brand-logo-copy small) { font-size:var(--brand-subtitleSize)!important; }
html[data-brand-subtitlespacing] body :is(.desktop-app [data-home-logo].brand-home-link .tenant-brand-header small,.tenant-brand-header small,.brand-layout-subtitle,.brand-logo-copy small) { letter-spacing:var(--brand-subtitleSpacing)!important; }
[data-brand-typography] { display:grid; gap:16px; margin-top:20px; min-width:0; }
[data-brand-typography] fieldset { min-width:0; margin:0; padding:14px; border:1px solid #e5e8ed; border-radius:10px; }
[data-brand-typography] legend { padding:0 6px; font-weight:700; }
.brand-type-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 12px; }
.brand-type-grid label,.brand-color-control { display:grid; gap:7px; min-width:0; align-content:start; }
.brand-type-grid :is(input,select) { width:100%; min-width:0; box-sizing:border-box; }
[data-brand-typography] small { color:#667085; font-size:12px; line-height:1.5; font-weight:400; }
.brand-color-row { display:flex; align-items:center; gap:6px; min-width:0; }
html body [data-brand-layout-settings] .brand-color-row input[type="color"] { flex:1 1 auto; min-width:32px; height:44px; padding:4px; cursor:pointer; }
html body [data-brand-layout-settings] .brand-color-row button { min-height:44px; padding:8px; }
[data-brand-typography] :disabled { opacity:.6; cursor:not-allowed; }
@media(max-width:360px) { .brand-type-grid { grid-template-columns:minmax(0,1fr); } }
html body :is(.brand-logo-copy small,.brand-layout-subtitle,[data-tenant-brand-latin],[data-tenant-brand-welcome])[hidden] { display:none!important; }
[data-brand-layout-settings] .brand-logo-remove { color:#b42318; border-color:#f1b6b2; background:#fff; }
@media(max-width:600px) { .brand-text-controls { grid-template-columns:minmax(0,1fr); gap:14px; } }
.tenant-login-brand-row { display:flex; flex-flow:row nowrap; align-items:center; justify-content:center; gap:16px; min-width:0; max-width:100%; }
.tenant-login-brand-copy { min-width:0; text-align:left; }
html body .tenant-login-brand-row .lux-brand-monogram { flex:0 0 auto; font-size:clamp(40px,5vw,66px); line-height:1.2; white-space:nowrap; }
html body .lux-brand-card .tenant-login-brand-row :is(h1,strong) { display:block; margin:0!important; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap!important; font-size:clamp(18px,2.2vw,32px)!important; line-height:1.4!important; letter-spacing:0!important; text-align:left!important; }
html body .tenant-login-brand-row .lux-brand-en { margin:6px 0 0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; letter-spacing:.08em; }

/* Mobile header: the account identity uses its text width, not an empty fixed column. */
@media (max-width: 899px) {
  html body:not(.desktop-page) #hongyi-mobile-shell .app-header {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  html body:not(.desktop-page) #hongyi-mobile-shell .app-header .brand-row {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html body:not(.desktop-page) #hongyi-mobile-shell .app-header .brand-home-link {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  html body:not(.desktop-page) #hongyi-mobile-shell .app-header .tenant-brand-header {
    width: 100% !important;
    gap: 6px !important;
  }

  html body:not(.desktop-page) #hongyi-mobile-shell .app-header .tenant-brand-mark {
    flex: 0 1 auto !important;
    width: min(var(--brand-logoSize, 40px), 64px) !important;
    height: min(var(--brand-logoSize, 40px), 48px) !important;
    min-width: 24px !important;
    object-fit: contain;
  }

  html body:not(.desktop-page) #hongyi-mobile-shell .app-header .tenant-brand-header > span {
    min-width: min(100%, calc(var(--brand-textSize, 18px) * 5)) !important;
  }

  html body:not(.desktop-page) #hongyi-mobile-shell .app-header .header-account-zone {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: auto !important;
    align-items: center;
  }

  html body:not(.desktop-page) #hongyi-mobile-shell .app-header .account-card {
    flex: 0 0 auto !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
  }

  html body:not(.desktop-page) #hongyi-mobile-shell .app-header .account-card > div {
    display: grid !important;
    flex: 0 1 auto !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 4.5em;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    justify-items: end;
    text-align: right !important;
    font-size: 17px;
  }

  html body:not(.desktop-page) #hongyi-mobile-shell .app-header .account-card > div > span {
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-align: right !important;
  }

  html body:not(.desktop-page) #hongyi-mobile-shell .app-header .account-card > div > strong {
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: right !important;
  }
}

@media (max-width: 360px) {
  html body:not(.desktop-page) #hongyi-mobile-shell .app-header {
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  html body:not(.desktop-page) #hongyi-mobile-shell .app-header .tenant-brand-header {
    gap: 4px !important;
  }

  html body:not(.desktop-page) #hongyi-mobile-shell .app-header .account-card {
    gap: 4px !important;
  }

  html body:not(.desktop-page) #hongyi-mobile-shell .app-header .account-card > div {
    max-width: 3em;
  }
}
