/* ============================================================================
 * 栀云互联 · 会员中心「浅蓝轻科技」UI 增强层（hz-ui.css）
 * ----------------------------------------------------------------------------
 * 定位：纯外观增强层，仅“叠加 / 覆盖视觉表现”，不改任何模板结构、交互、
 *      接口、类名与业务逻辑；不影响系统、模板功能及其它页面。
 * 三端：PC（>1024px） / 平板（768~1024px） / 手机（<768px）自适应。
 * 加载顺序：在 hz-inner.css 之后加载，保证样式生效。
 * ========================================================================== */

/* ==========================================================================
 * 0. 设计令牌（Design Tokens）
 * ========================================================================== */
:root {
  /* 品牌主色（浅蓝科技蓝） */
  --color-primary: #2f7bff;
  --color-primary-hover: #5a97ff;
  --color-primary-active: #1e66f5;
  --color-primary-light: #7db0ff;

  /* 浅蓝阶 */
  --hz-blue-50: #f4f8ff;
  --hz-blue-100: #eaf1ff;
  --hz-blue-200: #dbe8ff;
  --hz-blue-300: #c3d7ff;

  /* 卡片 */
  --hz-card-bg: #ffffff;
  --hz-card-border: #e4ecfb;
  --hz-card-border-strong: #d2e1f7;
  --hz-radius: 12px;
  --hz-radius-sm: 8px;
  --hz-radius-lg: 14px;

  /* 阴影（轻科技、蓝色调） */
  --hz-shadow: 0 1px 2px rgba(31, 78, 162, 0.04),
    0 6px 20px rgba(31, 78, 162, 0.06);
  --hz-shadow-hover: 0 6px 16px rgba(31, 78, 162, 0.1),
    0 16px 40px rgba(31, 78, 162, 0.14);
  --hz-shadow-primary: 0 4px 14px rgba(30, 102, 245, 0.3);

  /* 文本 */
  --hz-text: #1f2d3d;
  --hz-text-sub: #6b7a90;
}

/* ==========================================================================
 * 1. 全局页面背景（浅蓝轻科技渐变）
 * ========================================================================== */
body {
  background: #edf3fd;
}
.el-container:nth-child(2) {
  background:
    radial-gradient(1200px 480px at 86% -14%, rgba(47, 123, 255, 0.14), transparent 60%),
    radial-gradient(900px 480px at -12% -10%, rgba(110, 165, 255, 0.14), transparent 56%),
    linear-gradient(180deg, #f3f8ff 0%, #eaf1fd 100%) !important;
}
/* 控制台首页（yfx）内容区同样使用浅蓝渐变，取代原灰底 */
.main-content {
  background:
    radial-gradient(1000px 420px at 100% -10%, rgba(47, 123, 255, 0.12), transparent 60%),
    linear-gradient(180deg, #f3f8ff 0%, #eaf1fd 100%) !important;
}

/* ==========================================================================
 * 2. 核心白色卡片（内页的 .el-main 即为白色卡片）
 * ========================================================================== */
.el-container:nth-child(2) > .el-main {
  background-color: #ffffff;
  border: 1px solid var(--hz-card-border);
  border-radius: var(--hz-radius);
  box-shadow: var(--hz-shadow);
  padding: 24px;
  transition: box-shadow 0.28s ease;
}
/* 首页（内含 .main-content 时）不显示白色卡片，保持渐变背景 + 独立卡片 */
.el-main:has(.main-content) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ==========================================================================
 * 3. 控制台首页 · 白色卡片统一精致化
 * ========================================================================== */
.info-box,
.Hui-news,
.Hui-dataBlock .Hui-itemBlock,
.product-list-box,
.Hui-pushs,
.Hui-productList .Hui-rightTow .Hui-finance,
.Hui-productList .Hui-rightTow .Hui-apiInformation,
.Hui-recentWorkOrders .WorkOrder-box,
.Hui-journalism .notice-box,
.Hui-outsource > div {
  background-color: #ffffff;
  border: 1px solid var(--hz-card-border);
  border-radius: var(--hz-radius) !important;
  box-shadow: var(--hz-shadow) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
/* 顶部渐变余额卡 / VIP 图片卡保留各自设计，仅统一圆角与细节 */
.Hui-structure .Hui-userInformation .Hui-balance {
  border-radius: var(--hz-radius) !important;
  box-shadow: 0 8px 22px rgba(30, 102, 245, 0.28) !important;
}
/* 统计卡片 / 列表卡片悬浮反馈 */
.Hui-dataBlock .Hui-itemBlock:hover,
.Hui-pushs:hover,
.product-list-box:hover {
  transform: translateY(-3px);
  border-color: var(--hz-card-border-strong);
  box-shadow: var(--hz-shadow-hover) !important;
}

/* ==========================================================================
 * 4. 左侧导航菜单（精致胶囊化，含移动端抽屉）
 * ========================================================================== */
.menu-top .el-menu-item {
  border-radius: 8px;
  margin: 4px 10px;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.menu-top .el-menu-item:hover {
  background: var(--hz-blue-100) !important;
  color: var(--color-primary) !important;
}
/* 激活项：浅蓝渐变胶囊 */
.menu-top .el-menu-item.is-active {
  background: linear-gradient(135deg, #3d8bff 0%, #1e66f5 100%) !important;
  color: #ffffff !important;
  box-shadow: var(--hz-shadow-primary);
}
.menu-top .el-menu-item.is-active i {
  color: #ffffff !important;
}
/* 二级菜单标题悬停 */
.menu-top .el-submenu__title {
  border-radius: 8px;
  margin: 4px 10px;
  transition: background 0.2s ease, color 0.2s ease;
}
.menu-top .el-submenu__title:hover {
  background: var(--hz-blue-100) !important;
  color: var(--color-primary) !important;
}
/* 子菜单激活（保留可读，浅色底蓝字） */
.menu-top .el-menu--inline .el-menu-item.is-active {
  background: var(--hz-blue-100) !important;
  color: var(--color-primary) !important;
  box-shadow: none;
}
.menu-top .el-menu--inline .el-menu-item.is-active i {
  color: var(--color-primary) !important;
}
/* 抽屉菜单底色与顶栏 */
.drawer-menu {
  background: #ffffff !important;
}
.drawer-menu-top {
  border-bottom: 1px solid var(--hz-card-border);
}

/* ==========================================================================
 * 5. 顶部导航栏
 * ========================================================================== */
.el-header {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--hz-card-border);
}
.header-right .el-button {
  border-radius: 8px;
}
/* 汉堡菜单图标在平板/手机显示（PC 隐藏） */
.menu-img {
  display: none;
}

/* ==========================================================================
 * 6. 按钮（Buttons）
 * ========================================================================== */
/* 主按钮：浅蓝渐变 + 轻科技光晕 */
.el-button--primary {
  background: linear-gradient(135deg, #3d8bff 0%, #1e66f5 100%) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(30, 102, 245, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.el-button--primary:hover,
.el-button--primary:focus {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(30, 102, 245, 0.32);
}
.el-button--primary:active {
  filter: brightness(0.97);
  transform: translateY(0);
}
/* 次按钮 / 描边按钮：浅蓝描边 */
.el-button--default,
.el-button.is-plain {
  border-radius: 8px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.el-button--default:hover,
.el-button.is-plain:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: var(--hz-blue-100) !important;
}
/* 文字按钮 */
.el-button--text {
  color: var(--color-primary);
}
.el-button--text:hover {
  color: var(--color-primary-hover);
}
/* 财务余额描边按钮统一 */
.balance-tx-btn {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  border-radius: 8px !important;
}
.balance-tx-btn:hover {
  background: var(--hz-blue-100) !important;
}

/* ==========================================================================
 * 7. 输入框 / 下拉 / 文本域
 * ========================================================================== */
.el-input__inner,
.el-textarea__inner {
  border: 1px solid var(--hz-card-border-strong);
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.el-input__inner:hover,
.el-textarea__inner:hover {
  border-color: var(--color-primary-light);
}
.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(47, 123, 255, 0.14);
}
/* 下拉选择器 */
.el-select .el-input__inner {
  cursor: pointer;
}
/* 账户页“下划线输入框”保持原样，不受圆角/光晕影响 */
.box-item-b .el-input__inner,
.box-item-b .el-textarea__inner,
.el-textarea .el-textarea__inner.is-underline {
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* 禁用态 */
.el-input.is-disabled .el-input__inner,
.el-textarea.is-disabled .el-textarea__inner {
  background: var(--hz-blue-50);
  border-color: var(--hz-card-border);
  color: var(--hz-text-sub);
}

/* ==========================================================================
 * 8. 标签页（Tabs）
 * ========================================================================== */
.el-tabs__item {
  font-size: 15px;
  transition: color 0.2s ease;
}
.el-tabs__item:hover {
  color: var(--color-primary);
}
.el-tabs__item.is-active {
  color: var(--color-primary);
  font-weight: 600;
}
.el-tabs__active-bar {
  height: 3px !important;
  border-radius: 2px;
  background: linear-gradient(90deg, #3d8bff 0%, #1e66f5 100%) !important;
}
.el-tabs__nav-wrap::after {
  background: var(--hz-card-border);
}
.el-tabs__content {
  background: transparent;
}

/* ==========================================================================
 * 9. 表格（Tables）
 * ========================================================================== */
.el-table {
  border-radius: 8px;
  overflow: hidden;
}
.el-table th.el-table__cell {
  background: var(--hz-blue-50) !important;
  color: var(--hz-text);
  font-weight: 600;
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid var(--hz-card-border);
}
.el-table--border,
.el-table--group {
  border-color: var(--hz-card-border);
}
.el-table--border td.el-table__cell,
.el-table--border .el-table__cell {
  border-right: 1px solid var(--hz-card-border);
}
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background: var(--hz-blue-100) !important;
}
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #f8fbff;
}

/* ==========================================================================
 * 10. 标签 / 徽章（Tags & Badges）
 * ========================================================================== */
.el-tag {
  border-radius: 6px;
  font-weight: 500;
}
.el-tag--success {
  background: rgba(61, 213, 152, 0.12);
  color: #1ba977;
  border-color: transparent;
}
.el-tag--danger {
  background: rgba(240, 20, 47, 0.1);
  color: #e0203a;
  border-color: transparent;
}
.el-tag--warning {
  background: rgba(249, 150, 0, 0.12);
  color: #e08a00;
  border-color: transparent;
}
.el-tag--primary,
.el-tag--info {
  background: var(--hz-blue-100);
  color: var(--color-primary);
  border-color: transparent;
}

/* ==========================================================================
 * 11. 分页（Pagination）
 * ========================================================================== */
.el-pagination .btn-prev,
.el-pagination .btn-next,
.el-pagination .el-pager li {
  border-radius: 6px;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}
.el-pagination .el-pager li:hover,
.el-pagination .btn-prev:hover,
.el-pagination .btn-next:hover {
  color: var(--color-primary);
}
.el-pagination .el-pager li.active {
  background: linear-gradient(135deg, #3d8bff 0%, #1e66f5 100%);
  color: #ffffff;
}

/* ==========================================================================
 * 12. 开关 / 单选 / 复选
 * ========================================================================== */
.el-switch.is-checked .el-switch__core {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}
.el-radio__input.is-checked .el-radio__inner,
.el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.el-radio__input.is-checked + .el-radio__label,
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: var(--color-primary);
}
.el-radio__inner:hover,
.el-checkbox__inner:hover {
  border-color: var(--color-primary);
}

/* ==========================================================================
 * 13. 弹窗 / 抽屉 / 消息框 / 气泡（浮层）
 * ========================================================================== */
.el-dialog {
  border-radius: var(--hz-radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(31, 78, 162, 0.26);
}
.el-dialog__header {
  background: var(--hz-blue-50);
  border-bottom: 1px solid var(--hz-card-border);
  padding-bottom: 16px;
}
.el-dialog__title {
  color: var(--hz-text);
  font-weight: 600;
}
.el-drawer.rtl,
.el-drawer.ltr {
  border-radius: 0 14px 14px 0;
}
.el-message-box {
  border-radius: var(--hz-radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(31, 78, 162, 0.26);
}
.el-message-box__header {
  background: var(--hz-blue-50);
}
.el-popover.el-popper,
.el-popper.is-light {
  border-radius: 10px;
  border-color: var(--hz-card-border);
  box-shadow: 0 10px 30px rgba(31, 78, 162, 0.14);
}
.el-popper[x-placement^="bottom"] .el-popper__arrow::before {
  border-color: var(--hz-card-border);
}

/* ==========================================================================
 * 14. 区块标题 / 卡片标题
 * ========================================================================== */
.main-card-title {
  color: var(--hz-text);
  font-weight: 600;
}
/* 左侧竖条标题：渐变蓝 */
.basic-title,
.account-title {
  border-left: 3px solid var(--color-primary) !important;
  font-weight: 600;
}
/* 财务页分隔线改浅蓝 */
.finance .finance-title,
.finance .finance-money-main {
  border-bottom-color: var(--hz-card-border);
}
.finance .finance-other-money {
  border-top-color: var(--hz-card-border);
}

/* ==========================================================================
 * 15. 进度条 / 步骤条
 * ========================================================================== */
.el-progress-bar__inner {
  background: linear-gradient(90deg, #3d8bff 0%, #1e66f5 100%);
}
.el-step__head.is-process,
.el-step__head.is-finish {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.el-step__title.is-process,
.el-step__title.is-finish {
  color: var(--color-primary);
}

/* ==========================================================================
 * 16. 全局滚动条（浅蓝细条）
 * ========================================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #c4d5f3;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-light);
}

/* ==========================================================================
 * 17. 平板端（768 ~ 1024px）自适应
 * ========================================================================== */
@media screen and (max-width: 1024px) {
  /* 收起左侧固定导航，改用抽屉 + 汉堡（与移动端一致的成熟机制） */
  .el-aside {
    display: none !important;
  }
  .menu-img {
    display: inline-block !important;
    cursor: pointer;
  }
  .el-header {
    padding-left: 12px !important;
  }
  /* 白色卡片外边距收紧 */
  .el-container:nth-child(2) > .el-main {
    margin: 16px !important;
    padding: 20px;
  }
  /* 首页顶部 4 列 → 2 列 */
  .Hui-structure .Hui-userInformation {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 首页统计 4 列 → 2 列 */
  .Hui-dataBlock {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 产品列表 + 右侧栏上下堆叠 */
  .Hui-productList {
    flex-direction: column !important;
  }
  .Hui-productList .Hui-rightTow {
    width: 100% !important;
    flex-direction: row !important;
    gap: 15px;
  }
  .Hui-productList .Hui-rightTow .Hui-finance,
  .Hui-productList .Hui-rightTow .Hui-apiInformation {
    flex: 1;
  }
  /* 弹窗宽度适配 */
  .el-dialog {
    width: 88% !important;
  }
  /* 表格行高适度 */
  .el-table .el-table__cell {
    padding: 6px 0;
  }
}

/* ==========================================================================
 * 18. 手机端（<=768px）自适应（在原模板基础上精修）
 * ========================================================================== */
@media screen and (max-width: 768px) {
  /* 顶部导航 */
  .el-header {
    height: 60px !important;
  }
  /* 白色卡片：贴边、圆角、留白 */
  .el-container:nth-child(2) > .el-main {
    margin: 12px !important;
    padding: 16px !important;
    border-radius: 12px;
  }
  /* 首页顶部 1 列 */
  .Hui-structure .Hui-userInformation {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  /* 首页统计保持 2×2，紧凑卡片 */
  .Hui-dataBlock {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
  .Hui-dataBlock .Hui-itemBlock {
    height: 110px;
    padding: 14px;
  }
  /* 产品列表右侧栏 1 列 */
  .Hui-productList .Hui-rightTow {
    flex-direction: column !important;
  }
  /* 弹窗 / 消息框近乎全宽 */
  .el-dialog {
    width: 92% !important;
    margin: 40px auto !important;
  }
  .el-message-box {
    width: 90% !important;
  }
  /* 弹窗内按钮堆叠（原模板已处理，补强调） */
  .el-dialog__footer .el-button,
  .el-message-box__btns .el-button {
    margin-bottom: 8px;
  }
  /* 下拉/输入框防溢出 */
  .el-select,
  .el-input {
    max-width: 100%;
  }
}

/* ==========================================================================
 * 19. 小屏手机（<=480px）细节
 * ========================================================================== */
@media screen and (max-width: 480px) {
  .Hui-dataBlock .Hui-itemBlock {
    height: 100px;
    padding: 12px;
  }
  /* 统计金额在小屏适当缩放 */
  .Hui-dataBlock .Hui-itemBlock .Hui-quantity {
    font-size: 18px;
  }
  /* 首页新闻卡片改上下结构 */
  .Hui-news {
    flex-direction: column;
    height: auto !important;
  }
  .Hui-news .Hui-title-size {
    width: 100%;
  }
}

/* ==========================================================================
 * 20. 登录 / 注册 / 找回页（轻量统一，主体沿用原 hz-auth 设计）
 * ========================================================================== */
.login .el-input__inner,
.regist .el-input__inner,
.forget .el-input__inner {
  border-radius: 8px;
}
.login-btn,
.login .el-button--primary {
  border-radius: 8px !important;
  box-shadow: 0 8px 20px rgba(30, 102, 245, 0.28);
}

/* ==========================================================================
 * 21. 无障碍：尊重“减少动态效果”偏好
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}