/* Shared plan card styles — used by /pricing and /profile upgrade modal.
   Edit here; both pages update automatically. */
.plan-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.plan-card{background:#0d1117;border:2px solid #30363d;border-radius:12px;padding:20px 16px;display:flex;flex-direction:column;transition:border-color .2s}
.plan-card:hover{border-color:#58a6ff}
.plan-card.recommended{border-color:#58a6ff;position:relative}
.plan-card.recommended::after{content:'Recommended';position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:#58a6ff;color:#fff;font-size:10px;font-weight:700;padding:2px 10px;border-radius:10px;white-space:nowrap}

/* Fixed-height rows keep the horizontal dividers aligned across all 3 cards */
.plan-card-header{text-align:center;padding-bottom:12px;border-bottom:1px solid #21262d;margin-bottom:12px;min-height:108px;display:flex;flex-direction:column;justify-content:center}
.plan-name{font-size:14px;font-weight:700;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.plan-price{font-size:28px;font-weight:800;color:#e6edf3;margin-bottom:2px}
.plan-price span{font-size:13px;font-weight:400;color:#8b949e}
.plan-period{font-size:11px;color:#8b949e;min-height:14px}

.plan-section{padding:10px 0;border-bottom:1px solid #21262d}
.plan-section.section-energy{min-height:64px}
.plan-section.section-essence{min-height:64px}
.plan-section.section-features{min-height:280px}
.plan-section-label{font-size:10px;font-weight:700;color:#8b949e;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;display:flex;align-items:center;gap:4px}
.plan-section-label .icon{font-size:12px}
.plan-section-value{font-size:15px;font-weight:700;color:#3fb950}
.plan-section-value.muted{color:#8b949e;font-size:13px;font-weight:400}

.plan-features{list-style:none;font-size:12px;color:#c9d1d9;width:100%;margin:0;padding:0}
.plan-features li{padding:3px 0;display:flex;align-items:flex-start;gap:6px;line-height:1.4}
.plan-features li .fi{flex-shrink:0;width:16px;text-align:center;font-size:13px;font-weight:700}
.plan-features li .fi.ok{color:#3fb950}
.plan-features li .fi.no{color:#f85149}

/* fee-box: flex-start so the badge always sits at a consistent vertical position */
.plan-fee-box{text-align:center;padding:10px 0 0;min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px}
.plan-fee-label{font-size:10px;font-weight:700;color:#8b949e;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;height:16px;line-height:16px}
.plan-fee-badge{display:inline-block;padding:4px 16px;border-radius:6px;font-size:14px;font-weight:800;color:#fff}
.plan-fee-badge.fee-free{background:#21262d;color:#8b949e}
.plan-fee-badge.fee-lab{background:#58a6ff}
.plan-fee-badge.fee-pro{background:#238636}
.plan-fee-tier{font-size:10px;color:#8b949e}
.plan-arrow{font-size:16px;color:#8b949e;line-height:1}

.plan-btn{width:100%;padding:8px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;border:none;transition:all .15s;margin-top:auto;display:block;text-align:center;text-decoration:none}
.plan-btn-free{background:#21262d;color:#fff}
.plan-btn-lab{background:#58a6ff;color:#fff}
.plan-btn-lab:hover{background:#79c0ff}
.plan-btn-pro{background:#238636;color:#fff}
.plan-btn-pro:hover{background:#2ea043}

/* PYT top-up row — available on any plan */
.plan-topup{margin-top:18px;padding:14px 16px;background:#0d1117;border:1px solid #30363d;border-radius:10px}
.plan-topup-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.plan-topup-title{font-size:12px;font-weight:700;color:#e6edf3;letter-spacing:.5px}
.plan-topup-sub{font-size:11px;color:#8b949e}
.plan-topup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.plan-topup-btn{padding:10px 8px;background:#58a6ff;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:13px;font-weight:700;transition:background .15s;display:flex;flex-direction:column;align-items:center;gap:2px}
.plan-topup-btn:hover{background:#79c0ff}
.plan-topup-btn .price{font-size:11px;font-weight:500;opacity:.85}

@media(max-width:700px){
  .plan-grid{grid-template-columns:1fr}
  .plan-section.section-features{min-height:auto}
  .plan-card-header,.plan-section.section-energy,.plan-section.section-essence,.plan-fee-box{min-height:auto}
}