/* ================================
   V2Board - Lite Smooth (Clean)
   浅色 / 大圆角 / 渐变主色 / 统一配色
   ================================ */

/* ——— 变量 ——— */
:root{
  --brand:#6a5af9; --brand-2:#8a5cff; --brand-hover:#5a4ae8;
  --bg:#f6f7fb; --card:#fff; --header:#fff;
  --text:#111827; --text-weak:#6b7280; --muted:#6b7280;
  --border:#eaecef; --ok:#22c55e;
  --radius-xl:18px; --radius-md:14px;
  --shadow-sm:0 6px 20px rgba(30,41,59,.06);
  --shadow-md:0 16px 40px rgba(30,41,59,.08);
  --focus:0 0 0 3px rgba(106,90,249,.18);
  --font:"Inter","MiSans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
}

/* ——— 基础 ——— */
html,body{ background:var(--bg) !important; color:var(--text); font-family:var(--font); }
a{ color:var(--brand); } a:hover{ color:var(--brand-hover); }
h1,h2,h3,h4,h5,h6{ color:var(--text) !important; }
.text-muted,.muted,.help-block{ color:var(--muted) !important; }
.content,.content-full{ padding:24px 24px 36px; }

/* ——— 顶部栏 ——— */
#page-header{ background:var(--header) !important; border-bottom:1px solid var(--border); }
#page-header .content-header{ color:var(--text); }
.v2board-container-title{ color:#0f172a !important; font-weight:800; font-size:22px; letter-spacing:.2px; }
#page-header .btn{
  border-radius:var(--radius-md) !important; background:#fff; color:#111827;
  border:1px solid var(--border);
}
#page-header .btn:hover{ border-color:#d6daf0; }

/* ——— 侧栏 + 品牌条 ——— */
#sidebar{ width:240px; background:#fff !important; border-right:1px solid var(--border); }
#sidebar .content-side{ padding:10px 8px 14px; scrollbar-width:thin; scrollbar-color:#dfe3ee transparent; }
#sidebar .content-side::-webkit-scrollbar{ width:6px; }
#sidebar .content-side::-webkit-scrollbar-thumb{ background:#dfe3ee; border-radius:99px; }

/* 品牌区统一白底 */
#sidebar .smini-hidden.bg-header-dark,
#sidebar .content-header.bg-white-10{ background:var(--card) !important; }
#sidebar .content-header{
  background:transparent !important; border-bottom:1px solid var(--border);
  padding:14px 16px !important;
}
#sidebar .content-header a,
#sidebar .content-header .text-white,
#sidebar .content-header .text-white-75{
  color:#0f172a !important; font-weight:800; letter-spacing:.2px; text-decoration:none !important;
}

/* 菜单 */
.nav-main-heading{ color:#9aa3b2 !important; font-size:.86rem; padding:12px 16px 6px; letter-spacing:.3px; }
.nav-main .nav-main-item{ margin:3px 6px; }
.nav-main-link{
  display:flex; align-items:center; gap:10px; height:44px; padding:0 12px;
  color:#475569 !important; border-radius:12px; transition:background .12s,color .12s,box-shadow .12s;
}
.nav-main-link:hover{ background:#f2f4f8 !important; color:#0f172a !important; }
.nav-main-link.active{
  position:relative; color:#0f172a !important;
  background:linear-gradient(0deg,rgba(106,90,249,.10),rgba(106,90,249,.10)),#fff !important;
  box-shadow:inset 0 0 0 1px rgba(106,90,249,.25);
}
.nav-main-link.active::before{
  content:""; position:absolute; left:-6px; top:8px; bottom:8px; width:4px; border-radius:4px;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
}
.nav-main-link .nav-main-link-icon{
  width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; color:inherit !important;
}

/* 底部版权 & 退出按钮 */
.v2board-copyright{ margin-top:10px; padding:10px 14px; color:#9aa3b2;
  border-top:1px solid var(--border); background:#fff; }
#sidebar a[href*="logout"]{
  display:flex; align-items:center; gap:8px; height:42px; margin:10px 8px 2px; padding:0 12px;
  border:1px solid #fde2e2; background:#fff; color:#e11d48 !important; border-radius:12px;
}
#sidebar a[href*="logout"]:hover{ background:#fff5f5; border-color:#fecaca; }

/* ——— 卡片（外圆内直；只外层有阴影） ——— */
.block,.block-rounded,.block-content,.block-header{
  background:var(--card) !important; color:var(--text) !important; border:1px solid var(--border) !important;
}
.block{ margin-top:18px !important; }
.block:first-child{ margin-top:0 !important; }
.block.block-rounded{ border-radius:var(--radius-xl) !important; overflow:hidden !important; box-shadow:var(--shadow-sm); }
.block-header{ padding:14px 16px !important; border-bottom:1px solid var(--border) !important; border-radius:0 !important; }
.block-title{ font-weight:800; margin:0; }
.block-header + .block-content{ padding:18px 16px !important; border-top:0 !important; border-radius:0 !important; }
.block-content{ overflow:visible !important; }   /* 允许内元素阴影外扩 */

/* 悬浮轻浮起 */
.block.block-rounded:hover{ transform:translateY(-1px); transition:transform .16s, box-shadow .16s; box-shadow:var(--shadow-md); }

/* ——— “捷径”区：修复贴边 & 风格一致 ——— */
.block-content.p-0{ padding:14px 16px !important; }
.v2board-shortcuts-item{
  background:#fff; border:1px solid var(--border); border-radius:14px;
  padding:14px 16px; margin:10px 6px; color:#1f2937;
  transition:transform .14s, box-shadow .14s, border-color .14s;
}
.v2board-shortcuts-item:first-child{ margin-top:2px; }
.v2board-shortcuts-item:last-child{ margin-bottom:2px; }
.v2board-shortcuts-item .description{ color:var(--text-weak); font-size:.92rem; margin-top:4px; }
.v2board-shortcuts-item i{ color:var(--brand); }
.v2board-shortcuts-item:hover{ transform:translateY(-2px); border-color:#d6daf0; box-shadow:var(--shadow-md); }

/* ——— 按钮 ——— */
.btn{ background:#fff; color:#1f2937; border:1px solid var(--border); border-radius:var(--radius-md); }
.btn:hover{ border-color:#d6daf0; color:#111827; }
.btn-primary,
.ant-btn-primary,
.el-button--primary{
  background:linear-gradient(90deg,var(--brand),var(--brand-2)) !important;
  border-color:transparent !important; color:#fff !important; border-radius:var(--radius-md) !important;
  box-shadow:0 10px 24px rgba(106,90,249,.20);
}
.btn-primary:hover,.ant-btn-primary:hover,.el-button--primary:hover{
  filter:saturate(1.05) brightness(1.02); box-shadow:0 16px 36px rgba(106,90,249,.28);
}

/* ——— 表单 ——— */
.form-group{ margin-bottom:14px !important; }
.form-control, input, textarea, select, .ant-input, .el-input__inner{
  background:#fff !important; color:var(--text) !important;
  border:1px solid var(--border) !important; border-radius:var(--radius-md) !important;
  height:44px; box-shadow:none !important; outline:none !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder{ color:#a1a7b4; }
.form-control:focus, input:focus, textarea:focus, select:focus,
.ant-input:focus, .el-input__inner:focus{ border-color:#cdd2e3 !important; box-shadow:var(--focus) !important; }

/* “礼品卡”同行按钮与输入同高 */
.col-lg-8.col-xl-5 .ant-btn, .col-lg-8.col-xl-5 .btn{
  margin-left:8px; height:44px; line-height:44px; border-radius:var(--radius-md) !important;
}
/* 某些主题把行挤在一起 */
.row.push{ margin-top:0 !important; row-gap:12px; }
.ant-switch-checked {
    background-color: #0665d0;
}
/* ——— 表格 ——— */
.table{
  color:#111827 !important; background:#fff !important; border-color:var(--border) !important;
  border-radius:var(--radius-xl) !important; overflow:hidden;
}
.table thead th{ background:#fafbff !important; color:#6b7280 !important; border-color:var(--border) !important; }
.table tbody td{ border-color:var(--border) !important; }
.table tbody tr:hover td{ background:#f7f8fe !important; }

/* ——— Dropdown / 弹层 ——— */
.dropdown-menu{
  background:#fff !important; color:var(--text) !important;
  border:1px solid var(--border) !important; border-radius:14px !important; box-shadow:var(--shadow-md);
}
.dropdown-item{ color:#334155 !important; }
.dropdown-item:hover{ background:#f3f4f6; }

/* ——— 提示/徽标 ——— */
.alert-success{ background:#eef9e9 !important; color:#2f855a !important; border:1px solid #e3f0df !important; }
.badge,.tag,.label{ border-radius:999px !important; padding:.1rem .5rem; font-weight:600; }

/* ——— 价格卡（订阅卡） ——— */
a.block.block-link-pop.block-rounded,
.block.plan-card{ background:#fff !important; border:1px solid var(--border) !important;
  border-radius:var(--radius-xl) !important; overflow:hidden !important; }
.block-header.plan{ background:#fff !important; padding:14px 16px !important; border-bottom:1px solid var(--border); }
.block-header.plan .block-title{ margin:0; color:#0f172a; font-weight:800; font-size:16px; }
.block-content.bg-gray-light{ background:#fff !important; border:0 !important; padding:18px 16px !important; }
.block-content.bg-gray-light .h1{ font-size:34px; font-weight:800; margin:0 0 4px; color:#0f172a; }
.block-content.bg-gray-light .h6{ margin:0; color:var(--text-weak); }
a.block .block-content.py-3{ padding:14px 16px 16px !important; }
a.block .block-content.py-3 .mb-3{ margin-bottom:8px !important; }
a.block .alert{ border:1px solid #e3f0df; background:#eef9e9; color:#2f855a; border-radius:10px; padding:10px 12px; margin:6px 0 10px; }
a.block .my-4{ margin:10px 0 6px !important; }
a.block .my-4 p{ display:flex; align-items:center; gap:8px; margin:10px 0; color:#334155; line-height:1.35; }
a.block .my-4 p i.fas.fa-check-circle{ min-width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; color:var(--brand) !important; }
a.block .btn.btn-sm.btn-alt-primary{
  width:100%; height:44px; line-height:44px; font-weight:700; border-radius:var(--radius-md) !important;
  background:linear-gradient(90deg,var(--brand),var(--brand-2)) !important; border:none !important; color:#fff !important;
  box-shadow:0 10px 24px rgba(106,90,249,.20); transition:filter .12s, box-shadow .12s;
}
a.block .btn.btn-sm.btn-alt-primary:hover{ filter:saturate(1.05) brightness(1.02); box-shadow:0 16px 36px rgba(106,90,249,.28); }
.row > [class*="col-"] > a.block{ margin:12px 0 !important; }

/* ——— 其它 ——— */
hr,.divider,.ant-divider,.el-divider{ border-color:var(--border) !important; }
.v2board-nav-mask{ background:rgba(15,23,42,.35); }

/* 旧主题残留阴影统一清理，仅保留外层卡片阴影 */
[class*="shadow"],.shadow,.shadow-sm,.shadow-lg{ box-shadow:none !important; }
.block.block-rounded{ box-shadow:var(--shadow-sm) !important; }

/* ——— 响应式 ——— */
@media (max-width:992px){
  #sidebar{ width:100%; }
  .content,.content-full{ padding:16px 14px 28px; }
  .nav-main .nav-main-item{ margin:2px 4px; }
  .nav-main-link{ height:42px; border-radius:10px; }
}
/* =========================
   1) 开关 Switch 统一风格
   兼容：Antd / Bootstrap5(.form-switch) / Bootstrap4(.custom-switch)
   ========================= */

/* Ant Design */
.ant-switch{
  background:#e5e7eb !important;      /* 关闭态灰轨道 */
  border-radius:999px !important;
  box-shadow:inset 0 0 0 1px #e5e7eb;
}
.ant-switch-checked{
  background:linear-gradient(90deg,var(--brand),var(--brand-2)) !important;
  box-shadow:0 4px 14px rgba(106,90,249,.28);
}
.ant-switch-handle{
  top:2px !important;                  /* 让小圆更居中 */
}
.ant-switch:focus{ box-shadow:var(--focus) !important; }

/* Bootstrap 5 */
.form-switch .form-check-input{
  width: 3rem; height: 1.6rem;
  border-radius:999px; background-color:#e5e7eb; border-color:#e5e7eb;
  box-shadow: inset 0 0 0 1px #e5e7eb;
}
.form-switch .form-check-input:checked{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border-color:transparent; box-shadow:0 4px 14px rgba(106,90,249,.28);
}
.form-switch .form-check-input:focus{ box-shadow:var(--focus); }

/* Bootstrap 4（OneUI 的 custom-switch） */
.custom-control.custom-switch .custom-control-label::before{
  left:0; width:3rem; height:1.6rem; border-radius:999px;
  background:#e5e7eb; border:1px solid #e5e7eb;
}
.custom-control.custom-switch .custom-control-label::after{
  top:2px; left:2px; width:1.2rem; height:1.2rem; border-radius:999px; background:#fff;
}
.custom-control-input:checked ~ .custom-control-label::before{
  background:linear-gradient(90deg,var(--brand),var(--brand-2)); border-color:transparent;
  box-shadow:0 4px 14px rgba(106,90,249,.28);
}
.custom-control-input:checked ~ .custom-control-label::after{
  transform: translateX(1.4rem);
}

/* =========================
   2) 分段筛选按钮（“全部/按周期/按流量”）统一为胶囊导航
   兼容：.btn-group / .nav-pills
   ========================= */

/* btn-group 版本 */
.btn-group.segment,           /* 如果外层有自定义类就用它 */
.btn-group { gap: 8px; }      /* 让按钮之间有间隔 */

.btn-group .btn,
.nav-pills .nav-link{
  border-radius:999px !important;
  padding:8px 16px;
  border:1px solid var(--border) !important;
  background:#fff; color:#334155;
  box-shadow:none;
}

/* 选中态（active/aria-pressed=true） */
.btn-group .btn.active,
.btn-group .btn[aria-pressed="true"],
.nav-pills .nav-link.active{
  background:linear-gradient(90deg,var(--brand),var(--brand-2)) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(106,90,249,.22);
}

/* 悬停态 */
.btn-group .btn:hover,
.nav-pills .nav-link:hover{
  border-color:#d6daf0 !important;
  color:#0f172a;
}

/* 若使用 .btn-outline-primary 作为未选中样式 */
.btn-outline-primary{
  border-color:var(--border) !important; color:#334155;
}
.btn-outline-primary:hover{ border-color:#d6daf0 !important; color:#0f172a; }
.btn-outline-primary.active{ 
  background:linear-gradient(90deg,var(--brand),var(--brand-2)) !important; 
  color:#fff !important; border-color:transparent !important;
}

/* 按钮组整体放在标题下方时的间距建议 */
.segment-wrap{ margin: 8px 0 12px; }
/* =========================
   计划筛选标签 tabs（全部 / 按周期 / 按流量）
   适配：.v2board-plan-tabs
   ========================= */
.v2board-plan-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(30, 41, 59, 0.04);
}

.v2board-plan-tabs span {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.92rem;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.v2board-plan-tabs span:hover {
  background: #f3f4f6;
  color: #0f172a;
}

/* 激活项：品牌渐变 + 白字 */
.v2board-plan-tabs span.active,
.v2board-plan-tabs span.bg-primary {
  background: linear-gradient(90deg, var(--brand), var(--brand-2)) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(106, 90, 249, 0.25);
}

/* 若外层有多组 tabs，添加间距 */
.v2board-plan-tabs + .v2board-plan-tabs {
  margin-left: 8px;
}

/* 在小屏幕下稍微压缩 */
@media (max-width: 576px) {
  .v2board-plan-tabs span {
    padding: 5px 14px;
    font-size: 0.86rem;
  }
}
/* =========================
   修复“订单总额”卡片文字颜色异常（由旧的 text-light 引起）
   ========================= */

/* 强制浅色模式下这类卡片用白底+深色字 */
.block.text-light,
.block.block-link-pop.text-light,
.block-rounded.text-light {
  background: var(--card) !important;
  color: var(--text) !important;
}

/* 覆盖旧 inline 深色背景 */
.block[style*="background: rgb(53"],
.block[style*="background:#35383d"],
.block[style*="background-color: rgb(53"] {
  background: var(--card) !important;
  color: var(--text) !important;
}

/* 内部标题、金额、说明文本 */
.block.text-light h1,
.block.text-light h2,
.block.text-light h3,
.block.text-light h4,
.block.text-light h5,
.block.text-light .text-light,
.block.text-light [style*="color: rgb(100"] {
  color: var(--text) !important;
}

/* 金额部分更显眼 */
.block.text-light h1 {
  font-size: 28px;
  font-weight: 800;
  color: #111827 !important;
}

/* 次级文字（如“总计”） */
.block.text-light .pt-3,
.block.text-light .text-muted {
  color: var(--text-weak) !important;
}

/* 底部按钮保持品牌渐变风格 */
.block.text-light .btn-primary {
  background: linear-gradient(90deg, var(--brand), var(--brand-2)) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 10px 24px rgba(106, 90, 249, .25);
}
/* 公告块：把暗色风格改为浅色白底 + 深色文字 */
.block-content.bg-black-50{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  color: var(--text) !important;
}

/* 仅在公告块里，覆盖旧的白字类 */
.block-content.bg-black-50 .text-white{
  color: var(--text) !important;
}
.block-content.bg-black-50 .text-white-75{
  color: var(--text-weak) !important;
}

/* 标题/日期更清晰 */
.block-content.bg-black-50 .font-size-lg{
  color: var(--text) !important;
  font-weight: 800;
}
.block-content.bg-black-50 .font-w600{
  color: var(--text-weak) !important;
}

/* “公告”徽标保留醒目橙色（可按需改成品牌色） */
.block-content.bg-black-50 .badge.badge-danger{
  background: #f97316 !important;  /* 橙色 */
  color: #fff !important;
  border-radius: 999px;
  padding: .35rem .6rem;
}
/* 作用充值弹窗 */
.rcg-lite .ant-modal-content{ border-radius:14px; }
.rcg-lite .ant-modal-header{ border-radius:14px 14px 0 0; }
.rcg-lite .ant-modal-body{ padding:16px; }

.rcg-lite-body{ }
.rcg-lite-panel{
  display:grid; grid-template-columns:1fr 56px 1fr; gap:12px; align-items:center;
  background:#f7f8fa; border:1px solid #eef0f3; border-radius:12px; padding:12px; margin-bottom:12px;
}
.rcg-lite-col{ display:flex; flex-direction:column; }
.rcg-lite-label{ font-size:12px; color:#7a8699; }
.rcg-lite-val{ font-size:20px; font-weight:900; color:#111827; }
.rcg-lite-icon{ display:grid; place-items:center; font-size:22px; color:#7a8699; }

.rcg-lite-inputwrap{ margin:8px 0 6px; }
.rcg-lite-inputlabel{ font-size:12px; color:#7a8699; margin-bottom:6px; }
.rcg-lite-unit{ margin-left:6px; opacity:.7; }
.rcg-lite-input{
  width:100%; height:40px; border-radius:10px; padding:0 12px; outline:none;
  background:#fff; border:1px solid #e5e7eb;
}
.rcg-lite-input:focus{ border-color:#7aa8ff; box-shadow:0 0 0 3px rgba(122,168,255,.18); }

.rcg-lite-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }
.rcg-lite-chip{
  position:relative; border:1px solid #e5e7eb; background:#fff; color:#111827;
  border-radius:12px; padding:10px 12px; text-align:left; cursor:pointer;
  transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease;
}
.rcg-lite-chip:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(16,24,40,.08); }
.rcg-lite-chip.active{ border-color:#7aa8ff; box-shadow:0 0 0 3px rgba(122,168,255,.18); }
.rcg-chip-val{ font-weight:900; font-size:16px; }
.rcg-chip-gift{
  position:absolute; top:-8px; right:-8px; background:#ff3b30; color:#fff;
  padding:2px 6px; border-radius:10px; font-weight:800; font-size:11px; box-shadow:0 8px 16px rgba(255,59,48,.28);
}

@media (max-width:520px){ .rcg-lite-grid{ grid-template-columns:repeat(2,1fr); } }