.billingView{height:100%;overflow:auto;background:#f6f7f9}.billingInner{width:min(1260px,calc(100% - 48px));margin:0 auto;padding:34px 0 68px}.billingHeading{padding:8px 0 26px}.billingHeading p,.billingPlansSection header p{margin:0 0 8px;color:#ff5a63;font-size:11px;font-weight:800;letter-spacing:1.8px}.billingHeading h1{margin:0;color:#202126;font-size:32px;letter-spacing:.2px}.billingHeading small{display:block;margin-top:8px;color:#8b8f98;font-size:13px}.billingBackButton{display:inline-flex;align-items:center;gap:6px;margin:0 0 23px;padding:0;border:0;color:#777c86;background:transparent;font-size:12px;font-weight:700}.billingBackButton:hover{color:#ff5a63}.billingBackButton svg{width:16px;height:16px}.billingAccountPanel{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:24px 28px;border:1px solid #ebecef;border-radius:12px;background:#fff;box-shadow:0 12px 30px rgba(27,30,36,.06)}.billingIdentity{display:flex;align-items:center;gap:13px;min-width:210px}.billingAvatar{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#202126;font-size:22px;font-weight:800}.billingIdentity strong{display:block;color:#24262b;font-size:17px}.billingIdentity small{display:block;margin-top:6px;color:#9a9ea7;font-size:11px}.billingStats{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));gap:18px;flex:1}.billingStats div{padding-left:18px;border-left:1px solid #eceef1}.billingStats span{display:block;color:#9a9ea7;font-size:11px}.billingStats strong{display:block;margin-top:8px;color:#272930;font-size:15px;white-space:nowrap}.billingStats div:nth-child(3) strong{color:#ff5a63;font-size:20px}.billingRuleBar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:18px 0 34px;padding:17px 20px;border:1px solid #ffd8db;border-radius:10px;background:linear-gradient(105deg,#fff1f2,#fff)}.billingRuleBar>div{display:flex;align-items:center;gap:12px}.billingCoin{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:#fff;background:#ff5a63;font-size:13px;font-weight:900}.billingRuleBar strong{display:block;color:#303239;font-size:14px}.billingRuleBar small{display:block;margin-top:4px;color:#8e929b;font-size:11px}.billingRuleBar button{display:inline-flex;align-items:center;gap:7px;padding:8px 0;border:0;color:#ff5a63;background:transparent;font-size:12px;font-weight:800}.billingRuleBar button svg{width:15px;height:15px}.billingPlansSection>header{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px}.billingPlansSection h2{margin:0;color:#25272d;font-size:24px}.billingPlansSection>header>span{color:#9a9ea7;font-size:12px}.billingPlans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.billingPlan{position:relative;display:flex;min-height:468px;flex-direction:column;padding:24px;border:1px solid #e7e8eb;border-radius:12px;background:#fff;box-shadow:0 8px 24px rgba(27,30,36,.04)}.billingPlan.is-recommended{border-color:#ff9da2;box-shadow:0 14px 34px rgba(255,90,99,.12)}.billingPlan.is-current{background:#fffafa}.billingPlanBadge{position:absolute;right:18px;top:17px;padding:5px 9px;border-radius:999px;color:#fff;background:#ff5a63;font-size:10px;font-weight:800}.billingPlan header p{margin:0;color:#292b31;font-size:18px;font-weight:800}.billingPlan header small{display:block;margin-top:6px;color:#9a9ea7;font-size:11px}.billingPrice{display:flex;align-items:baseline;margin:28px 0 18px;color:#292b31}.billingPrice span{font-size:17px;font-weight:800}.billingPrice strong{margin:0 4px;color:#ff5a63;font-size:42px;line-height:1}.billingPrice small{color:#8c9099;font-size:12px}.billingQuota{padding:14px;border-radius:9px;background:#f8f8f9}.billingQuota strong{display:block;color:#ff5a63;font-size:14px}.billingQuota span{display:block;margin-top:7px;color:#868b94;font-size:11px}.billingPlan ul{display:grid;gap:11px;margin:21px 0 22px;padding:0;list-style:none;color:#6f747d;font-size:12px}.billingPlan li:before{content:'✓';display:inline-grid;width:17px;height:17px;margin-right:7px;place-items:center;border-radius:50%;color:#fff;background:#ff8a90;font-size:10px;font-weight:900}.billingPlan button{width:100%;height:40px;margin-top:auto;border:0;border-radius:7px;color:#fff;background:#202126;font-size:13px;font-weight:800}.billingPlan button:hover{background:#ff5a63}.billingPlan button:disabled{color:#777b83;background:#ebecef;cursor:default}.billingLedgerSection{margin-top:24px;border:1px solid #e8e9ec;border-radius:11px;background:#fff}.billingLedgerSection>header{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid #eceef0}.billingLedgerSection h2{margin:0;color:#2b2d33;font-size:16px}.billingLedgerSection header button{display:grid;width:28px;height:28px;padding:0;place-items:center;border:0;border-radius:6px;color:#81858d;background:#f4f5f6}.billingLedgerSection header svg{width:15px;height:15px}.billingLedger{padding:2px 20px 8px}.billingLedgerRow{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:20px;padding:13px 0;border-bottom:1px solid #f0f1f2}.billingLedgerRow>div{display:flex;align-items:center;gap:12px}.billingLedgerRow strong{color:#3a3d44;font-size:12px}.billingLedgerRow small{color:#9b9fa7;font-size:11px}.billingLedgerRow span{font-size:13px;font-weight:800}.billingLedgerRow span.is-negative{color:#e85d65}.billingLedgerRow span.is-positive{color:#41a56c}.billingLedgerEmpty{padding:30px 0;color:#9b9fa7;text-align:center;font-size:12px}
@media (max-width:900px){.billingInner{width:min(100% - 28px,650px);padding-top:20px}.billingAccountPanel{align-items:stretch;flex-direction:column}.billingStats{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.billingStats div:nth-child(odd){padding-left:0;border-left:0}.billingRuleBar{align-items:flex-start;flex-direction:column}.billingPlans{grid-template-columns:1fr}.billingPlan{min-height:0}.billingPlansSection>header{align-items:flex-start;flex-direction:column;gap:6px}.billingLedgerRow{grid-template-columns:1fr auto}.billingLedgerRow>small{grid-column:1 / -1}}
@media (max-width:520px){.billingInner{width:calc(100% - 22px)}.billingHeading h1{font-size:27px}.billingAccountPanel{padding:18px}.billingStats strong{font-size:13px}.billingStats div:nth-child(3) strong{font-size:18px}.billingRuleBar{padding:15px}.billingPlan{padding:20px}.billingPrice strong{font-size:38px}}
