/* ============================================================
   Telegram Proxy · 套餐中心（企业级定价）
   ============================================================ */

/* 套餐类型分类 */
.category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.category-card{
  position:relative;display:flex;align-items:center;gap:14px;text-align:left;
  border:1px solid var(--line);background:#fff;border-radius:var(--r-lg);
  padding:17px 18px;box-shadow:var(--shadow-xs);
  transition:border-color var(--speed),box-shadow var(--speed),transform var(--speed);
}
.category-card:hover{
  border-color:#bfd6e6;box-shadow:var(--shadow-sm);transform:translateY(-2px);
}
.tag-hot,.tag-recommend{
  position:absolute;top:-8px;right:14px;font-style:normal;
  font-size:10px;font-weight:750;color:#fff;border-radius:99px;padding:3px 9px;
  letter-spacing:.5px;box-shadow:0 2px 6px rgba(14,134,200,.3);
}
.tag-hot{background:linear-gradient(90deg,#f59e0b,#f97316)}
.tag-recommend{background:linear-gradient(90deg,var(--brand),#1ca0e2)}
.category-icon{
  display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:var(--r-md);
  background:var(--brand-soft);color:var(--brand);
  transition:background var(--speed),color var(--speed),transform var(--speed);
}
.category-card:hover .category-icon{background:var(--brand);color:#fff;transform:scale(1.05)}
.category-icon svg{width:20px;height:20px}
.category-card div{flex:1;min-width:0}
.category-card b,.category-card small{display:block}
.category-card b{font-size:14.5px;color:var(--ink);font-weight:680}
.category-card small{font-size:11.5px;color:var(--muted);margin-top:2px}
.category-card>.chevron{display:inline-flex;color:var(--muted-2);transition:transform var(--speed),color var(--speed)}
.category-card>.chevron svg{width:16px;height:16px}
.category-card:hover .chevron{color:var(--brand);transform:translateX(3px)}

/* 套餐列表工具栏 */
.package-list-toolbar{display:flex;align-items:center;gap:12px;margin:-2px 0 16px}
.back-button{
  display:inline-flex;align-items:center;
  border:1px solid var(--line);background:#fff;border-radius:var(--r-md);
  padding:8px 13px;color:var(--ink-2);font-size:12.5px;font-weight:600;
  transition:border-color var(--speed),color var(--speed),transform var(--speed);
}
.back-button svg{width:14px;height:14px;margin-right:4px}
.back-button:hover{border-color:#c9d2dc;color:var(--ink);transform:translateX(-2px)}
.package-list-toolbar span{font-size:13.5px;color:var(--ink);font-weight:680}

/* 套餐定价卡（JS 动态生成） */
.package-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.package-card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 20px 18px;box-shadow:var(--shadow-xs);
  transition:border-color var(--speed),box-shadow var(--speed),transform var(--speed);
}
.package-card:hover{border-color:#bfd6e6;box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.package-card.recommended{border-color:#bfd6e6}
.package-card h3{font-size:14.5px;margin:0;color:var(--ink);font-weight:680}
.package-price{font-size:26px;font-weight:760;color:var(--ink);letter-spacing:-.7px;margin:10px 0 14px}
.package-price:before{content:"¥";font-size:15px;font-weight:650;color:var(--brand-strong);margin-right:1px}
.package-meta{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.package-meta span{
  font-size:11px;color:var(--ink-2);font-weight:600;
  background:var(--bg);border:1px solid var(--line-soft);border-radius:99px;padding:4px 9px;
}
.package-card .tg-button{width:100%;padding:9px;margin-top:auto}

@media(max-width:720px){
  .category-grid{grid-template-columns:1fr}
  .package-grid{grid-template-columns:1fr}
}