/* ============================================================
   风栁4.0 统一样式层（FengLiu 4.0 Unified Style Layer）
   ------------------------------------------------------------
   作用范围：用户中心（clientarea）页面，两套主题共用同一 DOM 锚点：
     .template > el-container > .el-aside / .el-header / .el-main
     .main-card / .main-card-title / .box-top / 状态标签类
   加载位置：header.php 内最后一段公共样式，早于页面级 css。
   约定：仅做"简约化归一"，不改各主题的几何尺寸（高度/宽度），
        状态标签等关键统一项使用 !important 保证两套主题表现一致。
   ============================================================ */

:root {
  --fL4-line: #eef0f4;            /* 统一分隔线 */
  --fL4-text: #171725;            /* 主文本 */
  --fL4-text-2: #5b6472;          /* 次级文本 */
  --fL4-text-3: #8692b0;          /* 弱文本 */
  --fL4-canvas: #f6f7fa;          /* 主区画布底色 */
  --fL4-radius: 10px;             /* 卡片圆角 */
  --fL4-radius-sm: 8px;           /* 控件圆角 */
  --fL4-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* ---------- 顶栏：去重阴影，改用细分隔线 + 轻磨砂 ---------- */
.template .el-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--fL4-line);
  box-shadow: none;
}

/* ---------- 侧边栏：菜单项圆角化 + 中性悬停（深浅底通用） ---------- */
.template .el-aside .el-menu-item,
.template .el-aside .el-submenu__title {
  border-radius: var(--fL4-radius-sm);
  margin: 2px 10px;
  transition: background-color 0.2s ease;
}
.template .el-aside .el-menu-item:hover,
.template .el-aside .el-submenu__title:hover {
  background: rgba(127, 127, 127, 0.12) !important;
}
.template .el-aside .el-menu-item.is-active {
  background: rgba(127, 127, 127, 0.16) !important;
  font-weight: 600;
}

/* ---------- 主区：统一浅灰画布，白卡片浮层 ---------- */
.template .el-main {
  background: var(--fL4-canvas);
}

/* ---------- 卡片：白底 + 细边 + 极轻投影 ---------- */
.template .main-card {
  background: #fff;
  border: 1px solid var(--fL4-line);
  border-radius: var(--fL4-radius);
  padding: 0.24rem 0.28rem;
  box-shadow: var(--fL4-card-shadow);
}

/* 卡片标题：统一字号字重，下沿即分隔线 */
.template .main-card-title {
  font-size: 0.2rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--fL4-text);
  padding-bottom: 0.12rem;
  border-bottom: 1px solid var(--fL4-line);
  margin-bottom: 0.2rem;
}

/* 区块小标题：保留主色竖条，统一字重 */
.template .account-title,
.template .basic-title {
  border-left: 3px solid var(--color-primary, #3699ff);
  padding-left: 0.1rem;
  font-size: 0.16rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--fL4-text);
}

/* 头部信息条 / 各类分隔线：统一线色 */
.template .box-top {
  border-bottom: 1px solid var(--fL4-line);
}

/* ---------- 状态标签：统一胶囊形 + 语义色 ---------- */
.template .status-tag,
.template .el-tag,
.template .host-status {
  border-radius: 999px !important;
  border: none !important;
  font-size: 0.12rem !important;
  font-weight: 500;
  padding: 0.03rem 0.12rem !important;
  line-height: 1.6 !important;
}
/* 成功 */
.template .status-tag.Paid,
.template .el-tag.Paid,
.template .host-status.Active,
.template .Withdraw {
  color: var(--color-success, #12b76a) !important;
  background: rgba(61, 213, 152, 0.14) !important;
}
/* 危险 */
.template .status-tag.Unpaid,
.template .el-tag.Unpaid,
.template .host-status.Unpaid,
.template .Refund,
.template .Freeze {
  color: var(--color-danger, #f0142f) !important;
  background: rgba(240, 20, 47, 0.08) !important;
}
/* 等待/警告 */
.template .status-tag.Wait,
.template .host-status.Pending,
.template .host-status.Suspended,
.template .host-status.Failed,
.template .Applied {
  color: var(--color-warning, #e6a23c) !important;
  background: rgba(230, 162, 60, 0.14) !important;
}
/* 信息/蓝 */
.template .status-tag.Refunded,
.template .host-status.Deleted,
.template .Recharge,
.template .recharge,
.template .Unfreeze,
.template .Artificial {
  color: var(--color-info, #3699ff) !important;
  background: rgba(54, 153, 255, 0.12) !important;
}
/* 中性灰（Deleted 独立给出更弱对比） */
.template .host-status.Deleted {
  color: var(--fL4-text-3) !important;
  background: #f2f2f7 !important;
}

/* ---------- 表格：浅色表头 + 统一线色 ---------- */
.template .el-table th {
  background: #f7f8fa;
  color: var(--fL4-text-2);
  font-weight: 500;
}
.template .el-table td,
.template .el-table th.is-leaf {
  border-bottom: 1px solid var(--fL4-line);
}

/* ---------- 标签页：细分隔线 + 加粗激活项 ---------- */
.template .el-tabs__nav-wrap::after {
  height: 1px;
  background: var(--fL4-line);
}
.template .el-tabs__item.is-active {
  font-weight: 600;
}
.template .el-tabs__active-bar {
  height: 2px;
  border-radius: 2px;
}

/* ---------- 分页：圆角页码 ---------- */
.template .el-pager .number {
  border-radius: 6px;
}

/* ---------- 控件圆角：按钮/输入框/弹窗 ---------- */
.el-button {
  border-radius: var(--fL4-radius-sm);
}
.template .el-input__inner,
.template .el-textarea__inner {
  border-radius: var(--fL4-radius-sm);
}
.el-dialog,
.el-message-box {
  border-radius: var(--fL4-radius);
  overflow: hidden;
}

/* ---------- 移动端微调 ---------- */
@media screen and (max-width: 750px) {
  .template .main-card {
    padding: 0.24rem 0.2rem;
  }
  .template .main-card-title {
    font-size: 0.18rem;
  }
}