.plans-shell { min-height: 100vh; background: #f3f7fd; }
.plans-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 32px; border-bottom: 1px solid #dfe9f5; background: rgba(255,255,255,.9); }
.plans-brand img { display: block; width: 170px; height: auto; }
.plans-header-actions { display: flex; align-items: center; gap: 8px; }
.plans-main { max-width: 1180px; margin: 0 auto; padding: 40px 32px 60px; }
.plans-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.topcrumb { color: #7f94ad; font-family: var(--mono); font-size: 9px; letter-spacing: .13em; }
.plans-title-row h1 { margin: 7px 0 0; font-size: 34px; font-weight: 400; letter-spacing: -.045em; }
.plans-title-row p { margin: 7px 0 0; color: #607791; font-size: 12px; }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.plan-card { display: flex; flex-direction: column; padding: 22px; border: 1px solid #dfe9f5; border-radius: 13px; background: #fff; }
.plan-card.is-highlighted { border-color: #8bb4ff; box-shadow: 0 14px 34px rgba(47,107,255,.1); }
.plan-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.plan-card h2 { margin: 0; font-size: 20px; font-weight: 500; }
.plan-code { margin-top: 4px; color: #95a8bb; font-family: var(--mono); font-size: 9.5px; }
.plan-price { margin-top: 17px; color: #0a1d38; font-size: 31px; font-weight: 400; letter-spacing: -.045em; }
.plan-billing { margin-top: 2px; color: #8da2b7; font-size: 10px; }
.plan-tagline { margin: 12px 0 0; color: #657d94; font-size: 11px; line-height: 1.7; }
.plan-features { flex: 1; margin: 14px 0; padding: 12px 0 0; border-top: 1px solid #eaf1f9; list-style: none; }
.plan-features li { color: #60788f; font-size: 11px; line-height: 1.8; }
.plan-features li::before { content: "✓"; margin-right: 6px; color: #139b6b; font-size: 9px; }
.plan-actions { display: flex; gap: 7px; padding-top: 10px; }
.plan-status { padding: 3px 7px; border-radius: 999px; font-size: 9px; }
.plan-status.active { background: #eefaf5; color: #16875c; }
.plan-status.disabled { background: #f4f6f8; color: #7e8f9f; }
.plan-modal-card { max-width: 640px; }
.check-line { display: flex; align-items: center; gap: 8px; margin-top: 13px; color: #4f6882; font-size: 12px; }
@media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; } .plans-header { flex-direction: column; align-items: flex-start; padding: 16px 18px; } .plans-header-actions { flex-wrap: wrap; } .plans-main { padding: 28px 16px 50px; } .plans-title-row { align-items: flex-start; flex-direction: column; } }