/* ============================================================
   宝瓶 Portal — UI Polish (Devin 2026-06-11)
   纯样式增强：补齐未写样式的套餐卡片 + 移动端精致化。
   不改动任何前端 JS / 计费逻辑；通过 nginx 注入。
   ============================================================ */

/* ---------- 1. 订阅套餐 / 套餐卡片（原本无任何样式） ---------- */
.subscription-layout{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.subscription-section + .subscription-section{margin-top:0}

.section-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.section-title-row h2,
.section-title-row h3{
  font-size:17px;
  font-weight:800;
  color:var(--pink-700);
  letter-spacing:.2px;
}

/* 套餐分组（余额充值 / Codex 订阅） */
.package-sections{
  display:flex;
  flex-direction:column;
  gap:26px;
}
.package-group > h4{
  font-size:15px;
  font-weight:800;
  color:var(--pink-700);
  margin:2px 0 2px;
  display:flex;
  align-items:center;
  gap:8px;
}
.package-group > h4:before{
  content:"";
  width:4px;height:16px;border-radius:99px;
  background:var(--pink-gradient-bold);
}
.package-group > p{
  font-size:12.5px;
  color:var(--text-light);
  line-height:1.6;
  margin:2px 0 14px;
}

/* 卡片网格：桌面自适应多列，手机单列 */
.package-grid,
.subscription-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:16px;
}

/* 套餐卡片本体 */
.package-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:linear-gradient(165deg,#ffffff 0%,var(--pink-50) 100%);
  border:1px solid var(--pink-200);
  border-radius:18px;
  padding:18px 18px 16px;
  box-shadow:0 6px 18px rgba(236,72,153,.10);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.package-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(236,72,153,.20);
  border-color:var(--pink-300);
}
.package-card.recommended{
  border:2px solid var(--pink-400);
  box-shadow:0 10px 28px rgba(236,72,153,.24);
}
.package-card.recommended:after{
  content:"推荐";
  position:absolute;
  top:14px;right:0;
  background:var(--pink-gradient-bold);
  color:#fff;
  font-size:11px;font-weight:700;
  padding:3px 12px;
  border-radius:99px 0 0 99px;
  box-shadow:var(--pink-shadow);
}

.package-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.package-card-head h4{
  font-size:16px;
  font-weight:800;
  color:var(--text);
}
.package-card > p{
  font-size:12.5px;
  color:var(--text-light);
  line-height:1.6;
  margin:0 0 12px;
  min-height:34px;
}

/* 价格：醒目大字 */
.package-price{
  font-size:30px;
  font-weight:800;
  line-height:1;
  background:var(--pink-gradient-bold);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:12px;
}

/* 指标行（每日额度等）→ 信息条 */
.package-metrics{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  background:#fff;
  border:1px solid var(--pink-100);
  border-radius:10px;
  padding:8px 12px;
  margin-bottom:14px;
}
.package-metrics span{font-size:12px;color:var(--text-light)}
.package-metrics strong{font-size:15px;color:var(--pink-700);font-weight:800}

.package-card .btn{
  width:100%;
  margin-top:auto;
  padding:11px 16px;
}

/* 当前订阅卡片 */
.subscription-current-card{
  background:linear-gradient(165deg,#ffffff 0%,var(--pink-50) 100%);
  border:1px solid var(--pink-200);
  border-radius:16px;
  padding:16px;
  box-shadow:0 6px 18px rgba(236,72,153,.10);
}
.subscription-current-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:10px;font-weight:700;
}
.quota-row{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:13px;color:var(--text);margin-bottom:6px;
}
.progress-track{
  height:8px;background:var(--pink-100);border-radius:99px;overflow:hidden;
  margin-bottom:8px;
}
.progress-track > *{
  display:block;height:100%;border-radius:99px;
  background:var(--pink-gradient-bold);
}
.subscription-meta{font-size:12px;color:var(--text-light);line-height:1.7}

/* 兑换码行 */
.redeem-row{display:flex;gap:10px;align-items:stretch}
.redeem-row .input{flex:1}
.redeem-row .btn{white-space:nowrap}

/* 空状态：虚线框 + 居中，不再是大片空白 */
.empty-soft{
  text-align:center;
  color:var(--text-light);
  font-size:13px;
  line-height:1.7;
  padding:26px 16px;
  background:var(--pink-50);
  border:1px dashed var(--pink-200);
  border-radius:14px;
}

/* 额外的 tag 配色补全（套餐类型标签） */
.tag-blue{background:#e0f2fe;color:#0369a1}
.tag-purple{background:#ede9fe;color:#6d28d9}

/* ---------- 2. 统计卡片：柔化顶部硬边条 ---------- */
.stat-card{
  background:linear-gradient(165deg,#ffffff 0%,var(--pink-50) 100%);
  box-shadow:0 6px 18px rgba(236,72,153,.10);
}
.stat-card:before{
  height:3px;
  border-radius:0 0 4px 4px;
  opacity:.85;
}

/* ---------- 3. 通用卡片 / 按钮细节 ---------- */
.btn-primary{
  box-shadow:0 4px 14px rgba(236,72,153,.30);
}
.btn-primary:active{transform:translateY(1px)}

/* ============================================================
   移动端专属精致化（≤768px）
   ============================================================ */
@media (max-width:768px){
  /* 顶部客服条：收紧、不再挤压标题 */
  .top-support-bar{
    justify-content:center;
    gap:8px;
    margin-bottom:14px;
  }
  .support-pill{
    padding:7px 13px;
    font-size:11.5px;
    box-shadow:0 3px 10px rgba(236,72,153,.14);
  }

  /* 页面标题：更醒目的渐变标题 */
  .page-header{
    margin-bottom:16px;
    padding-bottom:12px;
    border-bottom:1px solid var(--pink-100);
  }
  .page-header h2{
    font-size:21px;
    font-weight:800;
  }

  /* 套餐卡片在手机上单列、间距更舒展 */
  .package-grid,
  .subscription-card-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .package-card{padding:16px}
  .package-price{font-size:27px}

  /* 兑换码：手机上换行避免拥挤 */
  .redeem-row{flex-direction:column}
  .redeem-row .btn{width:100%}

  /* 卡片内边距更紧凑 */
  .card{padding:16px;border-radius:14px}

  /* 底部导航：更精致的激活态 */
  .mobile-nav{
    box-shadow:0 -6px 20px rgba(236,72,153,.12);
  }
  .mobile-nav a.router-link-active,
  .mobile-nav a.active{
    color:var(--pink-600);
    font-weight:700;
  }
}

@media (max-width:480px){
  .page-header h2{font-size:20px}
  .package-price{font-size:25px}
}