:root{color:#172033;background:#f5f7fb;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}.shell{width:min(900px,100% - 32px);margin:72px auto}.page-tools{justify-content:space-between;align-items:center;gap:16px;display:flex}.page-tools .eyebrow{margin:0}.page-tools select{color:#3159bb;font:inherit;background:#fff;border:1px solid #cdd9f7;border-radius:8px;padding:7px 9px;font-size:13px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.eyebrow{color:#4169e1;letter-spacing:.16em;font-size:12px;font-weight:800}h1{margin:10px 0;font-size:42px}.intro{color:#65718a;line-height:1.7}.account-card{background:linear-gradient(135deg,#f8faff,#eef3ff);border:1px solid #dfe6f7;border-radius:18px;margin:28px 0 16px;padding:22px;box-shadow:0 8px 24px #1e315b0a}.account-heading{justify-content:space-between;align-items:center;gap:16px;display:flex}.account-label{color:#5272c4;letter-spacing:.12em;margin:0 0 4px;font-size:11px;font-weight:800}.account-heading h2{margin:0;font-size:23px}.account-values{grid-template-columns:minmax(180px,.8fr) minmax(240px,1.2fr);gap:16px;margin-top:18px;display:grid}.diamond-balance,.backpack{background:#fff;border-radius:14px;align-items:center;gap:12px;min-height:80px;padding:14px 16px;display:flex}.value-icon{color:#fff;background:linear-gradient(135deg,#45a3ff,#5753e8);border-radius:50%;flex:0 0 42px;place-items:center;width:42px;height:42px;display:grid}.diamond-balance span,.backpack>span{color:#778199;font-size:13px;display:block}.diamond-balance strong{color:#3159bb;margin-top:3px;font-size:30px;line-height:1;display:block}.backpack{display:block}.backpack-items{flex-wrap:wrap;gap:8px;margin-top:9px;display:flex}.backpack-item{color:#4b54aa;background:#eef0ff;border-radius:999px;padding:5px 9px;font-size:13px;font-weight:700}.empty-backpack{color:#99a4ba;font-size:13px}.account-updated{color:#8994a8;min-height:18px;margin:14px 0 0;font-size:12px}.status{color:#3159bb;background:#eaf1ff;border-radius:12px;margin:28px 0 16px;padding:14px 16px}.status.error{color:#c43b3b;background:#fff0f0}.products{gap:14px;display:grid}.card{background:#fff;border:1px solid #e5e9f2;border-radius:18px;align-items:center;gap:18px;padding:20px;display:flex;box-shadow:0 8px 24px #1e315b0d}.card-icon{color:#fff;background:linear-gradient(135deg,#5c7cfa,#7950f2);border-radius:14px;place-items:center;width:52px;height:52px;font-size:30px;display:grid}.card-content{flex:1}h2{margin:0 0 7px;font-size:19px}.card p{color:#778199;margin:0 0 12px}.card strong{color:#3159bb}button{color:#fff;cursor:pointer;background:#4169e1;border:0;border-radius:10px;padding:11px 17px;font-weight:700}button.secondary{color:#4169e1;background:#fff;border:1px solid #cdd9f7}button:disabled{cursor:wait;opacity:.6}.empty{color:#778199;text-align:center;background:#fff;border-radius:16px;padding:30px}.flow{color:#65718a;background:#e9edf5;border-radius:12px;margin-top:28px;padding:15px;font-size:13px}@media (width<=620px){.shell{margin:32px auto}.page-tools{align-items:flex-start}h1{font-size:32px}.account-heading,.card{flex-direction:column;align-items:flex-start}.account-values{grid-template-columns:1fr}.card button{width:100%}}
