/*
 * UI direction A — 简洁高级、浅色卡片风格
 * 仅覆盖视觉样式，不改变 Vue 组件、路由、事件或 API。
 */
:root {
  --ui-a-bg: #f8faff;
  --ui-a-surface: #ffffff;
  --ui-a-surface-soft: #f2f5fb;
  --ui-a-border: #e5eaf3;
  --ui-a-text: #172033;
  --ui-a-muted: #718098;
  --ui-a-primary: #5b7cff;
  --ui-a-primary-soft: #eef2ff;
  --ui-a-success: #32a875;
  --ui-a-warning: #e89b36;
  --ui-a-shadow: 0 10px 26px rgba(36, 64, 109, .07);
}

html, body, #app {
  background: var(--ui-a-bg) !important;
  color: var(--ui-a-text);
}

.layout-root {
  background: var(--ui-a-bg) !important;
}

.layout-aside {
  width: 246px !important;
  color: var(--ui-a-text) !important;
  background: var(--ui-a-surface) !important;
  border-right: 1px solid var(--ui-a-border);
  box-shadow: 4px 0 22px rgba(36, 64, 109, .035);
}

.layout-aside .brand {
  color: var(--ui-a-text) !important;
  border-bottom: 1px solid var(--ui-a-border) !important;
  padding: 22px 20px !important;
}

.menu-group-title {
  color: var(--ui-a-muted) !important;
  padding: 15px 20px 7px !important;
}

.layout-menu,
.drawer-menu {
  background: transparent !important;
}

.layout-menu .el-menu-item,
.drawer-menu .el-menu-item {
  color: #68758b !important;
  height: 44px !important;
  line-height: 44px !important;
  margin: 3px 12px;
  border-radius: 12px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.layout-menu .el-menu-item:hover,
.drawer-menu .el-menu-item:hover {
  color: var(--ui-a-primary) !important;
  background: #f3f5ff !important;
}

.layout-menu .el-menu-item.is-active,
.drawer-menu .el-menu-item.is-active {
  color: #4d66db !important;
  background: var(--ui-a-primary-soft) !important;
  font-weight: 700;
}

.layout-menu .el-menu-item .el-icon,
.drawer-menu .el-menu-item .el-icon {
  color: currentColor !important;
}

.main-container {
  background: var(--ui-a-bg) !important;
}

.layout-header {
  min-height: 60px;
  color: var(--ui-a-text) !important;
  background: rgba(255, 255, 255, .94) !important;
  border-bottom: 1px solid var(--ui-a-border) !important;
  box-shadow: 0 2px 10px rgba(36, 64, 109, .04) !important;
  backdrop-filter: blur(10px);
}

.header-title {
  color: var(--ui-a-text) !important;
}

.header-engine {
  color: var(--ui-a-muted);
}

.engine-mode-tag {
  color: #637089 !important;
  background: var(--ui-a-surface-soft) !important;
  border: 1px solid var(--ui-a-border);
  border-radius: 999px !important;
}

.layout-main {
  background: var(--ui-a-bg) !important;
  padding: 26px 30px !important;
}

.workbench,
.radar-dashboard,
.compass-dashboard,
.settings-page,
.gallery-page,
.tasks-page,
.assets-page,
.product-library-page,
.copy-factory-page,
.image-transfer-page,
.video-transfer-page,
.anti-ai-page {
  color: var(--ui-a-text);
}

.workbench-header,
.dashboard-hero,
.page-header {
  margin-bottom: 22px;
}

.page-title,
.dashboard-hero h2,
.workbench-header h1 {
  color: var(--ui-a-text) !important;
  letter-spacing: -.015em;
}

.page-subtitle,
.dashboard-hero .hero-sub,
.workbench-header p {
  color: var(--ui-a-muted) !important;
}

.panel-card,
.el-card,
.dashboard-panel,
.panel,
.settings-section,
.section-card {
  background: var(--ui-a-surface) !important;
  border: 1px solid var(--ui-a-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--ui-a-shadow) !important;
}

.panel-card .el-card__header,
.el-card .el-card__header,
.section-card .el-card__header {
  color: var(--ui-a-text);
  background: transparent !important;
  border-bottom: 1px solid #edf0f5 !important;
}

.el-card__body {
  color: var(--ui-a-text);
}

.el-button {
  border-radius: 10px !important;
  font-weight: 650;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.el-button:hover:not(.is-disabled) {
  transform: translateY(-1px);
}

.el-button--primary {
  color: #fff !important;
  background: var(--ui-a-primary) !important;
  border-color: var(--ui-a-primary) !important;
  box-shadow: 0 7px 15px rgba(91, 124, 255, .2);
}

.el-button--primary:hover:not(.is-disabled) {
  background: #4d70ef !important;
  border-color: #4d70ef !important;
}

.el-button--success {
  color: #fff !important;
  background: var(--ui-a-success) !important;
  border-color: var(--ui-a-success) !important;
}

.el-button--info.is-plain,
.el-button--primary.is-plain,
.el-button--default,
.el-button.is-plain {
  color: #53627a;
  background: var(--ui-a-surface-soft);
  border-color: var(--ui-a-border);
}

.el-button--danger.is-plain {
  color: #d26f76 !important;
  background: #fff2f3 !important;
  border-color: #f4d5d8 !important;
}

.el-input__wrapper,
.el-select__wrapper,
.el-textarea__inner {
  background: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 0 0 1px #dfe5ef inset !important;
}

.el-input__wrapper:hover,
.el-select__wrapper:hover,
.el-textarea__inner:hover {
  box-shadow: 0 0 0 1px #b9c6e9 inset !important;
}

.el-input__wrapper.is-focus,
.el-select__wrapper.is-focused,
.el-textarea__inner:focus {
  box-shadow: 0 0 0 1px var(--ui-a-primary) inset, 0 0 0 3px rgba(91, 124, 255, .11) !important;
}

.el-radio-button__inner {
  border-color: var(--ui-a-border) !important;
  color: #66748b !important;
  background: #fff !important;
  border-radius: 9px !important;
}

.el-radio-button:first-child .el-radio-button__inner {
  border-left: 1px solid var(--ui-a-border) !important;
}

.el-radio-button__original-radio:checked + .el-radio-button__inner {
  color: #fff !important;
  background: var(--ui-a-primary) !important;
  border-color: var(--ui-a-primary) !important;
  box-shadow: -1px 0 0 0 var(--ui-a-primary) !important;
}

.el-divider {
  border-color: #edf0f5 !important;
}

.el-table {
  --el-table-border-color: #edf0f5;
  --el-table-header-bg-color: #fafbfe;
  --el-table-row-hover-bg-color: #f7f8ff;
  color: var(--ui-a-text) !important;
  border-radius: 12px;
  overflow: hidden;
}

.el-table th.el-table__cell {
  color: #718098 !important;
  font-weight: 700;
}

.el-dialog,
.el-message-box,
.el-popper.is-pure {
  border: 1px solid var(--ui-a-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(36, 64, 109, .18) !important;
}

.el-dialog__header,
.el-message-box__header {
  color: var(--ui-a-text) !important;
}

.el-popper.is-light,
.el-select-dropdown {
  border-color: var(--ui-a-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 28px rgba(36, 64, 109, .12) !important;
}

.el-select-dropdown__item.is-selected,
.el-select-dropdown__item:hover {
  color: #4d66db !important;
  background: var(--ui-a-primary-soft) !important;
}

.preview-placeholder,
.preview-block,
.upload-text,
.upload-hint,
.inspire-section,
.history-collapse {
  border-radius: 14px !important;
}

.el-upload-dragger {
  border-color: #ccd6ee !important;
  background: #fbfcff !important;
  border-radius: 14px !important;
}

.el-upload-dragger:hover {
  border-color: #9eafff !important;
  background: #f5f7ff !important;
}

.mobile-sidebar-drawer {
  background: #fff !important;
}

.mobile-sidebar-drawer .el-drawer__body {
  background: #fff !important;
}

@media screen and (max-width: 768px) {
  .layout-main {
    padding: 14px 10px !important;
  }

  .layout-header {
    box-shadow: 0 2px 8px rgba(36, 64, 109, .06) !important;
  }

  .hamburger-btn {
    color: var(--ui-a-text) !important;
  }
}


/* Dashboard hero and login are included in the same A direction. */
.dashboard-hero {
  color: var(--ui-a-text) !important;
  background: #ffffff !important;
  border: 1px solid var(--ui-a-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--ui-a-shadow) !important;
}

.dashboard-hero .hero-title,
.dashboard-hero .hero-sub,
.dashboard-hero .stat-label,
.dashboard-hero .stat-value {
  color: var(--ui-a-text) !important;
}

.dashboard-hero .hero-sub,
.dashboard-hero .stat-label {
  color: var(--ui-a-muted) !important;
}

.dashboard-hero .stat-chip,
.dashboard-hero .stat-chip.highlight {
  background: var(--ui-a-primary-soft) !important;
  border-color: #dce3ff !important;
  color: #4d66db !important;
}

.empty-hero,
.radar-dashboard .empty-hero,
.compass-dashboard .empty-hero {
  color: var(--ui-a-text) !important;
}

.empty-hero p,
.empty-hero .empty-description {
  color: var(--ui-a-muted) !important;
}

.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f4f7ff 0%, #f8faff 55%, #eef2ff 100%) !important;
}

.login-card {
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid var(--ui-a-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 60px rgba(36, 64, 109, .14) !important;
}

.login-header,
.login-desc,
.login-footer,
.login-label {
  color: var(--ui-a-text) !important;
}

.login-desc,
.login-footer {
  color: var(--ui-a-muted) !important;
}

.login-logo {
  color: #ffffff !important;
  background: linear-gradient(135deg, #5b7cff, #8f72ff) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 22px rgba(91, 124, 255, .22);
}

.login-btn {
  height: 44px !important;
  border-radius: 11px !important;
  box-shadow: 0 9px 18px rgba(91, 124, 255, .22);
}