/* NIGHT2ASIA — MOBILE SHELL OVERRIDE LAYER
   STEP 2: role-separated mobile menu.
   PC/common shell.css is intentionally untouched. */
@media (max-width: 1040px) {
  .mobile-partner-work-panel{
    display:block!important;
    margin:0 0 10px!important;
    padding:10px!important;
    border:1px solid rgba(226,181,82,.36)!important;
    border-radius:11px!important;
    background:linear-gradient(180deg,rgba(48,34,10,.28),rgba(9,8,6,.72))!important;
  }
  .mobile-menu-panel-v2 .mobile-partner-work-panel+section{border-top:0!important}
  .mobile-partner-work-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:8px;
    margin:0 1px 8px;
  }
  .mobile-partner-work-head span{
    color:#9c8144!important;
    font-size:9.5px!important;
    font-weight:900!important;
    letter-spacing:.12em!important;
    line-height:1.1!important;
  }
  .mobile-partner-work-head strong{
    color:#efd06d!important;
    font-size:12.5px!important;
    font-weight:950!important;
    line-height:1.15!important;
    text-align:right;
  }
  .mobile-partner-work-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:6px;
  }
  .mobile-menu-panel-v2 .mobile-partner-work-grid a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-width:0;
    min-height:43px;
    padding:7px 9px;
    border:1px solid rgba(226,181,82,.22);
    border-radius:8px;
    background:rgba(7,7,6,.82);
    color:#eee8dd;
    font-size:11.5px;
    font-weight:850;
    line-height:1.22;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .mobile-menu-panel-v2 .mobile-partner-work-grid a:after{
    content:"›";
    flex:0 0 auto;
    margin-left:5px;
    color:#b4892f;
    font-size:16px;
    line-height:1;
  }
  .mobile-menu-panel-v2 .mobile-partner-work-grid a:first-child{
    border-color:rgba(226,181,82,.42);
    color:#f3d77d;
    background:linear-gradient(180deg,rgba(71,50,13,.42),rgba(13,10,6,.80));
  }

  .mobile-menu-panel-v2 .mobile-partner-work-grid a > span{
    min-width:0;
    flex:1 1 auto;
  }
  .mobile-menu-panel-v2 .mobile-partner-work-grid a:has(.mobile-partner-badge):after{
    margin-left:3px;
  }
  .mobile-partner-badge{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    min-width:20px;
    height:20px;
    margin-left:5px;
    padding:0 5px;
    border:1px solid rgba(255,101,75,.78);
    border-radius:999px;
    background:#b72e24;
    color:#fff!important;
    font-size:10px!important;
    font-weight:950!important;
    line-height:1!important;
    box-shadow:0 0 0 2px rgba(183,46,36,.12);
  }
  .mobile-partner-badge.is-urgent{
    background:#d33a25;
    border-color:#ff8c69;
  }
  .mobile-partner-badge.is-notification{
    background:#8e6418;
    border-color:#e7bd59;
    color:#fff4cf!important;
  }
  .mobile-menu-panel-v2 .mobile-partner-work-grid a.mobile-partner-needs-link{
    border-color:rgba(221,83,56,.48);
  }

  .mobile-menu-panel-v2 .mobile-menu-account.has-partner{
    display:block;
  }
  .mobile-menu-panel-v2 .mobile-menu-account.has-partner form{
    width:100%;
  }
}

@media (max-width: 370px) {
  .mobile-partner-work-panel{padding:8px!important}
  .mobile-partner-work-grid{gap:5px}
  .mobile-menu-panel-v2 .mobile-partner-work-grid a{
    min-height:41px;
    padding:6px 7px;
    font-size:10.8px;
  }
}

/* STEP 4 — partner notification indicator in the global mobile header.
   Desktop stays untouched: the element is inline-hidden and only enabled here. */
@media (max-width: 1040px) {
  .site-header > .mobile-partner-header-alert{
    display:flex!important;
    position:absolute;
    left:58px;
    top:50%;
    transform:translateY(-50%);
    z-index:7;
    width:36px;
    height:36px;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(226,181,82,.32);
    border-radius:10px;
    background:rgba(9,8,6,.72);
    color:#e9c65f;
    text-decoration:none;
    box-shadow:0 7px 18px rgba(0,0,0,.20);
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  .site-header > .mobile-partner-header-alert:active{
    transform:translateY(-50%) translateY(1px);
  }
  .mobile-partner-header-alert-icon{
    display:block;
    font-size:21px;
    line-height:1;
    transform:rotate(45deg);
  }
  .mobile-partner-header-alert > b{
    position:absolute;
    right:-5px;
    top:-5px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:18px;
    height:18px;
    padding:0 4px;
    border:1px solid #ff8c69;
    border-radius:999px;
    background:#c93527;
    color:#fff;
    font-size:9px;
    font-weight:950;
    line-height:1;
    box-shadow:0 0 0 2px #050505;
  }
  .site-header.is-scrolled > .mobile-partner-header-alert{
    width:34px;
    height:34px;
  }
}

@media (max-width: 370px) {
  .site-header > .mobile-partner-header-alert{
    left:54px;
    width:33px;
    height:33px;
  }
  .mobile-partner-header-alert-icon{font-size:19px}
}

/* STEP 16 — mobile partner identity / public status in the global side menu. */
@media (max-width: 1040px) {
  .mobile-partner-business-state{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    min-width:0!important;
    margin:-1px 0 8px!important;
    padding:7px 8px!important;
    border:1px solid rgba(226,181,82,.15)!important;
    border-radius:8px!important;
    background:rgba(0,0,0,.28)!important;
  }
  .mobile-partner-business-state > strong{
    min-width:0!important;
    flex:1 1 auto!important;
    overflow:hidden!important;
    color:#eee7da!important;
    font-size:10.5px!important;
    font-weight:850!important;
    line-height:1.2!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .mobile-partner-business-state > span{
    flex:0 0 auto!important;
    display:inline-flex!important;
    align-items:center!important;
    min-height:20px!important;
    padding:0 7px!important;
    border-radius:999px!important;
    font-size:8.5px!important;
    font-weight:950!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .mobile-partner-business-state > span.is-public{
    border:1px solid rgba(93,189,124,.48)!important;
    background:rgba(54,132,79,.16)!important;
    color:#8dd9a5!important;
  }
  .mobile-partner-business-state > span.is-private{
    border:1px solid rgba(226,181,82,.30)!important;
    background:rgba(119,88,24,.15)!important;
    color:#d7b762!important;
  }
}

@media (max-width: 370px) {
  .mobile-partner-business-state{
    gap:6px!important;
    padding:6px 7px!important;
  }
  .mobile-partner-business-state > strong{font-size:10px!important}
  .mobile-partner-business-state > span{
    padding:0 6px!important;
    font-size:8px!important;
  }
}

/* STEP 17 — mobile side drawer viewport fit.
   Mobile only: remove the forced full-height blank area while preserving scroll. */
@media (max-width: 1040px) {
  .mobile-menu-panel.mobile-menu-panel-v2{
    bottom:auto!important;
    height:auto!important;
    max-height:calc(100svh - 84px)!important;
    overflow-y:auto!important;
    padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
    border-radius:0 15px 15px 0!important;
  }
  .mobile-main-menu[open] .mobile-menu-panel-v2{
    max-height:calc(100svh - 84px)!important;
  }
}

@media (max-width: 370px) {
  .mobile-menu-panel.mobile-menu-panel-v2{
    max-height:calc(100svh - 80px)!important;
  }
}

/* STEP 18 — mobile side drawer width / density.
   Mobile only: keep the drawer clearly separate from the page instead of reading like a full-screen modal. */
@media (max-width: 1040px) {
  .mobile-menu-panel.mobile-menu-panel-v2{
    width:min(342px,calc(100vw - 34px))!important;
    box-sizing:border-box!important;
  }
}

@media (max-width: 370px) {
  .mobile-menu-panel.mobile-menu-panel-v2{
    width:calc(100vw - 30px)!important;
    padding:9px!important;
  }
  .mobile-menu-panel-v2 .mobile-menu-country-card{
    padding:7px!important;
  }
  .mobile-menu-panel-v2 .mobile-menu-country-card a,
  .mobile-menu-panel-v2 .mobile-menu-business-grid a{
    padding-left:7px!important;
    padding-right:7px!important;
  }
}

/* STEP 19 — partner-first drawer density.
   Mobile partner login only: keep public navigation available, but compact it below the work panel. */
@media (max-width: 1040px) {
  .mobile-partner-work-panel ~ .mobile-menu-country-grid{
    gap:6px!important;
    padding-bottom:7px!important;
  }
  .mobile-partner-work-panel ~ .mobile-menu-country-grid .mobile-menu-country-card{
    gap:4px!important;
    padding:7px!important;
    border-radius:10px!important;
  }
  .mobile-partner-work-panel ~ .mobile-menu-country-grid .mobile-menu-country-card strong{
    min-height:20px!important;
    padding:0 1px 2px!important;
    font-size:11px!important;
    line-height:1.2!important;
  }
  .mobile-partner-work-panel ~ .mobile-menu-country-grid .mobile-menu-country-card a{
    min-height:36px!important;
    padding:5px 7px!important;
    font-size:11px!important;
    line-height:1.2!important;
  }
  .mobile-partner-work-panel ~ .mobile-menu-country-grid .mobile-menu-country-card .mobile-menu-magazine-link{
    min-height:38px!important;
  }
  .mobile-partner-work-panel ~ .mobile-menu-business-block{
    padding-top:7px!important;
  }
  .mobile-partner-work-panel ~ .mobile-menu-business-block .mobile-menu-business-grid{
    gap:6px!important;
  }
  .mobile-partner-work-panel ~ .mobile-menu-business-block .mobile-menu-business-grid a{
    min-height:38px!important;
    padding:6px 9px!important;
    font-size:11px!important;
    line-height:1.2!important;
  }
  .mobile-partner-work-panel ~ .mobile-menu-account{
    margin-top:8px!important;
    padding-top:8px!important;
  }
  .mobile-partner-work-panel ~ .mobile-menu-account form button{
    min-height:40px!important;
    padding:6px 9px!important;
    font-size:11.5px!important;
  }
}

@media (max-width: 370px) {
  .mobile-partner-work-panel ~ .mobile-menu-country-grid .mobile-menu-country-card{
    padding:6px!important;
  }
  .mobile-partner-work-panel ~ .mobile-menu-country-grid .mobile-menu-country-card strong{
    font-size:10.5px!important;
  }
  .mobile-partner-work-panel ~ .mobile-menu-country-grid .mobile-menu-country-card a{
    min-height:34px!important;
    padding:4px 6px!important;
    font-size:10.5px!important;
  }
  .mobile-partner-work-panel ~ .mobile-menu-business-block .mobile-menu-business-grid a{
    min-height:36px!important;
    font-size:10.5px!important;
  }
}


/* STEP 20 — active state for partner work navigation.
   Mobile partner login only: make the current work area immediately visible. */
@media (max-width: 1040px) {
  .mobile-menu-panel-v2 .mobile-partner-work-grid a.is-active{
    border-color:rgba(240,197,96,.62)!important;
    background:linear-gradient(135deg,rgba(111,81,24,.34),rgba(31,24,11,.48))!important;
    color:#f2cf78!important;
    box-shadow:inset 0 0 0 1px rgba(242,207,120,.08)!important;
  }
  .mobile-menu-panel-v2 .mobile-partner-work-grid a.is-active:after{
    color:#f2cf78!important;
    opacity:1!important;
  }
}


/* STEP 21 — direct mobile focus for items needing a reply.
   No new route or data query: the drawer jumps to the existing dashboard reply actions. */
@media (max-width: 1040px) {
  #partner-needs-reply{
    scroll-margin-top:86px;
  }
  .mobile-menu-panel-v2 .mobile-partner-work-grid a.mobile-partner-needs-link.is-active{
    border-color:rgba(232,92,63,.72)!important;
    background:linear-gradient(135deg,rgba(120,42,28,.34),rgba(45,24,16,.50))!important;
    color:#ffd09a!important;
  }
}

/* STEP 22 — mobile drawer scroll lock.
   Mobile only: keep the page behind the open drawer fixed while the drawer itself remains scrollable. */
@media (max-width: 1040px) {
  html:has(.mobile-main-menu[open]),
  body:has(.mobile-main-menu[open]){
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  .mobile-main-menu[open] .mobile-menu-panel-v2{
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
}


/* STEP 23 — general-member mobile work panel. Partners keep the partner panel above. */
@media (max-width: 1040px) {
  .mobile-member-work-panel{display:block!important;margin:0 0 10px!important;padding:10px!important;border:1px solid rgba(226,181,82,.30)!important;border-radius:11px!important;background:linear-gradient(180deg,rgba(38,29,12,.24),rgba(9,8,6,.72))!important}
  .mobile-member-work-head{display:flex;align-items:end;justify-content:space-between;gap:8px;margin:0 1px 8px}
  .mobile-member-work-head span{color:#9c8144;font-size:9.5px;font-weight:900;letter-spacing:.12em;line-height:1.1}
  .mobile-member-work-head strong{max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#efd06d;font-size:11.5px;font-weight:900;line-height:1.2;text-align:right}
  .mobile-member-work-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
  .mobile-menu-panel-v2 .mobile-member-work-grid a{display:flex;align-items:center;justify-content:space-between;min-width:0;min-height:42px;padding:7px 9px;border:1px solid rgba(226,181,82,.20);border-radius:8px;background:rgba(7,7,6,.82);color:#eee8dd;font-size:11.5px;font-weight:850;line-height:1.2}
  .mobile-menu-panel-v2 .mobile-member-work-grid a:after{content:"›";flex:0 0 auto;margin-left:5px;color:#b4892f;font-size:16px;line-height:1}
}
@media (max-width: 370px) {
  .mobile-member-work-panel{padding:8px!important}
  .mobile-member-work-grid{gap:5px}
  .mobile-menu-panel-v2 .mobile-member-work-grid a{min-height:40px;padding:6px 7px;font-size:10.7px}
}

/* STEP 24 — general-member reply count badge in mobile drawer. */
@media (max-width: 1040px) {
  .mobile-menu-panel-v2 .mobile-member-work-grid a .mobile-member-badge{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:19px;
    height:19px;
    margin-left:5px;
    padding:0 5px;
    border:1px solid rgba(232,92,63,.58);
    border-radius:999px;
    background:rgba(148,46,29,.34);
    color:#ffd09a;
    font-size:9px;
    font-weight:950;
    line-height:1;
  }
  .mobile-menu-panel-v2 .mobile-member-work-grid a:has(.mobile-member-badge):after{
    display:none;
  }
}

/* STEP 25 — general-member reply indicator in the global mobile header.
   Reuses STEP 24 reply count; no additional query or desktop change. */
@media (max-width: 1040px) {
  .site-header > .mobile-member-header-alert{
    display:flex!important;
    position:absolute;
    left:58px;
    top:50%;
    z-index:9;
    width:36px;
    height:36px;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(199,156,65,.46);
    border-radius:10px;
    background:rgba(9,8,5,.88);
    color:#d7af58;
    text-decoration:none;
    transform:translateY(-50%);
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  .site-header > .mobile-member-header-alert:active{
    transform:translateY(-50%) translateY(1px);
  }
  .mobile-member-header-alert-icon{
    display:block;
    font-size:21px;
    line-height:1;
    transform:rotate(45deg);
  }
  .mobile-member-header-alert > b{
    position:absolute;
    right:-5px;
    top:-5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:18px;
    height:18px;
    padding:0 4px;
    border:1px solid #ff8c69;
    border-radius:999px;
    background:#d33a25;
    color:#fff;
    font-size:9px;
    font-weight:950;
    line-height:1;
    box-shadow:0 0 0 2px #050505;
  }
  .site-header.is-scrolled > .mobile-member-header-alert{
    width:34px;
    height:34px;
  }
}
@media (max-width: 370px) {
  .site-header > .mobile-member-header-alert{left:54px;width:33px;height:33px}
  .mobile-member-header-alert-icon{font-size:19px}
}


/* STEP 27 — general-member center entry + active state. Mobile only. */
@media (max-width: 1040px) {
  .mobile-menu-panel-v2 .mobile-member-work-grid .mobile-member-center-link{
    grid-column:1 / -1;
    min-height:38px;
    border-color:rgba(226,181,82,.34);
    background:linear-gradient(135deg,rgba(79,58,18,.24),rgba(12,10,7,.78));
    color:#efd06d;
  }
  .mobile-menu-panel-v2 .mobile-member-work-grid .mobile-member-center-link.is-active{
    border-color:rgba(240,197,96,.62);
    background:linear-gradient(135deg,rgba(111,81,24,.34),rgba(31,24,11,.48));
    color:#f2cf78;
    box-shadow:inset 0 0 0 1px rgba(242,207,120,.08);
  }
  .mobile-menu-panel-v2 .mobile-member-work-grid .mobile-member-center-link.is-active:after{
    color:#f2cf78;
    opacity:1;
  }
}


/* STEP 29 — member-first drawer density.
   Mobile general-member login only: keep public navigation available but compact below member tools. */
@media (max-width: 1040px) {
  .mobile-member-work-panel ~ .mobile-menu-country-grid{gap:6px!important;padding-bottom:7px!important}
  .mobile-member-work-panel ~ .mobile-menu-country-grid .mobile-menu-country-card{gap:4px!important;padding:7px!important;border-radius:10px!important}
  .mobile-member-work-panel ~ .mobile-menu-country-grid .mobile-menu-country-card strong{min-height:20px!important;padding:0 1px 2px!important;font-size:11px!important;line-height:1.2!important}
  .mobile-member-work-panel ~ .mobile-menu-country-grid .mobile-menu-country-card a{min-height:36px!important;padding:5px 7px!important;font-size:11px!important;line-height:1.2!important}
  .mobile-member-work-panel ~ .mobile-menu-country-grid .mobile-menu-country-card .mobile-menu-magazine-link{min-height:38px!important}
  .mobile-member-work-panel ~ .mobile-menu-business-block{padding-top:7px!important}
  .mobile-member-work-panel ~ .mobile-menu-business-block .mobile-menu-business-grid{gap:6px!important}
  .mobile-member-work-panel ~ .mobile-menu-business-block .mobile-menu-business-grid a{min-height:38px!important;padding:6px 9px!important;font-size:11px!important;line-height:1.2!important}
  .mobile-member-work-panel ~ .mobile-menu-account{margin-top:8px!important;padding-top:8px!important}
  .mobile-member-work-panel ~ .mobile-menu-account form button{min-height:40px!important;padding:6px 9px!important;font-size:11.5px!important}
}
@media (max-width: 370px) {
  .mobile-member-work-panel ~ .mobile-menu-country-grid .mobile-menu-country-card{padding:6px!important}
  .mobile-member-work-panel ~ .mobile-menu-country-grid .mobile-menu-country-card strong{font-size:10.5px!important}
  .mobile-member-work-panel ~ .mobile-menu-country-grid .mobile-menu-country-card a{min-height:34px!important;padding:4px 6px!important;font-size:10.5px!important}
  .mobile-member-work-panel ~ .mobile-menu-business-block .mobile-menu-business-grid a{min-height:36px!important;font-size:10.5px!important}
}

/* STEP 30 — final multilingual mobile fitting.
   Mobile only: keep Thai/Vietnamese/Japanese/Chinese labels inside their cards without changing desktop. */
@media (max-width: 1040px) {
  .mobile-menu-panel-v2,
  .mobile-menu-panel-v2 *{
    box-sizing:border-box;
  }
  .mobile-partner-work-head,
  .mobile-member-work-head,
  .mobile-partner-business-state,
  .mobile-partner-work-grid,
  .mobile-member-work-grid,
  .mobile-menu-country-grid,
  .mobile-menu-business-grid{
    min-width:0;
  }
  .mobile-partner-work-head strong,
  .mobile-member-work-head strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mobile-menu-panel-v2 .mobile-partner-work-grid a > span,
  .mobile-menu-panel-v2 .mobile-member-work-grid a > span,
  .mobile-menu-panel-v2 .mobile-menu-country-card a,
  .mobile-menu-panel-v2 .mobile-menu-country-card strong,
  .mobile-menu-panel-v2 .mobile-menu-business-grid a,
  .mobile-menu-panel-v2 .mobile-menu-account a,
  .mobile-menu-panel-v2 .mobile-menu-account button{
    min-width:0;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .mobile-menu-panel-v2 .mobile-partner-work-grid a,
  .mobile-menu-panel-v2 .mobile-member-work-grid a{
    white-space:normal;
  }
  html[lang="th"] .mobile-menu-panel-v2 .mobile-partner-work-grid a,
  html[lang="th"] .mobile-menu-panel-v2 .mobile-member-work-grid a,
  html[lang="vi"] .mobile-menu-panel-v2 .mobile-partner-work-grid a,
  html[lang="vi"] .mobile-menu-panel-v2 .mobile-member-work-grid a{
    line-height:1.3;
  }
}

/* STEP 38 — mobile drawer containment FIX.
   Important: never constrain the drawer to the 44px <details> trigger width. */
@media (max-width: 1040px) {
  .site-header,
  .mobile-main-menu,
  .mobile-menu-country-grid,
  .mobile-menu-country-card,
  .mobile-menu-business-grid,
  .mobile-menu-account {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .site-header {
    max-width: 100% !important;
  }

  .mobile-main-menu > .mobile-menu-panel.mobile-menu-panel-v2 {
    width: min(342px, calc(100vw - 34px)) !important;
    max-width: calc(100vw - 34px) !important;
    min-width: min(300px, calc(100vw - 34px)) !important;
    box-sizing: border-box !important;
  }

  .mobile-menu-panel-v2 > *,
  .mobile-menu-panel-v2 a,
  .mobile-menu-panel-v2 button,
  .mobile-menu-panel-v2 strong,
  .mobile-menu-panel-v2 span {
    min-width: 0;
    box-sizing: border-box;
  }

  .mobile-menu-panel-v2 > * {
    max-width: 100%;
  }

  .mobile-menu-panel-v2 img,
  .mobile-menu-panel-v2 svg {
    max-width: 100%;
  }
}

@media (max-width: 350px) {
  .site-header > .mobile-partner-header-alert,
  .site-header > .mobile-member-header-alert {
    left: 50px !important;
    width: 32px !important;
    height: 32px !important;
  }
}

/* STEP 39 — mobile drawer inner-grid stabilization.
   Mobile only: preserve a real two-column layout after the STEP 38 width fix. */
@media (max-width: 1040px) {
  .mobile-main-menu > .mobile-menu-panel.mobile-menu-panel-v2 {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  .mobile-menu-panel-v2 .mobile-menu-country-grid,
  .mobile-menu-panel-v2 .mobile-partner-work-grid,
  .mobile-menu-panel-v2 .mobile-member-work-grid,
  .mobile-menu-panel-v2 .mobile-menu-business-grid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  }

  .mobile-menu-panel-v2 .mobile-menu-country-card,
  .mobile-menu-panel-v2 .mobile-menu-business-block,
  .mobile-menu-panel-v2 .mobile-menu-account,
  .mobile-menu-panel-v2 .mobile-partner-work-panel,
  .mobile-menu-panel-v2 .mobile-member-work-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  .mobile-menu-panel-v2 .mobile-menu-country-card > *,
  .mobile-menu-panel-v2 .mobile-menu-business-grid > *,
  .mobile-menu-panel-v2 .mobile-partner-work-grid > *,
  .mobile-menu-panel-v2 .mobile-member-work-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* STEP 40 — mobile drawer text-flow stabilization.
   Prevent character-by-character vertical collapse on narrow/mobile drawers. */
@media (max-width: 1040px) {
  .mobile-menu-panel-v2,
  .mobile-menu-panel-v2 * {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }

  .mobile-menu-panel-v2 .mobile-menu-country-card strong,
  .mobile-menu-panel-v2 .mobile-menu-country-card a,
  .mobile-menu-panel-v2 .mobile-menu-business-grid a,
  .mobile-menu-panel-v2 .mobile-partner-work-grid a,
  .mobile-menu-panel-v2 .mobile-member-work-grid a,
  .mobile-menu-panel-v2 .mobile-menu-account a,
  .mobile-menu-panel-v2 .mobile-menu-account button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    hyphens: none !important;
  }

  .mobile-menu-panel-v2 .mobile-menu-country-card a,
  .mobile-menu-panel-v2 .mobile-menu-business-grid a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  .mobile-menu-panel-v2 .mobile-menu-country-card a::after,
  .mobile-menu-panel-v2 .mobile-menu-business-grid a::after {
    flex: 0 0 auto !important;
  }
}


/* STEP 44 — global mobile shell + six-language final fit.
   Keeps the drawer stable and readable without changing desktop. */
@media (max-width: 1040px) {
  .mobile-main-menu > .mobile-menu-panel.mobile-menu-panel-v2 {
    left: 0 !important;
    right: auto !important;
    max-height: calc(100dvh - 76px) !important;
    scrollbar-gutter: stable;
  }

  .mobile-menu-panel-v2 .mobile-partner-work-grid,
  .mobile-menu-panel-v2 .mobile-member-work-grid,
  .mobile-menu-panel-v2 .mobile-menu-country-grid,
  .mobile-menu-panel-v2 .mobile-menu-business-grid {
    grid-auto-flow: row !important;
    align-items: stretch !important;
  }

  .mobile-menu-panel-v2 .mobile-partner-work-grid a,
  .mobile-menu-panel-v2 .mobile-member-work-grid a,
  .mobile-menu-panel-v2 .mobile-menu-country-card a,
  .mobile-menu-panel-v2 .mobile-menu-business-grid a {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html[lang="th"] .mobile-menu-panel-v2 a,
  html[lang="vi"] .mobile-menu-panel-v2 a,
  html[lang="ja"] .mobile-menu-panel-v2 a,
  html[lang="zh"] .mobile-menu-panel-v2 a,
  html[lang="th"] .mobile-menu-panel-v2 button,
  html[lang="vi"] .mobile-menu-panel-v2 button,
  html[lang="ja"] .mobile-menu-panel-v2 button,
  html[lang="zh"] .mobile-menu-panel-v2 button {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.28 !important;
  }

  .mobile-menu-panel-v2 .mobile-partner-badge,
  .mobile-menu-panel-v2 .mobile-member-badge {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 370px) {
  .mobile-main-menu > .mobile-menu-panel.mobile-menu-panel-v2 {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
  }
}


/* STEP 45 — final mobile regression guard: viewport, safe-area and drawer containment. */
@media (max-width: 1040px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .site-header, .site-shell, .mobile-main-menu { max-width: 100%; }
  .mobile-main-menu > .mobile-menu-panel.mobile-menu-panel-v2 {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  .mobile-menu-panel-v2 a:focus-visible,
  .mobile-menu-panel-v2 button:focus-visible {
    outline: 2px solid rgba(240,197,96,.72);
    outline-offset: 2px;
  }
}

/* =========================================================
   N2A MOBILE INDEX REBUILD M1 — COMPACT HEADER / NAV CHROME
   2026-08-29
   Mobile only. Desktop remains untouched.
   ========================================================= */
@media (max-width:1040px){
  /* Fixed-header geometry: reclaim vertical space without reducing tap safety. */
  html{scroll-padding-top:70px!important}
  body{padding-top:62px!important}

  .site-header,
  .site-header.is-scrolled{
    height:62px!important;
    min-height:62px!important;
    padding-left:7px!important;
    padding-right:7px!important;
    background:linear-gradient(180deg,rgba(5,5,5,.985),rgba(3,3,3,.965))!important;
    border-bottom-color:rgba(226,181,82,.24)!important;
    box-shadow:0 8px 24px rgba(0,0,0,.26)!important;
  }
  .site-header.is-scrolled{
    height:56px!important;
    min-height:56px!important;
    background:rgba(4,4,4,.86)!important;
    box-shadow:0 10px 28px rgba(0,0,0,.34)!important;
    -webkit-backdrop-filter:blur(20px) saturate(125%)!important;
    backdrop-filter:blur(20px) saturate(125%)!important;
  }
  .site-header:after{
    left:9px!important;
    right:9px!important;
    opacity:.32!important;
  }

  /* Center brand: smaller optical footprint, same visual hierarchy. */
  .site-header .brand{
    left:50%!important;
    top:0!important;
    width:auto!important;
    height:100%!important;
    transform:translateX(-50%)!important;
  }
  .site-header .brand-logo{
    width:122px!important;
    max-width:122px!important;
    max-height:36px!important;
  }
  .site-header.is-scrolled .brand-logo{
    width:114px!important;
    max-width:114px!important;
  }

  /* Left trigger: compact, still >= 36px touch target. */
  .mobile-main-menu{
    left:5px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
  }
  .mobile-main-menu>summary{
    width:38px!important;
    height:38px!important;
    padding:7px!important;
    border-radius:9px!important;
  }
  .mobile-main-menu>summary span{
    width:22px!important;
    margin:2.7px 0!important;
  }

  /* Preserve the member/partner shortcut, but reduce its visual weight. */
  .site-header>.mobile-partner-header-alert,
  .site-header>.mobile-member-header-alert{
    display:flex!important;
    left:46px!important;
    width:30px!important;
    height:30px!important;
    border-radius:8px!important;
    background:rgba(8,7,5,.90)!important;
    box-shadow:none!important;
  }
  .site-header.is-scrolled>.mobile-partner-header-alert,
  .site-header.is-scrolled>.mobile-member-header-alert{
    width:29px!important;
    height:29px!important;
  }
  .mobile-partner-header-alert-icon,
  .mobile-member-header-alert-icon{
    font-size:18px!important;
  }
  .mobile-partner-header-alert>b,
  .mobile-member-header-alert>b{
    right:-4px!important;
    top:-4px!important;
    min-width:17px!important;
    height:17px!important;
    padding:0 4px!important;
    font-size:8.5px!important;
  }

  /* Right language control: preserve flag + locale label without dominating the header. */
  .header-actions{
    right:6px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
  }
  .language-button{
    height:34px!important;
    min-width:68px!important;
    max-width:88px!important;
    padding:0 6px!important;
    gap:4px!important;
    border-radius:8px!important;
    border-color:rgba(226,181,82,.34)!important;
    background:rgba(8,8,7,.72)!important;
  }
  .site-header.is-scrolled .language-button{height:32px!important}
  .language-button img{
    width:18px!important;
    height:12px!important;
  }
  .language-button span{
    max-width:42px!important;
    font-size:10.5px!important;
    line-height:1!important;
  }
  .language-button b{
    font-size:10px!important;
  }
  .language-panel{
    top:39px!important;
    right:0!important;
    width:146px!important;
    border-radius:10px!important;
  }
  .site-header.is-scrolled .language-panel{top:37px!important}

  /* Drawer must begin directly below the new fixed header. */
  .mobile-main-menu>.mobile-menu-panel.mobile-menu-panel-v2{
    top:62px!important;
    max-height:calc(100dvh - 66px)!important;
  }
  .site-header.is-scrolled .mobile-main-menu>.mobile-menu-panel.mobile-menu-panel-v2{
    top:56px!important;
    max-height:calc(100dvh - 60px)!important;
  }
}

@media (max-width:390px){
  .site-header .brand-logo{
    width:118px!important;
    max-width:118px!important;
  }
  .site-header.is-scrolled .brand-logo{
    width:110px!important;
    max-width:110px!important;
  }
  .language-button{
    min-width:66px!important;
    max-width:84px!important;
    padding-left:5px!important;
    padding-right:5px!important;
  }
  .language-button span{max-width:39px!important;font-size:10px!important}
}

@media (max-width:350px){
  .mobile-main-menu{left:3px!important}
  .mobile-main-menu>summary{width:36px!important;height:36px!important;padding:6px!important}
  .site-header>.mobile-partner-header-alert,
  .site-header>.mobile-member-header-alert{
    left:41px!important;
    width:28px!important;
    height:28px!important;
  }
  .site-header .brand-logo{width:112px!important;max-width:112px!important}
  .site-header.is-scrolled .brand-logo{width:106px!important;max-width:106px!important}
  .header-actions{right:4px!important}
  .language-button{min-width:62px!important;max-width:78px!important}
  .language-button span{max-width:34px!important;font-size:9.5px!important}
}
@media (max-width:1040px){
  .site-header.is-scrolled{min-height:56px!important}
}

/* N2A MOBILE INDEX M8 — final header containment guard. */
@media (max-width:1040px){
  .site-header{
    max-width:100vw!important;
    box-sizing:border-box!important;
  }
  .site-header .brand,
  .header-actions,
  .mobile-main-menu{
    box-sizing:border-box!important;
  }
}

/* STAGE 30 — remove header role shortcut and keep partner drawer simple */
@media(max-width:1040px){
  .site-header>.mobile-partner-header-alert,
  .site-header>.mobile-member-header-alert{display:none!important}
  .mobile-menu-panel-v2 .mobile-menu-account.has-partner{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important}
  .mobile-menu-panel-v2 .mobile-menu-account.has-partner>a,
  .mobile-menu-panel-v2 .mobile-menu-account.has-partner>form,
  .mobile-menu-panel-v2 .mobile-menu-account.has-partner>form>button{width:100%!important;min-width:0!important}
  .mobile-menu-panel-v2 .mobile-menu-account.has-partner>a,
  .mobile-menu-panel-v2 .mobile-menu-account.has-partner form button{min-height:46px!important;padding:8px 7px!important;font-size:10.5px!important;text-align:center!important;white-space:normal!important}
}
@media(max-width:370px){
  .mobile-menu-panel-v2 .mobile-menu-account.has-partner{grid-template-columns:1fr!important}
}