:root { color-scheme: dark; --bg:#0d1215; --panel:#182026; --border:#303d45; --text:#f0f5f7; --muted:#9dafb8; --accent:#67b7dc; --success:#8bdb8e; --error:#ff9292; }
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:radial-gradient(circle at 50% -20%,#173544 0,transparent 42%),var(--bg); font:15px/1.55 system-ui,sans-serif; }
.credits-shell { width:min(1080px,calc(100% - 28px)); margin:auto; padding:24px 0 48px; }
.credits-header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.credits-brand { display:inline-flex; align-items:center; flex:0 0 auto; text-decoration:none; }
.credits-brand img { display:block; width:92px; height:50px; object-fit:contain; }
.credits-header nav { display:flex; align-items:center; gap:10px; }
.credits-header nav a,.credits-header nav select { height:38px; padding:0 12px; border:1px solid var(--border); border-radius:8px; color:var(--text); background:#1b2429; text-decoration:none; }
.credits-header nav a { display:inline-flex; align-items:center; }
.credits-hero { max-width:720px; margin:72px auto 38px; text-align:center; }
.eyebrow { color:var(--accent); font-weight:750; letter-spacing:.08em; }
h1 { margin:10px 0 14px; font-size:clamp(32px,6vw,54px); line-height:1.08; }
.credits-hero p { margin:0; color:var(--muted); font-size:17px; }
.credits-hero strong { color:var(--text); }
.credit-balance { display:inline-block; margin-top:22px; padding:9px 15px; border:1px solid rgba(103,183,220,.4); border-radius:999px; color:var(--accent); background:rgba(103,183,220,.08); }
.package-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.package-card { position:relative; display:flex; flex:0 1 245px; flex-direction:column; align-items:center; min-height:290px; padding:30px 22px 22px; border:1px solid var(--border); border-radius:14px; background:linear-gradient(160deg,rgba(255,255,255,.025),transparent),var(--panel); box-shadow:0 18px 40px rgba(0,0,0,.2); text-align:center; }
.package-card.featured { border-color:rgba(103,183,220,.72); transform:translateY(-5px); }
.discount { position:absolute; top:-12px; right:14px; min-width:48px; min-height:28px; padding:4px 10px; border-radius:999px; color:#081313; background:var(--success); font-size:13px; font-weight:850; box-shadow:0 5px 15px rgba(139,219,142,.28); }
.discount.empty { visibility:hidden; }
.package-card h2 { margin:18px 0 4px; font-size:30px; }
.package-unit { color:var(--muted); }
.package-price { margin:24px 0 2px; font-size:34px; font-weight:850; }
.package-list { min-height:22px; color:var(--muted); text-decoration:line-through; }
.package-card button { width:100%; height:44px; margin-top:auto; border:0; border-radius:8px; color:#071113; background:var(--accent); font-weight:850; cursor:pointer; }
.package-card button:disabled { opacity:.55; cursor:wait; }
.credit-status { min-height:24px; margin:24px 0 0; text-align:center; color:var(--muted); }
.credit-status.success { color:var(--success); }.credit-status.error { color:var(--error); }
footer { margin-top:28px; color:var(--muted); text-align:center; font-size:13px; }
@media (max-width:520px) { .credits-header { align-items:flex-start; }.credits-header nav { flex-wrap:wrap; justify-content:flex-end; }.credits-hero { margin-top:45px; }.package-card { flex-basis:100%; }.package-card.featured { transform:none; } }