/* ============================================================
   SR X 后台 · 「Announce Blue」主题 20260905k (srx-admin-ui.css)
   照设计稿与系统公告弹窗风格 1:1 统一全后台:
     纯蓝 #1677FF · 零渐变 · 圆中带方(卡片8px/按钮6px/输入框6px/标签4px)
     弹窗标题蓝色线型喇叭(同公告弹窗) · 状态标签纯色小圆角
   作用域: 页面规则仅登录后的后台生效 body:has(.el-container)
     => 主页/登录页/前台(无 .el-container) 完全不受影响
   ============================================================ */
:root{
  --ann-blue:#1677FF;--ann-blue-hover:#409EFF;--ann-blue-active:#0958D9;
  --ann-grad:#1677FF;
  --ann-grad-hover:#409EFF;
  --ann-grad-active:#0958D9;
  --ann-title:#1F2D3D;--ann-text:#303133;--ann-sub:#909399;
  --ann-bg:#F6F8FA;--ann-card:#FFFFFF;
  --ann-border:#E8EDF3;--ann-fill:#F4F7FB;
  --ann-shadow-card:0 1px 3px rgba(15,23,42,.05),0 4px 16px -8px rgba(22,119,255,.10);
  --ann-shadow-pop:0 12px 40px rgba(0,0,0,.18);
  --ann-shadow-btn:0 4px 10px rgba(22,119,255,.28);
  --ann-ring:0 0 0 3px rgba(22,119,255,.14);
  --ann-radius:8px;--ann-radius-btn:6px;

  /* —— TDesign 品牌色重定向 —— */
  --td-brand-color:#1677FF;--td-brand-color-hover:#409EFF;--td-brand-color-active:#0958D9;
  --td-brand-color-focus:#1677FF;--td-brand-color-disabled:#93C5FD;
  --td-brand-color-light:#E8F1FF;--td-brand-color-light-hover:#D6E7FF;--td-brand-color-light-active:#BDD7FF;
  --td-radius-small:4px;--td-radius-default:8px;--td-radius-medium:8px;--td-radius-large:10px;--td-radius-extra-large:12px;
  /* —— Element Plus 品牌色重定向 —— */
  --el-color-primary:#1677FF;--el-color-primary-dark-2:#0958D9;
  --el-color-primary-light-3:#5B9DFF;--el-color-primary-light-5:#8FBCFF;--el-color-primary-light-7:#C2DBFF;
  --el-color-primary-light-8:#D9E8FF;--el-color-primary-light-9:#E8F1FF;
  --el-border-radius-base:8px;--el-box-shadow:var(--ann-shadow-pop);
  /* —— 旧 art 层变量重定向 —— */
  --art-primary:#1677FF;--art-primary-hover:#409EFF;--art-primary-active:#0958D9;}

body:has(.el-container) {
/* ============================================================
   SR X 后台 · 「Announce Blue」主题 20260905d
   以系统公告弹窗为基准 1:1 推广到整个后台:
   覆盖顺序: 在 srx-design-*.css 之后加载
   本次重点: 余额卡(art-kpi) / 注册码管理(stat-card) / 账号生成(acc-gen-page)
   ============================================================ */


/* ============ 1. 侧边栏 ============ */
/* 注意: srxp53f/srx-design 里有 .sidebar ... :not(.t-is-opened) 级 !important 规则,
   这里用 .el-aside.sidebar + .t-menu--scroll 提高特异性压过它们 */
.el-aside.sidebar{background:#fff!important;border-right:1px solid var(--ann-border)!important}
.sidebar .logo-text{font-weight:700!important;color:var(--ann-title)!important;letter-spacing:.02em}
.t-default-menu{background:transparent!important}
.t-menu{padding:6px 0!important}
.el-aside.sidebar .t-menu-group__title{color:#94A3B8!important;font-size:12px!important;font-weight:600!important;letter-spacing:.05em;padding:14px 24px 6px!important}
.el-aside.sidebar .t-default-menu .t-menu--scroll .t-menu__item{
  margin:2px 10px!important;border-radius:var(--ann-radius)!important;
  color:#475569!important;transition:all .18s ease;position:relative;}
.el-aside.sidebar .t-default-menu .t-menu--scroll .t-menu__item .t-icon{color:#64748B!important;transition:color .18s ease}
.el-aside.sidebar .t-default-menu .t-menu--scroll .t-menu__item:hover{
  background:#F0F7FF!important;color:var(--ann-blue)!important;}
.el-aside.sidebar .t-default-menu .t-menu--scroll .t-menu__item:hover .t-icon{color:var(--ann-blue)!important}
.el-aside.sidebar .t-default-menu .t-menu--scroll .t-menu__item.t-is-active,
.el-aside.sidebar .t-default-menu .t-menu--scroll .t-menu__item.t-is-active:not(.t-is-opened){
  background:var(--ann-grad)!important;color:#fff!important;font-weight:600!important;
  box-shadow:var(--ann-shadow-btn)!important;border-radius:var(--ann-radius)!important;}
.el-aside.sidebar .t-default-menu .t-menu--scroll .t-menu__item.t-is-active .t-icon,
.el-aside.sidebar .t-default-menu .t-menu--scroll .t-menu__item.t-is-active:not(.t-is-opened) .t-icon{color:#fff!important}
.el-aside.sidebar .t-default-menu .t-menu--scroll .t-menu__item.t-is-active::after{display:none}
/* ============ 2. 顶栏 / 页签 ============ */
.el-header,.app-container header{background:#fff!important;border-bottom:1px solid var(--ann-border)!important}
[class*="tab"]{--ann-tab-on:var(--ann-blue)}
.art-tab,.tab-item,[class*="art-tab"]{transition:color .18s ease}
.art-tab.on,.art-tab.active,[class*="tab"].on,[class*="tab"].active{color:var(--ann-blue)!important;font-weight:600}
.art-tab.on::after,.art-tab.active::after{
  background:var(--ann-grad)!important;height:3px!important;border-radius:3px 3px 0 0!important;
  box-shadow:0 -2px 8px rgba(22,119,255,.35);}
.t-tabs__bar{background:var(--ann-grad)!important;height:3px!important;border-radius:3px!important}
.t-tabs__nav-item.t-is-active{color:var(--ann-blue)!important;font-weight:600}
/* ============ 3. 卡片容器 ============ */
.el-card,.t-card{border-radius:8px!important;border:1px solid var(--ann-border)!important;box-shadow:var(--ann-shadow-card)!important}
.art-card,[class*="art-panel"]{
  border-radius:8px!important;border:1px solid var(--ann-border)!important;
  box-shadow:var(--ann-shadow-card)!important;background:var(--ann-card)!important;}
.el-card__header{
  padding:16px 20px!important;border-bottom:1px solid var(--ann-border)!important;
  color:var(--ann-title)!important;font-weight:700!important;font-size:16px!important;
  background:#fff!important;}
/* ============ 4. 按钮 ============ */
/* 主按钮: 纯蓝 + 柔投影 (同公告弹窗「我知道了」) */
.t-button--variant-base.t-button--theme-primary,
.el-button--primary:not(.is-text):not(.is-link){
  background:var(--ann-grad)!important;border:0!important;border-radius:var(--ann-radius-btn)!important;
  box-shadow:var(--ann-shadow-btn)!important;font-weight:600!important;color:#fff!important;
  transition:all .18s ease;}
.t-button--variant-base.t-button--theme-primary:hover,
.el-button--primary:not(.is-text):not(.is-link):hover{
  background:var(--ann-grad-hover)!important;box-shadow:0 6px 14px rgba(22,119,255,.36)!important;transform:translateY(-1px);}
.t-button--variant-base.t-button--theme-primary:active,
.el-button--primary:not(.is-text):not(.is-link):active{background:var(--ann-grad-active)!important;transform:none}
/* 危险按钮: 纯红 */
.t-button--variant-base.t-button--theme-danger,.el-button--danger:not(.is-text):not(.is-link){
  background:#F04444!important;border:0!important;border-radius:var(--ann-radius-btn)!important;
  box-shadow:0 4px 10px rgba(240,68,68,.28)!important;color:#fff!important;font-weight:600!important;transition:all .18s ease;}
.t-button--variant-base.t-button--theme-danger:hover,.el-button--danger:not(.is-text):not(.is-link):hover{
  background:#FF5A5A!important;transform:translateY(-1px);}
/* 成功按钮 */
.t-button--variant-base.t-button--theme-success,.el-button--success:not(.is-text):not(.is-link){
  background:#059669!important;border:0!important;border-radius:var(--ann-radius-btn)!important;
  box-shadow:0 4px 10px rgba(5,150,105,.26)!important;color:#fff!important;font-weight:600!important;}
/* 次按钮: 白底 + 蓝描边 */
.t-button--variant-outline.t-button--theme-primary,.el-button--primary.is-plain{
  background:#fff!important;color:var(--ann-blue)!important;border:1px solid #B8D4FF!important;border-radius:var(--ann-radius-btn)!important;}
.t-button--variant-outline.t-button--theme-primary:hover,.el-button--primary.is-plain:hover{
  background:#F0F7FF!important;border-color:var(--ann-blue)!important;}
.t-button--variant-outline,.el-button--default{
  border-radius:var(--ann-radius-btn)!important;color:#475569;transition:all .18s ease;}
.t-button--variant-outline:hover,.el-button--default:hover{color:var(--ann-blue)!important;border-color:#B8D4FF!important;background:#F7FAFF!important}
/* 文字按钮 */
.t-button--variant-text.t-button--theme-primary,.el-button--primary.is-text,.el-button--primary.is-link{color:var(--ann-blue)!important;font-weight:500}
.t-input:hover,.el-input__wrapper:hover{border-color:#B8D4FF!important}
.t-input.t-is-focused,.t-input:focus-within,.el-input__wrapper.is-focus,.el-input__wrapper:focus-within{
  border-color:var(--ann-blue)!important;box-shadow:var(--ann-ring)!important;}
.t-form__label{color:#475569!important;font-weight:500}
.t-select-input{border-radius:var(--ann-radius-btn)!important}
/* ============ 6. 表格 ============ */
.t-table{border-radius:6px!important;overflow:hidden}
.t-table th,.t-table__th-cell,.t-table thead td{background:#F5F8FF!important;color:#475569!important;font-weight:600!important}
.t-table__row:hover,.t-table__row--stripe{background:#F7FAFF!important}
.t-table td,.t-table th{border-color:#EFF3F8!important}
.t-table__empty{color:var(--ann-sub)}
.el-table{border-radius:6px!important}
.el-table th.el-table__cell{background:#F5F8FF!important;color:#475569!important;font-weight:600!important}
.el-table__row:hover>td.el-table__cell{background:#F7FAFF!important}
/* 自定义大弹窗标题: 蓝色线型喇叭头 (公告弹窗同款) */
.el-modal-dialog .header-title,.custom-header .header-title{
  display:inline-flex!important;align-items:center!important;
  color:var(--ann-title)!important;font-weight:700!important;font-size:19px!important;}
.el-modal-dialog .header-title::before,.custom-header .header-title::before{
  content:"";display:inline-block;width:28px;height:28px;flex:none;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='28' height='28' fill='none' stroke='%231677ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 17.5H6a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h5'/%3E%3Cpath d='M11 6.5l9-3.5v13l-9-3.5v-6z'/%3E%3Cpath d='M20 8.5c1.5 1 1.5 5 0 6'/%3E%3C/svg%3E") center/contain no-repeat;margin-right:9px;vertical-align:-8px;}
.el-modal-dialog .header-subtitle,.custom-header .header-subtitle{color:var(--ann-sub)!important;margin-top:6px!important}
/* ============ 9. 标签 / 徽章 ============ */
.t-tag,.el-tag{border-radius:4px!important;font-weight:500!important}
.t-tag--theme-primary,.el-tag--primary{background:#E8F1FF!important;color:var(--ann-blue)!important;border-color:#C2DBFF!important}
.t-tag--theme-success,.el-tag--success{background:#ECFDF5!important;color:#059669!important;border-color:#A7F3D0!important}
.t-tag--theme-danger,.el-tag--danger{background:#FEF2F2!important;color:#DC2626!important;border-color:#FECACA!important}
.t-tag--theme-warning,.el-tag--warning{background:#FFFBEB!important;color:#D97706!important;border-color:#FDE68A!important}
.t-popup[data-popper-placement] .t-popup__arrow{display:none}
/* ============ 11. 分页 ============ */
.t-pagination__number,.el-pager li{border-radius:6px!important;transition:all .18s ease}
.t-pagination__number.t-is-current,.el-pager li.is-active,.el-pager li.number.is-active{
  background:var(--ann-grad)!important;color:#fff!important;box-shadow:0 3px 8px rgba(22,119,255,.30)!important;border-radius:6px!important}
.t-pagination__number:hover,.el-pager li:hover{color:var(--ann-blue)!important}
/* ============ 12. 复选框 / 开关 / 单选 ============ */
.t-checkbox__input.t-is-checked .t-checkbox__input-box,.t-radio__input.t-is-checked .t-radio__input-circle,
.t-switch.t-is-checked,.el-checkbox__input.is-checked .el-checkbox__inner,.el-switch.is-checked .el-switch__core,
.el-radio__input.is-checked .el-radio__inner{
  background:var(--ann-grad)!important;border-color:var(--ann-blue)!important;}
.t-switch.t-is-checked,.el-switch.is-checked .el-switch__core{box-shadow:0 3px 8px rgba(22,119,255,.30)!important}
.el-checkbox__inner,.el-radio__inner{border-radius:4px}
/* ============ 13. 功能入口卡片 (快捷充值等大图标选择卡) ============ */
.function-card,.el-main .art-cat,[class*="cat-item"],[class*="feature-card"],[class*="game-card"],[class*="func-card"]{
  border-radius:8px!important;border:1.5px solid var(--ann-border)!important;background:#fff!important;
  transition:all .22s cubic-bezier(.22,1.1,.36,1)!important;box-shadow:0 1px 2px rgba(15,23,42,.04)!important;}
.function-card:hover,.el-main .art-cat:hover,[class*="cat-item"]:hover,[class*="feature-card"]:hover,[class*="game-card"]:hover,[class*="func-card"]:hover{
  border-color:#8FBCFF!important;box-shadow:0 10px 28px -8px rgba(22,119,255,.22)!important;transform:translateY(-3px)!important;}
/* 图标容器: 纯蓝圆角方块 + 白图标 (设计稿同款) */
.function-card .function-icon,.el-main .art-cat>svg,[class*="cat-item"]>svg,[class*="feature-card"]>svg{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px;line-height:0;
  background:var(--ann-grad)!important;border-radius:8px!important;
  color:#fff!important;fill:#fff!important;box-shadow:0 6px 14px rgba(22,119,255,.30)!important;}
.function-card .function-icon i.el-icon,.function-card .function-icon svg{color:#fff!important;fill:#fff!important}
.function-card .function-card-title,[class*="function-card"] [class*="title"]{font-weight:700!important;color:var(--ann-title)!important}
/* ============ 14. 统计卡 / 余额卡 (首页 art-kpi) ============ */
.art-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.art-kpi{
  position:relative;background:#fff!important;border:1px solid var(--ann-border)!important;
  border-radius:8px!important;box-shadow:var(--ann-shadow-card)!important;
  padding:20px 22px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
  overflow:hidden;transition:all .22s ease;}
.art-kpi:hover{box-shadow:0 10px 28px -8px rgba(22,119,255,.16)!important;transform:translateY(-2px)}
/* 左侧蓝条装饰 */
.art-kpi::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--ann-grad);}
.art-kpi:first-child::before{width:5px;top:12px;bottom:12px}
.art-kpi .art-kpi-info{flex:1;min-width:0}
.art-kpi .art-kpi-label{
  display:block;font-size:13px!important;font-weight:600!important;color:var(--ann-sub)!important;margin-bottom:8px!important;}
.art-kpi .art-kpi-value{
  font-size:28px!important;line-height:1.15!important;font-weight:800!important;color:var(--ann-title)!important;letter-spacing:-.02em;}
.art-kpi .art-kpi-sub{
  font-size:12px!important;color:var(--ann-sub)!important;margin-top:5px!important;}
.art-kpi .art-kpi-icon{
  flex:none;width:48px!important;height:48px!important;border-radius:8px!important;
  background:var(--ann-grad)!important;color:#fff!important;box-shadow:0 8px 18px rgba(22,119,255,.30)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;}
.art-kpi .art-kpi-icon svg,.art-kpi .art-kpi-icon i.el-icon{color:#fff!important;fill:#fff!important}
.art-kpi .art-kpi-icon i.el-icon svg{width:26px!important;height:26px!important}
/* ============ 15. 注册码管理/卡密统计页 (.stat-card) ============ */
.stat-card{
  background:#fff!important;border:1px solid var(--ann-border)!important;border-radius:8px!important;
  box-shadow:var(--ann-shadow-card)!important;padding:20px 22px!important;transition:all .22s ease;}
.stat-card:hover{box-shadow:0 10px 28px -8px rgba(22,119,255,.16)!important;transform:translateY(-2px)}
/* 图标容器: 不强制外层flex,只给 el-icon 加纯蓝方块 */
.stat-card .el-icon,
.stat-card [class*="stat-icon"] i,
.stat-card > div > div:first-of-type .el-icon{
  width:48px!important;height:48px!important;border-radius:8px!important;
  background:var(--ann-grad)!important;color:#fff!important;box-shadow:0 8px 18px rgba(22,119,255,.30)!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  margin-right:14px!important;vertical-align:middle!important;}
.stat-card .el-icon svg,.stat-card .el-icon i{color:#fff!important;fill:#fff!important}
.stat-card .stat-info{display:inline-block!important;vertical-align:middle!important;min-width:0}
.stat-card .stat-num{
  display:block;font-size:26px!important;line-height:1.15!important;font-weight:800!important;color:var(--ann-title)!important;letter-spacing:-.02em;}
.stat-card .stat-label{font-size:13px!important;color:var(--ann-sub)!important;font-weight:600!important;margin-top:4px!important}
/* ============ 16. 账号生成页 (.acc-gen-page) ============ */
.acc-gen-page .el-card,
.acc-gen-page .art-card{
  border-radius:8px!important;border:1px solid var(--ann-border)!important;box-shadow:var(--ann-shadow-card)!important;}
.acc-gen-page .el-form{
  background:#fff!important;border-radius:8px!important;}
.acc-gen-page .el-form-item__label{color:#475569!important;font-weight:500!important}
.acc-gen-page .el-radio.is-checked .el-radio__label{color:var(--ann-blue)!important;font-weight:600}
/* ============ 17. 全局细节 ============ */
a{transition:color .18s ease}
.el-loading-mask{border-radius:inherit}
.t-loading__mask{border-radius:inherit}
::-webkit-scrollbar-thumb{background:#C9D6E3;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#A8BACB}
.t-avatar,.el-avatar{box-shadow:0 2px 8px rgba(22,119,255,.25)}
/* 20260905 去渐变收尾: 业务组件 srp-klit 自带白->浅蓝->浅绿渐变背景压成纯浅色 */
.srp-klit{background:#F4F8FF!important}
}

/* === 弹窗/公告/全局提示,保持全局统一 === */
/* ============ 5. 输入框 / 选择器 ============ */
.t-input,.t-textarea__inner,.t-select__input,.t-input__wrap .t-input,
.el-input__wrapper,.el-textarea__inner{border-radius:var(--ann-radius-btn)!important;transition:border-color .18s ease,box-shadow .18s ease}
/* ============ 7. 弹窗 (核心: 1:1 复刻公告弹窗) ============ */
.el-modal-dialog .el-dialog,.el-message-box,.t-dialog,.el-dialog,.art-modal,[class*="art-dialog"]{
  border-radius:8px!important;box-shadow:var(--ann-shadow-pop)!important;overflow:hidden;
  border:0!important;}
.el-dialog__header,.el-message-box__header,.t-dialog__header{padding-bottom:6px!important}
.el-dialog__title,.el-message-box__title,.t-dialog__header-content,.art-modal-title{
  color:var(--ann-title)!important;font-weight:700!important;font-size:18px!important;}
/* 弹窗标题左侧: 蓝色线型喇叭 (公告弹窗同款,无方块) */
.el-message-box__title::before,.el-dialog__title::before,.t-dialog__header-content::before{
  content:"";display:inline-block;width:26px;height:26px;flex:none;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='26' height='26' fill='none' stroke='%231677ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 17.5H6a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h5'/%3E%3Cpath d='M11 6.5l9-3.5v13l-9-3.5v-6z'/%3E%3Cpath d='M20 8.5c1.5 1 1.5 5 0 6'/%3E%3C/svg%3E") center/contain no-repeat;margin-right:9px;vertical-align:-7px;}
.el-message-box__title,.el-dialog__title,.t-dialog__header-content{display:inline-flex!important;align-items:center!important}
.el-dialog__headerbtn{top:14px!important;right:14px!important}
.el-dialog__headerbtn .el-dialog__close,.el-message-box__headerbtn .el-message-box__close{color:#909399!important;font-size:19px!important;transition:color .18s}
.el-dialog__headerbtn:hover .el-dialog__close,.el-message-box__headerbtn:hover .el-message-box__close{color:#475569!important}
.el-overlay{background:rgba(0,0,0,.45)!important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
/* 弹窗内容文字 */
.el-message-box__message,.el-dialog__body{color:var(--ann-text)!important}
/* 弹窗底部按钮区 */
.el-message-box__btns,.el-dialog__footer{padding-top:8px!important}
/* ============ 8. 消息提示 / 通知 ============ */
.el-message,.t-message{border-radius:6px!important;border:0!important;box-shadow:0 6px 20px rgba(15,23,42,.12)!important;background:#fff!important}
.el-message__content,.t-message__content{color:var(--ann-text)!important;font-weight:500}
.el-message--success .el-message__content{color:#059669!important}
.el-message--error .el-message__content{color:#DC2626!important}
.el-notification,.t-notification{border-radius:8px!important;box-shadow:var(--ann-shadow-pop)!important;border:1px solid var(--ann-border)!important}
/* ============ 10. 下拉 / 浮层 ============ */
.t-popup__content,.t-select__dropdown,.el-select-dropdown,.el-dropdown-menu,.el-picker-panel{
  border-radius:6px!important;box-shadow:var(--ann-shadow-pop)!important;border:1px solid var(--ann-border)!important;overflow:hidden}
.t-select-option.t-is-selected,.el-select-dropdown__item.selected,.el-dropdown-menu__item:not(.is-disabled):hover{
  background:#F0F7FF!important;color:var(--ann-blue)!important;font-weight:600}
.t-select-option:hover,.el-select-dropdown__item:hover{background:#F5F9FF!important}
.t-tooltip,.el-tooltip__popper{border-radius:8px!important}
.el-date-picker,.el-time-picker{border-radius:8px!important;box-shadow:var(--ann-shadow-pop)!important}
.t-date-picker__dropdown{border-radius:8px!important;box-shadow:var(--ann-shadow-pop)!important}