.portal-header{border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:10}
.header-inner{height:72px;display:flex;align-items:center;justify-content:space-between}.header-actions{display:flex;align-items:center;gap:10px}.account{font-weight:750}
.portal{padding-top:28px;padding-bottom:50px}.eyebrow{color:var(--green);font-size:10px;letter-spacing:.08em;font-weight:900}
.hero-card{padding:24px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(130deg,var(--green-soft),var(--surface))}.hero-card h1{margin:6px 0}.hero-card p{margin:0}.hero-price{text-align:right}.hero-price strong{font-size:34px}.hero-price small{color:var(--muted);margin-left:4px}.hero-price .badge{display:flex;margin-top:8px;justify-content:center}
.usage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}.usage-card{padding:16px}.usage-card>div{display:flex;justify-content:space-between}.usage-card span{color:var(--muted)}.usage-card progress{width:100%;accent-color:var(--green);margin:12px 0 6px}.usage-card small{font-size:11px}
.portal-grid{display:grid;grid-template-columns:1.5fr .65fr;gap:14px}.panel{padding:18px}.panel h2{margin:0}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.panel-head p{margin:4px 0 0}.side-stack{display:grid;gap:14px;align-content:start}
.payment-options{display:grid;gap:8px}.pay-option{display:grid;grid-template-columns:45px 1fr auto;align-items:center;gap:11px;text-align:left;border:1px solid var(--line);background:var(--surface);color:var(--text);padding:13px;border-radius:13px}.pay-option.active{border-color:var(--green);background:var(--green-soft)}.pay-option small{display:block;color:var(--muted);margin-top:3px}.pay-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:900}.pay-icon.sinpe{background:var(--green-soft);color:var(--green)}.pay-icon.tilo{background:#e7efff;color:#2159d6}.pay-icon.onvo{background:#f2eaff;color:#7135c8}
.method-panel{display:none;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}.active-panel{display:block}.method-panel label{display:block;color:var(--muted);font-size:11px;margin:12px 0 5px}.sinpe-box{background:var(--surface-2);border-radius:13px;padding:16px;text-align:center}.sinpe-box strong{display:block;font-size:28px;margin:5px}.reference-row{display:grid;grid-template-columns:1fr auto;gap:7px}.instruction{font-size:12px;line-height:1.6}.full{width:100%}.secure-note{background:var(--green-soft);padding:11px;border-radius:11px;color:var(--green);font-size:12px}.provider-checkout{margin:12px 0;border:1px dashed var(--line);border-radius:13px;padding:28px;text-align:center;color:var(--muted);font-size:12px}
.summary-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line)}.summary-row.total{font-size:18px;border:0}.small{font-size:11px;line-height:1.5}.history{margin-top:14px;padding:18px;overflow:auto}table{width:100%;border-collapse:collapse;min-width:700px}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);font-size:12px}th{color:var(--muted);font-size:10px}.link-btn{border:0;background:transparent;color:var(--green);font-weight:800}
@media(max-width:900px){.usage-grid{grid-template-columns:1fr 1fr}.portal-grid{grid-template-columns:1fr}.hero-card{display:block}.hero-price{text-align:left;margin-top:18px}.hero-price .badge{display:inline-flex}}