/*!
 * 001 Cloud Disk unified theme
 * Reference-style admin shell inspired by Vue Admin Better / Element Plus.
 * This file is intentionally additive: existing page logic and API contracts stay intact.
 */
:root {
  --app-ui-font-family: "Microsoft YaHei", "微软雅黑", "Noto Sans CJK SC", "Source Han Sans CN", Arial, sans-serif;
  --vab-primary: #1890ff;
  --vab-primary-hover: #2f9bff;
  --vab-primary-light: #e8f4ff;
  --vab-menu-bg: #282c34;
  --vab-menu-bg-soft: #303640;
  --vab-header-bg: #282c34;
  --vab-page-bg: #f6f8f9;
  --vab-card-bg: #ffffff;
  --vab-text: #303133;
  --vab-text-soft: #606266;
  --vab-text-muted: #909399;
  --vab-border: #ebeef5;
  --vab-border-strong: #dcdfe6;
  --vab-success: #13ce66;
  --vab-warning: #ffba00;
  --vab-danger: #ff4d4f;
  --vab-radius: 3px;
  --vab-left-menu-width: 266px;
  --vab-header-height: 60px;
  --vab-tabs-height: 50px;
  --vab-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  --vab-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
}

body.vab-embedded-page {
  min-height: 100vh !important;
  background: transparent !important;
}

body.vab-embedded-page .top-nav,
body.vab-embedded-page .navbar,
body.vab-embedded-page .merchant-ref-topbar,
body.vab-embedded-page > .merchant-ref-sidebar,
body.vab-embedded-page .merchant-ref-sidebar,
body.vab-embedded-page .merchant-123-sidebar,
body.vab-embedded-page .mobile-tab-bar,
body.vab-embedded-page .fab-upload {
  display: none !important;
}

body.vab-embedded-page #app {
  min-height: 100vh !important;
  padding: 0 !important;
}

body.vab-embedded-page .container,
body.vab-embedded-page .merchant-ref-content,
body.vab-embedded-page .merchant-console-layout {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 20px !important;
}

body.vab-embedded-page .page-header,
body.vab-embedded-page .merchant-page-head {
  margin-top: 0 !important;
}

body.vab-embedded-page.merchant-surface,
body.vab-embedded-page.merchant-surface .container {
  background: transparent !important;
}

html,
body {
  font-family: var(--app-ui-font-family) !important;
  color: var(--vab-text);
  background: var(--vab-page-bg) !important;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font-family: var(--app-ui-font-family) !important;
}

body {
  scrollbar-width: thin;
  scrollbar-color: #d4d5d6 transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: #d4d5d6;
  border: 2px solid transparent;
  border-radius: 7px;
  background-clip: padding-box;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* Admin shell */
body.vab-admin-page {
  height: 100vh;
  overflow: hidden;
}

body.vab-admin-page.vab-admin-fragment {
  height: auto;
  min-height: 100vh;
  overflow: auto;
}

body.vab-admin-page #app {
  min-height: 100vh;
}

body.vab-admin-page.vab-admin-fragment #app {
  min-height: 0;
}

body.vab-admin-page .layout,
body.vab-admin-page #app > .layout {
  display: flex !important;
  min-height: 100vh !important;
  background: var(--vab-page-bg) !important;
}

body.vab-admin-page .primary-sidebar {
  display: none !important;
}

body.vab-admin-page .sidebar {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 2000 !important;
  width: var(--vab-left-menu-width) !important;
  height: 100vh !important;
  overflow: hidden !important;
  background: var(--vab-menu-bg) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  border-right: 0 !important;
  box-shadow: var(--vab-shadow) !important;
}

body.vab-admin-page .sidebar-header {
  height: var(--vab-header-height) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 20px !important;
  background: var(--vab-menu-bg) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.vab-admin-page .sidebar-header h1 {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 10px !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #fff !important;
  white-space: nowrap !important;
}

body.vab-admin-page .sidebar-header .logo,
body.vab-admin-page .logo-icon,
body.vab-admin-page .logo-box {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  border-radius: var(--vab-radius) !important;
  background: var(--vab-primary) !important;
  box-shadow: none !important;
}

body.vab-admin-page .nav-menu,
body.vab-admin-page .sidebar-nav {
  height: calc(100vh - var(--vab-header-height)) !important;
  padding: 10px 0 18px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.vab-admin-page .nav-section {
  padding: 16px 20px 8px !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.38) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

body.vab-admin-page .nav-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  gap: 10px !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0.86) !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  line-height: 50px !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

body.vab-admin-page .nav-item i {
  width: 18px !important;
  min-width: 18px !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: 15px !important;
  text-align: center !important;
}

body.vab-admin-page .nav-item:hover,
body.vab-admin-page .nav-item.active,
body.vab-admin-page .nav-item[data-active="true"] {
  color: #fff !important;
  background: var(--vab-primary) !important;
  transform: none !important;
}

body.vab-admin-page .main,
body.vab-admin-page .main-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  margin-left: var(--vab-left-menu-width) !important;
  padding-top: calc(var(--vab-header-height) + var(--vab-tabs-height)) !important;
  background: var(--vab-page-bg) !important;
}

/* The rebuilt /admin/index.html shell owns its header, breadcrumb and iframe layout. */
body.vab-admin-page.vab-admin-shell #app,
body.vab-admin-page.vab-admin-shell .layout {
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

body.vab-admin-page.vab-admin-shell .main {
  height: 100vh !important;
  min-height: 0 !important;
  margin-left: var(--vab-left-menu-width) !important;
  padding-top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.vab-admin-page.vab-admin-shell .header {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  order: 0 !important;
  flex: 0 0 var(--vab-header-height) !important;
  width: 100% !important;
}

body.vab-admin-page.vab-admin-shell .breadcrumb {
  order: 1 !important;
  flex: 0 0 var(--vab-tabs-height) !important;
  height: var(--vab-tabs-height) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 20px !important;
  color: var(--vab-text-muted) !important;
  background: #fff !important;
  border-bottom: 1px solid var(--vab-border) !important;
  box-shadow: var(--vab-shadow) !important;
}

body.vab-admin-page.vab-admin-shell .admin-content-frame,
body.vab-admin-page.vab-admin-shell .content {
  order: 2 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

body.vab-admin-page.vab-admin-shell .content {
  overflow: auto !important;
}

body.vab-admin-page .header,
body.vab-admin-page .top-header {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: var(--vab-left-menu-width) !important;
  z-index: 1998 !important;
  height: var(--vab-header-height) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 20px !important;
  color: #fff !important;
  background: var(--vab-header-bg) !important;
  border: 0 !important;
  box-shadow: var(--vab-shadow) !important;
}

body.vab-admin-page .header-title,
body.vab-admin-page .page-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

body.vab-admin-page .header-right,
body.vab-admin-page .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body.vab-admin-page .admin-info,
body.vab-admin-page .user-info {
  height: 40px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--vab-radius) !important;
}

body.vab-admin-page .admin-avatar,
body.vab-admin-page .user-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--vab-primary) !important;
  color: #fff !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

body.vab-admin-page .logout-btn,
body.vab-admin-page .btn-logout {
  height: 36px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--vab-radius) !important;
  box-shadow: none !important;
}

body.vab-admin-page .logout-btn:hover,
body.vab-admin-page .btn-logout:hover {
  background: var(--vab-danger) !important;
  border-color: var(--vab-danger) !important;
  transform: none !important;
}

.vab-tabs-bar {
  position: fixed;
  top: var(--vab-header-height);
  right: 0;
  left: var(--vab-left-menu-width);
  z-index: 1997;
  height: var(--vab-tabs-height);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--vab-border);
  box-shadow: var(--vab-shadow);
}

.vab-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--vab-text-muted);
  font-size: 13px;
}

.vab-breadcrumb strong {
  color: var(--vab-text);
  font-weight: 500;
}

.vab-tab-chip {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  margin-left: auto;
  color: var(--vab-primary);
  background: var(--vab-primary-light);
  border: 1px solid #d1e9ff;
  border-radius: var(--vab-radius);
  font-size: 13px;
  white-space: nowrap;
}

body.vab-admin-page .content,
body.vab-admin-page .content-section {
  width: 100% !important;
  padding: 20px !important;
  background: var(--vab-page-bg) !important;
}

body.vab-admin-page.vab-admin-fragment {
  padding: 20px !important;
  background: var(--vab-page-bg) !important;
}

body.vab-admin-page.vab-admin-fragment .content,
body.vab-admin-page.vab-admin-fragment .content-section {
  padding: 0 !important;
}

body.vab-admin-page .welcome-banner,
body.vab-admin-page .stat-card,
body.vab-admin-page .chart-card,
body.vab-admin-page .quick-actions,
body.vab-admin-page .toolbar,
body.vab-admin-page .table-card,
body.vab-admin-page .config-card,
body.vab-admin-page .storage-config-panel,
body.vab-admin-page .card,
body.vab-admin-page .panel {
  background: var(--vab-card-bg) !important;
  border: 1px solid var(--vab-border) !important;
  border-radius: var(--vab-radius) !important;
  box-shadow: var(--vab-shadow-card) !important;
}

body.vab-admin-page .welcome-banner {
  color: var(--vab-text) !important;
  padding: 20px !important;
  background: #fff !important;
}

body.vab-admin-page .welcome-banner::before {
  display: none !important;
}

body.vab-admin-page .stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 20px !important;
}

body.vab-admin-page .stat-card {
  min-height: 132px !important;
  padding: 20px !important;
}

body.vab-admin-page .stat-card .icon,
body.vab-admin-page .storage-panel-icon {
  width: 42px !important;
  height: 42px !important;
  margin-bottom: 12px !important;
  border-radius: var(--vab-radius) !important;
  background: var(--vab-primary) !important;
  color: #fff !important;
  font-size: 18px !important;
  box-shadow: none !important;
}

body.vab-admin-page .stat-card .label {
  color: var(--vab-text-muted) !important;
  font-size: 13px !important;
}

body.vab-admin-page .stat-card .value {
  color: var(--vab-text) !important;
  font-size: 28px !important;
}

body.vab-admin-page .stat-card .sub,
body.vab-admin-page .stat-card .change {
  color: var(--vab-success) !important;
}

body.vab-admin-page .toolbar {
  padding: 15px !important;
  gap: 10px !important;
}

/* Element-like controls */
.btn,
.action-btn,
.page-btn,
.config-tab,
.storage-btn,
button[class*="btn"] {
  min-height: 32px;
  border-radius: var(--vab-radius) !important;
  font-weight: 400 !important;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
}

.btn:hover,
.action-btn:hover,
.page-btn:hover,
.storage-btn:hover,
button[class*="btn"]:hover {
  transform: none !important;
}

.btn-primary,
.config-tab.active,
.storage-btn-primary,
.page-btn.active {
  color: #fff !important;
  background: var(--vab-primary) !important;
  border-color: var(--vab-primary) !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.storage-btn-primary:hover,
.page-btn.active:hover {
  background: var(--vab-primary-hover) !important;
  border-color: var(--vab-primary-hover) !important;
}

.btn-success {
  color: #fff !important;
  background: var(--vab-success) !important;
}

.btn-danger,
.action-btn.delete,
.action-btn.ban,
.action-btn.cancel,
.action-btn.refund {
  color: #fff !important;
  background: var(--vab-danger) !important;
}

.action-btn.edit,
.action-btn.view,
.action-btn.quota {
  color: var(--vab-primary) !important;
  background: var(--vab-primary-light) !important;
}

input,
select,
textarea,
.search-input,
.filter-select,
.form-input {
  border-radius: var(--vab-radius) !important;
  border-color: var(--vab-border-strong) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.search-input:focus,
.filter-select:focus,
.form-input:focus {
  border-color: var(--vab-primary) !important;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.14) !important;
}

.table,
table.table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.table th,
.table td {
  border-bottom: 1px solid var(--vab-border) !important;
}

.table th {
  background: #f5f7fa !important;
  color: var(--vab-text-soft) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.table td {
  color: var(--vab-text-soft) !important;
}

.table tr:hover {
  background: #f5f7fa !important;
}

.status-badge,
.type-badge,
.el-tag-lite,
.badge {
  border-radius: var(--vab-radius) !important;
  font-weight: 400 !important;
}

.modal-mask,
.modal,
.modal-content {
  border-radius: var(--vab-radius) !important;
}

.modal-mask {
  background: rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(3px);
}

.modal,
.modal-content {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
}

.modal-header,
.modal-footer {
  border-color: var(--vab-border) !important;
}

/* Frontend visual unification */
body.vab-public-page {
  background: var(--vab-page-bg) !important;
}

body.vab-public-page .top-nav,
body.vab-public-page .top-navbar,
body.vab-public-page .top-header,
body.vab-public-page .navbar,
body.vab-public-page header {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid var(--vab-border) !important;
  box-shadow: var(--vab-shadow) !important;
}

body.vab-public-page .logo-section,
body.vab-public-page .logo,
body.vab-public-page .logo-text {
  color: var(--vab-primary) !important;
}

body.vab-public-page .hero {
  color: var(--vab-text) !important;
  background:
    linear-gradient(135deg, rgba(24, 144, 255, 0.11), rgba(255, 255, 255, 0.92)),
    var(--vab-page-bg) !important;
}

body.vab-public-page .hero-text .highlight,
body.vab-public-page .nav-links a:hover {
  color: var(--vab-primary) !important;
}

body.vab-public-page .btn-primary,
body.vab-public-page .btn-upload,
body.vab-public-page .login-btn,
body.vab-public-page .primary-btn {
  color: #fff !important;
  background: var(--vab-primary) !important;
  border-color: var(--vab-primary) !important;
  box-shadow: none !important;
}

body.vab-public-page .btn-outline,
body.vab-public-page .secondary-btn {
  color: var(--vab-primary) !important;
  background: #fff !important;
  border: 1px solid var(--vab-primary) !important;
}

body.vab-public-page .feature-card,
body.vab-public-page .card,
body.vab-public-page .panel,
body.vab-public-page .file-card,
body.vab-public-page .content-card,
body.vab-public-page .login-container,
body.vab-public-page .vip-card,
body.vab-public-page .share-card,
body.vab-public-page .wallet-card {
  background: #fff !important;
  border: 1px solid var(--vab-border) !important;
  border-radius: var(--vab-radius) !important;
  box-shadow: var(--vab-shadow-card) !important;
}

body.vab-public-page .feature-card:hover,
body.vab-public-page .card:hover,
body.vab-public-page .file-card:hover {
  transform: none !important;
  box-shadow: 0 4px 12px rgba(0, 21, 41, 0.08) !important;
}

body.vab-public-page .feature-icon,
body.vab-public-page .logo-icon,
body.vab-public-page .logo-box {
  background: var(--vab-primary) !important;
  border-radius: var(--vab-radius) !important;
  box-shadow: none !important;
}

.vab-brand-logo-image {
  padding: 0 !important;
  overflow: hidden !important;
  color: transparent !important;
  background: transparent !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
}

.vab-brand-logo-image .vab-brand-logo-img,
img.vab-brand-logo-image {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: inherit !important;
}

.merchant-ref-logo.vab-brand-logo-image,
.logo-box.vab-brand-logo-image,
.logo-icon.vab-brand-logo-image,
.sidebar-header .logo.vab-brand-logo-image,
.pan123-logo-mark.vab-brand-logo-image {
  background: transparent !important;
  color: transparent !important;
  text-indent: 0 !important;
}

.merchant-ref-logo.vab-brand-logo-image::before,
.logo-box.vab-brand-logo-image::before,
.logo-icon.vab-brand-logo-image::before,
.pan123-logo-mark.vab-brand-logo-image::before {
  content: none !important;
}

body.merchant-user-center .merchant-ref-logo.vab-brand-logo-image,
body.merchant-ref-lite .merchant-ref-logo.vab-brand-logo-image,
body.pan123-workspace .logo-box.vab-brand-logo-image,
body.pan123-workspace .pan123-logo-mark.vab-brand-logo-image {
  background: transparent !important;
  color: transparent !important;
}

body.merchant-user-center .merchant-ref-logo.vab-brand-logo-image::before,
body.merchant-ref-lite .merchant-ref-logo.vab-brand-logo-image::before,
body.pan123-workspace .logo-box.vab-brand-logo-image::before,
body.pan123-workspace .pan123-logo-mark.vab-brand-logo-image::before {
  content: none !important;
}

.merchant-ref-side-brand.vab-brand-logo-image {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  margin-right: 2px !important;
  flex: 0 0 24px !important;
}

.vab-inline-brand-icon {
  width: 22px;
  height: 22px;
  margin-right: 6px;
  display: inline-block;
  object-fit: contain;
  vertical-align: -5px;
  border-radius: 5px;
}

.vab-site-filing {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
}

.vab-site-filing a {
  color: inherit !important;
  text-decoration: none !important;
}

.vab-site-filing a:hover {
  color: var(--vab-primary) !important;
}

.vab-site-filing-separator {
  opacity: 0.55;
}

/* Toasts and themed helper components */
.vab-toast-stack {
  position: fixed;
  top: 76px;
  right: 18px;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.vab-toast {
  min-width: 240px;
  max-width: min(380px, calc(100vw - 36px));
  padding: 13px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #34495e;
  background: #fff;
  border: 1px solid var(--vab-border);
  border-radius: var(--vab-radius);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
  animation: vabToastIn 0.2s ease;
}

.vab-toast i {
  color: var(--vab-primary);
  margin-top: 2px;
}

.vab-toast-success i { color: var(--vab-success); }
.vab-toast-error i { color: var(--vab-danger); }
.vab-toast-warning i { color: var(--vab-warning); }

body.vab-admin-page .toast:not(.show):empty {
  display: none !important;
}

body.vab-admin-page .toast:not(.show) {
  transform: translateX(calc(100% + 48px)) !important;
}

@keyframes vabToastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.vab-dialog-mask {
  position: fixed;
  inset: 0;
  z-index: 4999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(3px);
}

.vab-dialog {
  width: min(440px, 100%);
  background: #fff;
  border-radius: var(--vab-radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.vab-dialog-header,
.vab-dialog-footer {
  padding: 16px 18px;
  border-bottom: 1px solid var(--vab-border);
}

.vab-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--vab-border);
  border-bottom: 0;
}

.vab-dialog-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--vab-text);
}

.vab-dialog-body {
  padding: 18px;
  color: var(--vab-text-soft);
  line-height: 1.7;
  white-space: pre-wrap;
}

.vab-dialog-btn {
  min-width: 72px;
  height: 34px;
  padding: 0 15px;
  border: 1px solid var(--vab-border-strong);
  border-radius: var(--vab-radius);
  background: #fff;
  color: var(--vab-text-soft);
  cursor: pointer;
}

.vab-dialog-btn.primary {
  color: #fff;
  background: var(--vab-primary);
  border-color: var(--vab-primary);
}

@media (max-width: 768px) {
  :root {
    --vab-left-menu-width: 0px;
  }

  body.vab-admin-page {
    overflow: auto;
  }

  body.vab-admin-page .sidebar {
    width: 0 !important;
    transform: translateX(-100%) !important;
  }

  body.vab-admin-page .main,
  body.vab-admin-page .main-content {
    margin-left: 0 !important;
  }

  body.vab-admin-page .header,
  body.vab-admin-page .top-header,
  .vab-tabs-bar {
    left: 0 !important;
  }

  body.vab-admin-page .content,
  body.vab-admin-page .content-section {
    padding: 12px !important;
  }

  body.vab-admin-page .header-title {
    font-size: 15px !important;
  }

  body.vab-admin-page .admin-info span {
    display: none;
  }

  .vab-tab-chip {
    display: none;
  }
}

/* Final 2026-06 reference-shell pass.
   This block intentionally sits last so old inline page styles keep their logic
   but the surface reads like the reference Vue Admin Better admin. */
body.vab-admin-page {
  --vab-primary: #1890ff;
  --vab-primary-hover: #2f9bff;
  --vab-menu-bg: #282c34;
  --vab-menu-bg-soft: #323844;
  --vab-header-bg: #282c34;
  --vab-left-menu-width: 266px;
  --vab-radius: 2.5px;
  background: #f6f8f9 !important;
}

body.vab-admin-page.vab-sidebar-collapsed {
  --vab-left-menu-width: 64px;
}

body.vab-admin-page.vab-sidebar-collapsed .sidebar {
  width: 64px !important;
}

body.vab-admin-page.vab-sidebar-collapsed .sidebar-header {
  padding: 0 16px !important;
  justify-content: center !important;
}

body.vab-admin-page.vab-sidebar-collapsed .sidebar-header h1 {
  width: 32px !important;
  overflow: hidden !important;
}

body.vab-admin-page.vab-sidebar-collapsed .sidebar-header h1 > :not(.logo),
body.vab-admin-page.vab-sidebar-collapsed .sidebar-header h1::after,
body.vab-admin-page.vab-sidebar-collapsed .nav-section,
body.vab-admin-page.vab-sidebar-collapsed .sidebar-footer,
body.vab-admin-page.vab-sidebar-collapsed .nav-item span {
  display: none !important;
}

body.vab-admin-page.vab-sidebar-collapsed .nav-item {
  justify-content: center !important;
  padding: 0 !important;
  font-size: 0 !important;
}

body.vab-admin-page.vab-sidebar-collapsed .nav-item i {
  margin: 0 !important;
  font-size: 15px !important;
}

body.vab-admin-page .sidebar {
  background: var(--vab-menu-bg) !important;
}

body.vab-admin-page .nav-menu,
body.vab-admin-page .sidebar-nav {
  background: var(--vab-menu-bg) !important;
}

body.vab-admin-page .nav-item {
  border-left: 3px solid transparent !important;
}

body.vab-admin-page .nav-item:hover {
  background: var(--vab-menu-bg-soft) !important;
}

body.vab-admin-page .nav-item.active,
body.vab-admin-page .nav-item[data-active="true"] {
  border-left-color: #fff !important;
  background: var(--vab-primary) !important;
}

body.vab-admin-page .header,
body.vab-admin-page .top-header {
  min-height: var(--vab-header-height) !important;
  background: var(--vab-header-bg) !important;
}

body.vab-admin-page .vab-shell-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
}

body.vab-admin-page .vab-shell-tool,
body.vab-admin-page .vab-header-tool {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.92) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--vab-radius) !important;
  box-shadow: none !important;
  position: relative !important;
}

body.vab-admin-page .vab-shell-tool:hover,
body.vab-admin-page .vab-header-tool:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

body.vab-admin-page .vab-tool-badge {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #ff4d4f;
  border-radius: 10px;
  font-size: 11px;
  line-height: 16px;
  transform: scale(0.86);
  transform-origin: top right;
}

body.vab-admin-page .breadcrumb,
body.vab-admin-page .vab-tabs-bar {
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08) !important;
}

body.vab-admin-page .breadcrumb::after {
  content: "当前页";
  height: 30px;
  margin-left: auto;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  color: var(--vab-primary);
  background: var(--vab-primary-light);
  border: 1px solid #d1e9ff;
  border-radius: var(--vab-radius);
  font-size: 13px;
}

body.vab-admin-page .admin-content-frame {
  background: #f6f8f9 !important;
}

body.vab-admin-page.vab-admin-fragment {
  padding: 20px !important;
}

body.vab-admin-page .page-header,
body.vab-admin-page .card-header,
body.vab-admin-page .modal-header {
  border-color: var(--vab-border) !important;
}

body.vab-admin-page .page-title {
  color: var(--vab-text) !important;
}

body.vab-admin-page .card,
body.vab-admin-page .table-card,
body.vab-admin-page .toolbar,
body.vab-admin-page .table-header,
body.vab-admin-page .stat-card,
body.vab-admin-page .chart-card,
body.vab-admin-page .quick-actions,
body.vab-admin-page .config-card,
body.vab-admin-page .modal,
body.vab-admin-page .modal-content {
  border-radius: var(--vab-radius) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

body.vab-admin-page .card:hover,
body.vab-admin-page .stat-card:hover,
body.vab-admin-page .chart-card:hover,
body.vab-admin-page .quick-actions:hover {
  transform: none !important;
  box-shadow: 0 4px 12px rgba(0, 21, 41, 0.08) !important;
}

body.vab-admin-page .btn,
body.vab-admin-page button,
body.vab-public-page .btn,
body.vab-public-page button {
  letter-spacing: 0 !important;
}

body.vab-admin-page .btn i,
body.vab-admin-page button i,
body.vab-public-page .btn i,
body.vab-public-page button i {
  margin-right: 3px;
}

body.vab-admin-page .toolbar,
body.vab-admin-page .table-header,
body.vab-admin-page .filter-toolbar,
body.vab-admin-page .query-bar {
  min-height: 58px !important;
  margin-bottom: 14px !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  background: #fff !important;
  border: 1px solid var(--vab-border) !important;
}

body.vab-admin-page .table-header h3,
body.vab-admin-page .toolbar h3,
body.vab-admin-page .card-header h3 {
  margin: 0 !important;
  color: var(--vab-text) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

body.vab-admin-page .table-actions {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

body.vab-admin-page .data-table,
body.vab-admin-page .table-card {
  overflow: auto !important;
  background: #fff !important;
  border: 1px solid var(--vab-border) !important;
}

body.vab-admin-page .data-table table,
body.vab-admin-page table.table {
  min-width: 760px;
  border: 1px solid var(--vab-border) !important;
}

body.vab-admin-page .data-table th,
body.vab-admin-page .data-table td,
body.vab-admin-page table.table th,
body.vab-admin-page table.table td {
  height: 44px !important;
  padding: 8px 12px !important;
  border-color: #edf1f7 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

body.vab-admin-page .data-table th,
body.vab-admin-page table.table th {
  color: #606266 !important;
  background: #f5f7fa !important;
  font-weight: 500 !important;
}

body.vab-admin-page .chart-container {
  position: relative !important;
  min-height: 260px !important;
}

body.vab-admin-page .chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

body.vab-admin-page .chart-empty {
  height: 100% !important;
  min-height: 220px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--vab-text-muted) !important;
  background: #f8fafc !important;
  border: 1px dashed var(--vab-border) !important;
  border-radius: var(--vab-radius) !important;
}

body.vab-admin-page .modal-overlay,
body.vab-admin-page .modal-mask,
.vab-dialog-mask {
  background: rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(3px);
}

body.vab-admin-page .modal,
body.vab-admin-page .modal-content,
.vab-dialog {
  border: 1px solid var(--vab-border) !important;
  border-radius: 3px !important;
}

.vab-dialog.danger .vab-dialog-btn.primary {
  background: var(--vab-danger);
  border-color: var(--vab-danger);
}

.vab-dialog-meta {
  margin-top: 12px;
  padding: 10px 12px;
  color: var(--vab-text-muted);
  background: #f5f7fa;
  border: 1px solid var(--vab-border);
  border-radius: var(--vab-radius);
  font-size: 12px;
  line-height: 1.6;
}

/* Public side: keep the product pages calmer and aligned with the admin system. */
body.vab-public-page {
  --vab-radius: 2.5px;
  background: #f6f8f9 !important;
}

body.vab-public-page .top-nav,
body.vab-public-page .top-navbar,
body.vab-public-page .top-header,
body.vab-public-page header {
  min-height: 60px;
}

body.vab-public-page .hero {
  background: linear-gradient(180deg, #ffffff 0%, #f6f8f9 100%) !important;
}

body.vab-public-page .hero-text h1,
body.vab-public-page .section-title h2 {
  color: #303133 !important;
  letter-spacing: 0 !important;
}

body.vab-public-page .feature-icon,
body.vab-public-page .logo-icon,
body.vab-public-page .logo-box,
body.vab-public-page .logo-icon svg {
  color: #fff !important;
}

@media (max-width: 768px) {
  body.vab-admin-page.vab-sidebar-open {
    overflow: hidden;
  }

  body.vab-admin-page.vab-sidebar-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1999;
    background: rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(2px);
  }

  body.vab-admin-page.vab-sidebar-open .sidebar {
    width: 240px !important;
    transform: translateX(0) !important;
    z-index: 2000 !important;
  }

  body.vab-admin-page .breadcrumb::after {
    display: none;
  }
}

/* 2026-06-09 hardening pass: converge the already rebuilt pages to one
   reference-style frame without touching page-local API logic. */
body.vab-admin-page .primary-sidebar {
  display: none !important;
}

body.vab-admin-page .sidebar {
  left: 0 !important;
  border-right: 0 !important;
}

body.vab-admin-page .sidebar-header h1 {
  gap: 8px !important;
}

body.vab-admin-page .sidebar-header h1 .logo + * {
  margin-left: 0 !important;
}

body.vab-admin-page .nav-menu,
body.vab-admin-page .sidebar-nav {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
}

body.vab-admin-page .sidebar-footer {
  flex: 0 0 auto !important;
  padding: 14px 18px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  background: var(--vab-menu-bg) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.vab-admin-page .sidebar-footer .storage-label,
body.vab-admin-page .sidebar-footer .storage-text,
body.vab-admin-page .sidebar-footer .system-info {
  color: rgba(255, 255, 255, 0.66) !important;
}

body.vab-admin-page .sidebar-footer .storage-bar {
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--vab-radius) !important;
}

body.vab-admin-page .sidebar-footer .storage-bar-fill {
  background: var(--vab-primary) !important;
  border-radius: var(--vab-radius) !important;
}

body.vab-admin-page .main,
body.vab-admin-page .main-content {
  margin-left: var(--vab-left-menu-width) !important;
}

body.vab-admin-page.vab-admin-shell .main {
  margin-left: var(--vab-left-menu-width) !important;
}

body.vab-admin-page .header-search,
body.vab-admin-page .admin-dropdown,
body.vab-public-page .header-search,
body.vab-public-page .admin-dropdown {
  border-radius: var(--vab-radius) !important;
  box-shadow: var(--vab-shadow) !important;
}

body.vab-admin-page .admin-dropdown {
  color: var(--vab-text) !important;
  background: #fff !important;
  border: 1px solid var(--vab-border) !important;
}

body.vab-admin-page .admin-dropdown-item:hover {
  background: var(--vab-primary-light) !important;
  color: var(--vab-primary) !important;
}

body.vab-admin-page .modal,
body.vab-admin-page .modal-box,
body.vab-admin-page .modal-content,
body.vab-public-page .modal,
body.vab-public-page .modal-box,
body.vab-public-page .modal-content {
  border-radius: var(--vab-radius) !important;
  border: 1px solid var(--vab-border) !important;
  background: #fff !important;
}

body.vab-admin-page .modal-header,
body.vab-admin-page .modal-footer,
body.vab-public-page .modal-header,
body.vab-public-page .modal-footer {
  background: #fff !important;
  border-color: var(--vab-border) !important;
}

body.vab-admin-page .modal-footer,
body.vab-public-page .modal-footer {
  background: #f5f7fa !important;
}

body.vab-admin-page .modal-close,
body.vab-public-page .modal-close {
  border-radius: var(--vab-radius) !important;
}

body.vab-admin-page .table-card,
body.vab-public-page .table-card {
  overflow: auto !important;
}

body.vab-admin-page .pagination .btn,
body.vab-admin-page .pagination .page-btn,
body.vab-public-page .pagination .btn,
body.vab-public-page .pagination .page-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 11px !important;
}

body.vab-admin-page .quick-link,
body.vab-admin-page .audit-card,
body.vab-admin-page .panel,
body.vab-public-page .quick-link,
body.vab-public-page .audit-card,
body.vab-public-page .panel {
  border-radius: var(--vab-radius) !important;
  box-shadow: var(--vab-shadow-card) !important;
}

body.vab-admin-page .toast,
body.vab-public-page .toast {
  border-radius: var(--vab-radius) !important;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15) !important;
}

body.vab-public-page .btn-primary:hover,
body.vab-public-page .btn-upload:hover,
body.vab-public-page .login-btn:hover,
body.vab-admin-page .btn-primary:hover,
body.vab-admin-page .btn-upload:hover,
body.vab-admin-page .login-btn:hover {
  transform: none !important;
  box-shadow: none !important;
}

body.vab-public-page .hero,
body.vab-public-page .features,
body.vab-public-page .pricing,
body.vab-public-page .download-section {
  border-bottom: 1px solid var(--vab-border);
}

@media (max-width: 768px) {
  body.vab-admin-page {
    --vab-left-menu-width: 0px;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body.vab-admin-page.vab-sidebar-collapsed {
    --vab-left-menu-width: 0px;
  }

  body.vab-admin-page #app,
  body.vab-admin-page .layout {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.vab-admin-page .primary-sidebar {
    display: none !important;
  }

  body.vab-admin-page .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 2000 !important;
    flex: none !important;
    width: min(266px, 84vw) !important;
    min-width: 0 !important;
    max-width: 84vw !important;
    margin: 0 !important;
    transform: translateX(-100%) !important;
  }

  body.vab-admin-page.vab-sidebar-open .sidebar {
    transform: translateX(0) !important;
  }

  body.vab-admin-page .main,
  body.vab-admin-page .main-content,
  body.vab-admin-page.vab-admin-shell .main {
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    transform: none !important;
  }

  body.vab-admin-page.vab-admin-shell .header,
  body.vab-admin-page.vab-admin-shell .breadcrumb,
  body.vab-admin-page.vab-admin-shell .content,
  body.vab-admin-page.vab-admin-shell .admin-content-frame {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  body.vab-admin-page.vab-admin-shell .header {
    padding: 0 8px !important;
    gap: 6px !important;
  }

  body.vab-admin-page.vab-admin-shell .header-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.vab-admin-page.vab-admin-shell .header-right {
    flex: 0 0 auto !important;
    gap: 4px !important;
  }

  body.vab-admin-page.vab-admin-shell .admin-info {
    padding: 4px !important;
    min-width: 40px !important;
  }

  body.vab-admin-page.vab-admin-shell .breadcrumb {
    padding: 0 12px !important;
    overflow: hidden !important;
  }

  body.vab-admin-page.vab-admin-shell .content {
    padding: 12px !important;
  }

  body.vab-admin-page .welcome-banner h2 {
    font-size: 24px !important;
    line-height: 1.35 !important;
  }

  body.vab-admin-page .welcome-banner p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  body.vab-admin-page .vab-shell-actions {
    gap: 2px;
  }

  body.vab-admin-page .vab-shell-tool {
    width: 34px !important;
    min-width: 34px !important;
  }

  body.vab-admin-page .stats-grid,
  body.vab-public-page .stats-grid,
  body.vab-public-page .features-grid {
    grid-template-columns: 1fr !important;
  }

  body.vab-public-page .hero-content {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  body.vab-public-page .nav-content {
    padding: 10px 16px !important;
    gap: 8px !important;
  }

  body.vab-public-page .logo-section {
    gap: 6px !important;
    font-size: 20px !important;
    white-space: nowrap !important;
  }

  body.vab-public-page .logo-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  body.vab-public-page .nav-btns {
    gap: 8px !important;
    flex: 0 0 auto !important;
  }

  body.vab-public-page .nav-btns .btn {
    padding: 8px 14px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }

  body.vab-public-page .hero {
    padding: 46px 20px !important;
  }

  body.vab-public-page .hero-text h1 {
    max-width: 340px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    font-size: 32px !important;
    line-height: 1.28 !important;
    text-align: center !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  body.vab-public-page .hero-text p {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 14px 22px !important;
  }

  body.vab-public-page .hero-point {
    white-space: nowrap !important;
    word-break: keep-all !important;
  }
}

/* 2026-06-09 reference column layout pass.
   The real fkdemo admin uses Vue Admin Better column mode: blue app rail,
   white secondary menu, white top header, tabs, compact Element Plus cards. */
body.vab-admin-page.vab-admin-shell {
  --vab-primary: #1890ff;
  --vab-primary-hover: #2f9bff;
  --vab-primary-light: #e8f4ff;
  --vab-rail-width: 64px;
  --vab-secondary-menu-width: 202px;
  --vab-left-menu-width: 266px;
  --vab-menu-bg: #282c34;
  --vab-header-bg: #fff;
  --vab-card-bg: #fff;
  --vab-page-bg: #f6f8f9;
  --vab-text: #303133;
  --vab-text-soft: #606266;
  --vab-text-muted: #909399;
  --vab-radius: 2.5px;
  color: var(--vab-text) !important;
  background: var(--vab-page-bg) !important;
}

body.vab-admin-page.vab-admin-shell .primary-sidebar {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 2002 !important;
  width: var(--vab-rail-width) !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 2px !important;
  padding: 8px 5px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--vab-primary) !important;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08) !important;
}

body.vab-admin-page.vab-admin-shell .primary-sidebar::before {
  content: "";
  flex: 0 0 48px;
  width: 42px;
  height: 42px;
  margin: 2px auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  border-radius: 10px;
  background: url("/assets/brand/logo-01-netdisk-64.png?v=20260610-brand") center / cover no-repeat;
}

body.vab-admin-page.vab-admin-shell .primary-sidebar-item {
  width: 54px !important;
  min-height: 58px !important;
  margin: 0 auto 4px !important;
  padding: 8px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  line-height: 1.15 !important;
  text-align: center !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.vab-admin-page.vab-admin-shell .primary-sidebar-item i {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-size: 18px !important;
  color: inherit !important;
}

body.vab-admin-page.vab-admin-shell .primary-sidebar-item span {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

body.vab-admin-page.vab-admin-shell .primary-sidebar-item:hover,
body.vab-admin-page.vab-admin-shell .primary-sidebar-item.active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.16) !important;
}

body.vab-admin-page.vab-admin-shell .sidebar {
  left: var(--vab-rail-width) !important;
  width: var(--vab-secondary-menu-width) !important;
  min-width: var(--vab-secondary-menu-width) !important;
  background: #fff !important;
  color: var(--vab-text-soft) !important;
  border-right: 1px solid var(--vab-border) !important;
  box-shadow: 1px 0 4px rgba(0, 21, 41, 0.08) !important;
}

body.vab-admin-page.vab-admin-shell .sidebar-header {
  height: 74px !important;
  padding: 0 12px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--vab-border) !important;
}

body.vab-admin-page.vab-admin-shell .sidebar-header h1 {
  width: 100% !important;
  justify-content: center !important;
  gap: 0 !important;
  line-height: 1.2 !important;
  color: #334155 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

body.vab-admin-page.vab-admin-shell .sidebar-brand {
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

body.vab-admin-page.vab-admin-shell .sidebar-subtitle {
  width: 100% !important;
  padding-top: 5px !important;
  color: #515a6e !important;
  border-top: 1px solid var(--vab-border) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-align: center !important;
}

body.vab-admin-page.vab-admin-shell .sidebar-header .logo {
  display: none !important;
}

body.vab-admin-page.vab-admin-shell .nav-menu,
body.vab-admin-page.vab-admin-shell .sidebar-nav {
  height: calc(100vh - 74px) !important;
  padding: 8px 10px 16px !important;
  background: #fff !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.vab-admin-page.vab-admin-shell .nav-menu::-webkit-scrollbar,
body.vab-admin-page.vab-admin-shell .sidebar-nav::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

body.vab-admin-page.vab-admin-shell .nav-menu > .nav-section:first-child {
  display: none !important;
}

body.vab-admin-page.vab-admin-shell .sidebar-footer {
  display: none !important;
}

body.vab-admin-page.vab-admin-shell .nav-section {
  padding: 14px 14px 8px !important;
  color: var(--vab-text-soft) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.vab-admin-page.vab-admin-shell .nav-item {
  width: 100% !important;
  height: 50px !important;
  margin: 0 0 5px !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  color: var(--vab-text) !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
}

body.vab-admin-page.vab-admin-shell .nav-item i {
  color: inherit !important;
}

body.vab-admin-page.vab-admin-shell .nav-item:hover,
body.vab-admin-page.vab-admin-shell .nav-item.active,
body.vab-admin-page.vab-admin-shell .nav-item[data-active="true"] {
  color: var(--vab-primary) !important;
  background: var(--vab-primary-light) !important;
}

body.vab-admin-page.vab-admin-shell .main {
  margin-left: var(--vab-left-menu-width) !important;
  background: var(--vab-page-bg) !important;
}

body.vab-admin-page.vab-admin-shell .header {
  color: #515a6e !important;
  background: #fff !important;
  border-bottom: 1px solid var(--vab-border) !important;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08) !important;
}

body.vab-admin-page.vab-admin-shell .header-title {
  color: #515a6e !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

body.vab-admin-page.vab-admin-shell .vab-shell-tool,
body.vab-admin-page.vab-admin-shell .vab-header-tool {
  color: #515a6e !important;
  border-radius: 3px !important;
}

body.vab-admin-page.vab-admin-shell .vab-shell-tool:hover,
body.vab-admin-page.vab-admin-shell .vab-header-tool:hover {
  color: var(--vab-primary) !important;
  background: var(--vab-primary-light) !important;
}

body.vab-admin-page.vab-admin-shell .vab-tool-badge {
  top: 1px;
  right: 0;
  background: #ff6877;
}

body.vab-admin-page.vab-admin-shell .admin-info {
  color: #515a6e !important;
  background: #fff !important;
  border: 1px solid transparent !important;
}

body.vab-admin-page.vab-admin-shell .admin-info:hover {
  border-color: var(--vab-border) !important;
  background: #f9fafb !important;
}

body.vab-admin-page.vab-admin-shell .breadcrumb {
  color: #515a6e !important;
  background: #fff !important;
}

body.vab-admin-page.vab-admin-shell .breadcrumb::after {
  content: none !important;
}

body.vab-admin-page.vab-admin-shell .breadcrumb-item:last-child {
  height: 38px !important;
  min-width: 112px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  color: var(--vab-primary) !important;
  background: var(--vab-primary-light) !important;
  border-radius: 5px 5px 0 0 !important;
}

body.vab-admin-page.vab-admin-shell .welcome-banner {
  border-radius: var(--vab-radius) !important;
}

body.vab-admin-page.vab-admin-shell .welcome-banner + .stats-grid .stat-card:first-child {
  color: #fff !important;
  background: linear-gradient(135deg, #7ca8f7 0%, #4d8df5 100%) !important;
  border-color: transparent !important;
}

body.vab-admin-page.vab-admin-shell .welcome-banner + .stats-grid .stat-card:first-child .label,
body.vab-admin-page.vab-admin-shell .welcome-banner + .stats-grid .stat-card:first-child .value,
body.vab-admin-page.vab-admin-shell .welcome-banner + .stats-grid .stat-card:first-child .change {
  color: #fff !important;
}

body.vab-admin-page.vab-admin-shell .welcome-banner + .stats-grid .stat-card:first-child .icon {
  color: var(--vab-primary) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border-radius: 50% !important;
}

body.vab-admin-page.vab-admin-shell.vab-sidebar-collapsed {
  --vab-left-menu-width: var(--vab-rail-width);
}

body.vab-admin-page.vab-admin-shell.vab-sidebar-collapsed .sidebar {
  width: 0 !important;
  min-width: 0 !important;
  border-right: 0 !important;
  transform: translateX(-100%) !important;
}

body.vab-admin-page.vab-admin-shell.vab-sidebar-collapsed .main {
  margin-left: var(--vab-rail-width) !important;
}

@media (max-width: 768px) {
  body.vab-admin-page.vab-admin-shell {
    --vab-left-menu-width: 0px;
    --vab-rail-width: 0px;
  }

  body.vab-admin-page.vab-admin-shell .primary-sidebar {
    display: none !important;
  }

  body.vab-admin-page.vab-admin-shell .sidebar {
    left: 0 !important;
    width: min(266px, 84vw) !important;
    min-width: 0 !important;
    max-width: 84vw !important;
    transform: translateX(-100%) !important;
  }

  body.vab-admin-page.vab-admin-shell.vab-sidebar-open .sidebar {
    transform: translateX(0) !important;
  }

  body.vab-admin-page.vab-admin-shell .main {
    margin-left: 0 !important;
  }
}

@media (max-width: 1024px) {
  body.vab-admin-page.vab-admin-shell,
  body.vab-admin-page.vab-admin-shell.vab-sidebar-collapsed {
    --vab-left-menu-width: 0px;
    --vab-rail-width: 0px;
  }

  body.vab-admin-page.vab-admin-shell .primary-sidebar {
    display: none !important;
  }

  body.vab-admin-page.vab-admin-shell .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    left: 0 !important;
    z-index: 2000 !important;
    width: min(266px, 84vw) !important;
    min-width: 0 !important;
    max-width: 84vw !important;
    transform: translateX(-100%) !important;
  }

  body.vab-admin-page.vab-admin-shell.vab-sidebar-open .sidebar {
    transform: translateX(0) !important;
  }

  body.vab-admin-page.vab-admin-shell .main,
  body.vab-admin-page.vab-admin-shell.vab-sidebar-collapsed .main {
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    transform: none !important;
  }

  body.vab-admin-page.vab-admin-shell .header,
  body.vab-admin-page.vab-admin-shell .breadcrumb,
  body.vab-admin-page.vab-admin-shell .content,
  body.vab-admin-page.vab-admin-shell .admin-content-frame {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  body.vab-admin-page.vab-admin-shell .content {
    padding: 12px !important;
  }

  body.vab-admin-page.vab-admin-shell .stats-grid,
  body.vab-admin-page.vab-admin-shell .charts-row {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-06-10 reference interaction pass: top breadcrumb, route tabs,
   compact tables, filters and dialogs aligned with the fkdemo admin. */
body.vab-admin-page.vab-admin-shell .header {
  order: 0 !important;
}

body.vab-admin-page.vab-admin-shell .header-title {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
}

body.vab-admin-page.vab-admin-shell .vab-header-menu {
  flex: 0 0 34px !important;
  color: #515a6e !important;
}

body.vab-admin-page.vab-admin-shell .vab-title-crumb {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #515a6e !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
}

body.vab-admin-page.vab-admin-shell .vab-title-crumb:last-child {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.vab-admin-page.vab-admin-shell .vab-title-separator {
  color: #bfc3cb !important;
  padding: 0 2px !important;
}

body.vab-admin-page.vab-admin-shell .breadcrumb.vab-route-tabs {
  order: 1 !important;
  height: var(--vab-tabs-height) !important;
  flex: 0 0 var(--vab-tabs-height) !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 0 !important;
  padding: 0 20px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  color: #515a6e !important;
  background: #fff !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--vab-border) !important;
  scrollbar-width: thin !important;
}

body.vab-admin-page.vab-admin-shell .breadcrumb.vab-route-tabs::after {
  content: none !important;
}

body.vab-admin-page.vab-admin-shell .vab-route-tab {
  height: 38px !important;
  min-width: 112px !important;
  max-width: 220px !important;
  flex: 0 0 auto !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  color: #515a6e !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 5px 5px 0 0 !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 38px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

body.vab-admin-page.vab-admin-shell .vab-route-tab span:not(.vab-route-close) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.vab-admin-page.vab-admin-shell .vab-route-tab:hover,
body.vab-admin-page.vab-admin-shell .vab-route-tab.active {
  color: var(--vab-primary) !important;
  background: var(--vab-primary-light) !important;
}

body.vab-admin-page.vab-admin-shell .vab-route-close {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  margin-left: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #909399 !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  line-height: 16px !important;
}

body.vab-admin-page.vab-admin-shell .vab-route-close:hover {
  color: #fff !important;
  background: #c0c4cc !important;
}

body.vab-admin-page .filters,
body.vab-admin-page .filter-row,
body.vab-admin-page .search-row,
body.vab-admin-page .toolbar,
body.vab-admin-page .filter-toolbar,
body.vab-admin-page .query-bar {
  gap: 10px !important;
}

body.vab-admin-page .filter-input,
body.vab-admin-page .filter-select,
body.vab-admin-page .search-input,
body.vab-admin-page .form-input,
body.vab-admin-page input[type="text"],
body.vab-admin-page input[type="search"],
body.vab-admin-page input[type="email"],
body.vab-admin-page input[type="password"],
body.vab-admin-page input[type="number"],
body.vab-admin-page input[type="datetime-local"],
body.vab-admin-page select {
  min-height: 32px !important;
  padding: 0 12px !important;
  color: #606266 !important;
  background: #fff !important;
  border: 1px solid #dcdfe6 !important;
  border-radius: 3px !important;
  font-size: 13px !important;
  line-height: 32px !important;
}

body.vab-admin-page .btn,
body.vab-admin-page .btn-sm,
body.vab-admin-page .page-btn,
body.vab-admin-page button.btn,
body.vab-admin-page button[class*="btn"]:not(.modal-close):not(.vab-header-tool):not(.vab-shell-tool):not(.vab-route-tab) {
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 32px !important;
}

body.vab-admin-page .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.page-btn.active),
body.vab-admin-page button.btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.page-btn.active) {
  color: #606266 !important;
  background: #fff !important;
  border: 1px solid #dcdfe6 !important;
}

body.vab-admin-page .btn-primary {
  color: #fff !important;
  background: var(--vab-primary) !important;
  border: 1px solid var(--vab-primary) !important;
}

body.vab-admin-page .btn-danger {
  color: #fff !important;
  background: var(--vab-danger) !important;
  border: 1px solid var(--vab-danger) !important;
}

body.vab-admin-page .btn-success {
  color: #fff !important;
  background: var(--vab-success) !important;
  border: 1px solid var(--vab-success) !important;
}

body.vab-admin-page .table th,
body.vab-admin-page .table td,
body.vab-admin-page table.table th,
body.vab-admin-page table.table td,
body.vab-admin-page .mini-table th,
body.vab-admin-page .mini-table td {
  height: 46px !important;
  padding: 8px 12px !important;
  border: 1px solid #ebeef5 !important;
  font-size: 13px !important;
}

body.vab-admin-page .table th,
body.vab-admin-page table.table th,
body.vab-admin-page .mini-table th {
  color: #606266 !important;
  background: #f5f7fa !important;
  font-weight: 500 !important;
}

body.vab-admin-page .tabs {
  margin-bottom: 14px !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--vab-border) !important;
}

body.vab-admin-page .tab {
  height: 38px !important;
  padding: 0 18px !important;
  color: #606266 !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: #fff !important;
  font-weight: 400 !important;
  line-height: 38px !important;
}

body.vab-admin-page .tab.active {
  color: var(--vab-primary) !important;
  border-bottom-color: var(--vab-primary) !important;
}

body.vab-admin-page .modal-overlay,
body.vab-admin-page .modal-mask,
body.vab-public-page .modal-overlay,
body.vab-public-page .modal-mask {
  background: rgba(0, 0, 0, 0.16) !important;
  backdrop-filter: blur(3px) !important;
}

body.vab-admin-page .modal,
body.vab-admin-page .modal-box,
body.vab-admin-page .modal-content,
body.vab-public-page .modal,
body.vab-public-page .modal-box,
body.vab-public-page .modal-content {
  border-radius: 3px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
}

body.vab-admin-page .modal-title,
body.vab-admin-page .modal-header h3,
body.vab-public-page .modal-title,
body.vab-public-page .modal-header h3 {
  color: #303133 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

/* 2026-06-10 popup polish: compact Element Plus-like dialogs and menus. */
body.vab-admin-page.vab-admin-shell .admin-dropdown,
body.vab-admin-page .admin-dropdown {
  min-width: 168px !important;
  padding: 6px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #ebeef5 !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 24px rgba(0, 21, 41, 0.12) !important;
}

body.vab-admin-page.vab-admin-shell .admin-dropdown-item,
body.vab-admin-page .admin-dropdown-item {
  height: 34px !important;
  padding: 0 10px !important;
  gap: 8px !important;
  color: #606266 !important;
  border-radius: 3px !important;
  font-size: 13px !important;
  line-height: 34px !important;
}

body.vab-admin-page.vab-admin-shell .admin-dropdown-divider,
body.vab-admin-page .admin-dropdown-divider {
  margin: 5px 0 !important;
  background: #ebeef5 !important;
}

.vab-dialog-mask,
body.vab-admin-page .modal-mask,
body.vab-admin-page .modal-overlay {
  padding: 24px !important;
  background: rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(2px) !important;
}

.vab-dialog,
body.vab-admin-page.vab-admin-shell .modal {
  width: min(420px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 48px) !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #ebeef5 !important;
  border-radius: 4px !important;
  box-shadow: 0 14px 40px rgba(0, 21, 41, 0.18) !important;
  animation: vabDialogIn 0.18s ease-out !important;
}

.vab-dialog-header,
body.vab-admin-page.vab-admin-shell .modal-header {
  min-height: 48px !important;
  padding: 13px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #fff !important;
  border-bottom: 1px solid #ebeef5 !important;
}

.vab-dialog-title,
body.vab-admin-page.vab-admin-shell .modal-header h3 {
  margin: 0 !important;
  color: #303133 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 22px !important;
}

.vab-dialog-close,
body.vab-admin-page.vab-admin-shell .modal-close {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #909399 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.vab-dialog-close:hover,
body.vab-admin-page.vab-admin-shell .modal-close:hover {
  color: #1890ff !important;
  background: #e8f4ff !important;
  transform: none !important;
}

.vab-dialog-body,
body.vab-admin-page.vab-admin-shell .modal-body {
  padding: 18px 18px 16px !important;
  color: #606266 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

body.vab-admin-page.vab-admin-shell .modal-body .form-group {
  margin-bottom: 14px !important;
}

body.vab-admin-page.vab-admin-shell .modal-body .form-group label {
  margin-bottom: 6px !important;
  color: #606266 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

.vab-dialog-meta {
  margin-top: 12px !important;
  padding: 9px 10px !important;
  color: #909399 !important;
  background: #f5f7fa !important;
  border: 1px solid #ebeef5 !important;
  border-radius: 3px !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.vab-dialog-footer,
body.vab-admin-page.vab-admin-shell .modal-footer {
  min-height: 52px !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  background: #fff !important;
  border-top: 1px solid #ebeef5 !important;
}

.vab-dialog-btn,
body.vab-admin-page.vab-admin-shell .modal-footer .btn {
  height: 32px !important;
  min-width: 68px !important;
  padding: 0 14px !important;
  border-radius: 3px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 30px !important;
  box-shadow: none !important;
}

@keyframes vabDialogIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1024px) {
  body.vab-admin-page.vab-admin-shell .breadcrumb.vab-route-tabs {
    padding: 0 10px !important;
  }

  body.vab-admin-page.vab-admin-shell .vab-route-tab {
    min-width: 94px !important;
    max-width: 46vw !important;
    padding: 0 12px !important;
  }
}

/* 2026-06-10 admin login reference pass. */
body.vab-login-page {
  min-height: 100vh !important;
  background: linear-gradient(135deg, #eaf4ff 0%, #edf3ff 48%, #dfe9ff 100%) !important;
}

body.vab-admin-page.vab-login-page {
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

body.vab-admin-page.vab-login-page #app {
  width: 100% !important;
  height: 100vh !important;
  min-height: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}

body.vab-login-page .login-container {
  width: min(440px, calc(100vw - 32px)) !important;
  max-width: 440px !important;
  padding: 26px 40px 38px !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 46px rgba(24, 144, 255, 0.12) !important;
}

body.vab-login-page .logo {
  margin-bottom: 30px !important;
  text-align: left !important;
}

body.vab-login-page .brand-row {
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

body.vab-login-page .brand-text {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  color: #172033 !important;
  white-space: nowrap !important;
}

body.vab-login-page .brand-text strong {
  font-size: 16px !important;
  font-weight: 700 !important;
}

body.vab-login-page .brand-text span {
  color: #606266 !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

body.vab-login-page .logo-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  background: linear-gradient(135deg, #58b7ff 0%, #1890ff 100%) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

body.vab-login-page .logo-title {
  margin: 26px 0 8px !important;
  color: #172033 !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

body.vab-login-page .logo-subtitle {
  color: #909399 !important;
  font-size: 13px !important;
  text-align: center !important;
}

body.vab-login-page .form-group {
  margin-bottom: 22px !important;
}

body.vab-login-page .form-label {
  display: none !important;
}

body.vab-login-page .login-input-wrap {
  position: relative !important;
  width: 100% !important;
  display: block !important;
}

body.vab-login-page .login-input-wrap > i {
  position: absolute !important;
  top: 50% !important;
  left: 15px !important;
  z-index: 1 !important;
  color: #b8beca !important;
  font-size: 14px !important;
  transform: translateY(-50%) !important;
}

body.vab-login-page .form-input {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  display: block !important;
  padding: 0 40px !important;
  color: #303133 !important;
  background: #fff !important;
  border: 1px solid #dcdfe6 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-size: 14px !important;
}

body.vab-login-page .form-input:focus {
  border-color: var(--vab-primary) !important;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.12) !important;
}

body.vab-login-page .password-toggle {
  position: absolute !important;
  top: 50% !important;
  right: 8px !important;
  z-index: 2 !important;
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #a8abb2 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
}

body.vab-login-page .password-toggle i {
  margin: 0 !important;
}

body.vab-login-page .password-toggle:hover {
  color: var(--vab-primary) !important;
  background: var(--vab-primary-light) !important;
}

body.vab-login-page .captcha-row {
  display: flex !important;
  gap: 12px !important;
}

body.vab-login-page .captcha-input-wrap {
  flex: 1 1 auto !important;
}

body.vab-login-page .captcha-img {
  height: 42px !important;
  min-width: 120px !important;
  color: #303133 !important;
  background: #f5f7fa !important;
  border: 1px solid #ebeef5 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

body.vab-login-page .remember-row {
  margin: 2px 0 24px !important;
}

body.vab-login-page .remember-label {
  color: #606266 !important;
  font-size: 13px !important;
}

body.vab-login-page .remember-label input {
  accent-color: var(--vab-primary) !important;
}

body.vab-login-page .login-btn {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  color: #fff !important;
  background: var(--vab-primary) !important;
  border: 1px solid var(--vab-primary) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

body.vab-login-page .login-btn:hover {
  background: var(--vab-primary-hover) !important;
  border-color: var(--vab-primary-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}

body.vab-login-page .login-btn::before,
body.vab-login-page .security-info {
  display: none !important;
}

body.vab-login-page .error-message {
  margin-bottom: 18px !important;
  color: #f56c6c !important;
  background: #fef0f0 !important;
  border: 1px solid #fde2e2 !important;
  border-radius: 4px !important;
  font-weight: 400 !important;
}

body.vab-admin-page.vab-login-page .login-input-wrap {
  height: 46px !important;
}

body.vab-admin-page.vab-login-page .login-input-wrap > i {
  top: 50% !important;
  left: 12px !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}

body.vab-admin-page.vab-login-page .form-input {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 42px 0 48px !important;
  line-height: 46px !important;
}

body.vab-admin-page.vab-login-page .password-toggle {
  right: 10px !important;
}

body.vab-admin-page.vab-login-page .captcha-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 136px !important;
  gap: 12px !important;
  align-items: center !important;
}

body.vab-admin-page.vab-login-page .captcha-img {
  width: 136px !important;
  min-width: 136px !important;
  height: 46px !important;
  line-height: 46px !important;
  letter-spacing: 5px !important;
}

@media (max-width: 520px) {
  body.vab-login-page .login-container {
    padding: 24px 24px 32px !important;
  }

  body.vab-admin-page.vab-login-page #app {
    padding: 12px !important;
  }

  body.vab-login-page .captcha-img {
    min-width: 104px !important;
  }

  body.vab-admin-page.vab-login-page .captcha-row {
    grid-template-columns: minmax(0, 1fr) 112px !important;
    gap: 10px !important;
  }

  body.vab-admin-page.vab-login-page .captcha-img {
    width: 112px !important;
    min-width: 112px !important;
  }
}

/* Merchant console workspace */
body.merchant-surface,
body.vab-public-page.merchant-surface {
  --merchant-primary: #1769f4;
  --merchant-primary-hover: #0f5bd7;
  --merchant-primary-light: #edf5ff;
  --merchant-bg: #f3f6fb;
  --merchant-card: #ffffff;
  --merchant-border: #dfe7f3;
  --merchant-border-soft: #edf1f7;
  --merchant-text: #1f2937;
  --merchant-soft: #667085;
  --merchant-muted: #98a2b3;
  --merchant-success: #10b981;
  --merchant-warning: #f59e0b;
  --merchant-danger: #ef4444;
  --merchant-radius: 8px;
  background: var(--merchant-bg) !important;
  color: var(--merchant-text) !important;
}

body.merchant-surface #app {
  min-height: 100vh;
}

body.merchant-surface .top-nav,
body.merchant-surface .navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1200 !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  color: var(--merchant-text) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid var(--merchant-border) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(140%) blur(10px);
}

body.merchant-surface .logo,
body.merchant-surface .navbar-brand {
  min-width: max-content !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: var(--merchant-text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

body.merchant-surface .logo-icon,
body.merchant-surface .navbar-brand i {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  border-radius: 7px !important;
  background: var(--merchant-primary) !important;
  box-shadow: none !important;
}

body.merchant-surface .merchant-top-links,
body.merchant-surface .nav-tabs,
body.merchant-surface .navbar-links {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  overflow-x: auto !important;
}

body.merchant-surface .merchant-top-links a,
body.merchant-surface .nav-tab,
body.merchant-surface .navbar-links a {
  height: 34px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  color: #4b5565 !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 34px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease !important;
}

body.merchant-surface .merchant-top-links a:hover,
body.merchant-surface .merchant-top-links a.active,
body.merchant-surface .nav-tab:hover,
body.merchant-surface .nav-tab.active,
body.merchant-surface .navbar-links a:hover,
body.merchant-surface .navbar-links a.active {
  color: var(--merchant-primary) !important;
  border-color: #d8e8ff !important;
  background: var(--merchant-primary-light) !important;
}

body.merchant-surface .merchant-top-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.merchant-surface .back-btn,
body.merchant-surface .withdraw-btn,
body.merchant-surface .edit-btn,
body.merchant-surface .submit-btn,
body.merchant-surface .btn,
body.merchant-surface .modal-btn,
body.merchant-surface .empty-action,
body.merchant-surface .stat-action {
  min-height: 34px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  color: #344054 !important;
  border: 1px solid var(--merchant-border) !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 34px !important;
  text-decoration: none !important;
  transform: none !important;
}

body.merchant-surface .btn-primary,
body.merchant-surface .submit-btn,
body.merchant-surface .modal-btn-primary,
body.merchant-surface .withdraw-btn,
body.merchant-surface .stat-action.btn-primary,
body.merchant-surface .edit-btn {
  color: #fff !important;
  border-color: var(--merchant-primary) !important;
  background: var(--merchant-primary) !important;
}

body.merchant-surface .back-btn:hover,
body.merchant-surface .btn:hover,
body.merchant-surface .modal-btn:hover,
body.merchant-surface .empty-action:hover,
body.merchant-surface .stat-action:hover {
  color: var(--merchant-primary) !important;
  border-color: #b8d4ff !important;
  background: var(--merchant-primary-light) !important;
  transform: none !important;
  box-shadow: none !important;
}

body.merchant-surface .btn-primary:hover,
body.merchant-surface .submit-btn:hover,
body.merchant-surface .modal-btn-primary:hover,
body.merchant-surface .withdraw-btn:hover,
body.merchant-surface .stat-action.btn-primary:hover,
body.merchant-surface .edit-btn:hover {
  color: #fff !important;
  border-color: var(--merchant-primary-hover) !important;
  background: var(--merchant-primary-hover) !important;
}

body.merchant-surface .btn-secondary {
  color: #344054 !important;
  border-color: var(--merchant-border) !important;
  background: #f8fbff !important;
}

body.merchant-surface .btn-danger {
  color: #fff !important;
  border-color: var(--merchant-danger) !important;
  background: var(--merchant-danger) !important;
}

body.merchant-surface .btn-danger:hover {
  color: #fff !important;
  border-color: #dc2626 !important;
  background: #dc2626 !important;
}

body.merchant-surface button:disabled,
body.merchant-surface .btn:disabled,
body.merchant-surface .withdraw-btn:disabled,
body.merchant-surface .submit-btn:disabled {
  color: #98a2b3 !important;
  border-color: var(--merchant-border) !important;
  background: #f2f4f7 !important;
  cursor: not-allowed !important;
}

body.merchant-surface .container {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 20px auto 36px !important;
  padding: 0 20px !important;
}

body.merchant-surface .merchant-console-layout {
  max-width: 1280px !important;
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 16px !important;
}

body.merchant-surface .merchant-aside {
  position: sticky !important;
  top: 74px !important;
  padding: 14px !important;
  border: 1px solid var(--merchant-border) !important;
  border-radius: var(--merchant-radius) !important;
  background: #fff !important;
}

body.merchant-surface .merchant-aside-title {
  padding: 4px 8px 12px !important;
  color: var(--merchant-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body.merchant-surface .merchant-nav-list {
  display: grid !important;
  gap: 4px !important;
}

body.merchant-surface .merchant-nav-item {
  height: 38px !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #4b5565 !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

body.merchant-surface .merchant-nav-item i {
  width: 16px !important;
  color: #7a8699 !important;
  text-align: center !important;
}

body.merchant-surface .merchant-nav-item:hover,
body.merchant-surface .merchant-nav-item.active {
  color: var(--merchant-primary) !important;
  border-color: #d8e8ff !important;
  background: var(--merchant-primary-light) !important;
}

body.merchant-surface .merchant-nav-item:hover i,
body.merchant-surface .merchant-nav-item.active i {
  color: var(--merchant-primary) !important;
}

body.merchant-surface .merchant-aside-summary {
  margin-top: 14px !important;
  padding: 12px !important;
  border: 1px solid var(--merchant-border-soft) !important;
  border-radius: 7px !important;
  background: #f8fbff !important;
}

body.merchant-surface .merchant-aside-summary span {
  display: block !important;
  color: var(--merchant-muted) !important;
  font-size: 12px !important;
}

body.merchant-surface .merchant-aside-summary strong {
  display: block !important;
  margin-top: 4px !important;
  color: var(--merchant-text) !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
}

body.merchant-surface .merchant-main {
  min-width: 0 !important;
  display: grid !important;
  gap: 16px !important;
}

body.merchant-surface .merchant-page-head,
body.merchant-surface .page-header {
  min-height: 72px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

body.merchant-surface .merchant-page-kicker {
  margin-bottom: 5px !important;
  color: var(--merchant-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body.merchant-surface .page-title,
body.merchant-surface .merchant-page-title {
  margin: 0 !important;
  color: var(--merchant-text) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

body.merchant-surface .page-desc,
body.merchant-surface .merchant-page-desc {
  margin-top: 6px !important;
  color: var(--merchant-soft) !important;
  font-size: 13px !important;
}

body.merchant-surface .user-header,
body.merchant-surface .content-section,
body.merchant-surface .section,
body.merchant-surface .tabs-container,
body.merchant-surface .card,
body.merchant-surface .stat-card,
body.merchant-surface .function-card,
body.merchant-surface .key-item,
body.merchant-surface .balance-card,
body.merchant-surface .secret-box {
  color: var(--merchant-text) !important;
  border: 1px solid var(--merchant-border) !important;
  border-radius: var(--merchant-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.merchant-surface .user-header {
  margin: 0 !important;
  padding: 22px !important;
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 18px !important;
  overflow: visible !important;
}

body.merchant-surface .user-header::before,
body.merchant-surface .function-card::before,
body.merchant-surface .stat-card::before,
body.merchant-surface .balance-card::before {
  display: none !important;
}

body.merchant-surface .user-avatar-large {
  width: 72px !important;
  height: 72px !important;
  color: var(--merchant-primary) !important;
  border: 1px solid #d8e8ff !important;
  border-radius: 10px !important;
  background: var(--merchant-primary-light) !important;
  box-shadow: none !important;
  font-size: 26px !important;
}

body.merchant-surface .user-info,
body.merchant-surface .user-name,
body.merchant-surface .user-phone,
body.merchant-surface .stat-item,
body.merchant-surface .stat-value,
body.merchant-surface .stat-label {
  color: inherit !important;
  opacity: 1 !important;
}

body.merchant-surface .user-name {
  margin-bottom: 4px !important;
  color: var(--merchant-text) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}

body.merchant-surface .user-phone,
body.merchant-surface .stat-label,
body.merchant-surface .function-desc,
body.merchant-surface .info-label,
body.merchant-surface .record-time,
body.merchant-surface .key-field-label {
  color: var(--merchant-soft) !important;
}

body.merchant-surface .user-stats {
  margin: 16px 0 14px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(120px, 1fr)) !important;
  gap: 10px !important;
}

body.merchant-surface .stat-item {
  min-height: 76px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 3px !important;
  border: 1px solid var(--merchant-border-soft) !important;
  border-radius: 7px !important;
  background: #f8fbff !important;
}

body.merchant-surface .stat-value {
  color: var(--merchant-text) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

body.merchant-surface .logout-btn {
  height: 32px !important;
  padding: 0 13px !important;
  color: #475467 !important;
  border: 1px solid var(--merchant-border) !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.merchant-surface .functions-grid,
body.merchant-surface .merchant-quick-grid,
body.merchant-surface .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
}

body.merchant-surface .function-card {
  min-height: 126px !important;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  text-align: left !important;
  transition: border-color 0.18s ease, background-color 0.18s ease !important;
}

body.merchant-surface .function-card:hover,
body.merchant-surface .card:hover,
body.merchant-surface .key-item:hover {
  border-color: #b8d4ff !important;
  background: #fbfdff !important;
  transform: none !important;
  box-shadow: none !important;
}

body.merchant-surface .function-icon,
body.merchant-surface .stat-icon {
  width: 42px !important;
  height: 42px !important;
  margin: 0 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--merchant-primary) !important;
  border-radius: 9px !important;
  background: var(--merchant-primary-light) !important;
  font-size: 20px !important;
}

body.merchant-surface .function-icon svg {
  width: 25px !important;
  height: 25px !important;
  stroke-width: 2 !important;
}

body.merchant-surface .function-name {
  color: var(--merchant-text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

body.merchant-surface .content-section,
body.merchant-surface .section,
body.merchant-surface .tabs-container,
body.merchant-surface .card {
  padding: 20px !important;
}

body.merchant-surface .section-title,
body.merchant-surface .stats-title,
body.merchant-surface .card-title {
  margin: 0 0 16px !important;
  padding: 0 0 12px !important;
  color: var(--merchant-text) !important;
  border-bottom: 1px solid var(--merchant-border-soft) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

body.merchant-surface .info-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.merchant-surface .info-item,
body.merchant-surface .key-field {
  padding: 12px !important;
  border: 1px solid var(--merchant-border-soft) !important;
  border-radius: 7px !important;
  background: #f8fbff !important;
}

body.merchant-surface .info-value,
body.merchant-surface .record-type,
body.merchant-surface .key-name,
body.merchant-surface .key-field-value {
  color: var(--merchant-text) !important;
}

body.merchant-surface .tabs {
  margin: 0 0 16px !important;
  padding: 4px !important;
  gap: 4px !important;
  border: 1px solid var(--merchant-border) !important;
  border-radius: 8px !important;
  background: #f8fbff !important;
}

body.merchant-surface .tab,
body.merchant-surface .tab-item {
  height: 34px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #4b5565 !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

body.merchant-surface .tab.active,
body.merchant-surface .tab-item.active {
  color: var(--merchant-primary) !important;
  border-color: #d8e8ff !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.merchant-surface .record-item {
  min-height: 62px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--merchant-border-soft) !important;
}

body.merchant-surface .record-amount.income,
body.merchant-surface .income {
  color: var(--merchant-success) !important;
}

body.merchant-surface .record-amount.expense,
body.merchant-surface .expense {
  color: var(--merchant-danger) !important;
}

body.merchant-surface .status-tag,
body.merchant-surface .key-status,
body.merchant-surface .method-badge {
  min-height: 24px !important;
  padding: 0 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body.merchant-surface .status-tag.pending {
  color: #b45309 !important;
  background: #fff7ed !important;
}

body.merchant-surface .status-tag.approved,
body.merchant-surface .status-tag.paid,
body.merchant-surface .key-status.active {
  color: #047857 !important;
  background: #ecfdf3 !important;
}

body.merchant-surface .status-tag.rejected,
body.merchant-surface .key-status.inactive {
  color: #b42318 !important;
  background: #fff1f3 !important;
}

body.merchant-surface .balance-card {
  margin: 0 0 16px !important;
  padding: 24px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  color: var(--merchant-text) !important;
  background: linear-gradient(135deg, #ffffff 0%, #f2f7ff 100%) !important;
}

body.merchant-surface .balance-label {
  color: var(--merchant-soft) !important;
}

body.merchant-surface .balance-amount {
  color: var(--merchant-text) !important;
  font-size: 36px !important;
  line-height: 1.15 !important;
}

body.merchant-surface .balance-info {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  color: var(--merchant-soft) !important;
}

body.merchant-surface .balance-info span {
  padding: 6px 10px !important;
  border: 1px solid #d8e8ff !important;
  border-radius: 999px !important;
  background: #fff !important;
}

body.merchant-surface .card-header,
body.merchant-surface .modal-header {
  min-height: 58px !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid var(--merchant-border-soft) !important;
  background: #fff !important;
}

body.merchant-surface .card-body,
body.merchant-surface .modal-body {
  padding: 18px !important;
}

body.merchant-surface .key-item {
  margin-bottom: 12px !important;
  padding: 16px !important;
}

body.merchant-surface .key-info {
  gap: 10px !important;
}

body.merchant-surface .secret-box {
  padding: 14px !important;
  border-color: #fde68a !important;
  background: #fffbeb !important;
}

body.merchant-surface input,
body.merchant-surface select,
body.merchant-surface textarea,
body.merchant-surface .form-input {
  min-height: 38px !important;
  padding: 8px 11px !important;
  color: var(--merchant-text) !important;
  border: 1px solid #d8e2f0 !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 14px !important;
  outline: none !important;
}

body.merchant-surface input:focus,
body.merchant-surface select:focus,
body.merchant-surface textarea:focus,
body.merchant-surface .form-input:focus {
  border-color: #8ec5ff !important;
  box-shadow: 0 0 0 2px rgba(23, 105, 244, 0.1) !important;
}

body.merchant-surface .form-group {
  margin-bottom: 14px !important;
}

body.merchant-surface .form-label {
  margin-bottom: 6px !important;
  display: block !important;
  color: #344054 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

body.merchant-surface .modal-overlay {
  padding: 18px !important;
  background: rgba(15, 23, 42, 0.42) !important;
  backdrop-filter: blur(3px) !important;
}

body.merchant-surface .modal,
body.merchant-surface .modal-container {
  width: min(92vw, 520px) !important;
  max-height: calc(100vh - 48px) !important;
  overflow: auto !important;
  border: 1px solid var(--merchant-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18) !important;
}

body.merchant-surface .modal-title,
body.merchant-surface .modal-header h3 {
  margin: 0 !important;
  color: var(--merchant-text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

body.merchant-surface .modal-close {
  position: static !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #667085 !important;
  border: 1px solid var(--merchant-border) !important;
  border-radius: 6px !important;
  background: #fff !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

body.merchant-surface .pay-methods {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.merchant-surface .pay-method {
  padding: 12px !important;
  border: 1px solid var(--merchant-border) !important;
  border-radius: 7px !important;
  background: #fff !important;
}

body.merchant-surface .pay-method.active {
  border-color: #8ec5ff !important;
  background: var(--merchant-primary-light) !important;
}

body.merchant-surface .empty,
body.merchant-surface .empty-state {
  padding: 44px 18px !important;
  color: var(--merchant-soft) !important;
  text-align: center !important;
}

body.merchant-surface .toast {
  top: 72px !important;
  right: 18px !important;
  min-width: 220px !important;
  color: #fff !important;
  border-radius: 7px !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16) !important;
}

body.merchant-surface .toast:not(.show) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(calc(100% + 40px)) !important;
}

body.merchant-surface .toast.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) !important;
}

body.merchant-surface .table-container {
  overflow-x: auto !important;
  border: 1px solid var(--merchant-border) !important;
  border-radius: 8px !important;
}

body.merchant-surface .data-table,
body.merchant-surface table {
  width: 100% !important;
  border-collapse: collapse !important;
}

body.merchant-surface .data-table th,
body.merchant-surface .data-table td {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--merchant-border-soft) !important;
  color: var(--merchant-text) !important;
  font-size: 13px !important;
  text-align: left !important;
}

body.merchant-surface .data-table th {
  color: var(--merchant-soft) !important;
  background: #f8fbff !important;
  font-weight: 600 !important;
}

body.merchant-developer-center .container {
  max-width: 1200px !important;
}

body.merchant-developer-center .page-header {
  padding: 8px 4px 14px !important;
}

body.merchant-developer-center .stats-grid {
  margin-bottom: 16px !important;
}

body.merchant-developer-center .stat-card {
  min-height: 108px !important;
  padding: 18px !important;
}

body.merchant-developer-center .stat-value {
  color: var(--merchant-text) !important;
  font-size: 26px !important;
  line-height: 1.2 !important;
}

body.merchant-developer-center .stat-label {
  color: var(--merchant-soft) !important;
}

@media (max-width: 980px) {
  body.merchant-surface .merchant-console-layout {
    grid-template-columns: 1fr !important;
  }

  body.merchant-surface .merchant-aside {
    position: static !important;
  }

  body.merchant-surface .merchant-nav-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body.merchant-surface .functions-grid,
  body.merchant-surface .merchant-quick-grid,
  body.merchant-surface .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  body.merchant-surface .top-nav,
  body.merchant-surface .navbar {
    height: auto !important;
    min-height: 58px !important;
    padding: 10px 14px !important;
    flex-wrap: wrap !important;
  }

  body.merchant-surface .merchant-top-links,
  body.merchant-surface .nav-tabs,
  body.merchant-surface .navbar-links {
    order: 3 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    scrollbar-width: none !important;
  }

  body.merchant-surface .merchant-top-links::-webkit-scrollbar,
  body.merchant-surface .nav-tabs::-webkit-scrollbar,
  body.merchant-surface .navbar-links::-webkit-scrollbar {
    display: none !important;
  }

  body.merchant-surface .container {
    margin-top: 14px !important;
    padding: 0 14px !important;
  }

  body.merchant-surface .merchant-page-head,
  body.merchant-surface .page-header {
    min-height: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  body.merchant-surface .user-header {
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }

  body.merchant-surface .user-info {
    text-align: left !important;
  }

  body.merchant-surface .user-avatar-large {
    margin: 0 !important;
  }

  body.merchant-surface .user-stats,
  body.merchant-surface .info-grid,
  body.merchant-surface .pay-methods,
  body.merchant-surface .balance-card {
    grid-template-columns: 1fr !important;
  }

  body.merchant-surface .merchant-nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.merchant-surface .merchant-aside {
    padding: 12px !important;
  }

  body.merchant-surface .merchant-aside-title,
  body.merchant-surface .merchant-aside-summary {
    display: none !important;
  }

  body.merchant-surface .merchant-nav-item {
    height: 36px !important;
    padding: 0 9px !important;
    font-size: 13px !important;
  }

  body.merchant-surface .functions-grid,
  body.merchant-surface .merchant-quick-grid,
  body.merchant-surface .stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-06-10 icon polish pass: refine the existing Font Awesome, file and
   workspace icons without changing page business markup. */
:root {
  --vab-icon-primary: #1890ff;
  --vab-icon-primary-soft: #e8f4ff;
  --vab-icon-success: #13ce66;
  --vab-icon-success-soft: #e8f8ef;
  --vab-icon-warning: #f59e0b;
  --vab-icon-warning-soft: #fff7e6;
  --vab-icon-danger: #ff4d4f;
  --vab-icon-danger-soft: #fff1f0;
  --vab-icon-violet: #7c3aed;
  --vab-icon-violet-soft: #f3efff;
  --vab-icon-slate: #64748b;
  --vab-icon-slate-soft: #f1f5f9;
  --vab-icon-stroke: rgba(24, 144, 255, 0.18);
  --vab-icon-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 3px 9px rgba(24, 144, 255, 0.10);
}

body.vab-admin-page .fa,
body.vab-admin-page .fas,
body.vab-admin-page .far,
body.vab-admin-page .fab,
body.vab-public-page .fa,
body.vab-public-page .fas,
body.vab-public-page .far,
body.vab-public-page .fab,
body.merchant-surface .fa,
body.merchant-surface .fas,
body.merchant-surface .far,
body.merchant-surface .fab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: -0.09em !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body.vab-admin-page .btn,
body.vab-admin-page .action-btn,
body.vab-admin-page .page-btn,
body.vab-public-page .btn,
body.vab-public-page .btn-primary,
body.vab-public-page .btn-default,
body.vab-public-page .btn-upload,
body.vab-public-page .primary-btn,
body.vab-public-page .secondary-btn,
body.merchant-surface .btn,
body.merchant-surface .back-btn,
body.merchant-surface .submit-btn,
body.merchant-surface .modal-btn,
body.merchant-surface .stat-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

body.vab-admin-page .btn > i,
body.vab-admin-page button > i,
body.vab-public-page .btn > i,
body.vab-public-page button > i,
body.merchant-surface .btn > i,
body.merchant-surface button > i,
body.merchant-surface a > i {
  width: 1.05em !important;
  min-width: 1.05em !important;
  margin: 0 !important;
}

body.vab-admin-page button > i:only-child,
body.vab-public-page button > i:only-child,
body.merchant-surface button > i:only-child {
  width: 1em !important;
  min-width: 1em !important;
}

body.vab-admin-page .sidebar .nav-item {
  gap: 9px !important;
}

body.vab-admin-page .sidebar .nav-item i {
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  font-size: 14px !important;
  transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease !important;
}

body.vab-admin-page .sidebar .nav-item:hover i,
body.vab-admin-page .sidebar .nav-item.active i,
body.vab-admin-page .sidebar .nav-item[data-active="true"] i {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

body.vab-admin-page.vab-admin-shell .sidebar .nav-item {
  gap: 10px !important;
}

body.vab-admin-page.vab-admin-shell .sidebar .nav-item i {
  color: #7a8699 !important;
  background: #f5f7fa !important;
  border: 1px solid #edf1f7 !important;
  box-shadow: none !important;
}

body.vab-admin-page.vab-admin-shell .sidebar .nav-item:hover i,
body.vab-admin-page.vab-admin-shell .sidebar .nav-item.active i,
body.vab-admin-page.vab-admin-shell .sidebar .nav-item[data-active="true"] i {
  color: var(--vab-primary) !important;
  background: #fff !important;
  border-color: #cfe6ff !important;
  box-shadow: var(--vab-icon-shadow) !important;
}

body.vab-admin-page.vab-sidebar-collapsed .sidebar .nav-item i,
body.vab-admin-page.vab-admin-shell.vab-sidebar-collapsed .sidebar .nav-item i {
  margin: 0 !important;
}

body.vab-admin-page.vab-admin-shell .primary-sidebar-item i {
  width: 30px !important;
  height: 30px !important;
  color: #fff !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  font-size: 17px !important;
}

body.vab-admin-page.vab-admin-shell .primary-sidebar-item:hover i,
body.vab-admin-page.vab-admin-shell .primary-sidebar-item.active i {
  background: rgba(255, 255, 255, 0.24) !important;
}

body.vab-admin-page .vab-shell-tool,
body.vab-admin-page .vab-header-tool,
body.vab-admin-page .modal-close,
.vab-dialog-close,
body.vab-public-page .modal-close,
body.merchant-surface .modal-close {
  border: 1px solid transparent !important;
}

body.vab-admin-page.vab-admin-shell .vab-shell-tool,
body.vab-admin-page.vab-admin-shell .vab-header-tool {
  background: #f7f9fc !important;
  border-color: #edf1f7 !important;
}

body.vab-admin-page.vab-admin-shell .vab-shell-tool:hover,
body.vab-admin-page.vab-admin-shell .vab-header-tool:hover {
  border-color: #cfe6ff !important;
  box-shadow: 0 3px 8px rgba(24, 144, 255, 0.10) !important;
}

body.vab-admin-page .admin-avatar,
body.vab-admin-page .user-avatar,
body.vab-login-page .login-input-wrap > i {
  box-shadow: var(--vab-icon-shadow) !important;
}

body.vab-login-page .login-input-wrap > i {
  width: 22px !important;
  height: 22px !important;
  left: 10px !important;
  color: #8fb7e8 !important;
  background: #f3f8ff !important;
  border: 1px solid #e3f0ff !important;
  border-radius: 6px !important;
  font-size: 12px !important;
}

body.vab-login-page .form-input {
  padding-left: 42px !important;
}

body.vab-admin-page .stat-card .icon,
body.vab-admin-page .stat-icon,
body.vab-admin-page .action-icon,
body.vab-admin-page .audit-card-icon,
body.vab-admin-page .storage-panel-icon,
body.vab-public-page .feature-icon,
body.vab-public-page .stat-icon,
body.vab-public-page .function-icon,
body.merchant-surface .function-icon,
body.merchant-surface .stat-icon {
  --vab-icon-tone: var(--vab-icon-primary);
  --vab-icon-bg: var(--vab-icon-primary-soft);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--vab-icon-tone) !important;
  background: linear-gradient(145deg, #ffffff 0%, var(--vab-icon-bg) 100%) !important;
  border: 1px solid #d8eaff !important;
  border-radius: 8px !important;
  box-shadow: var(--vab-icon-shadow) !important;
}

body.vab-admin-page .stat-icon.blue,
body.vab-admin-page .action-icon.blue,
body.vab-public-page .stat-icon.blue,
body.vab-public-page .function-icon.blue {
  --vab-icon-tone: var(--vab-icon-primary);
  --vab-icon-bg: var(--vab-icon-primary-soft);
}

body.vab-admin-page .stat-icon.green,
body.vab-admin-page .action-icon.green,
body.vab-public-page .stat-icon.green,
body.vab-public-page .function-icon.green {
  --vab-icon-tone: var(--vab-icon-success);
  --vab-icon-bg: var(--vab-icon-success-soft);
}

body.vab-admin-page .stat-icon.orange,
body.vab-admin-page .action-icon.orange,
body.vab-admin-page .stat-icon.amber,
body.vab-public-page .stat-icon.orange,
body.vab-public-page .function-icon.orange {
  --vab-icon-tone: var(--vab-icon-warning);
  --vab-icon-bg: var(--vab-icon-warning-soft);
}

body.vab-admin-page .stat-icon.purple,
body.vab-admin-page .action-icon.purple,
body.vab-public-page .stat-icon.purple,
body.vab-public-page .function-icon.purple {
  --vab-icon-tone: var(--vab-icon-violet);
  --vab-icon-bg: var(--vab-icon-violet-soft);
}

body.vab-admin-page .stat-icon.red,
body.vab-admin-page .action-icon.red {
  --vab-icon-tone: var(--vab-icon-danger);
  --vab-icon-bg: var(--vab-icon-danger-soft);
}

body.vab-admin-page .stat-icon.slate,
body.vab-admin-page .action-icon.slate {
  --vab-icon-tone: var(--vab-icon-slate);
  --vab-icon-bg: var(--vab-icon-slate-soft);
}

body.vab-admin-page .stat-card:hover .icon,
body.vab-admin-page .audit-card:hover .audit-card-icon,
body.vab-admin-page .quick-link:hover i,
body.vab-public-page .feature-card:hover .feature-icon,
body.merchant-surface .function-card:hover .function-icon {
  transform: translateY(-1px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 7px 16px rgba(24, 144, 255, 0.14) !important;
}

body.vab-admin-page .quick-link i,
body.vab-admin-page .panel-title > i,
body.vab-admin-page .card-title > i,
body.vab-public-page .section-title i,
body.merchant-surface .section-title i,
body.merchant-surface .card-title i {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  color: var(--vab-icon-primary) !important;
  background: var(--vab-icon-primary-soft) !important;
  border: 1px solid #d8eaff !important;
  border-radius: 7px !important;
}

body.vab-admin-page .panel-title > i,
body.vab-admin-page .card-title > i,
body.vab-public-page .section-title i,
body.merchant-surface .section-title i,
body.merchant-surface .card-title i {
  margin-right: 7px !important;
}

body.vab-admin-page .file-icon,
body.vab-public-page .file-icon,
body.vab-public-page .upload-item-icon,
body.vab-public-page .progress-empty-icon,
body.vab-public-page .preview-audio-icon,
body.vab-public-page .preview-document-icon,
body.vab-public-page .pwd-modal-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--vab-icon-primary) !important;
  background: linear-gradient(145deg, #ffffff 0%, #eef6ff 100%) !important;
  border: 1px solid #dbeafe !important;
  border-radius: 8px !important;
  box-shadow: var(--vab-icon-shadow) !important;
}

body.vab-public-page .file-icon.file-thumbnail {
  color: inherit !important;
  background: #f8fafc !important;
  border-color: #e5e7eb !important;
  box-shadow: none !important;
}

body.vab-admin-page .file-icon.image,
body.vab-public-page .file-icon.image {
  color: var(--vab-icon-primary) !important;
  background: #eef6ff !important;
}

body.vab-admin-page .file-icon.video,
body.vab-public-page .file-icon.video {
  color: var(--vab-icon-danger) !important;
  background: #fff1f0 !important;
}

body.vab-admin-page .file-icon.audio,
body.vab-public-page .file-icon.audio {
  color: var(--vab-icon-violet) !important;
  background: #f3efff !important;
}

body.vab-admin-page .file-icon.document,
body.vab-public-page .file-icon.document {
  color: var(--vab-icon-warning) !important;
  background: #fff7e6 !important;
}

body.vab-admin-page .folder-icon,
body.vab-public-page .folder-icon,
body.vab-public-page .vault-file-icon.folder-icon {
  filter: drop-shadow(0 4px 7px rgba(180, 118, 0, 0.12)) !important;
}

body.vab-admin-page .folder-icon::before,
body.vab-public-page .folder-icon::before {
  background: linear-gradient(180deg, #ffe08a 0%, #f6c85f 100%) !important;
  border: 1px solid rgba(217, 119, 6, 0.12) !important;
  border-bottom: 0 !important;
}

body.vab-admin-page .folder-icon::after,
body.vab-public-page .folder-icon::after {
  background: linear-gradient(180deg, #ffe79e 0%, #ffd35d 42%, #f4b833 100%) !important;
  border: 1px solid rgba(217, 119, 6, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 2px 4px rgba(180, 118, 0, 0.10) !important;
}

body.vab-public-page .file-action-btn,
body.vab-public-page .preview-tool-btn,
body.vab-public-page .upload-item-btn,
body.vab-public-page .progress-action-btn,
body.vab-public-page .notification-btn,
body.vab-public-page .progress-btn,
body.vab-public-page .share-row-actions .action-icon,
body.vab-admin-page .action-btn,
body.vab-admin-page .table-actions button,
body.merchant-surface .merchant-nav-item i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 7px !important;
}

body.vab-public-page .file-action-btn,
body.vab-public-page .preview-tool-btn,
body.vab-public-page .upload-item-btn,
body.vab-public-page .progress-action-btn,
body.vab-public-page .notification-btn,
body.vab-public-page .progress-btn,
body.vab-public-page .share-row-actions .action-icon {
  min-width: 32px !important;
  min-height: 32px !important;
  background: #fff !important;
  border: 1px solid #e5edf8 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

body.vab-public-page .file-action-btn:hover,
body.vab-public-page .preview-tool-btn:hover,
body.vab-public-page .upload-item-btn:hover,
body.vab-public-page .progress-action-btn:hover,
body.vab-public-page .notification-btn:hover,
body.vab-public-page .progress-btn:hover,
body.vab-public-page .share-row-actions .action-icon:hover {
  color: var(--vab-icon-primary) !important;
  background: var(--vab-icon-primary-soft) !important;
  border-color: #cfe6ff !important;
  box-shadow: 0 5px 12px rgba(24, 144, 255, 0.12) !important;
  transform: translateY(-1px) !important;
}

body.vab-public-page .file-action-btn.favorited {
  color: #f59e0b !important;
  background: #fff7e6 !important;
  border-color: #fde3a3 !important;
}

body.vab-public-page .mobile-tab-icon {
  width: 30px !important;
  height: 30px !important;
  margin: 0 0 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f5f7fa !important;
  border: 1px solid #edf1f7 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

body.vab-public-page .mobile-tab-item.active .mobile-tab-icon {
  background: var(--vab-icon-primary-soft) !important;
  border-color: #cfe6ff !important;
  box-shadow: var(--vab-icon-shadow) !important;
}

body.vab-public-page .empty i,
body.vab-admin-page .empty i,
body.vab-public-page .loading i,
body.vab-admin-page .loading i,
body.vab-public-page .empty-state i,
body.vab-admin-page .empty-state i {
  width: 44px !important;
  height: 44px !important;
  margin: 0 auto 12px !important;
  color: #9abbe4 !important;
  background: #f3f8ff !important;
  border: 1px dashed #cfe6ff !important;
  border-radius: 10px !important;
  font-size: 20px !important;
}

body.vab-public-page .empty-folder {
  filter: drop-shadow(0 8px 14px rgba(24, 144, 255, 0.10)) !important;
}

body.vab-admin-page .vab-toast i,
body.vab-public-page .vab-toast i,
body.merchant-surface .toast i {
  width: 22px !important;
  height: 22px !important;
  margin-top: 0 !important;
  border-radius: 50% !important;
  background: rgba(24, 144, 255, 0.10) !important;
}

body.vab-admin-page .vab-toast-success i,
body.vab-public-page .vab-toast-success i {
  background: rgba(19, 206, 102, 0.12) !important;
}

body.vab-admin-page .vab-toast-error i,
body.vab-public-page .vab-toast-error i {
  background: rgba(255, 77, 79, 0.12) !important;
}

body.vab-admin-page .vab-toast-warning i,
body.vab-public-page .vab-toast-warning i {
  background: rgba(245, 158, 11, 0.14) !important;
}

@media (max-width: 768px) {
  body.vab-admin-page .sidebar .nav-item i {
    width: 25px !important;
    min-width: 25px !important;
    height: 25px !important;
  }

  body.vab-public-page .file-action-btn,
  body.vab-public-page .preview-tool-btn,
  body.vab-public-page .upload-item-btn,
  body.vab-public-page .progress-action-btn {
    min-width: 34px !important;
    min-height: 34px !important;
  }
}

/* 2026-06-10 homepage module polish: tighter landing sections and refined
   feature/pricing icons for / and /home.html. */
body.vab-public-page .hero {
  padding: 0 24px !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fbff 58%, #edf5ff 100%) !important;
}

body.vab-public-page .hero .hero-content {
  max-width: 1140px !important;
  min-height: 500px !important;
  padding: 64px 20px 54px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  text-align: center !important;
}

body.vab-public-page .hero .hero-text {
  width: 100% !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
}

body.vab-public-page .hero .hero-text h1 {
  max-width: 1040px !important;
  margin: 0 auto !important;
  color: #1b2134 !important;
  font-size: 64px !important;
  font-weight: 800 !important;
  line-height: 1.13 !important;
  letter-spacing: 0 !important;
}

body.vab-public-page .hero .hero-text p {
  margin: 26px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  color: #475467 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

body.vab-public-page .hero .hero-point {
  height: 42px !important;
  padding: 0 16px 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  color: #1f2937 !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid #dbeafe !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 18px rgba(24, 144, 255, 0.09) !important;
  white-space: nowrap !important;
}

body.vab-public-page .hero .hero-point::before {
  content: none !important;
  display: none !important;
}

body.vab-public-page .hero .hero-point i {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  font-size: 13px !important;
}

body.vab-public-page .hero .hero-point-download i {
  color: #d97706 !important;
  background: #fff7e6 !important;
  border: 1px solid #fde3a3 !important;
}

body.vab-public-page .hero .hero-point-speed i {
  color: var(--vab-primary) !important;
  background: var(--vab-primary-light) !important;
  border: 1px solid #cfe6ff !important;
}

body.vab-public-page .hero .hero-actions {
  height: auto !important;
  margin-top: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  opacity: 1 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

body.vab-public-page .hero .btn-large {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 22px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 44px !important;
}

body.vab-public-page .hero .btn-large i {
  font-size: 14px !important;
}

body.vab-public-page .hero .hero-image {
  display: none !important;
}

body.vab-public-page .features {
  margin-top: 0 !important;
  padding: 58px 24px 70px !important;
  background: #f3f7fd !important;
  border-top: 1px solid #e4edf8 !important;
}

body.vab-public-page .features .section-title {
  max-width: 720px !important;
  margin: 0 auto 30px !important;
}

body.vab-public-page .features .section-title h2,
body.vab-public-page .pricing .section-title h2 {
  margin: 0 0 8px !important;
  color: #1f2937 !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

body.vab-public-page .features .section-title p,
body.vab-public-page .pricing .section-title p {
  color: #667085 !important;
  font-size: 14px !important;
}

body.vab-public-page .features-grid {
  max-width: 1140px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body.vab-public-page .feature-card {
  --home-icon-tone: var(--vab-primary);
  --home-icon-bg: var(--vab-primary-light);
  position: relative !important;
  min-height: 190px !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #dfe8f4 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

body.vab-public-page .feature-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: var(--home-icon-tone) !important;
  opacity: 0.86 !important;
}

body.vab-public-page .feature-card-upload {
  --home-icon-tone: #1890ff;
  --home-icon-bg: #e8f4ff;
}

body.vab-public-page .feature-card-secure {
  --home-icon-tone: #13ce66;
  --home-icon-bg: #e8f8ef;
}

body.vab-public-page .feature-card-share {
  --home-icon-tone: #7c3aed;
  --home-icon-bg: #f3efff;
}

body.vab-public-page .feature-card-device {
  --home-icon-tone: #0ea5e9;
  --home-icon-bg: #e0f2fe;
}

body.vab-public-page .feature-card-speed {
  --home-icon-tone: #f59e0b;
  --home-icon-bg: #fff7e6;
}

body.vab-public-page .feature-card-vip {
  --home-icon-tone: #ec4899;
  --home-icon-bg: #fdf2f8;
}

body.vab-public-page .feature-card:hover {
  border-color: #b8d4ff !important;
  box-shadow: 0 10px 24px rgba(24, 144, 255, 0.10) !important;
  transform: translateY(-2px) !important;
}

body.vab-public-page .feature-card .feature-icon {
  width: 50px !important;
  height: 50px !important;
  margin: 0 0 18px !important;
  color: var(--home-icon-tone) !important;
  background: linear-gradient(145deg, #fff 0%, var(--home-icon-bg) 100%) !important;
  border: 1px solid rgba(24, 144, 255, 0.14) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 6px 14px rgba(24, 144, 255, 0.08) !important;
  font-size: 20px !important;
}

body.vab-public-page .feature-card .feature-icon i {
  width: 1em !important;
  min-width: 1em !important;
  margin: 0 !important;
  font-size: 21px !important;
}

body.vab-public-page .feature-card h3 {
  margin: 0 0 8px !important;
  color: #1f2937 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

body.vab-public-page .feature-card p {
  margin: 0 !important;
  color: #667085 !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
}

body.vab-public-page .pricing {
  padding: 64px 24px 72px !important;
  background: #fff !important;
}

body.vab-public-page .pricing .section-title {
  margin-bottom: 28px !important;
}

body.vab-public-page .pricing-grid {
  max-width: 1140px !important;
  gap: 16px !important;
}

body.vab-public-page .pricing-card {
  position: relative !important;
  padding: 26px !important;
  color: #1f2937 !important;
  background: #fff !important;
  border: 1px solid #dfe8f4 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
  transform: none !important;
}

body.vab-public-page .pricing-card:hover {
  border-color: #b8d4ff !important;
  box-shadow: 0 10px 24px rgba(24, 144, 255, 0.10) !important;
  transform: translateY(-2px) !important;
}

body.vab-public-page .pricing-card.featured {
  color: #1f2937 !important;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 46%) !important;
  border-color: #8ec5ff !important;
  box-shadow: 0 12px 30px rgba(24, 144, 255, 0.12) !important;
  transform: none !important;
}

body.vab-public-page .pricing-card.featured::before {
  content: "推荐" !important;
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  height: 24px !important;
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  color: var(--vab-primary) !important;
  background: var(--vab-primary-light) !important;
  border: 1px solid #cfe6ff !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.vab-public-page .plan-name {
  margin-bottom: 10px !important;
  color: #1f2937 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

body.vab-public-page .plan-price {
  margin-bottom: 12px !important;
  color: #111827 !important;
  font-size: 34px !important;
  line-height: 1.15 !important;
}

body.vab-public-page .plan-features {
  margin: 20px 0 24px !important;
}

body.vab-public-page .plan-features li {
  position: relative !important;
  padding: 9px 0 9px 30px !important;
  color: #475467 !important;
  border-bottom: 1px solid #edf1f7 !important;
  font-size: 14px !important;
}

body.vab-public-page .plan-features li::before {
  content: "\f00c" !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #13ce66 !important;
  background: #e8f8ef !important;
  border-radius: 50% !important;
  font-family: "Font Awesome 6 Free" !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}

body.vab-public-page .pricing-card.featured .plan-features li {
  border-color: #e2eefc !important;
}

body.vab-public-page .plan-btn {
  height: 42px !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: var(--vab-primary) !important;
  border: 1px solid var(--vab-primary) !important;
  box-shadow: none !important;
  font-size: 14px !important;
}

body.vab-public-page .pricing-card.featured .plan-btn,
body.vab-public-page .pricing-card:not(.featured) .plan-btn:hover {
  color: #fff !important;
  background: var(--vab-primary) !important;
  border-color: var(--vab-primary) !important;
}

body.vab-public-page .pricing-card.featured .plan-btn:hover {
  background: var(--vab-primary-hover) !important;
  border-color: var(--vab-primary-hover) !important;
}

body.vab-public-page .cta {
  padding: 58px 24px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #1769f4 0%, #1890ff 100%) !important;
  text-align: center !important;
}

body.vab-public-page .cta h2 {
  margin: 0 0 10px !important;
  font-size: 30px !important;
  line-height: 1.25 !important;
}

body.vab-public-page .cta p {
  margin-bottom: 24px !important;
  font-size: 15px !important;
}

body.vab-public-page .cta .btn {
  height: 44px !important;
  padding: 0 28px !important;
  border-radius: 6px !important;
  color: var(--vab-primary) !important;
  background: #fff !important;
  box-shadow: none !important;
}

@media (max-width: 1024px) {
  body.vab-public-page .hero .hero-content {
    min-height: 430px !important;
    padding: 52px 16px 44px !important;
  }

  body.vab-public-page .hero .hero-text h1 {
    max-width: 760px !important;
    font-size: 46px !important;
  }

  body.vab-public-page .features-grid,
  body.vab-public-page .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  body.vab-public-page .hero {
    padding: 0 16px !important;
  }

  body.vab-public-page .hero .hero-content {
    min-height: 0 !important;
    padding: 42px 0 36px !important;
  }

  body.vab-public-page .hero .hero-text h1 {
    max-width: 340px !important;
    font-size: 32px !important;
    line-height: 1.25 !important;
  }

  body.vab-public-page .hero .hero-text p {
    margin-top: 20px !important;
    gap: 10px !important;
  }

  body.vab-public-page .hero .hero-point {
    height: 38px !important;
    padding-right: 12px !important;
    font-size: 13px !important;
  }

  body.vab-public-page .hero .hero-actions {
    width: 100% !important;
    flex-direction: column !important;
  }

  body.vab-public-page .hero .btn-large {
    width: min(100%, 320px) !important;
  }

  body.vab-public-page .features,
  body.vab-public-page .pricing {
    padding: 42px 16px 48px !important;
  }

  body.vab-public-page .features .section-title h2,
  body.vab-public-page .pricing .section-title h2,
  body.vab-public-page .cta h2 {
    font-size: 24px !important;
  }

  body.vab-public-page .features-grid,
  body.vab-public-page .pricing-grid {
    grid-template-columns: 1fr !important;
  }

  body.vab-public-page .feature-card {
    min-height: 0 !important;
    padding: 20px !important;
  }
}

/* 2026-06-11 front reference replication: blue-white merchant storefront
   framework modeled after the current Jingsoft demo layout, scoped to the
   dedicated landing page class so existing cloud disk workflows remain stable. */
body.jing-front-page,
body.vab-public-page.jing-front-page {
  --jf-blue: #1769ff;
  --jf-blue-dark: #0f54d9;
  --jf-blue-soft: #eaf3ff;
  --jf-ink: #0f172a;
  --jf-text: #24324a;
  --jf-muted: #7b8aa3;
  --jf-line: #eef3fa;
  --jf-bg: #ffffff;
  --jf-panel: #f7faff;
  --jf-green: #20bf6b;
  --jf-orange: #ff7a1a;
  --jf-yellow: #ffc857;
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--jf-text) !important;
  background: var(--jf-bg) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

body.jing-front-page *,
body.jing-front-page *::before,
body.jing-front-page *::after {
  box-sizing: border-box !important;
  letter-spacing: 0 !important;
}

body.jing-front-page a {
  color: inherit !important;
  text-decoration: none !important;
}

body.jing-front-page button {
  font-family: inherit !important;
}

body.jing-front-page .js-site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  height: 64px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid rgba(238, 243, 250, 0.72) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(150%) blur(10px) !important;
}

body.jing-front-page .js-header-inner {
  width: min(100% - 48px, 1192px) !important;
  height: 64px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 180px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 28px !important;
}

body.jing-front-page .js-brand {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body.jing-front-page .js-brand-mark {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  border-radius: 8px 8px 12px 8px !important;
  background: linear-gradient(145deg, #69d6ff 0%, #1769ff 58%, #0a3bd1 100%) !important;
  box-shadow: 0 10px 22px rgba(23, 105, 255, 0.24) !important;
  transform: rotate(-8deg) skew(-2deg) !important;
}

body.jing-front-page .js-brand-mark i {
  font-size: 15px !important;
  transform: rotate(8deg) !important;
}

body.jing-front-page .js-brand-copy {
  display: grid !important;
  grid-template-columns: max-content max-content !important;
  align-items: end !important;
  gap: 7px !important;
  line-height: 1 !important;
}

body.jing-front-page .js-brand-copy strong {
  color: #101828 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

body.jing-front-page .js-brand-copy em {
  margin-bottom: 2px !important;
  color: #667085 !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

body.jing-front-page .js-menu {
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 40px !important;
  color: #31405a !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

body.jing-front-page .js-menu a {
  height: 64px !important;
  display: inline-flex !important;
  align-items: center !important;
  color: #31405a !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.18s ease, border-color 0.18s ease !important;
}

body.jing-front-page .js-menu a:hover,
body.jing-front-page .js-menu a.active {
  color: var(--jf-blue) !important;
  border-bottom-color: var(--jf-blue) !important;
}

body.jing-front-page .js-merchant-btn {
  width: 110px !important;
  height: 32px !important;
  padding: 0 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--jf-blue) !important;
  box-shadow: 0 8px 18px rgba(23, 105, 255, 0.20) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 32px !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease, box-shadow 0.18s ease !important;
}

body.jing-front-page .js-merchant-btn span {
  white-space: nowrap !important;
}

body.jing-front-page .js-merchant-btn:hover,
body.jing-front-page .js-entry-btn:hover {
  background: var(--jf-blue-dark) !important;
  box-shadow: 0 10px 22px rgba(23, 105, 255, 0.25) !important;
}

body.jing-front-page .js-hero {
  position: relative !important;
  min-height: 690px !important;
  overflow: hidden !important;
  background: #fff !important;
}

body.jing-front-page .js-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.jing-front-page .js-hero-bg::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 58vw !important;
  height: 560px !important;
  background: linear-gradient(145deg, rgba(216, 230, 255, 0.82) 0%, rgba(238, 245, 255, 0.92) 100%) !important;
  clip-path: polygon(23% 0, 100% 0, 100% 42%, 62% 73%, 26% 100%, 0 64%) !important;
}

body.jing-front-page .js-hero-bg::after {
  content: "" !important;
  position: absolute !important;
  top: -165px !important;
  left: -140px !important;
  width: 920px !important;
  height: 800px !important;
  background: #f6f9ff !important;
  border-radius: 0 0 60% 50% !important;
  transform: rotate(24deg) !important;
}

body.jing-front-page .js-hero-inner {
  position: relative !important;
  z-index: 1 !important;
  width: min(100% - 48px, 1192px) !important;
  min-height: 690px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 500px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 80px !important;
}

body.jing-front-page .js-hero-copy {
  padding-top: 18px !important;
}

body.jing-front-page .js-hero-copy h1 {
  margin: 0 0 24px !important;
  color: #101828 !important;
  font-size: 40px !important;
  font-weight: 800 !important;
  line-height: 1.48 !important;
}

body.jing-front-page .js-hero-copy h1 span {
  color: var(--jf-blue) !important;
}

body.jing-front-page .js-hero-copy p {
  width: min(100%, 500px) !important;
  margin: 0 0 34px !important;
  color: #74839a !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}

body.jing-front-page .js-entry-btn {
  width: 160px !important;
  height: 48px !important;
  padding: 0 28px !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--jf-blue) !important;
  box-shadow: 0 12px 24px rgba(23, 105, 255, 0.24) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

body.jing-front-page .js-hero-visual {
  position: relative !important;
  height: 500px !important;
  min-width: 0 !important;
}

body.jing-front-page .js-card {
  position: absolute !important;
  overflow: hidden !important;
  border: 1px solid rgba(220, 230, 244, 0.72) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 18px 40px rgba(39, 65, 111, 0.10) !important;
}

body.jing-front-page .js-card-title {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  color: #32415a !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

body.jing-front-page .js-card-title span {
  color: #b5bfcd !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

body.jing-front-page .js-chart-card {
  top: 48px !important;
  left: 118px !important;
  width: 214px !important;
  height: 214px !important;
  padding: 22px 24px !important;
}

body.jing-front-page .js-chart-bars {
  position: absolute !important;
  left: 40px !important;
  right: 34px !important;
  bottom: 18px !important;
  height: 118px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
}

body.jing-front-page .js-chart-bars i {
  width: 11px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffdba2 0%, #ffba4d 100%) !important;
  box-shadow: 0 8px 16px rgba(255, 186, 77, 0.22) !important;
}

body.jing-front-page .js-chart-bars i:nth-child(1) { height: 54px !important; }
body.jing-front-page .js-chart-bars i:nth-child(2) { height: 78px !important; }
body.jing-front-page .js-chart-bars i:nth-child(3) { height: 90px !important; }
body.jing-front-page .js-chart-bars i:nth-child(4) { height: 106px !important; }
body.jing-front-page .js-chart-bars i:nth-child(5) {
  height: 128px !important;
  background: linear-gradient(180deg, #ff6b76 0%, #ff2f63 100%) !important;
  box-shadow: 0 10px 20px rgba(255, 47, 99, 0.24) !important;
}

body.jing-front-page .js-chart-line {
  position: absolute !important;
  left: 28px !important;
  top: 88px !important;
  width: 124px !important;
  height: 62px !important;
  border-top: 5px solid #ff3b68 !important;
  border-radius: 68% 28% 0 0 !important;
  transform: rotate(-18deg) !important;
}

body.jing-front-page .js-shop-card {
  top: 110px !important;
  right: 36px !important;
  width: 214px !important;
  height: 104px !important;
  padding-top: 36px !important;
  text-align: center !important;
}

body.jing-front-page .js-shop-icon {
  position: absolute !important;
  top: -24px !important;
  left: 50% !important;
  width: 52px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  border: 6px solid #fff !important;
  border-radius: 50% !important;
  background: var(--jf-orange) !important;
  box-shadow: 0 12px 28px rgba(255, 122, 26, 0.24) !important;
  transform: translateX(-50%) !important;
}

body.jing-front-page .js-shop-card strong {
  display: block !important;
  color: #24324a !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

body.jing-front-page .js-stars {
  margin-top: 10px !important;
  display: inline-flex !important;
  gap: 8px !important;
}

body.jing-front-page .js-stars i {
  width: 11px !important;
  height: 11px !important;
  clip-path: polygon(50% 0, 63% 34%, 100% 38%, 72% 60%, 80% 100%, 50% 78%, 20% 100%, 28% 60%, 0 38%, 37% 34%) !important;
  background: var(--jf-yellow) !important;
}

body.jing-front-page .js-account-card {
  left: 20px !important;
  top: 288px !important;
  width: 320px !important;
  height: 150px !important;
  padding: 22px 24px !important;
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(135deg, #1769ff 0%, #0c5cff 100%) !important;
  box-shadow: 0 18px 34px rgba(23, 105, 255, 0.27) !important;
}

body.jing-front-page .js-account-card span {
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 16px !important;
}

body.jing-front-page .js-account-card strong {
  display: block !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

body.jing-front-page .js-account-card > i {
  width: 72px !important;
  height: 28px !important;
  margin-top: 18px !important;
  display: block !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.20) !important;
}

body.jing-front-page .js-account-card > i::before {
  content: "" !important;
  width: 36px !important;
  height: 6px !important;
  margin: 11px auto !important;
  display: block !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.62) !important;
}

body.jing-front-page .js-goods-card {
  top: 238px !important;
  right: 0 !important;
  width: 318px !important;
  height: 292px !important;
  padding: 20px 24px !important;
}

body.jing-front-page .js-goods-row {
  height: 82px !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 58px 8px !important;
  align-items: center !important;
  gap: 14px !important;
  border-bottom: 1px solid var(--jf-line) !important;
}

body.jing-front-page .js-goods-row:last-child {
  border-bottom: 0 !important;
}

body.jing-front-page .js-goods-row b {
  width: 48px !important;
  height: 48px !important;
  border-radius: 4px !important;
  background: linear-gradient(135deg, #ffe0d2, #ff8a66) !important;
}

body.jing-front-page .js-goods-row:nth-child(3) b {
  background: linear-gradient(135deg, #d5fbef, #20bf6b) !important;
}

body.jing-front-page .js-goods-row:nth-child(4) b {
  background: linear-gradient(135deg, #dce9ff, #1769ff) !important;
}

body.jing-front-page .js-goods-row span {
  height: 8px !important;
  border-radius: 999px !important;
  background: #d8dfeb !important;
}

body.jing-front-page .js-goods-row span:nth-of-type(1) {
  width: 92px !important;
}

body.jing-front-page .js-goods-row span:nth-of-type(2) {
  width: 44px !important;
}

body.jing-front-page .js-goods-row em {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--jf-orange) !important;
}

body.jing-front-page .js-goods-row:nth-child(3) em {
  background: var(--jf-green) !important;
}

body.jing-front-page .js-note-card {
  left: 106px !important;
  bottom: -8px !important;
  width: 234px !important;
  height: 122px !important;
  padding: 30px 24px 20px 70px !important;
}

body.jing-front-page .js-note-card i {
  position: absolute !important;
  left: 28px !important;
  top: 42px !important;
  color: var(--jf-blue) !important;
  font-size: 22px !important;
}

body.jing-front-page .js-note-card span {
  height: 8px !important;
  margin-bottom: 10px !important;
  display: block !important;
  border-radius: 999px !important;
  background: #d8dfeb !important;
}

body.jing-front-page .js-note-card span:nth-child(2) { width: 142px !important; }
body.jing-front-page .js-note-card span:nth-child(3) { width: 126px !important; }
body.jing-front-page .js-note-card span:nth-child(4) { width: 74px !important; }

body.jing-front-page .js-section {
  padding: 86px 24px !important;
  background: #fff !important;
}

body.jing-front-page .js-section-head {
  width: min(100%, 1192px) !important;
  margin: 0 auto 56px !important;
  text-align: center !important;
}

body.jing-front-page .js-section-head h2 {
  margin: 0 0 16px !important;
  color: #111827 !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

body.jing-front-page .js-section-head p {
  margin: 0 !important;
  color: #6b7280 !important;
  font-size: 16px !important;
}

body.jing-front-page .js-category-section {
  padding-top: 72px !important;
}

body.jing-front-page .js-category-board {
  width: min(100%, 1192px) !important;
  min-height: 330px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 236px minmax(0, 1fr) !important;
  border: 1px solid #eef3fa !important;
  border-radius: 8px !important;
  background: #f8fbff !important;
  overflow: hidden !important;
}

body.jing-front-page .js-category-tabs {
  display: grid !important;
  align-content: start !important;
  background: #f1f6ff !important;
}

body.jing-front-page .js-category-tabs button {
  height: 74px !important;
  padding: 0 26px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #4c5f7c !important;
  border: 0 !important;
  border-bottom: 1px solid #e5edf8 !important;
  background: transparent !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-align: left !important;
}

body.jing-front-page .js-category-tabs button.active,
body.jing-front-page .js-category-tabs button:hover {
  color: var(--jf-blue) !important;
  background: #fff !important;
}

body.jing-front-page .js-category-tabs i {
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: #eaf3ff !important;
}

body.jing-front-page .js-case-grid {
  padding: 38px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

body.jing-front-page .js-case-card,
body.jing-front-page .js-feature-card,
body.jing-front-page .js-step-card,
body.jing-front-page .js-news-card {
  border: 1px solid #e7eef8 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 14px 34px rgba(23, 44, 78, 0.06) !important;
}

body.jing-front-page .js-case-card {
  min-height: 240px !important;
  padding: 30px !important;
  background:
    linear-gradient(145deg, rgba(23, 105, 255, 0.06) 0%, rgba(255, 255, 255, 0) 42%),
    #fff !important;
}

body.jing-front-page .js-case-card.accent {
  background:
    linear-gradient(145deg, rgba(32, 191, 107, 0.07) 0%, rgba(255, 255, 255, 0) 42%),
    #fff !important;
}

body.jing-front-page .js-case-card span {
  color: var(--jf-blue) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.jing-front-page .js-case-card h3,
body.jing-front-page .js-feature-card h3,
body.jing-front-page .js-step-card h3 {
  margin: 12px 0 10px !important;
  color: #14213d !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

body.jing-front-page .js-case-card p,
body.jing-front-page .js-feature-card p,
body.jing-front-page .js-step-card p {
  margin: 0 !important;
  color: #6b778c !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
}

body.jing-front-page .js-why-section,
body.jing-front-page .js-news-section {
  background: #fbfdff !important;
}

body.jing-front-page .js-feature-grid {
  width: min(100%, 1192px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

body.jing-front-page .js-feature-card {
  min-height: 212px !important;
  padding: 28px !important;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}

body.jing-front-page .js-feature-card:hover,
body.jing-front-page .js-step-card:hover,
body.jing-front-page .js-news-card:hover {
  border-color: #cfe1ff !important;
  box-shadow: 0 16px 36px rgba(23, 105, 255, 0.10) !important;
  transform: translateY(-2px) !important;
}

body.jing-front-page .js-feature-card > i {
  width: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--jf-blue) !important;
  border-radius: 8px !important;
  background: var(--jf-blue-soft) !important;
  font-size: 20px !important;
}

body.jing-front-page .js-feature-card:nth-child(2n) > i {
  color: var(--jf-green) !important;
  background: #e9f9f0 !important;
}

body.jing-front-page .js-feature-card:nth-child(3n) > i {
  color: var(--jf-orange) !important;
  background: #fff3e8 !important;
}

body.jing-front-page .js-step-grid {
  width: min(100%, 1040px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

body.jing-front-page .js-step-card {
  min-height: 196px !important;
  padding: 30px !important;
  position: relative !important;
}

body.jing-front-page .js-step-card span {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  border-radius: 50% !important;
  background: var(--jf-blue) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

body.jing-front-page .js-news-grid {
  width: min(100%, 1192px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

body.jing-front-page .js-news-card {
  padding: 24px !important;
}

body.jing-front-page .js-news-title {
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body.jing-front-page .js-news-title strong {
  color: #14213d !important;
  font-size: 18px !important;
}

body.jing-front-page .js-news-title a {
  color: var(--jf-blue) !important;
  font-size: 13px !important;
}

body.jing-front-page .js-news-card > a {
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #4c5f7c !important;
  border-top: 1px solid #eef3fa !important;
  font-size: 14px !important;
}

body.jing-front-page .js-news-card > a span {
  color: var(--jf-blue) !important;
  font-weight: 800 !important;
}

body.jing-front-page .js-site-footer {
  color: #6b778c !important;
  background: #111827 !important;
}

body.jing-front-page .js-footer-inner {
  width: min(100% - 48px, 1192px) !important;
  margin: 0 auto !important;
  padding: 52px 0 36px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 40px !important;
}

body.jing-front-page .js-footer-inner section {
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
}

body.jing-front-page .js-footer-inner h3 {
  margin: 0 0 6px !important;
  color: #fff !important;
  font-size: 16px !important;
}

body.jing-front-page .js-footer-inner a,
body.jing-front-page .js-footer-inner p {
  margin: 0 !important;
  color: #98a2b3 !important;
  font-size: 14px !important;
}

body.jing-front-page .js-footer-inner a:hover {
  color: #fff !important;
}

body.jing-front-page .js-footer-bottom {
  width: min(100% - 48px, 1192px) !important;
  margin: 0 auto !important;
  padding: 18px 0 !important;
  color: #98a2b3 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 13px !important;
}

/* Desktop login page alignment with the referenced merchant login shell. */
body.vab-public-page.vab-login-page:not(.vab-admin-page) {
  background: #f3f7ff !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .header {
  width: min(100% - 56px, 1370px) !important;
  height: 74px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .header .logo + * {
  display: none !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .main-content {
  width: min(100% - 56px, 1370px) !important;
  min-height: calc(100vh - 150px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(420px, 44%) minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 0 !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .title-section {
  position: relative !important;
  margin: 0 !important;
  padding: 112px 58px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  background: #fff !important;
  border-radius: 8px 0 0 8px !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .title-section::before {
  content: "欢迎使用001云盘" !important;
  margin-bottom: 32px !important;
  color: #0f172a !important;
  font-size: 30px !important;
  font-weight: 800 !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .main-title {
  max-width: 360px !important;
  margin: 0 0 22px !important;
  color: #0f172a !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .subtitle {
  margin-top: 0 !important;
  display: grid !important;
  justify-content: start !important;
  gap: 12px !important;
  color: #667085 !important;
  font-size: 14px !important;
  text-align: left !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .subtitle-item {
  padding-left: 20px !important;
  position: relative !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .subtitle-item::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 9px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--vab-primary, #1890ff) !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .subtitle-item > span:first-child {
  display: none !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .login-card {
  position: relative !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 104px min(8vw, 100px) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0 !important;
  background:
    linear-gradient(135deg, rgba(23, 105, 255, 0.92), rgba(49, 129, 255, 0.86)),
    linear-gradient(45deg, #dceaff, #ffffff) !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .login-card::before {
  content: "云端安全存储\A分享下载更轻松\A文件提取更高效" !important;
  white-space: pre-line !important;
  position: absolute !important;
  right: min(6.5vw, 96px) !important;
  bottom: 24px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-shadow: 0 3px 12px rgba(15, 55, 118, 0.18) !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .qr-section {
  display: none !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .form-section {
  width: 360px !important;
  min-height: 420px !important;
  padding: 34px 34px 30px !important;
  border: 1px solid rgba(255, 255, 255, 0.56) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 24px 48px rgba(15, 55, 118, 0.16) !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .form-title {
  margin-bottom: 26px !important;
  color: #0f172a !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  text-align: left !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .form-title::after {
  display: none !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .form-subtitle {
  margin: 6px 0 0 !important;
  color: #667085 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .form-input {
  height: 40px !important;
  padding: 0 12px !important;
  border-color: #d8e2f0 !important;
  border-radius: 4px !important;
  background: #fff !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .submit-btn {
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 4px !important;
  background: var(--vab-primary, #1890ff) !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .auth-panel-head {
  margin-bottom: 22px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .auth-panel-head .form-title {
  margin-bottom: 0 !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .auth-head-link {
  flex: 0 0 auto !important;
  color: var(--vab-primary, #1890ff) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 32px !important;
  text-decoration: none !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .auth-head-link:hover {
  text-decoration: underline !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .register-benefits {
  margin: 0 0 20px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .register-benefits span {
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: 1px solid #dbe8ff !important;
  border-radius: 6px !important;
  color: #1769ff !important;
  background: #f3f8ff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .register-benefits i {
  font-size: 12px !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .register-type-tabs {
  padding: 4px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px !important;
  border: 1px solid #d8e2f0 !important;
  border-radius: 6px !important;
  background: #f6f9fd !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .register-type-tabs .code-btn {
  width: 100% !important;
  height: 34px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: #667085 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .register-type-tabs .code-btn.active {
  color: #fff !important;
  background: var(--vab-primary, #1890ff) !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .code-group {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 118px !important;
  gap: 10px !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .code-group .code-btn {
  height: 40px !important;
  padding: 0 12px !important;
  border-color: var(--vab-primary, #1890ff) !important;
  border-radius: 4px !important;
  color: var(--vab-primary, #1890ff) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .code-group .code-btn:hover {
  color: #fff !important;
  background: var(--vab-primary, #1890ff) !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page).auth-register-mode .main-content {
  grid-template-columns: minmax(380px, 40%) minmax(0, 1fr) !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page).auth-register-mode .title-section {
  padding: 96px 58px !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page).auth-register-mode .title-section::before {
  content: "创建001云盘账号" !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page).auth-register-mode .main-title {
  max-width: 390px !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page).auth-register-mode .login-card {
  padding: 78px min(7vw, 88px) !important;
  align-items: center !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page).auth-register-mode .login-card::before {
  content: "云端安全存储\A分享下载更轻松\A文件提取更高效" !important;
  right: min(6vw, 88px) !important;
  bottom: 24px !important;
  display: block !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-shadow: 0 3px 12px rgba(15, 55, 118, 0.18) !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page).auth-register-mode .form-section {
  width: min(100%, 448px) !important;
  min-height: 0 !important;
  padding: 34px 38px 32px !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page).auth-register-mode .form-checkbox {
  margin-bottom: 18px !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page).auth-register-mode .form-center-link {
  margin-top: 18px !important;
}

body.vab-public-page.vab-login-page:not(.vab-admin-page) .footer {
  padding: 18px 24px !important;
  background: #fff !important;
}

/* Merchant console refinement toward the referenced light workplace. */
body.merchant-surface,
body.vab-public-page.merchant-surface {
  --merchant-bg: #f4f7fc;
  --merchant-primary: #1769ff;
  --merchant-primary-hover: #0f54d9;
  --merchant-primary-light: #edf5ff;
}

body.merchant-surface .top-nav,
body.merchant-surface .navbar {
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 24px !important;
  background: #eef4ff !important;
  border-bottom: 0 !important;
}

body.merchant-surface .merchant-console-layout {
  max-width: none !important;
  width: 100% !important;
  margin: 16px 0 36px !important;
  padding: 0 16px !important;
  grid-template-columns: 128px minmax(0, 1fr) !important;
  gap: 16px !important;
}

body.merchant-surface .merchant-aside {
  top: 80px !important;
  min-height: calc(100vh - 96px) !important;
  padding: 16px !important;
  border: 0 !important;
  border-radius: 8px !important;
}

body.merchant-surface .merchant-aside-title,
body.merchant-surface .merchant-aside-summary {
  display: none !important;
}

body.merchant-surface .merchant-nav-list {
  gap: 8px !important;
}

body.merchant-surface .merchant-nav-item {
  height: 48px !important;
  padding: 0 16px !important;
  gap: 10px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
}

body.merchant-surface .merchant-nav-item i {
  width: 18px !important;
  font-size: 17px !important;
}

body.merchant-surface .merchant-main {
  grid-template-columns: minmax(0, 1fr) 320px !important;
  align-items: start !important;
  gap: 16px !important;
}

body.merchant-surface .merchant-page-head {
  grid-column: 1 / -1 !important;
  min-height: 64px !important;
  padding: 0 20px !important;
  border-radius: 8px !important;
  background: #fff !important;
}

body.merchant-surface .merchant-page-title,
body.merchant-surface .page-title {
  font-size: 20px !important;
}

body.merchant-surface .user-header {
  grid-column: 1 / -1 !important;
  padding: 24px !important;
  border: 0 !important;
  border-radius: 8px !important;
}

body.merchant-surface .functions-grid,
body.merchant-surface .content-section,
body.merchant-surface .section,
body.merchant-surface .tabs-container,
body.merchant-surface .card,
body.merchant-surface .balance-card {
  border: 0 !important;
  border-radius: 8px !important;
}

/* Merchant center reference workspace, modeled after the Jingsoft merchant console. */
body.merchant-user-center {
  background: #f4f7fc !important;
  color: #1f2a44 !important;
}

body.merchant-user-center .top-nav.merchant-ref-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  height: 64px !important;
  display: grid !important;
  grid-template-columns: 128px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 0 20px !important;
  background: #edf4ff !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.merchant-user-center .merchant-ref-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  color: #1b63d8 !important;
  text-decoration: none !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

body.merchant-user-center .merchant-ref-brand strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.merchant-user-center .merchant-ref-logo {
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: #1769ff !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

body.merchant-user-center .merchant-ref-top-menu {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body.merchant-user-center .merchant-ref-top-menu a,
body.merchant-user-center .merchant-ref-actions a,
body.merchant-user-center .merchant-ref-user {
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #41516d !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

body.merchant-user-center .merchant-ref-top-menu a:hover,
body.merchant-user-center .merchant-ref-actions a:hover,
body.merchant-user-center .merchant-ref-user:hover {
  background: #fff !important;
  color: #1769ff !important;
}

body.merchant-user-center .merchant-ref-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

body.merchant-user-center .merchant-ref-avatar-mini {
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: #1769ff !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  overflow: hidden !important;
}

body.merchant-user-center .container.merchant-ref-shell {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: 128px minmax(0, 1fr) !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 16px !important;
  min-height: calc(100vh - 64px) !important;
}

body.merchant-user-center .merchant-aside.merchant-ref-sidebar {
  position: sticky !important;
  top: 80px !important;
  align-self: start !important;
  min-height: calc(100vh - 96px) !important;
  padding: 14px 10px !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.merchant-user-center .merchant-ref-side-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 38px !important;
  margin-bottom: 8px !important;
  color: #9aa7bc !important;
  font-size: 12px !important;
}

body.merchant-user-center .merchant-ref-side-logo strong {
  color: #1f2a44 !important;
  font-size: 13px !important;
}

body.merchant-user-center .merchant-nav-list.merchant-ref-nav-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 4px !important;
}

body.merchant-user-center .merchant-nav-item.merchant-ref-nav-item {
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 8px !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #556176 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body.merchant-user-center .merchant-nav-item.merchant-ref-nav-item i {
  width: 18px !important;
  color: #9aa7bc !important;
  font-size: 15px !important;
  text-align: center !important;
}

body.merchant-user-center .merchant-nav-item.merchant-ref-nav-item:hover,
body.merchant-user-center .merchant-nav-item.merchant-ref-nav-item.active {
  background: #edf5ff !important;
  color: #1769ff !important;
}

body.merchant-user-center .merchant-nav-item.merchant-ref-nav-item:hover i,
body.merchant-user-center .merchant-nav-item.merchant-ref-nav-item.active i {
  color: #1769ff !important;
}

body.merchant-user-center .merchant-main.merchant-ref-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px !important;
  align-items: start !important;
  gap: 16px !important;
  min-width: 0 !important;
}

body.merchant-user-center .merchant-ref-workspace {
  min-width: 0 !important;
  display: grid !important;
  gap: 16px !important;
}

body.merchant-user-center .merchant-ref-greeting,
body.merchant-user-center .merchant-ref-panel,
body.merchant-user-center .merchant-ref-side-card {
  background: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

body.merchant-user-center .merchant-ref-greeting {
  min-height: 92px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 22px 24px !important;
}

body.merchant-user-center .merchant-ref-greeting p,
body.merchant-user-center .merchant-ref-greeting h1 {
  margin: 0 !important;
}

body.merchant-user-center .merchant-ref-greeting p {
  color: #8a96aa !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

body.merchant-user-center .merchant-ref-greeting h1 {
  margin-top: 8px !important;
  color: #1f2a44 !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

body.merchant-user-center .merchant-ref-outline-btn {
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 14px !important;
  border: 1px solid #d7e4ff !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #1769ff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

body.merchant-user-center .merchant-ref-panel {
  padding: 20px !important;
}

body.merchant-user-center .merchant-ref-panel-head,
body.merchant-user-center .merchant-ref-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

body.merchant-user-center .merchant-ref-panel-head h2,
body.merchant-user-center .merchant-ref-card-head h3 {
  margin: 0 !important;
  color: #1f2a44 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

body.merchant-user-center .merchant-ref-panel-head span,
body.merchant-user-center .merchant-ref-panel-head a,
body.merchant-user-center .merchant-ref-card-head a {
  color: #8a96aa !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

body.merchant-user-center .merchant-ref-panel-head a:hover,
body.merchant-user-center .merchant-ref-card-head a:hover {
  color: #1769ff !important;
}

body.merchant-user-center .merchant-ref-todo-panel {
  padding: 0 !important;
  overflow: hidden !important;
}

body.merchant-user-center .merchant-ref-todo-panel .merchant-ref-panel-head {
  margin: 0 !important;
  padding: 18px 20px 0 !important;
}

body.merchant-user-center .merchant-ref-todo-strip {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  margin-top: 16px !important;
  min-height: 98px !important;
  background: linear-gradient(90deg, #1b73ff 0%, #178dff 100%) !important;
}

body.merchant-user-center .merchant-ref-todo-strip a {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 18px 8px !important;
  color: #fff !important;
  text-decoration: none !important;
}

body.merchant-user-center .merchant-ref-todo-strip a + a::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 24px !important;
  bottom: 24px !important;
  width: 1px !important;
  background: rgba(255, 255, 255, 0.24) !important;
}

body.merchant-user-center .merchant-ref-todo-strip strong {
  color: #fff !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

body.merchant-user-center .merchant-ref-todo-strip span {
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

body.merchant-user-center .merchant-ref-data-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body.merchant-user-center .merchant-ref-stat-card {
  min-height: 118px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 18px !important;
  border-radius: 6px !important;
  background: #f7f9fd !important;
  border: 1px solid #edf1f8 !important;
}

body.merchant-user-center .merchant-ref-stat-card span {
  color: #7a879b !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

body.merchant-user-center .merchant-ref-stat-card strong {
  color: #1f2a44 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

body.merchant-user-center .merchant-ref-stat-card em {
  color: #a0aabd !important;
  font-style: normal !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body.merchant-user-center .merchant-ref-chart-panel {
  min-height: 292px !important;
}

body.merchant-user-center .merchant-ref-chart {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  grid-template-rows: minmax(170px, 1fr) 28px !important;
  gap: 0 8px !important;
  min-height: 218px !important;
}

body.merchant-user-center .merchant-ref-chart-y {
  display: grid !important;
  align-content: stretch !important;
  color: #a0aabd !important;
  font-size: 11px !important;
}

body.merchant-user-center .merchant-ref-chart-y span {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  padding-right: 6px !important;
}

body.merchant-user-center .merchant-ref-chart-plot {
  position: relative !important;
  min-height: 170px !important;
  border-left: 1px solid #e9eef6 !important;
  border-bottom: 1px solid #e9eef6 !important;
  background-image:
    linear-gradient(to bottom, #e9eef6 1px, transparent 1px),
    linear-gradient(to right, rgba(233, 238, 246, 0.55) 1px, transparent 1px) !important;
  background-size: 100% 42px, 16.66% 100% !important;
  overflow: hidden !important;
}

body.merchant-user-center .merchant-ref-chart-line {
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  top: 35% !important;
  height: 70px !important;
  border-bottom: 3px solid #1769ff !important;
  border-radius: 50% !important;
  transform: rotate(-8deg) !important;
  opacity: 0.88 !important;
}

body.merchant-user-center .merchant-ref-chart-plot i {
  position: absolute !important;
  width: 8px !important;
  height: 8px !important;
  margin: -4px 0 0 -4px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 2px solid #1769ff !important;
  box-shadow: 0 0 0 4px rgba(23, 105, 255, 0.1) !important;
}

body.merchant-user-center .merchant-ref-chart-x {
  grid-column: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  align-items: end !important;
  color: #a0aabd !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-align: center !important;
}

body.merchant-user-center .merchant-ref-right {
  display: grid !important;
  gap: 16px !important;
  min-width: 0 !important;
}

body.merchant-user-center .merchant-ref-side-card {
  padding: 18px !important;
}

body.merchant-user-center .merchant-ref-quick-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.merchant-user-center .merchant-ref-quick-grid a,
body.merchant-user-center .merchant-ref-quick-grid button {
  min-height: 74px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 6px !important;
  border: 1px solid #edf1f8 !important;
  border-radius: 6px !important;
  background: #f8faff !important;
  color: #536178 !important;
  text-align: center !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

body.merchant-user-center .merchant-ref-quick-grid i {
  color: #1769ff !important;
  font-size: 17px !important;
}

body.merchant-user-center .merchant-ref-quick-grid a:hover,
body.merchant-user-center .merchant-ref-quick-grid button:hover {
  background: #edf5ff !important;
  color: #1769ff !important;
}

body.merchant-user-center .merchant-ref-empty {
  min-height: 104px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  color: #a0aabd !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

body.merchant-user-center .merchant-ref-empty i {
  font-size: 28px !important;
  color: #d3dae7 !important;
}

body.merchant-user-center .merchant-ref-notice {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 44px !important;
  text-decoration: none !important;
}

body.merchant-user-center .merchant-ref-notice b {
  padding: 3px 7px !important;
  border-radius: 4px !important;
  background: #edf5ff !important;
  color: #1769ff !important;
  font-size: 12px !important;
}

body.merchant-user-center .merchant-ref-notice span {
  color: #556176 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.merchant-user-center .merchant-ref-service {
  display: grid !important;
  grid-template-columns: 90px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
}

body.merchant-user-center .merchant-ref-service strong,
body.merchant-user-center .merchant-ref-service span {
  display: block !important;
}

body.merchant-user-center .merchant-ref-service strong {
  margin-bottom: 8px !important;
  color: #1f2a44 !important;
  font-size: 15px !important;
}

body.merchant-user-center .merchant-ref-service span {
  color: #7a879b !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}

body.merchant-user-center .merchant-ref-qr {
  width: 90px !important;
  height: 90px !important;
  border: 7px solid #fff !important;
  border-radius: 6px !important;
  background-color: #fff !important;
  background-image:
    linear-gradient(90deg, #1f2a44 50%, transparent 50%),
    linear-gradient(#1f2a44 50%, transparent 50%),
    linear-gradient(90deg, transparent 72%, #1769ff 72%),
    linear-gradient(transparent 68%, #1769ff 68%) !important;
  background-size: 16px 16px, 16px 16px, 28px 28px, 28px 28px !important;
  box-shadow: 0 0 0 1px #edf1f8 !important;
}

@media (max-width: 1180px) {
  body.merchant-user-center .merchant-main.merchant-ref-main {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.merchant-user-center .merchant-ref-right {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  body.merchant-user-center .top-nav.merchant-ref-topbar {
    grid-template-columns: 1fr auto !important;
    height: auto !important;
    min-height: 64px !important;
    padding: 10px 14px !important;
  }

  body.merchant-user-center .merchant-ref-top-menu {
    display: none !important;
  }

  body.merchant-user-center .merchant-ref-actions a span {
    display: none !important;
  }

  body.merchant-user-center .merchant-ref-user > span:nth-child(2) {
    display: none !important;
  }

  body.merchant-user-center .container.merchant-ref-shell {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  body.merchant-user-center .merchant-aside.merchant-ref-sidebar {
    position: static !important;
    min-height: 0 !important;
    padding: 10px !important;
  }

  body.merchant-user-center .merchant-ref-side-logo {
    display: none !important;
  }

  body.merchant-user-center .merchant-nav-list.merchant-ref-nav-list {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(64px, 1fr)) !important;
    overflow-x: auto !important;
  }

  body.merchant-user-center .merchant-nav-item.merchant-ref-nav-item {
    min-width: 64px !important;
    height: 48px !important;
    flex-direction: column !important;
    gap: 4px !important;
    font-size: 12px !important;
  }

  body.merchant-user-center .merchant-ref-greeting {
    align-items: flex-start !important;
    flex-direction: column !important;
    padding: 18px !important;
  }

  body.merchant-user-center .merchant-ref-greeting h1 {
    font-size: 21px !important;
  }

  body.merchant-user-center .merchant-ref-data-grid,
  body.merchant-user-center .merchant-ref-right {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.merchant-user-center .merchant-ref-todo-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    overflow-x: hidden !important;
  }
}

@media (max-width: 560px) {
  body.merchant-user-center .merchant-ref-brand strong {
    max-width: 86px !important;
  }

  body.merchant-user-center .merchant-ref-actions {
    gap: 2px !important;
  }

  body.merchant-user-center .merchant-ref-actions a,
  body.merchant-user-center .merchant-ref-user {
    padding: 0 8px !important;
  }

  body.merchant-user-center .merchant-ref-panel,
  body.merchant-user-center .merchant-ref-side-card {
    padding: 16px !important;
  }

  body.merchant-user-center .merchant-ref-todo-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.merchant-user-center .merchant-ref-data-grid,
  body.merchant-user-center .merchant-ref-right,
  body.merchant-user-center .merchant-ref-quick-grid {
    grid-template-columns: 1fr !important;
  }

  body.merchant-user-center .merchant-ref-quick-grid a,
  body.merchant-user-center .merchant-ref-quick-grid button {
    min-height: 54px !important;
    flex-direction: row !important;
  }

  body.merchant-user-center .merchant-ref-service {
    grid-template-columns: 78px minmax(0, 1fr) !important;
  }

  body.merchant-user-center .merchant-ref-qr {
    width: 78px !important;
    height: 78px !important;
  }
}

/* 123pan-style merchant center shell. */
body.merchant-ref-lite {
  --merchant123-bg: #f7f9fd;
  --merchant123-shell: #ffffff;
  --merchant123-sidebar: linear-gradient(180deg, #f7f8fa 0%, rgba(217, 225, 239, 0.34) 100%);
  --merchant123-primary: #597dfc;
  --merchant123-primary-hover: #2961d9;
  --merchant123-text: #1b1f35;
  --merchant123-muted: #7b8196;
  --merchant123-soft: #edeff3;
  min-height: 100vh !important;
  padding: 80px 16px 24px 274px !important;
  background: linear-gradient(116deg, #fafcfc 4.27%, #f7f9fa 20.86%, #f8fbfd 78.34%) !important;
  color: var(--merchant123-text) !important;
  overflow-x: hidden !important;
}

body.merchant-ref-lite.merchant-user-center {
  padding: 0 !important;
}

body.merchant-ref-lite .merchant-123-topbar,
body.merchant-ref-lite > .merchant-ref-topbar {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 80 !important;
  height: 80px !important;
  min-height: 80px !important;
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 22px 24px !important;
  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.merchant-ref-lite.merchant-user-center .merchant-ref-topbar {
  position: sticky !important;
  height: 80px !important;
  min-height: 80px !important;
  grid-template-columns: 220px minmax(0, 1fr) auto !important;
  padding: 22px 24px !important;
  background: #fff !important;
}

body.merchant-ref-lite .merchant-ref-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--merchant123-primary) !important;
  text-decoration: none !important;
  min-width: 0 !important;
}

body.merchant-ref-lite .merchant-ref-brand strong {
  color: var(--merchant123-primary) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

body.merchant-ref-lite .merchant-ref-logo {
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: var(--merchant123-primary) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}

body.merchant-ref-lite .merchant-ref-top-menu,
body.merchant-ref-lite .merchant-ref-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  min-width: 0 !important;
}

body.merchant-ref-lite .merchant-ref-actions {
  justify-content: flex-end !important;
}

body.merchant-ref-lite .merchant-ref-top-menu a,
body.merchant-ref-lite .merchant-ref-actions a,
body.merchant-ref-lite .merchant-ref-user {
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #3c3f52 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

body.merchant-ref-lite .merchant-ref-top-menu a:hover,
body.merchant-ref-lite .merchant-ref-actions a:hover,
body.merchant-ref-lite .merchant-ref-user:hover {
  background: rgba(182, 186, 195, 0.1) !important;
  color: var(--merchant123-primary) !important;
}

body.merchant-ref-lite .merchant-ref-avatar-mini {
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: var(--merchant123-primary) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  overflow: hidden !important;
}

body.merchant-ref-lite .merchant-ref-legacy-topnav {
  display: none !important;
}

body.merchant-ref-lite > .merchant-ref-sidebar,
body.merchant-ref-lite .merchant-123-sidebar {
  position: fixed !important;
  top: 104px !important;
  left: 16px !important;
  bottom: 16px !important;
  z-index: 70 !important;
  width: 242px !important;
  min-width: 242px !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 16px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--merchant123-sidebar) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.merchant-ref-lite.merchant-user-center .container.merchant-ref-shell {
  grid-template-columns: 242px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 24px 16px 36px !important;
  min-height: calc(100vh - 80px) !important;
  background: linear-gradient(116deg, #fafcfc 4.27%, #f7f9fa 20.86%, #f8fbfd 78.34%) !important;
}

body.merchant-ref-lite.merchant-user-center .merchant-ref-sidebar {
  position: sticky !important;
  top: 104px !important;
  left: auto !important;
  bottom: auto !important;
  width: 242px !important;
  min-width: 242px !important;
  min-height: calc(100vh - 128px) !important;
  border-radius: 16px !important;
  background: var(--merchant123-sidebar) !important;
}

body.merchant-ref-lite .merchant-ref-side-logo {
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  color: #8d93a6 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body.merchant-ref-lite .merchant-ref-side-logo strong {
  color: var(--merchant123-text) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

body.merchant-ref-lite .merchant-ref-nav-list {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  overflow-y: auto !important;
  padding: 0 0 84px !important;
}

body.merchant-ref-lite .merchant-ref-nav-item,
body.merchant-ref-lite .merchant-nav-item.merchant-ref-nav-item {
  height: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #3c3f52 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

body.merchant-ref-lite .merchant-ref-nav-item i,
body.merchant-ref-lite .merchant-nav-item.merchant-ref-nav-item i {
  width: 18px !important;
  color: #7b8196 !important;
  font-size: 16px !important;
  text-align: center !important;
}

body.merchant-ref-lite .merchant-ref-nav-item:hover,
body.merchant-ref-lite .merchant-ref-nav-item.active,
body.merchant-ref-lite .merchant-nav-item.merchant-ref-nav-item:hover,
body.merchant-ref-lite .merchant-nav-item.merchant-ref-nav-item.active {
  background: #fff !important;
  color: var(--merchant123-text) !important;
  font-weight: 800 !important;
}

body.merchant-ref-lite .merchant-ref-nav-item:hover i,
body.merchant-ref-lite .merchant-ref-nav-item.active i,
body.merchant-ref-lite .merchant-nav-item.merchant-ref-nav-item:hover i,
body.merchant-ref-lite .merchant-nav-item.merchant-ref-nav-item.active i {
  color: var(--merchant123-primary) !important;
}

body.merchant-ref-lite .merchant-ref-space-card {
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
  min-height: 61px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 4px 19px rgba(159, 170, 189, 0.07) !important;
}

body.merchant-ref-lite .merchant-ref-space-card span {
  color: var(--merchant123-text) !important;
  font-size: 12px !important;
}

body.merchant-ref-lite .merchant-ref-space-card strong {
  color: var(--merchant123-primary) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.merchant-ref-lite #app {
  min-height: calc(100vh - 104px) !important;
}

body.merchant-ref-lite #app > .merchant-ref-content,
body.merchant-ref-lite #app > .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.merchant-ref-lite.merchant-user-center .merchant-ref-main {
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 12px !important;
}

body.merchant-ref-lite .merchant-ref-content,
body.merchant-ref-lite .merchant-ref-main,
body.merchant-ref-lite .merchant-main {
  min-width: 0 !important;
}

body.merchant-ref-lite .merchant-page-head,
body.merchant-ref-lite .page-header {
  min-height: 92px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 24px !important;
  margin: 0 0 12px !important;
  border: 0 !important;
  border-radius: 16px 16px 0 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.merchant-ref-lite .merchant-page-kicker {
  color: #8d93a6 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body.merchant-ref-lite .merchant-page-title,
body.merchant-ref-lite .page-title {
  margin: 0 !important;
  color: var(--merchant123-text) !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

body.merchant-ref-lite .merchant-page-desc,
body.merchant-ref-lite .page-desc,
body.merchant-ref-lite .info-banner {
  color: #7b8196 !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

body.merchant-ref-lite .info-banner {
  margin: 0 0 12px !important;
  padding: 12px 16px !important;
  border: 1px solid #dce9ff !important;
  border-radius: 12px !important;
  background: #f0f7ff !important;
}

body.merchant-ref-lite .stats-section,
body.merchant-ref-lite .section,
body.merchant-ref-lite .tabs-container,
body.merchant-ref-lite .content-section,
body.merchant-ref-lite .card,
body.merchant-ref-lite .balance-card,
body.merchant-ref-lite .filter-bar,
body.merchant-ref-lite .order-list,
body.merchant-ref-lite .order-item,
body.merchant-ref-lite .merchant-ref-greeting,
body.merchant-ref-lite .merchant-ref-panel,
body.merchant-ref-lite .merchant-ref-side-card {
  border: 0 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.merchant-ref-lite .stats-section,
body.merchant-ref-lite .section,
body.merchant-ref-lite .tabs-container,
body.merchant-ref-lite .content-section,
body.merchant-ref-lite .filter-bar,
body.merchant-ref-lite .order-list {
  margin-bottom: 12px !important;
  padding: 24px !important;
}

body.merchant-ref-lite .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body.merchant-ref-lite .stat-card {
  min-height: 118px !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px !important;
  border: 1px solid #edf1f8 !important;
  border-radius: 12px !important;
  background: #f8faff !important;
}

body.merchant-ref-lite .stat-card::before,
body.merchant-ref-lite .balance-card::before {
  display: none !important;
}

body.merchant-ref-lite .stat-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  font-size: 22px !important;
}

body.merchant-ref-lite .stat-label,
body.merchant-ref-lite .balance-label {
  color: #7b8196 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

body.merchant-ref-lite .stat-value,
body.merchant-ref-lite .balance-amount {
  color: var(--merchant123-text) !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}

body.merchant-ref-lite .balance-card {
  min-height: 172px !important;
  margin-bottom: 12px !important;
  padding: 28px !important;
  color: var(--merchant123-text) !important;
  background: #fff !important;
  border: 0 !important;
  overflow: hidden !important;
}

body.merchant-ref-lite .balance-card::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 24px 18px 24px !important;
  height: 3px !important;
  border-radius: 3px !important;
  background: linear-gradient(90deg, var(--merchant123-primary), #66a1ff) !important;
}

body.merchant-ref-lite .balance-info {
  color: #7b8196 !important;
  opacity: 1 !important;
}

body.merchant-ref-lite .tabs,
body.merchant-ref-lite .tabs-header {
  gap: 6px !important;
  margin-bottom: 20px !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  background: #f5f7fb !important;
  border-radius: 10px !important;
  padding: 4px !important;
}

body.merchant-ref-lite .tab,
body.merchant-ref-lite .tab-item {
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  color: #636a7f !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.merchant-ref-lite .tab.active,
body.merchant-ref-lite .tab-item.active {
  color: var(--merchant123-text) !important;
  background: #fff !important;
  box-shadow: 0 4px 12px rgba(31, 42, 68, 0.06) !important;
}

body.merchant-ref-lite .record-item,
body.merchant-ref-lite .order-item {
  border-bottom: 1px solid #edf1f8 !important;
}

body.merchant-ref-lite .order-item {
  padding: 18px !important;
  margin-bottom: 10px !important;
  border: 1px solid #edf1f8 !important;
  border-radius: 12px !important;
  background: #fff !important;
}

body.merchant-ref-lite .table-container {
  border: 1px solid #edf1f8 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

body.merchant-ref-lite .data-table th,
body.merchant-ref-lite table th {
  color: #7b8196 !important;
  background: #f8faff !important;
}

body.merchant-ref-lite .data-table td,
body.merchant-ref-lite table td {
  color: var(--merchant123-text) !important;
}

body.merchant-ref-lite .back-btn,
body.merchant-ref-lite .withdraw-btn,
body.merchant-ref-lite .submit-btn,
body.merchant-ref-lite .btn,
body.merchant-ref-lite .modal-btn,
body.merchant-ref-lite .empty-action,
body.merchant-ref-lite .stat-action {
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 16px !important;
  border: 1px solid #e4e6ef !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #3c3f52 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

body.merchant-ref-lite .btn-primary,
body.merchant-ref-lite .withdraw-btn,
body.merchant-ref-lite .submit-btn,
body.merchant-ref-lite .stat-action.btn-primary {
  border-color: var(--merchant123-primary) !important;
  background: var(--merchant123-primary) !important;
  color: #fff !important;
}

body.merchant-ref-lite .btn-primary:hover,
body.merchant-ref-lite .withdraw-btn:hover,
body.merchant-ref-lite .submit-btn:hover,
body.merchant-ref-lite .stat-action.btn-primary:hover {
  border-color: var(--merchant123-primary-hover) !important;
  background: var(--merchant123-primary-hover) !important;
  color: #fff !important;
}

body.merchant-ref-lite input,
body.merchant-ref-lite select,
body.merchant-ref-lite textarea,
body.merchant-ref-lite .form-input,
body.merchant-ref-lite .filter-select {
  border: 1px solid #dfe4ee !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--merchant123-text) !important;
  box-shadow: none !important;
}

body.merchant-ref-lite input:focus,
body.merchant-ref-lite select:focus,
body.merchant-ref-lite textarea:focus,
body.merchant-ref-lite .form-input:focus {
  border-color: var(--merchant123-primary) !important;
  box-shadow: 0 0 0 3px rgba(89, 125, 252, 0.12) !important;
}

body.merchant-ref-lite .modal-overlay {
  background: rgba(27, 31, 53, 0.42) !important;
  backdrop-filter: blur(3px) !important;
}

body.merchant-ref-lite .modal,
body.merchant-ref-lite .modal-container {
  border: 0 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 24px 64px rgba(31, 42, 68, 0.18) !important;
}

@media (max-width: 1180px) {
  body.merchant-ref-lite {
    padding-left: 214px !important;
  }

  body.merchant-ref-lite > .merchant-ref-sidebar,
  body.merchant-ref-lite .merchant-123-sidebar {
    width: 182px !important;
    min-width: 182px !important;
  }

  body.merchant-ref-lite .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  body.merchant-ref-lite {
    padding: 76px 12px 18px !important;
  }

  body.merchant-ref-lite.merchant-user-center {
    padding: 0 !important;
  }

  body.merchant-ref-lite .merchant-123-topbar,
  body.merchant-ref-lite > .merchant-ref-topbar,
  body.merchant-ref-lite.merchant-user-center .merchant-ref-topbar {
    height: auto !important;
    min-height: 64px !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }

  body.merchant-ref-lite .merchant-ref-top-menu {
    display: none !important;
  }

  body.merchant-ref-lite .merchant-ref-actions a span,
  body.merchant-ref-lite .merchant-ref-user > span:nth-child(2) {
    display: none !important;
  }

  body.merchant-ref-lite > .merchant-ref-sidebar,
  body.merchant-ref-lite .merchant-123-sidebar {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 0 12px !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  body.merchant-ref-lite .merchant-ref-side-logo,
  body.merchant-ref-lite .merchant-ref-space-card {
    display: none !important;
  }

  body.merchant-ref-lite .merchant-ref-nav-list {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 82px !important;
    gap: 6px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
  }

  body.merchant-ref-lite .merchant-ref-nav-item,
  body.merchant-ref-lite .merchant-nav-item.merchant-ref-nav-item {
    height: 52px !important;
    width: 82px !important;
    min-width: 82px !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  body.merchant-ref-lite .merchant-ref-nav-item span,
  body.merchant-ref-lite .merchant-nav-item.merchant-ref-nav-item span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.merchant-ref-lite #app > .merchant-ref-content,
  body.merchant-ref-lite #app > .container {
    padding: 0 !important;
  }

  body.merchant-ref-lite.merchant-user-center .container.merchant-ref-shell {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }

  body.merchant-ref-lite.merchant-user-center .merchant-ref-sidebar {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  body.merchant-ref-lite.merchant-user-center .merchant-ref-main {
    grid-template-columns: 1fr !important;
  }

  body.merchant-ref-lite .stats-grid {
    grid-template-columns: 1fr !important;
  }

  body.merchant-ref-lite .merchant-page-head,
  body.merchant-ref-lite .page-header {
    align-items: flex-start !important;
    flex-direction: column !important;
    padding: 18px !important;
  }
}

@media (max-width: 1180px) {
  body.jing-front-page .js-hero-inner {
    grid-template-columns: 460px minmax(0, 1fr) !important;
    gap: 32px !important;
  }

  body.jing-front-page .js-hero-visual {
    transform: scale(0.9) !important;
    transform-origin: center right !important;
  }

  body.merchant-surface .merchant-main {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 980px) {
  body.jing-front-page .js-header-inner {
    width: min(100% - 32px, 1192px) !important;
    grid-template-columns: auto auto !important;
    grid-template-rows: 58px 42px !important;
    grid-template-areas:
      "brand action"
      "menu menu" !important;
  }

  body.jing-front-page .js-brand {
    grid-area: brand !important;
  }

  body.jing-front-page .js-merchant-btn {
    grid-area: action !important;
    justify-self: end !important;
  }

  body.jing-front-page .js-menu {
    grid-area: menu !important;
    grid-column: 1 / -1 !important;
    height: 44px !important;
    justify-content: flex-start !important;
    gap: 24px !important;
    overflow-x: auto !important;
  }

  body.jing-front-page .js-site-header {
    height: 108px !important;
  }

  body.jing-front-page .js-header-inner {
    height: 108px !important;
  }

  body.jing-front-page .js-hero,
  body.jing-front-page .js-hero-inner {
    min-height: 0 !important;
  }

  body.jing-front-page .js-hero-inner {
    width: min(100% - 32px, 760px) !important;
    padding: 58px 0 72px !important;
    grid-template-columns: 1fr !important;
  }

  body.jing-front-page .js-hero-copy {
    padding-top: 0 !important;
  }

  body.jing-front-page .js-hero-visual {
    height: 430px !important;
    transform: scale(0.86) !important;
    transform-origin: top left !important;
  }

  body.jing-front-page .js-category-board {
    grid-template-columns: 1fr !important;
  }

  body.jing-front-page .js-category-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body.jing-front-page .js-category-tabs button {
    height: 64px !important;
    padding: 0 12px !important;
    justify-content: center !important;
    font-size: 14px !important;
  }

  body.jing-front-page .js-feature-grid,
  body.jing-front-page .js-news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.vab-public-page.vab-login-page:not(.vab-admin-page) .main-content {
    grid-template-columns: 1fr !important;
  }

  body.vab-public-page.vab-login-page:not(.vab-admin-page) .title-section {
    border-radius: 8px 8px 0 0 !important;
    padding: 48px !important;
  }

  body.vab-public-page.vab-login-page:not(.vab-admin-page) .login-card {
    border-radius: 0 0 8px 8px !important;
    padding: 52px 24px !important;
  }

  body.vab-public-page.vab-login-page:not(.vab-admin-page).auth-register-mode .title-section {
    padding: 48px !important;
  }

  body.vab-public-page.vab-login-page:not(.vab-admin-page).auth-register-mode .login-card {
    padding: 42px 24px !important;
  }

  body.vab-public-page.vab-login-page:not(.vab-admin-page).auth-register-mode .form-section {
    width: min(100%, 520px) !important;
  }

  body.vab-public-page.vab-login-page:not(.vab-admin-page) .login-card::before {
    display: none !important;
  }
}

@media (max-width: 700px) {
  body.jing-front-page .js-header-inner {
    width: min(100% - 24px, 1192px) !important;
    gap: 10px !important;
  }

  body.jing-front-page .js-brand-copy strong {
    font-size: 18px !important;
  }

  body.jing-front-page .js-merchant-btn {
    width: 124px !important;
  }

  body.jing-front-page .js-menu {
    gap: 18px !important;
    font-size: 14px !important;
    scrollbar-width: none !important;
  }

  body.jing-front-page .js-menu::-webkit-scrollbar {
    display: none !important;
  }

  body.jing-front-page .js-hero-inner {
    width: min(100% - 24px, 480px) !important;
    padding: 42px 0 54px !important;
  }

  body.jing-front-page .js-hero-copy h1 {
    font-size: 30px !important;
    line-height: 1.45 !important;
  }

  body.jing-front-page .js-hero-copy p {
    font-size: 14px !important;
  }

  body.jing-front-page .js-hero-visual {
    width: min(100%, 360px) !important;
    height: 432px !important;
    margin: 22px auto 0 !important;
    transform: none !important;
  }

  body.jing-front-page .js-chart-card {
    top: 0 !important;
    left: 50% !important;
    width: 210px !important;
    height: 180px !important;
    transform: translateX(-50%) !important;
  }

  body.jing-front-page .js-shop-card {
    top: 84px !important;
    right: auto !important;
    left: 50% !important;
    width: 252px !important;
    height: 96px !important;
    transform: translateX(-50%) !important;
  }

  body.jing-front-page .js-account-card {
    top: 246px !important;
    left: 6px !important;
    width: 160px !important;
    height: 108px !important;
    padding: 16px 18px !important;
    z-index: 4 !important;
  }

  body.jing-front-page .js-account-card span {
    font-size: 14px !important;
  }

  body.jing-front-page .js-account-card strong {
    font-size: 0 !important;
  }

  body.jing-front-page .js-account-card strong::after {
    content: "¥ 888" !important;
    font-size: 25px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }

  body.jing-front-page .js-account-card > i {
    width: 56px !important;
    height: 22px !important;
    margin-top: 12px !important;
  }

  body.jing-front-page .js-account-card > i::before {
    width: 30px !important;
    height: 5px !important;
    margin: 8px auto !important;
  }

  body.jing-front-page .js-goods-card {
    top: 204px !important;
    right: auto !important;
    left: 84px !important;
    width: 268px !important;
    height: 228px !important;
    padding: 16px 18px !important;
    z-index: 2 !important;
  }

  body.jing-front-page .js-goods-row {
    height: 58px !important;
    grid-template-columns: 38px minmax(0, 1fr) 42px 6px !important;
    gap: 10px !important;
  }

  body.jing-front-page .js-goods-row b {
    width: 38px !important;
    height: 38px !important;
  }

  body.jing-front-page .js-goods-row span:nth-of-type(1) {
    width: 90px !important;
  }

  body.jing-front-page .js-goods-row span:nth-of-type(2) {
    width: 36px !important;
  }

  body.jing-front-page .js-note-card {
    top: 166px !important;
    bottom: auto !important;
    left: 50% !important;
    width: 240px !important;
    height: 96px !important;
    padding: 25px 20px 18px 64px !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;
  }

  body.jing-front-page .js-section {
    padding: 54px 16px !important;
  }

  body.jing-front-page .js-section-head {
    margin-bottom: 30px !important;
  }

  body.jing-front-page .js-section-head h2 {
    font-size: 26px !important;
  }

  body.jing-front-page .js-category-tabs,
  body.jing-front-page .js-case-grid,
  body.jing-front-page .js-feature-grid,
  body.jing-front-page .js-step-grid,
  body.jing-front-page .js-news-grid,
  body.jing-front-page .js-footer-inner {
    grid-template-columns: 1fr !important;
  }

  body.jing-front-page .js-category-tabs button {
    justify-content: flex-start !important;
    padding: 0 18px !important;
  }

  body.jing-front-page .js-case-grid {
    padding: 18px !important;
  }

  body.jing-front-page .js-footer-inner,
  body.jing-front-page .js-footer-bottom {
    width: min(100% - 32px, 1192px) !important;
  }

  body.vab-public-page.vab-login-page:not(.vab-admin-page) .header,
  body.vab-public-page.vab-login-page:not(.vab-admin-page) .main-content {
    width: min(100% - 24px, 1370px) !important;
  }

  body.vab-public-page.vab-login-page:not(.vab-admin-page) .title-section {
    padding: 32px 24px !important;
  }

  body.vab-public-page.vab-login-page:not(.vab-admin-page) .title-section::before {
    font-size: 24px !important;
  }

  body.vab-public-page.vab-login-page:not(.vab-admin-page) .main-title {
    font-size: 20px !important;
  }

  body.vab-public-page.vab-login-page:not(.vab-admin-page) .form-section {
    width: 100% !important;
    padding: 28px 22px !important;
  }

  body.vab-public-page.vab-login-page:not(.vab-admin-page) .auth-panel-head {
    gap: 12px !important;
  }

  body.vab-public-page.vab-login-page:not(.vab-admin-page) .form-subtitle {
    font-size: 12px !important;
  }

  body.vab-public-page.vab-login-page:not(.vab-admin-page) .register-benefits {
    grid-template-columns: 1fr !important;
  }

  body.vab-public-page.vab-login-page:not(.vab-admin-page) .register-benefits span {
    justify-content: flex-start !important;
  }

  body.vab-public-page.vab-login-page:not(.vab-admin-page) .code-group {
    grid-template-columns: minmax(0, 1fr) 110px !important;
  }

  body.merchant-surface .merchant-console-layout {
    grid-template-columns: 1fr !important;
    padding: 0 12px !important;
  }

  body.merchant-surface .merchant-aside {
    min-height: 0 !important;
  }

  body.merchant-surface .merchant-nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 123pan-style cloud file workspace */
body.pan123-workspace {
  --pan123-primary: #1677ff;
  --pan123-primary-hover: #0958d9;
  --pan123-primary-soft: #eaf3ff;
  --pan123-primary-softer: #f4f8ff;
  --pan123-bg: #f5f7fb;
  --pan123-surface: #ffffff;
  --pan123-border: #e7edf6;
  --pan123-border-strong: #d8e2ef;
  --pan123-text: #1f2937;
  --pan123-muted: #667085;
  --pan123-subtle: #98a2b3;
  --pan123-green: #12b76a;
  --pan123-orange: #f59e0b;
  --pan123-red: #ef4444;
  min-height: 100vh !important;
  color: var(--pan123-text) !important;
  background: var(--pan123-bg) !important;
}

body.pan123-workspace,
body.pan123-workspace button,
body.pan123-workspace input,
body.pan123-workspace textarea,
body.pan123-workspace select {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

body.pan123-workspace #app {
  background: var(--pan123-bg) !important;
}

body.pan123-workspace .top-banner {
  height: 42px !important;
  background: #f3f7ff !important;
  border-bottom: 1px solid var(--pan123-border) !important;
  box-shadow: none !important;
}

body.pan123-workspace .banner-icon,
body.pan123-workspace .banner-dot.active {
  background: var(--pan123-primary) !important;
}

body.pan123-workspace .top-header {
  height: 60px !important;
  padding: 0 24px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid var(--pan123-border) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(140%) blur(8px) !important;
}

body.pan123-workspace .header-left,
body.pan123-workspace .header-right {
  gap: 12px !important;
}

body.pan123-workspace .logo {
  gap: 10px !important;
  color: #172033 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  transform: none !important;
}

body.pan123-workspace .logo-box {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: var(--pan123-primary) !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
}

body.pan123-workspace .warning-bar {
  height: 32px !important;
  padding: 0 12px !important;
  color: #b45309 !important;
  background: #fff7e6 !important;
  border: 1px solid #ffe1a3 !important;
  border-radius: 6px !important;
}

body.pan123-workspace .btn-hot,
body.pan123-workspace .btn-vip,
body.pan123-workspace .btn-outline {
  height: 32px !important;
  min-width: auto !important;
  padding: 0 14px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 13px !important;
}

body.pan123-workspace .btn-vip {
  background: #fff7ed !important;
  border: 1px solid #fed7aa !important;
  color: #c2410c !important;
}

body.pan123-workspace .btn-outline {
  background: #fff !important;
  border: 1px solid var(--pan123-border-strong) !important;
  color: var(--pan123-muted) !important;
}

body.pan123-workspace .header-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 7px !important;
  color: var(--pan123-muted) !important;
  background: transparent !important;
}

body.pan123-workspace .header-icon:hover,
body.pan123-workspace .btn-outline:hover {
  color: var(--pan123-primary) !important;
  background: var(--pan123-primary-soft) !important;
  border-color: rgba(22, 119, 255, 0.28) !important;
}

body.pan123-workspace .avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid #d5e4fb !important;
  background: #f2f6ff !important;
  box-shadow: none !important;
}

body.pan123-workspace .main-wrap {
  background: var(--pan123-bg) !important;
}

body.pan123-workspace .icon-sidebar,
body.pan123-workspace .menu-sidebar {
  background: var(--pan123-surface) !important;
  border-right: 1px solid var(--pan123-border) !important;
  box-shadow: none !important;
}

body.pan123-workspace .icon-sidebar {
  width: 78px !important;
  padding: 12px 8px !important;
}

body.pan123-workspace .menu-sidebar {
  width: 204px !important;
  padding-top: 8px !important;
}

body.pan123-workspace .icon-item,
body.pan123-workspace .menu-item,
body.pan123-workspace .sub-menu-item {
  border-radius: 7px !important;
  color: var(--pan123-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body.pan123-workspace .icon-item {
  width: 62px !important;
  min-height: 58px !important;
  margin: 2px 0 6px !important;
  padding: 9px 4px !important;
  gap: 5px !important;
  font-size: 11px !important;
}

body.pan123-workspace .icon-item svg {
  width: 22px !important;
  height: 22px !important;
}

body.pan123-workspace .menu-item {
  min-height: 40px !important;
  margin: 3px 10px !important;
  padding: 0 12px !important;
  gap: 10px !important;
  font-size: 14px !important;
  border-left: 0 !important;
}

body.pan123-workspace .menu-item svg {
  width: 17px !important;
  height: 17px !important;
  fill: currentColor !important;
  transform: none !important;
}

body.pan123-workspace .icon-item:hover,
body.pan123-workspace .menu-item:hover,
body.pan123-workspace .sub-menu-item:hover,
body.pan123-workspace .icon-item.active,
body.pan123-workspace .menu-item.active,
body.pan123-workspace .sub-menu-item.active {
  color: var(--pan123-primary) !important;
  background: var(--pan123-primary-soft) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.pan123-workspace .icon-item.active,
body.pan123-workspace .menu-item.active {
  font-weight: 600 !important;
}

body.pan123-workspace .sub-menu {
  padding-left: 28px !important;
  background: transparent !important;
}

body.pan123-workspace .storage-box {
  margin: 12px !important;
  padding: 14px !important;
  border: 1px solid var(--pan123-border) !important;
  border-radius: 8px !important;
  background: #fbfdff !important;
  box-shadow: none !important;
}

body.pan123-workspace .storage-header,
body.pan123-workspace .storage-text {
  color: var(--pan123-muted) !important;
}

body.pan123-workspace .storage-header a {
  color: var(--pan123-primary) !important;
}

body.pan123-workspace .storage-bar {
  height: 6px !important;
  background: #eef2f7 !important;
}

body.pan123-workspace .storage-fill {
  background: var(--pan123-primary) !important;
}

body.pan123-workspace .main-content {
  margin: 0 !important;
  border-radius: 0 !important;
  background: var(--pan123-surface) !important;
  box-shadow: none !important;
  border: 0 !important;
}

body.pan123-workspace .mobile-back-btn,
body.pan123-workspace .mobile-func-bar {
  display: none !important;
}

body.pan123-workspace .toolbar {
  min-height: 64px !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pan123-border) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.pan123-workspace .toolbar-left,
body.pan123-workspace .toolbar-right {
  gap: 10px !important;
}

body.pan123-workspace .btn-upload,
body.pan123-workspace .btn-normal,
body.pan123-workspace .btn-primary,
body.pan123-workspace .btn-default,
body.pan123-workspace .batch-btn,
body.pan123-workspace .share-btn,
body.pan123-workspace .tool-btn,
body.pan123-workspace .view-btn {
  min-height: 34px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transform: none !important;
}

body.pan123-workspace .btn-upload,
body.pan123-workspace .btn-primary,
body.pan123-workspace .batch-btn.primary,
body.pan123-workspace .share-btn.confirm {
  color: #fff !important;
  border: 1px solid var(--pan123-primary) !important;
  background: var(--pan123-primary) !important;
}

body.pan123-workspace .btn-upload:hover,
body.pan123-workspace .btn-primary:hover,
body.pan123-workspace .batch-btn.primary:hover,
body.pan123-workspace .share-btn.confirm:hover {
  background: var(--pan123-primary-hover) !important;
  border-color: var(--pan123-primary-hover) !important;
  box-shadow: none !important;
}

body.pan123-workspace .btn-upload::before,
body.pan123-workspace .btn-primary::before,
body.pan123-workspace .btn-normal::before,
body.pan123-workspace .btn-default::before {
  display: none !important;
}

body.pan123-workspace .btn-normal,
body.pan123-workspace .btn-default,
body.pan123-workspace .share-btn.cancel,
body.pan123-workspace .batch-btn {
  color: var(--pan123-text) !important;
  border: 1px solid var(--pan123-border-strong) !important;
  background: #fff !important;
}

body.pan123-workspace .btn-normal:hover,
body.pan123-workspace .btn-default:hover,
body.pan123-workspace .share-btn.cancel:hover,
body.pan123-workspace .batch-btn:hover {
  color: var(--pan123-primary) !important;
  border-color: rgba(22, 119, 255, 0.38) !important;
  background: var(--pan123-primary-softer) !important;
}

body.pan123-workspace .search-box {
  width: min(300px, 24vw) !important;
}

body.pan123-workspace .search-box input {
  height: 36px !important;
  padding: 0 14px 0 36px !important;
  color: var(--pan123-text) !important;
  border: 1px solid var(--pan123-border) !important;
  border-radius: 18px !important;
  background: #f7f9fc !important;
  box-shadow: none !important;
}

body.pan123-workspace .search-box input:focus {
  border-color: var(--pan123-primary) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.10) !important;
}

body.pan123-workspace .tool-btn {
  width: 34px !important;
  height: 34px !important;
  color: var(--pan123-muted) !important;
  background: transparent !important;
}

body.pan123-workspace .tool-btn:hover,
body.pan123-workspace .view-btn:hover:not(.active) {
  color: var(--pan123-primary) !important;
  background: var(--pan123-primary-soft) !important;
}

body.pan123-workspace .tool-btn.syncing {
  color: var(--pan123-primary) !important;
  background: var(--pan123-primary-soft) !important;
  cursor: wait !important;
}

body.pan123-workspace .tool-btn.syncing svg {
  animation: fileRefreshSpin 0.8s linear infinite !important;
  transform-origin: 50% 50% !important;
}

body.pan123-workspace .view-switch {
  height: 34px !important;
  border: 1px solid var(--pan123-border-strong) !important;
  border-radius: 7px !important;
  background: #fff !important;
}

body.pan123-workspace .view-btn {
  width: 36px !important;
  height: 32px !important;
  color: var(--pan123-muted) !important;
}

body.pan123-workspace .view-btn.active {
  color: var(--pan123-primary) !important;
  background: var(--pan123-primary-soft) !important;
}

body.pan123-workspace .file-area {
  background: #fff !important;
}

body.pan123-workspace .breadcrumb {
  min-height: 42px !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--pan123-muted) !important;
  border-bottom: 1px solid var(--pan123-border) !important;
  background: #fff !important;
}

body.pan123-workspace .batch-bar,
body.pan123-workspace .share-batch-bar {
  margin: 12px 24px !important;
  padding: 10px 12px !important;
  border: 1px solid #cfe3ff !important;
  border-radius: 8px !important;
  background: #f0f7ff !important;
  box-shadow: none !important;
}

body.pan123-workspace .batch-info,
body.pan123-workspace .share-selection-info {
  color: var(--pan123-primary) !important;
}

body.pan123-workspace .file-header {
  min-height: 44px !important;
  padding: 0 24px !important;
  grid-template-columns: 44px minmax(260px, 1fr) 228px 168px 132px !important;
  gap: 12px !important;
  color: var(--pan123-muted) !important;
  background: #f8fafc !important;
  border-bottom: 1px solid var(--pan123-border) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.pan123-workspace .file-header .sortable {
  padding: 0 !important;
  color: inherit !important;
  background: transparent !important;
}

body.pan123-workspace .file-header .sortable:hover {
  color: var(--pan123-primary) !important;
}

body.pan123-workspace .file-row {
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  grid-template-columns: 44px minmax(260px, 1fr) 228px 168px 132px !important;
  gap: 12px !important;
  color: var(--pan123-text) !important;
  border: 0 !important;
  border-bottom: 1px solid #f0f3f8 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}

body.pan123-workspace .file-row:hover,
body.pan123-workspace .file-row.ctx-open,
body.pan123-workspace .file-row.selected {
  background: #f5f9ff !important;
  border-left: 0 !important;
  box-shadow: inset 3px 0 0 var(--pan123-primary) !important;
  transform: none !important;
}

body.pan123-workspace .file-checkbox,
body.pan123-workspace .share-checkbox {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--pan123-primary) !important;
}

body.pan123-workspace .file-name-col {
  gap: 12px !important;
}

body.pan123-workspace .file-row.has-row-actions .file-name-col {
  padding-right: 0 !important;
}

body.pan123-workspace .file-row.has-row-actions .file-name-stack {
  max-width: 100% !important;
  min-width: 0 !important;
}

body.pan123-workspace .file-name {
  color: var(--pan123-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

body.pan123-workspace .file-name:hover {
  color: var(--pan123-primary) !important;
}

body.pan123-workspace .file-time,
body.pan123-workspace .file-size {
  opacity: 1 !important;
  color: var(--pan123-muted) !important;
  font-size: 13px !important;
  text-align: left !important;
}

body.pan123-workspace .file-size {
  text-align: right !important;
  padding-right: 0 !important;
}

body.pan123-workspace .file-actions {
  grid-column: 3 !important;
  grid-row: 1 !important;
  position: static !important;
  right: auto !important;
  top: auto !important;
  justify-self: center !important;
  width: 204px !important;
  gap: 4px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
}

body.pan123-workspace .file-action-btn,
body.pan123-workspace .action-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 6px !important;
  color: var(--pan123-muted) !important;
  background: transparent !important;
  transform: none !important;
}

body.pan123-workspace .file-action-btn:hover,
body.pan123-workspace .action-icon:hover {
  color: var(--pan123-primary) !important;
  background: var(--pan123-primary-soft) !important;
}

/* My shares row action rail: final scoped override after broad .action-icon workspace rules. */
body.pan123-workspace .share-table tbody tr:hover {
  background: #f7faff !important;
}

body.pan123-workspace .share-table tbody tr:hover td,
body.pan123-workspace .share-file-cell {
  overflow: visible !important;
}

body.pan123-workspace .share-row-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: 14px !important;
  padding: 3px !important;
  border: 1px solid rgba(219, 229, 242, 0.88) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(6px) !important;
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

body.pan123-workspace .share-row-actions.visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
}

body.pan123-workspace .share-row-actions .share-action-icon {
  position: relative !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #64748b !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  outline: none !important;
  transform: none !important;
  transition: color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
}

body.pan123-workspace .share-row-actions .share-action-icon:hover,
body.pan123-workspace .share-row-actions .share-action-icon:focus-visible {
  color: #2563eb !important;
  background: #eef5ff !important;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.12) !important;
  transform: translateY(-1px) !important;
}

body.pan123-workspace .share-row-actions .share-action-icon.is-danger:hover,
body.pan123-workspace .share-row-actions .share-action-icon.is-danger:focus-visible {
  color: #e11d48 !important;
  background: #fff1f2 !important;
  box-shadow: 0 6px 14px rgba(225, 29, 72, 0.10) !important;
}

body.pan123-workspace .share-row-actions .share-action-icon svg {
  width: 15px !important;
  height: 15px !important;
  fill: currentColor !important;
}

body.pan123-workspace .share-row-actions .share-action-icon[data-tip]::before,
body.pan123-workspace .share-row-actions .share-action-icon[data-tip]::after {
  content: none !important;
  display: none !important;
}

body.pan123-workspace .share-row-actions .share-action-icon[data-tip]:hover::before,
body.pan123-workspace .share-row-actions .share-action-icon[data-tip]:hover::after,
body.pan123-workspace .share-row-actions .share-action-icon[data-tip]:focus-visible::before,
body.pan123-workspace .share-row-actions .share-action-icon[data-tip]:focus-visible::after {
  content: none !important;
  display: none !important;
}

body.pan123-workspace .share-action-tooltip-portal {
  position: fixed !important;
  left: 0;
  top: 0;
  z-index: 100000 !important;
  max-width: min(220px, calc(100vw - 24px)) !important;
  padding: 7px 10px !important;
  border-radius: 7px !important;
  color: #fff !important;
  background: rgba(15, 23, 42, 0.94) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  transform: translate(0, -50%) !important;
}

body.pan123-workspace .share-action-tooltip-portal.is-left {
  transform: translate(-100%, -50%) !important;
}

body.pan123-workspace .share-action-tooltip-portal::after {
  content: "" !important;
  position: absolute !important;
  left: -5px !important;
  top: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-right: 5px solid rgba(15, 23, 42, 0.94) !important;
  transform: translateY(-50%) !important;
}

body.pan123-workspace .share-action-tooltip-portal.is-left::after {
  left: auto !important;
  right: -5px !important;
  border-right: 0 !important;
  border-left: 5px solid rgba(15, 23, 42, 0.94) !important;
}

body.pan123-workspace .folder-icon::before {
  background: #ffd977 !important;
}

body.pan123-workspace .folder-icon::after {
  background: #ffc94d !important;
  box-shadow: none !important;
}

body.pan123-workspace .file-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: #f6f8fb !important;
  box-shadow: none !important;
}

body.pan123-workspace .file-icon svg {
  width: 28px !important;
  height: 28px !important;
}

body.pan123-workspace .file-thumbnail {
  border: 1px solid var(--pan123-border) !important;
  background: #f8fafc !important;
}

body.pan123-workspace .empty-state,
body.pan123-workspace .feature-empty,
body.pan123-workspace .traffic-record-empty,
body.pan123-workspace .vault-empty {
  margin: 24px !important;
  padding: 80px 20px !important;
  color: var(--pan123-muted) !important;
  border: 1px dashed #d8e2ef !important;
  border-radius: 8px !important;
  background: #fbfdff !important;
  box-shadow: none !important;
}

body.pan123-workspace .empty-folder::before {
  background: #ffd977 !important;
}

body.pan123-workspace .empty-folder::after {
  background: #ffc94d !important;
  box-shadow: 0 10px 24px rgba(245, 158, 11, 0.16) !important;
}

body.pan123-workspace .dropdown,
body.pan123-workspace .sort-menu,
body.pan123-workspace .user-menu,
body.pan123-workspace .notification-panel,
body.pan123-workspace .tools-center-popup,
body.pan123-workspace .context-menu,
body.pan123-workspace .modal-box,
body.pan123-workspace .share-box {
  border: 1px solid var(--pan123-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 16px 40px rgba(26, 43, 74, 0.12) !important;
}

body.pan123-workspace .dropdown-item,
body.pan123-workspace .ctx-item,
body.pan123-workspace .user-menu-item {
  border-radius: 6px !important;
}

body.pan123-workspace .dropdown-item:hover,
body.pan123-workspace .ctx-item:hover,
body.pan123-workspace .user-menu-item:hover {
  color: var(--pan123-primary) !important;
  background: var(--pan123-primary-soft) !important;
}

body.pan123-workspace .modal-mask,
body.pan123-workspace .share-modal,
body.pan123-workspace .pwd-modal-overlay,
body.pan123-workspace .notification-detail-modal {
  background: rgba(15, 23, 42, 0.36) !important;
  backdrop-filter: blur(3px) !important;
}

body.pan123-workspace .modal-head,
body.pan123-workspace .modal-foot,
body.pan123-workspace .share-header,
body.pan123-workspace .share-footer {
  border-color: var(--pan123-border) !important;
  background: #fff !important;
}

body.pan123-workspace .input-text,
body.pan123-workspace .share-input,
body.pan123-workspace .modal-input {
  border: 1px solid var(--pan123-border-strong) !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.pan123-workspace .input-text:focus,
body.pan123-workspace .share-input:focus,
body.pan123-workspace .modal-input:focus {
  border-color: var(--pan123-primary) !important;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.10) !important;
}

body.pan123-workspace .my-share-container,
body.pan123-workspace .traffic-container,
body.pan123-workspace .vault-unlocked-fullscreen {
  background: #fff !important;
}

body.pan123-workspace .share-table-container,
body.pan123-workspace .traffic-section,
body.pan123-workspace .config-card,
body.pan123-workspace .stat-card,
body.pan123-workspace .vault-toolbar,
body.pan123-workspace .vault-breadcrumb {
  border-color: var(--pan123-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.pan123-workspace .share-table th {
  color: var(--pan123-muted) !important;
  background: #f8fafc !important;
  border-color: var(--pan123-border) !important;
}

body.pan123-workspace .share-table td {
  border-color: #f0f3f8 !important;
}

body.pan123-workspace .share-table tbody tr:hover {
  background: #f5f9ff !important;
}

body.pan123-workspace .file-area [style*="grid-template-columns:repeat(auto-fill"] {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important;
  gap: 18px !important;
  padding: 24px !important;
}

body.pan123-workspace .file-area [style*="background:#fff;border:2px solid"] {
  border: 1px solid var(--pan123-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.pan123-workspace .file-area [style*="background:#fff;border:2px solid"]:hover {
  border-color: #bfd9ff !important;
  background: #f8fbff !important;
}

body.pan123-workspace .toast {
  border: 1px solid var(--pan123-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 14px 32px rgba(26, 43, 74, 0.14) !important;
}

body.pan123-workspace .fab-upload {
  background: var(--pan123-primary) !important;
  box-shadow: 0 10px 24px rgba(22, 119, 255, 0.22) !important;
}

/* Closer 123pan desktop cloud shell, matching the logged-in reference. */
body.pan123-workspace {
  --pan123-primary: #3b78ff;
  --pan123-primary-hover: #2863e8;
  --pan123-primary-soft: #eef5ff;
  --pan123-primary-softer: #f7fbff;
  --pan123-bg: #f5f8fc;
  --pan123-surface: #ffffff;
  --pan123-side-bg: #f8fbfe;
  --pan123-border: #edf1f7;
  --pan123-border-strong: #e1e8f2;
  --pan123-text: #172033;
  --pan123-muted: #737b8f;
  --pan123-subtle: #a7afc0;
  background: var(--pan123-bg) !important;
}

body.pan123-workspace #app {
  background:
    linear-gradient(180deg, #fff 0, #fff 104px, var(--pan123-bg) 104px, var(--pan123-bg) 100%) !important;
}

body.pan123-workspace .top-banner {
  height: 64px !important;
  background:
    radial-gradient(circle at 34% 50%, rgba(255, 255, 255, 0.34) 0 58px, transparent 59px),
    linear-gradient(90deg, #ff4b54 0%, #ff6b5f 42%, #ff9ca0 72%, #ffd5d9 100%) !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.pan123-workspace .banner-slide {
  background: transparent !important;
}

body.pan123-workspace .banner-icon {
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

body.pan123-workspace .banner-title {
  font-size: 19px !important;
  font-weight: 900 !important;
  color: #fff7d4 !important;
  text-shadow: 0 2px 0 rgba(218, 51, 36, 0.28) !important;
}

body.pan123-workspace .banner-subtitle {
  padding: 3px 10px !important;
  border-radius: 999px !important;
  color: #bd270a !important;
  background: #fff3a7 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.pan123-workspace .banner-close,
body.pan123-workspace .banner-dots {
  display: none !important;
}

body.pan123-workspace .top-header {
  height: 90px !important;
  padding: 0 26px !important;
  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.pan123-workspace .logo {
  min-width: 124px !important;
  color: #3b78ff !important;
  font-size: 24px !important;
  font-weight: 850 !important;
  gap: 8px !important;
}

body.pan123-workspace .logo-box {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: #fff !important;
  background: #3b78ff !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  box-shadow: none !important;
  position: relative !important;
}

body.pan123-workspace .logo-box::before {
  content: "";
  position: absolute;
  inset: -7px -5px;
  z-index: -1;
  border-radius: 9px;
  background: #3b78ff;
}

body.pan123-workspace .warning-bar {
  height: 40px !important;
  margin-left: 18px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 22px !important;
  color: #a66624 !important;
  background: #fff3df !important;
  font-size: 14px !important;
}

body.pan123-workspace .warning-bar::before {
  content: "";
  width: 0 !important;
  height: 0 !important;
}

body.pan123-workspace .warning-bar .close-btn {
  color: #b37737 !important;
  font-size: 20px !important;
}

body.pan123-workspace .header-right {
  gap: 16px !important;
}

body.pan123-workspace .btn-vip {
  height: 40px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(90deg, #ffe7a9 0%, #ffbd46 100%) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

body.pan123-workspace .btn-outline {
  height: 40px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  color: #397cff !important;
  border: 1px solid #d4e3ff !important;
  background: #f7fbff !important;
  font-size: 15px !important;
}

body.pan123-workspace .header-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  color: #111827 !important;
  background: transparent !important;
}

body.pan123-workspace .header-icon:hover {
  color: #3b78ff !important;
  background: #f1f6ff !important;
}

body.pan123-workspace .avatar {
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  background: radial-gradient(circle at 50% 30%, #f8fbff 0 35%, #d8e8ff 36% 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(59, 120, 255, 0.08) !important;
}

body.pan123-workspace .header-right .header-action {
  overflow: visible !important;
  transform: none !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

body.pan123-workspace .header-right .header-action:hover {
  color: #2563eb !important;
  background: #f4f8ff !important;
  border-color: rgba(37, 99, 235, .22) !important;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.10) !important;
  transform: translateY(-1px) !important;
}

body.pan123-workspace .header-right .referral-entry {
  position: relative !important;
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.pan123-workspace .header-right .btn-outline.header-action::after {
  content: none !important;
  display: none !important;
}

body.pan123-workspace .header-right .header-action-badge {
  position: absolute !important;
  top: -13px !important;
  right: -5px !important;
  min-width: 36px !important;
  height: 21px !important;
  padding: 0 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  background: #ff8a45 !important;
  border-radius: 999px !important;
  box-shadow: 0 5px 10px rgba(255, 138, 69, .16) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

body.pan123-workspace .header-right .header-action[data-tip]::before {
  content: attr(data-tip) !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(100% + 10px) !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: 180px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 7px 10px !important;
  color: #fff !important;
  background: #1f2937 !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .16) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 4px) !important;
  z-index: 1200 !important;
}

body.pan123-workspace .header-right .header-action[data-tip]::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(100% + 5px) !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 5px solid transparent !important;
  border-top-color: #1f2937 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 4px) !important;
  z-index: 1200 !important;
}

body.pan123-workspace .header-right .header-action[data-tip]:hover::before,
body.pan123-workspace .header-right .header-action[data-tip]:hover::after {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

body.pan123-workspace.vab-public-page .header-right .progress-btn.header-icon,
body.pan123-workspace .header-right .progress-btn.header-icon {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
}

body.pan123-workspace.vab-public-page .header-right .progress-btn.header-icon svg,
body.pan123-workspace .header-right .progress-btn.header-icon svg {
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
  min-height: 21px !important;
  padding: 0 !important;
  color: currentColor !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body.pan123-workspace.vab-public-page .header-right .progress-btn.header-icon::after,
body.pan123-workspace .header-right .progress-btn.header-icon::after {
  content: none !important;
}

body.pan123-workspace.vab-public-page .header-right .notification-btn.header-icon,
body.pan123-workspace.vab-public-page .header-right .support-btn.header-icon,
body.pan123-workspace.vab-public-page .header-right .header-icon[title="帮助"],
body.pan123-workspace .header-right .notification-btn.header-icon,
body.pan123-workspace .header-right .support-btn.header-icon {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
}

body.pan123-workspace.vab-public-page .header-right .notification-btn.header-icon svg,
body.pan123-workspace.vab-public-page .header-right .support-btn.header-icon svg,
body.pan123-workspace.vab-public-page .header-right .header-icon[title="帮助"] svg,
body.pan123-workspace .header-right .notification-btn.header-icon svg,
body.pan123-workspace .header-right .support-btn.header-icon svg {
  width: 21px !important;
  height: 21px !important;
}

body.pan123-workspace .main-wrap {
  min-height: 0 !important;
  gap: 0 !important;
  padding: 0 14px 0 0 !important;
  background: var(--pan123-bg) !important;
}

body.pan123-workspace .icon-sidebar {
  width: 102px !important;
  padding: 24px 12px 18px !important;
  border: 0 !important;
  background: #fff !important;
}

body.pan123-workspace .icon-item {
  width: 78px !important;
  min-height: 82px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border-radius: 28px !important;
  gap: 8px !important;
  color: #333b4f !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
}

body.pan123-workspace .icon-item svg {
  width: 28px !important;
  height: 28px !important;
}

body.pan123-workspace .icon-item.active {
  color: #3b78ff !important;
  background: transparent !important;
}

body.pan123-workspace .icon-item.active svg {
  padding: 11px !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  color: #fff !important;
  fill: currentColor !important;
  background: linear-gradient(180deg, #4f8dff 0%, #3170ff 100%) !important;
  box-shadow: 0 10px 22px rgba(49, 112, 255, 0.26) !important;
}

body.pan123-workspace .icon-spacer {
  flex: 1 1 auto !important;
}

body.pan123-workspace .icon-sidebar > .icon-item:nth-of-type(4) {
  display: none !important;
}

body.pan123-workspace .menu-sidebar {
  width: 288px !important;
  margin: 0 !important;
  padding: 18px 18px 18px !important;
  border: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  background: linear-gradient(180deg, #eef8ff 0%, #f9fcff 54%, #f4f9ff 100%) !important;
  box-shadow: none !important;
}

body.pan123-workspace .menu-section {
  padding: 0 !important;
}

body.pan123-workspace .menu-item {
  min-height: 56px !important;
  margin: 0 0 6px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  color: #222b40 !important;
  font-size: 16px !important;
  gap: 12px !important;
}

body.pan123-workspace .menu-item svg {
  width: 22px !important;
  height: 22px !important;
  color: #31394c !important;
}

body.pan123-workspace .menu-item.active {
  color: #182032 !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(62, 102, 145, 0.07) !important;
  font-weight: 800 !important;
}

body.pan123-workspace .menu-item.active svg {
  color: #3b4254 !important;
}

body.pan123-workspace .menu-item .arrow {
  color: #c2c9d6 !important;
}

body.pan123-workspace .sub-menu {
  display: block !important;
  padding: 2px 0 14px 52px !important;
  background: transparent !important;
}

body.pan123-workspace .sub-menu-item {
  height: 42px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 10px !important;
  color: #394255 !important;
  font-size: 16px !important;
  background: transparent !important;
}

body.pan123-workspace .sub-menu-item:hover,
body.pan123-workspace .sub-menu-item.active {
  color: #3b78ff !important;
  background: transparent !important;
  font-weight: 700 !important;
}

body.pan123-workspace .menu-sidebar .menu-section + .menu-section {
  margin-top: 8px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(210, 221, 235, 0.72) !important;
}

body.pan123-workspace .menu-sidebar .menu-section:nth-of-type(2) .menu-item:first-child {
  display: none !important;
}

body.pan123-workspace .storage-box {
  margin: auto 0 0 !important;
  padding: 15px 16px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(62, 102, 145, 0.06) !important;
}

body.pan123-workspace .storage-header {
  font-size: 14px !important;
  color: #344055 !important;
}

body.pan123-workspace .storage-header a {
  color: #397cff !important;
  font-weight: 700 !important;
}

body.pan123-workspace .storage-bar {
  height: 3px !important;
  margin: 10px 0 !important;
  background: #eef2f7 !important;
}

body.pan123-workspace .storage-fill {
  background: #3b78ff !important;
}

body.pan123-workspace .storage-text {
  color: #8891a3 !important;
  font-size: 13px !important;
}

body.pan123-workspace .main-content {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.pan123-workspace .toolbar {
  min-height: 88px !important;
  padding: 0 28px !important;
  border: 0 !important;
  background: #fff !important;
}

body.pan123-workspace .btn-upload {
  min-width: 104px !important;
  height: 46px !important;
  padding: 0 22px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  background: #3478ff !important;
  border-color: #3478ff !important;
  box-shadow: none !important;
}

body.pan123-workspace .btn-normal,
body.pan123-workspace .btn-primary,
body.pan123-workspace .btn-default {
  height: 46px !important;
  padding: 0 22px !important;
  border-radius: 8px !important;
  color: #101828 !important;
  border: 1px solid #e7ecf3 !important;
  background: #fff !important;
  font-size: 16px !important;
}

body.pan123-workspace .search-box {
  width: min(300px, 22vw) !important;
}

body.pan123-workspace .search-box input {
  height: 46px !important;
  border: 0 !important;
  border-radius: 24px !important;
  color: #6f7789 !important;
  background: #f5f6f8 !important;
  font-size: 15px !important;
}

body.pan123-workspace .tool-btn,
body.pan123-workspace .view-btn {
  width: 46px !important;
  height: 46px !important;
  border-radius: 10px !important;
  color: #101828 !important;
  background: #fff !important;
}

body.pan123-workspace .tool-btn.syncing {
  color: #2563eb !important;
  background: #eff6ff !important;
  cursor: wait !important;
}

body.pan123-workspace .tool-btn.syncing svg {
  animation: fileRefreshSpin 0.8s linear infinite !important;
  transform-origin: 50% 50% !important;
}

body.pan123-workspace .view-switch {
  height: 46px !important;
  padding: 0 !important;
  border: 1px solid #edf1f7 !important;
  border-radius: 10px !important;
  background: #fff !important;
}

body.pan123-workspace .view-btn.active {
  color: #101828 !important;
  background: #f4f6f9 !important;
}

body.pan123-workspace .breadcrumb {
  min-height: 52px !important;
  padding: 0 28px !important;
  border: 0 !important;
  color: #172033 !important;
  font-size: 16px !important;
  background: #fff !important;
}

body.pan123-workspace .file-header {
  min-height: 48px !important;
  padding: 0 28px !important;
  grid-template-columns: 36px minmax(280px, 1fr) 228px 180px 150px !important;
  color: #98a0b3 !important;
  border-bottom: 1px solid #f3f5f9 !important;
  background: #fff !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

body.pan123-workspace .file-row {
  min-height: 68px !important;
  padding: 0 28px !important;
  grid-template-columns: 36px minmax(280px, 1fr) 228px 180px 150px !important;
  color: #172033 !important;
  border-bottom: 0 !important;
  background: #fff !important;
}

body.pan123-workspace .file-row:hover,
body.pan123-workspace .file-row.ctx-open,
body.pan123-workspace .file-row.selected {
  background: #f8fbff !important;
  box-shadow: none !important;
}

body.pan123-workspace .file-checkbox,
body.pan123-workspace .share-checkbox {
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important;
}

body.pan123-workspace .file-name {
  color: #172033 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

body.pan123-workspace .file-time,
body.pan123-workspace .file-size {
  color: #a7afc0 !important;
  font-size: 16px !important;
}

body.pan123-workspace .folder-icon {
  width: 34px !important;
  height: 28px !important;
}

body.pan123-workspace .folder-icon::before {
  top: -5px !important;
  left: 4px !important;
  width: 16px !important;
  height: 8px !important;
  border-radius: 4px 4px 0 0 !important;
  background: #ffd56d !important;
}

body.pan123-workspace .folder-icon::after {
  width: 34px !important;
  height: 25px !important;
  border-radius: 5px !important;
  background: #ffd067 !important;
  box-shadow: inset 0 -2px 0 rgba(235, 159, 30, 0.08) !important;
}

body.pan123-workspace .empty-state {
  min-height: 282px !important;
  margin: 24px 28px !important;
  border: 0 !important;
  background: #fff !important;
}

@media (max-width: 768px) {
  body.pan123-workspace.pan123-mobile-workspace {
    min-height: 100vh !important;
    padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    background: var(--pan123-bg) !important;
    overflow-x: hidden !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .header {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    min-height: 54px !important;
    padding: calc(8px + env(safe-area-inset-top)) 16px 8px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid var(--pan123-border) !important;
    box-shadow: none !important;
    backdrop-filter: blur(10px) !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .header h1 {
    font-size: 17px !important;
    color: var(--pan123-text) !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .header-btn {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    color: var(--pan123-muted) !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .header-btn:active,
  body.pan123-workspace.pan123-mobile-workspace .header-btn:hover {
    color: var(--pan123-primary) !important;
    background: var(--pan123-primary-soft) !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .func-grid,
  body.pan123-workspace.pan123-mobile-workspace .category-bar,
  body.pan123-workspace.pan123-mobile-workspace .action-bar,
  body.pan123-workspace.pan123-mobile-workspace .feature-toolbar,
  body.pan123-workspace.pan123-mobile-workspace .modal-box,
  body.pan123-workspace.pan123-mobile-workspace .share-box {
    margin: 10px 12px !important;
    border: 1px solid var(--pan123-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .func-grid {
    padding: 14px 8px !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .func-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .func-icon.blue,
  body.pan123-workspace.pan123-mobile-workspace .batch-btn.primary,
  body.pan123-workspace.pan123-mobile-workspace .share-btn.confirm {
    background: var(--pan123-primary) !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .cat-btn {
    border-radius: 7px !important;
    background: #f7f9fc !important;
    color: var(--pan123-muted) !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .cat-btn.active {
    color: var(--pan123-primary) !important;
    background: var(--pan123-primary-soft) !important;
    box-shadow: none !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .action-bar {
    background: #f8fbff !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .file-list {
    padding: 0 12px 10px !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .file-item,
  body.pan123-workspace.pan123-mobile-workspace .feature-item {
    margin-bottom: 8px !important;
    padding: 12px !important;
    border: 1px solid var(--pan123-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .file-item:active,
  body.pan123-workspace.pan123-mobile-workspace .feature-item:active {
    background: #f5f9ff !important;
    transform: none !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .file-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 9px !important;
    box-shadow: none !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .file-name {
    color: var(--pan123-text) !important;
    font-size: 14px !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .file-meta,
  body.pan123-workspace.pan123-mobile-workspace .func-name {
    color: var(--pan123-muted) !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .fab-upload {
    right: 16px !important;
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    background: var(--pan123-primary) !important;
    box-shadow: 0 10px 24px rgba(22, 119, 255, 0.24) !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .mobile-tab-bar {
    height: calc(58px + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-top: 1px solid var(--pan123-border) !important;
    box-shadow: 0 -8px 22px rgba(26, 43, 74, 0.08) !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .mobile-tab-item.active {
    color: var(--pan123-primary) !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .upload-menu,
  body.pan123-workspace.pan123-mobile-workspace .action-menu,
  body.pan123-workspace.pan123-mobile-workspace .folder-select-box {
    border: 1px solid var(--pan123-border) !important;
    border-bottom: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    background: #fff !important;
    box-shadow: 0 -16px 40px rgba(26, 43, 74, 0.14) !important;
  }

  body.pan123-workspace.pan123-mobile-workspace .upload-menu-item,
  body.pan123-workspace.pan123-mobile-workspace .action-menu-item,
  body.pan123-workspace.pan123-mobile-workspace .folder-select-item {
    border-color: #f0f3f8 !important;
  }
}

body.vab-embedded-page.vab-embedded-page {
  min-height: 100vh !important;
  background: transparent !important;
}

body.vab-embedded-page.vab-embedded-page .top-nav,
body.vab-embedded-page.vab-embedded-page .navbar,
body.vab-embedded-page.vab-embedded-page .merchant-ref-topbar,
body.vab-embedded-page.vab-embedded-page > .merchant-ref-sidebar,
body.vab-embedded-page.vab-embedded-page .merchant-ref-sidebar,
body.vab-embedded-page.vab-embedded-page .merchant-123-sidebar,
body.vab-embedded-page.vab-embedded-page .mobile-tab-bar,
body.vab-embedded-page.vab-embedded-page .fab-upload {
  display: none !important;
}

body.vab-embedded-page.vab-embedded-page #app {
  min-height: 100vh !important;
  padding: 0 !important;
}

body.vab-embedded-page.vab-embedded-page .container,
body.vab-embedded-page.vab-embedded-page .merchant-ref-content,
body.vab-embedded-page.vab-embedded-page .merchant-console-layout {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 20px !important;
}

body.vab-embedded-page.vab-embedded-page .page-header,
body.vab-embedded-page.vab-embedded-page .merchant-page-head {
  margin-top: 0 !important;
}

body.vab-embedded-page.vab-embedded-page.merchant-surface,
body.vab-embedded-page.vab-embedded-page.merchant-surface .container {
  background: transparent !important;
}

.vab-feature-hidden {
  display: none !important;
}

body.vab-feature-disabled-page {
  min-height: 100vh !important;
  margin: 0 !important;
  color: #172033 !important;
  background: #f5f8fc !important;
}

.vab-feature-disabled-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 252, 0.98)),
    radial-gradient(circle at 16% 18%, rgba(59, 120, 255, 0.10), transparent 28%),
    radial-gradient(circle at 84% 78%, rgba(20, 184, 166, 0.10), transparent 30%);
}

.vab-feature-disabled-panel {
  width: min(520px, 100%);
  padding: 34px;
  border: 1px solid #e4ebf5;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(26, 43, 74, 0.12);
  text-align: center;
}

.vab-feature-disabled-logo {
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #eef5ff;
}

.vab-feature-disabled-logo img,
.vab-feature-disabled-logo .vab-brand-logo-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.vab-feature-disabled-kicker {
  margin-bottom: 10px;
  color: #1677ff;
  font-size: 13px;
  font-weight: 700;
}

.vab-feature-disabled-panel h1 {
  margin: 0 0 12px;
  color: #172033;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 800;
}

.vab-feature-disabled-panel p {
  margin: 0 auto 24px;
  max-width: 420px;
  color: #667085;
  font-size: 15px;
  line-height: 1.8;
}

.vab-feature-disabled-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.vab-feature-disabled-actions a {
  min-height: 40px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #dce7f5;
  border-radius: 8px;
  color: #334155;
  background: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.vab-feature-disabled-actions a:first-child {
  color: #fff;
  border-color: #1677ff;
  background: #1677ff;
}

@media (max-width: 640px) {
  .vab-feature-disabled-shell {
    padding: 18px;
    align-items: flex-start;
    padding-top: 16vh;
  }

  .vab-feature-disabled-panel {
    padding: 28px 20px;
    border-radius: 10px;
  }

  .vab-feature-disabled-panel h1 {
    font-size: 22px;
  }

  .vab-feature-disabled-actions {
    flex-direction: column;
  }

  .vab-feature-disabled-actions a {
    width: 100%;
  }
}

/* 2026-06-23 audit pages compact repair: override later admin theme rules only on audit detail pages. */
body.vab-admin-page.vab-admin-fragment.audit-compact-surface,
body.vab-admin-page.vab-admin-fragment.admin-surface.audit-compact-surface {
  padding: 10px 14px !important;
}

body.vab-admin-page.vab-admin-fragment.audit-compact-surface #app > .stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

body.vab-admin-page.vab-admin-fragment.audit-compact-surface #app > .stats-grid .stat-card,
body.vab-admin-page.vab-admin-fragment.audit-compact-surface .stats-grid .stat-card {
  min-height: 54px !important;
  padding: 8px 14px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  border-radius: 6px !important;
}

body.vab-admin-page.vab-admin-fragment.audit-compact-surface .stat-value,
body.vab-admin-page.vab-admin-fragment.audit-compact-surface #app > .stats-grid .stat-value {
  font-size: 22px !important;
  line-height: 1 !important;
}

body.vab-admin-page.vab-admin-fragment.audit-compact-surface .stat-label,
body.vab-admin-page.vab-admin-fragment.audit-compact-surface #app > .stats-grid .stat-label {
  margin-top: 4px !important;
  font-size: 12px !important;
}

body.vab-admin-page.vab-admin-fragment.audit-compact-surface .card-header {
  min-height: 44px !important;
  padding: 7px 14px !important;
}

body.vab-admin-page.vab-admin-fragment.audit-compact-surface .toolbar.audit-actions {
  min-height: 0 !important;
  padding: 0 !important;
  gap: 6px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.vab-admin-page.vab-admin-fragment.audit-compact-surface .audit-actions .btn {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
}

body.vab-admin-page.vab-admin-fragment.audit-compact-surface .audit-filter-grid.filters {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
  gap: 6px !important;
  padding: 7px 14px !important;
}

body.vab-admin-page.vab-admin-fragment.audit-compact-surface .audit-filter-grid .filter-input,
body.vab-admin-page.vab-admin-fragment.audit-compact-surface .audit-filter-grid .filter-select {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 9px !important;
  font-size: 12px !important;
}

body.vab-admin-page.vab-admin-fragment.audit-compact-surface .breakdown {
  gap: 8px !important;
  padding: 7px 14px 8px !important;
}

/* 2026-06-23 admin iframe layout repair: stable content grids, tables and action groups. */
body.vab-admin-page.vab-admin-fragment,
body.vab-admin-page.vab-admin-fragment.admin-surface {
  width: 100%;
  min-width: 0;
  overflow-x: hidden !important;
  background: var(--vab-page-bg) !important;
}

body.vab-admin-page.vab-admin-fragment #app {
  width: 100%;
  min-width: 0;
}

body.vab-admin-page.vab-admin-fragment .card,
body.vab-admin-page.vab-admin-fragment .table-card,
body.vab-admin-page.vab-admin-fragment .el-card {
  max-width: 100%;
  border-radius: 6px !important;
  box-shadow: var(--vab-shadow-card) !important;
  transform: none !important;
}

body.vab-admin-page.vab-admin-fragment .card-header,
body.vab-admin-page.vab-admin-fragment .table-header,
body.vab-admin-page.vab-admin-fragment .toolbar,
body.vab-admin-page.vab-admin-fragment .filter-toolbar {
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 0;
}

body.vab-admin-page.vab-admin-fragment .filters,
body.vab-admin-page.vab-admin-fragment .toolbar-actions,
body.vab-admin-page.vab-admin-fragment .query-bar,
body.vab-admin-page.vab-admin-fragment .filter-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0;
}

body.vab-admin-page.vab-admin-fragment .admin-table-scroll,
body.vab-admin-page.vab-admin-fragment .table-wrap,
body.vab-admin-page.vab-admin-fragment .table-container {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

body.vab-admin-page.vab-admin-fragment .card:has(> table.table) {
  overflow-x: auto;
}

body.vab-admin-page.vab-admin-fragment table.table,
body.vab-admin-page.vab-admin-fragment .table {
  width: 100%;
  border-collapse: collapse;
}

body.vab-admin-page.vab-admin-fragment .card > table.table {
  min-width: 920px;
}

body.vab-admin-page.vab-admin-fragment .table th,
body.vab-admin-page.vab-admin-fragment .table td,
body.vab-admin-page.vab-admin-fragment table.table th,
body.vab-admin-page.vab-admin-fragment table.table td {
  vertical-align: middle !important;
  line-height: 1.45 !important;
}

body.vab-admin-page.vab-admin-fragment .btn,
body.vab-admin-page.vab-admin-fragment .btn-sm,
body.vab-admin-page.vab-admin-fragment button.btn,
body.vab-admin-page.vab-admin-fragment button[class*="btn"]:not(.modal-close):not(.vab-header-tool):not(.vab-shell-tool):not(.vab-route-tab) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px;
  white-space: nowrap !important;
  transform: none !important;
}

body.vab-admin-page.vab-admin-fragment .btn::before,
body.vab-admin-page.vab-admin-fragment button.btn::before {
  content: none !important;
}

body.vab-admin-page.vab-admin-fragment .admin-action-group,
body.vab-admin-page.vab-admin-fragment .table-actions,
body.vab-admin-page.vab-admin-fragment .action-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

body.vab-admin-page.vab-admin-fragment .admin-action-group .btn,
body.vab-admin-page.vab-admin-fragment .table-actions .btn,
body.vab-admin-page.vab-admin-fragment .action-group .btn {
  margin: 0 !important;
}

body.vab-admin-page.vab-admin-fragment .empty,
body.vab-admin-page.vab-admin-fragment .loading {
  padding: 48px 16px !important;
}

body.vab-admin-page.vab-admin-fragment .el-table {
  --el-table-border-color: #ebeef5;
  font-size: 13px;
}

body.vab-admin-page.vab-admin-fragment .el-table .cell {
  min-width: 0;
  line-height: 1.45;
}

body.vab-admin-page.vab-admin-fragment .el-card__body {
  min-width: 0;
}

body.vab-admin-page.vab-admin-fragment .users-table-scroll {
  border-radius: 0 0 6px 6px;
}

body.vab-admin-page.vab-admin-fragment .users-table {
  min-width: 980px;
  table-layout: fixed;
}

body.vab-admin-page.vab-admin-fragment .users-table th,
body.vab-admin-page.vab-admin-fragment .users-table td {
  height: auto !important;
  padding: 9px 12px !important;
}

body.vab-admin-page.vab-admin-fragment .users-table tbody td {
  min-height: 76px;
}

body.vab-admin-page.vab-admin-fragment .users-col-check {
  width: 42px;
}

body.vab-admin-page.vab-admin-fragment .users-col-user {
  width: 270px;
}

body.vab-admin-page.vab-admin-fragment .users-col-vip {
  width: 100px;
}

body.vab-admin-page.vab-admin-fragment .users-col-balance {
  width: 86px;
}

body.vab-admin-page.vab-admin-fragment .users-col-storage {
  width: 140px;
}

body.vab-admin-page.vab-admin-fragment .users-col-status {
  width: 78px;
}

body.vab-admin-page.vab-admin-fragment .users-col-date {
  width: 102px;
}

body.vab-admin-page.vab-admin-fragment .users-col-actions {
  width: 154px;
}

body.vab-admin-page.vab-admin-fragment .users-check-cell,
body.vab-admin-page.vab-admin-fragment .users-status-cell,
body.vab-admin-page.vab-admin-fragment .users-vip-cell {
  text-align: center !important;
}

body.vab-admin-page.vab-admin-fragment .user-identity {
  width: 100%;
  align-items: center !important;
  cursor: pointer;
}

body.vab-admin-page.vab-admin-fragment .user-avatar {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 8px !important;
}

body.vab-admin-page.vab-admin-fragment .user-details {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

body.vab-admin-page.vab-admin-fragment .user-name,
body.vab-admin-page.vab-admin-fragment .user-meta,
body.vab-admin-page.vab-admin-fragment .user-merchant-row {
  min-width: 0;
  max-width: 100%;
}

body.vab-admin-page.vab-admin-fragment .user-name,
body.vab-admin-page.vab-admin-fragment .user-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.vab-admin-page.vab-admin-fragment .user-meta,
body.vab-admin-page.vab-admin-fragment .users-muted-cell,
body.vab-admin-page.vab-admin-fragment .users-date-cell {
  color: var(--vab-text-muted) !important;
  font-size: 12px !important;
}

body.vab-admin-page.vab-admin-fragment .user-merchant-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

body.vab-admin-page.vab-admin-fragment .user-merchant-id {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--vab-text-muted);
  font-size: 12px;
}

body.vab-admin-page.vab-admin-fragment .copy-id-btn {
  min-width: 42px !important;
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 8px !important;
  flex: 0 0 auto;
  font-size: 12px !important;
  line-height: 24px !important;
}

body.vab-admin-page.vab-admin-fragment .vip-select {
  width: 94px;
  height: 32px;
  cursor: pointer;
}

body.vab-admin-page.vab-admin-fragment .users-balance-cell {
  color: #10b981 !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

body.vab-admin-page.vab-admin-fragment .users-storage-cell .storage-text {
  margin-bottom: 6px;
  overflow: hidden;
  color: #606266;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.vab-admin-page.vab-admin-fragment .users-storage-cell .progress-bar {
  width: 128px;
  max-width: 100%;
}

body.vab-admin-page.vab-admin-fragment .users-action-group {
  width: 100%;
  display: grid;
  grid-template-columns: 52px 72px;
  align-items: center;
  justify-content: start;
  gap: 5px;
}

body.vab-admin-page.vab-admin-fragment .users-action-group .btn {
  min-width: 46px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 7px !important;
  font-size: 12px !important;
}

body.vab-admin-page.vab-admin-fragment .users-action-group .user-reset-btn {
  min-width: 70px !important;
}

body.vab-admin-page.vab-admin-fragment .table td:last-child .btn {
  margin: 2px 4px 2px 0 !important;
}

body.vab-admin-page.vab-admin-fragment .admin-pagination,
body.vab-admin-page.vab-admin-fragment .pagination.admin-pagination,
body.vab-admin-page.vab-admin-fragment .pager.admin-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  color: var(--vab-text-muted) !important;
  font-size: 13px !important;
  border-top: 1px solid var(--vab-border) !important;
}

body.vab-admin-page.vab-admin-fragment .admin-page-info,
body.vab-admin-page.vab-admin-fragment .admin-page-size,
body.vab-admin-page.vab-admin-fragment .admin-page-jump,
body.vab-admin-page.vab-admin-fragment .admin-page-controls {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

body.vab-admin-page.vab-admin-fragment .admin-page-controls {
  justify-content: flex-end !important;
}

body.vab-admin-page.vab-admin-fragment .admin-page-size select,
body.vab-admin-page.vab-admin-fragment .admin-page-jump input {
  width: auto !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  font-size: 13px !important;
}

body.vab-admin-page.vab-admin-fragment .admin-page-jump input {
  width: 64px !important;
  text-align: center !important;
}

body.vab-admin-page.vab-admin-fragment .admin-pagination .page-btn,
body.vab-admin-page.vab-admin-fragment .admin-pagination .btn,
body.vab-admin-page.vab-admin-fragment .pager.admin-pagination .btn {
  min-width: 34px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  margin: 0 !important;
}

body.vab-admin-page.vab-admin-fragment .user-login-btn {
  color: #2563eb !important;
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
}

body.vab-admin-page.vab-admin-fragment .user-reset-btn {
  color: #606266 !important;
  background: #f3f4f6 !important;
  border-color: #dcdfe6 !important;
}

@media (max-width: 1440px) {
  body.vab-admin-page.vab-admin-fragment .users-table {
    min-width: 960px;
  }

  body.vab-admin-page.vab-admin-fragment .users-col-user {
    width: 260px;
  }

  body.vab-admin-page.vab-admin-fragment .users-col-actions {
    width: 154px;
  }
}

@media (max-width: 768px) {
  body.vab-admin-page.vab-admin-fragment {
    padding: 14px !important;
  }

  body.vab-admin-page.vab-admin-fragment .card-header,
  body.vab-admin-page.vab-admin-fragment .toolbar {
    align-items: stretch !important;
    flex-direction: column;
  }

  body.vab-admin-page.vab-admin-fragment .admin-pagination,
  body.vab-admin-page.vab-admin-fragment .pagination.admin-pagination,
  body.vab-admin-page.vab-admin-fragment .pager.admin-pagination {
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  body.vab-admin-page.vab-admin-fragment .admin-page-controls,
  body.vab-admin-page.vab-admin-fragment .admin-page-size,
  body.vab-admin-page.vab-admin-fragment .admin-page-jump {
    width: 100% !important;
  }
}

/* 2026-06-23 admin pagination upgrade: fixed bottom pager for single-list pages. */
body.vab-admin-page.vab-admin-fragment.vab-has-fixed-pagination {
  padding-bottom: 58px !important;
}

body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination,
body.vab-admin-page.vab-admin-fragment .pagination.admin-pagination.vab-polished-pagination,
body.vab-admin-page.vab-admin-fragment .pager.admin-pagination.vab-polished-pagination,
body.vab-admin-page.vab-admin-fragment .el-pagination.vab-polished-pagination {
  min-height: 40px !important;
  align-items: center !important;
  gap: 7px !important;
  color: #526071 !important;
  background: rgba(245, 248, 252, 0.96) !important;
  border: 0 !important;
  border-top: 1px solid #dbe3ef !important;
  box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.06) !important;
}

body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-fixed-pagination,
body.vab-admin-page.vab-admin-fragment .pagination.admin-pagination.vab-fixed-pagination,
body.vab-admin-page.vab-admin-fragment .pager.admin-pagination.vab-fixed-pagination,
body.vab-admin-page.vab-admin-fragment .el-pagination.vab-fixed-pagination {
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 860 !important;
  margin: 0 !important;
  padding: 5px 12px !important;
  justify-content: flex-start !important;
  border-radius: 0 !important;
  backdrop-filter: saturate(1.08) blur(8px);
}

body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .admin-page-info,
body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .admin-page-size,
body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .admin-page-jump {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #64748b !important;
  white-space: nowrap !important;
}

body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .admin-page-info {
  margin-right: 4px !important;
}

body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .admin-page-controls {
  margin-left: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  gap: 0 !important;
}

body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .page-btn,
body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .btn,
body.vab-admin-page.vab-admin-fragment .pager.admin-pagination.vab-polished-pagination .btn {
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 9px !important;
  border: 1px solid #b8c7da !important;
  border-radius: 0 !important;
  color: #21466f !important;
  background: #fff !important;
  box-shadow: none !important;
  margin-left: -1px !important;
  font-size: 13px !important;
  line-height: 28px !important;
}

body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .page-btn:hover:not(:disabled),
body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .btn:hover:not(:disabled) {
  position: relative !important;
  z-index: 1 !important;
  color: #0f5fa8 !important;
  border-color: #7fa8d5 !important;
  background: #f2f7ff !important;
}

body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .page-btn.active,
body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .btn.btn-primary,
body.vab-admin-page.vab-admin-fragment .pager.admin-pagination.vab-polished-pagination .btn.btn-primary {
  position: relative !important;
  z-index: 2 !important;
  color: #fff !important;
  border-color: #15598e !important;
  background: #15598e !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .admin-page-controls .page-btn:first-child,
body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .admin-page-controls .btn:first-child {
  margin-left: 0 !important;
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}

body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .admin-page-controls .page-btn:last-child,
body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .admin-page-controls .btn:last-child {
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination select,
body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination input {
  height: 30px !important;
  min-height: 30px !important;
  border: 1px solid #b8c7da !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #21466f !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

body.vab-admin-page.vab-admin-fragment .el-pagination.vab-polished-pagination {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  margin-top: 0 !important;
}

body.vab-admin-page.vab-admin-fragment .el-pagination.vab-polished-pagination .el-pagination__total,
body.vab-admin-page.vab-admin-fragment .el-pagination.vab-polished-pagination .el-pagination__sizes,
body.vab-admin-page.vab-admin-fragment .el-pagination.vab-polished-pagination .el-pagination__jump {
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.vab-admin-page.vab-admin-fragment .el-pagination.vab-polished-pagination .el-pagination__sizes,
body.vab-admin-page.vab-admin-fragment .el-pagination.vab-polished-pagination .el-pager {
  margin-right: 8px !important;
}

body.vab-admin-page.vab-admin-fragment .el-pagination.vab-polished-pagination .el-pager {
  display: inline-flex !important;
  gap: 0 !important;
}

body.vab-admin-page.vab-admin-fragment .el-pagination.vab-polished-pagination .btn-prev {
  margin-left: auto !important;
}

body.vab-admin-page.vab-admin-fragment .el-pagination.vab-polished-pagination .btn-prev,
body.vab-admin-page.vab-admin-fragment .el-pagination.vab-polished-pagination .btn-next,
body.vab-admin-page.vab-admin-fragment .el-pagination.vab-polished-pagination .el-pager li {
  min-width: 34px !important;
  height: 34px !important;
  margin: 0 0 0 -1px !important;
  border: 1px solid #b8c7da !important;
  border-radius: 0 !important;
  color: #21466f !important;
  background: #fff !important;
  font-weight: 600 !important;
}

body.vab-admin-page.vab-admin-fragment .el-pagination.vab-polished-pagination.is-background .el-pager li.is-active {
  position: relative !important;
  z-index: 2 !important;
  border-color: #15598e !important;
  background: #15598e !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

@media (max-width: 768px) {
  body.vab-admin-page.vab-admin-fragment.vab-has-fixed-pagination {
    padding-bottom: 132px !important;
  }

  body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-fixed-pagination,
  body.vab-admin-page.vab-admin-fragment .pagination.admin-pagination.vab-fixed-pagination,
  body.vab-admin-page.vab-admin-fragment .pager.admin-pagination.vab-fixed-pagination,
  body.vab-admin-page.vab-admin-fragment .el-pagination.vab-fixed-pagination {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    border-radius: 0 !important;
  }

  body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .admin-page-controls,
  body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .admin-page-info,
  body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .admin-page-size,
  body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .admin-page-jump {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* 2026-06-23 config page Element pilot: compact cards, one action bar, instant switch affordance. */
body.vab-admin-page.vab-admin-fragment.config-element-surface {
  padding: 12px 16px 76px !important;
  overflow-x: hidden !important;
}

body.config-element-surface #app {
  max-width: 100% !important;
}

body.config-element-surface .config-element-tabs {
  margin-bottom: 12px;
  border-radius: 6px;
  background: #fff;
  box-shadow: var(--vab-shadow-card);
}

body.config-element-surface .config-element-tabs .el-tabs__header {
  margin: 0;
  padding: 8px 10px 0;
  border-bottom: 1px solid var(--vab-border);
}

body.config-element-surface .config-element-tabs .el-tabs__item {
  height: 34px;
  line-height: 34px;
  font-size: 13px;
  color: var(--vab-text-soft);
}

body.config-element-surface .config-element-tabs .el-tabs__item.is-active {
  color: var(--vab-primary);
  background: var(--vab-primary-light);
}

body.config-element-surface .config-tab-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.config-element-surface .config-tabs {
  margin-bottom: 12px !important;
  padding: 8px !important;
  border: 1px solid var(--vab-border) !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: var(--vab-shadow-card) !important;
}

body.config-element-surface .config-tab {
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
}

body.config-element-surface .config-card,
body.vab-admin-page.vab-admin-fragment.config-element-surface .config-card {
  margin-bottom: 12px !important;
  padding: 16px !important;
  border: 1px solid var(--vab-border) !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: var(--vab-shadow-card) !important;
}

body.config-element-surface .config-card h3 {
  min-height: 34px;
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--vab-border) !important;
  color: var(--vab-text) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

body.config-element-surface .form-row,
body.config-element-surface .client-download-grid,
body.config-element-surface .brand-assets-grid,
body.config-element-surface .diagnosis-grid,
body.config-element-surface .storage-optimizer-grid,
body.config-element-surface .storage-cold-filter-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

body.config-element-surface .form-group.full,
body.config-element-surface .form-group[style*="grid-column:span 2"] {
  grid-column: 1 / -1 !important;
}

body.config-element-surface .form-group label {
  margin-bottom: 6px !important;
  color: var(--vab-text-soft) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.config-element-surface .form-group input,
body.config-element-surface .form-group select,
body.config-element-surface .form-group textarea,
body.config-element-surface input,
body.config-element-surface select,
body.config-element-surface textarea {
  min-height: 34px !important;
  padding: 7px 10px !important;
  border: 1px solid var(--vab-border-strong) !important;
  border-radius: 4px !important;
  background: #fff !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

body.config-element-surface textarea,
body.config-element-surface .form-group textarea {
  min-height: 78px !important;
}

body.config-element-surface .hint {
  margin-top: 4px !important;
  color: var(--vab-text-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

body.config-element-surface .switch-wrapper {
  gap: 8px !important;
  min-height: 34px !important;
}

body.config-element-surface .switch {
  width: 40px !important;
  height: 22px !important;
  flex: 0 0 40px !important;
}

body.config-element-surface .switch .slider {
  border-radius: 999px !important;
  background: #c0c4cc !important;
}

body.config-element-surface .switch .slider:before {
  width: 18px !important;
  height: 18px !important;
  left: 2px !important;
  bottom: 2px !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
}

body.config-element-surface .switch input:checked + .slider {
  background: var(--vab-primary) !important;
}

body.config-element-surface .switch input:checked + .slider:before {
  transform: translateX(18px) !important;
}

body.config-element-surface .brand-asset-card,
body.config-element-surface .client-download-card,
body.config-element-surface .diagnosis-item,
body.config-element-surface .storage-optimizer-stat,
body.config-element-surface .storage-filter-summary div {
  border-radius: 6px !important;
  background: #fafcff !important;
}

body.config-element-surface .brand-asset-preview {
  height: 72px !important;
  border-radius: 6px !important;
}

body.config-element-surface .brand-asset-preview.compact {
  height: 58px !important;
}

body.config-element-surface .storage-class-rule {
  grid-template-columns: minmax(180px, 1.1fr) minmax(110px, .75fr) minmax(150px, 1fr) minmax(180px, 1fr) !important;
  gap: 10px !important;
  padding: 10px !important;
  border-radius: 6px !important;
  background: #fff !important;
}

body.config-element-surface .storage-cold-filter {
  margin: 12px 0 !important;
  padding: 12px !important;
  border-radius: 6px !important;
  background: #f8fbff !important;
}

body.config-element-surface .config-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid #dbe3ef;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(8px);
}

body.config-element-surface .config-action-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.config-element-surface .config-action-meta strong {
  color: var(--vab-text);
  font-size: 14px;
}

body.config-element-surface .config-action-meta span {
  color: var(--vab-text-muted);
  font-size: 12px;
}

body.config-element-surface .config-action-buttons {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

body.config-element-surface .config-action-buttons .btn {
  min-height: 32px !important;
  padding: 0 14px !important;
}

@media (max-width: 900px) {
  body.config-element-surface .config-action-bar {
    align-items: stretch;
    flex-direction: column;
  }

  body.config-element-surface .config-action-buttons {
    justify-content: flex-start;
  }

  body.config-element-surface .storage-class-rule {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-06-23 final pager density pass: keep the fixed footer pager compact
   and visually linked without increasing the content chrome height. */
body.vab-admin-page.vab-admin-fragment.vab-has-fixed-pagination {
  padding-bottom: 48px !important;
}

body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination,
body.vab-admin-page.vab-admin-fragment .pagination.admin-pagination.vab-polished-pagination,
body.vab-admin-page.vab-admin-fragment .pager.admin-pagination.vab-polished-pagination,
body.vab-admin-page.vab-admin-fragment .el-pagination.vab-polished-pagination {
  min-height: 36px !important;
  gap: 6px !important;
  font-size: 12px !important;
}

body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-fixed-pagination,
body.vab-admin-page.vab-admin-fragment .pagination.admin-pagination.vab-fixed-pagination,
body.vab-admin-page.vab-admin-fragment .pager.admin-pagination.vab-fixed-pagination,
body.vab-admin-page.vab-admin-fragment .el-pagination.vab-fixed-pagination {
  padding: 4px 10px !important;
}

body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .admin-page-info,
body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .admin-page-size,
body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .admin-page-jump {
  height: 28px !important;
  min-height: 28px !important;
  font-size: 12px !important;
}

body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .admin-page-controls {
  gap: 0 !important;
}

body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .page-btn,
body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .btn,
body.vab-admin-page.vab-admin-fragment .pager.admin-pagination.vab-polished-pagination .btn {
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  line-height: 26px !important;
}

body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination select,
body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination input {
  height: 28px !important;
  min-height: 28px !important;
  font-size: 12px !important;
  line-height: 26px !important;
}

body.vab-admin-page.vab-admin-fragment .admin-pagination.vab-polished-pagination .admin-page-jump input {
  width: 58px !important;
}

body.vab-admin-page.vab-admin-fragment .el-pagination.vab-polished-pagination .el-pagination__total,
body.vab-admin-page.vab-admin-fragment .el-pagination.vab-polished-pagination .el-pagination__sizes,
body.vab-admin-page.vab-admin-fragment .el-pagination.vab-polished-pagination .el-pagination__jump {
  height: 30px !important;
  font-size: 12px !important;
}

body.vab-admin-page.vab-admin-fragment .el-pagination.vab-polished-pagination .btn-prev,
body.vab-admin-page.vab-admin-fragment .el-pagination.vab-polished-pagination .btn-next,
body.vab-admin-page.vab-admin-fragment .el-pagination.vab-polished-pagination .el-pager li {
  min-width: 30px !important;
  height: 30px !important;
  font-size: 12px !important;
}

/* 2026-06-23 layout continuation: keep dense file/audit filters in one tidy row
   on desktop while preserving wrapping on narrow iframe widths. */
body.vab-admin-page.vab-admin-fragment.audit-compact-surface .audit-filter-grid.filters {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
  gap: 5px !important;
  padding: 6px 12px !important;
}

body.vab-admin-page.vab-admin-fragment.audit-compact-surface .audit-filter-grid .filter-wide {
  grid-column: span 2 !important;
}

body.vab-admin-page.vab-admin-fragment.audit-compact-surface .audit-filter-grid .filter-input,
body.vab-admin-page.vab-admin-fragment.audit-compact-surface .audit-filter-grid .filter-select {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
}

body.vab-admin-page.vab-admin-fragment .files-filter {
  width: 100% !important;
  display: grid !important;
  grid-template-columns:
    minmax(128px, 1.22fr)
    minmax(72px, .62fr)
    minmax(96px, .78fr)
    minmax(98px, .82fr)
    minmax(104px, .88fr)
    minmax(128px, 1.08fr)
    minmax(92px, .78fr)
    auto
    auto
    auto !important;
  align-items: center !important;
  gap: 8px !important;
}

body.vab-admin-page.vab-admin-fragment .files-filter .filter-input {
  width: 100% !important;
  min-width: 0 !important;
}

body.vab-admin-page.vab-admin-fragment .files-filter .btn {
  min-width: 54px !important;
  padding-right: 9px !important;
  padding-left: 9px !important;
}

@media (max-width: 1180px) {
  body.vab-admin-page.vab-admin-fragment .files-filter {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
  }
}

/* 2026-06-24 desktop home: Element Plus cloud sharing landing page */
body.cloud-home-element-page {
  --ch-blue: #2563eb;
  --ch-blue-deep: #174cd6;
  --ch-blue-soft: #eaf2ff;
  --ch-ink: #141a2f;
  --ch-text: #3c4660;
  --ch-muted: #7d8aa3;
  --ch-line: #e7edf7;
  --ch-panel: #f5f8ff;
  --ch-orange: #ff8a3d;
  --ch-green: #16b981;
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--ch-text) !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(211, 226, 255, .72), transparent 30%),
    linear-gradient(180deg, #f7faff 0%, #ffffff 42%, #f7faff 100%) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
}

body.cloud-home-element-page [v-cloak] {
  display: none !important;
}

body.cloud-home-element-page *,
body.cloud-home-element-page *::before,
body.cloud-home-element-page *::after {
  box-sizing: border-box !important;
}

body.cloud-home-element-page a {
  color: inherit !important;
  text-decoration: none !important;
}

body.cloud-home-element-page .cloud-home-shell {
  min-height: 100vh !important;
  background: transparent !important;
}

body.cloud-home-element-page .cloud-home-header.el-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  height: 68px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, .88) !important;
  border-bottom: 1px solid rgba(226, 232, 245, .7) !important;
  box-shadow: 0 12px 32px rgba(35, 67, 128, .06) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
}

body.cloud-home-element-page .cloud-home-nav {
  width: min(100% - 64px, 1320px) !important;
  height: 68px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 216px minmax(190px, 1fr) auto auto !important;
  align-items: center !important;
  gap: 22px !important;
}

body.cloud-home-element-page .cloud-home-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-width: 0 !important;
}

body.cloud-home-element-page .cloud-home-brand-mark {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  color: #fff !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #5ab1ff 0%, #2563eb 58%, #1438c8 100%) !important;
  box-shadow: 0 14px 30px rgba(37, 99, 235, .25) !important;
}

body.cloud-home-element-page .cloud-home-brand-mark i {
  font-size: 18px !important;
}

body.cloud-home-element-page .cloud-home-brand-text {
  display: grid !important;
  gap: 2px !important;
  line-height: 1.1 !important;
}

body.cloud-home-element-page .cloud-home-brand-text strong {
  color: var(--ch-ink) !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
}

body.cloud-home-element-page .cloud-home-brand-text em {
  color: #6a7b99 !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

body.cloud-home-element-page .cloud-home-notice {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #ef4b61 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

body.cloud-home-element-page .cloud-home-notice i {
  color: #ff8a3d !important;
}

body.cloud-home-element-page .cloud-home-menu {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 28px !important;
  color: #2d3952 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

body.cloud-home-element-page .cloud-home-menu a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: color .2s ease, transform .2s ease !important;
}

body.cloud-home-element-page .cloud-home-menu a:hover {
  color: var(--ch-blue) !important;
  transform: translateY(-1px) !important;
}

body.cloud-home-element-page .cloud-home-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

body.cloud-home-element-page .cloud-home-client-btn.el-button,
body.cloud-home-element-page .cloud-home-enter-btn.el-button {
  height: 38px !important;
  padding: 0 22px !important;
  font-weight: 800 !important;
}

body.cloud-home-element-page .cloud-home-client-btn.el-button {
  color: var(--ch-blue) !important;
  border-color: #bcd2ff !important;
  background: #fff !important;
}

body.cloud-home-element-page .cloud-home-enter-btn.el-button {
  border: 0 !important;
  background: linear-gradient(135deg, #347dff, #1f5bea) !important;
  box-shadow: 0 12px 26px rgba(37, 99, 235, .25) !important;
}

body.cloud-home-element-page .cloud-home-main.el-main {
  padding: 0 !important;
  overflow: visible !important;
}

body.cloud-home-element-page .cloud-home-hero {
  position: relative !important;
  min-height: 720px !important;
  overflow: hidden !important;
}

body.cloud-home-element-page .cloud-home-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

body.cloud-home-element-page .cloud-home-hero-bg::before {
  content: "" !important;
  position: absolute !important;
  top: 82px !important;
  left: 50% !important;
  width: 1020px !important;
  height: 420px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(218, 230, 255, .88), rgba(245, 249, 255, .15) 64%, transparent 72%) !important;
  transform: translateX(-50%) !important;
}

body.cloud-home-element-page .cloud-home-hero-bg::after {
  content: "" !important;
  position: absolute !important;
  right: -120px !important;
  top: 120px !important;
  width: 360px !important;
  height: 360px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, .13), rgba(22, 185, 129, .10)) !important;
  filter: blur(4px) !important;
}

body.cloud-home-element-page .cloud-home-hero-inner {
  position: relative !important;
  z-index: 1 !important;
  width: min(100% - 64px, 1320px) !important;
  min-height: 720px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.03fr) minmax(420px, .97fr) !important;
  align-items: center !important;
  gap: 54px !important;
}

body.cloud-home-element-page .cloud-home-copy {
  padding-top: 34px !important;
}

body.cloud-home-element-page .cloud-home-kicker.el-tag {
  height: 34px !important;
  padding: 0 16px !important;
  color: var(--ch-blue) !important;
  border-color: #c8d9ff !important;
  background: rgba(255, 255, 255, .74) !important;
  font-weight: 800 !important;
  gap: 7px !important;
}

body.cloud-home-element-page .cloud-home-copy h1 {
  margin: 26px 0 22px !important;
  color: var(--ch-ink) !important;
  font-size: clamp(56px, 6vw, 88px) !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
  letter-spacing: -.07em !important;
}

body.cloud-home-element-page .cloud-home-copy p {
  width: min(100%, 650px) !important;
  margin: 0 !important;
  color: #61708a !important;
  font-size: 18px !important;
  line-height: 1.86 !important;
}

body.cloud-home-element-page .cloud-home-hero-actions {
  margin-top: 34px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

body.cloud-home-element-page .cloud-home-hero-actions .el-button {
  height: 48px !important;
  padding: 0 28px !important;
  font-size: 16px !important;
  font-weight: 850 !important;
}

body.cloud-home-element-page .cloud-home-hero-actions .el-button--primary {
  border: 0 !important;
  background: linear-gradient(135deg, #347dff, #1f5bea) !important;
  box-shadow: 0 16px 32px rgba(37, 99, 235, .25) !important;
}

body.cloud-home-element-page .cloud-home-hero-actions i {
  margin-right: 6px !important;
}

body.cloud-home-element-page .cloud-home-pills {
  margin-top: 46px !important;
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
}

body.cloud-home-element-page .cloud-home-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: var(--ch-ink) !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body.cloud-home-element-page .cloud-home-pill i {
  width: 48px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 14px 26px rgba(37, 99, 235, .18) !important;
}

body.cloud-home-element-page .cloud-home-pill.orange i {
  background: linear-gradient(135deg, #ffb15f, #ff7a32) !important;
}

body.cloud-home-element-page .cloud-home-pill.blue i {
  background: linear-gradient(135deg, #5aa1ff, #2563eb) !important;
}

body.cloud-home-element-page .cloud-home-pill.green i {
  background: linear-gradient(135deg, #46d9a5, #13a875) !important;
}

body.cloud-home-element-page .cloud-home-visual {
  position: relative !important;
  min-height: 520px !important;
}

body.cloud-home-element-page .cloud-home-orbit {
  position: absolute !important;
  inset: 42px 14px 38px !important;
  border-radius: 44px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(240, 246, 255, .72)),
    repeating-linear-gradient(90deg, transparent 0 56px, rgba(37, 99, 235, .06) 56px 58px) !important;
  border: 1px solid rgba(208, 222, 250, .76) !important;
  box-shadow: 0 32px 70px rgba(49, 84, 145, .13) !important;
}

body.cloud-home-element-page .cloud-home-quick-card.el-card,
body.cloud-home-element-page .cloud-home-status-card.el-card {
  position: absolute !important;
  border: 1px solid rgba(218, 228, 247, .85) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 28px 54px rgba(50, 80, 140, .14) !important;
  backdrop-filter: blur(14px) !important;
}

body.cloud-home-element-page .cloud-home-quick-card {
  top: 82px !important;
  left: 30px !important;
  width: 390px !important;
}

body.cloud-home-element-page .cloud-home-status-card {
  right: 28px !important;
  bottom: 70px !important;
  width: 330px !important;
}

body.cloud-home-element-page .cloud-home-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
  color: var(--ch-ink) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

body.cloud-home-element-page .cloud-home-card-head em {
  color: var(--ch-muted) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

body.cloud-home-element-page .cloud-home-quick-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body.cloud-home-element-page .cloud-home-quick-grid button {
  height: 96px !important;
  display: grid !important;
  place-items: center !important;
  gap: 9px !important;
  color: #273653 !important;
  border: 1px solid #e5edfb !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #fff, #f7faff) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

body.cloud-home-element-page .cloud-home-quick-grid button:hover {
  border-color: #bad0ff !important;
  box-shadow: 0 16px 28px rgba(37, 99, 235, .10) !important;
  transform: translateY(-2px) !important;
}

body.cloud-home-element-page .cloud-home-quick-grid i {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ch-blue) !important;
  border-radius: 13px !important;
  background: var(--ch-blue-soft) !important;
  font-size: 16px !important;
}

body.cloud-home-element-page .cloud-home-meter {
  height: 116px !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 14px !important;
  padding: 10px 8px 18px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #f7faff, #eef5ff) !important;
}

body.cloud-home-element-page .cloud-home-meter span {
  flex: 1 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #78acff, #2563eb) !important;
}

body.cloud-home-element-page .cloud-home-meter span:nth-child(1) { height: 46px !important; opacity: .45 !important; }
body.cloud-home-element-page .cloud-home-meter span:nth-child(2) { height: 78px !important; opacity: .62 !important; }
body.cloud-home-element-page .cloud-home-meter span:nth-child(3) { height: 58px !important; opacity: .78 !important; }
body.cloud-home-element-page .cloud-home-meter span:nth-child(4) { height: 96px !important; background: linear-gradient(180deg, #ffb36b, #ff7a32) !important; }

body.cloud-home-element-page .cloud-home-status-row {
  margin-top: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #66738e !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

body.cloud-home-element-page .cloud-home-status-row strong {
  color: var(--ch-ink) !important;
  font-size: 18px !important;
}

body.cloud-home-element-page .cloud-home-scenes,
body.cloud-home-element-page .cloud-home-features,
body.cloud-home-element-page .cloud-home-news {
  width: min(100% - 64px, 1320px) !important;
  margin: 0 auto !important;
  padding: 74px 0 !important;
}

body.cloud-home-element-page .cloud-home-section-title {
  margin-bottom: 34px !important;
  text-align: center !important;
}

body.cloud-home-element-page .cloud-home-section-title span,
body.cloud-home-element-page .cloud-home-feature-copy span {
  color: var(--ch-blue) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}

body.cloud-home-element-page .cloud-home-section-title h2,
body.cloud-home-element-page .cloud-home-feature-copy h2 {
  margin: 10px 0 12px !important;
  color: var(--ch-ink) !important;
  font-size: 38px !important;
  font-weight: 950 !important;
  letter-spacing: -.045em !important;
  line-height: 1.24 !important;
}

body.cloud-home-element-page .cloud-home-section-title p,
body.cloud-home-element-page .cloud-home-feature-copy p {
  margin: 0 !important;
  color: var(--ch-muted) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
}

body.cloud-home-element-page .cloud-home-scene-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

body.cloud-home-element-page .cloud-home-scene-card.el-card,
body.cloud-home-element-page .cloud-home-info-card.el-card {
  border: 1px solid #e5edfb !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 20px 44px rgba(45, 78, 135, .07) !important;
}

body.cloud-home-element-page .cloud-home-scene-card .el-card__body {
  min-height: 184px !important;
  padding: 24px !important;
}

body.cloud-home-element-page .cloud-home-scene-icon {
  width: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--scene-color) !important;
  border-radius: 16px !important;
  background: var(--scene-bg) !important;
  font-size: 18px !important;
}

body.cloud-home-element-page .cloud-home-scene-card h3 {
  margin: 18px 0 8px !important;
  color: var(--ch-ink) !important;
  font-size: 19px !important;
  font-weight: 900 !important;
}

body.cloud-home-element-page .cloud-home-scene-card p {
  margin: 0 !important;
  color: #6c7890 !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
}

body.cloud-home-element-page .cloud-home-feature-panel {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  gap: 34px !important;
  align-items: center !important;
  padding: 42px !important;
  border: 1px solid #dfe9fb !important;
  border-radius: 34px !important;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .09), rgba(255, 255, 255, .72)),
    #fff !important;
  box-shadow: 0 28px 64px rgba(45, 78, 135, .10) !important;
}

body.cloud-home-element-page .cloud-home-feature-list {
  display: grid !important;
  gap: 14px !important;
}

body.cloud-home-element-page .cloud-home-feature-item {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 18px !important;
  border: 1px solid #e5edfb !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .82) !important;
}

body.cloud-home-element-page .cloud-home-feature-item i {
  width: 48px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ch-blue) !important;
  border-radius: 16px !important;
  background: var(--ch-blue-soft) !important;
}

body.cloud-home-element-page .cloud-home-feature-item h3 {
  margin: 0 0 6px !important;
  color: var(--ch-ink) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}

body.cloud-home-element-page .cloud-home-feature-item p {
  margin: 0 !important;
  color: #6c7890 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

body.cloud-home-element-page .cloud-home-info-card .el-card__body {
  padding: 24px !important;
}

body.cloud-home-element-page .cloud-home-info-head {
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body.cloud-home-element-page .cloud-home-info-head strong {
  color: var(--ch-ink) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

body.cloud-home-element-page .cloud-home-info-head a {
  color: var(--ch-blue) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.cloud-home-element-page .cloud-home-info-card .el-card__body > a {
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: #55627a !important;
  border-top: 1px solid #edf2fb !important;
  font-size: 14px !important;
}

body.cloud-home-element-page .cloud-home-info-card .el-card__body > a span {
  color: var(--ch-blue) !important;
  font-weight: 900 !important;
}

body.cloud-home-element-page .cloud-home-footer.el-footer {
  height: auto !important;
  padding: 0 !important;
  color: #aab6c8 !important;
  background: #101827 !important;
}

body.cloud-home-element-page .cloud-home-footer-inner {
  width: min(100% - 64px, 1320px) !important;
  margin: 0 auto !important;
  padding: 48px 0 34px !important;
  display: grid !important;
  grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr)) !important;
  gap: 34px !important;
}

body.cloud-home-element-page .cloud-home-footer-inner section {
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
}

body.cloud-home-element-page .cloud-home-footer-inner h3 {
  margin: 0 0 4px !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

body.cloud-home-element-page .cloud-home-footer-inner a,
body.cloud-home-element-page .cloud-home-footer-inner p {
  margin: 0 !important;
  color: #aab6c8 !important;
  font-size: 14px !important;
}

body.cloud-home-element-page .cloud-home-footer-inner a:hover {
  color: #fff !important;
}

body.cloud-home-element-page .cloud-home-footer-bottom {
  width: min(100% - 64px, 1320px) !important;
  margin: 0 auto !important;
  padding: 18px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
  color: #7f8da3 !important;
  font-size: 13px !important;
}

body.cloud-home-element-page .cloud-home-floating {
  position: fixed !important;
  right: 22px !important;
  bottom: 36px !important;
  z-index: 70 !important;
  display: grid !important;
  gap: 10px !important;
}

body.cloud-home-element-page .cloud-home-floating button {
  width: 74px !important;
  min-height: 66px !important;
  padding: 10px 8px !important;
  display: grid !important;
  place-items: center !important;
  gap: 5px !important;
  color: #273653 !important;
  border: 1px solid #e5edfb !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 18px 36px rgba(45, 78, 135, .14) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

body.cloud-home-element-page .cloud-home-floating i {
  color: var(--ch-blue) !important;
  font-size: 18px !important;
}

@media (max-width: 1180px) {
  body.cloud-home-element-page .cloud-home-nav {
    width: min(100% - 36px, 1320px) !important;
    grid-template-columns: 196px minmax(120px, 1fr) auto !important;
    gap: 14px !important;
  }

  body.cloud-home-element-page .cloud-home-menu {
    gap: 18px !important;
  }

  body.cloud-home-element-page .cloud-home-notice {
    display: none !important;
  }

  body.cloud-home-element-page .cloud-home-hero-inner {
    width: min(100% - 36px, 1320px) !important;
    grid-template-columns: 1fr !important;
    padding: 70px 0 !important;
  }

  body.cloud-home-element-page .cloud-home-visual {
    min-height: 460px !important;
  }
}

@media (max-width: 900px) {
  body.cloud-home-element-page .cloud-home-header.el-header,
  body.cloud-home-element-page .cloud-home-nav {
    height: auto !important;
  }

  body.cloud-home-element-page .cloud-home-nav {
    padding: 14px 0 !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand actions"
      "menu menu" !important;
  }

  body.cloud-home-element-page .cloud-home-brand { grid-area: brand !important; }
  body.cloud-home-element-page .cloud-home-actions { grid-area: actions !important; }
  body.cloud-home-element-page .cloud-home-menu {
    grid-area: menu !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  body.cloud-home-element-page .cloud-home-menu::-webkit-scrollbar {
    display: none !important;
  }

  body.cloud-home-element-page .cloud-home-scenes,
  body.cloud-home-element-page .cloud-home-features,
  body.cloud-home-element-page .cloud-home-news,
  body.cloud-home-element-page .cloud-home-footer-inner,
  body.cloud-home-element-page .cloud-home-footer-bottom {
    width: min(100% - 32px, 1320px) !important;
  }

  body.cloud-home-element-page .cloud-home-scene-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.cloud-home-element-page .cloud-home-feature-panel,
  body.cloud-home-element-page .cloud-home-footer-inner {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  body.cloud-home-element-page .cloud-home-client-btn.el-button {
    display: none !important;
  }

  body.cloud-home-element-page .cloud-home-copy h1 {
    font-size: 42px !important;
  }

  body.cloud-home-element-page .cloud-home-copy p {
    font-size: 15px !important;
  }

  body.cloud-home-element-page .cloud-home-pill {
    font-size: 17px !important;
  }

  body.cloud-home-element-page .cloud-home-visual {
    min-height: 610px !important;
  }

  body.cloud-home-element-page .cloud-home-quick-card,
  body.cloud-home-element-page .cloud-home-status-card {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    margin-bottom: 16px !important;
  }

  body.cloud-home-element-page .cloud-home-orbit {
    display: none !important;
  }

  body.cloud-home-element-page .cloud-home-scene-grid {
    grid-template-columns: 1fr !important;
  }

  body.cloud-home-element-page .cloud-home-section-title h2,
  body.cloud-home-element-page .cloud-home-feature-copy h2 {
    font-size: 29px !important;
  }

  body.cloud-home-element-page .cloud-home-floating {
    display: none !important;
  }
}

/* 2026-06-24 desktop home polish: softer hero and more natural cloud brand feel */
body.cloud-home-element-page {
  --ch-ink: #151b33;
  --ch-text: #34415f;
  background:
    radial-gradient(circle at 50% 130px, rgba(219, 231, 255, .95), rgba(246, 250, 255, .58) 38%, transparent 68%),
    linear-gradient(180deg, #f7faff 0%, #f4f8ff 47%, #ffffff 68%, #f7faff 100%) !important;
}

body.cloud-home-element-page .cloud-home-header.el-header {
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 8px 28px rgba(22, 44, 84, .045) !important;
}

body.cloud-home-element-page .cloud-home-nav {
  grid-template-columns: 230px minmax(160px, 1fr) auto auto !important;
}

body.cloud-home-element-page .cloud-home-brand-mark {
  border-radius: 11px 14px 16px 12px !important;
  transform: rotate(-5deg) !important;
}

body.cloud-home-element-page .cloud-home-brand-mark i {
  transform: rotate(5deg) !important;
}

body.cloud-home-element-page .cloud-home-notice {
  color: #ef5264 !important;
  justify-content: center !important;
}

body.cloud-home-element-page .cloud-home-hero {
  min-height: 760px !important;
}

body.cloud-home-element-page .cloud-home-hero::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 220px !important;
  background: linear-gradient(180deg, rgba(247, 250, 255, 0), rgba(255, 255, 255, .92)) !important;
  pointer-events: none !important;
}

body.cloud-home-element-page .cloud-home-hero-bg::before {
  top: 96px !important;
  width: min(1120px, 74vw) !important;
  height: 460px !important;
  background:
    radial-gradient(circle, rgba(225, 235, 255, .88), rgba(238, 245, 255, .62) 48%, transparent 72%) !important;
}

body.cloud-home-element-page .cloud-home-hero-bg::after {
  right: 7vw !important;
  top: 178px !important;
  width: 230px !important;
  height: 230px !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, .10), rgba(255, 138, 61, .10)) !important;
  filter: blur(1px) !important;
}

body.cloud-home-element-page .cloud-home-hero-inner {
  min-height: 760px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
  align-content: start !important;
  padding-top: 110px !important;
  gap: 48px !important;
}

body.cloud-home-element-page .cloud-home-copy {
  width: min(100%, 1120px) !important;
  padding-top: 0 !important;
  text-align: center !important;
}

body.cloud-home-element-page .cloud-home-kicker.el-tag {
  height: 38px !important;
  padding: 0 18px !important;
  color: #2563eb !important;
  border: 1px solid rgba(181, 203, 250, .9) !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: 0 10px 24px rgba(49, 84, 145, .08) !important;
}

body.cloud-home-element-page .cloud-home-copy h1 {
  width: min(100%, 1160px) !important;
  margin: 30px auto 24px !important;
  font-size: clamp(64px, 6.8vw, 104px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.085em !important;
  text-wrap: balance !important;
}

body.cloud-home-element-page .cloud-home-copy p {
  width: min(100%, 720px) !important;
  margin: 0 auto !important;
  color: #64728d !important;
  font-size: 19px !important;
  line-height: 1.82 !important;
}

body.cloud-home-element-page .cloud-home-hero-actions {
  justify-content: center !important;
  margin-top: 32px !important;
}

body.cloud-home-element-page .cloud-home-hero-actions .el-button {
  min-width: 146px !important;
  height: 50px !important;
}

body.cloud-home-element-page .cloud-home-pills {
  justify-content: center !important;
  gap: 42px !important;
  margin-top: 42px !important;
}

body.cloud-home-element-page .cloud-home-pill {
  font-size: 22px !important;
  letter-spacing: -.02em !important;
}

body.cloud-home-element-page .cloud-home-pill i {
  width: 46px !important;
  height: 46px !important;
}

body.cloud-home-element-page .cloud-home-visual {
  width: min(100%, 1020px) !important;
  min-height: 244px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 390px !important;
  align-items: stretch !important;
  gap: 18px !important;
}

body.cloud-home-element-page .cloud-home-visual-glow {
  position: absolute !important;
  inset: -18px 90px auto !important;
  height: 220px !important;
  border-radius: 48px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(232, 240, 255, .52)) !important;
  border: 1px solid rgba(218, 228, 247, .58) !important;
  box-shadow: 0 30px 70px rgba(49, 84, 145, .11) !important;
}

body.cloud-home-element-page .cloud-home-flow-card,
body.cloud-home-element-page .cloud-home-quick-card.el-card {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, .78) !important;
  border: 1px solid rgba(221, 231, 249, .85) !important;
  box-shadow: 0 24px 48px rgba(49, 84, 145, .10) !important;
  backdrop-filter: blur(18px) !important;
}

body.cloud-home-element-page .cloud-home-flow-card {
  z-index: 1 !important;
  padding: 22px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

body.cloud-home-element-page .cloud-home-flow-step {
  position: relative !important;
  min-height: 150px !important;
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  border-radius: 22px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(244, 248, 255, .82)) !important;
  border: 1px solid rgba(232, 238, 249, .96) !important;
}

body.cloud-home-element-page .cloud-home-flow-step span {
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #5a9cff, #2563eb) !important;
  box-shadow: 0 12px 22px rgba(37, 99, 235, .20) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

body.cloud-home-element-page .cloud-home-flow-step strong {
  display: block !important;
  color: var(--ch-ink) !important;
  font-size: 20px !important;
  font-weight: 950 !important;
}

body.cloud-home-element-page .cloud-home-flow-step em {
  display: block !important;
  margin-top: 7px !important;
  color: #7b879d !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

body.cloud-home-element-page .cloud-home-quick-card.el-card {
  z-index: 2 !important;
}

body.cloud-home-element-page .cloud-home-quick-card.el-card .el-card__body {
  padding: 22px !important;
}

body.cloud-home-element-page .cloud-home-quick-grid {
  gap: 10px !important;
}

body.cloud-home-element-page .cloud-home-quick-grid button {
  height: 76px !important;
  border-radius: 18px !important;
  background: rgba(248, 251, 255, .9) !important;
}

body.cloud-home-element-page .cloud-home-scenes {
  padding-top: 36px !important;
}

body.cloud-home-element-page .cloud-home-section-title h2,
body.cloud-home-element-page .cloud-home-feature-copy h2 {
  letter-spacing: -.055em !important;
}

body.cloud-home-element-page .cloud-home-scene-grid {
  gap: 16px !important;
}

body.cloud-home-element-page .cloud-home-scene-card.el-card {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

body.cloud-home-element-page .cloud-home-scene-card.el-card:hover {
  border-color: rgba(177, 202, 255, .95) !important;
  box-shadow: 0 28px 58px rgba(45, 78, 135, .12) !important;
  transform: translateY(-4px) !important;
}

body.cloud-home-element-page .cloud-home-scene-card .el-card__body {
  min-height: 172px !important;
}

body.cloud-home-element-page .cloud-home-feature-panel {
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(219, 232, 255, .82), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(244, 248, 255, .9)) !important;
}

@media (max-width: 1180px) {
  body.cloud-home-element-page .cloud-home-hero-inner {
    padding-top: 78px !important;
  }

  body.cloud-home-element-page .cloud-home-copy h1 {
    font-size: clamp(54px, 8vw, 82px) !important;
  }

  body.cloud-home-element-page .cloud-home-visual {
    grid-template-columns: 1fr !important;
    width: min(100%, 840px) !important;
  }

  body.cloud-home-element-page .cloud-home-flow-card {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.cloud-home-element-page .cloud-home-copy h1 {
    font-size: 42px !important;
  }

  body.cloud-home-element-page .cloud-home-copy p {
    font-size: 15px !important;
  }

  body.cloud-home-element-page .cloud-home-pills {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  body.cloud-home-element-page .cloud-home-flow-card {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-06-24 desktop home V3: independent Element Plus cloud-disk landing */
body.cloud-home-v3-page {
  --v3-blue: #2468f2;
  --v3-blue-deep: #174bd8;
  --v3-sky: #6eb7ff;
  --v3-ink: #151b33;
  --v3-text: #384562;
  --v3-muted: #74839c;
  --v3-line: #e4ebf7;
  --v3-soft: #edf5ff;
  --v3-green: #13b981;
  --v3-orange: #ff8b3d;
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--v3-text) !important;
  background:
    radial-gradient(circle at 50% 130px, rgba(214, 228, 255, .95), rgba(245, 249, 255, .42) 44%, transparent 72%),
    linear-gradient(180deg, #f7faff 0%, #f3f8ff 46%, #ffffff 67%, #f7faff 100%) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
}

body.cloud-home-v3-page [v-cloak] {
  display: none !important;
}

body.cloud-home-v3-page *,
body.cloud-home-v3-page *::before,
body.cloud-home-v3-page *::after {
  box-sizing: border-box !important;
}

body.cloud-home-v3-page a {
  color: inherit !important;
  text-decoration: none !important;
}

body.cloud-home-v3-page button {
  font-family: inherit !important;
}

body.cloud-home-v3-page .chv3-shell {
  min-height: 100vh !important;
  background: transparent !important;
}

body.cloud-home-v3-page .chv3-header.el-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 90 !important;
  height: 68px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, .86) !important;
  border-bottom: 1px solid rgba(225, 234, 248, .76) !important;
  box-shadow: 0 10px 28px rgba(30, 57, 105, .05) !important;
  backdrop-filter: blur(18px) saturate(155%) !important;
}

body.cloud-home-v3-page .chv3-nav {
  width: min(100% - 64px, 1320px) !important;
  height: 68px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 214px minmax(180px, 1fr) auto auto !important;
  align-items: center !important;
  gap: 22px !important;
}

body.cloud-home-v3-page .chv3-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-width: 0 !important;
}

body.cloud-home-v3-page .chv3-brand-mark {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  color: #fff !important;
  border-radius: 12px 14px 17px 12px !important;
  background: linear-gradient(145deg, #6eb7ff 0%, #2468f2 58%, #143ed4 100%) !important;
  box-shadow: 0 14px 28px rgba(36, 104, 242, .24) !important;
  transform: rotate(-5deg) !important;
}

body.cloud-home-v3-page .chv3-brand-mark i {
  font-size: 18px !important;
  transform: rotate(5deg) !important;
}

body.cloud-home-v3-page .chv3-brand-text {
  display: grid !important;
  gap: 2px !important;
  line-height: 1.1 !important;
}

body.cloud-home-v3-page .chv3-brand-text strong {
  color: var(--v3-ink) !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  letter-spacing: -.04em !important;
}

body.cloud-home-v3-page .chv3-brand-text em {
  color: #6b7a95 !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

body.cloud-home-v3-page .chv3-notice {
  min-width: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #ef5264 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

body.cloud-home-v3-page .chv3-notice i {
  color: var(--v3-orange) !important;
}

body.cloud-home-v3-page .chv3-menu {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 28px !important;
  color: #2b3650 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

body.cloud-home-v3-page .chv3-menu a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: color .2s ease, transform .2s ease !important;
}

body.cloud-home-v3-page .chv3-menu a:hover {
  color: var(--v3-blue) !important;
  transform: translateY(-1px) !important;
}

body.cloud-home-v3-page .chv3-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

body.cloud-home-v3-page .chv3-actions .el-button {
  height: 38px !important;
  padding: 0 22px !important;
  font-weight: 850 !important;
}

body.cloud-home-v3-page .chv3-download-btn.el-button {
  color: var(--v3-blue) !important;
  border-color: #bfd3ff !important;
  background: rgba(255, 255, 255, .86) !important;
}

body.cloud-home-v3-page .chv3-enter-btn.el-button {
  border: 0 !important;
  background: linear-gradient(135deg, #347dff, #1f5bea) !important;
  box-shadow: 0 12px 24px rgba(36, 104, 242, .24) !important;
}

body.cloud-home-v3-page .chv3-main.el-main {
  padding: 0 !important;
  overflow: visible !important;
}

body.cloud-home-v3-page .chv3-hero {
  position: relative !important;
  min-height: 760px !important;
  overflow: hidden !important;
}

body.cloud-home-v3-page .chv3-hero::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 210px !important;
  background: linear-gradient(180deg, rgba(247, 250, 255, 0), rgba(255, 255, 255, .92)) !important;
  pointer-events: none !important;
}

body.cloud-home-v3-page .chv3-hero-bg,
body.cloud-home-v3-page .chv3-hero-bg span {
  position: absolute !important;
  pointer-events: none !important;
}

body.cloud-home-v3-page .chv3-hero-bg {
  inset: 0 !important;
}

body.cloud-home-v3-page .chv3-hero-bg span:nth-child(1) {
  top: 92px !important;
  left: 50% !important;
  width: min(1120px, 75vw) !important;
  height: 470px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(221, 233, 255, .92), rgba(240, 246, 255, .55) 52%, transparent 74%) !important;
  transform: translateX(-50%) !important;
}

body.cloud-home-v3-page .chv3-hero-bg span:nth-child(2) {
  right: 7vw !important;
  top: 160px !important;
  width: 260px !important;
  height: 260px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(36, 104, 242, .10), rgba(255, 139, 61, .10)) !important;
}

body.cloud-home-v3-page .chv3-hero-bg span:nth-child(3) {
  left: 9vw !important;
  bottom: 118px !important;
  width: 180px !important;
  height: 180px !important;
  border-radius: 44px !important;
  background: linear-gradient(135deg, rgba(19, 185, 129, .10), rgba(110, 183, 255, .12)) !important;
  transform: rotate(18deg) !important;
}

body.cloud-home-v3-page .chv3-hero-inner {
  position: relative !important;
  z-index: 2 !important;
  width: min(100% - 64px, 1320px) !important;
  min-height: 760px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr) !important;
  align-items: center !important;
  gap: 62px !important;
}

body.cloud-home-v3-page .chv3-hero-copy {
  padding-bottom: 18px !important;
}

body.cloud-home-v3-page .chv3-kicker.el-tag {
  height: 38px !important;
  padding: 0 18px !important;
  color: var(--v3-blue) !important;
  border: 1px solid rgba(181, 203, 250, .95) !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 10px 22px rgba(49, 84, 145, .08) !important;
  font-weight: 900 !important;
}

body.cloud-home-v3-page .chv3-kicker i {
  margin-right: 6px !important;
}

body.cloud-home-v3-page .chv3-hero-copy h1 {
  width: min(100%, 760px) !important;
  margin: 28px 0 24px !important;
  color: var(--v3-ink) !important;
  font-size: clamp(64px, 6.2vw, 98px) !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  letter-spacing: -.085em !important;
  text-wrap: balance !important;
}

body.cloud-home-v3-page .chv3-hero-copy p {
  width: min(100%, 650px) !important;
  margin: 0 !important;
  color: #64728d !important;
  font-size: 18px !important;
  line-height: 1.85 !important;
}

body.cloud-home-v3-page .chv3-hero-actions {
  margin-top: 34px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

body.cloud-home-v3-page .chv3-hero-actions .el-button {
  min-width: 148px !important;
  height: 50px !important;
  padding: 0 28px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

body.cloud-home-v3-page .chv3-hero-actions .el-button--primary {
  border: 0 !important;
  background: linear-gradient(135deg, #347dff, #1f5bea) !important;
  box-shadow: 0 16px 32px rgba(36, 104, 242, .25) !important;
}

body.cloud-home-v3-page .chv3-hero-actions i {
  margin-right: 6px !important;
}

body.cloud-home-v3-page .chv3-proof-row {
  margin-top: 42px !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
}

body.cloud-home-v3-page .chv3-proof-row span {
  height: 40px !important;
  padding: 0 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #24314c !important;
  border: 1px solid rgba(220, 230, 247, .92) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 12px 24px rgba(49, 84, 145, .07) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

body.cloud-home-v3-page .chv3-proof-row i {
  color: var(--v3-blue) !important;
}

body.cloud-home-v3-page .chv3-product-stage {
  position: relative !important;
  min-height: 520px !important;
}

body.cloud-home-v3-page .chv3-product-stage::before {
  content: "" !important;
  position: absolute !important;
  inset: 34px 20px 38px !important;
  border: 1px solid rgba(216, 227, 247, .84) !important;
  border-radius: 46px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .74), rgba(238, 245, 255, .66)),
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(36, 104, 242, .055) 58px 60px) !important;
  box-shadow: 0 34px 76px rgba(49, 84, 145, .14) !important;
  backdrop-filter: blur(18px) !important;
}

body.cloud-home-v3-page .chv3-file-card,
body.cloud-home-v3-page .chv3-share-card,
body.cloud-home-v3-page .chv3-download-card {
  position: absolute !important;
  z-index: 2 !important;
  border: 1px solid rgba(219, 229, 248, .9) !important;
  border-radius: 26px !important;
  background: rgba(255, 255, 255, .90) !important;
  box-shadow: 0 26px 54px rgba(46, 78, 138, .13) !important;
  backdrop-filter: blur(16px) !important;
}

body.cloud-home-v3-page .chv3-file-card {
  top: 72px !important;
  left: 0 !important;
  width: 390px !important;
  padding: 22px !important;
}

body.cloud-home-v3-page .chv3-card-top {
  margin-bottom: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body.cloud-home-v3-page .chv3-card-top span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--v3-ink) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

body.cloud-home-v3-page .chv3-card-top i {
  color: var(--v3-blue) !important;
}

body.cloud-home-v3-page .chv3-card-top em {
  padding: 4px 10px !important;
  color: #079468 !important;
  border-radius: 999px !important;
  background: #e8fbf3 !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

body.cloud-home-v3-page .chv3-file-list {
  display: grid !important;
  gap: 10px !important;
}

body.cloud-home-v3-page .chv3-file-list div {
  height: 58px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 12px !important;
  border: 1px solid #edf2fb !important;
  border-radius: 17px !important;
  background: linear-gradient(180deg, #fff, #f8fbff) !important;
}

body.cloud-home-v3-page .chv3-file-list i {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--v3-blue) !important;
  border-radius: 13px !important;
  background: var(--v3-soft) !important;
}

body.cloud-home-v3-page .chv3-file-list strong {
  overflow: hidden !important;
  color: #273653 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.cloud-home-v3-page .chv3-file-list span {
  color: var(--v3-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.cloud-home-v3-page .chv3-share-card {
  top: 190px !important;
  right: 18px !important;
  width: 250px !important;
  padding: 24px !important;
}

body.cloud-home-v3-page .chv3-share-icon {
  width: 46px !important;
  height: 46px !important;
  margin-bottom: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #58a2ff, #2468f2) !important;
  box-shadow: 0 14px 26px rgba(36, 104, 242, .22) !important;
}

body.cloud-home-v3-page .chv3-share-card strong {
  display: block !important;
  color: var(--v3-ink) !important;
  font-size: 19px !important;
  font-weight: 950 !important;
}

body.cloud-home-v3-page .chv3-share-card p {
  margin: 8px 0 18px !important;
  color: var(--v3-muted) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

body.cloud-home-v3-page .chv3-share-card button {
  height: 36px !important;
  padding: 0 16px !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--v3-blue) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

body.cloud-home-v3-page .chv3-download-card {
  left: 84px !important;
  bottom: 44px !important;
  width: 330px !important;
  padding: 22px !important;
}

body.cloud-home-v3-page .chv3-download-card > div {
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

body.cloud-home-v3-page .chv3-download-card strong {
  color: var(--v3-ink) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

body.cloud-home-v3-page .chv3-download-card span {
  color: var(--v3-blue) !important;
  font-size: 20px !important;
  font-weight: 950 !important;
}

body.cloud-home-v3-page .chv3-download-card p {
  margin: 12px 0 0 !important;
  color: var(--v3-muted) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.cloud-home-v3-page .chv3-capabilities,
body.cloud-home-v3-page .chv3-section {
  width: min(100% - 64px, 1320px) !important;
  margin: 0 auto !important;
}

body.cloud-home-v3-page .chv3-capabilities {
  position: relative !important;
  z-index: 4 !important;
  margin-top: -54px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

body.cloud-home-v3-page .chv3-capability-card {
  min-height: 112px !important;
  padding: 20px !important;
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  border: 1px solid rgba(222, 232, 249, .95) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 22px 44px rgba(45, 78, 135, .08) !important;
}

body.cloud-home-v3-page .chv3-capability-card > i {
  width: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--v3-blue) !important;
  border-radius: 16px !important;
  background: var(--v3-soft) !important;
}

body.cloud-home-v3-page .chv3-capability-card strong {
  display: block !important;
  color: var(--v3-ink) !important;
  font-size: 17px !important;
  font-weight: 950 !important;
}

body.cloud-home-v3-page .chv3-capability-card span {
  display: block !important;
  margin-top: 4px !important;
  color: var(--v3-muted) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

body.cloud-home-v3-page .chv3-section {
  padding: 82px 0 !important;
}

body.cloud-home-v3-page .chv3-section-head {
  margin-bottom: 34px !important;
  text-align: center !important;
}

body.cloud-home-v3-page .chv3-section-head span,
body.cloud-home-v3-page .chv3-trust-copy span {
  color: var(--v3-blue) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
}

body.cloud-home-v3-page .chv3-section-head h2,
body.cloud-home-v3-page .chv3-trust-copy h2 {
  margin: 10px 0 12px !important;
  color: var(--v3-ink) !important;
  font-size: 40px !important;
  font-weight: 950 !important;
  letter-spacing: -.055em !important;
  line-height: 1.24 !important;
}

body.cloud-home-v3-page .chv3-section-head p,
body.cloud-home-v3-page .chv3-trust-copy p {
  width: min(100%, 680px) !important;
  margin: 0 auto !important;
  color: var(--v3-muted) !important;
  font-size: 16px !important;
  line-height: 1.76 !important;
}

body.cloud-home-v3-page .chv3-scenes-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body.cloud-home-v3-page .chv3-scene-card.el-card,
body.cloud-home-v3-page .chv3-info-card.el-card {
  border: 1px solid #e4ebf7 !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .90) !important;
  box-shadow: 0 20px 44px rgba(45, 78, 135, .07) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

body.cloud-home-v3-page .chv3-scene-card.el-card:hover,
body.cloud-home-v3-page .chv3-info-card.el-card:hover {
  border-color: rgba(177, 202, 255, .95) !important;
  box-shadow: 0 28px 58px rgba(45, 78, 135, .12) !important;
  transform: translateY(-4px) !important;
}

body.cloud-home-v3-page .chv3-scene-card .el-card__body {
  min-height: 178px !important;
  padding: 24px !important;
}

body.cloud-home-v3-page .chv3-scene-icon {
  width: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--scene-color) !important;
  border-radius: 16px !important;
  background: var(--scene-bg) !important;
  font-size: 18px !important;
}

body.cloud-home-v3-page .chv3-scene-card h3 {
  margin: 18px 0 8px !important;
  color: var(--v3-ink) !important;
  font-size: 19px !important;
  font-weight: 950 !important;
}

body.cloud-home-v3-page .chv3-scene-card p {
  margin: 0 !important;
  color: #68758e !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
}

body.cloud-home-v3-page .chv3-trust-panel {
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
  gap: 34px !important;
  align-items: center !important;
  padding: 44px !important;
  border: 1px solid #dfe9fb !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(219, 232, 255, .84), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(244, 248, 255, .90)) !important;
  box-shadow: 0 28px 64px rgba(45, 78, 135, .10) !important;
}

body.cloud-home-v3-page .chv3-trust-copy p {
  margin-left: 0 !important;
}

body.cloud-home-v3-page .chv3-trust-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

body.cloud-home-v3-page .chv3-trust-item {
  min-height: 156px !important;
  padding: 22px !important;
  border: 1px solid #e5edfb !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .82) !important;
}

body.cloud-home-v3-page .chv3-trust-item i {
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--v3-blue) !important;
  border-radius: 15px !important;
  background: var(--v3-soft) !important;
}

body.cloud-home-v3-page .chv3-trust-item strong {
  display: block !important;
  margin-top: 16px !important;
  color: var(--v3-ink) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

body.cloud-home-v3-page .chv3-trust-item span {
  display: block !important;
  margin-top: 8px !important;
  color: #68758e !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

body.cloud-home-v3-page .chv3-info-section {
  padding-top: 36px !important;
}

body.cloud-home-v3-page .chv3-info-card .el-card__body {
  padding: 24px !important;
}

body.cloud-home-v3-page .chv3-info-head {
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body.cloud-home-v3-page .chv3-info-head strong {
  color: var(--v3-ink) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

body.cloud-home-v3-page .chv3-info-head a {
  color: var(--v3-blue) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body.cloud-home-v3-page .chv3-info-card .el-card__body > a {
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: #55627a !important;
  border-top: 1px solid #edf2fb !important;
  font-size: 14px !important;
}

body.cloud-home-v3-page .chv3-info-card .el-card__body > a span {
  color: var(--v3-blue) !important;
  font-weight: 950 !important;
}

body.cloud-home-v3-page .chv3-footer.el-footer {
  height: auto !important;
  padding: 0 !important;
  color: #aab6c8 !important;
  background: #101827 !important;
}

body.cloud-home-v3-page .chv3-footer-inner {
  width: min(100% - 64px, 1320px) !important;
  margin: 0 auto !important;
  padding: 48px 0 34px !important;
  display: grid !important;
  grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr)) !important;
  gap: 34px !important;
}

body.cloud-home-v3-page .chv3-footer-inner section {
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
}

body.cloud-home-v3-page .chv3-footer-inner h3 {
  margin: 0 0 4px !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

body.cloud-home-v3-page .chv3-footer-inner a,
body.cloud-home-v3-page .chv3-footer-inner p {
  margin: 0 !important;
  color: #aab6c8 !important;
  font-size: 14px !important;
}

body.cloud-home-v3-page .chv3-footer-inner a:hover {
  color: #fff !important;
}

body.cloud-home-v3-page .chv3-footer-bottom {
  width: min(100% - 64px, 1320px) !important;
  margin: 0 auto !important;
  padding: 18px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
  color: #7f8da3 !important;
  font-size: 13px !important;
}

body.cloud-home-v3-page .chv3-floating {
  position: fixed !important;
  right: 22px !important;
  bottom: 36px !important;
  z-index: 80 !important;
  display: grid !important;
  gap: 10px !important;
}

body.cloud-home-v3-page .chv3-floating button {
  width: 74px !important;
  min-height: 66px !important;
  padding: 10px 8px !important;
  display: grid !important;
  place-items: center !important;
  gap: 5px !important;
  color: #273653 !important;
  border: 1px solid #e5edfb !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 18px 36px rgba(45, 78, 135, .14) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

body.cloud-home-v3-page .chv3-floating i {
  color: var(--v3-blue) !important;
  font-size: 18px !important;
}

@media (max-width: 1180px) {
  body.cloud-home-v3-page .chv3-nav {
    width: min(100% - 36px, 1320px) !important;
    grid-template-columns: 204px minmax(120px, 1fr) auto !important;
    gap: 14px !important;
  }

  body.cloud-home-v3-page .chv3-notice {
    display: none !important;
  }

  body.cloud-home-v3-page .chv3-menu {
    gap: 18px !important;
  }

  body.cloud-home-v3-page .chv3-hero-inner {
    width: min(100% - 36px, 960px) !important;
    grid-template-columns: 1fr !important;
    padding: 74px 0 92px !important;
  }

  body.cloud-home-v3-page .chv3-hero-copy {
    text-align: center !important;
  }

  body.cloud-home-v3-page .chv3-hero-copy h1,
  body.cloud-home-v3-page .chv3-hero-copy p {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  body.cloud-home-v3-page .chv3-hero-actions,
  body.cloud-home-v3-page .chv3-proof-row {
    justify-content: center !important;
  }

  body.cloud-home-v3-page .chv3-product-stage {
    width: min(100%, 720px) !important;
    min-height: 500px !important;
    margin: 0 auto !important;
  }

  body.cloud-home-v3-page .chv3-capabilities {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  body.cloud-home-v3-page .chv3-header.el-header,
  body.cloud-home-v3-page .chv3-nav {
    height: auto !important;
  }

  body.cloud-home-v3-page .chv3-nav {
    padding: 14px 0 !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand actions"
      "menu menu" !important;
  }

  body.cloud-home-v3-page .chv3-brand { grid-area: brand !important; }
  body.cloud-home-v3-page .chv3-actions { grid-area: actions !important; }
  body.cloud-home-v3-page .chv3-menu {
    grid-area: menu !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  body.cloud-home-v3-page .chv3-menu::-webkit-scrollbar {
    display: none !important;
  }

  body.cloud-home-v3-page .chv3-capabilities,
  body.cloud-home-v3-page .chv3-section,
  body.cloud-home-v3-page .chv3-footer-inner,
  body.cloud-home-v3-page .chv3-footer-bottom {
    width: min(100% - 32px, 1320px) !important;
  }

  body.cloud-home-v3-page .chv3-scenes-grid,
  body.cloud-home-v3-page .chv3-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.cloud-home-v3-page .chv3-trust-panel,
  body.cloud-home-v3-page .chv3-footer-inner {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  body.cloud-home-v3-page .chv3-download-btn.el-button {
    display: none !important;
  }

  body.cloud-home-v3-page .chv3-hero-copy h1 {
    font-size: 42px !important;
  }

  body.cloud-home-v3-page .chv3-hero-copy p {
    font-size: 15px !important;
  }

  body.cloud-home-v3-page .chv3-product-stage {
    min-height: 0 !important;
    display: grid !important;
    gap: 14px !important;
  }

  body.cloud-home-v3-page .chv3-product-stage::before {
    display: none !important;
  }

  body.cloud-home-v3-page .chv3-file-card,
  body.cloud-home-v3-page .chv3-share-card,
  body.cloud-home-v3-page .chv3-download-card {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
  }

  body.cloud-home-v3-page .chv3-capabilities,
  body.cloud-home-v3-page .chv3-scenes-grid,
  body.cloud-home-v3-page .chv3-trust-grid {
    grid-template-columns: 1fr !important;
  }

  body.cloud-home-v3-page .chv3-section-head h2,
  body.cloud-home-v3-page .chv3-trust-copy h2 {
    font-size: 30px !important;
  }

  body.cloud-home-v3-page .chv3-floating {
    display: none !important;
  }
}

/* 2026-06-25 admin login input alignment hotfix. */
body.vab-admin-page.vab-login-page .login-input-wrap {
  position: relative !important;
  width: 100% !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
}

body.vab-admin-page.vab-login-page .login-input-wrap > i {
  position: absolute !important;
  top: 50% !important;
  left: 12px !important;
  z-index: 2 !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #8fb7e8 !important;
  background: #f3f8ff !important;
  border: 1px solid #e3f0ff !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

body.vab-admin-page.vab-login-page .login-input-wrap .form-input {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 44px 0 48px !important;
  line-height: normal !important;
  text-indent: 0 !important;
}

body.vab-admin-page.vab-login-page .captcha-input-wrap .form-input {
  padding-right: 14px !important;
}

body.vab-admin-page.vab-login-page .password-toggle {
  top: 50% !important;
  right: 10px !important;
  width: 30px !important;
  height: 30px !important;
  transform: translateY(-50%) !important;
}

/* 2026-06-28 Radix Themes visual compatibility for the managed admin shell.
   This is a CSS/token compatibility layer for the existing Vue shell, not React Radix components. */
body.rt-admin-theme {
  --rt-admin-accent: #3e63dd;
  --rt-admin-accent-2: #edf2fe;
  --rt-admin-accent-3: #dfe7fd;
  --rt-admin-accent-9: #3e63dd;
  --rt-admin-accent-10: #3358d4;
  --rt-admin-gray-1: #fcfcfd;
  --rt-admin-gray-2: #f9f9fb;
  --rt-admin-gray-3: #eff0f3;
  --rt-admin-gray-4: #e7e8ec;
  --rt-admin-gray-6: #d0d3d9;
  --rt-admin-gray-8: #8b8d98;
  --rt-admin-gray-11: #60646c;
  --rt-admin-gray-12: #1c2024;
  --rt-admin-green: #2a7e3b;
  --rt-admin-amber: #ad5700;
  --rt-admin-red: #ce2c31;
  --rt-admin-cyan: #107d98;
  --rt-admin-radius-1: 4px;
  --rt-admin-radius-2: 6px;
  --rt-admin-radius-3: 8px;
  --rt-admin-radius-4: 10px;
  --rt-admin-shadow-1: 0 1px 2px rgba(28, 32, 36, 0.06);
  --rt-admin-shadow-2: 0 8px 26px rgba(28, 32, 36, 0.10);
  --rt-admin-rail-width: 68px;
  --rt-admin-sidebar-width: 232px;
  --rt-admin-left-width: 300px;
  --vab-primary: var(--rt-admin-accent);
  --vab-primary-light: var(--rt-admin-accent-2);
  --vab-page-bg: var(--rt-admin-gray-2);
  --vab-border: var(--rt-admin-gray-4);
  color: var(--rt-admin-gray-12) !important;
  background: var(--rt-admin-gray-2) !important;
}

body.rt-admin-theme .rt-shell {
  min-height: 100vh !important;
  background: var(--rt-admin-gray-2) !important;
}

body.rt-admin-theme .rt-shell-rail {
  width: var(--rt-admin-rail-width) !important;
  padding: 10px 8px !important;
  gap: 6px !important;
  background: #20242c !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  scrollbar-width: none !important;
}

body.rt-admin-theme .rt-shell-rail::before {
  width: 42px !important;
  height: 42px !important;
  margin: 0 auto 8px !important;
  border-radius: var(--rt-admin-radius-3) !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
}

body.rt-admin-theme .rt-rail-item {
  width: 52px !important;
  min-height: 56px !important;
  margin: 0 auto !important;
  padding: 7px 0 !important;
  gap: 5px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  border-radius: var(--rt-admin-radius-3) !important;
  outline: none !important;
}

body.rt-admin-theme .rt-rail-item:hover,
body.rt-admin-theme .rt-rail-item.active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

body.rt-admin-theme .rt-rail-item.active {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
}

body.rt-admin-theme .rt-rail-item i {
  font-size: 17px !important;
}

body.rt-admin-theme .rt-rail-item span {
  font-size: 12px !important;
  font-weight: 600 !important;
}

body.rt-admin-theme .rt-sidebar {
  left: var(--rt-admin-rail-width) !important;
  width: var(--rt-admin-sidebar-width) !important;
  min-width: var(--rt-admin-sidebar-width) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  color: var(--rt-admin-gray-11) !important;
  background: var(--rt-admin-gray-1) !important;
  border-right: 1px solid var(--rt-admin-gray-4) !important;
  box-shadow: none !important;
}

body.rt-admin-theme .rt-sidebar-header {
  height: 76px !important;
  padding: 12px 16px !important;
  align-items: flex-start !important;
  border-bottom: 1px solid var(--rt-admin-gray-4) !important;
  background: var(--rt-admin-gray-1) !important;
}

body.rt-admin-theme .rt-sidebar-header h1 {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: flex-start !important;
  color: var(--rt-admin-gray-12) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

body.rt-admin-theme .sidebar-brand,
body.rt-admin-theme .rt-nav-button span,
body.rt-admin-theme .storage-text,
body.rt-admin-theme .system-info div,
body.rt-admin-theme .rt-dropdown-trigger > span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.rt-admin-theme .rt-badge,
body.rt-admin-theme .sidebar-subtitle {
  width: auto !important;
  min-height: 22px !important;
  margin-top: 7px !important;
  padding: 3px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  color: var(--rt-admin-accent-10) !important;
  background: var(--rt-admin-accent-2) !important;
  border: 1px solid var(--rt-admin-accent-3) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

body.rt-admin-theme .rt-scroll-area {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 10px 10px 16px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--rt-admin-gray-6) transparent !important;
}

body.rt-admin-theme .sidebar-footer {
  display: block !important;
  flex: 0 0 auto !important;
  padding: 12px 14px !important;
  color: var(--rt-admin-gray-11) !important;
  background: var(--rt-admin-gray-1) !important;
  border-top: 1px solid var(--rt-admin-gray-4) !important;
}

body.rt-admin-theme .sidebar-footer .storage-label,
body.rt-admin-theme .sidebar-footer .storage-text,
body.rt-admin-theme .sidebar-footer .system-info {
  color: var(--rt-admin-gray-11) !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
}

body.rt-admin-theme .nav-section {
  padding: 12px 10px 6px !important;
  color: var(--rt-admin-gray-8) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

body.rt-admin-theme .rt-nav-button {
  height: 36px !important;
  margin: 2px 0 !important;
  padding: 0 10px !important;
  gap: 10px !important;
  color: var(--rt-admin-gray-11) !important;
  border-radius: var(--rt-admin-radius-2) !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.rt-admin-theme .rt-nav-button:hover {
  color: var(--rt-admin-gray-12) !important;
  background: var(--rt-admin-gray-3) !important;
}

body.rt-admin-theme .rt-nav-button.active {
  color: var(--rt-admin-accent-10) !important;
  background: var(--rt-admin-accent-2) !important;
  box-shadow: inset 0 0 0 1px var(--rt-admin-accent-3) !important;
}

body.rt-admin-theme .rt-progress-track {
  height: 7px !important;
  background: var(--rt-admin-gray-3) !important;
  border-radius: 999px !important;
}

body.rt-admin-theme .rt-progress-track .storage-bar-fill {
  background: linear-gradient(90deg, var(--rt-admin-accent-9), var(--rt-admin-cyan)) !important;
  border-radius: 999px !important;
}

body.rt-admin-theme .rt-main {
  margin-left: var(--rt-admin-left-width) !important;
  min-width: 0 !important;
  background: var(--rt-admin-gray-2) !important;
}

body.rt-admin-theme.vab-sidebar-collapsed {
  --rt-admin-left-width: var(--rt-admin-rail-width);
}

body.rt-admin-theme.vab-sidebar-collapsed .rt-sidebar {
  width: 0 !important;
  min-width: 0 !important;
  border-right: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-100%) !important;
}

body.rt-admin-theme.vab-sidebar-collapsed .rt-main {
  margin-left: var(--rt-admin-rail-width) !important;
}

body.rt-admin-theme .rt-topbar {
  min-height: 60px !important;
  padding: 0 22px !important;
  gap: 12px !important;
  background: rgba(252, 252, 253, 0.94) !important;
  border-bottom: 1px solid var(--rt-admin-gray-4) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
}

body.rt-admin-theme .rt-breadcrumb {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--rt-admin-gray-11) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.rt-admin-theme .vab-title-crumb {
  min-width: 0 !important;
}

body.rt-admin-theme .rt-topbar-actions {
  min-width: 0 !important;
  flex: 0 1 auto !important;
  gap: 12px !important;
}

body.rt-admin-theme .rt-icon-button,
body.rt-admin-theme .vab-shell-tool {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  color: var(--rt-admin-gray-11) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--rt-admin-radius-2) !important;
  box-shadow: none !important;
}

body.rt-admin-theme .rt-icon-button:hover,
body.rt-admin-theme .vab-shell-tool:hover {
  color: var(--rt-admin-accent-10) !important;
  background: var(--rt-admin-accent-2) !important;
  border-color: var(--rt-admin-accent-3) !important;
}

body.rt-admin-theme .rt-icon-button i,
body.rt-admin-theme .vab-shell-tool i {
  margin: 0 !important;
}

body.rt-admin-theme .rt-text-field {
  height: 34px !important;
  min-width: 240px !important;
  padding: 0 11px !important;
  gap: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  color: var(--rt-admin-gray-11) !important;
  background: var(--rt-admin-gray-1) !important;
  border: 1px solid var(--rt-admin-gray-4) !important;
  border-radius: var(--rt-admin-radius-2) !important;
  box-shadow: var(--rt-admin-shadow-1) !important;
}

body.rt-admin-theme .rt-text-field:focus-within {
  border-color: var(--rt-admin-accent-9) !important;
  box-shadow: 0 0 0 2px rgba(62, 99, 221, 0.16) !important;
}

body.rt-admin-theme .rt-text-field input {
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  color: var(--rt-admin-gray-12) !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  font-size: 13px !important;
}

body.rt-admin-theme .rt-search-clear {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--rt-admin-gray-8) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 17px !important;
  line-height: 20px !important;
  cursor: pointer !important;
}

body.rt-admin-theme .rt-search-clear:hover {
  color: var(--rt-admin-gray-12) !important;
  background: var(--rt-admin-gray-3) !important;
}

body.rt-admin-theme .rt-dropdown-trigger {
  height: 38px !important;
  max-width: min(260px, 32vw) !important;
  padding: 0 10px !important;
  gap: 9px !important;
  color: var(--rt-admin-gray-12) !important;
  background: var(--rt-admin-gray-1) !important;
  border: 1px solid var(--rt-admin-gray-4) !important;
  border-radius: var(--rt-admin-radius-3) !important;
  box-shadow: var(--rt-admin-shadow-1) !important;
}

body.rt-admin-theme .rt-dropdown-trigger:hover {
  background: #fff !important;
  border-color: var(--rt-admin-gray-6) !important;
}

body.rt-admin-theme .rt-avatar {
  width: 28px !important;
  height: 28px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--rt-admin-accent-9), #7c66dc) !important;
  border-radius: 999px !important;
  font-size: 13px !important;
}

body.rt-admin-theme .rt-dropdown-menu {
  top: calc(100% + 8px) !important;
  min-width: 180px !important;
  padding: 6px !important;
  background: #fff !important;
  border: 1px solid var(--rt-admin-gray-4) !important;
  border-radius: var(--rt-admin-radius-3) !important;
  box-shadow: var(--rt-admin-shadow-2) !important;
}

body.rt-admin-theme .rt-dropdown-item {
  height: 34px !important;
  padding: 0 10px !important;
  gap: 9px !important;
  color: var(--rt-admin-gray-11) !important;
  border-radius: var(--rt-admin-radius-2) !important;
  font-size: 13px !important;
}

body.rt-admin-theme .rt-dropdown-item:hover {
  color: var(--rt-admin-gray-12) !important;
  background: var(--rt-admin-gray-3) !important;
}

body.rt-admin-theme .rt-dropdown-item.danger {
  color: var(--rt-admin-red) !important;
}

body.rt-admin-theme .rt-tab-nav {
  height: 42px !important;
  padding: 0 14px !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background: var(--rt-admin-gray-1) !important;
  border-bottom: 1px solid var(--rt-admin-gray-4) !important;
  scrollbar-width: thin !important;
}

body.rt-admin-theme .rt-tab-button {
  height: 30px !important;
  min-width: 84px !important;
  max-width: 196px !important;
  flex: 0 1 auto !important;
  padding: 0 11px !important;
  overflow: hidden !important;
  color: var(--rt-admin-gray-11) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--rt-admin-radius-2) !important;
  font-size: 13px !important;
  line-height: 30px !important;
}

body.rt-admin-theme .rt-tab-button span:not(.vab-route-close) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.rt-admin-theme .rt-tab-button:hover {
  color: var(--rt-admin-gray-12) !important;
  background: var(--rt-admin-gray-3) !important;
}

body.rt-admin-theme .rt-tab-button.active {
  color: var(--rt-admin-accent-10) !important;
  background: var(--rt-admin-accent-2) !important;
  border-color: var(--rt-admin-accent-3) !important;
}

body.rt-admin-theme .vab-route-close:hover {
  color: #fff !important;
  background: var(--rt-admin-red) !important;
}

body.rt-admin-theme .rt-frame {
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  background: var(--rt-admin-gray-2) !important;
}

body.rt-admin-theme .rt-frame-shell {
  order: 2 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  position: relative !important;
  display: flex !important;
  background: var(--rt-admin-gray-2) !important;
}

body.rt-admin-theme .rt-frame-loading {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  color: var(--rt-admin-gray-11) !important;
  background: rgba(249, 249, 251, 0.82) !important;
  backdrop-filter: blur(2px) !important;
  font-size: 13px !important;
}

body.rt-admin-theme .rt-dashboard {
  padding: 18px !important;
  overflow: auto !important;
  background: var(--rt-admin-gray-2) !important;
}

body.rt-admin-theme .rt-callout {
  min-height: 88px !important;
  margin-bottom: 16px !important;
  padding: 18px 20px !important;
  color: var(--rt-admin-gray-12) !important;
  background: linear-gradient(135deg, #fff 0%, #f4f7ff 100%) !important;
  border: 1px solid var(--rt-admin-accent-3) !important;
  border-radius: var(--rt-admin-radius-4) !important;
  box-shadow: none !important;
}

body.rt-admin-theme .rt-callout::before {
  display: none !important;
}

body.rt-admin-theme .rt-callout h2 {
  margin-bottom: 5px !important;
  color: var(--rt-admin-gray-12) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

body.rt-admin-theme .rt-callout p {
  color: var(--rt-admin-gray-11) !important;
  font-size: 13px !important;
}

body.rt-admin-theme .stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

body.rt-admin-theme .rt-card {
  background: #fff !important;
  border: 1px solid var(--rt-admin-gray-4) !important;
  border-radius: var(--rt-admin-radius-4) !important;
  box-shadow: none !important;
}

body.rt-admin-theme .rt-card:hover {
  border-color: var(--rt-admin-gray-6) !important;
  box-shadow: var(--rt-admin-shadow-1) !important;
  transform: none !important;
}

body.rt-admin-theme .rt-stat-card {
  min-height: 132px !important;
  padding: 16px !important;
  overflow: hidden !important;
}

body.rt-admin-theme .rt-stat-card::after {
  display: none !important;
}

body.rt-admin-theme .rt-stat-card .icon {
  width: 34px !important;
  height: 34px !important;
  margin-bottom: 12px !important;
  border-radius: var(--rt-admin-radius-3) !important;
  font-size: 15px !important;
}

body.rt-admin-theme .rt-stat-card .icon.blue,
body.rt-admin-theme .rt-stat-card .icon.indigo {
  color: var(--rt-admin-accent-10) !important;
  background: var(--rt-admin-accent-2) !important;
}

body.rt-admin-theme .rt-stat-card .icon.green {
  color: var(--rt-admin-green) !important;
  background: #e9f6e9 !important;
}

body.rt-admin-theme .rt-stat-card .icon.orange {
  color: var(--rt-admin-amber) !important;
  background: #fff3d6 !important;
}

body.rt-admin-theme .rt-stat-card .icon.purple,
body.rt-admin-theme .rt-stat-card .icon.pink {
  color: #7149c6 !important;
  background: #f3edff !important;
}

body.rt-admin-theme .rt-stat-card .icon.cyan {
  color: var(--rt-admin-cyan) !important;
  background: #e7f7fb !important;
}

body.rt-admin-theme .rt-stat-card .icon.red {
  color: var(--rt-admin-red) !important;
  background: #ffefef !important;
}

body.rt-admin-theme .rt-stat-card .label {
  color: var(--rt-admin-gray-11) !important;
  font-size: 12px !important;
}

body.rt-admin-theme .rt-stat-card .value {
  margin-bottom: 6px !important;
  overflow: hidden !important;
  color: var(--rt-admin-gray-12) !important;
  font-size: 25px !important;
  line-height: 1.12 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.rt-admin-theme .rt-stat-card .change {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--rt-admin-green) !important;
  font-size: 12px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.rt-admin-theme .charts-row {
  gap: 14px !important;
  margin-bottom: 14px !important;
}

body.rt-admin-theme .rt-chart-card,
body.rt-admin-theme .quick-actions.rt-card {
  padding: 16px !important;
}

body.rt-admin-theme .rt-chart-card h3,
body.rt-admin-theme .quick-actions h3 {
  margin-bottom: 14px !important;
  color: var(--rt-admin-gray-12) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

body.rt-admin-theme .chart-container {
  height: 280px !important;
}

body.rt-admin-theme .actions-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.rt-admin-theme .rt-action-button {
  min-height: 76px !important;
  padding: 12px 10px !important;
  color: var(--rt-admin-gray-12) !important;
  background: var(--rt-admin-gray-1) !important;
  border: 1px solid var(--rt-admin-gray-4) !important;
  border-radius: var(--rt-admin-radius-3) !important;
  box-shadow: none !important;
}

body.rt-admin-theme .rt-action-button:hover {
  color: var(--rt-admin-accent-10) !important;
  background: var(--rt-admin-accent-2) !important;
  border-color: var(--rt-admin-accent-3) !important;
  transform: none !important;
}

body.rt-admin-theme .rt-action-button i {
  margin-bottom: 8px !important;
  font-size: 18px !important;
}

body.rt-admin-theme .rt-action-button span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: 12px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.rt-admin-theme .chart-empty {
  color: var(--rt-admin-gray-11) !important;
  background: var(--rt-admin-gray-2) !important;
  border-color: var(--rt-admin-gray-4) !important;
  border-radius: var(--rt-admin-radius-3) !important;
}

body.rt-admin-theme .rt-dialog-overlay {
  padding: 24px !important;
  background: rgba(28, 32, 36, 0.38) !important;
  backdrop-filter: blur(4px) !important;
}

body.rt-admin-theme .rt-dialog-overlay:focus {
  outline: none !important;
}

body.rt-admin-theme .rt-dialog {
  width: min(424px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 48px) !important;
  overflow: auto !important;
  background: #fff !important;
  border: 1px solid var(--rt-admin-gray-4) !important;
  border-radius: var(--rt-admin-radius-4) !important;
  box-shadow: var(--rt-admin-shadow-2) !important;
}

body.rt-admin-theme .rt-dialog .modal-header,
body.rt-admin-theme .rt-dialog .modal-footer {
  border-color: var(--rt-admin-gray-4) !important;
}

body.rt-admin-theme .rt-dialog h3 {
  color: var(--rt-admin-gray-12) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

body.rt-admin-theme .rt-input {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  color: var(--rt-admin-gray-12) !important;
  background: #fff !important;
  border: 1px solid var(--rt-admin-gray-4) !important;
  border-radius: var(--rt-admin-radius-2) !important;
  box-shadow: none !important;
}

body.rt-admin-theme .rt-input:focus {
  border-color: var(--rt-admin-accent-9) !important;
  box-shadow: 0 0 0 2px rgba(62, 99, 221, 0.16) !important;
}

body.rt-admin-theme .rt-button {
  height: 32px !important;
  min-width: 72px !important;
  padding: 0 13px !important;
  border-radius: var(--rt-admin-radius-2) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 30px !important;
}

body.rt-admin-theme .rt-button-primary {
  color: #fff !important;
  background: var(--rt-admin-accent-9) !important;
  border-color: var(--rt-admin-accent-9) !important;
}

body.rt-admin-theme .rt-button-primary:hover {
  background: var(--rt-admin-accent-10) !important;
  border-color: var(--rt-admin-accent-10) !important;
}

body.rt-admin-theme .rt-nav-button,
body.rt-admin-theme .rt-tab-button,
body.rt-admin-theme .rt-action-button,
body.rt-admin-theme .rt-dropdown-item,
body.rt-admin-theme .rt-button {
  cursor: pointer !important;
}

body.rt-admin-theme .rt-nav-button:focus-visible,
body.rt-admin-theme .rt-tab-button:focus-visible,
body.rt-admin-theme .rt-action-button:focus-visible,
body.rt-admin-theme .rt-dropdown-trigger:focus-visible,
body.rt-admin-theme .rt-icon-button:focus-visible,
body.rt-admin-theme .rt-button:focus-visible,
body.rt-admin-theme .rt-search-clear:focus-visible {
  outline: 2px solid var(--rt-admin-accent-9) !important;
  outline-offset: 2px !important;
}

@media (max-width: 1280px) {
  body.rt-admin-theme .actions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1024px) {
  body.rt-admin-theme,
  body.rt-admin-theme.vab-sidebar-collapsed {
    --rt-admin-rail-width: 0px;
    --rt-admin-left-width: 0px;
  }

  body.rt-admin-theme.vab-sidebar-open {
    overflow: hidden !important;
  }

  body.rt-admin-theme.vab-sidebar-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1999 !important;
    background: rgba(28, 32, 36, 0.34) !important;
    backdrop-filter: blur(2px) !important;
  }

  body.rt-admin-theme .rt-sidebar,
  body.rt-admin-theme.vab-sidebar-collapsed .rt-sidebar {
    left: 0 !important;
    width: min(280px, 84vw) !important;
    min-width: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(-100%) !important;
  }

  body.rt-admin-theme.vab-sidebar-open .rt-sidebar {
    transform: translateX(0) !important;
  }

  body.rt-admin-theme .rt-main,
  body.rt-admin-theme.vab-sidebar-collapsed .rt-main {
    margin-left: 0 !important;
  }

  body.rt-admin-theme .rt-text-field {
    min-width: min(220px, 38vw) !important;
  }

  body.rt-admin-theme .stats-grid,
  body.rt-admin-theme .charts-row {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  body.rt-admin-theme .rt-topbar {
    min-height: auto !important;
    padding: 10px 12px !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  body.rt-admin-theme .rt-breadcrumb {
    width: 100% !important;
  }

  body.rt-admin-theme .rt-topbar-actions {
    width: 100% !important;
    justify-content: space-between !important;
  }

  body.rt-admin-theme .rt-dropdown-trigger {
    max-width: 42vw !important;
  }

  body.rt-admin-theme .rt-text-field {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  body.rt-admin-theme .rt-dashboard {
    padding: 12px !important;
  }

  body.rt-admin-theme .actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* User center modal refinement: final scoped layer after legacy theme rules. */
body.pan123-workspace .modal-mask,
body.pan123-workspace .pwd-modal-overlay,
body.pan123-workspace .notification-detail-modal,
body.pan123-workspace .safe-folder-modal,
body.pan123-workspace .confirm-modal,
body.pan123-workspace .preview-modal-mask,
body.merchant-wallet .modal-overlay,
body.merchant-developer-center .modal-overlay,
body.merchant-user-center .modal-overlay,
body.uc-route-shell-page .uc-detail-modal-mask,
body.uc-route-shell-page .uc-preview-modal-mask {
  background: rgba(37, 72, 120, 0.16) !important;
  background-image:
    radial-gradient(circle at 28% 16%, rgba(219, 234, 254, 0.52), transparent 34%),
    linear-gradient(180deg, rgba(248, 251, 255, 0.38), rgba(255, 255, 255, 0.18)) !important;
  backdrop-filter: blur(12px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(145%) !important;
}

body.merchant-user-center .modal-overlay {
  background: rgba(74, 52, 36, 0.18) !important;
  background-image:
    radial-gradient(circle at 24% 18%, rgba(255, 236, 194, 0.42), transparent 34%),
    linear-gradient(180deg, rgba(255, 250, 241, 0.34), rgba(255, 255, 255, 0.2)) !important;
}

body.merchant-developer-center .modal-overlay:not(.show) {
  pointer-events: none !important;
}

body.merchant-developer-center .modal-overlay.show {
  pointer-events: auto !important;
}

body.pan123-workspace .modal-box,
body.pan123-workspace .pwd-modal,
body.pan123-workspace .notification-detail-box,
body.pan123-workspace .safe-folder-box,
body.pan123-workspace .confirm-box,
body.pan123-workspace .preview-modal,
body.merchant-wallet .modal,
body.merchant-developer-center .modal,
body.merchant-user-center .modal-container,
body.uc-route-shell-page .uc-detail-modal,
body.uc-route-shell-page .uc-preview-modal {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  border: 1px solid rgba(219, 234, 254, 0.88) !important;
  border-radius: 8px !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.14), 0 8px 24px rgba(37, 99, 235, 0.1) !important;
}

body.merchant-user-center .modal-container {
  background: linear-gradient(180deg, #fffdf8 0%, #fff8eb 100%) !important;
  border-color: rgba(255, 221, 158, 0.62) !important;
  box-shadow: 0 24px 60px rgba(75, 46, 28, 0.14), 0 8px 24px rgba(255, 174, 58, 0.08) !important;
}

body.pan123-workspace .modal-head,
body.pan123-workspace .modal-foot,
body.pan123-workspace .notification-detail-header,
body.pan123-workspace .preview-header,
body.merchant-wallet .modal-header,
body.merchant-developer-center .modal-header,
body.merchant-user-center .modal-header,
body.uc-route-shell-page .uc-detail-header,
body.uc-route-shell-page .uc-preview-header {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(219, 234, 254, 0.9) !important;
}

body.merchant-user-center .modal-header {
  background: linear-gradient(135deg, rgba(255, 250, 241, 0.98) 0%, rgba(255, 238, 199, 0.94) 100%) !important;
  border-color: rgba(255, 221, 158, 0.72) !important;
}

body.merchant-developer-center .modal-overlay.show .modal {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* User avatar dropdown: Radix-inspired final scoped layer. */
body.pan123-workspace .user-dropdown {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

body.pan123-workspace .header-right .user-menu-trigger,
body.pan123-workspace .user-menu-trigger {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin-left: 4px !important;
  padding: 0 !important;
  appearance: none !important;
  border: 1px solid rgba(191, 219, 254, 0.72) !important;
  border-radius: 999px !important;
  color: #2563eb !important;
  background-image: var(--avatar-image, none),
    radial-gradient(circle at 50% 30%, #ffffff 0 23%, transparent 24%),
    radial-gradient(ellipse at 50% 72%, #ffffff 0 30%, transparent 31%),
    linear-gradient(135deg, #edf6ff 0%, #dceaff 100%) !important;
  background-size: cover, auto, auto, auto !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 5px 16px rgba(37, 99, 235, 0.08) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  overflow: visible !important;
  text-shadow: none !important;
  transform: none !important;
}

body.pan123-workspace .header-right .user-menu-trigger:hover,
body.pan123-workspace .header-right .user-menu-trigger.is-open,
body.pan123-workspace .user-menu-trigger:hover,
body.pan123-workspace .user-menu-trigger.is-open {
  color: #1d4ed8 !important;
  border-color: rgba(96, 165, 250, 0.74) !important;
  background-image: var(--avatar-image, none),
    radial-gradient(circle at 50% 30%, #ffffff 0 23%, transparent 24%),
    radial-gradient(ellipse at 50% 72%, #ffffff 0 30%, transparent 31%),
    linear-gradient(135deg, #e7f1ff 0%, #cfe1ff 100%) !important;
  background-size: cover, auto, auto, auto !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 10px 24px rgba(37, 99, 235, 0.14) !important;
  transform: translateY(-1px) !important;
}

body.pan123-workspace .header-right .user-menu-trigger:focus-visible,
body.pan123-workspace .user-menu-trigger:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.32) !important;
  outline-offset: 3px !important;
}

body.pan123-workspace .user-menu-trigger.is-open[data-tip]::before,
body.pan123-workspace .user-menu-trigger.is-open[data-tip]::after,
.header-right .user-menu-trigger.is-open[data-tip]::before,
.header-right .user-menu-trigger.is-open[data-tip]::after {
  display: none !important;
  opacity: 0 !important;
}

body.pan123-workspace .radix-user-menu {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  right: 0 !important;
  width: 264px !important;
  min-width: 264px !important;
  padding: 7px !important;
  border: 1px solid rgba(226, 232, 240, 0.96) !important;
  border-radius: 8px !important;
  color: #334155 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.13), 0 4px 14px rgba(37, 99, 235, 0.08) !important;
  backdrop-filter: blur(14px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(145%) !important;
  transform-origin: top right !important;
  animation: userMenuIn .16s cubic-bezier(.16, 1, .3, 1) !important;
  overflow: visible !important;
  z-index: 1300 !important;
}

body.pan123-workspace .radix-user-menu::before {
  content: "" !important;
  position: absolute !important;
  top: -6px !important;
  right: 17px !important;
  width: 12px !important;
  height: 12px !important;
  border: 1px solid rgba(226, 232, 240, 0.92) !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 2px 0 0 0 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: none !important;
  transform: rotate(45deg) !important;
  z-index: -1 !important;
}

body.pan123-workspace .radix-user-menu .user-menu-header {
  min-width: 0 !important;
  padding: 9px 9px 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%) !important;
}

body.pan123-workspace .radix-user-menu .user-menu-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  color: #2563eb !important;
  background-image: var(--avatar-image, none),
    radial-gradient(circle at 50% 30%, #ffffff 0 25%, transparent 26%),
    radial-gradient(ellipse at 50% 72%, #ffffff 0 31%, transparent 32%),
    linear-gradient(135deg, #eef6ff 0%, #d9e9ff 100%) !important;
  background-size: cover, auto, auto, auto !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(191, 219, 254, 0.82) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  overflow: hidden !important;
}

body.pan123-workspace .radix-user-menu .user-menu-identity {
  min-width: 0 !important;
  display: grid !important;
  gap: 5px !important;
}

body.pan123-workspace .radix-user-menu .user-menu-phone {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.pan123-workspace .radix-user-menu .user-menu-meta {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body.pan123-workspace .radix-user-menu .user-menu-badge {
  height: 18px !important;
  padding: 0 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body.pan123-workspace .radix-user-menu .user-menu-badge.svip {
  color: #fff !important;
  background: linear-gradient(135deg, #fb7185, #f97316) !important;
}

body.pan123-workspace .radix-user-menu .user-menu-badge.vip {
  color: #fff !important;
  background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
}

body.pan123-workspace .radix-user-menu .user-menu-badge.normal {
  color: #64748b !important;
  background: #eef2f7 !important;
}

body.pan123-workspace .radix-user-menu .user-menu-expire {
  min-width: 0 !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.pan123-workspace .radix-user-menu .user-menu-balance {
  margin: 3px 2px 5px !important;
  padding: 8px 9px !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border: 1px solid rgba(219, 234, 254, 0.86) !important;
  border-radius: 7px !important;
  color: #64748b !important;
  background: #f8fbff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body.pan123-workspace .radix-user-menu .user-menu-balance strong {
  color: #2563eb !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.pan123-workspace .radix-user-menu .user-menu-section {
  padding: 2px 0 !important;
  display: grid !important;
  gap: 2px !important;
}

body.pan123-workspace .radix-user-menu .user-menu-separator {
  height: 1px !important;
  margin: 5px 4px !important;
  background: #edf2f7 !important;
}

body.pan123-workspace .radix-user-menu .user-menu-item {
  min-height: 34px !important;
  padding: 0 9px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #334155 !important;
  background: transparent !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  transition: background .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease !important;
}

body.pan123-workspace .radix-user-menu .user-menu-item:hover,
body.pan123-workspace .radix-user-menu .user-menu-item:focus-visible {
  color: #2563eb !important;
  background: #f1f6ff !important;
  box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.62) !important;
  outline: 0 !important;
  transform: translateX(2px) !important;
}

body.pan123-workspace .radix-user-menu .user-menu-item.danger {
  color: #e11d48 !important;
}

body.pan123-workspace .radix-user-menu .user-menu-item.danger:hover,
body.pan123-workspace .radix-user-menu .user-menu-item.danger:focus-visible {
  color: #e11d48 !important;
  background: #fff1f2 !important;
  box-shadow: inset 0 0 0 1px rgba(254, 205, 211, 0.9) !important;
}

body.pan123-workspace .radix-user-menu .user-menu-icon {
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 18px !important;
  color: currentColor !important;
}

body.pan123-workspace .radix-user-menu .user-menu-icon svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
}

@keyframes userMenuIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Toolbar upload/offline dropdowns: Radix-inspired final scoped layer. */
body.pan123-workspace .toolbar-dropdown-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

body.pan123-workspace .toolbar-dropdown-trigger {
  overflow: visible !important;
}

body.pan123-workspace .toolbar-dropdown-trigger[aria-expanded="true"] {
  color: #2563eb !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.10) !important;
  transform: translateY(-1px) !important;
}

body.pan123-workspace .btn-upload.toolbar-dropdown-trigger[aria-expanded="true"] {
  color: #fff !important;
  border-color: #2563eb !important;
  background: #2563eb !important;
}

body.pan123-workspace .cloud-action-dropdown {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: 0 !important;
  width: 246px !important;
  min-width: 246px !important;
  padding: 7px !important;
  border: 1px solid rgba(226, 232, 240, 0.96) !important;
  border-radius: 8px !important;
  color: #334155 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.13), 0 4px 14px rgba(37, 99, 235, 0.08) !important;
  backdrop-filter: blur(14px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(145%) !important;
  transform-origin: top left !important;
  animation: toolbarDropdownIn .16s cubic-bezier(.16, 1, .3, 1) !important;
  overflow: visible !important;
  z-index: 1300 !important;
}

body.pan123-workspace .cloud-action-dropdown::before {
  content: "" !important;
  position: absolute !important;
  top: -6px !important;
  left: 22px !important;
  width: 12px !important;
  height: 12px !important;
  border: 1px solid rgba(226, 232, 240, 0.92) !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 2px 0 0 0 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: none !important;
  transform: rotate(45deg) !important;
  z-index: -1 !important;
}

body.pan123-workspace .cloud-action-item {
  width: 100% !important;
  min-height: 58px !important;
  padding: 9px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: #334155 !important;
  background: transparent !important;
  cursor: pointer !important;
  font: inherit !important;
  text-align: left !important;
  transition: background .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease !important;
}

body.pan123-workspace .cloud-action-item:hover,
body.pan123-workspace .cloud-action-item:focus-visible {
  color: #2563eb !important;
  background: #f1f6ff !important;
  box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.62) !important;
  outline: 0 !important;
  transform: translateX(2px) !important;
}

body.pan123-workspace .cloud-action-item.is-disabled {
  cursor: not-allowed !important;
  opacity: 0.66 !important;
}

body.pan123-workspace .cloud-action-item.is-disabled:hover,
body.pan123-workspace .cloud-action-item.is-disabled:focus-visible {
  color: #334155 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body.pan123-workspace .cloud-action-icon {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 36px !important;
  border-radius: 8px !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
}

body.pan123-workspace .cloud-action-icon svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}

body.pan123-workspace .cloud-action-icon-blue {
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
}

body.pan123-workspace .cloud-action-icon-amber {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}

body.pan123-workspace .cloud-action-icon-green {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
}

body.pan123-workspace .cloud-action-icon-violet {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
}

body.pan123-workspace .cloud-action-icon-slate {
  background: linear-gradient(135deg, #64748b, #475569) !important;
}

body.pan123-workspace .cloud-action-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 5px !important;
}

body.pan123-workspace .cloud-action-title {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

body.pan123-workspace .cloud-action-desc {
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

body.pan123-workspace .cloud-action-title .vip-tag {
  height: 18px !important;
  padding: 0 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  color: #7c2d12 !important;
  background: #ffedd5 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

@keyframes toolbarDropdownIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Final program-wide UI font boundary; preserve page-specific size and density. */
html,
body,
body button,
body input,
body select,
body textarea {
  font-family: var(--app-ui-font-family) !important;
}