/* ============================================

   style-08.css — style.css 拆分第 8/8 段（原行 27024-30880）

   按序 <link> 加载，与 style.css 渲染等价。

   ============================================ */



#applications .application-management-pane--table-fit > .admin-section-layout-card {

  flex: 1 1 auto;

  min-height: 0;

}



.admin-section-layout-card {

  background: var(--admin-panel-surface) !important;

  border: none !important;

  box-shadow: none !important;

}



#packages.section.active.member-management-table-fit #memberManagementMount,

#packages.section.active.member-management-table-fit .api-unified-workspace-card,

#packages.section.active.member-management-table-fit .member-management-view-pane.active {

  display: flex;

  flex: 1 1 auto;

  min-height: 0;

  flex-direction: column;

}



#packages.section.active.member-management-table-fit #memberManagementPrimaryShell,

#packages.section.active.member-management-table-fit #memberManagementWorkspaceHeader,

#packages.section.active.member-management-table-fit .member-management-toolbar,

#packages.section.active.member-management-table-fit .member-management-pagination {

  flex: 0 0 auto;

}



#packages.section.active.member-management-table-fit .member-management-table-wrap {

  flex: 1 1 auto;

  min-height: 0;

  margin-bottom: 0;

}



#packages.section.active.member-management-table-fit #memberManagementCatalogView .member-management-pane.active {

  flex: 1 1 auto;

  min-height: 0;

  flex-direction: column;

}



#applications .application-management-pane--table-fit > .admin-section-layout-card,

#message-center.section.active.message-center-fit > .admin-section-layout-card,

#member-users.section.active.member-management-table-fit .member-management-users-card.admin-section-layout-card,

#packages.section.active.member-management-table-fit .admin-section-layout-card,

#super-guard .super-guard-admin-card.admin-section-layout-card {

  flex: 1 1 auto;

  min-height: 0;

}



#applications .application-management-pane--table-fit > .admin-section-layout-card > .card-body,

#message-center.section.active.message-center-fit > .admin-section-layout-card > .card-body,

#member-users.section.active.member-management-table-fit .member-management-users-card.admin-section-layout-card > .card-body,

#packages.section.active.member-management-table-fit .admin-section-layout-card > .card-body,

#super-guard .super-guard-admin-card.admin-section-layout-card > .card-body {

  flex: 1 1 auto;

  min-height: 0;

  overflow: hidden;

}



#applications .application-list-filters,

#orders .order-management-filters,

#packages .member-management-toolbar,

#member-users .member-management-users-toolbar,

#super-guard .super-guard-filter-row {

  margin-bottom: var(--admin-table-layout-gap) !important;

  box-shadow: none !important;

}



#super-guard .super-guard-form-grid {

  margin-bottom: var(--admin-section-inner-gap) !important;

  box-shadow: none !important;

}



#applications .application-management-table-shell,

#database .database-table-scroll,

#distribution .partner-list-table-shell,

#super-guard .super-guard-table-shell,

#packages .member-management-table-wrap,

#dispatch-center .dispatch-center-table-shell,

#dispatch-center #dispatchCenterTab-monitoring-errors .error-logs,

#dispatch-center #dispatchCenterTab-monitoring-status .monitoring-status-platform-content {

  width: 100%;

  min-width: 0;

  box-sizing: border-box;

  border: 1px solid var(--admin-panel-border-soft) !important;

  border-bottom: none !important;

  border-radius: 16px;

  background: var(--admin-panel-surface) !important;


  box-shadow: none !important;

  overflow: auto;

}



.admin-table-bottom-fit-pane {

  position: relative;

}



.admin-table-bottom-fit-scroll,

.admin-table-bottom-fit-pane > .admin-table-bottom-fit-scroll {

  --admin-table-bottom-row-divider: #b0b4bb;

  --admin-table-bottom-header-height: var(--admin-table-header-height);

  --admin-table-bottom-pagination-height: 0px;

  --admin-table-bottom-row-height: var(--admin-table-row-height);

  --admin-table-bottom-visible-row-count: var(--admin-table-visible-row-count);

  --admin-table-bottom-fixed-body-height: calc(var(--admin-table-bottom-row-height) * var(--admin-table-bottom-visible-row-count));

  flex: 1 1 auto !important;

  min-height: 0 !important;

  margin-bottom: 0 !important;

  position: relative;

  background: var(--admin-panel-surface) !important;


}



.admin-table-bottom-fit-scroll::after,

.admin-table-bottom-fit-pane > .admin-table-bottom-fit-scroll::after {

  content: '';

  position: absolute;

  top: var(--admin-table-bottom-header-height);

  right: 0;

  bottom: var(--admin-table-bottom-pagination-height, 0px);

  left: 0;

  z-index: 1;

  pointer-events: none;

  background-image:

    linear-gradient(

      to bottom,

      transparent calc(var(--admin-table-bottom-row-height) - 1px),

      #b0b4bb calc(var(--admin-table-bottom-row-height) - 1px),

      #b0b4bb var(--admin-table-bottom-row-height)

    ) !important;

  background-position: 0 0 !important;

  background-repeat: repeat-y !important;

  background-size: 100% var(--admin-table-bottom-row-height) !important;

}



.admin-table-bottom-fit-scroll > .data-table,

.admin-table-bottom-fit-pane > .admin-table-bottom-fit-scroll > .data-table {

  position: relative;

}



.admin-table-bottom-fit-scroll > .data-table tbody tr:not(.table-state-row):not(.admin-table-spacer-row),

.admin-table-bottom-fit-scroll > .data-table .admin-table-spacer-row,

.admin-table-bottom-fit-pane > .admin-table-bottom-fit-scroll > .data-table tbody tr:not(.table-state-row):not(.admin-table-spacer-row),

.admin-table-bottom-fit-pane > .admin-table-bottom-fit-scroll > .data-table .admin-table-spacer-row {

  height: var(--admin-table-bottom-row-height, var(--admin-table-row-height));

  max-height: var(--admin-table-bottom-row-height, var(--admin-table-row-height));

}



.admin-table-bottom-fit-scroll > .data-table td,

.admin-table-bottom-fit-scroll > .data-table .admin-table-spacer-cell,

.admin-table-bottom-fit-scroll > .data-table .table-state-cell,

.admin-table-bottom-fit-pane > .admin-table-bottom-fit-scroll > .data-table td,

.admin-table-bottom-fit-pane > .admin-table-bottom-fit-scroll > .data-table .admin-table-spacer-cell,

.admin-table-bottom-fit-pane > .admin-table-bottom-fit-scroll > .data-table .table-state-cell {

  height: var(--admin-table-bottom-row-height, var(--admin-table-row-height));

  max-height: var(--admin-table-bottom-row-height, var(--admin-table-row-height));

  border-bottom: 0 !important;

}



.admin-table-bottom-fit-scroll > .data-table th,

.admin-table-bottom-fit-pane > .admin-table-bottom-fit-scroll > .data-table th {

  border-bottom: 1px solid #b0b4bb !important;

}



.admin-table-bottom-fit-scroll .table-state-content,

.admin-table-bottom-fit-pane > .admin-table-bottom-fit-scroll .table-state-content {

  background: transparent !important;

  background-image: none !important;

}



.admin-table-bottom-fit-scroll .table-state-content--fill,

.admin-table-bottom-fit-pane > .admin-table-bottom-fit-scroll .table-state-content--fill {

  --table-state-row-height: var(--admin-table-bottom-row-height, var(--admin-table-row-height));

  min-height: var(--admin-table-bottom-fixed-body-height, var(--admin-table-fixed-body-height));

}



.admin-table-bottom-fit-pane > .admin-table-bottom-pagination {

  position: static;

  flex: 0 0 auto;

  display: flex;

  justify-content: center;

  align-items: center;

  pointer-events: auto;

}



.admin-table-bottom-fit-pane > .admin-table-bottom-pagination > * {

  pointer-events: auto;

}



#applications .application-management-pagination,

#orders .order-management-pagination,

#logs .logs-pagination,

#api #interface-key .api-key-pagination,

#distribution .order-management-pagination,

#distribution .partner-list-pagination,

#dispatch-center.section.active.dispatch-center-fit #dispatchCenterTab-rules .dispatch-center-pagination,

#dispatch-center.section.active.dispatch-center-fit #dispatchCenterTab-monitoring-errors .dispatch-center-pagination,

#superGuardViewPane-logs .super-guard-log-pagination,

#message-center .message-center-inbox-pagination,

#packages .member-management-pagination,

#member-users .order-management-pagination,

.login-logs-pagination,

.admin-table-bottom-fit-pane > .admin-table-bottom-pagination {

  box-sizing: border-box;

  width: 100%;

  min-height: var(--admin-table-pagination-height);

  padding-top: var(--admin-table-pagination-padding-y);

  padding-bottom: var(--admin-table-pagination-padding-y);

  background: var(--admin-table-bar-surface);

  background-image: var(--admin-table-bar-image);

  border-top: 1px solid #b0b4bb;

  align-items: center;

  justify-content: center;

}



#packages .member-management-pagination {

  border-bottom-left-radius: 16px;

  border-bottom-right-radius: 16px;

  overflow: hidden;

}



#applications .application-management-pagination-inner,

#orders .order-management-pagination-inner,

#logs .logs-pagination,

#api #interface-key .api-key-pagination,

#distribution .order-management-pagination-inner,

#distribution .partner-list-pagination .order-management-pagination-inner,

#dispatch-center.section.active.dispatch-center-fit #dispatchCenterTab-rules .dispatch-center-pagination-inner,

#dispatch-center.section.active.dispatch-center-fit #dispatchCenterTab-monitoring-errors .dispatch-center-pagination-inner,

#superGuardViewPane-logs .super-guard-log-pagination-inner,

.admin-table-bottom-fit-pane > .admin-table-bottom-pagination {

  width: auto;

}



.admin-table-bottom-fit-pane > .admin-table-bottom-pagination {

  align-items: center;

  justify-content: center;

}



#applications .application-management-pagination button,

#orders .order-management-pagination button,

#logs .logs-pagination button,

#api #interface-key .api-key-pagination button,

#distribution .order-management-pagination button,

#distribution .partner-list-pagination button,

#dispatch-center.section.active.dispatch-center-fit #dispatchCenterTab-rules .dispatch-center-pagination button,

#dispatch-center.section.active.dispatch-center-fit #dispatchCenterTab-monitoring-errors .dispatch-center-pagination button,

#superGuardViewPane-logs .super-guard-log-pagination button,

.admin-table-bottom-fit-pane > .admin-table-bottom-pagination button {

  align-self: center;

}



#applications .application-management-pagination span,

#orders .order-management-pagination span,

#logs .logs-pagination span,

#api #interface-key .api-key-pagination span,

#distribution .order-management-pagination span,

#distribution .partner-list-pagination span,

#dispatch-center.section.active.dispatch-center-fit #dispatchCenterTab-rules .dispatch-center-pagination span,

#dispatch-center.section.active.dispatch-center-fit #dispatchCenterTab-monitoring-errors .dispatch-center-pagination span,

#superGuardViewPane-logs .super-guard-log-pagination span,

.admin-table-bottom-fit-pane > .admin-table-bottom-pagination span {

  align-self: center;

}



#superGuardViewPane-logs .super-guard-table-shell {

  overflow: hidden;

  border: 0 !important;

  border-radius: 0 !important;

  background: transparent !important;

  background-image: none !important;

  box-shadow: none !important;

}



#superGuardViewPane-logs .super-guard-table-shell > .super-guard-data-table {

  margin-bottom: 0;

}



#applications .application-management-table-shell {

  overflow: hidden;

}



#dispatch-center #dispatchCenterTab-monitoring-errors .error-logs {

  min-height: 0;

}



#dispatch-center #dispatchCenterTab-monitoring-status .monitoring-status-empty-text {

  display: flex;

  min-height: 0;

  align-items: center;

  justify-content: center;

  text-align: center;

}



#dispatch-center.section.active.dispatch-center-fit #dispatchCenterTab-monitoring-status .monitoring-status-empty-text {

  flex: 1 1 auto;

  min-height: 0;

  height: 100%;

}



#database .database-table-card .card-body {

  display: flex;

  flex-direction: column;

  gap: 0;

}



#database .database-table-card {

  gap: var(--admin-table-layout-gap);

}



#database .database-table-card .database-table-scroll {

  flex: 1 1 auto;

  min-height: 0;

}



#database .database-overview-stats,

#database .database-overview-stat-card,





#database .database-overview-stat-card,





#database.section.active.database-table-fit > .database-overview-stats {

  flex: 0 0 auto;

}



#database.section.active.database-table-fit > .database-table-card {

  display: flex;

  flex: 1 1 auto;

  min-height: 0;

  flex-direction: column;

  margin-bottom: 0;

}



#database.section.active.database-table-fit > .database-table-card > .database-table-card-header {

  flex: 0 0 auto;

}



#database.section.active.database-table-fit > .database-table-card > .card-body {

  display: flex;

  flex: 1 1 auto;

  min-height: 0;

  flex-direction: column;

  overflow: hidden !important;

}



#database.section.active.database-table-fit .database-table-scroll {

  flex: 1 1 auto;

  min-height: 0;

  margin-bottom: 0;

  overflow: auto;

}



#dispatch-center .dispatch-center-page-card {

  flex: 1 1 auto;

  min-height: 0;

  padding: 0 !important;

}



#dispatch-center .dispatch-center-header {

  flex: 0 0 auto;

}



#dispatch-center .dispatch-center-body {

  flex: 1 1 auto;

  min-height: 0;

  padding: 0 !important;

}



#dispatch-center .dispatch-center-header-main {

  display: flex;

  justify-content: flex-start;

  row-gap: var(--admin-table-layout-gap);

  column-gap: 14px;

  align-items: center;

}



#dispatch-center .dispatch-center-tabs,

#dispatch-center .dispatch-center-toolbar {

  flex: 0 0 auto;

}



#dispatch-center .dispatch-center-toolbar {

  margin-left: 0;

  padding: 0;

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;

}



#dispatch-center .monitoring-realtime-panel,

#dispatch-center .monitoring-panel-card,

#dispatch-center .error-logs,

#dispatch-center .dispatch-center-overview-card {

  border-radius: 16px;

}



#dispatch-center #dispatchCenterTab-rules .dispatch-center-overview-card {

  display: flex;

  flex-direction: column;

  gap: 0;

}



#dispatch-center .dispatch-center-overview-card .dispatch-center-table-shell {

  margin-top: 0;

}



#dispatch-center .dispatch-center-error-table th,

#dispatch-center .dispatch-center-error-table td,

#dispatch-center .dispatch-center-rule-table th,

#dispatch-center .dispatch-center-rule-table td {

  padding: 0 var(--admin-table-cell-padding-x, 15px) !important;

  text-align: center !important;

  line-height: var(--admin-table-cell-line-height, 20px) !important;

}



#dispatch-center .dispatch-center-error-table th,

#dispatch-center .dispatch-center-rule-table th {

  background: var(--admin-table-header-surface) !important;

  background-image: var(--admin-table-header-image) !important;

  color: var(--admin-panel-text-strong) !important;

  font-size: calc(14px * var(--admin-density-scale, 1)) !important;

  font-weight: 600 !important;

}



#dispatch-center .dispatch-center-error-table td,

#dispatch-center .dispatch-center-rule-table td {

  color: var(--admin-panel-text-strong) !important;

  font-size: calc(14px * var(--admin-density-scale, 1)) !important;

}



@media (max-width: 1024px) {

  .dispatch-center-stats-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}



@media (max-width: 768px) {

  .dispatch-center-header-main,

  .dispatch-center-section-head {

    flex-direction: column;

    align-items: stretch;

  }



  #dispatch-center .dispatch-center-header-main {

    grid-template-columns: 1fr;

  }



  .dispatch-center-stats-grid {

    grid-template-columns: 1fr;

  }

}



.tab,

.partner-tab,

.endpoint-tab,

#payment .category-tab,

#api .category-tab,

#api .tab,

#api .test-tool-btn,

#api .api-tab,

#api .api-sub-tab,

#api .api-sub-sub-tab,

#api .api-doc-main-toolbar .api-doc-main-tabs > .tab,

#api > .api-category-shell .api-category-tabs > .member-management-tab.tab.category-tab,

.api-unified-main-tabs-shell > .member-management-tab,

.api-unified-main-tabs-shell > .member-management-view-tab,

.api-unified-main-tabs-shell > .test-tool-btn,

.api-unified-main-tabs-shell > .login-tab,

.api-unified-main-tabs-shell > .channel-tab,

.api-unified-main-tabs-shell > .super-guard-view-tab,

.api-unified-main-tabs-shell > .super-guard-admin-tab,

.api-unified-main-tabs-shell > .super-guard-config-tab,

.api-unified-main-tabs-shell > .super-guard-log-tab,

#database .database-scope-tabs > .database-scope-tab,

.platform-access-type-tab,

.channel-tab {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: var(--admin-tab-width) !important;

  min-width: var(--admin-tab-width) !important;

  height: var(--admin-tab-height) !important;

  min-height: var(--admin-tab-height) !important;

  padding: 0 var(--admin-tab-padding-x) !important;

  border-radius: var(--admin-tab-radius) !important;

  font-size: var(--admin-tab-font-size) !important;

  line-height: 1.2 !important;

  color: var(--wb-theme-button-soft-text) !important;

  border-color: var(--wb-theme-button-soft-border) !important;

  background: var(--wb-theme-button-soft) !important;

  box-shadow: none !important;

}



.tab:hover,

.partner-tab:hover,

.endpoint-tab:hover,

#payment .category-tab:hover,

#api .category-tab:hover,

#api .tab:hover,

#api .test-tool-btn:hover,

#api .api-tab:hover,

#api .api-sub-tab:hover,

#api .api-sub-sub-tab:hover,

#api .api-doc-main-toolbar .api-doc-main-tabs > .tab:hover,

#api > .api-category-shell .api-category-tabs > .member-management-tab.tab.category-tab:hover,

.api-unified-main-tabs-shell > .member-management-tab:hover,

.api-unified-main-tabs-shell > .member-management-view-tab:hover,

.api-unified-main-tabs-shell > .test-tool-btn:hover,

.api-unified-main-tabs-shell > .login-tab:hover,

.api-unified-main-tabs-shell > .channel-tab:hover,

.api-unified-main-tabs-shell > .super-guard-view-tab:hover,

.api-unified-main-tabs-shell > .super-guard-admin-tab:hover,

.api-unified-main-tabs-shell > .super-guard-config-tab:hover,

.api-unified-main-tabs-shell > .super-guard-log-tab:hover,

#database .database-scope-tabs > .database-scope-tab:hover,

.platform-access-type-tab:hover,

.channel-tab:hover {

  color: var(--wb-theme-button-soft-text) !important;

  border-color: var(--wb-theme-button-soft-border) !important;

  background: var(--wb-theme-button-soft-hover) !important;

  box-shadow: none !important;

  transform: none !important;

}



.tab.active,

.partner-tab.active,

.endpoint-tab.active,

#payment .category-tab.active,

#api .category-tab.active,

#api .tab.active,

#api .test-tool-btn.active,

#api .api-tab.active,

#api .api-sub-tab.active,

#api .api-sub-sub-tab.active,

#api .api-doc-main-toolbar .api-doc-main-tabs > .tab.active,

#api > .api-category-shell .api-category-tabs > .member-management-tab.tab.category-tab.active,

.api-unified-main-tabs-shell > .member-management-tab.active,

.api-unified-main-tabs-shell > .member-management-view-tab.active,

.api-unified-main-tabs-shell > .test-tool-btn.active,

.api-unified-main-tabs-shell > .login-tab.active,

.api-unified-main-tabs-shell > .channel-tab.active,

.api-unified-main-tabs-shell > .super-guard-view-tab.active,

.api-unified-main-tabs-shell > .super-guard-admin-tab.active,

.api-unified-main-tabs-shell > .super-guard-config-tab.active,

.api-unified-main-tabs-shell > .super-guard-log-tab.active,

#database .database-scope-tabs > .database-scope-tab.active,

.platform-access-type-tab.active,

.channel-tab.active {

  color: var(--wb-theme-on-accent) !important;

  border-color: var(--wb-theme-button-border) !important;

  background: var(--wb-theme-button-strong) !important;

  box-shadow: none !important;

  transform: none !important;

}



#applicationManagementPlatformsPane .platform-access-card .card-header {

  flex-wrap: nowrap;

  align-items: center;

  gap: 16px;

  padding: 12px 16px;

}



#applicationManagementPlatformsPane .platform-access-card-header__main {

  flex: 0 1 auto;

  min-width: 0;

  flex-wrap: nowrap;

}



#applicationManagementPlatformsPane .platform-access-type-tabs {

  flex: 0 1 auto;

  min-width: 0;

  max-width: 100%;

  display: inline-flex;

  gap: 8px;

  flex-wrap: nowrap;

}



#applicationManagementPlatformsPane .platform-access-type-tab-shell {

  flex: 0 0 auto;

  width: auto;

  min-width: 136px;

  min-height: 46px;

  padding: 0 10px 0 14px;

  gap: 8px;

  border-radius: 16px;

  overflow: hidden;

}



#applicationManagementPlatformsPane .platform-access-type-tab {

  flex: 1 1 auto;

  min-width: 0 !important;

  width: auto !important;

  height: auto !important;

  min-height: 0 !important;

  padding: 0 !important;

  border: 0 !important;

  border-radius: 0 !important;

  background: transparent !important;

  background-image: none !important;

  color: inherit !important;

  box-shadow: none !important;

  font-size: 14px !important;

  font-weight: 600 !important;

  line-height: 1.4 !important;

}



#applicationManagementPlatformsPane .platform-access-type-tab__count {

  min-width: 28px;

  height: 28px;

}



#applicationManagementPlatformsPane .platform-access-type-tab:hover,

#applicationManagementPlatformsPane .platform-access-type-tab:focus-visible {

  background: transparent !important;

  border-color: transparent !important;

  color: inherit !important;

  box-shadow: none !important;

  outline: none !important;

}



#applicationManagementPlatformsPane .platform-access-type-tab__actions {

  display: inline-flex;

  align-items: center;

  justify-content: flex-end;

  flex: 0 0 auto;

}



#applicationManagementPlatformsPane .platform-access-type-tab-shell .platform-access-move-btn {

  width: 32px;

  height: 32px;

  border-radius: 12px;

  flex: 0 0 auto;

}



#applicationManagementPlatformsPane .platform-access-type-tab-shell.active .platform-access-type-tab {

  color: var(--wb-theme-button-text) !important;

}



#api .api-tab-count {

  background: var(--wb-theme-accent-soft) !important;

  color: inherit !important;

}



#api .category-tab.active .api-tab-count,

#api .tab.active .api-tab-count,

#api .api-tab.active .api-tab-count,

#api .api-sub-tab.active .api-tab-count,

#api .api-sub-sub-tab.active .api-tab-count {

  background: color-mix(in srgb, var(--wb-theme-on-accent) 24%, transparent 76%) !important;

  color: var(--wb-theme-on-accent) !important;

}



.api-unified-main-tabs-shell > .channel-tab > div > div:first-child,

.channel-tab > div > div:first-child {

  color: var(--wb-theme-button-soft-text) !important;

}



.api-unified-main-tabs-shell > .channel-tab .channel-status-text,

.channel-tab .channel-status-text {

  color: color-mix(in srgb, var(--wb-theme-button-soft-text) 82%, #64748b 18%) !important;

}



.api-unified-main-tabs-shell > .channel-tab.active > div > div:first-child,

.channel-tab.active > div > div:first-child,

.channel-tab.active svg:not(.payment-channel-brand-icon--alipay) path {

  color: var(--wb-theme-on-accent) !important;

  fill: var(--wb-theme-on-accent) !important;

}



.channel-tab.active .payment-channel-brand-icon--alipay path {

  color: var(--wb-theme-on-accent) !important;

  fill: var(--wb-theme-on-accent) !important;

}



.api-unified-main-tabs-shell > .channel-tab.active .channel-status-text,

.channel-tab.active .channel-status-text {

  color: color-mix(in srgb, var(--wb-theme-on-accent) 82%, var(--wb-theme-button-text) 18%) !important;

}



.channel-initial-mark {

  background: var(--wb-theme-accent-soft) !important;

  color: var(--wb-theme-accent-text) !important;

}



.channel-tab.active .channel-initial-mark {

  background: color-mix(in srgb, var(--wb-theme-on-accent) 22%, transparent 78%) !important;

  color: var(--wb-theme-on-accent) !important;

}



.api-unified-main-tabs-shell > .channel-tab .paypal-brand-mark,

.channel-tab .paypal-brand-mark {

  width: 30px !important;

  height: 30px !important;

  flex: 0 0 30px !important;

  overflow: hidden !important;

}



.api-unified-main-tabs-shell > .channel-tab .paypal-brand-mark::before,

.channel-tab .paypal-brand-mark::before {

  font-size: 24px !important;

  line-height: 1 !important;

  transform: translate(-50%, -50%) skew(-8deg) !important;

}



.api-unified-main-tabs-shell > .channel-tab .paypal-brand-mark::after,

.channel-tab .paypal-brand-mark::after {

  font-size: 27px !important;

  line-height: 1 !important;

  transform: translate(-50%, -50%) skew(-8deg) !important;

}



.btn-copy,

#addChannelBtn,

#registerChannelSubmitBtn,

#channel-config-panel .btn.btn-primary,

.payment-profile-editor-actions .btn.btn-primary {

  background: var(--wb-theme-button-strong) !important;

  color: var(--wb-theme-button-text) !important;

  border-color: var(--wb-theme-button-border) !important;

  box-shadow: none !important;

}



.btn-copy:hover,

#addChannelBtn:hover,

#registerChannelSubmitBtn:hover,

#channel-config-panel .btn.btn-primary:hover,

.payment-profile-editor-actions .btn.btn-primary:hover {

  transform: scale(1.1) !important;

}



.btn-copy:active,

#addChannelBtn:active,

#registerChannelSubmitBtn:active,

#channel-config-panel .btn.btn-primary:active,

.payment-profile-editor-actions .btn.btn-primary:active {

  background: var(--wb-theme-button-strong-hover) !important;

  box-shadow: none !important;

}



.btn,

.btn-primary,

.btn-secondary,

.btn-success,

.btn-danger,

.btn-add,

.btn-confirm,

.btn-cancel,

.btn-copy,

.action-btn,

.send-code-btn,

.submit-btn,

.login-btn,

.test-tool-btn,

.btn-edit,

.btn-delete,

.btn-freeze,

.btn-unfreeze,

.btn-small,

.btn-sm {

  display: inline-flex;

  align-items: center !important;

  justify-content: center !important;

  gap: var(--admin-button-gap) !important;

  min-height: var(--admin-button-min-height) !important;

  padding: var(--admin-button-padding-y) var(--admin-button-padding-x) !important;

  border-width: 1px !important;

  border-style: solid !important;

  border-radius: var(--admin-button-radius) !important;

  font-size: var(--admin-button-font-size) !important;

  font-weight: 600 !important;

  line-height: 1.2 !important;

  white-space: nowrap !important;

  cursor: pointer !important;

  transition:

    background 0.22s ease,

    border-color 0.22s ease,

    color 0.22s ease,

    box-shadow 0.22s ease,

    transform 0.22s ease !important;

}



.btn,

.btn-secondary,

.action-btn,

.btn-edit,

.btn-freeze,

.btn-unfreeze,

.btn-cancel,

.send-code-btn,

.test-tool-btn,

.btn-small,

.btn-sm,

.btn-small.btn-primary,

.btn-sm.btn-primary,

.btn-small.btn-secondary,

.btn-sm.btn-secondary {

  background: var(--wb-theme-button-soft) !important;

  color: var(--wb-theme-button-soft-text) !important;

  border-color: var(--wb-theme-button-soft-border) !important;

  box-shadow: none !important;

}



.btn:hover,

.btn-secondary:hover,

.action-btn:hover,

.btn-edit:hover,

.btn-freeze:hover,

.btn-unfreeze:hover,

.btn-cancel:hover,

.send-code-btn:hover:not(:disabled),

.test-tool-btn:hover,

.btn-small:hover,

.btn-sm:hover,

.btn-small.btn-primary:hover,

.btn-sm.btn-primary:hover,

.btn-small.btn-secondary:hover,

.btn-sm.btn-secondary:hover {

  transform: scale(1.1) !important;

}



.btn-primary,

.btn-add,

.btn-confirm,

.submit-btn,

.login-btn,

.btn-copy,

.test-tool-btn.active {

  background: var(--wb-theme-button-strong) !important;

  color: var(--wb-theme-button-text) !important;

  border-color: var(--wb-theme-button-border) !important;

  box-shadow: none !important;

}



.btn-primary:hover,

.btn-add:hover,

.btn-confirm:hover,

.submit-btn:hover,

.login-btn:hover,

.btn-copy:hover,

.test-tool-btn.active:hover {

  transform: scale(1.1) !important;

}



.btn-success,

.btn-small.btn-success,

.btn-sm.btn-success {

  background: var(--wb-theme-success-soft) !important;

  color: var(--wb-theme-success-text) !important;

  border-color: var(--wb-theme-success-border) !important;

  box-shadow: none !important;

}



.btn-success:hover,

.btn-small.btn-success:hover,

.btn-sm.btn-success:hover {

  transform: scale(1.1) !important;

}



#modal .application-terminal-checkbox.is-selected {

  color: var(--terminal-title) !important;

  border-color: var(--terminal-border-strong) !important;

  background: var(--terminal-panel-gradient-strong) !important;

  background-image: var(--terminal-panel-gradient-strong) !important;

  box-shadow: none !important;

}



#modal .application-terminal-checkbox {

  display: grid !important;

  place-items: center !important;

  align-items: center !important;

  justify-items: center !important;

  margin: 0 !important;

  text-align: center !important;

}



#modal .application-terminal-checkbox input[type="checkbox"] {

  position: absolute !important;

  opacity: 0 !important;

  pointer-events: none !important;

  width: 0 !important;

  min-width: 0 !important;

  height: 0 !important;

  min-height: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

  border: 0 !important;

  appearance: none !important;

  background: transparent !important;

  box-shadow: none !important;

}



#modal .application-integration-permission-card {

  height: 48px !important;

  min-height: 48px !important;

  padding: 0 8px !important;

}



#modal .application-integration-permission-card.is-selected {

  border-color: var(--terminal-border-strong) !important;

  background-color: var(--terminal-panel-gradient-strong) !important;

  background-image: none !important;

  box-shadow: 0 0 0 1px var(--terminal-border-strong) !important;

  transform: translateY(-1px) !important;

}



#modal .application-integration-permission-card .application-terminal-checkbox-text {

  display: grid !important;

  place-items: center !important;

  width: 100% !important;

  height: 100% !important;

  margin: 0 !important;

  text-align: center !important;

  transform: none !important;

}



#modal .application-integration-permission-card.is-selected .application-terminal-checkbox-text strong {

  color: var(--terminal-title) !important;

  font-weight: 800 !important;

}



#modal .platform-create-card.is-selected,

#modal .platform-create-channel.is-selected,

#modal .template-item.active {

  color: var(--wb-theme-button-text) !important;

  border-color: var(--wb-theme-button-border) !important;

  background: var(--wb-theme-button-strong) !important;

  background-image: var(--wb-theme-button-strong) !important;

  box-shadow: none !important;

}



#modal .application-terminal-checkbox.is-selected .application-terminal-checkbox-text,

#modal .application-terminal-checkbox.is-selected .application-terminal-checkbox-text strong {

  color: var(--terminal-title) !important;

}



#modal .application-terminal-checkbox.is-selected .application-terminal-checkbox-text small {

  color: var(--terminal-subtitle) !important;

}



#modal .platform-create-card.is-selected .platform-create-card__name,

#modal .platform-create-card.is-selected .platform-create-card__meta,

#modal .platform-create-card.is-selected .platform-create-card__summary,

#modal .platform-create-channel.is-selected .platform-create-channel__name,

#modal .platform-create-channel.is-selected .platform-create-channel__detail,

#modal .template-item.active .template-name,

#modal .template-item.active .template-description {

  color: var(--wb-theme-button-text) !important;

}



#modal .platform-create-card.is-selected .platform-create-card__count,

#modal .platform-create-channel.is-selected .platform-create-channel__status {

  color: var(--wb-theme-button-text) !important;

  border-color: color-mix(in srgb, var(--wb-theme-button-text) 38%, transparent 62%) !important;

  background: color-mix(in srgb, var(--wb-theme-button-text) 18%, transparent 82%) !important;

}



.btn-danger,

.btn-delete,

.btn-small.btn-danger,

.btn-sm.btn-danger,

#modal .modal-footer .btn.btn-primary.payment-profile-confirm-delete-btn {

  background: var(--wb-theme-danger) !important;

  color: #ffffff !important;

  border-color: var(--wb-theme-danger-solid) !important;

  box-shadow: none !important;

}



.btn-danger:hover,

.btn-delete:hover,

.btn-small.btn-danger:hover,

.btn-sm.btn-danger:hover,

#modal .modal-footer .btn.btn-primary.payment-profile-confirm-delete-btn:hover {

  transform: scale(1.1) !important;

}



.btn:active,

.btn-primary:active,

.btn-secondary:active,

.btn-add:active,

.btn-confirm:active,

.btn-cancel:active,

.btn-copy:active,

.action-btn:active,

.send-code-btn:active,

.submit-btn:active,

.login-btn:active,

.test-tool-btn:active,

.btn-small:active,

.btn-sm:active,

.btn-success:active,

.btn-danger:active,

.btn-delete:active,

.btn-edit:active,

.btn-freeze:active,

.btn-unfreeze:active {

  transform: translateY(0) !important;

}



body:not(#admin-no-shadow-root):not(#admin-no-shadow-boost),

body *:not(#admin-no-shadow-root):not(#admin-no-shadow-boost):not(.platform-access-connectivity__dot),

body *:not(#admin-no-shadow-root):not(#admin-no-shadow-boost):not(.platform-access-connectivity__dot)::before,

body *:not(#admin-no-shadow-root):not(#admin-no-shadow-boost):not(.platform-access-connectivity__dot)::after {

  box-shadow: none !important;

  filter: none !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  text-shadow: none !important;

}



#modal.app-modal--application-shell .application-shell-modal-content {

  width: min(1360px, calc(100vw - 32px));

  max-width: min(1360px, calc(100vw - 32px));

  height: min(900px, calc(100vh - 32px));

  max-height: calc(100vh - 32px);

}



#modal.app-modal--application-shell .application-shell-modal-header {

  min-height: 58px;

  flex: 0 0 auto;

  padding: 10px 18px;

}



.application-shell-modal-header > div {

  min-width: 0;

  display: grid;

  gap: 2px;

}



.application-shell-modal-header p {

  overflow: hidden;

  margin: 0;

  color: var(--admin-panel-text-muted);

  font-size: 12px;

  line-height: 1.4;

  text-overflow: ellipsis;

  white-space: nowrap;

}



#modal.app-modal--application-shell .application-shell-modal-body {

  min-height: 0;

  max-height: none;

  padding: 0;

  overflow: hidden;

}



.application-shell-editor-layout {

  width: 100%;

  height: 100%;

  min-height: 0;

  display: grid;

  grid-template-columns: minmax(420px, 0.86fr) minmax(520px, 1.34fr);

}



.application-shell-config-pane,

.application-shell-preview-pane {

  min-width: 0;

  min-height: 0;

}



.application-shell-config-pane {

  padding: 18px;

  border-right: 1px solid var(--admin-panel-border-soft);

  background: var(--admin-panel-surface);

  overflow-y: auto;

}



.application-shell-config-section + .application-shell-config-section {

  margin-top: var(--admin-table-layout-gap);

  padding-top: 22px;

  border-top: 1px solid var(--admin-panel-border-soft);

}



.application-shell-section-title {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  row-gap: var(--admin-table-layout-gap);

  column-gap: 14px;

  margin-bottom: var(--admin-table-layout-gap);

}



.application-shell-section-title > div {

  min-width: 0;

}



.application-shell-section-title h4,

.application-shell-section-title p {

  margin: 0;

}



.application-shell-section-title h4 {

  color: var(--admin-panel-text-strong);

  font-size: 16px;

  font-weight: 700;

  line-height: 1.4;

}



.application-shell-section-title p {

  margin-top: 4px;

  color: var(--admin-panel-text-muted);

  font-size: 12px;

  line-height: 1.6;

}



.application-shell-basic-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  row-gap: var(--admin-table-layout-gap);

  column-gap: 14px;

}



.application-shell-basic-grid .form-group {

  min-width: 0;

  margin: 0;

}



.application-shell-logo-field {

  grid-column: 1 / -1;

}



.application-shell-public-entry {

  display: grid;

  gap: 10px;

}



.application-shell-public-entry input[readonly] {

  cursor: text;

}



.application-shell-public-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}



.application-shell-public-actions .btn-secondary {

  min-width: 128px;

}



.application-shell-settings-tabs {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 8px;

  margin-bottom: var(--admin-table-layout-gap);

}



.application-shell-settings-tabs button {

  min-width: 0;

  min-height: 42px;

  padding: 8px 12px;

  border: 1px solid var(--admin-panel-border-soft);

  border-radius: 10px;

  background: var(--admin-panel-surface);

  color: var(--admin-panel-text-muted);

  font-size: 13px;

  font-weight: 800;

  cursor: pointer;

}



.application-shell-settings-tabs button.active {

  border-color: var(--wb-theme-button-soft-border);

  background: var(--wb-theme-button-soft);

  color: var(--wb-theme-button-soft-text);

}



.application-shell-settings-panel[hidden] {

  display: none !important;

}



.application-shell-page-list {

  display: grid;

  gap: 10px;

}



.application-shell-page-row {

  min-width: 0;

  display: grid;

  grid-template-columns: 30px minmax(0, 1fr);

  gap: 10px;

  padding: 12px;

  border: 1px solid var(--admin-panel-border-soft);

  border-radius: 7px;

  background: var(--admin-panel-surface);

}



.application-shell-page-order {

  display: grid;

  align-content: start;

  gap: 6px;

}



.application-shell-icon-control {

  width: 30px;

  height: 30px;

  display: grid;

  place-items: center;

  padding: 0;

  border: 1px solid var(--admin-panel-border-soft);

  border-radius: 5px;

  background: var(--wb-theme-button-soft);

  color: var(--wb-theme-button-soft-text);

  font-size: 16px;

  font-weight: 700;

  line-height: 1;

  cursor: pointer;

}



.application-shell-icon-control:hover:not(:disabled) {

  border-color: var(--wb-theme-button-soft-border);

  background: var(--wb-theme-button-soft-hover);

}



.application-shell-icon-control:disabled {

  opacity: 0.38;

  cursor: not-allowed;

}



.application-shell-icon-control--danger {

  border-color: var(--wb-theme-danger-border);

  background: var(--wb-theme-danger-soft);

  color: var(--wb-theme-danger-text);

}



.application-shell-page-fields {

  min-width: 0;

  display: grid;

  grid-template-columns: minmax(110px, 0.8fr) minmax(150px, 1.3fr) 92px;

  gap: 8px;

}



.application-shell-page-field {

  min-width: 0;

  display: grid;

  gap: 5px;

}



.application-shell-page-field label {

  color: var(--admin-panel-text-muted);

  font-size: 11px;

  font-weight: 600;

}



.application-shell-page-field input,

.application-shell-page-field select {

  width: 100%;

  min-width: 0;

  min-height: 36px;

  padding: 7px 9px;

  border: 1px solid var(--wb-theme-modal-field-border);

  border-radius: 5px;

  background: var(--wb-theme-modal-field-bg);

  color: var(--admin-panel-text-strong);

  font-size: 12px;

}



.application-shell-page-field input[readonly] {

  background: var(--admin-panel-muted-surface);

  color: var(--admin-panel-text-muted);

  cursor: default;

}



.application-shell-page-options {

  grid-column: 2;

  min-width: 0;

  display: flex;

  align-items: center;

  gap: 12px;

  padding-top: 9px;

  border-top: 1px solid var(--admin-panel-border-soft);

}



.application-shell-check-option {

  min-height: 32px;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  color: var(--admin-panel-text-muted);

  font-size: 12px;

  font-weight: 600;

  cursor: pointer;

}



.application-shell-check-option input[type="checkbox"] {

  width: 17px;

  height: 17px;

  margin: 0;

  accent-color: var(--wb-theme-button-strong);

}



.application-shell-check-option--strong {

  flex: 0 0 auto;

  color: var(--admin-panel-text-strong);

}



.application-shell-check-option.is-disabled {

  opacity: 0.48;

  cursor: not-allowed;

}



.application-shell-page-kind {

  margin-left: auto;

  padding: 4px 7px;

  border: 1px solid var(--wb-theme-info-border);

  border-radius: 999px;

  background: var(--wb-theme-info-soft);

  color: var(--wb-theme-info-text);

  font-size: 10px;

  font-weight: 700;

}



.application-shell-page-options .application-shell-icon-control {

  margin-left: auto;

}



.application-shell-preview-pane {

  display: grid;

  grid-template-rows: auto minmax(0, 1fr);

  position: relative;

  background: color-mix(in srgb, var(--admin-panel-muted-surface) 82%, var(--admin-panel-surface) 18%);

}



.application-shell-preview-toolbar {

  min-width: 0;

  display: grid;

  grid-template-columns: auto minmax(150px, 220px);

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 10px 14px;

  border-bottom: 1px solid var(--admin-panel-border-soft);

  background: var(--admin-panel-surface);

}



.application-shell-preview-toolbar .form-select {

  min-width: 0;

  margin: 0;

}



.application-shell-preview-device-tabs {

  display: inline-grid;

  grid-template-columns: repeat(2, minmax(64px, 1fr));

  padding: 3px;

  border: 1px solid var(--admin-panel-border-soft);

  border-radius: 6px;

  background: var(--admin-panel-muted-surface);

}



.application-shell-preview-device-tabs button {

  min-height: 34px;

  padding: 6px 12px;

  border: 0;

  border-radius: 4px;

  background: transparent;

  color: var(--admin-panel-text-muted);

  font-size: 12px;

  font-weight: 700;

}



.application-shell-preview-device-tabs button.active {

  background: var(--wb-theme-button-strong);

  color: var(--wb-theme-button-text);

}



.frontend-builder-canvas-drop-layer {

  position: absolute;

  z-index: 24;

  inset: 64px 16px 16px;

  display: none;

  place-items: center;

  align-content: center;

  gap: 8px;

  border: 2px dashed rgba(var(--admin-panel-primary-rgb), 0.38);

  border-radius: 18px;

  background:

    linear-gradient(135deg, rgba(var(--admin-panel-primary-rgb), 0.14), rgba(var(--admin-panel-primary-rgb), 0.06)),

    color-mix(in srgb, var(--admin-panel-surface) 82%, transparent);

  color: var(--admin-panel-text-strong);

  text-align: center;

  pointer-events: none;

  backdrop-filter: blur(8px) saturate(130%);

}



.frontend-builder-canvas-drop-layer strong {

  font-size: 16px;

  font-weight: 900;

}



.frontend-builder-canvas-drop-layer span {

  color: var(--admin-panel-text-muted);

  font-size: 12px;

  font-weight: 700;

}



.application-shell-preview-pane.is-builder-drop-ready .frontend-builder-canvas-drop-layer {

  display: grid;

  pointer-events: auto;

}



.application-shell-preview-container {

  height: 100%;

  min-height: 0;

  padding: 16px;

  overflow: hidden;

  box-sizing: border-box;

  justify-content: center;

}



.application-shell-preview-container .device-screen {

  position: relative;

}



.frontend-builder-preview-edit-layer {

  position: absolute;

  z-index: 8;

  inset: 0;

  display: block;

  overflow: hidden;

  border-radius: inherit;

  pointer-events: none;

}



.application-shell-preview-pane.is-builder-drop-ready .preview-iframe {

  pointer-events: none;

}



.application-shell-preview-pane.is-builder-drop-ready .frontend-builder-preview-edit-layer {

  pointer-events: auto;

}



.frontend-builder-preview-hotspot {

  position: absolute;

  z-index: 1;

  min-width: 24px;

  min-height: 24px;

  border: 1px solid transparent;

  border-radius: 14px;

  background: rgba(var(--admin-panel-primary-rgb), 0);

  cursor: grab;

  pointer-events: auto;

  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;

}



.frontend-builder-preview-hotspot:active {

  cursor: grabbing;

}



.frontend-builder-preview-hotspot:hover,

.frontend-builder-preview-hotspot.is-selected {

  border-color: rgba(var(--admin-panel-primary-rgb), 0.72);

  background: rgba(var(--admin-panel-primary-rgb), 0.08);

  box-shadow: inset 0 0 0 1px rgba(var(--admin-panel-primary-rgb), 0.22);

}



.frontend-builder-preview-hotspot span {

  position: absolute;

  top: 8px;

  left: 8px;

  max-width: calc(100% - 16px);

  padding: 4px 8px;

  border-radius: 999px;

  background: var(--wb-theme-button-strong);

  color: var(--wb-theme-button-text);

  font-size: 11px;

  font-weight: 850;

  line-height: 1;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  opacity: 0;

  transform: translateY(-2px);

  transition: opacity 160ms ease, transform 160ms ease;

  pointer-events: none;

}



.frontend-builder-preview-hotspot:hover span,

.frontend-builder-preview-hotspot.is-selected span {

  opacity: 1;

  transform: translateY(0);

}



.application-shell-preview-container.login-preview-container.login-preview-single .preview-device {

  height: 100%;

  min-height: 0;

  justify-content: center;

}



.application-shell-preview-container.login-preview-container.login-preview-single .device-frame.mobile-frame {

  width: min(404px, 100%);

  height: min(876px, 100%);

  min-height: 0;

}



.application-shell-preview-container.login-preview-container.login-preview-single .device-frame.mobile-frame .device-screen {

  height: 100%;

  min-height: 0;

}



.application-shell-preview-container.login-preview-container.login-preview-single .device-frame.mobile-frame .preview-iframe {

  height: 100%;

  min-height: 0;

}



.application-shell-preview-container.login-preview-container.login-preview-single .device-frame.desktop-frame {

  width: min(1280px, 100%);

}



.global-frontend-shell-page {

  min-height: calc(100vh - 110px);

}



.frontend-shell-loading-card,

.frontend-shell-error-card {

  min-height: 260px;

  display: grid;

  place-items: center;

  gap: var(--admin-table-layout-gap);

  padding: 28px;

  border: 1px solid var(--admin-panel-border-soft);

  border-radius: 14px;

  background: var(--admin-panel-surface);

  color: var(--admin-panel-text-muted);

  text-align: center;

}



.frontend-shell-error-card h3,

.frontend-shell-error-card p {

  margin: 0;

}



.frontend-shell-error-card h3 {

  color: var(--admin-panel-text-strong);

  font-size: 18px;

}



.frontend-shell-workspace {

  min-height: calc(100vh - 110px);

  display: grid;

  grid-template-rows: auto auto auto;

  gap: var(--admin-table-layout-gap);

}



.frontend-shell-hero {

  min-width: 0;

  display: flex;

  align-items: center;

  justify-content: space-between;

  row-gap: var(--admin-table-layout-gap);

  column-gap: 16px;

  padding: 16px;

  border: 1px solid var(--admin-panel-border-soft);

  border-radius: 14px;

  background: linear-gradient(135deg, var(--admin-panel-surface) 0%, var(--admin-panel-surface-soft) 100%);

}



.frontend-shell-hero__copy {

  min-width: 0;

  display: grid;

  gap: 6px;

}



.frontend-shell-hero__copy h3,

.frontend-shell-hero__copy p {

  margin: 0;

}



.frontend-shell-hero__copy h3 {

  color: var(--admin-panel-text-strong);

  font-size: 20px;

  font-weight: 750;

  line-height: 1.3;

}



.frontend-shell-hero__copy p {

  color: var(--admin-panel-text-muted);

  font-size: 13px;

  line-height: 1.5;

}



.frontend-shell-scope-badge {

  width: fit-content;

  padding: 4px 9px;

  border: 1px solid var(--wb-theme-info-border);

  border-radius: 999px;

  background: var(--wb-theme-info-soft);

  color: var(--wb-theme-info-text);

  font-size: 11px;

  font-weight: 800;

}



.frontend-shell-hero__actions {

  flex: 0 0 auto;

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 10px;

}



.frontend-shell-mode-tabs {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px;

}



.frontend-shell-mode-tabs button {

  min-height: 74px;

  display: grid;

  align-content: center;

  justify-items: start;

  gap: 6px;

  padding: 14px 18px;

  border: 1px solid var(--admin-panel-border-soft);

  border-radius: 14px;

  background: var(--admin-panel-surface);

  color: var(--admin-panel-text-muted);

  text-align: left;

  cursor: pointer;

}



.frontend-shell-mode-tabs button.active {

  border-color: var(--wb-theme-button-soft-border);

  background: linear-gradient(135deg, var(--wb-theme-button-soft) 0%, var(--admin-panel-surface) 100%);

  color: var(--admin-panel-text-strong);

}



.frontend-shell-mode-tabs strong {

  font-size: 18px;

  font-weight: 800;

  line-height: 1.25;

}



.frontend-shell-mode-tabs span {

  font-size: 12px;

  font-weight: 600;

  line-height: 1.45;

}



@media (min-width: 1081px) {

  .main-content:has(#frontend-shell.section.active) {

    padding-left: 18px;

    padding-right: 18px;

  }



  #frontend-shell.section.active {

    width: 100% !important;

    max-width: none !important;

  }

}



.frontend-shell-editor-layout {

  display: block;

  height: auto;

  min-height: 0;

  border: 1px solid var(--admin-panel-border-soft);

  border-radius: 14px;

  overflow: hidden;

  background: var(--admin-panel-surface);

}



#frontend-shell.section.active .frontend-shell-editor-layout .application-shell-config-pane {

  overflow: visible;

}



.frontend-shell-editor-layout[data-frontend-shell-tab="preview"] .application-shell-config-pane {

  display: none;

}



.frontend-builder-pane {

  display: none;

}



.frontend-builder-inspector-pane {

  display: none;

}



#frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] {

  display: grid;

  grid-template-columns: minmax(560px, 0.9fr) minmax(680px, 1.1fr);

  grid-template-areas: "summary preview";

  align-items: stretch;

  overflow: visible;

}



#frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-config-pane--summary {

  grid-area: summary;

  border-right: 1px solid var(--admin-panel-border-soft);

}



#frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-preview-pane {

  grid-area: preview;

  display: grid;

  height: clamp(560px, 56vh, 720px);

  min-height: 0;

  border-radius: 0 14px 0 0;

  overflow: hidden;

}



#frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-preview-container {

  padding: 12px;

}



#frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-page-list {

  grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));

  align-items: start;

}



#frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-page-fields {

  grid-template-columns: minmax(130px, 0.75fr) minmax(220px, 1.25fr) 96px;

  gap: 10px;

}



#frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="builder"] {

  display: grid;

  grid-template-columns: clamp(240px, 16vw, 300px) minmax(620px, 1fr) clamp(260px, 18vw, 340px);

  grid-template-areas: "builder preview inspector";

  align-items: stretch;

  overflow: visible;

}



#frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="builder"] .application-shell-config-pane--summary {

  display: none;

}



#frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="builder"] .frontend-builder-pane {

  grid-area: builder;

  display: grid;

  align-content: start;

  gap: var(--admin-table-layout-gap);

  border-right: 1px solid var(--admin-panel-border-soft);

}



#frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="builder"] .frontend-builder-inspector-pane {

  grid-area: inspector;

  display: grid;

  align-content: start;

  gap: var(--admin-table-layout-gap);

  border-left: 1px solid var(--admin-panel-border-soft);

  border-right: 0;

}



#frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="builder"] .application-shell-preview-pane {

  grid-area: preview;

  display: grid;

  height: clamp(640px, 68vh, 860px);

  min-height: 0;

  overflow: hidden;

}



.frontend-builder-template-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));

  gap: 10px;

  max-height: 270px;

  overflow-y: auto;

  padding-right: 2px;

}



.frontend-builder-template-card,

.frontend-builder-block-type {

  min-height: 72px;

  display: grid;

  align-content: start;

  justify-items: start;

  gap: 6px;

  width: 100%;

  padding: 12px;

  border: 1px solid var(--admin-panel-border-soft);

  border-radius: 12px;

  background: var(--admin-panel-surface);

  color: var(--admin-panel-text-muted);

  text-align: left;

  cursor: pointer;

}



.frontend-builder-template-card.active {

  border-color: var(--wb-theme-button-soft-border);

  background: linear-gradient(135deg, var(--wb-theme-button-soft) 0%, var(--admin-panel-surface) 100%);

  color: var(--admin-panel-text-strong);

  box-shadow: inset 0 0 0 1px rgba(var(--admin-panel-primary-rgb), 0.12);

}



.frontend-builder-template-card strong,

.frontend-builder-block-type strong {

  color: var(--admin-panel-text-strong);

  font-size: 13px;

  font-weight: 800;

  line-height: 1.25;

}



.frontend-builder-template-card span,

.frontend-builder-block-type span {

  color: var(--admin-panel-text-muted);

  font-size: 12px;

  font-weight: 600;

  line-height: 1.45;

}



.frontend-builder-template-card__meta,

.frontend-builder-block-type small {

  color: var(--admin-panel-primary) !important;

  font-size: 11px !important;

  font-weight: 800 !important;

  letter-spacing: 0.02em;

}



.frontend-builder-ai-draft {

  display: grid;

  gap: 7px;

}



.frontend-builder-ai-draft label {

  color: var(--admin-panel-text-muted);

  font-size: 12px;

  font-weight: 800;

}



.frontend-builder-current-page {

  display: grid;

  gap: 7px;

  margin-bottom: var(--admin-table-layout-gap);

}



.frontend-builder-ai-draft {

  margin-bottom: var(--admin-table-layout-gap);

  padding: 12px;

  border: 1px solid var(--admin-panel-border-soft);

  border-radius: 12px;

  background: linear-gradient(135deg, var(--admin-panel-surface-soft) 0%, var(--admin-panel-surface) 100%);

}



.frontend-builder-ai-draft__row {

  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;

  gap: 10px;

  align-items: stretch;

}



.frontend-builder-ai-draft textarea {

  width: 100%;

  min-width: 0;

  resize: vertical;

  border: 1px solid var(--admin-panel-border-soft);

  border-radius: 10px;

  background: var(--admin-panel-surface);

  color: var(--admin-panel-text-strong);

  font: inherit;

  padding: 9px 10px;

}



.frontend-builder-current-page label,

.frontend-builder-workbench h5,

.frontend-builder-block-fields label span {

  color: var(--admin-panel-text-muted);

  font-size: 12px;

  font-weight: 800;

}



.frontend-builder-workbench {

  display: grid;

  gap: var(--admin-table-layout-gap);

}



.frontend-builder-workbench-tabs {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 6px;

  padding: 6px;

  border: 1px solid var(--admin-panel-border-soft);

  border-radius: 12px;

  background: var(--admin-panel-surface);

}



.frontend-builder-workbench-tabs button {

  min-height: 34px;

  padding: 8px 10px;

  border: 1px solid transparent;

  border-radius: 9px;

  background: transparent;

  color: var(--admin-panel-text-muted);

  font-size: 12px;

  font-weight: 850;

  cursor: pointer;

}



.frontend-builder-workbench-tabs button.active {

  border-color: var(--wb-theme-button-soft-border);

  background: var(--admin-panel-surface);

  color: var(--admin-panel-text-strong);

  box-shadow: 0 8px 20px rgba(var(--admin-panel-primary-rgb), 0.08);

}



.frontend-builder-workbench-panel {

  display: grid;

  gap: 10px;

  min-width: 0;

}



.frontend-builder-workbench-panel[hidden] {

  display: none !important;

}



.frontend-builder-workbench-panel__head {

  display: grid;

  gap: 4px;

}



.frontend-builder-workbench-panel__head h5,

.frontend-builder-workbench-panel__head p {

  margin: 0;

}



.frontend-builder-workbench-panel__head p {

  color: var(--admin-panel-text-muted);

  font-size: 12px;

  font-weight: 600;

  line-height: 1.45;

}



.frontend-builder-block-library,

.frontend-builder-block-list {

  display: grid;

  gap: 10px;

}



.frontend-builder-block-type {

  min-height: 64px;

}



.frontend-builder-block-category {

  display: grid;

  gap: 9px;

}



.frontend-builder-block-category + .frontend-builder-block-category {

  padding-top: 8px;

  border-top: 1px solid var(--admin-panel-border-soft);

}



.frontend-builder-block-category__head {

  display: grid;

  gap: 3px;

}



.frontend-builder-block-category__head strong {

  color: var(--admin-panel-text-strong);

  font-size: 13px;

  font-weight: 900;

}



.frontend-builder-block-category__head span {

  color: var(--admin-panel-text-muted);

  font-size: 12px;

  font-weight: 600;

  line-height: 1.45;

}



.frontend-builder-block-category__grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));

  gap: 8px;

}



.frontend-builder-block-row {

  display: grid;

  grid-template-columns: auto minmax(0, 1fr);

  gap: 10px;

  padding: 12px;

  border: 1px solid var(--admin-panel-border-soft);

  border-radius: 12px;

  background: var(--admin-panel-surface);

  cursor: grab;

}



.frontend-builder-block-row:active {

  cursor: grabbing;

}



.frontend-builder-block-row.is-selected {

  border-color: rgba(var(--admin-panel-primary-rgb), 0.62);

  background: linear-gradient(135deg, rgba(var(--admin-panel-primary-rgb), 0.1), var(--admin-panel-surface-soft));

  box-shadow: inset 0 0 0 1px rgba(var(--admin-panel-primary-rgb), 0.14);

}



.frontend-public-block-row {

  cursor: default;

}



.frontend-public-block-row:active {

  cursor: default;

}



.frontend-builder-block-order {

  display: grid;

  align-content: start;

  gap: 6px;

}



.frontend-builder-block-fields {

  display: grid;

  gap: 10px;

  min-width: 0;

}



.frontend-builder-block-heading,

.frontend-builder-block-inline-fields {

  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;

  align-items: center;

  gap: 10px;

}



.frontend-builder-block-heading span {

  display: grid;

  gap: 3px;

}



.frontend-builder-block-heading strong {

  color: var(--admin-panel-text-strong);

  font-size: 13px;

  font-weight: 900;

}



.frontend-builder-block-heading small {

  color: var(--admin-panel-primary);

  font-size: 11px;

  font-weight: 800;

}



.frontend-builder-block-inline-fields--triple {

  grid-template-columns: minmax(150px, 1fr) minmax(96px, 0.55fr) minmax(96px, 0.55fr);

}



.frontend-builder-block-fields label {

  display: grid;

  gap: 6px;

  min-width: 0;

}



.frontend-builder-block-fields input,

.frontend-builder-block-fields textarea,

.frontend-builder-block-fields select {

  width: 100%;

  min-width: 0;

  border: 1px solid var(--admin-panel-border-soft);

  border-radius: 10px;

  background: var(--admin-panel-surface);

  color: var(--admin-panel-text-strong);

  font: inherit;

  padding: 9px 10px;

}



.frontend-builder-block-fields textarea {

  resize: vertical;

}



.frontend-builder-empty {

  min-height: 96px;

  display: grid;

  place-items: center;

  padding: 16px;

  border: 1px dashed var(--admin-panel-border-soft);

  border-radius: 12px;

  color: var(--admin-panel-text-muted);

  font-size: 13px;

  text-align: center;

}



.frontend-builder-drop-zone {

  min-height: 56px;

  display: grid;

  place-items: center;

  padding: 12px;

  border: 1px dashed var(--admin-panel-border-soft);

  border-radius: 12px;

  color: var(--admin-panel-text-muted);

  background: color-mix(in srgb, var(--admin-panel-primary) 4%, transparent);

  font-size: 12px;

  font-weight: 800;

  text-align: center;

}



.frontend-shell-editor-layout[data-frontend-shell-tab="preview"] .application-shell-preview-pane {

  display: grid;

  min-height: clamp(760px, calc(100vh + 160px), 1040px);

}



@media (max-width: 1240px) {

  #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] {

    display: block;

    overflow: hidden;

  }



  #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="builder"] {

    display: block;

    overflow: hidden;

  }



  #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-config-pane--summary {

    border-right: 0;

    border-bottom: 1px solid var(--admin-panel-border-soft);

  }



  #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="builder"] .frontend-builder-pane {

    border-right: 0;

    border-bottom: 1px solid var(--admin-panel-border-soft);

  }



  #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="builder"] .frontend-builder-inspector-pane {

    border-left: 0;

    border-top: 1px solid var(--admin-panel-border-soft);

  }



  #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-preview-pane {

    height: auto;

    min-height: 720px;

    border-radius: 0;

  }



  #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="builder"] .application-shell-preview-pane {

    height: auto;

    min-height: 720px;

  }



  #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-page-list {

    grid-template-columns: minmax(0, 1fr);

  }



  #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-page-fields {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-page-field--path {

    grid-column: 1 / -1;

    grid-row: 2;

  }

}



#frontend-shell.section.active.admin-preview-frame-fit {

  width: 100% !important;

  max-width: none !important;

  height: auto;

  min-height: var(--admin-preview-section-viewport-height, var(--admin-first-paint-preview-viewport-height));

  overflow: visible;

}



#frontend-shell.section.active .application-shell-preview-container.login-preview-container.login-preview-single .preview-device {

  justify-content: flex-start;

  padding-top: 28px;

}



#modal.app-modal--application-shell .application-shell-modal-footer {

  min-height: 52px;

  flex: 0 0 auto;

  padding: 8px 18px;

}



@media (max-width: 1080px) {

  #modal.app-modal--application-shell .application-shell-modal-content {

    width: calc(100vw - 20px);

    max-width: calc(100vw - 20px);

    height: calc(100vh - 20px);

    max-height: calc(100vh - 20px);

  }



  .application-shell-editor-layout {

    grid-template-columns: minmax(360px, 0.9fr) minmax(430px, 1.1fr);

  }



  .application-shell-page-fields {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .application-shell-page-field--path {

    grid-column: 1 / -1;

    grid-row: 2;

  }

}



@media (max-width: 820px) {

  .frontend-shell-workspace {

    grid-template-rows: auto auto;

  }



  .frontend-shell-hero {

    align-items: stretch;

    flex-direction: column;

  }



  .frontend-shell-hero__actions {

    justify-content: flex-start;

  }



  .frontend-shell-mode-tabs {

    grid-template-columns: minmax(0, 1fr);

  }



  .frontend-builder-workbench {

    grid-template-columns: minmax(0, 1fr);

  }



  .frontend-builder-ai-draft__row,

  .frontend-builder-block-inline-fields--triple {

    grid-template-columns: minmax(0, 1fr);

  }



  #modal.app-modal--application-shell .application-shell-modal-body {

    overflow-y: auto;

  }



  .application-shell-editor-layout {

    height: auto;

    display: grid;

    grid-template-columns: minmax(0, 1fr);

  }



  .application-shell-config-pane {

    max-height: none;

    border-right: 0;

    border-bottom: 1px solid var(--admin-panel-border-soft);

    overflow: visible;

  }



  .application-shell-preview-pane {

    min-height: 720px;

  }



  .application-shell-preview-toolbar {

    grid-template-columns: minmax(0, 1fr);

  }



  .application-shell-preview-device-tabs {

    width: 100%;

  }

}



@media (max-width: 560px) {

  .application-shell-config-pane {

    padding: 14px;

  }



  .application-shell-basic-grid,

  .application-shell-page-fields {

    grid-template-columns: minmax(0, 1fr);

  }



  .application-shell-logo-field,

  .application-shell-page-field--path {

    grid-column: auto;

    grid-row: auto;

  }



  #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-page-fields {

    grid-template-columns: minmax(0, 1fr);

  }



  #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-page-field--path {

    grid-column: auto;

    grid-row: auto;

  }



  .application-shell-page-row {

    grid-template-columns: minmax(0, 1fr);

  }



  .application-shell-page-order {

    display: flex;

  }



  .application-shell-page-options {

    grid-column: 1;

    flex-wrap: wrap;

  }



  .application-shell-preview-pane {

    min-height: 660px;

  }



  .application-shell-preview-container {

    padding: 10px;

  }

}



html.frontend-shell-workspace-active,

html.frontend-shell-workspace-active body,

body.frontend-shell-workspace-active {

  width: 100vw;

  height: 100vh;

  min-height: 100vh;

  overflow: hidden !important;

}



body.frontend-shell-workspace-active .container {

  display: block;

  width: 100vw;

  height: 100vh;

  min-height: 100vh;

  overflow: hidden;

}



body.frontend-shell-workspace-active .sidebar,

body.frontend-shell-workspace-active .main-header,

body.frontend-shell-workspace-active #applicationManagementSharedTabsShell {

  display: none !important;

}



body.frontend-shell-workspace-active .main-content {

  width: 100vw;

  height: 100vh;

  min-height: 100vh;

  margin-left: 0 !important;

  padding: 0 !important;

  overflow: hidden !important;

  background:

    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--admin-panel-primary) 15%, transparent) 0%, transparent 32%),

    linear-gradient(135deg, var(--wb-theme-page-bg) 0%, color-mix(in srgb, var(--wb-theme-page-bg) 82%, var(--admin-panel-surface) 18%) 100%) !important;

}



body.frontend-shell-workspace-active #frontend-shell.section.active,

body.frontend-shell-workspace-active #frontend-shell.section.active.admin-preview-frame-fit {

  display: block !important;

  width: 100vw !important;

  max-width: none !important;

  height: 100vh !important;

  min-height: 100vh !important;

  margin: 0 !important;

  overflow: hidden !important;

  animation: none !important;

  opacity: 1;

  transform: none !important;

}



body.frontend-shell-workspace-active .global-frontend-shell-page,

body.frontend-shell-workspace-active .frontend-shell-workspace {

  width: 100%;

  height: 100%;

  min-height: 0;

  overflow: hidden;

}



body.frontend-shell-workspace-active .frontend-shell-loading-card,

body.frontend-shell-workspace-active .frontend-shell-error-card {

  width: 100%;

  height: 100%;

  min-height: 100%;

  border: 0;

  border-radius: 0;

}



body.frontend-shell-workspace-active .frontend-shell-workspace {

  display: grid;

  grid-template-rows: 54px minmax(0, 1fr);

  gap: 0;

}



body.frontend-shell-workspace-active .frontend-shell-workspace-bar {

  min-width: 0;

  min-height: 54px;

  display: grid;

  grid-template-columns: max-content minmax(0, 1fr) max-content;

  align-items: center;

  gap: 12px;

  padding: 8px 14px;

  border-bottom: 1px solid var(--admin-panel-border-soft);

  background: color-mix(in srgb, var(--admin-panel-surface) 96%, var(--wb-theme-page-bg) 4%);

  box-sizing: border-box;

}



body.frontend-shell-workspace-active .frontend-shell-back-button,

body.frontend-shell-workspace-active .frontend-shell-save-button {

  width: auto !important;

  min-height: 38px;

  white-space: nowrap;

}



body.frontend-shell-workspace-active .frontend-shell-mode-tabs {

  width: min(560px, 100%);

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 6px;

  justify-self: center;

}



body.frontend-shell-workspace-active .frontend-shell-mode-tabs button {

  min-height: 38px;

  justify-items: center;

  padding: 8px 12px;

  border-radius: 10px;

  text-align: center;

}



body.frontend-shell-workspace-active .frontend-shell-mode-tabs strong {

  font-size: 13px;

  line-height: 1.2;

}



body.frontend-shell-workspace-active .frontend-shell-mode-tabs span {

  display: none;

}



body.frontend-shell-workspace-active .frontend-shell-editor-layout {

  width: 100%;

  height: 100%;

  min-height: 0;

  border: 0;

  border-radius: 0;

  overflow: hidden;

  background: transparent;

}



body.frontend-shell-workspace-active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] {

  display: grid !important;

  grid-template-columns: clamp(420px, 30vw, 560px) minmax(0, 1fr);

  grid-template-rows: minmax(0, 1fr);

  grid-template-areas: "summary preview";

  align-items: stretch;

}



body.frontend-shell-workspace-active #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] {

  display: grid !important;

  grid-template-columns: clamp(420px, 30vw, 560px) minmax(0, 1fr) !important;

  grid-template-rows: minmax(0, 1fr) !important;

  grid-template-areas: "summary preview" !important;

  overflow: hidden !important;

}



body.frontend-shell-workspace-active .frontend-shell-editor-layout[data-frontend-shell-tab="builder"] {

  display: grid !important;

  grid-template-columns: clamp(240px, 16vw, 300px) minmax(620px, 1fr) clamp(260px, 18vw, 340px);

  grid-template-areas: "builder preview inspector";

  align-items: stretch;

}



body.frontend-shell-workspace-active #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="builder"] {

  display: grid !important;

  grid-template-columns: clamp(240px, 16vw, 300px) minmax(620px, 1fr) clamp(260px, 18vw, 340px) !important;

  grid-template-areas: "builder preview inspector" !important;

  overflow: hidden !important;

}



body.frontend-shell-workspace-active .frontend-shell-editor-layout[data-frontend-shell-tab="preview"] {

  display: grid !important;

  grid-template-columns: minmax(0, 1fr);

  grid-template-rows: minmax(0, 1fr);

  grid-template-areas: "preview";

  height: 100%;

}



body.frontend-shell-workspace-active #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="preview"] {

  display: grid !important;

  grid-template-columns: minmax(0, 1fr) !important;

  grid-template-rows: minmax(0, 1fr) !important;

  grid-template-areas: "preview" !important;

  overflow: hidden !important;

}



body.frontend-shell-workspace-active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-config-pane--summary {

  grid-area: summary;

  border-right: 1px solid var(--admin-panel-border-soft);

  border-bottom: 1px solid var(--admin-panel-border-soft);

}



body.frontend-shell-workspace-active #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-config-pane--summary {

  grid-area: summary !important;

  border-right: 1px solid var(--admin-panel-border-soft);

  border-bottom: 1px solid var(--admin-panel-border-soft);

}



body.frontend-shell-workspace-active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-page-list {

  grid-template-columns: minmax(0, 1fr);

}



body.frontend-shell-workspace-active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-settings-panel {

  margin-top: 0;

  padding-top: 0;

  border-top: 0;

}



body.frontend-shell-workspace-active #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-page-list {

  grid-template-columns: minmax(0, 1fr) !important;

}



body.frontend-shell-workspace-active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-page-fields {

  grid-template-columns: minmax(0, 1fr);

}



body.frontend-shell-workspace-active #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-page-fields {

  grid-template-columns: minmax(0, 1fr) !important;

}



body.frontend-shell-workspace-active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-page-field--path {

  grid-column: auto;

  grid-row: auto;

}



body.frontend-shell-workspace-active #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-page-field--path {

  grid-column: auto !important;

  grid-row: auto !important;

}



body.frontend-shell-workspace-active .frontend-shell-editor-layout[data-frontend-shell-tab="builder"] .frontend-builder-pane {

  grid-area: builder;

  display: grid !important;

  grid-template-rows: auto minmax(0, 1fr);

  align-content: stretch;

  gap: 0;

  padding: 0;

  border-right: 1px solid var(--admin-panel-border-soft);

}



body.frontend-shell-workspace-active .frontend-shell-editor-layout[data-frontend-shell-tab="builder"] .frontend-builder-inspector-pane {

  grid-area: inspector;

  display: grid !important;

  grid-template-rows: minmax(0, 1fr);

  align-content: stretch;

  gap: 0;

  min-height: 0;

  padding: 0;

  border-left: 1px solid var(--admin-panel-border-soft);

  border-right: 0;

}



body.frontend-shell-workspace-active #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="builder"] .frontend-builder-pane {

  grid-area: builder !important;

  display: grid !important;

  grid-template-rows: auto minmax(0, 1fr);

  align-content: stretch;

  gap: 0;

  height: 100%;

  min-height: 0;

  padding: 0;

  border-right: 1px solid var(--admin-panel-border-soft);

}



body.frontend-shell-workspace-active #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="builder"] .frontend-builder-inspector-pane {

  grid-area: inspector !important;

  display: grid !important;

  grid-template-rows: minmax(0, 1fr);

  align-content: stretch;

  height: 100%;

  min-height: 0;

  padding: 0;

  border-left: 1px solid var(--admin-panel-border-soft);

  border-right: 0;

}



body.frontend-shell-workspace-active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-preview-pane,

body.frontend-shell-workspace-active .frontend-shell-editor-layout[data-frontend-shell-tab="builder"] .application-shell-preview-pane,

body.frontend-shell-workspace-active .frontend-shell-editor-layout[data-frontend-shell-tab="preview"] .application-shell-preview-pane {

  grid-area: preview;

  display: grid;

  width: 100%;

  height: 100% !important;

  min-height: 0 !important;

  border-radius: 0;

  overflow: hidden;

}



body.frontend-shell-workspace-active #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] .application-shell-preview-pane,

body.frontend-shell-workspace-active #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="builder"] .application-shell-preview-pane,

body.frontend-shell-workspace-active #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="preview"] .application-shell-preview-pane {

  grid-area: preview !important;

  display: grid !important;

  width: 100%;

  height: 100% !important;

  min-height: 0 !important;

  border-radius: 0;

  overflow: hidden !important;

}



body.frontend-shell-workspace-active #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="preview"] .application-shell-preview-pane {

  grid-area: 1 / 1 / 2 / 2 !important;

}



body.frontend-shell-workspace-active .application-shell-config-pane {

  min-height: 0;

  padding: 14px;

  overflow-y: auto !important;

}



body.frontend-shell-workspace-active #frontend-shell.section.active .frontend-shell-editor-layout .application-shell-config-pane {

  min-height: 0;

  overflow-y: auto !important;

}



body.frontend-shell-workspace-active .frontend-builder-panel-tabs {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 6px;

  padding: 12px;

  border-bottom: 1px solid var(--admin-panel-border-soft);

  background: var(--admin-panel-surface);

}



body.frontend-shell-workspace-active .frontend-builder-panel-tabs button {

  min-height: 36px;

  padding: 8px 10px;

  border: 1px solid var(--admin-panel-border-soft);

  border-radius: 10px;

  background: var(--admin-panel-surface);

  color: var(--admin-panel-text-muted);

  font-size: 12px;

  font-weight: 800;

  cursor: pointer;

}



body.frontend-shell-workspace-active .frontend-builder-panel-tabs button.active {

  border-color: var(--wb-theme-button-soft-border);

  background: var(--wb-theme-button-soft);

  color: var(--wb-theme-button-soft-text);

}



body.frontend-shell-workspace-active .frontend-builder-panel-content {

  min-height: 0;

  margin-top: 0 !important;

  padding: 14px;

  border-top: 0 !important;

  overflow-y: auto;

}



body.frontend-shell-workspace-active .frontend-builder-panel-content[hidden] {

  display: none !important;

}



body.frontend-shell-workspace-active .frontend-builder-inspector-content {

  min-height: 0;

  margin-top: 0 !important;

  padding: 14px;

  border-top: 0 !important;

  overflow-y: auto;

}



body.frontend-shell-workspace-active .frontend-builder-inspector-content[hidden] {

  display: none !important;

}



body.frontend-shell-workspace-active .frontend-builder-template-grid {

  grid-template-columns: minmax(0, 1fr);

  max-height: none;

  overflow: visible;

}



body.frontend-shell-workspace-active .frontend-builder-workbench {

  grid-template-columns: minmax(0, 1fr);

  align-content: start;

  gap: 12px;

}



body.frontend-shell-workspace-active .frontend-builder-ai-draft__row {

  grid-template-columns: minmax(0, 1fr);

}



body.frontend-shell-workspace-active .frontend-builder-workbench-panel,

body.frontend-shell-workspace-active [data-frontend-builder-panel-content="components"] .frontend-builder-block-library,

body.frontend-shell-workspace-active [data-frontend-builder-panel-content="components"] .frontend-builder-block-list {

  min-width: 0;

  max-width: 100%;

}



body.frontend-shell-workspace-active [data-frontend-builder-panel-content="components"] .frontend-builder-block-library {

  grid-template-columns: minmax(0, 1fr);

  max-height: none;

  overflow: visible;

  padding-right: 0;

}



body.frontend-shell-workspace-active [data-frontend-builder-panel-content="components"] .frontend-builder-block-category__grid {

  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

}



body.frontend-shell-workspace-active [data-frontend-builder-panel-content="components"] .frontend-builder-block-row {

  width: 100%;

  max-width: 100%;

  min-width: 0;

  grid-template-columns: 38px minmax(0, 1fr);

  box-sizing: border-box;

  overflow: hidden;

}



body.frontend-shell-workspace-active [data-frontend-builder-panel-content="components"] .frontend-builder-block-fields,

body.frontend-shell-workspace-active [data-frontend-builder-panel-content="components"] .frontend-builder-block-fields > *,

body.frontend-shell-workspace-active [data-frontend-builder-panel-content="components"] .frontend-builder-block-fields label {

  min-width: 0;

  max-width: 100%;

  box-sizing: border-box;

}



body.frontend-shell-workspace-active [data-frontend-builder-panel-content="components"] .frontend-builder-block-inline-fields,

body.frontend-shell-workspace-active [data-frontend-builder-panel-content="components"] .frontend-builder-block-inline-fields--triple {

  grid-template-columns: minmax(0, 1fr);

}



body.frontend-shell-workspace-active .frontend-builder-inspector-pane,

body.frontend-shell-workspace-active .frontend-builder-inspector-content,

body.frontend-shell-workspace-active .frontend-builder-inspector-content .frontend-builder-block-list,

body.frontend-shell-workspace-active .frontend-builder-inspector-content .frontend-builder-block-row,

body.frontend-shell-workspace-active .frontend-builder-inspector-content .frontend-builder-block-fields,

body.frontend-shell-workspace-active .frontend-builder-inspector-content .frontend-builder-block-fields > *,

body.frontend-shell-workspace-active .frontend-builder-inspector-content .frontend-builder-block-fields label {

  min-width: 0;

  max-width: 100%;

  box-sizing: border-box;

}



body.frontend-shell-workspace-active .frontend-builder-inspector-content .frontend-builder-block-row {

  width: 100%;

  grid-template-columns: 38px minmax(0, 1fr);

  overflow: hidden;

}



body.frontend-shell-workspace-active .frontend-builder-inspector-content .frontend-builder-block-heading,

body.frontend-shell-workspace-active .frontend-builder-inspector-content .frontend-builder-block-inline-fields,

body.frontend-shell-workspace-active .frontend-builder-inspector-content .frontend-builder-block-inline-fields--triple {

  grid-template-columns: minmax(0, 1fr);

  align-items: stretch;

}



body.frontend-shell-workspace-active .frontend-builder-inspector-content .frontend-builder-block-heading .application-shell-icon-control {

  justify-self: start;

}



body.frontend-shell-workspace-active .frontend-builder-inspector-content :is(input, textarea, select, .form-select, .wb-select, .wb-select-trigger) {

  width: 100% !important;

  min-width: 0 !important;

  max-width: 100% !important;

  box-sizing: border-box;

}



body.frontend-shell-workspace-active .application-shell-preview-container {

  height: 100%;

  min-height: 0;

  padding: 14px;

}



body.frontend-shell-workspace-active #frontend-shell.section.active .application-shell-preview-container.login-preview-container.login-preview-single .preview-device {

  justify-content: flex-start;

  padding-top: 14px;

}



body.frontend-shell-workspace-active .frontend-shell-workspace :is(

  .application-shell-config-pane,

  .frontend-builder-panel-content,

  .frontend-builder-template-grid,

  .frontend-builder-block-list

) {

  scrollbar-width: none;

}



body.frontend-shell-workspace-active .frontend-shell-workspace :is(

  .application-shell-config-pane,

  .frontend-builder-panel-content,

  .frontend-builder-template-grid,

  .frontend-builder-block-list

)::-webkit-scrollbar {

  width: 0;

  height: 0;

}



body.frontend-shell-workspace-active .frontend-shell-workspace .frontend-builder-inspector-content {

  scrollbar-width: none;

}



body.frontend-shell-workspace-active .frontend-shell-workspace .frontend-builder-inspector-content::-webkit-scrollbar {

  width: 0;

  height: 0;

}



@media (max-width: 1080px) {

  body.frontend-shell-workspace-active .frontend-shell-workspace {

    grid-template-rows: auto minmax(0, 1fr);

  }



  body.frontend-shell-workspace-active .frontend-shell-workspace-bar {

    grid-template-columns: auto minmax(0, 1fr);

  }



  body.frontend-shell-workspace-active .frontend-shell-save-button {

    grid-column: 2;

    justify-self: end;

  }



  body.frontend-shell-workspace-active .frontend-shell-editor-layout[data-frontend-shell-tab="settings"] {

    grid-template-columns: minmax(0, 1fr);

    grid-template-areas:

      "preview"

      "summary";

    overflow-y: auto;

  }



  body.frontend-shell-workspace-active .frontend-shell-editor-layout[data-frontend-shell-tab="builder"] {

    grid-template-columns: minmax(0, 1fr);

    grid-template-areas:

      "preview"

      "builder"

      "inspector";

    overflow-y: auto;

  }



  body.frontend-shell-workspace-active #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="builder"] {

    grid-template-columns: minmax(0, 1fr) !important;

    grid-template-areas:

      "preview"

      "builder"

      "inspector" !important;

    overflow-y: auto !important;

  }



  body.frontend-shell-workspace-active #frontend-shell.section.active .frontend-shell-editor-layout[data-frontend-shell-tab="builder"] .frontend-builder-inspector-pane {

    border-left: 0;

    border-top: 1px solid var(--admin-panel-border-soft);

  }

}



@media (max-width: 720px) {

  body.frontend-shell-workspace-active .frontend-shell-workspace-bar {

    grid-template-columns: minmax(0, 1fr);

  }



  body.frontend-shell-workspace-active .frontend-shell-save-button {

    grid-column: auto;

    justify-self: stretch;

  }



  body.frontend-shell-workspace-active .frontend-shell-mode-tabs,

  body.frontend-shell-workspace-active .frontend-builder-panel-tabs,

  body.frontend-shell-workspace-active .frontend-builder-workbench {

    grid-template-columns: minmax(0, 1fr);

  }

}



.form-control.login-chart-date-input.themed-date-input,

.form-control.dispatch-center-date-input.themed-date-input,

.form-control.api-monitoring-date-input.themed-date-input {

  background: var(--wb-theme-modal-field-bg) !important;

}



#distribution #distributorTable th.partner-list-index-col,

#distribution #distributorTable td.partner-list-index-col {

  padding-left: 8px;

  padding-right: 8px;

  width: 5%;

  min-width: 0;

}



#applicationTable .application-table-cell--index,

#orderManagementTableBody > tr:not(.table-state-row):not(.admin-table-spacer-row) > td:first-child,

#apiKeyTableBody > tr:not(.table-state-row):not(.admin-table-spacer-row) > td:first-child,

#memberUsersTableBody > tr:not(.table-state-row):not(.admin-table-spacer-row):not(.member-users-state-row) > td:first-child,

#packageTableBody > tr:not(.table-state-row):not(.admin-table-spacer-row) > td:first-child,

#addonsTableBody > tr:not(.table-state-row):not(.admin-table-spacer-row) > td:first-child,

#activationRecordsTableBody > tr:not(.table-state-row):not(.admin-table-spacer-row) > td:first-child,

#logsTableBody > tr:not(.table-state-row):not(.admin-table-spacer-row) > td.logs-col-id,

#tablesTableBody > tr:not(.table-state-row):not(.admin-table-spacer-row) .database-table-sequence-text,

#distributorsTableBody > tr:not(.table-state-row):not(.admin-table-spacer-row) > td.partner-list-index-col,

#superGuardEventsBody > tr:not(.table-state-row):not(.admin-table-spacer-row) > td:first-child,

#superGuardAlertsBody > tr:not(.table-state-row):not(.admin-table-spacer-row) > td:first-child,

#superGuardRawRegisterLogsBody > tr:not(.table-state-row):not(.admin-table-spacer-row) > td:first-child,

#superGuardRawLoginLogsBody > tr:not(.table-state-row):not(.admin-table-spacer-row) > td:first-child,

#superGuardRawPaymentLogsBody > tr:not(.table-state-row):not(.admin-table-spacer-row) > td:first-child {

  font-weight: 500;

}



/* Keep card hover feedback inside the card so adjacent tab bars cannot be covered. */

.stat-card:hover,

.chart-card:hover,

#overview .charts-grid > .card:hover,

.platform-create-card:hover,

.platform-card:hover,

.login-stat-card:hover,

.login-system-card:hover,

.login-method-card:hover,

.security-stat-card:hover,

.endpoint-item-card:hover,





/* Shared hover motion for overview-style stat cards. */

#database .database-overview-stat-card,

#api #call-stats .monitoring-realtime-panel .monitoring-stats-compact .stat-card,

#dispatch-center .monitoring-realtime-panel .monitoring-stats-compact .stat-card,

#payment .payment-monitoring-stats .stat-card,

.login-stat-card,

.security-stat-card,

#super-guard .super-guard-overview-stats .stat-card,

#partner-overview .stats-grid .stat-card { transform: none !important; }



#database .database-overview-stat-card::before,

#api #call-stats .monitoring-realtime-panel .monitoring-stats-compact .stat-card::before,

#dispatch-center .monitoring-realtime-panel .monitoring-stats-compact .stat-card::before,

#payment .payment-monitoring-stats .stat-card::before,

.login-stat-card::before,

.security-stat-card::before,

#super-guard .super-guard-overview-stats .stat-card::before,

#partner-overview .stats-grid .stat-card::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  background: linear-gradient(

    135deg,

    color-mix(in srgb, var(--wb-theme-accent-ghost) 78%, transparent 22%) 0%,

    transparent 50%,

    var(--wb-theme-accent-soft) 100%

  );

  opacity: 0;

  transition: opacity 0.24s ease;

  pointer-events: none;

}



#database .database-overview-stat-card > *,

#api #call-stats .monitoring-realtime-panel .monitoring-stats-compact .stat-card > *,

#dispatch-center .monitoring-realtime-panel .monitoring-stats-compact .stat-card > *,

#payment .payment-monitoring-stats .stat-card > *,

.security-stat-card > *,

#super-guard .super-guard-overview-stats .stat-card > *,

#partner-overview .stats-grid .stat-card > * {

  position: relative;

  z-index: 1;

}



.login-stat-card > .login-stat-icon,

.login-stat-card > .login-stat-content {

  position: relative;

  z-index: 1;

}







#database .database-overview-stat-card > .database-stat-icon,

#api #call-stats .monitoring-realtime-panel .monitoring-stats-compact .stat-card > .monitoring-stat-icon,

#dispatch-center .monitoring-realtime-panel .monitoring-stats-compact .stat-card > .monitoring-stat-icon,

#payment .payment-monitoring-stats .stat-card > .monitoring-stat-icon,

.login-stat-card > .login-stat-icon,

.security-stat-card > .security-stat-icon,

#super-guard .super-guard-overview-stats .stat-card .super-guard-overview-icon,

#partner-overview .stats-grid .stat-card > .stat-icon {

  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1), filter 0.24s ease;

  will-change: transform, box-shadow, filter;

}



#database .database-overview-stat-card > .database-stat-icon svg,

#api #call-stats .monitoring-realtime-panel .monitoring-stats-compact .stat-card > .monitoring-stat-icon svg,

#dispatch-center .monitoring-realtime-panel .monitoring-stats-compact .stat-card > .monitoring-stat-icon svg,

#payment .payment-monitoring-stats .stat-card > .monitoring-stat-icon svg,

.login-stat-card > .login-stat-icon svg,

.security-stat-card > .security-stat-icon svg,

#super-guard .super-guard-overview-stats .stat-card .super-guard-overview-icon svg,

#partner-overview .stats-grid .stat-card > .stat-icon svg {

  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);

}



#database .database-overview-stat-card .stat-value,

#api #call-stats .monitoring-realtime-panel .monitoring-stats-compact .stat-card .stat-value,

#dispatch-center .monitoring-realtime-panel .monitoring-stats-compact .stat-card .stat-value,

#payment .payment-monitoring-stats .stat-card .stat-value,

.login-stat-card .login-stat-value,

.security-stat-card .security-stat-value,

#super-guard .super-guard-overview-stats .stat-card .stat-value,

#partner-overview .stats-grid .stat-card .stat-value {

  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), color 0.24s ease;

}



#database .database-overview-stat-card .stat-label,

#api #call-stats .monitoring-realtime-panel .monitoring-stats-compact .stat-card .stat-label,

#dispatch-center .monitoring-realtime-panel .monitoring-stats-compact .stat-card .stat-label,

#payment .payment-monitoring-stats .stat-card .stat-label,

.login-stat-card .login-stat-label,

.security-stat-card .security-stat-label,

#super-guard .super-guard-overview-stats .stat-card .stat-label,

#partner-overview .stats-grid .stat-card .stat-label {

  transition: color 0.24s ease;

}



















#api > .api-category-shell {

  position: relative;

  z-index: 2;

}



#api > .api-category-content-shell {

  position: relative;

  z-index: 1;

}



@media (min-width: 1181px) {

  #dispatch-center .dispatch-center-tabs {

    flex: 1 1 auto;

  }



  #dispatch-center .dispatch-center-toolbar {

    margin-right: 190px;

  }



  #api > .api-category-shell .api-system-monitoring-actions {

    margin-right: 73px;

  }



  .wb-select-menu--dispatch-scope:not(.wb-select-menu--system-monitoring-scope) {

    --dispatch-scope-child-column-width: var(--dispatch-scope-primary-column-width, var(--dispatch-scope-column-width)) !important;

  }



  .wb-select-menu--dispatch-scope:not(.wb-select-menu--system-monitoring-scope)[data-dispatch-scope-column-count="1"] {

    width: var(--dispatch-scope-primary-column-width, var(--dispatch-scope-column-width)) !important;

    min-width: var(--dispatch-scope-primary-column-width, var(--dispatch-scope-column-width)) !important;

    max-width: var(--dispatch-scope-primary-column-width, var(--dispatch-scope-column-width)) !important;

  }



  .wb-select-menu--dispatch-scope:not(.wb-select-menu--system-monitoring-scope)[data-dispatch-scope-column-count="2"] {

    width: calc((var(--dispatch-scope-primary-column-width, var(--dispatch-scope-column-width)) * 2) + var(--dispatch-scope-column-gap, 5px)) !important;

    min-width: calc((var(--dispatch-scope-primary-column-width, var(--dispatch-scope-column-width)) * 2) + var(--dispatch-scope-column-gap, 5px)) !important;

    max-width: calc((var(--dispatch-scope-primary-column-width, var(--dispatch-scope-column-width)) * 2) + var(--dispatch-scope-column-gap, 5px)) !important;

  }



  .wb-select-menu--dispatch-scope:not(.wb-select-menu--system-monitoring-scope)[data-dispatch-scope-column-count="3"] {

    width: calc((var(--dispatch-scope-primary-column-width, var(--dispatch-scope-column-width)) * 3) + (var(--dispatch-scope-column-gap, 5px) * 2)) !important;

    min-width: calc((var(--dispatch-scope-primary-column-width, var(--dispatch-scope-column-width)) * 3) + (var(--dispatch-scope-column-gap, 5px) * 2)) !important;

    max-width: calc((var(--dispatch-scope-primary-column-width, var(--dispatch-scope-column-width)) * 3) + (var(--dispatch-scope-column-gap, 5px) * 2)) !important;

  }

}



  .admin-account-footer {

    grid-column: 1 / -1;

  }



/* 2026-08-31 用户后台按钮配置化修复：.nav-item 的 display:flex 覆盖了 [hidden]，导致 features 过滤失效 */

.nav-item[hidden],

.nav-item.is-user-hidden {

  display: none !important;

}





/* ===== 应用分类：分组视图 + 拖拽归类 ===== */

#settings .settings-appcat-uncat-zone {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 12px 14px;

  border: 1px dashed var(--settings-soft-border-strong);

  border-radius: 14px;

  background: color-mix(in srgb, var(--settings-soft-surface) 90%, rgba(var(--admin-accent-rgb), 0.08) 10%);

  font-size: 13px;

  font-weight: 700;

  color: var(--settings-text-strong);

  cursor: grab;

}

#settings .settings-appcat-uncat-zone small {

  margin-left: auto;

  font-size: 12px;

  font-weight: 400;

  color: var(--settings-text-muted);

}

#settings .settings-appcat-uncat-zone__count,

#settings .settings-appcat-group__count {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 22px;

  height: 22px;

  padding: 0 8px;

  border-radius: 999px;

  background: color-mix(in srgb, rgba(var(--admin-accent-rgb), 0.16) 70%, transparent 30%);

  font-size: 12px;

  font-weight: 700;

  color: var(--wb-theme-accent-text);

}

#settings .settings-appcat-node-count {

  font-size: 12px;

  font-weight: 700;

  color: var(--settings-text-muted);

  white-space: nowrap;

  align-self: center;

}

#settings .settings-appcat-group {

  display: flex;

  flex-direction: column;

  gap: 10px;

  padding: 12px;

  border: 1px solid var(--settings-soft-border);

  border-radius: 16px;

  background: var(--settings-card-background);

}

#settings .settings-appcat-group__header {

  display: flex;

  align-items: center;

  gap: 10px;

}

#settings .settings-appcat-group__header strong {

  font-size: 14px;

  color: var(--settings-text-strong);

}

#settings .settings-appcat-group__hint {

  margin-left: auto;

  font-size: 11px;

  color: var(--settings-text-muted);

}

#settings .settings-appcat-app {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 20px 12px;

  border: 1px solid var(--settings-soft-border);

  border-radius: 12px;

  background: var(--admin-panel-surface);

  cursor: grab;

  user-select: none;

}

#settings .settings-appcat-app__info {

  display: flex;

  flex-direction: column;

  gap: 4px;

  min-width: 0;

  flex: 1 1 auto;

}

#settings .settings-appcat-app__info strong {

  font-size: 13px;

  color: var(--settings-text-strong);

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

#settings .settings-appcat-app__info small {

  font-size: 11px;

  color: var(--settings-text-muted);

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

#settings .settings-appcat-app__tag {

  flex: 0 0 auto;

  max-width: 150px;

  padding: 3px 9px;

  border-radius: 999px;

  background: color-mix(in srgb, rgba(var(--admin-accent-rgb), 0.14) 70%, transparent 30%);

  font-size: 11px;

  color: var(--wb-theme-accent-text);

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

#settings .settings-appcat-app.is-dragging {

  opacity: 0.45;

}

#settings [data-appcat-drop].settings-appcat-drop-active {

  outline: 2px dashed rgba(var(--admin-accent-rgb), 0.85);

  outline-offset: -2px;

  background: color-mix(in srgb, rgba(var(--admin-accent-rgb), 0.12) 80%, var(--settings-soft-surface) 20%) !important;

}



.app-category-cascade {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 8px;

  flex: 1;

  min-width: 0;

}

.app-category-cascade .form-select {

  min-width: 140px;

  max-width: 220px;

  flex: 0 1 auto;

}

/* ===== 应用分类：左侧按钮导航 + 右侧内容大框 ===== */

#settings .settings-application-category-layout {

  display: flex; gap: 16px; align-items: stretch; min-height: 0;

}

#settings .settings-application-category-nav {

  width: 240px; flex: 0 0 240px; border: 1px solid var(--settings-soft-border-strong);

  border-radius: 16px; padding: 8px; background: var(--admin-panel-surface);

  display: flex; flex-direction: column; gap: 4px; overflow-y: auto;

  max-height: min(560px, 58vh); overscroll-behavior: contain;

}

#settings .settings-appcat-nav-item {

  display: flex; align-items: center; gap: 8px; width: 100%;

  padding: 8px 10px; border: none; border-radius: 8px; background: transparent;

  color: var(--settings-text-strong); font-size: 13px; cursor: pointer; text-align: center;

  transition: background .15s ease, color .15s ease;

}

#settings .settings-appcat-nav-item:hover { background: var(--settings-hover-surface, color-mix(in srgb, rgba(var(--admin-accent-rgb), 0.10) 100%, transparent)); }

#settings .settings-appcat-nav-item.is-active {

  background: color-mix(in srgb, rgba(var(--admin-accent-rgb), 0.14) 100%, transparent);

  color: var(--wb-theme-accent-text); font-weight: 600;

}

#settings .settings-appcat-nav-item__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }

#settings .settings-appcat-nav-item__count {

  background: color-mix(in srgb, rgba(var(--admin-accent-rgb), 0.10) 100%, transparent);

  color: var(--settings-text-muted); border-radius: 999px; padding: 1px 8px;

  font-size: 11px; line-height: 16px; flex: 0 0 auto;

}

#settings .settings-appcat-nav-item.is-active .settings-appcat-nav-item__count {

  background: color-mix(in srgb, rgba(var(--admin-accent-rgb), 0.18) 100%, transparent);

  color: var(--wb-theme-accent-text);

}

#settings .settings-appcat-nav-item--create {

  color: var(--wb-theme-accent-text); border-top: 1px dashed var(--settings-soft-border-strong);

  margin-top: 4px; font-weight: 500;

}

#settings .settings-appcat-nav-item--create:hover {

  background: color-mix(in srgb, rgba(var(--admin-accent-rgb), 0.10) 100%, transparent);

}

#settings .settings-appcat-nav-toggle {

  width: 18px; flex: 0 0 18px; display: inline-flex; align-items: center; justify-content: center;

  color: var(--settings-text-muted); font-size: 11px;

}

.settings-appcat-nav-toggle svg { display: block; transition: transform 0.22s ease; }

.settings-appcat-nav-toggle.is-expanded svg { transform: rotate(90deg); }

#settings .settings-appcat-nav-toggle--leaf { color: var(--settings-text-muted); opacity: 0.5; cursor: default; }

#settings .settings-appcat-nav-children {

  display: flex;

  flex-direction: column;

  gap: 2px;

  max-height: none;

  overflow: hidden;

  transition: max-height 0.22s ease;

}

.settings-appcat-nav-children.is-collapsed {

  max-height: 0;

}

#settings .settings-appcat-nav-group { display: flex; flex-direction: column; gap: 2px; }



#settings .settings-application-category-pane {

  flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 0;

  padding: 18px; border: 1px solid var(--settings-soft-border-strong); border-radius: 16px;

  background: var(--admin-panel-surface);

}

#settings .settings-application-category-pane__header {

  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;

}

#settings .settings-appcat-pane-title { margin-bottom: 12px; }

#settings .settings-appcat-pane-title h6 { margin: 0 0 2px; font-size: 15px; line-height: 1.45; color: var(--settings-text-strong); }

#settings .settings-appcat-pane-title p { margin: 0; font-size: 12px; line-height: 1.7; color: var(--settings-text-muted); }

#settings .settings-appcat-pane-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

#settings .settings-appcat-pane-name-input { width: 180px; }

#settings .settings-appcat-pane-delete { color: #dc2626; border-color: #fecaca; }

#settings .settings-appcat-pane-delete:hover { transform: scale(1.1) !important; }

#settings .settings-appcat-create-form {

  background: var(--settings-card-background); border: 1px solid var(--settings-soft-border);

  border-radius: 16px; padding: 16px;

}

#settings .settings-appcat-create-form .app-quick-cat-form__row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

#settings .settings-appcat-create-form .form-select { min-width: 130px; max-width: 220px; }

#settings .settings-application-category-assignments { flex: 1 1 auto; }



/* ===== 应用分类：强制新布局（覆盖默认 grid 与媒体查询断点） ===== */

#settings .settings-application-category-layout {

  display: flex !important;

  grid-template-columns: none !important;

  gap: 16px !important;

  align-items: stretch !important;

  min-height: 0 !important;

}

#settings .settings-application-category-nav {

  flex: 0 0 240px !important;

  width: 240px !important;

}

#settings .settings-application-category-pane {

  flex: 1 1 auto !important;

  min-width: 0 !important;

}





/* ===== 应用分类：去除外层大框，左右撑满对齐一级标签，左侧延伸到底部 ===== */

#settings .settings-card--application-category {

  padding: 0 !important;

  border: none !important;

  background: var(--admin-panel-surface) !important;

  box-shadow: none !important;

  flex: 1 1 auto !important;

  min-height: 0 !important;

}

#settings .settings-application-category-layout {

  flex: 1 1 auto !important;

  min-height: 0 !important;

  align-items: stretch !important;

}

#settings .settings-application-category-nav {

  max-height: none !important;

  height: auto !important;

  flex: 0 0 240px !important;

  min-height: 0 !important;

  overflow-y: auto !important;

  overscroll-behavior: contain !important;

}

#settings .settings-application-category-pane {

  flex: 1 1 auto !important;

  min-height: 0 !important;

  min-width: 0 !important;

  overflow-y: auto !important;

  overscroll-behavior: contain !important;

}



/* ===== 应用分类 viewport-fit（类选择器）：左/右框全高，内容多时内部滚动 ===== */

#settings.section.active.settings-viewport-fit .settings-card--application-category {

  flex: 1 1 auto !important;

  min-height: 0 !important;

  max-height: calc(var(--settings-viewport-height, 480px) - 66px) !important;

  overflow: hidden !important;

  border-radius: 0 !important;

}

#settings.section.active.settings-viewport-fit .settings-application-category-layout {

  flex: 1 1 auto !important;

  min-height: 0 !important;

}

#settings.section.active.settings-viewport-fit .settings-application-category-nav {

  flex: 0 0 240px !important;

  min-height: 0 !important;

  overflow-y: auto !important;

  overscroll-behavior: contain !important;

}

#settings.section.active.settings-viewport-fit .settings-application-category-pane {

  flex: 1 1 auto !important;

  min-width: 0 !important;

  min-height: 0 !important;

  overflow-y: auto !important;

  overscroll-behavior: contain !important;

}





/* 应用分类右侧：去 group 大框，只留应用卡片 */

#settings .settings-appcat-group {

  display: grid !important;

  grid-template-columns: repeat(auto-fill, minmax(180px, 220px)) !important;

  gap: 8px !important;

  padding: 0 !important;

  border: none !important;

  background: transparent !important;

  border-radius: 0 !important;

}

#settings .settings-appcat-group__header,

#settings .settings-appcat-group__hint,

#settings .settings-appcat-app__tag {

  display: none !important;

}





/* 应用分类左侧就地新建二级分类 */

#settings .settings-appcat-nav-inline-create {

  display: flex;

  flex-direction: column;

  gap: 6px;

  padding: 8px;

  border: 1px dashed var(--settings-soft-border-strong);

  border-radius: 12px;

  background: color-mix(in srgb, var(--settings-soft-surface) 60%, transparent 40%);

  flex: 0 0 auto;

}

#settings .settings-appcat-nav-inline-input {

  width: 100%;

  min-height: 34px;

  font-size: 13px;

}

#settings .settings-appcat-nav-inline-actions {

  display: flex;

  gap: 6px;

  justify-content: flex-end;

}



/* 应用凭证：密钥重置 / 凭证展示 */

.application-secret-control,

.application-credential-field {

  display: flex;

  align-items: center;

  gap: 8px;

  width: 100%;

}

.application-secret-control .form-control,

.application-credential-field .form-control {

  flex: 1;

  min-width: 0;

}

.application-secret-control .btn-sm,

.application-credential-field .btn-sm {

  white-space: nowrap;

  flex-shrink: 0;

  height: 34px;

  line-height: 32px;

}

.application-field-hint {

  display: block;

  margin-top: 6px;

  font-size: 12px;

  color: #888;

  line-height: 1.5;

}



@media (max-width: 768px) {

  #login .api-unified-main-tabs-shell > .login-tab {

    flex: 1 1 0 !important;

    width: auto !important;

    min-width: 0 !important;

  }

}



/* 应用分类左侧树：新增下级(＋)/删除(🗑) 小图标 */

.settings-appcat-nav-action {

  flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex;

  align-items: center; justify-content: center; border-radius: 5px;

  cursor: pointer; user-select: none; box-sizing: border-box;

  background: rgba(0,0,0,0.045);

  border: 1px solid rgba(0,0,0,0.07);

  box-shadow: 0 1px 1.5px rgba(0,0,0,0.05);

  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;

}

/* 新增图标：主题蓝，向右收拢靠近删除图标 */

.settings-appcat-nav-action--add {

  margin-right: -5px;

  color: var(--wb-theme-accent-text);

}

.settings-appcat-nav-action--add:hover { transform: scale(1.1) !important; }

/* 同级新建图标：主题蓝（与新增下级一致），圆内加号区分语义 */

.settings-appcat-nav-action--sibling {

  margin-right: -5px;

  color: var(--wb-theme-accent-text);

}

.settings-appcat-nav-action--sibling:hover { transform: scale(1.1) !important; }

/* 删除图标：红色，向右收拢靠近数量数字 */

.settings-appcat-nav-action--del {

  margin-right: -2px;

  color: #d94f4f;

}

.settings-appcat-nav-action--del:hover { transform: scale(1.1) !important; }



/* 应用分类：新增下级/重命名 命名弹窗 */

.appcat-name-modal h4 {

  margin: 0 0 6px; font-size: 16px; font-weight: 600;

  color: var(--settings-text-strong, #1a1b1c);

}

.appcat-name-modal__sub {

  margin: 0 0 12px; font-size: 12px; color: var(--settings-text-muted, #6b7280);

}

.appcat-name-modal__input {

  width: 100%; box-sizing: border-box; padding: 8px 10px;

  font-size: 14px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.15);

  color: var(--settings-text-strong, #1a1b1c); background: #fff;

}

.appcat-name-modal__input:focus {

  outline: none; border-color: var(--wb-theme-accent-text);

  box-shadow: 0 0 0 2px rgba(var(--admin-accent-rgb), 0.15);

}

.app-modal--appcat-name .modal-footer {

  border-bottom-left-radius: 12px !important;

  border-bottom-right-radius: 12px !important;

  border-top: 1px solid var(--admin-table-bar-border) !important;

}





/* 应用分类命名弹窗：立即关闭（去掉visibility过渡） */

/* 应用分类命名弹窗：适中宽度 */

.app-modal--appcat-name .modal-content {

  width: min(400px, calc(100vw - 32px)) !important;

  max-width: min(400px, calc(100vw - 32px)) !important;

  border-radius: 12px !important;

  padding: 0 !important;

  overflow: hidden !important;

  cursor: default !important;

  border: 1px solid var(--wb-theme-modal-divider) !important;

}

.app-modal--appcat-name .modal-header {

  border-top-left-radius: 12px !important;

  border-top-right-radius: 12px !important;

  cursor: default !important;

}

.app-modal--appcat-name .modal-body {

  padding: 18px 20px 20px !important;

}

.appcat-name-modal h4 {

  margin: 0 0 6px; font-size: 16px; font-weight: 600;

  color: var(--settings-text-strong, #1a1b1c);

}

.appcat-name-modal__sub {

  margin: 0 0 12px; font-size: 12px; color: var(--settings-text-muted, #6b7280);

}



/* per-user TOTP bind modal */

#modal .builder-user-totp-bind {

  display: flex;

  flex-direction: column;

  gap: 12px;

}

#modal .builder-user-totp-secret code,

#modal .builder-user-totp-url code {

  display: block;

  word-break: break-all;

  padding: 10px 12px;

  border-radius: 8px;

  background: var(--wb-theme-soft-bg, rgba(0, 0, 0, 0.05));

  font-size: 13px;

  line-height: 1.6;

  color: var(--settings-text-strong, #1a1b1c);

}

#modal .builder-user-totp-url > span {

  display: block;

  font-size: 12px;

  color: var(--settings-text-muted, #6b7280);

  margin-bottom: 4px;

}

#modal .builder-user-totp-url-actions {

  display: flex;

  gap: 8px;

}

.admin-auth-settings-actions--user-totp {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 10px;

}





/* 搜索栏外框去除：全局统一，强制覆盖所有前置规则 */

.filters,

.application-list-filters,

.application-filter-toolbar {

  background: transparent !important;

  background-color: transparent !important;

  background-image: none !important;

  border: none !important;

  border-radius: 0 !important;

  box-shadow: none !important;

}

.card.admin-section-layout-card,

.card.admin-section-layout-card > .card-body {

  background: var(--admin-panel-surface) !important;

  border: none !important;

  border-radius: 0 !important;

  box-shadow: none !important;

}



.filters,

.application-list-filters {

  padding: 0 !important;

  margin-bottom: 8px !important;

}





/* 表格UI随行高缩放：表头字号、分页按钮、分页文字 */

#applications .data-table th,

#orders .data-table th,

#member-users .data-table th,

#logs .data-table th,

#database .data-table th,

#distribution .data-table th,

#dispatch-center .data-table th,

#message-center .data-table th,

#packages .data-table th,

#super-guard .data-table th,

.admin-table-bottom-fit-scroll .data-table th {

  font-size: 14px !important;

}



#applications .application-management-pagination button,

#orders .order-management-pagination button,

#logs .logs-pagination button,

#database .database-pagination button,

#distribution .partner-list-pagination button,

#dispatch-center .dispatch-center-pagination button,

#message-center .message-center-inbox-pagination button,

#packages .member-management-pagination button,

#member-users .order-management-pagination button,

.admin-table-bottom-fit-pane > .admin-table-bottom-pagination button {

  min-height: var(--admin-button-min-height) !important;

  padding: var(--admin-button-padding-y) var(--admin-button-padding-x) !important;

  font-size: var(--admin-button-font-size) !important;

}



#applications .application-management-pagination span,

#orders .order-management-pagination span,

#logs .logs-pagination span,

#database .database-pagination span,

#distribution .partner-list-pagination span,

#dispatch-center .dispatch-center-pagination span,

#message-center .message-center-inbox-pagination span,

#packages .member-management-pagination span,

#member-users .order-management-pagination span,

.admin-table-bottom-fit-pane > .admin-table-bottom-pagination span {

  font-size: 14px !important;

  line-height: 32px !important;

}





/* 表格内容单元格同步缩放 */

#applications .data-table td,

#orders .data-table td,

#member-users .data-table td,

#logs .data-table td,

#database .data-table td,

#distribution .data-table td,

#dispatch-center .data-table td,

#message-center .data-table td,

#packages .data-table td,

#super-guard .data-table td,

.admin-table-bottom-fit-scroll .data-table td {

  font-size: 14px !important;

  line-height: 20px !important;

  padding-top: 7px !important;

  padding-bottom: 7px !important;

}





/* 表格缩放柔和过渡 */

#applications .data-table th,

#orders .data-table th,

#member-users .data-table th,

#logs .data-table th,

#database .data-table th,

#distribution .data-table th,

#dispatch-center .data-table th,

#message-center .data-table th,

#packages .data-table th,

#super-guard .data-table th,

.admin-table-bottom-fit-scroll .data-table th,

#applications .data-table td,

#orders .data-table td,

#member-users .data-table td,

#logs .data-table td,

#database .data-table td,

#distribution .data-table td,

#dispatch-center .data-table td,

#message-center .data-table td,

#packages .data-table td,

#super-guard .data-table td,

.admin-table-bottom-fit-scroll .data-table td,

#applications .data-table thead tr,

#orders .data-table thead tr,

#member-users .data-table thead tr,

#logs .data-table thead tr,

#database .data-table thead tr,

#distribution .data-table thead tr,

#dispatch-center .data-table thead tr,

#message-center .data-table thead tr,

#packages .data-table thead tr,

#super-guard .data-table thead tr,





#applications .application-management-table-scroll,

#orders .order-management-table-scroll,

#logs .logs-table-scroll,

#database .database-table-scroll,

#member-management-users-table-scroll,

#dispatch-center-rules-table-scroll,

#dispatch-center-error-table-scroll,

.admin-table-bottom-fit-scroll {

  transition: none !important;

}



#applications .application-management-pagination,

#orders .order-management-pagination,

#logs .logs-pagination,

#database .database-pagination,

#distribution .partner-list-pagination,

#dispatch-center .dispatch-center-pagination,

#super-guard .super-guard-pagination {

  transition: height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),

              padding 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



#applications .application-management-pagination button,

#orders .order-management-pagination button,

#logs .logs-pagination button,

#database .database-pagination button,

#distribution .partner-list-pagination button,

#dispatch-center .dispatch-center-pagination button,

#super-guard .super-guard-pagination button {

  transition: min-height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),

              padding 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),

              font-size 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}









/* 应用管理标签栏搜索工具：跟随系统标准表单控件样式（!important 覆盖 style-06 的 surface 色） */

#applicationListSearchTools input[type="text"],

#applicationListSearchTools select {

  height: 32px;

  padding: 0 10px;

  border: 1px solid var(--wb-theme-modal-field-border, #d8dde5);

  border-radius: 4px;

  background: var(--wb-theme-modal-field-bg, #f7f9fc) !important;

  border-color: var(--wb-theme-modal-field-border, #d8dde5) !important;

  color: var(--admin-panel-text-strong, #1f2733) !important;

  font-size: 13px;

  box-sizing: border-box;

  outline: none;

  transition: border-color 0.2s ease;

}

#applicationListSearchTools select {

  width: 150px;

  flex: 0 0 auto;

  cursor: pointer;

  background-image: none !important;

}

#applicationListSearchTools input[type="text"]:focus,

#applicationListSearchTools select:focus {

  border-color: var(--wb-theme-accent-border-strong, rgba(74, 126, 201, 0.54)) !important;

  box-shadow: none !important;

}

#applicationListSearchTools input::placeholder {

  color: var(--admin-panel-text-muted, #8a93a3) !important;

}





/* ===== 各界面一级/二级标签栏按钮缩短四分之一，间距统一 ===== */

:root {

  --admin-tab-width: 126px;

  --admin-tab-padding-x: 12px;

}



/* 标签栏容器：相邻按钮间距统一为8px */

.api-unified-main-tabs-shell {

  gap: 8px !important;

}



/* 应用管理终端选择器：文字与整个框水平居中，左右padding对称 */

#applicationListSearchTools .wb-select-trigger {

  justify-content: center !important;

  padding-left: 44px !important;

  padding-right: 44px !important;

}

#applicationListSearchTools .wb-select-trigger__label {

  text-align: center !important;

  width: 100% !important;

}



/* 应用管理搜索框：带放大镜图标，与终端下拉框风格统一 */

#applicationListSearchTools {

  position: relative;

  column-gap: 10px !important;

}



/* 放大镜：圆环 */

#applicationListSearchTools::before {

  content: "";

  position: absolute;

  left: 14px;

  top: 50%;

  width: 13px;

  height: 13px;

  border: 2px solid var(--wb-select-accent-strong);

  border-radius: 50%;

  transform: translateY(-50%);

  pointer-events: none;

  z-index: 2;

  opacity: 0.75;

}



/* 放大镜：手柄 */

#applicationListSearchTools::after {

  content: "";

  position: absolute;

  left: 25px;

  top: calc(50% + 5px);

  width: 2px;

  height: 7px;

  background: var(--wb-select-accent-strong);

  transform: rotate(-45deg);

  transform-origin: top center;

  border-radius: 1px;

  pointer-events: none;

  z-index: 2;

  opacity: 0.75;

}



#appSearchInput {

  height: 40px !important;

  min-height: 40px !important;

  padding: 0 14px 0 38px !important;

  border-radius: 12px !important;

  background: linear-gradient(180deg, var(--wb-select-surface-soft) 0%, var(--wb-select-surface) 100%) !important;

  border: 1px solid var(--wb-select-border) !important;

  color: var(--wb-select-accent-strong) !important;

  font-size: 14px !important;

  font-weight: 600 !important;

  box-sizing: border-box !important;

  transition: border-color 0.28s ease, background 0.28s ease !important;

}



#appSearchInput::placeholder {

  color: var(--admin-panel-text-muted) !important;

  font-weight: 400 !important;

}



#appSearchInput:focus {

  border-color: var(--wb-theme-accent-border-strong) !important;

  box-shadow: none !important;

  outline: none !important;

  background: linear-gradient(180deg, color-mix(in srgb, var(--wb-select-surface-soft) 88%, #ffffff 12%) 0%, color-mix(in srgb, var(--wb-select-surface) 92%, var(--wb-select-option-bg) 8%) 100%) !important;

}



/* 应用管理终端下拉框：高度与搜索框/按钮统一为40px */

#applicationListSearchTools .wb-select-trigger {

  min-height: 40px !important;

  height: 40px !important;

}

#applicationListSearchTools .wb-select-trigger__label {

  line-height: 40px !important;

  min-height: 40px !important;

}



/* 侧边栏顶部应用选择器：上下padding与右侧main-header统一为4px，底部分割线对齐 */

.app-selector-sidebar {

  padding-top: 7px !important;

  padding-bottom: 7px !important;

}



/* 数据卡片右上角说明图标：六边形科技感、颜色跟随卡片主题色，仅悬停图标显示统计口径（data-tip） */

.stat-card[data-tip] {

  position: relative;

}

.stat-tip-icon {

  position: absolute;

  top: 9px;

  left: 11px;

  width: 26px;

  height: 26px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: help;

  z-index: 6;

  transition: transform 0.15s ease, filter 0.15s ease;

}

.stat-tip-icon:hover {

  transform: scale(1.12);

  filter: drop-shadow(0 0 5px currentColor);

}

.stat-card[data-theme="revenue"] .stat-tip-icon {

  color: #ef6060;

}

.stat-card[data-theme="user"] .stat-tip-icon {

  color: #7b7bf2;

}

.stat-card[data-theme="order"] .stat-tip-icon {

  color: #35bed7;

}

.stat-card[data-theme="creation"] .stat-tip-icon,

.stat-card[data-theme="api"] .stat-tip-icon {

  color: #55d082;

}

.stat-tip-icon::after {

  content: attr(data-tip);

  position: absolute;

  top: 30px;

  left: -2px;

  z-index: 99999;

  max-width: 260px;

  min-width: 180px;

  padding: 8px 10px;

  background: rgba(33, 33, 33, 0.95);

  color: #ffffff;

  font-size: 12px;

  line-height: 1.55;

  border-radius: 8px;

  white-space: normal;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);

  pointer-events: none;

  text-align: left;

  font-weight: 400;

  font-family: 'Roboto', 'PingFang SC', 'Segoe UI', Arial, sans-serif;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.15s ease, visibility 0.15s ease;

}

.stat-tip-icon:hover::after {

  opacity: 1;

  visibility: visible;

}



/* 3D 舞台 */

#overview.dashboard-flip-stage {

  perspective: 1100px;

}



/* 退出动画（170ms 定格） */

.dashboard-page {

  transform-style: preserve-3d;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

}

.dashboard-page.panel-anim-exit-flip { animation: dashFlipOut var(--switch-effect-duration, .3s) ease forwards; }

.dashboard-page.panel-anim-exit-cube { animation: dashCubeOut var(--switch-effect-duration, .3s) ease forwards; }

.dashboard-page.panel-anim-exit-fade { animation: dashFadeOut var(--switch-effect-duration, .3s) ease forwards; }

.dashboard-page.panel-anim-exit-slide-up { animation: dashSlideUpOut var(--switch-effect-duration, .3s) ease forwards; }

.dashboard-page.panel-anim-exit-slide-right { animation: dashSlideRightOut var(--switch-effect-duration, .3s) ease forwards; }

.dashboard-page.panel-anim-exit-zoom { animation: dashZoomOut var(--switch-effect-duration, .3s) ease forwards; }

.dashboard-page.panel-anim-exit-blur { animation: dashBlurOut var(--switch-effect-duration, .3s) ease forwards; }

.dashboard-page.panel-anim-exit-rotate { animation: dashRotateOut var(--switch-effect-duration, .3s) ease forwards; }

.dashboard-page.panel-anim-exit-bounce { animation: dashBounceOut var(--switch-effect-duration, .3s) ease forwards; }

.dashboard-page.panel-anim-exit-wipe { animation: dashWipeOut var(--switch-effect-duration, .3s) ease forwards; }



/* 进入动画（230ms） */

.dashboard-page.panel-anim-enter-flip { animation: dashFlipIn var(--switch-effect-duration, .3s) ease; }

.dashboard-page.panel-anim-enter-cube { animation: dashCubeIn var(--switch-effect-duration, .3s) ease; }

.dashboard-page.panel-anim-enter-fade { animation: dashFadeIn var(--switch-effect-duration, .3s) ease; }

.dashboard-page.panel-anim-enter-slide-up { animation: dashSlideUpIn var(--switch-effect-duration, .3s) ease; }

.dashboard-page.panel-anim-enter-slide-right { animation: dashSlideRightIn var(--switch-effect-duration, .3s) ease; }

.dashboard-page.panel-anim-enter-zoom { animation: dashZoomIn var(--switch-effect-duration, .3s) ease; }

.dashboard-page.panel-anim-enter-blur { animation: dashBlurIn var(--switch-effect-duration, .3s) ease; }

.dashboard-page.panel-anim-enter-rotate { animation: dashRotateIn var(--switch-effect-duration, .3s) ease; }

.dashboard-page.panel-anim-enter-bounce { animation: dashBounceIn var(--switch-effect-duration, .3s) ease; }

.dashboard-page.panel-anim-enter-wipe { animation: dashWipeIn var(--switch-effect-duration, .3s) ease; }



@keyframes dashFlipOut {

  from { transform: rotateY(0deg); opacity: 1; }

  to { transform: rotateY(90deg); opacity: 0; }

}

@keyframes dashFlipIn {

  from { transform: rotateY(-90deg); opacity: 0; }

  to { transform: rotateY(0deg); opacity: 1; }

}

@keyframes dashCubeOut {

  from { transform: rotateX(0deg); opacity: 1; }

  to { transform: rotateX(-90deg); opacity: 0; }

}

@keyframes dashCubeIn {

  from { transform: rotateX(90deg); opacity: 0; }

  to { transform: rotateX(0deg); opacity: 1; }

}

@keyframes dashFadeOut { to { opacity: 0; transform: scale(0.985); } }

@keyframes dashFadeIn { from { opacity: .58; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }

@keyframes dashSlideUpOut { to { opacity: 0; transform: translateY(-42px); } }

@keyframes dashSlideUpIn { from { opacity: .58; transform: translate3d(0, 42px, 0); } 60% { opacity: 0.82; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

@keyframes dashSlideRightOut { to { opacity: 0; transform: translateX(-54px); } }

@keyframes dashSlideRightIn { from { opacity: .58; transform: translate3d(54px, 0, 0); } 40% { opacity: 0.76; transform: translate3d(24px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

@keyframes dashZoomOut { to { opacity: 0; transform: scale(0.9); } }

@keyframes dashZoomIn { 0% { opacity: .58; transform: scale(.90); } 50% { opacity: 0.82; transform: scale(.97); } 80% { opacity: 0.97; transform: scale(1.01); } 100% { opacity: 1; transform: scale(1); } }

@keyframes dashBlurOut { to { opacity: 0; filter: blur(7px); } }

@keyframes dashBlurIn { from { opacity: .58; filter: blur(7px); } to { opacity: 1; filter: blur(0); } }

@keyframes dashRotateOut { to { opacity: 0; transform: rotateZ(-7deg) scale(0.97); } }

@keyframes dashRotateIn { 0% { opacity: .58; transform: rotateZ(-7deg) scale(.94); } 70% { opacity: 0.92; transform: rotateZ(1deg) scale(1.01); } 100% { opacity: 1; transform: rotateZ(0deg) scale(1); } }

@keyframes dashBounceOut { to { opacity: 0; transform: scale(0.9); } }

@keyframes dashBounceIn { 0% { opacity: 0; } 30% { opacity: 0.5; } 60% { opacity: 1; } 80% { opacity: 0.9; } 100% { opacity: 1; } }

@keyframes dashWipeOut { to { opacity: 0; clip-path: inset(0 0 0 100%); } }

@keyframes dashWipeIn { from { opacity: 0; } 50% { opacity: 0.5; } to { opacity: 1; } }



/* ===== 标签内容进入动画专用关键帧：保留内容可见底色，避免切换时露出白底 ===== */

@keyframes tabFadeIn { from { opacity: .62; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

@keyframes tabSlideUpIn { from { opacity: .62; transform: translate3d(0, 34px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

@keyframes tabSlideRightIn { from { opacity: .62; transform: translate3d(44px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

@keyframes tabZoomIn { from { opacity: .62; transform: scale(.88); } 70% { opacity: .96; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } }

@keyframes tabBlurIn { from { opacity: .62; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }

@keyframes tabRotateIn { from { opacity: .62; transform: rotateZ(-6deg) scale(.93); } 70% { opacity: .96; transform: rotateZ(1deg) scale(1.01); } to { opacity: 1; transform: rotateZ(0deg) scale(1); } }



/* ===== 页面切换特效：左侧菜单 section 与右侧标签 tab 进入动画（时长跟随全局滑块） ===== */

/* 左侧菜单 section：完整进入动画（内容由空到有，可含透明度起点） */

.section.section-anim-enter-fade { animation: dashFadeIn var(--switch-effect-duration, .3s) ease; }

.section.section-anim-enter-slide-up { animation: dashSlideUpIn var(--switch-effect-duration, .3s) ease; }

.section.section-anim-enter-slide-right { animation: dashSlideRightIn var(--switch-effect-duration, .3s) ease; }

.section.section-anim-enter-zoom { animation: dashZoomIn var(--switch-effect-duration, .3s) ease; }

.section.section-anim-enter-blur { animation: dashBlurIn var(--switch-effect-duration, .3s) ease; }

.section.section-anim-enter-rotate { animation: dashRotateIn var(--switch-effect-duration, .3s) ease; }



/* 标签内容：专用动画（起点不透明，切换不闪空白；同时兼容其他内容类名） */

.tab-content.section-anim-enter-fade,

.tab-panel.section-anim-enter-fade,

.panel.section-anim-enter-fade,

.pane.section-anim-enter-fade,

.category-content.section-anim-enter-fade { animation: tabFadeIn var(--switch-effect-duration, .3s) ease; }

.tab-content.section-anim-enter-slide-up,

.tab-panel.section-anim-enter-slide-up,

.panel.section-anim-enter-slide-up,

.pane.section-anim-enter-slide-up,

.category-content.section-anim-enter-slide-up { animation: tabSlideUpIn var(--switch-effect-duration, .3s) ease; }

.tab-content.section-anim-enter-slide-right,

.tab-panel.section-anim-enter-slide-right,

.panel.section-anim-enter-slide-right,

.pane.section-anim-enter-slide-right,

.category-content.section-anim-enter-slide-right { animation: tabSlideRightIn var(--switch-effect-duration, .3s) ease; }

.tab-content.section-anim-enter-zoom,

.tab-panel.section-anim-enter-zoom,

.panel.section-anim-enter-zoom,

.pane.section-anim-enter-zoom,

.category-content.section-anim-enter-zoom { animation: tabZoomIn var(--switch-effect-duration, .3s) ease; }

.tab-content.section-anim-enter-blur,

.tab-panel.section-anim-enter-blur,

.panel.section-anim-enter-blur,

.pane.section-anim-enter-blur,

.category-content.section-anim-enter-blur { animation: tabBlurIn var(--switch-effect-duration, .3s) ease; }

.tab-content.section-anim-enter-rotate,

.tab-panel.section-anim-enter-rotate,

.panel.section-anim-enter-rotate,

.pane.section-anim-enter-rotate,

.category-content.section-anim-enter-rotate { animation: tabRotateIn var(--switch-effect-duration, .3s) ease; }



/* 页面中还有一批按业务命名的 *-content / *-view 面板。

   它们不一定带标准 tab-panel 类，但仍属于标签切换内容，统一复用同一组轻量动画。 */

[class*="-content"].section-anim-enter-fade,

[class*="-view"].section-anim-enter-fade { animation: tabFadeIn var(--switch-effect-duration, .3s) ease; }

[class*="-content"].section-anim-enter-slide-up,

[class*="-view"].section-anim-enter-slide-up { animation: tabSlideUpIn var(--switch-effect-duration, .3s) ease; }

[class*="-content"].section-anim-enter-slide-right,

[class*="-view"].section-anim-enter-slide-right { animation: tabSlideRightIn var(--switch-effect-duration, .3s) ease; }

[class*="-content"].section-anim-enter-zoom,

[class*="-view"].section-anim-enter-zoom { animation: tabZoomIn var(--switch-effect-duration, .3s) ease; }

[class*="-content"].section-anim-enter-blur,

[class*="-view"].section-anim-enter-blur { animation: tabBlurIn var(--switch-effect-duration, .3s) ease; }

[class*="-content"].section-anim-enter-rotate,

[class*="-view"].section-anim-enter-rotate { animation: tabRotateIn var(--switch-effect-duration, .3s) ease; }





/* ===== 弹窗打开动效（统一弹窗体系：.modal-overlay / #modal.app-modal）===== */

.modal-overlay:not(.hidden) {

  animation: modalOverlayFadeIn var(--switch-effect-duration, .3s) ease;

}

#modal.app-modal.active {

  animation: modalOverlayFadeIn var(--switch-effect-duration, .3s) ease;

}

@keyframes modalOverlayFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 弹窗内容进入动效由 动效引擎 统一控制（effect-engine.css 的 effect-modal-*），此处不再固定挂载旧动画 */





/* App icon upload */

.app-icon-upload-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 16px; padding-top: 4px; }

.app-icon-preview-small {

  width: 48px; height: 48px; border-radius: 50%;

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

  font-size: 18px; font-weight: 600; cursor: pointer;

  border: 2px solid #e2d9ff; overflow: hidden;

  transition: transform 0.15s;

}

.app-icon-preview-small:hover { transform: scale(1.08); }

.app-icon-hint { color: #999; font-size: 12px; cursor: pointer; }

.app-icon-hint:hover { color: #7c5cfc; }





.app-icon-thumb {

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

  border-radius: 50%; font-size: 13px; font-weight: 600;

  margin-right: 8px; vertical-align: middle; overflow: hidden;

  flex-shrink: 0;

}

.application-table-name-wrap { display: flex; align-items: center; }





/* 应用管理：四个统计卡片白底 */

#applications .stat-card {

  background: var(--admin-panel-surface) !important;


}



/* ===== 应用分类设置弹窗（不在#settings内，单独覆盖） ===== */

#appCategorySettingsModal .settings-application-category-layout {

  align-items: stretch !important;

}

#appCategorySettingsModal .settings-application-category-nav {

  background: var(--admin-panel-surface) !important;

  align-self: stretch !important;

}

#appCategorySettingsModal .settings-application-category-pane {

  background: var(--admin-panel-surface) !important;

}

#appCategorySettingsModal .settings-appcat-app {

  background: var(--admin-panel-surface) !important;

}


/* ==== 20261026 登录标签跟随主题：未选中浅色高亮底，选中主题强色 ==== */
.api-unified-main-tabs-shell > .login-tab,
.login-tab {
  background: var(--wb-theme-button-soft) !important;
  border-color: var(--wb-theme-button-soft-border) !important;
}
.api-unified-main-tabs-shell > .login-tab:hover,
.login-tab:hover {
  background: var(--wb-theme-button-soft-hover) !important;
  border-color: var(--wb-theme-button-soft-border) !important;
}
.api-unified-main-tabs-shell > .login-tab.active,
.login-tab.active {
  background: var(--wb-theme-button-strong) !important;
  color: var(--wb-theme-button-text) !important;
  border-color: var(--wb-theme-button-border) !important;
}

/* 用户管理 / 订单管理的筛选条：恢复与下方表格容器一致的边框（覆盖 .filters 的 border:none 重置） */
#orders .order-management-filters,
#member-users .member-management-users-toolbar {
  border: 1px solid var(--admin-panel-border-soft) !important;
}

/* ===== 表格滚动条（全站统一，与弹窗完全一致） =====
   表格容器自己的纵向滚动条隐藏；由 table-native-bar.js 在面板内放一个
   原生滚动条容器，位置严格限制在「表头下沿 → 表格下沿 / 分页栏上沿」，
   完全在表格内部滚动，不碰表头栏、不压分页栏。
   滚动条占用独立空间：只给「最后一列」的表头/行单元格右侧加宽一段 padding，
   表头背景与下边框自然铺满到表格右边缘，因此表头不会出现白缝或被切掉。 */
.table-native-bar-pane {
  position: relative;
}

.table-native-bar-host {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.table-native-bar-host::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.table-native-bar {
  position: absolute;
  z-index: 30;
  display: none;
  overflow-y: scroll;
  overflow-x: hidden;
  background: transparent;
  font-size: 0;
  line-height: 0;
}

.table-native-bar.is-active {
  display: block;
}

.table-native-bar-spacer {
  width: 1px;
  background: transparent;
}