/* ============================================================================
   DK10 UI theme layer  ·  珊瑚红 / 白 / 松石青
   ----------------------------------------------------------------------------
   纯叠加层：不修改任何编译产物与后端接口，只在 index.html 里多引一个 CSS。
   设计令牌（Design Tokens）
     主色 珊瑚红  #D93A08  (交互态，白字对比度 4.6:1 → WCAG AA)
     品牌珊瑚红   #FF5A1F  (logo 取色，用于图形/高亮/渐变等大面积色块)
     第三种色 松石青 #12A6A6 (珊瑚红的互补色相，用于图表与次要强调)
     中性色 墨 #1A222C（logo 取色）/ 白 #FFFFFF
   ========================================================================== */

:root {
  /* ---- 珊瑚红（主色）---- */
  --dk10-coral: #ff5a1f;
  --dk10-coral-strong: #d93a08;
  --dk10-coral-text: #c13a08;
  --dk10-coral-soft: #ff7f4d;
  --dk10-coral-tint: #fff3ee;
  --dk10-coral-tint-2: #ffe3d7;
  --dk10-coral-border: #ffc6ae;

  /* ---- 松石青（第三种颜色）---- */
  --dk10-teal: #0e9c9c;
  --dk10-teal-strong: #0b8282;
  --dk10-teal-tint: #e6f7f7;

  /* 深珊瑚（用于浅底上的小字，保证 AA 对比度） */
  --dk10-coral-deep: #a72b05;

  /* ---- 中性 ---- */
  --dk10-ink: #1a222c;
  --dk10-ink-2: #46505e;
  --dk10-ink-3: #6b7480;
  --dk10-line: #eceef2;
  --dk10-line-soft: #f3f5f8;
  --dk10-bg: #f7f8fa;
  --dk10-white: #ffffff;

  /* ---- 高亮 / 语义色 ---- */
  --dk10-hl: #ffb020;
  --dk10-success: #12a150;
  --dk10-warning: #ffb020;
  --dk10-danger: #e5484d;
  --dk10-violet: #8b5cf6;

  /* ---- 图表色序 ---- */
  --dk10-c1: #ff5a1f;
  --dk10-c2: #ffb020;
  --dk10-c3: #0e9c9c;
  --dk10-c4: #8b5cf6;
  --dk10-c5: #e5484d;
  --dk10-c6: #12a150;
  --dk10-c7: #46505e;

  --dk10-radius: 14px;
  --dk10-radius-sm: 10px;
  --dk10-shadow-sm: 0 1px 2px rgba(26, 34, 44, 0.04), 0 2px 8px rgba(26, 34, 44, 0.05);
  --dk10-shadow: 0 6px 24px rgba(26, 34, 44, 0.07), 0 1px 3px rgba(26, 34, 44, 0.05);
  --dk10-shadow-lg: 0 18px 50px rgba(217, 58, 8, 0.14), 0 6px 18px rgba(26, 34, 44, 0.08);
  --dk10-grad: linear-gradient(135deg, #ff7a33 0%, #ff5a1f 45%, #d93a08 100%);
}

/* ==========================================================================
   1. 重写 antd 5 的 CSS 变量（cssVar 模式）→ 全局珊瑚红
   ========================================================================== */
[class*='css-var-'] {
  /* 主色阶（1 最浅 → 7 最深） */
  --ant-color-primary: #d93a08 !important;
  --ant-color-primary-hover: #ff5a1f !important;
  --ant-color-primary-active: #a72b05 !important;
  --ant-color-primary-bg: #fff3ee !important;
  --ant-color-primary-bg-hover: #ffe3d7 !important;
  --ant-color-primary-border: #ffc6ae !important;
  --ant-color-primary-border-hover: #ff9b73 !important;
  --ant-color-primary-text: #c13a08 !important;
  --ant-color-primary-text-hover: #d93a08 !important;
  --ant-color-primary-text-active: #a72b05 !important;

  /* 蓝色系（原来整套 UI 的蓝就是主色）→ 一并换成珊瑚红阶 */
  --ant-blue: #d93a08 !important;
  --ant-blue-1: #fff3ee !important;
  --ant-blue-2: #ffe3d7 !important;
  --ant-blue-3: #ffc6ae !important;
  --ant-blue-4: #ff9b73 !important;
  --ant-blue-5: #ff7f4d !important;
  --ant-blue-6: #ff5a1f !important;
  --ant-blue-7: #d93a08 !important;
  --ant-blue-8: #a72b05 !important;
  --ant-blue-9: #7d2004 !important;
  --ant-blue-10: #521502 !important;

  /* 链接 / info 跟主色同源 */
  --ant-color-link: #c13a08 !important;
  --ant-color-link-hover: #ff5a1f !important;
  --ant-color-link-active: #a72b05 !important;
  --ant-color-info: #0e9c9c !important;
  --ant-color-info-bg: #e6f7f7 !important;
  --ant-color-info-bg-hover: #cdeeee !important;
  --ant-color-info-border: #8ed3d3 !important;
  --ant-color-info-border-hover: #6ac6c6 !important;
  --ant-color-info-hover: #2fb3b3 !important;
  --ant-color-info-active: #0b8282 !important;
  --ant-color-info-text: #0b8282 !important;
  --ant-color-info-text-hover: #12a6a6 !important;
  --ant-color-info-text-active: #0b6f6f !important;

  /* 语义色（绿/黄/红）微调到与珊瑚红同调和的明度 */
  --ant-color-success: #12a150 !important;
  --ant-color-success-bg: #e9f8ef !important;
  --ant-color-warning: #ffb020 !important;
  --ant-color-warning-bg: #fff7e6 !important;
  --ant-color-error: #e5484d !important;
  --ant-color-error-bg: #fdeeee !important;

  /* 文本 / 背景 / 圆角 */
  --ant-color-text-heading: #1a222c !important;
  --ant-color-text: rgba(26, 34, 44, 0.88) !important;
  --ant-color-text-secondary: rgba(26, 34, 44, 0.64) !important;
  --ant-color-text-tertiary: rgba(26, 34, 44, 0.45) !important;
  --ant-color-text-quaternary: rgba(26, 34, 44, 0.28) !important;
  --ant-border-radius: 8px !important;
  --ant-border-radius-lg: 12px !important;
}

/* ==========================================================================
   2. 基础排版 / 滚动条
   ========================================================================== */
body,
#root {
  background: var(--dk10-bg);
  color: var(--dk10-ink);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: #d9dde4;
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--dk10-coral-soft);
  background-clip: content-box;
}
*::-webkit-scrollbar-track {
  background: transparent;
}

/* 首屏 loading 动画（scripts/loading.js 里的写死蓝色） */
.ant-spin-dot-item {
  background-color: var(--dk10-coral) !important;
}
.loading-title {
  color: var(--dk10-ink) !important;
  letter-spacing: 0.02em;
}
.loading-sub-title {
  color: var(--dk10-ink-3) !important;
}

/* 页面选中高亮 */
::selection {
  background: var(--dk10-coral-tint-2);
  color: var(--dk10-coral-strong);
}

/* ==========================================================================
   3. 布局骨架：侧边栏 / 顶栏 / 内容区
   ========================================================================== */
/* 右侧贴边的 Pro 设置抽屉把手：默认是 antd 蓝，一并换成珊瑚红 */
.ant-pro-setting-drawer-handle {
  background: var(--dk10-coral-strong) !important;
  box-shadow: 0 4px 14px rgba(217, 58, 8, 0.35) !important;
}
.ant-pro-setting-drawer-handle:hover {
  background: var(--dk10-coral) !important;
}

.ant-pro-layout .ant-layout-sider,
.ant-pro-sider {
  background: var(--dk10-white) !important;
  border-right: 1px solid var(--dk10-line);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.ant-pro-sider-logo,
.ant-pro-sider-logo h1,
.ant-pro-global-header-logo h1 {
  color: var(--dk10-ink) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
}
.ant-pro-sider-logo img,
.ant-pro-global-header-logo img {
  border-radius: 7px;
  box-shadow: 0 2px 8px rgba(26, 34, 44, 0.18);
}
.ant-pro-global-header {
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--dk10-line) !important;
}
.ant-layout,
.ant-layout-content,
.ant-pro-layout-container,
.ant-pro-layout .ant-layout-header {
  background: transparent !important;
}
.ant-pro-layout-bg-list {
  opacity: 0.5;
}
.ant-pro-page-container,
.ant-pro-page-container-children-container {
  background: transparent !important;
}
.ant-pro-page-container-warp-page-header {
  background: transparent !important;
}

/* ==========================================================================
   4. 菜单：选中/悬停用珊瑚红高亮
   ========================================================================== */
.ant-menu-light .ant-menu-item,
.ant-menu-light .ant-menu-submenu-title {
  border-radius: 10px;
  margin-inline: 8px;
  width: calc(100% - 16px);
  color: var(--dk10-ink-2);
}
.ant-menu-light .ant-menu-item:hover,
.ant-menu-light .ant-menu-submenu-title:hover {
  background: var(--dk10-coral-tint) !important;
  color: var(--dk10-coral-text) !important;
}
.ant-menu-light .ant-menu-item-selected,
.ant-menu-light .ant-menu-item-selected:hover {
  background: var(--dk10-coral-tint-2) !important;
  color: var(--dk10-coral-deep) !important;
  font-weight: 600;
}
.ant-menu-light .ant-menu-item-selected::after {
  display: none;
}
.ant-menu-light .ant-menu-submenu-selected > .ant-menu-submenu-title {
  color: var(--dk10-coral-deep) !important;
}
.ant-menu-light .ant-menu-item-selected .anticon,
.ant-menu-light .ant-menu-item:hover .anticon {
  color: var(--dk10-coral) !important;
}

/* ==========================================================================
   5. 表单控件
   ========================================================================== */
.ant-btn-primary {
  background: var(--dk10-grad) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(217, 58, 8, 0.24);
  font-weight: 600;
}
.ant-btn-primary:not(:disabled):hover {
  background: linear-gradient(135deg, #ff8b4d 0%, #ff6329 45%, #e0430c 100%) !important;
  box-shadow: 0 8px 22px rgba(217, 58, 8, 0.3);
}
.ant-btn-primary:not(:disabled):active {
  background: linear-gradient(135deg, #e8551d 0%, #c8380a 100%) !important;
}
.ant-btn-default:not(:disabled):hover,
.ant-btn-text:not(:disabled):hover {
  color: var(--dk10-coral-text) !important;
  border-color: var(--dk10-coral-border) !important;
}
.ant-btn-link,
.ant-btn-link:hover {
  color: var(--dk10-coral-text) !important;
}
/* 列表页查询区“展开/收起”链接按钮（原为 antd 蓝） */
.ant-pro-query-filter-collapse-button,
.ant-pro-query-filter-collapse-button a,
.ant-pro-query-filter-collapse-button .anticon {
  color: var(--dk10-coral-text) !important;
}
.ant-typography a,
a {
  color: var(--dk10-coral-text);
}
a:hover {
  color: var(--dk10-coral);
}

.ant-input:focus,
.ant-input-focused,
.ant-input-affix-wrapper:focus,
.ant-input-affix-wrapper-focused,
.ant-input-outlined:focus-within,
.ant-select-focused .ant-select-selector,
.ant-picker-focused,
.ant-input-number-focused {
  border-color: var(--dk10-coral) !important;
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.14) !important;
}
.ant-input:hover,
.ant-input-affix-wrapper:hover,
.ant-select:not(.ant-select-disabled):hover .ant-select-selector,
.ant-picker:hover {
  border-color: var(--dk10-coral-soft) !important;
}
.ant-select-item-option-selected {
  background: var(--dk10-coral-tint) !important;
  color: var(--dk10-coral-text) !important;
  font-weight: 600;
}
.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
  background: var(--dk10-line-soft) !important;
}

.ant-checkbox-checked .ant-checkbox-inner,
.ant-radio-checked .ant-radio-inner {
  background-color: var(--dk10-coral) !important;
  border-color: var(--dk10-coral) !important;
}
.ant-switch.ant-switch-checked {
  background: var(--dk10-coral-strong) !important;
}
.ant-slider-track,
.ant-progress-bg,
.ant-progress-steps-item-active {
  background: var(--dk10-coral) !important;
}
.ant-slider-handle::after {
  box-shadow: 0 0 0 2px var(--dk10-coral) !important;
}

.ant-pagination-item:hover,
.ant-pagination-prev:hover .ant-pagination-item-link,
.ant-pagination-next:hover .ant-pagination-item-link {
  border-color: var(--dk10-coral) !important;
}
.ant-pagination-item:hover a {
  color: var(--dk10-coral) !important;
}
.ant-pagination-item-active {
  background: var(--dk10-coral-tint) !important;
  border-color: var(--dk10-coral) !important;
}
.ant-pagination-item-active a {
  color: var(--dk10-coral-text) !important;
  font-weight: 600;
}

.ant-tabs-tab-active .ant-tabs-tab-btn,
.ant-tabs-tab:hover {
  color: var(--dk10-coral-text) !important;
}
.ant-tabs-ink-bar {
  background: var(--dk10-coral) !important;
}

/* ==========================================================================
   6. 数据展示：卡片 / 表格 / 标签 / 弹层
   ========================================================================== */
.ant-card {
  background: var(--dk10-white) !important;
  border-radius: var(--dk10-radius) !important;
  box-shadow: var(--dk10-shadow-sm) !important;
  border: 1px solid var(--dk10-line) !important;
}
.ant-card-bordered {
  border-color: var(--dk10-line) !important;
}
.ant-table-wrapper .ant-table {
  background: transparent;
}
.ant-table-thead > tr > th {
  background: var(--dk10-line-soft) !important;
  color: var(--dk10-ink-2) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--dk10-line) !important;
}
.ant-table-thead > tr > th::before {
  display: none !important;
}
.ant-table-tbody > tr > td {
  border-bottom: 1px solid var(--dk10-line-soft) !important;
}
.ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-tbody > tr > td.ant-table-cell-row-hover {
  background: var(--dk10-coral-tint) !important;
}
.ant-table-tbody > tr.ant-table-row-selected > td {
  background: var(--dk10-coral-tint-2) !important;
}
.ant-table-column-sorter-up.active,
.ant-table-column-sorter-down.active {
  color: var(--dk10-coral) !important;
}
.ant-table-filter-trigger.active {
  color: var(--dk10-coral) !important;
}

.ant-tag {
  border-radius: 999px;
  font-weight: 500;
}
.ant-badge-status-success .ant-badge-status-dot,
.ant-badge .ant-badge-status-success {
  background: var(--dk10-success);
}
.ant-alert-info {
  border-color: var(--dk10-teal-tint) !important;
}
.ant-modal-content,
.ant-drawer-content,
.ant-dropdown-menu,
.ant-picker-dropdown .ant-picker-panel-container,
.ant-select-dropdown {
  border-radius: var(--dk10-radius) !important;
  box-shadow: var(--dk10-shadow) !important;
}
.ant-dropdown-menu-item-selected,
.ant-dropdown-menu-item-active:hover {
  background: var(--dk10-coral-tint) !important;
  color: var(--dk10-coral-text) !important;
}
.ant-steps-item-process .ant-steps-item-icon {
  background: var(--dk10-coral) !important;
  border-color: var(--dk10-coral) !important;
}
.ant-steps-item-finish .ant-steps-item-icon {
  border-color: var(--dk10-coral) !important;
}
.ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon {
  color: var(--dk10-coral) !important;
}
.ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-tail::after {
  background: var(--dk10-coral-border) !important;
}

/* 页面标题（ProPageContainer） */
.ant-page-header-heading-title {
  color: var(--dk10-ink) !important;
  font-weight: 700 !important;
}
.ant-descriptions-item-label {
  color: var(--dk10-ink-3) !important;
}

/* ==========================================================================
   7. 仪表盘：KPI 卡片
   ========================================================================== */
.dk10-dash .ant-pro-page-container-warp-page-header {
  display: none !important;
}
.dk10-dash .ant-pro-grid-content {
  padding-block-start: 0 !important;
}
.dk10-dash-head h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--dk10-ink);
}
.dk10-dash-head h3::before {
  content: '';
  width: 6px;
  height: 22px;
  border-radius: 4px;
  background: var(--dk10-grad);
  box-shadow: 0 2px 10px rgba(217, 58, 8, 0.35);
}

/* 7 张 KPI 卡排成一行（≥1200px），其余断点 4/2 列 */
@media (min-width: 1200px) {
  .dk10-kpi-row > .ant-col {
    flex: 0 0 14.2857% !important;
    max-width: 14.2857% !important;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .dk10-kpi-row > .ant-col {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
}

.dk10-kpi-row > .ant-col > .ant-card {
  position: relative;
  overflow: hidden;
  background: var(--dk10-white) !important;
  border: 1px solid var(--dk10-line) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.dk10-kpi-row > .ant-col > .ant-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--dk10-kpi-accent, var(--dk10-coral));
  opacity: 0.95;
}
.dk10-kpi-row > .ant-col > .ant-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--dk10-shadow);
  border-color: var(--dk10-coral-border) !important;
}
.dk10-kpi-row .ant-statistic-title {
  color: var(--dk10-ink-3) !important;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.dk10-kpi-row .ant-statistic-content {
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}
.dk10-kpi-row .ant-card-body > div:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 10px !important;
  border-radius: 10px;
  font-size: 17px !important;
  background: rgba(255, 90, 31, 0.1); /* 老浏览器兜底 */
  background: color-mix(in srgb, var(--dk10-kpi-accent, var(--dk10-coral)) 12%, #fff);
}

/* ==========================================================================
   8. 仪表盘：可视化图表区
   ========================================================================== */
.dk10-viz {
  margin-block-start: 24px;
}
.dk10-viz-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.dk10-viz-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--dk10-ink);
}
.dk10-viz-title span.dk10-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dk10-teal);
  box-shadow: 0 0 0 4px var(--dk10-teal-tint);
}
.dk10-viz-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--dk10-ink-3);
}
.dk10-viz-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dk10-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--dk10-line);
  background: var(--dk10-white);
  color: var(--dk10-ink-2);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.dk10-ghost-btn:hover {
  color: var(--dk10-coral-text);
  border-color: var(--dk10-coral-border);
  background: var(--dk10-coral-tint);
}
.dk10-ghost-btn[disabled] {
  opacity: 0.55;
  cursor: progress;
}

.dk10-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
.dk10-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px 20px 14px;
  background: var(--dk10-white);
  border: 1px solid var(--dk10-line);
  border-radius: var(--dk10-radius);
  box-shadow: var(--dk10-shadow-sm);
}
.dk10-card::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--dk10-radius) var(--dk10-radius) 0 0;
  background: var(--dk10-card-accent, var(--dk10-grad));
  opacity: 0.9;
}
.dk10-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.dk10-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--dk10-ink);
}
.dk10-card-note {
  font-size: 12px;
  color: var(--dk10-ink-3);
}
.dk10-card-body {
  flex: 1;
  min-height: 0;
  margin-top: 10px;
}
.dk10-span-8 {
  grid-column: span 8;
}
.dk10-span-4 {
  grid-column: span 4;
}
.dk10-span-5 {
  grid-column: span 5;
}
.dk10-span-7 {
  grid-column: span 7;
}
.dk10-span-12 {
  grid-column: span 12;
}
@media (max-width: 1100px) {
  .dk10-span-8,
  .dk10-span-7,
  .dk10-span-5,
  .dk10-span-4,
  .dk10-span-12 {
    grid-column: span 12;
  }
}

/* --- 折线 / 面积图 --- */
.dk10-line-chart {
  width: 100%;
  height: 250px;
}
.dk10-line-chart .dk10-axis-text {
  font-size: 11px;
  fill: var(--dk10-ink-3);
}
.dk10-line-chart .dk10-grid-line {
  stroke: var(--dk10-line);
  stroke-dasharray: 3 5;
}
.dk10-line-chart .dk10-series-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dk10-line-chart .dk10-point {
  stroke: #fff;
  stroke-width: 2;
  cursor: pointer;
  transition: r 0.15s ease;
}
.dk10-line-chart .dk10-point:hover {
  r: 5.5;
}
.dk10-line-chart .dk10-area {
  opacity: 0.9;
}

.dk10-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--dk10-ink-2);
}
.dk10-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 3px;
  vertical-align: middle;
}
.dk10-legend b {
  color: var(--dk10-ink);
  font-weight: 700;
}

/* --- 饼 / 环形图 --- */
.dk10-donut-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  min-height: 234px;
}
.dk10-donut {
  flex: 0 0 168px;
  width: 168px;
  height: 168px;
}
.dk10-donut .dk10-donut-seg {
  cursor: pointer;
  transition: opacity 0.18s ease;
}
.dk10-donut .dk10-donut-seg:hover {
  opacity: 0.82;
}
.dk10-donut-center-value {
  font-size: 26px;
  font-weight: 700;
  fill: var(--dk10-ink);
}
.dk10-donut-center-label {
  font-size: 11px;
  fill: var(--dk10-ink-3);
}
.dk10-donut-legend {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dk10-donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--dk10-ink-2);
}
.dk10-donut-legend-item i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.dk10-donut-legend-item b {
  margin-left: auto;
  color: var(--dk10-ink);
}
.dk10-donut-legend-item em {
  font-style: normal;
  color: var(--dk10-ink-3);
  font-size: 11.5px;
}

/* --- 条形图 --- */
.dk10-bars {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding-top: 2px;
}
.dk10-bar-row {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: center;
  gap: 12px;
}
.dk10-bar-label {
  font-size: 12.5px;
  color: var(--dk10-ink-2);
}
.dk10-bar-track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: var(--dk10-line-soft);
  overflow: hidden;
}
.dk10-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--dk10-bg-fill, var(--dk10-grad));
  transform-origin: left center;
  animation: dk10-bar-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dk10-bar-value {
  min-width: 58px;
  text-align: right;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dk10-ink);
  font-variant-numeric: tabular-nums;
}

@keyframes dk10-bar-in {
  from {
    transform: scaleX(0.02);
  }
}

.dk10-skeleton {
  height: 220px;
  border-radius: var(--dk10-radius-sm);
  background: linear-gradient(100deg, #f4f6f9 30%, #eef1f5 45%, #f4f6f9 60%);
  background-size: 220% 100%;
  animation: dk10-shimmer 1.3s linear infinite;
}
@keyframes dk10-shimmer {
  to {
    background-position: -220% 0;
  }
}
.dk10-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  color: var(--dk10-ink-3);
  font-size: 13px;
}

/* ==========================================================================
   9. 登录页（复用 K10-PROD 登录页模板：一张卡 = 左品牌面板 + 右表单面板）
   --------------------------------------------------------------------------
   配色：白 + 珊瑚红为主色，第三色取松石青 #0E9C9C（点缀），高亮取琥珀 #FFB020；
   背景是「淡珊瑚红」的流体动态层（WebGL2，见 dk10/login-fluid.js）。
   ========================================================================== */
.dk10-login {
  position: relative;
  overflow: hidden;
  display: flex;
  /* 编译产物把这个外壳设成了 column，会把卡片纵向撑满；这里显式改回横向居中 */
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
}
/* 编译产物给登录容器配了一张 alipayobjects CDN 背景图，必须在元素进入 DOM 之前就清掉，
   否则首帧会真的发一次外链请求。下面两条按结构定位的静态规则就是干这个的。 */
#root div:has(> .ant-pro-form-login-container) {
  background-image: none !important;
}
#root .ant-app > div:first-child {
  background-image: none !important;
}
/* 装饰完成后：整页底色交给最外层外壳，卡片自己负责白色表面 */
#root .ant-app > .dk10-login:first-child {
  background-color: #fffdfc !important;
  background-image: linear-gradient(168deg, #fff9f6 0%, #fffdfc 50%, #fff2ea 100%) !important;
}
#root .dk10-login .dk10-login-stage {
  background: #ffffff !important;
}
.dk10-login-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* WebGL2 流体层：淡珊瑚红的流动结构（见 dk10/login-fluid.js）。
   挂不上（老浏览器 / 关掉硬件加速）时这个元素不会被创建，上面的光斑层照常兜底。 */
.dk10-login-fluid {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* 流体已经在动时不再叠加光斑，避免两层动效互相打架 */
.dk10-login.dk10-fluid-on .dk10-login-bg {
  display: none;
}
.dk10-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
  opacity: 0.6;
  will-change: transform;
}
.dk10-blob.b1 {
  width: 46vw;
  height: 46vw;
  left: -10vw;
  top: -12vw;
  background: radial-gradient(circle at 32% 32%, #ffd0b8 0%, rgba(255, 208, 184, 0) 68%);
  animation: dk10-float-1 26s ease-in-out infinite;
}
.dk10-blob.b2 {
  width: 40vw;
  height: 40vw;
  right: -8vw;
  top: 6vh;
  background: radial-gradient(circle at 60% 40%, #ffb99b 0%, rgba(255, 185, 155, 0) 66%);
  animation: dk10-float-2 32s ease-in-out infinite;
}
.dk10-blob.b3 {
  width: 52vw;
  height: 52vw;
  left: 22vw;
  bottom: -26vw;
  background: radial-gradient(circle at 50% 50%, #bfe9e9 0%, rgba(191, 233, 233, 0) 64%);
  opacity: 0.5;
  animation: dk10-float-3 38s ease-in-out infinite;
}
.dk10-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(217, 58, 8, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 58, 8, 0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 30% 30%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 30% 30%, #000 0%, transparent 72%);
}
@keyframes dk10-float-1 {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(6vw, 5vh, 0) scale(1.12);
  }
}
@keyframes dk10-float-2 {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1.05);
  }
  50% {
    transform: translate3d(-5vw, 8vh, 0) scale(0.94);
  }
}
@keyframes dk10-float-3 {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(0.96);
  }
  50% {
    transform: translate3d(-7vw, -6vh, 0) scale(1.1);
  }
}

/* ---- 左品牌面板（卡片左半边，珊瑚红渐变，对应 K10-PROD 的 .login-left） ---- */
.dk10-login-brand {
  position: relative;
  z-index: 1;
  flex: 0 0 45%;
  width: 45%;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 44px;
  color: #ffffff;
  background: linear-gradient(158deg, #ff7a33 0%, #ff5a1f 46%, #c43307 100%);
}
/* 面板内两处柔光：右上白色提亮 + 左下松石青点缀（第三色） */
.dk10-login-brand::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 86% 8%, rgba(255, 255, 255, 0.3), transparent 72%),
    radial-gradient(54% 46% at 6% 98%, rgba(14, 156, 156, 0.4), transparent 74%);
}
.dk10-login-brand > * {
  position: relative;
  z-index: 1;
}
.dk10-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  padding: 8px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 16px 32px rgba(120, 30, 0, 0.3);
}
.dk10-brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 15px;
}
.dk10-login-brand h1 {
  margin: 28px 0 0;
  font-size: 46px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
}
.dk10-login-brand h1 em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.72);
}
.dk10-login-brand p.dk10-brand-sub {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.26em;
  color: rgba(255, 255, 255, 0.88);
}
/* 高亮色（琥珀）在这里露面 */
.dk10-brand-rule {
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--dk10-hl) 0%, rgba(255, 176, 32, 0) 100%);
}
.dk10-login-brand .dk10-brand-foot {
  position: static;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
}

/* ---- 卡片本体：左品牌 + 右表单同属一块 960×560 的圆角卡 ---- */
.dk10-login-stage {
  position: relative;
  z-index: 2;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: 960px;
  max-width: 100%;
  min-height: 560px;
  padding: 0 !important;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 198, 174, 0.7);
  box-shadow: 0 30px 70px rgba(217, 58, 8, 0.16), 0 10px 26px rgba(26, 34, 44, 0.08);
  animation: dk10-card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---- 右表单面板（对应 K10-PROD 的 .login-right） ---- */
.dk10-login-stage .ant-pro-form-login-container {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  padding: 48px 52px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  animation: none !important;
}
.dk10-login-stage .ant-pro-form-login-main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.dk10-login-card {
  position: relative;
}
@keyframes dk10-card-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
/* ---- 右面板的标题区（theme.js 把 antd 的 .ant-pro-form-login-top 换成了这块） ---- */
.dk10-login-head {
  margin-bottom: 26px;
}
.dk10-login-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--dk10-teal-strong);
  background: var(--dk10-teal-tint);
  border: 1px solid rgba(14, 156, 156, 0.24);
}
.dk10-login-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--dk10-ink);
}
.dk10-login-desc {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--dk10-ink-3);
}
.dk10-login-card .ant-form-item {
  margin-bottom: 16px;
}
.dk10-login-card .ant-form-item-label > label {
  font-weight: 500;
  color: var(--dk10-ink-2);
}
.dk10-login-card .ant-input-affix-wrapper,
.dk10-login-card .ant-input {
  border-radius: 10px !important;
  background: #fbfcfd !important;
}
.dk10-login-card .ant-input-affix-wrapper-focused,
.dk10-login-card .ant-input-affix-wrapper:focus-within {
  background: #ffffff !important;
}
.dk10-login-card .ant-btn-primary {
  height: 46px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  letter-spacing: 0.14em;
}
/* 页面底部的一句话提示：前面的圆点用第三色（松石青） */
.dk10-login-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-inline: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--dk10-ink-3);
  pointer-events: none;
}
.dk10-login-foot .dk10-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dk10-teal);
}

/* 窄屏：收起左侧品牌面板，只留白色表单卡 */
@media (max-width: 980px) {
  .dk10-login {
    padding: 20px 16px;
  }
  .dk10-login-brand {
    display: none;
  }
  .dk10-login-stage {
    width: 480px;
    min-height: 0;
  }
  .dk10-login-stage .ant-pro-form-login-container {
    padding: 34px 26px 30px !important;
  }
}

/* 矮屏（笔记本横屏 / 分屏）：先撤掉页面底部那行提示，再整体压缩卡片，避免裁切与重叠 */
@media (max-height: 720px) {
  .dk10-login-foot {
    display: none;
  }
}
@media (max-height: 640px) {
  .dk10-login {
    padding: 16px;
  }
  .dk10-login-stage,
  .dk10-login-brand {
    min-height: 0;
  }
  .dk10-login-brand {
    padding: 28px 34px;
  }
  .dk10-login-stage .ant-pro-form-login-container {
    padding: 28px 40px !important;
  }
  .dk10-login-head {
    margin-bottom: 18px;
  }
}

/* ==========================================================================
   10. 无障碍 / 动效偏好
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .dk10-blob,
  .dk10-bar-fill,
  .dk10-skeleton,
  .dk10-login-card {
    animation: none !important;
  }
}

/* 键盘可达：可见的珊瑚红焦点环 */
:focus-visible {
  outline: 2px solid var(--dk10-coral);
  outline-offset: 2px;
}

/* ==========================================================================
   11. 导航 / 顶栏微调（DK10）
   ========================================================================== */

/* 11.1 隐藏指定导航项：载荷管理 / 配置请求 / 菜单管理 / 代理管理
       隐藏 ≠ 删除：路由、权限、接口全部保留，直接输 URL 仍可访问 */
.ant-menu-item[data-menu-id$='/ios-admin/payloads'],
.ant-menu-item[data-menu-id$='/ios-admin/configs'],
.ant-menu-item[data-menu-id$='/system/menus'],
.ant-menu-item[data-menu-id$='/system/proxies'] {
  display: none !important;
}

/* 11.2 右上角工具按钮：使用文档 / 历史版本 / 语言切换 不展示 */
.ant-pro-global-header-header-actions button[aria-label='使用文档'],
.ant-pro-global-header-header-actions button[aria-label='历史版本'],
.ant-pro-global-header-header-actions button[aria-label='语言切换'] {
  display: none !important;
}

/* 11.3 导航图标：图标库（lucide）线稿替换 antd 自带 icon */
.ant-pro-base-menu-inline-item-icon[data-dk10-icon] > .anticon,
.ant-pro-base-menu-vertical-item-icon[data-dk10-icon] > .anticon,
.ant-pro-base-menu-horizontal-item-icon[data-dk10-icon] > .anticon {
  display: none !important;
}
.ant-pro-base-menu-inline-item-icon .dk10-nav-svg,
.ant-pro-base-menu-vertical-item-icon .dk10-nav-svg,
.ant-pro-base-menu-horizontal-item-icon .dk10-nav-svg {
  width: 1em;
  height: 1em;
  display: block;
  flex: 0 0 auto;
}

/* 11.4 页面顶部「文字说明」隐藏后，内容（查询表单 / 卡片）贴到内容区顶部 */
[data-dk10-hide='1'] {
  display: none !important;
}

/* 登录页输入框线条围边(用户名/密码, 覆盖 antd filled 无边框样式) */
.dk10-login .ant-input-affix-wrapper,
.dk10-login-stage .ant-input-affix-wrapper {
  border: 1px solid #d8dee6 !important;
  background: #ffffff !important;
  border-radius: 8px;
  box-shadow: none !important;
}
.dk10-login .ant-input-affix-wrapper .ant-input {
  background: transparent !important;
}
.dk10-login .ant-input-affix-wrapper:hover {
  border-color: var(--dk10-coral-soft) !important;
}
.dk10-login .ant-input-affix-wrapper:focus-within {
  border-color: var(--dk10-coral) !important;
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.14) !important;
}