/*
 * Final deterministic panel lock.
 * Loaded last to guarantee portal parity without changing business logic.
 */

/* -------------------------------------------------------------------------- */
/* Shell / Header */
/* -------------------------------------------------------------------------- */
.oc-panel-shell .panel-sidebar {
  padding-top: 0.45rem !important;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__brandbar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 56px !important;
  padding: 0.25rem 0.55rem 0.45rem !important;
  margin: 0 !important;
  border: 0 !important;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__brandbar :is(.oc-sidebar__brand, .oc-sidebar__brand-text, .oc-sidebar__brand-mark) {
  visibility: visible !important;
  opacity: 1 !important;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__modules {
  padding-top: 0.1rem !important;
}

.oc-panel-shell .panel-sidebar .oc-sidebar__nav-wrap {
  padding-top: 0.1rem !important;
}

.oc-panel-shell .panel-topbar .panel-topbar-left {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-direction: row !important;
  gap: 0.55rem !important;
  min-width: 0 !important;
}

.oc-panel-shell .panel-topbar .panel-topbar-toggle-slot {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

.oc-panel-shell .panel-topbar .panel-topbar-toggle-slot {
  order: 0 !important;
  margin: 0 !important;
}

.oc-panel-shell .panel-topbar .panel-topbar-brand-slot,
.oc-panel-shell .panel-topbar .panel-topbar-brand-slot .oc-topbar__brand {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.oc-panel-shell .panel-topbar .panel-topbar-brand-slot {
  order: 1 !important;
  margin-inline-end: 0.2rem !important;
}

@media (min-width: 1024px) {
  .oc-panel-shell[data-sidebar-open="true"] .panel-topbar .panel-topbar-brand-slot {
    display: none !important;
  }

  .oc-panel-shell[data-sidebar-open="false"] .panel-topbar .panel-topbar-brand-slot {
    display: inline-flex !important;
  }
}

.oc-panel-shell .panel-topbar :is(.oc-topbar__middle, .oc-topbar__search, .panel-topbar-search, .panel-topbar-search-input) {
  display: none !important;
}

.oc-panel-shell .panel-topbar .panel-language-select {
  min-width: 72px !important;
  height: 36px !important;
  border-radius: 11px !important;
  border: 1px solid color-mix(in srgb, var(--border) 74%, #c3d4ea 26%) !important;
  background: linear-gradient(145deg, #ffffff 0%, #f5f9ff 100%) !important;
  color: #3f5477 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  padding: 0 1.62rem 0 0.68rem !important;
  box-shadow: 0 4px 12px rgb(15 23 42 / 0.08) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
  background-repeat: no-repeat !important;
  background-size: 5px 5px, 5px 5px !important;
  background-position: calc(100% - 13px) 14px, calc(100% - 8px) 14px !important;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease !important;
}

.oc-panel-shell .panel-topbar .panel-language-select:hover {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--input-border) 66%) !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__item--language {
  display: inline-flex !important;
  align-items: center !important;
}

.oc-panel-shell .panel-topbar .panel-language-label {
  display: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__right {
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.42rem !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__right > .oc-topbar__item {
  min-height: 34px !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__item--profile {
  margin-left: 0.2rem !important;
  padding-left: 0.58rem !important;
  border-left: 1px solid color-mix(in srgb, var(--border) 86%, transparent) !important;
}

.oc-panel-shell .panel-topbar .panel-icon-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 11px !important;
  border: 1px solid #d8e4f3 !important;
  background: linear-gradient(145deg, #ffffff 0%, #f4f8ff 100%) !important;
  color: #576987 !important;
  box-shadow: 0 4px 11px rgb(15 23 42 / 0.08) !important;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease !important;
}

.oc-panel-shell .panel-topbar .panel-icon-btn:hover {
  border-color: color-mix(in srgb, var(--primary) 36%, #d8e4f3 64%) !important;
  background: linear-gradient(145deg, #ffffff 0%, #ecf4ff 100%) !important;
  color: #355987 !important;
}

.oc-panel-shell .panel-topbar .panel-icon-btn:focus-visible {
  outline: none !important;
  border-color: color-mix(in srgb, var(--primary) 52%, var(--input-border) 48%) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent), 0 6px 14px rgb(15 23 42 / 0.14) !important;
}

.oc-panel-shell .panel-topbar .panel-theme-trigger .theme-icon {
  transition: transform 140ms ease, opacity 140ms ease !important;
}

.oc-panel-shell .panel-topbar .panel-theme-trigger.is-active,
.oc-panel-shell .panel-topbar .panel-notification-trigger.is-open {
  border-color: color-mix(in srgb, var(--primary) 44%, #c5d8ef 56%) !important;
  background: linear-gradient(145deg, #eff6ff 0%, #dfeefe 100%) !important;
  color: #2d6fc5 !important;
}

.oc-panel-shell .panel-topbar .panel-notification-trigger :is(.oc-dot, .oc-dot--count) {
  top: -3px !important;
  right: -4px !important;
  border-radius: 999px !important;
  border: 2px solid #ffffff !important;
  background: linear-gradient(155deg, #f75c7a 0%, #e23a61 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgb(226 58 97 / 0.34) !important;
}

.oc-panel-shell .panel-topbar .panel-notification-trigger .oc-dot--count {
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  font-size: 0.64rem !important;
  font-weight: 700 !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger {
  min-height: 46px !important;
  margin-left: 0 !important;
  padding: 6px 9px 6px 10px !important;
  border: 1px solid #dbe6f4 !important;
  border-radius: 12px !important;
  background: linear-gradient(148deg, #ffffff 0%, #f4f8fd 100%) !important;
  box-shadow: 0 4px 12px rgb(15 23 42 / 0.07) !important;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger:hover {
  border-color: #c8daee !important;
  background: linear-gradient(148deg, #ffffff 0%, #edf5ff 100%) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger.is-open {
  border-color: color-mix(in srgb, var(--primary) 42%, #d0deef 58%) !important;
  background: linear-gradient(148deg, #f9fcff 0%, #e9f3ff 100%) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent), 0 10px 24px rgb(15 23 42 / 0.12) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__avatar {
  border-radius: 10px !important;
  background: linear-gradient(155deg, #3b9bff 0%, #1f79e2 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgb(47 126 240 / 0.26) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta strong {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #1f2e47 !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta small {
  font-size: 0.72rem !important;
  color: #7383a2 !important;
}

.oc-panel-shell .panel-topbar .panel-language-select:focus-visible {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent) !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__item {
  position: relative !important;
}

.oc-panel-shell .panel-topbar :is(.oc-topbar__item--notifications .oc-topbar-popover--notifications, .oc-topbar__item--profile .panel-profile-popover) {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 3400 !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__item--notifications .oc-topbar-popover--notifications {
  width: min(368px, calc(100vw - 20px)) !important;
  border-radius: 20px !important;
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--primary) 14%) !important;
  background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, #ffffff 96%, var(--accent) 4%) 100%) !important;
  box-shadow: 0 22px 44px rgb(15 23 42 / 0.16), 0 8px 18px rgb(15 23 42 / 0.08) !important;
}

/* -------------------------------------------------------------------------- */
/* Profile dropdown */
/* -------------------------------------------------------------------------- */
.oc-panel-shell .panel-profile-popover {
  width: min(368px, calc(100vw - 20px)) !important;
  border: 1px solid #dbe7f5 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 42px rgb(15 23 42 / 0.16), 0 6px 16px rgb(15 23 42 / 0.08) !important;
}

.oc-panel-shell .panel-profile-popover .panel-profile-header {
  padding: 15px 16px 14px !important;
  border-bottom: 1px solid #e7eef8 !important;
  background: linear-gradient(160deg, #ffffff 0%, #f2f8ff 100%) !important;
}

.oc-panel-shell .panel-profile-popover .panel-profile-header__avatar {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  border-radius: 12px !important;
  background: linear-gradient(155deg, #3c9cff 0%, #1f79e2 100%) !important;
  box-shadow: 0 10px 20px rgb(47 126 240 / 0.3) !important;
}

.oc-panel-shell .panel-profile-popover .panel-profile-header__identity h3 {
  font-size: 1.02rem !important;
  line-height: 1.16 !important;
  color: #1d2c45 !important;
}

.oc-panel-shell .panel-profile-popover .panel-profile-header__identity p {
  font-size: 0.75rem !important;
  color: #6c7f9d !important;
}

.oc-panel-shell .panel-profile-popover .panel-profile-menu {
  padding: 9px 10px 10px !important;
}

.oc-panel-shell .panel-profile-popover .panel-profile-menu__item {
  min-height: 54px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  margin: 0 0 6px !important;
  padding: 10px 12px !important;
  background: transparent !important;
}

.oc-panel-shell .panel-profile-popover .panel-profile-menu__item:hover {
  border-color: #d8e4f4 !important;
  background: linear-gradient(150deg, #f9fbff 0%, #f1f7ff 100%) !important;
}

.oc-panel-shell .panel-profile-popover .panel-profile-menu__item + .panel-profile-menu__item:not(.panel-profile-menu__item--separated):not(.panel-profile-menu__item--logout) {
  border-top: 0 !important;
}

.oc-panel-shell .panel-profile-popover .panel-profile-menu__item--primary {
  border-color: #d4e3f5 !important;
  background: linear-gradient(150deg, #f6faff 0%, #edf5ff 100%) !important;
}

.oc-panel-shell .panel-profile-popover .panel-profile-menu__item--primary .panel-profile-menu__icon {
  background: linear-gradient(150deg, #e9f3ff 0%, #d9e9ff 100%) !important;
  color: #2f7fdf !important;
}

.oc-panel-shell .panel-profile-popover .panel-profile-menu__icon {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border-radius: 11px !important;
  background: #edf2f8 !important;
  color: #5f748f !important;
}

.oc-panel-shell .panel-profile-popover .panel-profile-menu__label {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #1f2e47 !important;
}

.oc-panel-shell .panel-profile-popover .panel-profile-menu__text small {
  font-size: 0.74rem !important;
  color: #7083a0 !important;
}

.oc-panel-shell .panel-profile-popover .panel-profile-menu__item--separated {
  margin-top: 0 !important;
  padding-top: 4px !important;
}

.oc-panel-shell .panel-profile-popover .panel-profile-menu__item--logout,
.oc-panel-shell .panel-profile-popover .panel-profile-menu__item--logout:hover {
  background: linear-gradient(160deg, #fff7f8 0%, #fff0f2 100%) !important;
  border: 1px solid #f3d8de !important;
  border-radius: 12px !important;
  color: #5a2233 !important;
  margin: 0 !important;
  min-height: 58px !important;
  padding-inline: 12px !important;
}

.oc-panel-shell .panel-profile-popover .panel-profile-menu__item--logout:hover {
  background: linear-gradient(160deg, #ffeef1 0%, #ffe5ea 100%) !important;
  border-color: #eebfcb !important;
}

.oc-panel-shell .panel-profile-popover .panel-profile-menu__item--logout .panel-profile-menu__icon,
.oc-panel-shell .panel-profile-popover .panel-profile-menu__item--logout:hover .panel-profile-menu__icon {
  background: linear-gradient(150deg, #fde6ec 0%, #fcdbe4 100%) !important;
  color: #c24565 !important;
}

.oc-panel-shell .panel-profile-popover .panel-profile-menu__item--logout :is(.panel-profile-menu__label, .panel-profile-menu__text small) {
  color: #5a2233 !important;
}

/* -------------------------------------------------------------------------- */
/* Global icon guard (avoid giant icons) */
/* -------------------------------------------------------------------------- */
.oc-panel-shell :is(
  .panel-topbar,
  .panel-sidebar,
  .panel-profile-popover,
  .oc-dialog__header-actions,
  .oc-dialog__footer,
  .one-grid__row-actions,
  .oc-grid-action-btn,
  .portal-grid-table
) :is(
  svg,
  .one-svg,
  iconify-icon,
  i,
  .fa,
  .fas,
  .far,
  .fab,
  .bi,
  [class^="fa-"],
  [class*=" fa-"],
  [class^="ri-"],
  [class*=" ri-"],
  [class^="bi-"],
  [class*=" bi-"]
) {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  transform: none !important;
}

.oc-panel-shell :is(.oc-topbar__brand-mark, .oc-sidebar__brand-mark) .oc-shell-brand-heart {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
}

/* -------------------------------------------------------------------------- */
/* Grid toolbar / search standard */
/* -------------------------------------------------------------------------- */
.oc-panel-shell .panel-content :is(.one-grid, .oc-data-grid, .portal-grid-table) .one-grid__toolbar-row > div {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) auto !important;
  gap: 0.72rem !important;
  align-items: center !important;
}

.oc-panel-shell .panel-content :is(.one-grid, .oc-data-grid, .portal-grid-table) .one-grid__toolbar-row > div > .ml-auto {
  margin-left: 0 !important;
  justify-self: end !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 0.45rem !important;
  align-items: center !important;
}

.oc-panel-shell .panel-content :is(.one-grid, .oc-data-grid, .portal-grid-table) .one-grid__search,
.oc-panel-shell .panel-content :is(.one-grid, .oc-data-grid, .portal-grid-table) .one-grid__search:focus-within {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.oc-panel-shell .panel-content :is(.one-grid, .oc-data-grid, .portal-grid-table) .one-grid__search::before,
.oc-panel-shell .panel-content :is(.one-grid, .oc-data-grid, .portal-grid-table) .one-grid__search::after {
  content: none !important;
  display: none !important;
}

.oc-panel-shell .panel-content :is(.one-grid, .oc-data-grid, .portal-grid-table) .one-grid__search :is(.one-grid__search-input:not(input), .one-grid__search-input:not(input) .oc-input) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.oc-panel-shell .panel-content :is(.one-grid, .oc-data-grid, .portal-grid-table) .one-grid__search :is(
  input.one-grid__search-input,
  .one-grid__search-input > input,
  .one-grid__search-input input[type="search"],
  .one-grid__search .oc-input,
  .one-grid__search input[type="search"]
) {
  width: 100% !important;
  height: 40px !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 10px !important;
  background: var(--input-background) !important;
  box-shadow: none !important;
  padding-left: 2.55rem !important;
  padding-right: 2.55rem !important;
}

.oc-panel-shell .panel-content :is(.one-grid, .oc-data-grid, .portal-grid-table) .one-grid__search > :is(input, .oc-input, .one-grid__search-input, .one-grid__search-input > input) {
  box-shadow: none !important;
  border: 1px solid var(--input-border) !important;
}

.oc-panel-shell .panel-content :is(.one-grid, .oc-data-grid, .portal-grid-table) .one-grid__search > :not(svg):not(input):not(.oc-input):not(.one-grid__search-input) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.oc-panel-shell .panel-content :is(.one-grid, .oc-data-grid, .portal-grid-table) input[type="search"].one-grid__search-input {
  -webkit-appearance: none !important;
  appearance: none !important;
  border-radius: 10px !important;
}

.oc-panel-shell .panel-content :is(.one-grid, .oc-data-grid, .portal-grid-table) .one-grid__search :is(.one-grid__search-input, .one-grid__search-input > input) {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.oc-panel-shell .panel-content :is(.one-grid, .oc-data-grid, .portal-grid-table) .one-grid__search .one-grid__search-input {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Dashboard storage breakdown */
/* -------------------------------------------------------------------------- */
.oc-panel-shell .portal-dashboard-v2__storage-breakdown ul {
  margin-top: 0.65rem !important;
  gap: 0 !important;
}

.oc-panel-shell .portal-dashboard-v2__storage-breakdown li {
  min-height: 2rem !important;
  padding: 0.28rem 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent) !important;
}

.oc-panel-shell .portal-dashboard-v2__storage-breakdown li:last-child {
  border-bottom: 0 !important;
}

.oc-panel-shell .portal-dashboard-v2__storage-breakdown :is(strong, .one-dashboard-breakdown-item__value) {
  font-variant-numeric: tabular-nums !important;
  text-align: right !important;
}

/* -------------------------------------------------------------------------- */
/* Payment notifications page layout */
/* -------------------------------------------------------------------------- */
.oc-panel-shell .panel-content .portal-payment-notifications-workspace {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 1rem !important;
  align-items: start !important;
}

.oc-panel-shell .panel-content .portal-payment-notice-history-card {
  grid-column: 1 / -1 !important;
}

.oc-panel-shell .panel-content .portal-payment-notifications-aside {
  grid-column: 1 / -1 !important;
  display: grid !important;
  gap: 1rem !important;
  align-content: start !important;
}

/* -------------------------------------------------------------------------- */
/* Dialog standard */
/* -------------------------------------------------------------------------- */
.oc-panel-shell .oc-dialog.portal-dialog-shell {
  width: min(980px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .oc-dialog__body.portal-dialog-body {
  padding: 1rem 1.15rem 1.1rem !important;
  display: grid !important;
  gap: 0.9rem !important;
  align-content: start !important;
  grid-auto-rows: min-content !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .portal-dialog-topline,
.oc-panel-shell .oc-dialog.portal-dialog-shell .portal-dialog-topline__breadcrumbs,
.oc-panel-shell .oc-dialog.portal-dialog-shell .portal-dialog-topline__badge {
  display: none !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .oc-dialog__body.portal-dialog-body > :is(form, .oc-dialog-form, .portal-dialog-form) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  align-content: start !important;
  grid-auto-rows: min-content !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .oc-dialog__body.portal-dialog-body :is(
  .portal-payment-notice-dialog-body,
  .portal-billing-dialog-body,
  .portal-accounting-dialog-body,
  .portal-receiving-dialog-body,
  .portal-users-dialog-body,
  .portal-events-dialog-body
) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  display: block !important;
  padding: 0 !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .oc-dialog__body.portal-dialog-body :is(
  .portal-payment-notice-dialog-workspace,
  .portal-billing-dialog-workspace,
  .portal-accounting-dialog-workspace,
  .portal-receiving-dialog-workspace,
  .portal-users-dialog-workspace,
  .portal-events-dialog-workspace
) {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .oc-dialog__body.portal-dialog-body :is(.oc-auto-form, .oc-dialog-form, .portal-dialog-form) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .oc-dialog__body.portal-dialog-body :is(.oc-dialog-field, .oc-auto-form__field) {
  min-width: 0 !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell :is(
  .portal-payment-notice-form,
  .portal-billing-form,
  .portal-accounting-dialog-form,
  .portal-receiving-dialog-form,
  .portal-users-form,
  .portal-customers-dialog-form,
  .portal-events-create-form,
  .portal-photographer-settlements-dialog-form
).oc-dialog-form {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 0.72rem 0.9rem !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell :is(
  .portal-payment-notice-form,
  .portal-billing-form,
  .portal-accounting-dialog-form,
  .portal-receiving-dialog-form,
  .portal-users-form,
  .portal-customers-dialog-form,
  .portal-events-create-form,
  .portal-photographer-settlements-dialog-form
).oc-dialog-form > .oc-auto-form {
  display: contents !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell :is(
  .portal-payment-notice-form.oc-dialog-form,
  .portal-billing-form.oc-dialog-form,
  .portal-accounting-dialog-form.oc-dialog-form,
  .portal-receiving-dialog-form.oc-dialog-form
) .oc-auto-form {
  display: contents !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell :is(
  .portal-payment-notice-field--full,
  .portal-billing-field--full,
  .portal-receiving-field--full,
  .portal-accounting-field--full,
  .portal-users-field--full,
  .portal-events-field--full,
  .col-span-2,
  .col-span-3,
  .col-span-4
) {
  grid-column: 1 / -1 !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell :is(
  .portal-dialog-note,
  .portal-payment-notice-field-note,
  .portal-billing-field-note
) {
  margin: 0 !important;
  padding: 0 !important;
}

.oc-panel-shell .oc-dialog.portal-payment-notice-dialog .portal-payment-notice-form .oc-dialog-field,
.oc-panel-shell .oc-dialog.portal-billing-dialog .portal-billing-form .oc-dialog-field {
  grid-column: 1 / -1 !important;
}

.oc-panel-shell .oc-dialog.portal-payment-notice-dialog .portal-payment-notice-form .portal-payment-notice-field--amount,
.oc-panel-shell .oc-dialog.portal-billing-dialog .portal-billing-form .portal-billing-field--amount,
.oc-panel-shell .oc-dialog.portal-billing-dialog .portal-billing-form .portal-billing-field--line-description {
  grid-column: span 8 !important;
}

.oc-panel-shell .oc-dialog.portal-payment-notice-dialog .portal-payment-notice-form .portal-payment-notice-field--currency,
.oc-panel-shell .oc-dialog.portal-billing-dialog .portal-billing-form .portal-billing-field--currency,
.oc-panel-shell .oc-dialog.portal-billing-dialog .portal-billing-form .portal-billing-field--due-days {
  grid-column: span 4 !important;
}

.oc-panel-shell .oc-dialog :is(
  .portal-payment-notice-form .portal-payment-notice-field--amount,
  .portal-payment-notice-form .portal-payment-notice-field--currency,
  .portal-billing-form .portal-billing-field--amount,
  .portal-billing-form .portal-billing-field--currency,
  .portal-billing-form .portal-billing-field--line-description,
  .portal-billing-form .portal-billing-field--due-days
) :is(input, select, textarea, .oc-input, .oc-select, .oc-textarea) {
  width: 100% !important;
}

.oc-panel-shell .oc-dialog.portal-accounting-dialog .portal-accounting-dialog-form .oc-dialog-field,
.oc-panel-shell .oc-dialog.portal-receiving-dialog .portal-receiving-dialog-form .oc-dialog-field {
  grid-column: span 6 !important;
}

.oc-panel-shell .oc-dialog.portal-accounting-dialog .portal-accounting-dialog-form .oc-dialog-field.col-span-2,
.oc-panel-shell .oc-dialog.portal-accounting-dialog .portal-accounting-dialog-form .oc-dialog-field.col-span-3,
.oc-panel-shell .oc-dialog.portal-accounting-dialog .portal-accounting-dialog-form .oc-dialog-field.col-span-4,
.oc-panel-shell .oc-dialog.portal-receiving-dialog .portal-receiving-dialog-form .oc-dialog-field.col-span-2,
.oc-panel-shell .oc-dialog.portal-receiving-dialog .portal-receiving-dialog-form .oc-dialog-field.col-span-3,
.oc-panel-shell .oc-dialog.portal-receiving-dialog .portal-receiving-dialog-form .oc-dialog-field.col-span-4 {
  grid-column: 1 / -1 !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell :is(.oc-dialog__footer-actions, .oc-dialog__footer-actions--split) {
  align-items: center !important;
  width: 100% !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell :is(.oc-dialog__footer-right, .oc-dialog__footer-right .oc-dialog-form__actions) {
  margin-left: auto !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: auto !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .oc-dialog__footer {
  padding: 0.9rem 1.15rem !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .oc-dialog__footer-right .oc-dialog-form__actions > :is(a, button) {
  min-width: 96px !important;
}

@media (min-width: 861px) {
  .oc-panel-shell .oc-dialog :is(.oc-dialog__footer-actions, .oc-dialog__footer-actions--split) {
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
  }

  .oc-panel-shell .oc-dialog .oc-dialog__footer-actions--split {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .oc-panel-shell .oc-dialog :is(.oc-dialog__footer-right, .oc-dialog__footer-right .oc-dialog-form__actions) {
    margin-left: auto !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
  }
}

@media (max-width: 860px) {
  .oc-panel-shell .oc-dialog :is(.oc-dialog__footer-actions, .oc-dialog__footer-actions--split, .oc-dialog__footer-right, .oc-dialog__footer-right .oc-dialog-form__actions) {
    flex-wrap: wrap !important;
  }
}

.oc-panel-shell .oc-dialog.portal-dialog-shell :is(.oc-dialog__header, .oc-dialog__header-actions) {
  overflow: visible !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .portal-dialog-layout-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .portal-dialog-layout-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell :is(.portal-dialog-layout-btn, .portal-dialog-layout-customize-btn, .portal-dialog-layout-reset-btn) {
  border: 1px solid var(--border) !important;
  background: #fff !important;
  border-radius: 10px !important;
  padding: 0.35rem 0.65rem !important;
  color: var(--text-gray-800) !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
  min-height: 34px !important;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell :is(.portal-dialog-layout-btn, .portal-dialog-layout-customize-btn, .portal-dialog-layout-reset-btn):hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 84%, var(--card) 16%) !important;
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border)) !important;
  color: var(--text-dark) !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell :is(.portal-dialog-layout-btn, .portal-dialog-layout-customize-btn, .portal-dialog-layout-reset-btn):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent) !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell :is(.portal-dialog-layout-btn, .portal-dialog-layout-customize-btn, .portal-dialog-layout-reset-btn):disabled {
  opacity: 0.56 !important;
  cursor: not-allowed !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell :is(.portal-dialog-layout-btn, .portal-dialog-layout-customize-btn, .portal-dialog-layout-reset-btn).is-active {
  border-color: var(--primary) !important;
  color: var(--primary-dark) !important;
  background: color-mix(in oklab, var(--primary) 10%, #fff) !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .portal-dialog-layout-customize {
  position: relative;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .portal-dialog-layout-customize-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 40;
  width: min(360px, 80vw);
  max-height: min(420px, 62vh);
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(18, 38, 63, 0.14);
  padding: 0.72rem;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .portal-dialog-layout-field-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .portal-dialog-layout-field-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  background: var(--card);
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .portal-dialog-layout-field-item > label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-gray-800);
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .portal-dialog-layout-field-controls {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.34rem;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .portal-dialog-layout-span-select {
  min-width: 72px;
  height: 30px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-background);
  color: var(--text-gray-800);
  font-size: 0.73rem;
  font-weight: 600;
  padding: 0 0.55rem;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .portal-dialog-layout-span-select:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .portal-dialog-layout-order-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-background);
  color: var(--text-gray-800);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .portal-dialog-layout-order-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell .portal-dialog-layout-order-btn:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

.oc-panel-shell .oc-dialog.portal-dialog-shell :is(
  .portal-dialog-field-span-1,
  .portal-users-field.portal-dialog-field-span-1,
  .portal-users-check.portal-dialog-field-span-1
) {
  grid-column: span 6 !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell :is(
  .portal-dialog-field-span-2,
  .portal-users-field.portal-dialog-field-span-2,
  .portal-users-check.portal-dialog-field-span-2
) {
  grid-column: 1 / -1 !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell.portal-dialog-layout--three-column :is(
  .portal-dialog-field-span-1,
  .portal-users-field.portal-dialog-field-span-1,
  .portal-users-check.portal-dialog-field-span-1
) {
  grid-column: span 4 !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell.portal-dialog-layout--three-column :is(
  .portal-dialog-field-span-2,
  .portal-users-field.portal-dialog-field-span-2,
  .portal-users-check.portal-dialog-field-span-2
) {
  grid-column: span 8 !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell.portal-dialog-layout--three-column :is(
  .portal-dialog-field-span-3,
  .portal-users-field.portal-dialog-field-span-3,
  .portal-users-check.portal-dialog-field-span-3,
  .portal-dialog-field-span-4,
  .portal-users-field.portal-dialog-field-span-4,
  .portal-users-check.portal-dialog-field-span-4
) {
  grid-column: 1 / -1 !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell.portal-dialog-layout--four-column :is(
  .portal-dialog-field-span-1,
  .portal-users-field.portal-dialog-field-span-1,
  .portal-users-check.portal-dialog-field-span-1
) {
  grid-column: span 3 !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell.portal-dialog-layout--four-column :is(
  .portal-dialog-field-span-2,
  .portal-users-field.portal-dialog-field-span-2,
  .portal-users-check.portal-dialog-field-span-2
) {
  grid-column: span 6 !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell.portal-dialog-layout--four-column :is(
  .portal-dialog-field-span-3,
  .portal-users-field.portal-dialog-field-span-3,
  .portal-users-check.portal-dialog-field-span-3
) {
  grid-column: span 9 !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell.portal-dialog-layout--four-column :is(
  .portal-dialog-field-span-4,
  .portal-users-field.portal-dialog-field-span-4,
  .portal-users-check.portal-dialog-field-span-4
) {
  grid-column: 1 / -1 !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell.portal-dialog-layout--one-column :is(
  .portal-payment-notice-form .oc-dialog-field,
  .portal-billing-form .oc-dialog-field,
  .portal-accounting-dialog-form .oc-dialog-field,
  .portal-receiving-dialog-form .oc-dialog-field,
  .portal-users-form .oc-dialog-field,
  .portal-events-create-form .oc-dialog-field,
  .portal-customers-dialog-form .oc-dialog-field,
  .portal-payment-notice-field,
  .portal-billing-field,
  .portal-dialog-note
) {
  grid-column: 1 / -1 !important;
}

.dark .oc-panel-shell .oc-dialog.portal-dialog-shell :is(.portal-dialog-layout-btn, .portal-dialog-layout-customize-btn, .portal-dialog-layout-reset-btn) {
  background: color-mix(in srgb, var(--card) 90%, #0f172a 10%) !important;
  color: color-mix(in srgb, var(--text-dark) 84%, #e5e7eb 16%) !important;
  border-color: color-mix(in srgb, var(--border) 84%, #0f172a 16%) !important;
}

.dark .oc-panel-shell .oc-dialog.portal-dialog-shell :is(.portal-dialog-layout-btn, .portal-dialog-layout-customize-btn, .portal-dialog-layout-reset-btn).is-active {
  background: color-mix(in srgb, var(--primary) 24%, var(--card) 76%) !important;
  color: color-mix(in srgb, var(--primary-foreground) 86%, #f8fafc 14%) !important;
  border-color: color-mix(in srgb, var(--primary) 58%, var(--border) 42%) !important;
}

.dark .oc-panel-shell .oc-dialog.portal-dialog-shell .portal-dialog-layout-customize-panel,
.dark .oc-panel-shell .oc-dialog.portal-dialog-shell .portal-dialog-layout-field-item {
  background: color-mix(in srgb, var(--card) 92%, #0b1220 8%) !important;
  border-color: color-mix(in srgb, var(--border) 84%, #0f172a 16%) !important;
}

.dark .oc-panel-shell .oc-dialog.portal-dialog-shell .portal-dialog-layout-field-item > label {
  color: color-mix(in srgb, var(--text-dark) 86%, #e5e7eb 14%) !important;
}

.dark .oc-panel-shell .oc-dialog.portal-dialog-shell .portal-dialog-layout-span-select {
  background: color-mix(in srgb, var(--input-background) 82%, #0f172a 18%) !important;
  border-color: color-mix(in srgb, var(--input-border) 80%, #0f172a 20%) !important;
  color: color-mix(in srgb, var(--text-dark) 86%, #e5e7eb 14%) !important;
}

.dark .oc-panel-shell .oc-dialog.portal-dialog-shell .portal-dialog-layout-order-btn {
  background: color-mix(in srgb, var(--input-background) 82%, #0f172a 18%) !important;
  border-color: color-mix(in srgb, var(--input-border) 80%, #0f172a 20%) !important;
  color: color-mix(in srgb, var(--text-dark) 86%, #e5e7eb 14%) !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell.oc-dialog--full {
  width: 100dvw !important;
  max-width: 100dvw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell.oc-dialog--full .oc-dialog__header {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  background: var(--card) !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell.oc-dialog--full .oc-dialog__body {
  min-height: 0 !important;
  overflow: auto !important;
}

.oc-panel-shell .oc-dialog.portal-dialog-shell.oc-dialog--full .oc-dialog__footer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 4 !important;
  background: var(--card) !important;
}

/* -------------------------------------------------------------------------- */
/* Users/list pages parity */
/* -------------------------------------------------------------------------- */
.oc-panel-shell .portal-users-layout .portal-users-card--create {
  display: none !important;
}

.oc-panel-shell .portal-users-layout .portal-users-card--filters,
.oc-panel-shell .portal-users-layout .portal-users-card--table {
  grid-column: 1 / -1 !important;
}

/* -------------------------------------------------------------------------- */
/* Workspace 3-dot menu placement */
/* -------------------------------------------------------------------------- */
.oc-panel-shell .one-row-menu--workspace-header {
  position: relative !important;
}

.oc-panel-shell .one-row-menu--workspace-header > summary {
  min-height: 32px !important;
  min-width: 32px !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 10px !important;
  background: var(--input-background) !important;
}

.oc-panel-shell .one-row-menu--workspace-header[open] > summary {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--input-border) 54%) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent) !important;
}

.oc-panel-shell .one-row-menu--workspace-header > .oc-row-menu__panel {
  position: absolute !important;
  top: calc(100% + 0.45rem) !important;
  right: 0 !important;
  left: auto !important;
  min-width: 232px !important;
  max-width: min(340px, calc(100vw - 24px)) !important;
  z-index: 3400 !important;
}

.oc-panel-shell details.one-row-menu--workspace-header:not([open]) > .oc-row-menu__panel {
  display: none !important;
}

.oc-panel-shell details.one-row-menu--workspace-header[open] > .oc-row-menu__panel {
  display: block !important;
}

/* -------------------------------------------------------------------------- */
/* Designer page layout */
/* -------------------------------------------------------------------------- */
.oc-panel-shell .panel-content .designer-layout {
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(300px, 360px) !important;
  align-items: start !important;
}

.oc-panel-shell .panel-content .designer-stage {
  min-width: 0 !important;
  display: grid !important;
  gap: 1rem !important;
  align-content: start !important;
}

.oc-panel-shell .panel-content .designer-canvas-card {
  min-height: clamp(760px, calc(100vh - 220px), 980px) !important;
}

.oc-panel-shell .panel-content .designer-canvas-host {
  min-height: clamp(680px, calc(100vh - 300px), 900px) !important;
  overflow: auto !important;
}

.oc-panel-shell .panel-content .designer-canvas-host .konvajs-content {
  margin: 0 auto !important;
}

.oc-panel-shell .panel-content .designer-sidebar :is(.designer-tool-group, .inspector-block, .layer-item) {
  min-width: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Shortcut text suppression */
/* -------------------------------------------------------------------------- */
.oc-panel-shell .panel-content :is(
  [class*="shortcut-hint"],
  .oc-page-shortcut-hint,
  .oc-dialog-shortcut-hint,
  [class*="workspace__header-shortcuts"],
  [class*="workspace__shortcut-hint"]
) {
  display: none !important;
}

/* Keep dialog header shortcut menu enabled; only legacy footer/text hints are suppressed. */
.oc-panel-shell .panel-content .oc-dialog__header-actions > .one-dialog-shortcut-menu {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
}

.oc-panel-shell .panel-content .oc-dialog__header-actions .one-dialog-shortcut-menu__trigger {
  display: inline-flex !important;
}

.oc-panel-shell .panel-content .oc-dialog__header-actions .one-dialog-shortcut-menu__panel {
  display: grid !important;
  top: calc(100% + 0.45rem) !important;
  right: 0 !important;
  z-index: 3400 !important;
}

/* -------------------------------------------------------------------------- */
/* Dashboard icon scale lock (prevent overscale and tiny-icon regressions) */
/* -------------------------------------------------------------------------- */
.oc-panel-shell .panel-content .portal-dashboard-v2__kpi-icon :is(svg, .one-svg, iconify-icon, i) {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  font-size: 24px !important;
  line-height: 1 !important;
  transform: none !important;
}

.oc-panel-shell .panel-content :is(.management-dashboard-v2__kpi-icon, .oc-dashboard-kpi-card__icon) :is(svg, .one-svg, iconify-icon, i) {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  font-size: 20px !important;
  line-height: 1 !important;
  transform: none !important;
}

.oc-panel-shell .panel-content :is(.portal-dashboard-v2__approval-icon, .management-dashboard-v2__approval-icon, .one-dashboard-approval-alert__icon) :is(svg, .one-svg, iconify-icon, i) {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  font-size: 20px !important;
  line-height: 1 !important;
  transform: none !important;
}

.oc-panel-shell .panel-content :is(.portal-dashboard-v2__kpi-head, .management-dashboard-v2__kpi-head, .oc-dashboard-kpi-card__head) > :is(svg, .one-svg, iconify-icon, i) {
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  min-height: 11px !important;
  max-width: 11px !important;
  max-height: 11px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

/* -------------------------------------------------------------------------- */
/* Dark mode readability */
/* -------------------------------------------------------------------------- */
.dark .oc-panel-shell,
:root[data-theme="dark"] .oc-panel-shell {
  --background: #0f172a;
  --card: #111c2f;
  --accent: #1a2b44;
  --border: #2f4667;
  --input-background: #162a43;
  --input-border: #425f85;
  --text-dark: #eff5ff;
  --text-gray-800: #dbe8fb;
  --text-gray-700: #c8d9f0;
  --text-gray-600: #a8bdd8;
  --text-gray-500: #8da6c5;
}

.dark .oc-panel-shell :is(.panel-topbar, .panel-sidebar),
:root[data-theme="dark"] .oc-panel-shell :is(.panel-topbar, .panel-sidebar) {
  background: var(--card) !important;
  border-color: var(--border) !important;
}

.dark .oc-panel-shell :is(.panel-sidebar .app-nav-item, .panel-sidebar .oc-sidebar__section-title, .panel-topbar .icon-btn, .panel-topbar .oc-topbar__user, .panel-topbar .oc-topbar__user small),
:root[data-theme="dark"] .oc-panel-shell :is(.panel-sidebar .app-nav-item, .panel-sidebar .oc-sidebar__section-title, .panel-topbar .icon-btn, .panel-topbar .oc-topbar__user, .panel-topbar .oc-topbar__user small) {
  color: var(--text-gray-700) !important;
}

.dark .oc-panel-shell .panel-topbar :is(.oc-topbar__item, .icon-btn, .panel-language-select),
:root[data-theme="dark"] .oc-panel-shell .panel-topbar :is(.oc-topbar__item, .icon-btn, .panel-language-select) {
  color: var(--text-dark) !important;
}

.dark .oc-panel-shell .panel-topbar .panel-icon-btn,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-icon-btn {
  border-color: color-mix(in srgb, var(--input-border) 86%, #0f172a 14%) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 74%, #0f172a 26%) 0%, color-mix(in srgb, var(--card) 88%, #0f172a 12%) 100%) !important;
  color: var(--text-gray-700) !important;
  box-shadow: 0 6px 14px rgb(2 6 23 / 0.35) !important;
}

.dark .oc-panel-shell .panel-topbar .panel-icon-btn:hover,
.dark .oc-panel-shell .panel-topbar .panel-icon-btn.is-open,
.dark .oc-panel-shell .panel-topbar .panel-icon-btn.is-active,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-icon-btn:hover,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-icon-btn.is-open,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-icon-btn.is-active {
  border-color: color-mix(in srgb, var(--primary) 52%, var(--input-border) 48%) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 28%, var(--accent) 72%) 0%, color-mix(in srgb, var(--primary) 14%, var(--card) 86%) 100%) !important;
  color: var(--text-dark) !important;
}

.dark .oc-panel-shell .panel-topbar .panel-notification-trigger :is(.oc-dot, .oc-dot--count),
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-notification-trigger :is(.oc-dot, .oc-dot--count) {
  border-color: var(--card) !important;
  box-shadow: 0 4px 10px rgb(2 6 23 / 0.5) !important;
}

.dark .oc-panel-shell .panel-topbar .panel-profile-trigger,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-profile-trigger {
  border-color: color-mix(in srgb, var(--input-border) 82%, #0f172a 18%) !important;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 74%, #0f172a 26%) 0%, color-mix(in srgb, var(--card) 88%, #0f172a 12%) 100%) !important;
  box-shadow: 0 8px 18px rgb(2 6 23 / 0.32) !important;
}

.dark .oc-panel-shell .panel-topbar .panel-profile-trigger:hover,
.dark .oc-panel-shell .panel-topbar .panel-profile-trigger.is-open,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-profile-trigger:hover,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-profile-trigger.is-open {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--input-border) 52%) !important;
  background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 18%, var(--accent) 82%) 0%, color-mix(in srgb, var(--primary) 10%, var(--card) 90%) 100%) !important;
}

.dark .oc-panel-shell :is(a, .btn-lite, .btn-ok, .btn-bad, .oc-link),
:root[data-theme="dark"] .oc-panel-shell :is(a, .btn-lite, .btn-ok, .btn-bad, .oc-link) {
  color: var(--text-gray-700) !important;
}

.dark .oc-panel-shell .panel-sidebar .app-nav-item.is-active,
:root[data-theme="dark"] .oc-panel-shell .panel-sidebar .app-nav-item.is-active {
  color: var(--text-dark) !important;
  background: color-mix(in srgb, var(--primary) 20%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary) 42%, transparent) !important;
}

.dark .oc-panel-shell .panel-profile-popover,
.dark .oc-panel-shell .panel-profile-popover :is(.panel-profile-menu__item, .panel-profile-menu__label, .panel-profile-menu__text small, .panel-profile-header__identity h3, .panel-profile-header__identity p),
:root[data-theme="dark"] .oc-panel-shell .panel-profile-popover,
:root[data-theme="dark"] .oc-panel-shell .panel-profile-popover :is(.panel-profile-menu__item, .panel-profile-menu__label, .panel-profile-menu__text small, .panel-profile-header__identity h3, .panel-profile-header__identity p) {
  color: var(--text-gray-700) !important;
}

.dark .oc-panel-shell .panel-profile-popover,
:root[data-theme="dark"] .oc-panel-shell .panel-profile-popover {
  border-color: color-mix(in srgb, var(--border) 84%, #0f172a 16%) !important;
  background: color-mix(in srgb, var(--card) 90%, #0f172a 10%) !important;
  box-shadow: 0 22px 50px rgb(2 6 23 / 0.56), 0 8px 20px rgb(2 6 23 / 0.34) !important;
}

.dark .oc-panel-shell .panel-profile-popover .panel-profile-header,
:root[data-theme="dark"] .oc-panel-shell .panel-profile-popover .panel-profile-header {
  border-bottom-color: color-mix(in srgb, var(--border) 78%, #0f172a 22%) !important;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 56%, #0f172a 44%) 0%, color-mix(in srgb, var(--card) 84%, #0f172a 16%) 100%) !important;
}

.dark .oc-panel-shell .panel-profile-popover .panel-profile-menu__item,
:root[data-theme="dark"] .oc-panel-shell .panel-profile-popover .panel-profile-menu__item {
  border-color: transparent !important;
}

.dark .oc-panel-shell .panel-profile-popover .panel-profile-menu__item:hover,
:root[data-theme="dark"] .oc-panel-shell .panel-profile-popover .panel-profile-menu__item:hover {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border) 78%) !important;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 68%, #0f172a 32%) 0%, color-mix(in srgb, var(--card) 84%, #0f172a 16%) 100%) !important;
}

.dark .oc-panel-shell .panel-profile-popover .panel-profile-menu__icon,
:root[data-theme="dark"] .oc-panel-shell .panel-profile-popover .panel-profile-menu__icon {
  background: color-mix(in srgb, var(--accent) 62%, #0f172a 38%) !important;
  color: var(--text-gray-700) !important;
}

.dark .oc-panel-shell .panel-profile-popover .panel-profile-menu__item--logout,
:root[data-theme="dark"] .oc-panel-shell .panel-profile-popover .panel-profile-menu__item--logout {
  background: linear-gradient(160deg, color-mix(in srgb, #4d1f2d 58%, var(--card) 42%) 0%, color-mix(in srgb, #3f1b27 62%, var(--card) 38%) 100%) !important;
  border-color: color-mix(in srgb, #8f3c56 46%, var(--border) 54%) !important;
}

.dark .oc-panel-shell .panel-profile-popover .panel-profile-menu__item--logout:hover,
:root[data-theme="dark"] .oc-panel-shell .panel-profile-popover .panel-profile-menu__item--logout:hover {
  background: linear-gradient(160deg, color-mix(in srgb, #5a2535 66%, var(--card) 34%) 0%, color-mix(in srgb, #4a1f2d 68%, var(--card) 32%) 100%) !important;
}

.dark .oc-panel-shell .panel-profile-popover .panel-profile-menu__item--logout .panel-profile-menu__icon,
.dark .oc-panel-shell .panel-profile-popover .panel-profile-menu__item--logout:hover .panel-profile-menu__icon,
:root[data-theme="dark"] .oc-panel-shell .panel-profile-popover .panel-profile-menu__item--logout .panel-profile-menu__icon,
:root[data-theme="dark"] .oc-panel-shell .panel-profile-popover .panel-profile-menu__item--logout:hover .panel-profile-menu__icon {
  background: color-mix(in srgb, #7d344c 44%, var(--accent) 56%) !important;
  color: #ffd9e3 !important;
}

.dark .oc-panel-shell .panel-profile-popover .panel-profile-menu__item--logout :is(.panel-profile-menu__label, .panel-profile-menu__text small),
:root[data-theme="dark"] .oc-panel-shell .panel-profile-popover .panel-profile-menu__item--logout :is(.panel-profile-menu__label, .panel-profile-menu__text small) {
  color: #ffdce5 !important;
}

.dark .oc-panel-shell .panel-content :is(.portal-surface-card, .portal-section-card, .one-grid__card, .oc-page-header, .oc-dialog, .oc-dialog__header, .oc-dialog__body, .oc-dialog__footer),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(.portal-surface-card, .portal-section-card, .one-grid__card, .oc-page-header, .oc-dialog, .oc-dialog__header, .oc-dialog__body, .oc-dialog__footer) {
  background: var(--card) !important;
  border-color: var(--border) !important;
}

.dark .oc-panel-shell .panel-content :is(h1, h2, h3, h4, h5, h6, strong, b, .one-grid__th, .oc-dialog__heading h3, .portal-surface-card__title),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(h1, h2, h3, h4, h5, h6, strong, b, .one-grid__th, .oc-dialog__heading h3, .portal-surface-card__title) {
  color: var(--text-dark) !important;
  opacity: 1 !important;
}

.dark .oc-panel-shell .portal-dashboard-v2__header h2,
:root[data-theme="dark"] .oc-panel-shell .portal-dashboard-v2__header h2 {
  color: var(--text-dark) !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-dark) !important;
}

.dark .oc-panel-shell .panel-content :is(.portal-dashboard-v2__kpi-card, .portal-dashboard-v2__storage, .portal-dashboard-v2__recent-events, .portal-dashboard-v2__approval-alert),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(.portal-dashboard-v2__kpi-card, .portal-dashboard-v2__storage, .portal-dashboard-v2__recent-events, .portal-dashboard-v2__approval-alert) {
  background: color-mix(in srgb, var(--card) 94%, var(--accent) 6%) !important;
  border-color: color-mix(in srgb, var(--border) 88%, var(--primary) 12%) !important;
}

.dark .oc-panel-shell .panel-content :is(.portal-dashboard-v2__kpi-card p, .portal-dashboard-v2__kpi-card small, .portal-dashboard-v2__storage-caption, .portal-dashboard-v2__recent-main small, .portal-dashboard-v2__approval-text p),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(.portal-dashboard-v2__kpi-card p, .portal-dashboard-v2__kpi-card small, .portal-dashboard-v2__storage-caption, .portal-dashboard-v2__recent-main small, .portal-dashboard-v2__approval-text p) {
  color: var(--text-gray-700) !important;
  opacity: 1 !important;
}

.dark .oc-panel-shell .panel-content :is(
  .portal-kpi-card,
  .portal-kpi-card .portal-kpi-card__label,
  .portal-kpi-card .portal-kpi-card__value,
  .portal-kpi-card .portal-kpi-card__meta,
  .portal-surface-card__title,
  .portal-surface-card__description,
  .portal-dialog-note,
  .oc-dialog-form__field-error
),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(
  .portal-kpi-card,
  .portal-kpi-card .portal-kpi-card__label,
  .portal-kpi-card .portal-kpi-card__value,
  .portal-kpi-card .portal-kpi-card__meta,
  .portal-surface-card__title,
  .portal-surface-card__description,
  .portal-dialog-note,
  .oc-dialog-form__field-error
) {
  color: var(--text-gray-800) !important;
  opacity: 1 !important;
}

.dark .oc-panel-shell .panel-content :is(.btn-lite, .btn-ok, .btn-bad, .one-grid__btn, .oc-grid-action-btn),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(.btn-lite, .btn-ok, .btn-bad, .one-grid__btn, .oc-grid-action-btn) {
  border-color: color-mix(in srgb, var(--input-border) 86%, var(--border) 14%) !important;
  color: var(--text-gray-800) !important;
}

.dark .oc-panel-shell .panel-content :is(.portal-dashboard-v2__recent-item, .portal-dashboard-v2__storage-kpis div),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(.portal-dashboard-v2__recent-item, .portal-dashboard-v2__storage-kpis div) {
  background: color-mix(in srgb, var(--accent) 36%, var(--card) 64%) !important;
  border-color: color-mix(in srgb, var(--border) 84%, transparent) !important;
}

.dark .oc-panel-shell .panel-content :is(p, span, small, label, li, dt, dd, .one-grid__td, .one-grid__empty, .oc-dialog__heading p, .portal-surface-card__description),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(p, span, small, label, li, dt, dd, .one-grid__td, .one-grid__empty, .oc-dialog__heading p, .portal-surface-card__description) {
  color: var(--text-gray-700) !important;
  opacity: 1 !important;
}

.dark .oc-panel-shell .panel-content :is(.one-grid__th, .oc-data-grid__dropdown-head, .oc-data-grid__dropdown-item, .oc-row-menu__item, .one-grid__btn),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(.one-grid__th, .oc-data-grid__dropdown-head, .oc-data-grid__dropdown-item, .oc-row-menu__item, .one-grid__btn) {
  color: var(--text-gray-800) !important;
}

.dark .oc-panel-shell .panel-content :is(.oc-data-grid__dropdown-panel, .oc-row-menu__panel),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(.oc-data-grid__dropdown-panel, .oc-row-menu__panel) {
  background: color-mix(in srgb, var(--card) 94%, var(--accent) 6%) !important;
  border-color: var(--border) !important;
}

.dark .oc-panel-shell .panel-content :is(.one-grid__row--hover:hover, .one-grid__row--selected, .one-grid__row--active),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(.one-grid__row--hover:hover, .one-grid__row--selected, .one-grid__row--active) {
  background: color-mix(in srgb, var(--accent) 42%, var(--card) 58%) !important;
}

.dark .oc-panel-shell .panel-content :is(.one-grid__search-input, .one-grid__search .oc-input),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(.one-grid__search-input, .one-grid__search .oc-input) {
  color: var(--text-dark) !important;
  border-color: var(--input-border) !important;
  background: var(--input-background) !important;
}

.dark .oc-panel-shell .panel-content :is(.portal-payment-notice-form-card__steps li, .portal-payment-notice-form-card__summary-row dt, .portal-billing-notice-action__item > span),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(.portal-payment-notice-form-card__steps li, .portal-payment-notice-form-card__summary-row dt, .portal-billing-notice-action__item > span) {
  color: var(--text-gray-700) !important;
}

.dark .oc-panel-shell .panel-content :is(.portal-payment-notice-form-card__summary-row dd, .portal-billing-notice-action__item > strong),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(.portal-payment-notice-form-card__summary-row dd, .portal-billing-notice-action__item > strong) {
  color: var(--text-dark) !important;
}

.dark .oc-panel-shell .panel-content :is(input, select, textarea, .oc-input, .oc-select, .oc-textarea),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(input, select, textarea, .oc-input, .oc-select, .oc-textarea) {
  background: var(--input-background) !important;
  border-color: var(--input-border) !important;
  color: var(--text-dark) !important;
}

.dark .oc-panel-shell .panel-content :is(.designer-toolbar-card, .designer-inspector, .designer-layers, .designer-tool-group, .inspector-block, .layer-item, .designer-canvas-host),
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(.designer-toolbar-card, .designer-inspector, .designer-layers, .designer-tool-group, .inspector-block, .layer-item, .designer-canvas-host) {
  background: color-mix(in srgb, var(--card) 92%, var(--accent) 8%) !important;
  border-color: color-mix(in srgb, var(--border) 86%, var(--primary) 14%) !important;
}

.dark .oc-panel-shell .panel-content .designer-canvas-host .konvajs-content,
:root[data-theme="dark"] .oc-panel-shell .panel-content .designer-canvas-host .konvajs-content {
  background: #ffffff !important;
}

.dark .oc-panel-shell .panel-content :is(input, select, textarea, .oc-input, .oc-select, .oc-textarea)::placeholder,
:root[data-theme="dark"] .oc-panel-shell .panel-content :is(input, select, textarea, .oc-input, .oc-select, .oc-textarea)::placeholder {
  color: var(--text-gray-600) !important;
  opacity: 1 !important;
}

.dark .oc-panel-shell .panel-topbar .panel-language-select,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-language-select {
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 72%, #0f172a 28%) 0%, color-mix(in srgb, var(--card) 88%, #0f172a 12%) 100%) !important;
  border-color: color-mix(in srgb, var(--input-border) 82%, #0f172a 18%) !important;
  color: var(--text-dark) !important;
}

/* -------------------------------------------------------------------------- */
/* Topbar refinement (language + controls + profile menu) */
/* -------------------------------------------------------------------------- */
.oc-panel-shell .panel-topbar .oc-topbar__right {
  gap: 0.56rem !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__right > .oc-topbar__item {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__item--profile {
  margin-left: 0.26rem !important;
  padding-left: 0.68rem !important;
  border-left: 1px solid color-mix(in srgb, var(--border) 78%, transparent) !important;
}

.oc-panel-shell .panel-topbar :is(.panel-language-select, .panel-icon-btn, .panel-profile-trigger) {
  border-color: #d2deee !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.06) !important;
}

.oc-panel-shell .panel-topbar .panel-language-select {
  min-width: 68px !important;
  height: 38px !important;
  padding: 0 1.75rem 0 0.72rem !important;
  border-radius: 12px !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.015em !important;
  color: #334b6f !important;
  background-size: 5px 5px, 5px 5px !important;
  background-position: calc(100% - 13px) 15px, calc(100% - 8px) 15px !important;
}

.oc-panel-shell .panel-topbar .panel-icon-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  color: #4f6484 !important;
}

.oc-panel-shell .panel-topbar .panel-theme-trigger .theme-icon--moon {
  color: #3f5f8e !important;
}

.oc-panel-shell .panel-topbar .panel-theme-trigger .theme-icon--sun {
  color: #d18b16 !important;
}

.oc-panel-shell .panel-topbar :is(.panel-language-select:hover, .panel-icon-btn:hover, .panel-profile-trigger:hover) {
  border-color: color-mix(in srgb, var(--primary) 34%, #d2deee 66%) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f2f8ff 100%) !important;
}

.oc-panel-shell .panel-topbar :is(.panel-icon-btn.is-open, .panel-icon-btn.is-active, .panel-profile-trigger.is-open) {
  border-color: color-mix(in srgb, var(--primary) 38%, #c3d6ee 62%) !important;
  background: linear-gradient(180deg, #fafdff 0%, #eaf4ff 100%) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 10%, transparent), 0 6px 16px rgb(15 23 42 / 0.1) !important;
}

.oc-panel-shell .panel-topbar :is(.panel-language-select:focus-visible, .panel-icon-btn:focus-visible, .panel-profile-trigger:focus-visible) {
  outline: none !important;
  border-color: color-mix(in srgb, var(--primary) 52%, #b8cde7 48%) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent), 0 6px 16px rgb(15 23 42 / 0.12) !important;
}

.oc-panel-shell .panel-topbar .panel-notification-trigger .oc-dot--count {
  min-width: 19px !important;
  height: 19px !important;
  padding: 0 5px !important;
  top: -4px !important;
  right: -5px !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  border: 2px solid #ffffff !important;
  background: linear-gradient(165deg, #f35c79 0%, #de3e62 100%) !important;
  box-shadow: 0 4px 10px rgb(222 62 98 / 0.3) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger {
  min-height: 38px !important;
  max-width: 300px !important;
  border-radius: 14px !important;
  padding: 4px 10px !important;
  gap: 10px !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__avatar {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 14px rgb(47 126 240 / 0.24) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta strong {
  font-size: 0.91rem !important;
  font-weight: 650 !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta small {
  font-size: 0.72rem !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger > :is(.one-svg, svg),
.oc-panel-shell .panel-topbar .panel-profile-trigger > span > :is(.one-svg, svg) {
  width: 14px !important;
  height: 14px !important;
  color: #7b8faa !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover {
  width: min(356px, calc(100vw - 18px)) !important;
  border: 1px solid #d9e5f5 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 42px rgb(15 23 42 / 0.14), 0 6px 18px rgb(15 23 42 / 0.08) !important;
  overflow: hidden !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-header {
  padding: 14px 16px 13px !important;
  border-bottom: 1px solid #e7eef8 !important;
  background: linear-gradient(165deg, #ffffff 0%, #f4f9ff 100%) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-header__avatar {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  border-radius: 12px !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-header__identity h3 {
  font-size: 1rem !important;
  color: #1f2e47 !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-header__identity p {
  font-size: 0.75rem !important;
  color: #6f82a0 !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-role-pill {
  min-height: 24px !important;
  font-size: 0.67rem !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu {
  padding: 10px 10px 10px !important;
  gap: 0 !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__item {
  min-height: 50px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  margin: 0 0 6px !important;
  padding: 9px 11px !important;
  background: #ffffff !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__item + .panel-profile-menu__item:not(.panel-profile-menu__item--separated):not(.panel-profile-menu__item--logout) {
  border-top: 1px solid transparent !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__item:hover {
  border-color: #d8e4f4 !important;
  background: linear-gradient(170deg, #f9fbff 0%, #f1f7ff 100%) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__item--primary {
  border-color: #d4e3f5 !important;
  background: linear-gradient(170deg, #f6faff 0%, #edf5ff 100%) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__item--primary .panel-profile-menu__icon {
  background: linear-gradient(165deg, #eaf3ff 0%, #dceaff 100%) !important;
  color: #2f7fdf !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__icon {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  border-radius: 10px !important;
  background: #eef3fa !important;
  color: #5f748f !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__label {
  font-size: 0.91rem !important;
  font-weight: 650 !important;
  color: #1f2e47 !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__text small {
  font-size: 0.74rem !important;
  color: #7083a0 !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__item--separated {
  margin-top: 2px !important;
  padding-top: 9px !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__item--logout,
.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__item--logout:hover {
  min-height: 52px !important;
  margin: 0 !important;
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--destructive) 10%) !important;
  border-radius: 16px !important;
  padding: 11px 13px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, var(--accent) 4%) 0%, color-mix(in srgb, var(--card) 92%, var(--accent) 8%) 100%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.52) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__item--logout:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, var(--destructive-light) 6%) 0%, color-mix(in srgb, var(--card) 86%, var(--destructive-light) 14%) 100%) !important;
  border-color: color-mix(in srgb, var(--border) 74%, var(--destructive) 26%) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__item--logout .panel-profile-menu__icon,
.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__item--logout:hover .panel-profile-menu__icon {
  background: linear-gradient(180deg, color-mix(in srgb, var(--destructive-light) 34%, var(--card) 66%) 0%, color-mix(in srgb, var(--accent) 76%, var(--card) 24%) 100%) !important;
  color: color-mix(in srgb, var(--destructive) 64%, var(--text-gray-700) 36%) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__item--logout :is(.panel-profile-menu__label, .panel-profile-menu__text small) {
  color: var(--text-dark) !important;
}

.dark .oc-panel-shell .panel-topbar :is(.panel-language-select, .panel-icon-btn, .panel-profile-trigger),
:root[data-theme="dark"] .oc-panel-shell .panel-topbar :is(.panel-language-select, .panel-icon-btn, .panel-profile-trigger) {
  border-color: color-mix(in srgb, var(--input-border) 84%, #0f172a 16%) !important;
  background: linear-gradient(170deg, color-mix(in srgb, var(--accent) 70%, #0f172a 30%) 0%, color-mix(in srgb, var(--card) 88%, #0f172a 12%) 100%) !important;
  box-shadow: 0 6px 16px rgb(2 6 23 / 0.34) !important;
}

.dark .oc-panel-shell .panel-topbar :is(.panel-language-select:hover, .panel-icon-btn:hover, .panel-profile-trigger:hover, .panel-icon-btn.is-open, .panel-icon-btn.is-active, .panel-profile-trigger.is-open),
:root[data-theme="dark"] .oc-panel-shell .panel-topbar :is(.panel-language-select:hover, .panel-icon-btn:hover, .panel-profile-trigger:hover, .panel-icon-btn.is-open, .panel-icon-btn.is-active, .panel-profile-trigger.is-open) {
  border-color: color-mix(in srgb, var(--primary) 44%, var(--input-border) 56%) !important;
  background: linear-gradient(170deg, color-mix(in srgb, var(--primary) 24%, var(--accent) 76%) 0%, color-mix(in srgb, var(--primary) 12%, var(--card) 88%) 100%) !important;
}

.dark .oc-panel-shell .panel-topbar .panel-notification-trigger .oc-dot--count,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-notification-trigger .oc-dot--count {
  border-color: #18263d !important;
}

.dark .oc-panel-shell .panel-topbar .panel-profile-popover,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-profile-popover {
  border-color: color-mix(in srgb, var(--border) 82%, #0f172a 18%) !important;
  background: color-mix(in srgb, var(--card) 92%, #0f172a 8%) !important;
}

.dark .oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-header,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-header {
  border-bottom-color: color-mix(in srgb, var(--border) 78%, #0f172a 22%) !important;
  background: linear-gradient(170deg, color-mix(in srgb, var(--accent) 62%, #0f172a 38%) 0%, color-mix(in srgb, var(--card) 86%, #0f172a 14%) 100%) !important;
}

.dark .oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__item,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__item {
  background: transparent !important;
  border-color: transparent !important;
}

.dark .oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__item:hover,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__item:hover {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border) 76%) !important;
  background: color-mix(in srgb, var(--accent) 58%, var(--card) 42%) !important;
}

.dark .oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__item--logout,
.dark .oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__item--logout:hover,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__item--logout,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-menu__item--logout:hover {
  border-color: color-mix(in srgb, #8f3d57 48%, var(--border) 52%) !important;
  background: linear-gradient(170deg, color-mix(in srgb, #4e1f2e 62%, var(--card) 38%) 0%, color-mix(in srgb, #3f1a28 66%, var(--card) 34%) 100%) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-footer .panel-profile-menu__item--logout,
.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-footer .panel-profile-menu__item--logout:hover {
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-footer .panel-profile-menu__item--logout:hover {
  background: color-mix(in srgb, var(--destructive-light) 16%, var(--card) 84%) !important;
  border-color: transparent !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-footer .panel-profile-footer__button.btn-bad {
  border-color: color-mix(in srgb, var(--destructive) 22%, var(--border) 78%) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--destructive-light) 76%, #ffffff 24%) 0%, color-mix(in srgb, var(--destructive-light) 88%, #ffffff 12%) 100%) !important;
  color: color-mix(in srgb, var(--destructive) 86%, var(--text-dark) 14%) !important;
  box-shadow:
    0 10px 22px rgb(233 93 123 / 0.12),
    inset 0 1px 0 rgb(255 255 255 / 0.72) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-popover .panel-profile-footer .panel-profile-footer__button.btn-bad:hover {
  border-color: color-mix(in srgb, var(--destructive) 34%, var(--border) 66%) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--destructive-light) 88%, #ffffff 12%) 0%, color-mix(in srgb, var(--destructive-light) 96%, #ffffff 4%) 100%) !important;
  color: var(--destructive) !important;
}

/* -------------------------------------------------------------------------- */
/* Responsive */
/* -------------------------------------------------------------------------- */
@media (min-width: 1700px) {
  .oc-panel-shell .panel-content .portal-payment-notifications-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 380px) !important;
  }

  .oc-panel-shell .panel-content .portal-payment-notice-history-card {
    grid-column: 1 !important;
  }

  .oc-panel-shell .panel-content .portal-payment-notifications-aside {
    grid-column: 2 !important;
  }
}

@media (max-width: 1699px) {
  .oc-panel-shell .panel-content .portal-payment-notifications-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .oc-panel-shell .panel-content .portal-payment-notice-history-card,
  .oc-panel-shell .panel-content .portal-payment-notifications-aside {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 1200px) {
  .oc-panel-shell .panel-content :is(.one-grid, .oc-data-grid, .portal-grid-table) .one-grid__toolbar-row > div {
    grid-template-columns: 1fr !important;
  }

  .oc-panel-shell .panel-content :is(.one-grid, .oc-data-grid, .portal-grid-table) .one-grid__toolbar-row > div > .ml-auto {
    justify-self: start !important;
  }

  .oc-panel-shell .panel-content .designer-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 980px) {
  .oc-panel-shell .oc-dialog.portal-payment-notice-dialog .portal-payment-notice-form :is(
    .portal-payment-notice-field,
    .portal-payment-notice-field--amount,
    .portal-payment-notice-field--currency,
    .portal-payment-notice-field--paid-date,
    .portal-payment-notice-field--reference,
    .portal-payment-notice-field--attachment,
    .oc-dialog-field
  ),
  .oc-panel-shell .oc-dialog.portal-billing-dialog .portal-billing-form :is(
    .portal-billing-field,
    .portal-billing-field--amount,
    .portal-billing-field--currency,
    .portal-billing-field--due-days,
    .portal-billing-field--line-description,
    .oc-dialog-field
  ),
  .oc-panel-shell .oc-dialog.portal-accounting-dialog .portal-accounting-dialog-form .oc-dialog-field,
  .oc-panel-shell .oc-dialog.portal-receiving-dialog .portal-receiving-dialog-form .oc-dialog-field {
    grid-column: 1 / -1 !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Topbar premium refresh (language + notify + profile) */
/* -------------------------------------------------------------------------- */
.oc-panel-shell .panel-topbar .panel-topbar-right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.2rem 0.28rem !important;
  border-radius: 16px !important;
  border: 1px solid color-mix(in srgb, var(--border) 82%, #d6e4f6 18%) !important;
  background: linear-gradient(160deg, #ffffff 0%, #f7fbff 100%) !important;
  box-shadow: 0 10px 22px rgb(15 23 42 / 0.08) !important;
}

.oc-panel-shell .panel-topbar .panel-topbar-right > .oc-topbar__item {
  min-height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__item--profile {
  margin-left: 0.1rem !important;
  padding-left: 0 !important;
  border-left: 0 !important;
}

.oc-panel-shell .panel-topbar .panel-language-select {
  min-width: 78px !important;
  height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid #cfddf0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%) !important;
  color: #314a70 !important;
  font-size: 0.79rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 0 1.78rem 0 0.72rem !important;
  background-size: 5px 5px, 5px 5px !important;
  background-position: calc(100% - 13px) 16px, calc(100% - 8px) 16px !important;
  box-shadow: 0 3px 10px rgb(15 23 42 / 0.08) !important;
}

.oc-panel-shell .panel-topbar .panel-icon-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid #d4e0f1 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%) !important;
  color: #516787 !important;
  box-shadow: 0 3px 10px rgb(15 23 42 / 0.08) !important;
}

.oc-panel-shell .panel-topbar .panel-icon-btn :is(svg, .one-svg) {
  width: 17px !important;
  height: 17px !important;
}

.oc-panel-shell .panel-topbar .panel-theme-trigger .theme-icon--moon {
  color: #325a92 !important;
}

.oc-panel-shell .panel-topbar .panel-theme-trigger .theme-icon--sun {
  color: #d28717 !important;
}

.oc-panel-shell .panel-topbar .panel-notification-trigger .oc-dot--count {
  min-width: 18px !important;
  height: 18px !important;
  top: -4px !important;
  right: -5px !important;
  border: 2px solid #ffffff !important;
  font-size: 0.63rem !important;
  font-weight: 700 !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger {
  min-height: 48px !important;
  max-width: min(360px, calc(100vw - 120px)) !important;
  border-radius: 14px !important;
  border: 1px solid #cfddf0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f5faff 100%) !important;
  box-shadow: 0 6px 16px rgb(15 23 42 / 0.1) !important;
  padding: 5px 10px !important;
  gap: 10px !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__avatar {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  border-radius: 10px !important;
  background: linear-gradient(160deg, #3798ff 0%, #1f79e2 100%) !important;
  box-shadow: 0 8px 16px rgb(47 126 240 / 0.26) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__avatar :is(svg, .one-svg) {
  width: 16px !important;
  height: 16px !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta {
  min-width: 0 !important;
  display: grid !important;
  gap: 1px !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta :is(strong, small) {
  max-width: 230px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta strong {
  color: #1f2e47 !important;
  font-size: 0.93rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta small {
  color: #6f82a0 !important;
  font-size: 0.73rem !important;
  line-height: 1.1 !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger > :is(.one-svg, svg),
.oc-panel-shell .panel-topbar .panel-profile-trigger > span > :is(.one-svg, svg) {
  width: 14px !important;
  height: 14px !important;
  color: #798ba6 !important;
}

.oc-panel-shell .panel-topbar :is(.panel-language-select:hover, .panel-icon-btn:hover, .panel-profile-trigger:hover) {
  border-color: color-mix(in srgb, var(--primary) 36%, #ccdbef 64%) !important;
  background: linear-gradient(180deg, #ffffff 0%, #edf6ff 100%) !important;
}

.oc-panel-shell .panel-topbar :is(.panel-language-select:focus-visible, .panel-icon-btn:focus-visible, .panel-profile-trigger:focus-visible) {
  outline: none !important;
  border-color: color-mix(in srgb, var(--primary) 52%, #bfd2ea 48%) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent), 0 10px 20px rgb(15 23 42 / 0.12) !important;
}

.oc-panel-shell .panel-topbar :is(.panel-icon-btn.is-open, .panel-icon-btn.is-active, .panel-profile-trigger.is-open) {
  border-color: color-mix(in srgb, var(--primary) 44%, #c9dbf1 56%) !important;
  background: linear-gradient(180deg, #fafdff 0%, #e9f4ff 100%) !important;
}

.dark .oc-panel-shell .panel-topbar .panel-topbar-right,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-topbar-right {
  border-color: color-mix(in srgb, var(--border) 82%, #0f172a 18%) !important;
  background: linear-gradient(
    170deg,
    color-mix(in srgb, var(--accent) 58%, #0f172a 42%) 0%,
    color-mix(in srgb, var(--card) 84%, #0f172a 16%) 100%
  ) !important;
  box-shadow: 0 12px 28px rgb(2 6 23 / 0.34) !important;
}

@media (max-width: 980px) {
  .oc-panel-shell .panel-topbar .panel-topbar-right {
    gap: 0.38rem !important;
    padding: 0.14rem 0.2rem !important;
  }

  .oc-panel-shell .panel-topbar .panel-language-select {
    min-width: 66px !important;
    height: 36px !important;
    padding-inline: 0.62rem 1.58rem !important;
  }

  .oc-panel-shell .panel-topbar .panel-icon-btn {
    width: 36px !important;
    height: 36px !important;
  }

  .oc-panel-shell .panel-topbar .panel-profile-trigger {
    min-height: 42px !important;
    max-width: min(260px, calc(100vw - 96px)) !important;
    padding: 4px 8px !important;
    gap: 8px !important;
  }

  .oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__avatar {
    width: 31px !important;
    height: 31px !important;
    flex-basis: 31px !important;
    border-radius: 9px !important;
  }

  .oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta small {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Topbar professional pass v2 (theme + language + notify + profile) */
/* -------------------------------------------------------------------------- */
.oc-panel-shell .panel-topbar .panel-topbar-right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.52rem !important;
  padding: 0.32rem !important;
  border-radius: 18px !important;
  border: 1px solid color-mix(in srgb, var(--border) 82%, #d3e0f1 18%) !important;
  background: linear-gradient(165deg, #ffffff 0%, #f5f9ff 100%) !important;
  box-shadow: 0 12px 26px rgb(15 23 42 / 0.1) !important;
  backdrop-filter: blur(8px) !important;
}

.oc-panel-shell .panel-topbar .panel-topbar-right > .oc-topbar__item {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: auto !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__item--profile {
  margin-left: 0.08rem !important;
  padding-left: 0.56rem !important;
  border-left: 1px solid color-mix(in srgb, var(--border) 90%, transparent) !important;
}

.oc-panel-shell .panel-topbar .panel-language-select {
  min-width: 76px !important;
  height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid #cfddf0 !important;
  padding: 0 1.92rem 0 0.82rem !important;
  color: #2f466c !important;
  font-size: 0.79rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: #f8fbff !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #5f7598 50%),
    linear-gradient(135deg, #5f7598 50%, transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f1f6ff 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 5px 5px, 5px 5px, 100% 100% !important;
  background-position: calc(100% - 14px) 18px, calc(100% - 9px) 18px, 0 0 !important;
  box-shadow: 0 4px 11px rgb(15 23 42 / 0.08) !important;
}

.oc-panel-shell .panel-topbar .panel-language-select::-ms-expand {
  display: none !important;
}

.oc-panel-shell .panel-topbar .panel-icon-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid #d2dff0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f1f7ff 100%) !important;
  color: #4d6487 !important;
  box-shadow: 0 4px 11px rgb(15 23 42 / 0.08) !important;
  position: relative !important;
}

.oc-panel-shell .panel-topbar .panel-icon-btn > :is(svg, .one-svg) {
  width: 17px !important;
  height: 17px !important;
}

.oc-panel-shell .panel-topbar .panel-theme-trigger {
  position: relative !important;
}

.oc-panel-shell .panel-topbar .panel-theme-trigger .theme-icon {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(1) !important;
  transition: opacity 150ms ease, transform 150ms ease !important;
}

.oc-panel-shell .panel-topbar .panel-theme-trigger .theme-icon--moon {
  color: #355f94 !important;
  opacity: 1 !important;
}

.oc-panel-shell .panel-topbar .panel-theme-trigger .theme-icon--sun {
  color: #c8841d !important;
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(0.78) !important;
}

.oc-panel-shell .panel-topbar .panel-theme-trigger.is-active .theme-icon--moon {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(0.78) !important;
}

.oc-panel-shell .panel-topbar .panel-theme-trigger.is-active .theme-icon--sun {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.oc-panel-shell .panel-topbar .panel-notification-trigger .oc-dot--count {
  min-width: 19px !important;
  height: 19px !important;
  top: -5px !important;
  right: -5px !important;
  border-radius: 999px !important;
  border: 2px solid #ffffff !important;
  background: linear-gradient(155deg, #f45f83 0%, #df375f 100%) !important;
  color: #ffffff !important;
  font-size: 0.63rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: 0 4px 10px rgb(223 55 95 / 0.33) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger {
  min-height: 50px !important;
  max-width: min(370px, calc(100vw - 116px)) !important;
  padding: 6px 10px 6px 8px !important;
  gap: 10px !important;
  border-radius: 14px !important;
  border: 1px solid #ccdced !important;
  background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%) !important;
  box-shadow: 0 7px 16px rgb(15 23 42 / 0.1) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__avatar {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  border-radius: 10px !important;
  background: linear-gradient(155deg, #3b9aff 0%, #1e78e0 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgb(47 126 240 / 0.28) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__avatar :is(svg, .one-svg) {
  width: 16px !important;
  height: 16px !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta {
  min-width: 0 !important;
  display: grid !important;
  gap: 1px !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta :is(strong, small) {
  max-width: 230px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta strong {
  color: #1f2f49 !important;
  font-size: 0.93rem !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta small {
  color: #6d81a1 !important;
  font-size: 0.73rem !important;
  line-height: 1.12 !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger > :is(.one-svg, svg),
.oc-panel-shell .panel-topbar .panel-profile-trigger > span > :is(.one-svg, svg) {
  width: 14px !important;
  height: 14px !important;
  color: #778ca9 !important;
}

.oc-panel-shell .panel-topbar :is(.panel-language-select:hover, .panel-icon-btn:hover, .panel-profile-trigger:hover) {
  border-color: color-mix(in srgb, var(--primary) 38%, #c9daee 62%) !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #eaf4ff 100%) !important;
}

.oc-panel-shell .panel-topbar :is(.panel-icon-btn.is-open, .panel-icon-btn.is-active, .panel-profile-trigger.is-open) {
  border-color: color-mix(in srgb, var(--primary) 48%, #c1d6ee 52%) !important;
  background-image: linear-gradient(180deg, #fafdff 0%, #e5f2ff 100%) !important;
}

.oc-panel-shell .panel-topbar :is(.panel-language-select:focus-visible, .panel-icon-btn:focus-visible, .panel-profile-trigger:focus-visible) {
  outline: none !important;
  border-color: color-mix(in srgb, var(--primary) 56%, #b9cfea 44%) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent), 0 10px 20px rgb(15 23 42 / 0.14) !important;
}

.dark .oc-panel-shell .panel-topbar .panel-topbar-right,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-topbar-right {
  border-color: color-mix(in srgb, var(--border) 82%, #0f172a 18%) !important;
  background: linear-gradient(
    170deg,
    color-mix(in srgb, var(--accent) 58%, #0f172a 42%) 0%,
    color-mix(in srgb, var(--card) 84%, #0f172a 16%) 100%
  ) !important;
  box-shadow: 0 14px 30px rgb(2 6 23 / 0.36) !important;
}

.dark .oc-panel-shell .panel-topbar :is(.panel-language-select, .panel-icon-btn, .panel-profile-trigger),
:root[data-theme="dark"] .oc-panel-shell .panel-topbar :is(.panel-language-select, .panel-icon-btn, .panel-profile-trigger) {
  border-color: color-mix(in srgb, var(--border) 80%, #1f2d48 20%) !important;
  background: linear-gradient(175deg, color-mix(in srgb, var(--card) 86%, #111827 14%) 0%, color-mix(in srgb, var(--accent) 62%, #0b1220 38%) 100%) !important;
  color: color-mix(in srgb, #dce7fb 86%, #9eb1cf 14%) !important;
}

.dark .oc-panel-shell .panel-topbar .panel-language-select,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-language-select {
  background-image:
    linear-gradient(45deg, transparent 50%, #9fb4d4 50%),
    linear-gradient(135deg, #9fb4d4 50%, transparent 50%),
    linear-gradient(180deg, color-mix(in srgb, var(--card) 84%, #0f172a 16%) 0%, color-mix(in srgb, var(--accent) 62%, #0f172a 38%) 100%) !important;
}

.dark .oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta strong,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta strong {
  color: #e7eefb !important;
}

.dark .oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta small,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta small {
  color: #a7bad7 !important;
}

.dark .oc-panel-shell .panel-topbar .panel-notification-trigger .oc-dot--count,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-notification-trigger .oc-dot--count {
  border-color: color-mix(in srgb, var(--card) 84%, #111827 16%) !important;
}

.dark .oc-panel-shell .panel-topbar :is(.panel-language-select:hover, .panel-icon-btn:hover, .panel-profile-trigger:hover, .panel-icon-btn.is-open, .panel-icon-btn.is-active, .panel-profile-trigger.is-open),
:root[data-theme="dark"] .oc-panel-shell .panel-topbar :is(.panel-language-select:hover, .panel-icon-btn:hover, .panel-profile-trigger:hover, .panel-icon-btn.is-open, .panel-icon-btn.is-active, .panel-profile-trigger.is-open) {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border) 66%) !important;
  background: linear-gradient(175deg, color-mix(in srgb, var(--accent) 66%, #0f172a 34%) 0%, color-mix(in srgb, var(--card) 82%, #0f172a 18%) 100%) !important;
}

@media (max-width: 1120px) {
  .oc-panel-shell .panel-topbar .panel-profile-trigger {
    max-width: min(300px, calc(100vw - 104px)) !important;
  }
}

@media (max-width: 980px) {
  .oc-panel-shell .panel-topbar .panel-topbar-right {
    gap: 0.4rem !important;
    padding: 0.18rem 0.24rem !important;
    border-radius: 14px !important;
  }

  .oc-panel-shell .panel-topbar .panel-language-select,
  .oc-panel-shell .panel-topbar .panel-icon-btn {
    height: 37px !important;
  }

  .oc-panel-shell .panel-topbar .panel-language-select {
    min-width: 68px !important;
    padding-inline: 0.62rem 1.56rem !important;
    background-position: calc(100% - 12px) 15px, calc(100% - 7px) 15px, 0 0 !important;
  }

  .oc-panel-shell .panel-topbar .panel-icon-btn {
    width: 37px !important;
  }

  .oc-panel-shell .panel-topbar .panel-profile-trigger {
    min-height: 43px !important;
    max-width: min(250px, calc(100vw - 92px)) !important;
    padding: 4px 8px 4px 6px !important;
    gap: 8px !important;
  }

  .oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__avatar {
    width: 31px !important;
    height: 31px !important;
    flex-basis: 31px !important;
    border-radius: 9px !important;
  }

  .oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta small {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .oc-panel-shell .panel-topbar .oc-topbar__item--profile {
    padding-left: 0.3rem !important;
    border-left-width: 0 !important;
  }

  .oc-panel-shell .panel-topbar .panel-profile-trigger {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 37px !important;
    padding: 3px !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  .oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta,
  .oc-panel-shell .panel-topbar .panel-profile-trigger > :is(.one-svg, svg),
  .oc-panel-shell .panel-topbar .panel-profile-trigger > span > :is(.one-svg, svg) {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* UI layout topbar alignment */
/* -------------------------------------------------------------------------- */
.oc-panel-shell .panel-topbar .panel-topbar-right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.oc-panel-shell .panel-topbar .panel-topbar-right > .oc-topbar__item {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: auto !important;
}

.oc-panel-shell .panel-topbar .oc-topbar__item--profile {
  margin-left: 0.25rem !important;
  padding-left: 0.75rem !important;
  border-left: 1px solid color-mix(in srgb, var(--border) 90%, transparent) !important;
}

.oc-panel-shell .panel-topbar .panel-language-select {
  min-width: 58px !important;
  height: 40px !important;
  padding: 0 1.85rem 0 0.9rem !important;
  border-radius: 12px !important;
  border: 1px solid color-mix(in srgb, var(--border) 82%, #d8e2f0 18%) !important;
  background-color: var(--card) !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #7084a6 50%),
    linear-gradient(135deg, #7084a6 50%, transparent 50%) !important;
  background-repeat: no-repeat !important;
  background-size: 5px 5px, 5px 5px !important;
  background-position: calc(100% - 14px) 17px, calc(100% - 9px) 17px !important;
  box-shadow: 0 6px 16px rgb(15 23 42 / 0.06) !important;
  color: var(--text-dark) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

.oc-panel-shell .panel-topbar .panel-language-select::-ms-expand {
  display: none !important;
}

.oc-panel-shell .panel-topbar .panel-icon-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #556b8d !important;
  box-shadow: none !important;
}

.oc-panel-shell .panel-topbar .panel-icon-btn > :is(svg, .one-svg) {
  width: 18px !important;
  height: 18px !important;
}

.oc-panel-shell .panel-topbar .panel-theme-trigger {
  position: relative !important;
}

.oc-panel-shell .panel-topbar .panel-theme-trigger .theme-icon {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(1) !important;
  transition: opacity 160ms ease, transform 160ms ease !important;
}

.oc-panel-shell .panel-topbar .panel-theme-trigger .theme-icon--moon {
  opacity: 1 !important;
  color: #4c6488 !important;
}

.oc-panel-shell .panel-topbar .panel-theme-trigger .theme-icon--sun {
  opacity: 0 !important;
  color: #cb8e22 !important;
  transform: translate(-50%, -50%) scale(0.78) !important;
}

.oc-panel-shell .panel-topbar .panel-theme-trigger.is-active .theme-icon--moon {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(0.78) !important;
}

.oc-panel-shell .panel-topbar .panel-theme-trigger.is-active .theme-icon--sun {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.oc-panel-shell .panel-topbar .panel-notification-trigger {
  position: relative !important;
}

.oc-panel-shell .panel-topbar .oc-topbar-action-button.panel-notification-trigger {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  border: 1px solid #dbe5f2 !important;
  background: linear-gradient(150deg, #ffffff 0%, #f5f9ff 100%) !important;
  color: #5b708f !important;
  box-shadow: 0 10px 18px rgb(15 23 42 / 0.07), inset 0 1px 0 rgb(255 255 255 / 0.86) !important;
}

.oc-panel-shell .panel-topbar .oc-topbar-action-button.panel-notification-trigger:hover,
.oc-panel-shell .panel-topbar .oc-topbar-action-button.panel-notification-trigger.is-open {
  border-color: color-mix(in srgb, var(--primary) 34%, #dbe5f2 66%) !important;
  background: linear-gradient(150deg, #ffffff 0%, #eaf3ff 100%) !important;
  color: #1f5ea8 !important;
  box-shadow: 0 14px 24px rgb(37 99 235 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.92) !important;
  transform: translateY(-1px) !important;
}

.oc-panel-shell .panel-topbar .panel-notification-trigger .oc-dot--count {
  min-width: 18px !important;
  height: 18px !important;
  top: 1px !important;
  right: 1px !important;
  border-radius: 999px !important;
  border: 2px solid var(--card) !important;
  background: linear-gradient(135deg, #fb7185 0%, #ef4444 100%) !important;
  color: #ffffff !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: 0 8px 14px rgb(239 68 68 / 0.22) !important;
}

.oc-panel-shell .panel-topbar .oc-topbar-action-button.panel-notification-trigger .oc-topbar-action-button__badge {
  top: -4px !important;
  right: -4px !important;
  min-width: 19px !important;
  height: 19px !important;
  padding: 0 5px !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ff8090 0%, #ef4444 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgb(239 68 68 / 0.28) !important;
  font-size: 0.63rem !important;
  font-weight: 800 !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer__header {
  padding: 1rem 1.05rem 0.92rem !important;
  background:
    radial-gradient(circle at top left, rgb(94 162 255 / 0.16) 0%, transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, #ffffff 96%, var(--primary-light) 4%) 0%, color-mix(in srgb, #ffffff 90%, var(--accent) 10%) 100%) !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer__body {
  padding: 0.9rem 0.95rem 0.76rem !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer__list {
  gap: 0.68rem !important;
}

.oc-panel-shell .panel-topbar .panel-notification-drawer .one-notifications-list__item {
  border: 1px solid transparent !important;
  border-radius: 18px !important;
  padding: 0.9rem 0.92rem 0.84rem 1rem !important;
  box-shadow: 0 10px 24px rgb(15 23 42 / 0.05), inset 0 1px 0 rgb(255 255 255 / 0.86) !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger {
  min-height: 44px !important;
  max-width: min(348px, calc(100vw - 120px)) !important;
  padding: 6px 8px !important;
  gap: 10px !important;
  border-radius: 14px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__avatar {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border-radius: 10px !important;
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  box-shadow: none !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__avatar :is(svg, .one-svg) {
  width: 15px !important;
  height: 15px !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta :is(strong, small) {
  max-width: 230px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta strong {
  color: var(--text-dark) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta small {
  color: var(--text-gray-600) !important;
  font-size: 0.76rem !important;
  line-height: 1.1 !important;
}

.oc-panel-shell .panel-topbar .panel-profile-trigger > :is(.one-svg, svg),
.oc-panel-shell .panel-topbar .panel-profile-trigger > span > :is(.one-svg, svg) {
  width: 14px !important;
  height: 14px !important;
  color: #7b8da9 !important;
}

.oc-panel-shell .panel-topbar :is(.panel-language-select:hover, .panel-profile-trigger:hover, .panel-profile-trigger.is-open) {
  background-color: color-mix(in srgb, var(--accent) 72%, #ffffff 28%) !important;
  border-color: color-mix(in srgb, var(--border) 76%, #cfe0f2 24%) !important;
  box-shadow: 0 10px 24px rgb(15 23 42 / 0.07) !important;
}

.oc-panel-shell .panel-topbar :is(.panel-icon-btn:hover, .panel-icon-btn.is-open, .panel-icon-btn.is-active) {
  background-color: color-mix(in srgb, var(--accent) 84%, #ffffff 16%) !important;
  border-color: color-mix(in srgb, var(--border) 82%, #d4deed 18%) !important;
}

.oc-panel-shell .panel-topbar :is(.panel-language-select:focus-visible, .panel-icon-btn:focus-visible, .panel-profile-trigger:focus-visible) {
  outline: none !important;
  border-color: color-mix(in srgb, var(--primary) 36%, var(--border) 64%) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent) !important;
}

.dark .oc-panel-shell .panel-topbar .panel-language-select,
.dark .oc-panel-shell .panel-topbar .panel-profile-trigger,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-language-select,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-profile-trigger {
  color: #e6eefc !important;
}

.dark .oc-panel-shell .panel-topbar .panel-icon-btn,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-icon-btn {
  color: #b5c4dc !important;
}

.dark .oc-panel-shell .panel-topbar .panel-language-select,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-language-select {
  border-color: color-mix(in srgb, var(--border) 84%, #1a2438 16%) !important;
  background-color: color-mix(in srgb, var(--card) 92%, #111827 8%) !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #9bb0cf 50%),
    linear-gradient(135deg, #9bb0cf 50%, transparent 50%) !important;
}

.dark .oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta strong,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta strong {
  color: #eef4ff !important;
}

.dark .oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta small,
:root[data-theme="dark"] .oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta small {
  color: #a8b8d0 !important;
}

@media (max-width: 980px) {
  .oc-panel-shell .panel-topbar .panel-topbar-right {
    gap: 0.35rem !important;
  }

  .oc-panel-shell .panel-topbar .panel-language-select,
  .oc-panel-shell .panel-topbar .panel-icon-btn {
    height: 37px !important;
  }

  .oc-panel-shell .panel-topbar .panel-language-select {
    min-width: 54px !important;
    padding-left: 0.75rem !important;
    padding-right: 1.55rem !important;
    background-position: calc(100% - 13px) 15px, calc(100% - 8px) 15px !important;
  }

  .oc-panel-shell .panel-topbar .panel-icon-btn {
    width: 37px !important;
  }

  .oc-panel-shell .panel-topbar .panel-profile-trigger {
    min-height: 40px !important;
    max-width: min(270px, calc(100vw - 96px)) !important;
    padding: 4px 6px !important;
    gap: 8px !important;
  }

  .oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__avatar {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
  }

  .oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta small {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .oc-panel-shell .panel-topbar .oc-topbar__item--profile {
    margin-left: 0 !important;
    padding-left: 0.35rem !important;
    border-left-width: 0 !important;
  }

  .oc-panel-shell .panel-topbar .panel-profile-trigger {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    min-height: 37px !important;
    padding: 3px !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  .oc-panel-shell .panel-topbar .panel-profile-trigger .oc-topbar__user-meta,
  .oc-panel-shell .panel-topbar .panel-profile-trigger > :is(.one-svg, svg),
  .oc-panel-shell .panel-topbar .panel-profile-trigger > span > :is(.one-svg, svg) {
    display: none !important;
  }
}