:root{
	--bg:#eef2ff;
	--card:#ffffff;
	--muted:#6b7280;
	--accent:#0f172a;
	--primary:#6b46c1;
	--glass: rgba(255,255,255,0.6);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;background:linear-gradient(180deg,var(--bg),#fbfbff);color:var(--accent);padding:28px}

.container{width:100%;max-width:920px;margin:0 auto;}
@media (max-width: 600px) {
	body, html { padding: 0 !important; }
	.container { width: 100vw !important; max-width: 100vw !important; min-width: 0 !important; padding: 0 2vw !important; }
	.hero { flex-direction: column !important; align-items: stretch !important; padding: 12px 2vw !important; min-width: 0 !important; width: 100% !important; box-sizing: border-box; }
	.avatar { margin: 0 auto 10px auto !important; width: 72px !important; height: 72px !important; }
	.hero-body { width: 100% !important; min-width: 0 !important; }
	.cards { grid-template-columns: 1fr !important; }
	.card { padding: 12px !important; }
}

.hero{display:flex;align-items:center;gap:14px;box-shadow:none;background:none;padding:0;border-radius:0;}
.avatar{
	width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#4f46e5);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:32px;flex-shrink:0;box-shadow:0 6px 16px rgba(79,70,229,0.14)}
.hero-body{flex:1}
.hero-body h1{margin:0;font-size:1.25rem}
.hero-body p{margin:6px 0 0 0;color:var(--muted)}

.links{display:flex;gap:10px;margin-left:auto}
.links a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:var(--card);color:var(--primary);text-decoration:none;border:1px solid rgba(111,66,193,0.08);font-weight:600;font-size:.95rem}
.links a:hover{transform:translateY(-2px)}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.card{background:var(--card);border-radius:12px;padding:18px;box-shadow:0 6px 18px rgba(15,23,42,0.06);text-align:center;transition:transform .18s ease}
.card:hover{transform:translateY(-6px)}
.card h2{margin:6px 0 10px 0;font-size:1.05rem}
.qrcode{display:block;margin:0 auto 8px auto;max-width:240px;width:78%;height:auto;border-radius:10px;border:1px solid #f0f0f4}
.hint{color:var(--muted);font-size:.95rem}
.amounts{display:inline-flex;gap:8px;margin-left:8px;vertical-align:middle}
.amount{background:linear-gradient(90deg,var(--primary),#4f46e5);color:#fff;border:0;padding:6px 10px;border-radius:8px;cursor:pointer;font-weight:700;font-size:.95rem}
.amount:focus{outline:3px solid rgba(99,102,241,0.18)}
.hint-sub{color:var(--muted);font-size:.85rem;margin-top:6px}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:#111;color:#fff;padding:10px 14px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .18s ease}
.toast.visible{opacity:0.95}

footer{margin-top:18px;text-align:center;color:var(--muted);font-size:.9rem;background:var(--bg);padding-bottom:32px;}
.footer-links{display:flex;gap:12px;justify-content:center;margin-top:8px}
.footer-links a{color:var(--primary);text-decoration:none;font-weight:600}