* { box-sizing: border-box; }
.app-body { min-height: 100vh; }
.skip-link { position: fixed; z-index: 1000; top: 10px; right: 10px; transform: translateY(-150%); padding: 9px 13px; border-radius: 10px; background: var(--primary); color: var(--primary-contrast); text-decoration: none; }
.skip-link:focus { transform: translateY(0); }
.icon-button { width: 42px; height: 42px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); }
.icon-button:hover { background: var(--surface-2); border-color: var(--line-strong); }
.icon-button:active { transform: scale(.96); }
.icon-button svg, .app-nav__icon, .user-menu svg, .theme-picker svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app-layout { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); direction: rtl; transition: grid-template-columns var(--transition); }
.app-sidebar { position: sticky; top: 0; z-index: 50; height: 100vh; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; background: radial-gradient(circle at 30% 0%, rgba(0, 214, 194, .14), transparent 35%), linear-gradient(180deg, var(--nav-2), var(--nav)); color: var(--nav-text); border-left: 1px solid rgba(255, 255, 255, .07); box-shadow: -14px 0 42px rgba(0, 0, 0, .14); align-self: start; }
.app-sidebar__brand-row { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.app-brand { min-width: 0; display: flex; align-items: center; text-decoration: none; }
.app-brand__wide { width: 178px; height: auto; display: block; object-fit: contain; }
.app-brand__symbol { width: 52px; height: 48px; display: none; object-fit: contain; }
.app-sidebar__collapse { flex: 0 0 38px; width: 38px; height: 38px; color: var(--nav-muted); border-color: rgba(255, 255, 255, .11); background: rgba(255, 255, 255, .06); }
.app-sidebar__collapse:hover { color: var(--nav-text); background: rgba(255, 255, 255, .1); }
.app-nav { min-height: 0; overflow-y: auto; padding: 14px 12px 22px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.app-nav__group + .app-nav__group { margin-top: 18px; }
.app-nav__group-title { margin: 0 12px 7px; color: var(--nav-muted); font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.app-nav__item { position: relative; min-height: 46px; display: flex; align-items: center; gap: 12px; margin: 3px 0; padding: 9px 12px; border: 1px solid transparent; border-radius: 13px; color: #c7dddf; text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); }
.app-nav__item:hover { color: #fff; background: rgba(255, 255, 255, .07); transform: translateX(-2px); }
.app-nav__item.is-active { color: #fff; border-color: rgba(0, 214, 194, .25); background: linear-gradient(90deg, rgba(0, 155, 142, .16), rgba(0, 214, 194, .25)); box-shadow: inset -3px 0 0 var(--primary-2); }
.app-nav__icon { flex: 0 0 20px; color: currentColor; }
.app-nav__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 720; }
.app-sidebar__footer { padding: 12px 18px 16px; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--nav-muted); }
.app-sidebar__version { font-family: var(--font-latin); font-size: 10px; letter-spacing: .03em; }

.app-stage { min-width: 0; min-height: 100vh; background: var(--bg); direction: rtl; }
.app-topbar { position: sticky; top: 0; z-index: 40; min-height: var(--topbar-height); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 24px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface), transparent 5%); box-shadow: 0 8px 24px rgba(7, 25, 31, .05); backdrop-filter: blur(16px); }
.app-topbar__start { min-width: 0; display: flex; align-items: center; gap: 12px; }
.app-topbar__menu, .app-topbar__mobile-brand { display: none; }
.app-topbar__context { min-width: 0; display: grid; gap: 1px; }
.app-topbar__context strong { font-size: 14px; }
.app-topbar__context span { color: var(--muted); font-size: 11px; }
.app-main { width: min(100%, 1600px); max-width: 1600px; min-height: calc(100vh - var(--topbar-height)); padding: 28px 26px 56px; }
.app-notice, .app-task-banner { margin-bottom: 18px; }
.app-notice__items { display: grid; gap: 9px; }
.app-notice__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.app-task-banner .card__body { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.message-stack { display: grid; gap: 9px; margin-bottom: 18px; }
.message-stack .message { margin: 0; }

.user-menu { position: relative; flex: 0 0 auto; }
.user-menu__trigger { min-width: 232px; min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 9px 5px 7px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); cursor: pointer; box-shadow: var(--shadow-sm); }
.current-user-identity { min-width: 0; display: flex; align-items: center; gap: 9px; }
.user-avatar { width: 37px; height: 37px; flex: 0 0 37px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg, var(--primary-2), var(--primary)); color: #fff; font-size: 15px; font-weight: 900; box-shadow: 0 6px 18px rgba(0, 155, 142, .28); }
.user-avatar--large { width: 46px; height: 46px; flex-basis: 46px; border-radius: 14px; font-size: 18px; }
.user-avatar__image { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; object-position: center; }
.user-menu__identity { min-width: 0; display: grid; gap: 0; text-align: right; }
.user-menu__identity strong { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.user-menu__identity small { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.user-menu__chevron { width: 16px !important; height: 16px !important; color: var(--muted); transition: transform var(--transition-fast); }
.user-menu.is-open .user-menu__chevron { transform: rotate(180deg); }
.user-menu__hover-card { position: absolute; top: calc(100% + 8px); left: 0; z-index: 70; width: 250px; display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-5px); pointer-events: none; transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast); }
.user-menu:not(.is-open):hover .user-menu__hover-card, .user-menu:not(.is-open):focus-within .user-menu__hover-card { opacity: 1; visibility: visible; transform: translateY(0); }
.user-menu__hover-card span, .user-menu__hover-card small { color: var(--muted); font-size: 11px; }
.user-menu__panel { position: absolute; top: calc(100% + 9px); left: 0; z-index: 80; width: min(330px, calc(100vw - 28px)); padding: 10px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow-lg); }
.user-menu__panel[hidden] { display: none; }
.user-menu__panel-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; border-bottom: 1px solid var(--line); }
.user-menu__panel-head > span:last-child { min-width: 0; display: grid; }
.user-menu__panel-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu__panel-head small { color: var(--muted); }
.user-menu__action, .user-menu__logout button { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-decoration: none; text-align: right; cursor: pointer; font: inherit; font-size: 13px; }
.user-menu__action:hover, .user-menu__logout button:hover { background: var(--surface-2); }
.user-menu__action svg, .user-menu__logout svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--muted); }
.theme-picker { margin-top: 5px; padding: 10px 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.theme-picker__title { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; font-weight: 800; }
.theme-picker__choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.theme-picker__choices button { min-width: 0; display: grid; justify-items: center; gap: 3px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--muted); cursor: pointer; font: inherit; font-size: 10px; }
.theme-picker__choices button[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.user-menu__logout { margin: 4px 0 0; }
.user-menu__logout button { color: var(--danger); }

.public-header { width: min(calc(100% - 32px), 1440px); min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 14px auto 0; padding: 10px 16px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--surface), transparent 4%); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); }
.public-brand img { width: 174px; height: auto; display: block; }
.public-nav { display: flex; align-items: center; gap: 8px; }
.public-nav > a:not(.btn) { padding: 8px 11px; border-radius: 9px; color: var(--muted); text-decoration: none; font-size: 13px; }
.public-nav > a:not(.btn):hover { background: var(--surface-2); color: var(--text); }
.public-main { min-height: calc(100vh - 105px); padding-top: 26px; }
.app-body--public { background: radial-gradient(circle at 15% 0%, rgba(0, 214, 194, .10), transparent 32%), var(--bg); }

.app-sidebar-overlay { display: none; }
html.sidebar-collapsed .app-layout { grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr); }
html.sidebar-collapsed .app-brand__wide, html.sidebar-collapsed .app-nav__label, html.sidebar-collapsed .app-nav__group-title, html.sidebar-collapsed .app-sidebar__version { display: none; }
html.sidebar-collapsed .app-brand__symbol { display: block; }
html.sidebar-collapsed .app-sidebar__brand-row { justify-content: center; padding-inline: 8px; flex-wrap: wrap; }
html.sidebar-collapsed .app-sidebar__collapse { order: 2; }
html.sidebar-collapsed .app-nav__item { justify-content: center; padding-inline: 10px; }
html.sidebar-collapsed .app-nav__item:hover { transform: none; }
html.sidebar-collapsed .app-sidebar__collapse svg { transform: rotate(180deg); }

@media (max-width: 980px) {
  .app-layout, html.sidebar-collapsed .app-layout { display: block; }
  .app-sidebar { position: fixed; top: 0; right: 0; z-index: 100; width: min(310px, 88vw); transform: translateX(110%); transition: transform var(--transition); }
  html.sidebar-mobile-open .app-sidebar { transform: translateX(0); }
  .app-sidebar__collapse { display: none; }
  .app-brand__wide, html.sidebar-collapsed .app-brand__wide { display: block; }
  .app-brand__symbol, html.sidebar-collapsed .app-brand__symbol { display: none; }
  .app-nav__label, html.sidebar-collapsed .app-nav__label, .app-nav__group-title, html.sidebar-collapsed .app-nav__group-title, .app-sidebar__version, html.sidebar-collapsed .app-sidebar__version { display: initial; }
  .app-nav__item, html.sidebar-collapsed .app-nav__item { justify-content: flex-start; padding-inline: 12px; }
  .app-sidebar-overlay { position: fixed; inset: 0; z-index: 90; display: block; border: 0; background: rgba(1, 12, 16, .58); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); }
  html.sidebar-mobile-open .app-sidebar-overlay { opacity: 1; visibility: visible; }
  .app-sidebar-overlay[hidden] { display: block; }
  .app-topbar__menu, .app-topbar__mobile-brand { display: inline-grid; }
  .app-topbar__mobile-brand { width: 42px; height: 42px; place-items: center; }
  .app-topbar__mobile-brand img { width: 41px; max-height: 39px; object-fit: contain; }
}

@media (max-width: 680px) {
  .app-topbar { min-height: 64px; padding: 8px 12px; }
  .app-topbar__context { display: none; }
  .user-menu__trigger { min-width: 0; width: 52px; height: 48px; padding: 5px; justify-content: center; }
  .user-menu__identity, .user-menu__chevron { display: none; }
  .user-menu__panel { position: fixed; top: 66px; left: 10px; right: 10px; width: auto; }
  .user-menu__hover-card { display: none; }
  .app-main { padding: 20px 13px 42px; }
  .public-header { width: calc(100% - 20px); min-height: 66px; margin-top: 10px; padding: 8px 10px; }
  .public-brand img { width: 130px; }
  .public-nav > a:not(.btn) { display: none; }
  .public-main { padding: 18px 12px 36px; }
}

/* P11C_EVENT_LONG_PAGE_SIDEBAR_STICKY_V86_R3
   Prevent CSS Grid stretching from shortening sticky travel on long workspaces.
   Mobile keeps its existing fixed drawer behavior through the existing media rule. */
@media (min-width: 981px) {
  .app-sidebar {
    align-self: start;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
  }
}

/* BGMS V90 — topbar notification bell */
.app-topbar__user-tools{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.app-notification-bell{position:relative}
.app-notification-bell>summary{list-style:none}
.app-notification-bell>summary::-webkit-details-marker{display:none}
.app-notification-bell__trigger{position:relative;width:44px;height:44px;border:1px solid var(--border,#dbe4ea);background:var(--surface,#fff)}
.app-notification-bell__trigger svg{width:22px;height:22px}
.app-notification-bell__badge{position:absolute;inset-block-start:-5px;inset-inline-start:-5px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:#0f766e;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900}
.app-notification-bell__panel{position:absolute;z-index:120;inset-block-start:calc(100% + 10px);inset-inline-start:0;width:min(390px,calc(100vw - 32px));max-height:520px;overflow:auto;padding:12px;border:1px solid var(--border,#dbe4ea);border-radius:16px;background:var(--surface,#fff);box-shadow:0 18px 50px rgba(15,23,42,.16)}
.app-notification-bell__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 4px 10px;border-bottom:1px solid var(--border,#e5e7eb)}
.app-notification-bell__head span{font-size:12px;color:var(--muted,#64748b)}
.app-notification-bell__latest{display:grid;gap:4px;margin:10px 0;padding:12px;border:1px solid #99f6e4;border-radius:14px;background:#f0fdfa;text-decoration:none;color:inherit}
.app-notification-bell__latest small{color:#0f766e;font-weight:800}
.app-notification-bell__latest span,.app-notification-bell__item span{font-size:12px;color:var(--muted,#64748b);line-height:1.7}
.app-notification-bell__list{display:grid;gap:6px}
.app-notification-bell__item{display:grid;gap:3px;padding:10px;border-radius:12px;text-decoration:none;color:inherit;border:1px solid transparent}
.app-notification-bell__item:hover{background:var(--surface-muted,#f8fafc)}
.app-notification-bell__item.is-unread{border-color:#ccfbf1;background:#f0fdfa}
.app-notification-bell__all{display:block;margin-top:10px;padding:9px;text-align:center;border-radius:10px;background:var(--surface-muted,#f8fafc);font-weight:800;text-decoration:none;color:inherit}
.app-notification-bell__empty{padding:18px;text-align:center;color:var(--muted,#64748b)}
@media(max-width:700px){.app-topbar__user-tools{gap:6px}.app-notification-bell__panel{inset-inline-start:-6px}}
/* BGMS_NOTIFICATION_BELL_DIRECT_SOURCE_V101_REPAIR_R4
   Exact-source repair for templates/includes/notification_bell.html.
   Desktop uses physical left/right anchoring so RTL logical-inline positioning
   cannot push the panel outside the viewport. Mobile uses fixed safe insets. */

.app-notification-bell,
.app-notification-bell__panel,
.app-notification-bell__head,
.app-notification-bell__latest,
.app-notification-bell__list,
.app-notification-bell__item,
.app-notification-bell__all {
  min-width: 0;
}

.app-notification-bell__panel {
  box-sizing: border-box;
  inset-inline-start: auto;
  inset-inline-end: auto;
  left: 0;
  right: auto;
  width: min(390px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(520px, calc(100vh - 96px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  direction: rtl;
  text-align: right;
}

.app-notification-bell__panel,
.app-notification-bell__panel * {
  box-sizing: border-box;
}

.app-notification-bell__head {
  flex-wrap: wrap;
}

.app-notification-bell__unread-count {
  flex: 0 1 auto;
  min-width: 0;
}

.app-notification-bell__latest,
.app-notification-bell__item,
.app-notification-bell__all {
  width: 100%;
  max-width: 100%;
}

.app-notification-bell__latest-meta,
.app-notification-bell__item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.app-notification-bell__latest-meta > small,
.app-notification-bell__item-head > strong {
  min-width: 0;
}

.app-notification-bell__latest > strong,
.app-notification-bell__item-head > strong,
.app-notification-bell__message,
.app-notification-bell__head > strong,
.app-notification-bell__head > span {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}

.app-notification-bell__message {
  display: block;
  min-width: 0;
}

.app-notification-bell__unread-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--info, #2563eb), transparent 35%);
  border-radius: 999px;
  background: var(--info, #2563eb);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.app-notification-bell__latest,
.app-notification-bell__item.is-unread {
  border-color: color-mix(in srgb, var(--info, #2563eb), transparent 58%);
  background: var(--info-soft, #eff6ff);
}

.app-notification-bell__item.is-unread {
  box-shadow: inset -3px 0 0 var(--info, #2563eb);
}

.app-notification-bell__item.is-unread .app-notification-bell__item-head > strong,
.app-notification-bell__latest > strong {
  color: var(--info, #1d4ed8);
  font-weight: 900;
}

@media (max-width: 700px) {
  .app-topbar__user-tools {
    min-width: 0;
    gap: 6px;
  }

  .app-notification-bell > .app-notification-bell__panel {
    position: fixed !important;
    top: 68px !important;
    bottom: auto !important;
    left: 8px !important;
    right: 8px !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: calc(100vh - 78px);
    max-height: calc(100dvh - 78px);
    margin: 0 !important;
    transform: none !important;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app-notification-bell__head {
    align-items: flex-start;
  }

  .app-notification-bell__latest,
  .app-notification-bell__item {
    padding: 10px;
  }
}

/* BGMS_PRELAUNCH_I18N_V110_FINAL */
.bgms-language-switcher {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  margin: 0;
}

.bgms-language-switcher select {
  min-height: 38px;
  max-width: 9rem;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.public-nav .bgms-language-switcher {
  margin-inline-end: 4px;
}

@media (max-width: 680px) {
  .app-topbar__user-tools .bgms-language-switcher select {
    max-width: 5.8rem;
    min-height: 40px;
  }

  .public-nav .bgms-language-switcher select {
    max-width: 6.4rem;
  }
}


/* BGMS_EDUCATION_R8_SIDEBAR_GROUPS */
.app-nav__group--collapsible { display: grid; gap: 4px; }
.app-nav__group-trigger {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 3px 0;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #c7dddf;
  text-align: right;
  cursor: pointer;
  font: inherit;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.app-nav__group-trigger:hover,
.app-nav__group-trigger:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.07);
  outline: none;
}
.app-nav__group-trigger.is-active-parent {
  color: #fff;
  border-color: rgba(0,214,194,.22);
  background: linear-gradient(90deg, rgba(0,155,142,.12), rgba(0,214,194,.18));
}
.app-nav__group-trigger .app-nav__label { flex: 1 1 auto; }
.app-nav__group-chevron {
  flex: 0 0 16px;
  width: 16px !important;
  height: 16px !important;
  transition: transform var(--transition-fast);
}
.app-nav__group-trigger[aria-expanded="true"] .app-nav__group-chevron { transform: rotate(180deg); }
.app-nav__group-panel { display: grid; gap: 2px; padding: 2px 6px 5px 0; }
.app-nav__group-panel[hidden] { display: none; }
.app-nav__subitem { min-height: 40px; padding-block: 7px; padding-inline: 13px 11px; }
.app-nav__subdot {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin-inline: 7px 4px;
  border-radius: 999px;
  background: currentColor;
  opacity: .42;
}
.app-nav__subitem.is-active .app-nav__subdot { opacity: 1; }
html.sidebar-collapsed .app-nav__group-trigger {
  justify-content: center;
  padding-inline: 10px;
}
html.sidebar-collapsed .app-nav__group-trigger .app-nav__label,
html.sidebar-collapsed .app-nav__group-trigger .app-nav__group-chevron,
html.sidebar-collapsed .app-nav__group-panel { display: none !important; }

@media (max-width: 900px) {
  html.sidebar-collapsed .app-nav__group-trigger {
    justify-content: flex-start;
    padding-inline: 12px;
  }
  html.sidebar-collapsed .app-nav__group-trigger .app-nav__label,
  html.sidebar-collapsed .app-nav__group-trigger .app-nav__group-chevron { display: block !important; }
  html.sidebar-collapsed .app-nav__group-trigger .app-nav__label { flex: 1 1 auto; }
  html.sidebar-collapsed .app-nav__group-panel:not([hidden]) { display: grid !important; }
}

/* BGMS_V123_R3_NOTIFICATION_BELL_MOBILE_REAL_FIX */
@media(max-width:700px){
  .app-notification-bell__panel,
  [data-notification-bell-panel]{
    position:fixed;
    top:72px;
    inset-inline:12px;
    width:auto;
    max-width:none;
    max-height:calc(100vh - 96px);
    overflow-y:auto;
    border-radius:18px;
    padding:14px;
  }

  .app-notification-bell__item{
    padding:14px 12px;
    gap:8px;
    min-height:72px;
  }

  .app-notification-bell__message{
    font-size:14px;
    line-height:2;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  .app-notification-bell__item-head strong,
  .app-notification-bell__latest > strong{
    font-size:14px;
    line-height:1.8;
  }
}

/* BGMS_V123_R4_NOTIFICATION_BELL_MOBILE_REAL_FIX */
@media(max-width:700px){
.app-notification-bell__panel,
[data-notification-bell-panel]{
 position:fixed;
 top:70px;
 inset-inline:12px;
 width:auto;
 max-width:none;
 max-height:calc(100vh - 90px);
 overflow-y:auto;
 padding:14px;
 border-radius:18px;
}
.app-notification-bell__item{
 padding:14px 12px;
 min-height:72px;
}
.app-notification-bell__message{
 font-size:14px;
 line-height:2;
 white-space:normal;
 overflow-wrap:anywhere;
}
}

<style>

/* BGMS_V123_R9_NOTIFICATION_MOBILE_PRO_WIDTH */
@media(max-width:700px){
.app-notification-bell__panel{
position:fixed!important;
top:72px!important;
left:12px!important;
right:12px!important;
width:calc(100vw - 24px)!important;
max-width:none!important;
min-width:0!important;
border-radius:20px!important;
padding:16px!important;
}

.app-notification-bell__item{
width:100%!important;
box-sizing:border-box!important;
padding:16px!important;
border-radius:16px!important;
}

.app-notification-bell__message{
font-size:14px!important;
line-height:2!important;
}

.app-notification-bell__head{
padding-bottom:12px!important;
}
}

</style>


/* BGMS V121 R3 R21 — topbar brand relocation */
.app-sidebar__brand-row--controls-only{justify-content:flex-end;min-height:46px;padding-block:6px}
.app-topbar__brand-lockup{display:flex;align-items:center;justify-content:center;flex:0 0 auto;text-decoration:none}
.app-topbar__brand-lockup img{display:block;width:auto;height:42px;max-width:132px;object-fit:contain}
.app-topbar__context{min-width:0}
@media(max-width:900px){.app-topbar__brand-lockup{display:none}}


/* BGMS V121 R3 R24 — compact SJM signature preserved in sidebar */
.app-sidebar__brand-row--controls-only{justify-content:space-between;gap:10px}
.app-sidebar__sjm-brand{display:inline-flex;align-items:center;justify-content:center;min-width:54px;min-height:36px;padding:4px 9px;border-radius:10px;text-decoration:none;flex:0 0 auto}
.app-sidebar__sjm-brand .brand__signature{display:block;margin:0;line-height:1}
.app-sidebar__sjm-brand:hover,.app-sidebar__sjm-brand:focus-visible{text-decoration:none}

/* BGMS V121 R3 R25 — actual SJM symbol restored in sidebar */
.app-sidebar__brand-row--controls-only{
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.app-sidebar__sjm-brand{display:none!important}
.app-sidebar__sjm-symbol{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  width:58px;
  height:48px;
  padding:4px;
  border-radius:12px;
  flex:0 0 auto;
  text-decoration:none;
  overflow:visible;
}
.app-sidebar__sjm-symbol img{
  display:block!important;
  width:46px!important;
  height:46px!important;
  max-width:none!important;
  object-fit:contain;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
}
.app-sidebar__sjm-symbol:hover,
.app-sidebar__sjm-symbol:focus-visible{
  text-decoration:none;
}

/* BGMS_R20D_MOBILE_SHELL_FINAL */
@media (max-width: 980px) {
  html, body, .app-body, .app-layout, html.sidebar-collapsed .app-layout, .app-stage {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }
  html, body, .app-body { overflow-x: hidden !important; }
  .app-layout, html.sidebar-collapsed .app-layout {
    display: block !important;
    grid-template-columns: none !important;
  }
  .app-stage {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }
  .app-topbar {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    inset-inline: 0 !important;
    padding-inline: 12px !important;
  }
  .app-main {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-inline: 12px !important;
    overflow-x: hidden !important;
  }
  .app-main > * { max-width: 100% !important; min-width: 0 !important; }
}
@media (max-width: 680px) {
  .app-topbar { gap: 8px !important; padding: 8px 10px !important; }
  .app-topbar__start { flex: 1 1 auto !important; min-width: 0 !important; gap: 7px !important; }
  .app-topbar__context { display: none !important; }
  .user-menu { flex: 0 1 auto !important; min-width: 0 !important; max-width: calc(100vw - 118px) !important; }
  .user-menu__trigger { width: auto !important; min-width: 0 !important; max-width: 100% !important; padding-inline: 7px !important; }
  .user-menu__identity strong, .user-menu__identity small { max-width: 92px !important; }
  .user-menu__hover-card { display: none !important; }
  .user-menu__panel {
    position: fixed !important;
    top: 68px !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-width: none !important;
  }
  .app-main { padding: 16px 10px 40px !important; }
}
/* BGMS_R20F_MOBILE_BOX_MODEL_ROOT_FIX */
@media (max-width: 980px) {
  .app-layout,
  html.sidebar-collapsed .app-layout,
  .app-stage,
  .app-topbar,
  .app-main {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .app-layout,
  html.sidebar-collapsed .app-layout,
  .app-stage,
  .app-topbar,
  .app-main {
    width: 100% !important;
  }

  .app-main {
    overflow-x: visible !important;
  }
}

@media (max-width: 680px) {
  .app-main {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 10px 40px !important;
    overflow-x: visible !important;
  }

  .app-topbar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* BGMS R20I-R2 FINAL - logo presentation */
.app-sidebar__brand-row--controls-only{
  position:relative;
  min-height:94px;
  padding:9px 12px;
  justify-content:center;
}
.app-sidebar__sjm-symbol{
  display:flex!important;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  height:74px;
  padding:5px 42px 5px 4px;
  border-radius:14px;
  background:rgba(255,255,255,.035);
  text-decoration:none;
  overflow:hidden;
}
.app-sidebar__sjm-symbol .app-sidebar__logo-wide{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain;
  object-position:center;
}
.app-sidebar__sjm-symbol .app-sidebar__logo-symbol{
  display:none!important;
}
.app-sidebar__brand-row--controls-only .app-sidebar__collapse{
  position:absolute;
  inset-inline-end:8px;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
}
.app-topbar__brand-lockup{
  min-height:50px;
  padding:4px 12px;
  border:1px solid rgba(54,201,191,.34);
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#f1faf9);
  box-shadow:0 4px 14px rgba(15,23,42,.08);
}
.app-topbar__brand-lockup img{
  display:block;
  width:auto!important;
  height:40px!important;
  max-width:164px!important;
  object-fit:contain;
}
html.sidebar-collapsed .app-sidebar__brand-row--controls-only{
  min-height:64px;
  padding:8px;
  justify-content:center;
  gap:6px;
}
html.sidebar-collapsed .app-sidebar__sjm-symbol{
  width:48px;
  height:48px;
  flex:0 0 48px;
  padding:3px;
}
html.sidebar-collapsed .app-sidebar__sjm-symbol .app-sidebar__logo-wide{
  display:none!important;
}
html.sidebar-collapsed .app-sidebar__sjm-symbol .app-sidebar__logo-symbol{
  display:block!important;
  width:42px!important;
  height:42px!important;
  max-width:42px!important;
  max-height:42px!important;
  object-fit:contain;
}
html.sidebar-collapsed .app-sidebar__brand-row--controls-only .app-sidebar__collapse{
  position:static;
  transform:none;
}
@media(max-width:900px){
  .app-sidebar__brand-row--controls-only{min-height:86px}
  .app-sidebar__sjm-symbol{height:68px}
}
/* BGMS R20I-R2 FINAL - logo presentation end */



/* BGMS_R20R_R6_BYTE_SAFE_TOPBAR_LOGO */
.app-topbar__brand-lockup[data-bgms-topbar-brand="true"] {
  display:flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 auto!important;width:136px!important;min-width:136px!important;
  height:58px!important;min-height:58px!important;padding:3px 7px!important;margin:0!important;
  border:0!important;border-radius:15px!important;background:rgb(1,21,31)!important;
  box-shadow:none!important;overflow:hidden!important;text-decoration:none!important;
}
.app-topbar__brand-lockup[data-bgms-topbar-brand="true"] img {
  display:block!important;width:122px!important;height:52px!important;max-width:122px!important;
  max-height:52px!important;object-fit:contain!important;object-position:center!important;
  padding:0!important;margin:0!important;border:0!important;border-radius:11px!important;
  background:transparent!important;box-shadow:none!important;
}
.app-topbar__brand-lockup[data-bgms-topbar-brand="true"] .brand__signature {
  display:none!important;
}
.app-topbar__mobile-brand {
  display:flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 auto!important;width:112px!important;min-width:112px!important;height:50px!important;
  min-height:50px!important;padding:3px 6px!important;margin:0!important;border:0!important;
  border-radius:13px!important;background:rgb(1,21,31)!important;box-shadow:none!important;
  overflow:hidden!important;text-decoration:none!important;
}
.app-topbar__mobile-brand img {
  display:block!important;width:100px!important;height:44px!important;max-width:100px!important;
  max-height:44px!important;object-fit:contain!important;object-position:center!important;
  padding:0!important;margin:0!important;border:0!important;border-radius:9px!important;
  background:transparent!important;box-shadow:none!important;
}
@media (min-width:769px) {
  .app-topbar__mobile-brand { display:none!important; }
}
@media (max-width:768px) {
  .app-topbar__brand-lockup[data-bgms-topbar-brand="true"] { display:none!important; }
  .app-topbar__mobile-brand { display:flex!important; }
}
@media (max-width:390px) {
  .app-topbar__mobile-brand { width:104px!important;min-width:104px!important;height:48px!important;min-height:48px!important; }
  .app-topbar__mobile-brand img { width:94px!important;max-width:94px!important;height:42px!important;max-height:42px!important; }
}

/* BGMS LANDING LOGO VISUAL SYNC R22 */
.public-brand{
    width:178px!important;
    height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
}
.public-brand img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:contain!important;
}
@media(max-width:680px){
    .public-brand{
        width:150px!important;
        height:44px!important;
    }
}

/* BGMS_PUBLIC_BRAND_DARK_LOCKUP_R23_20260913A
   Public/Login horizontal BGMS logo must visually match in-app/sidebar brand lockup.
*/
.public-brand img,
.app-body--public img[src*="brand/bgms-horizontal.png"] {
    display:block!important;
    width:178px!important;
    height:auto!important;
    max-width:178px!important;
    padding:8px 12px!important;
    box-sizing:border-box!important;
    object-fit:contain!important;
    background:#062f36!important;
    border-radius:14px!important;
    box-shadow:0 5px 16px rgba(3,35,41,.18)!important;
}

@media (max-width:680px) {
    .public-brand img,
    .app-body--public img[src*="brand/bgms-horizontal.png"] {
        width:150px!important;
        max-width:150px!important;
        padding:7px 10px!important;
        border-radius:12px!important;
    }
}