@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');
:root{--rose:#ef649c;--rose-dark:#b93670;--pink:#ffe9f1;--pink-light:#fff6fa;--pink-border:#f3c9d9;--paper:#fff;--ink:#693b53;--muted:#97768a;--shadow:0 18px 48px rgba(157,65,105,.14)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:15px}
body{margin:0;min-height:100vh;color:var(--ink);font-family:'Be Vietnam Pro','Segoe UI',sans-serif;background:radial-gradient(circle at 8% 22%,#ffe0ed 0,transparent 33%),radial-gradient(circle at 92% 80%,#ffe1eb 0,transparent 37%),#fff8fb}
button,input,textarea{font:inherit}
button{cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #fda2c5;outline-offset:2px}
.topbar{max-width:1040px;margin:auto;padding:22px 22px;display:flex;justify-content:space-between;align-items:center}
.brand{color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:11px;font-size:19px;font-weight:800;letter-spacing:-.5px}
.brand strong{color:var(--rose-dark)}
.brand-icon{display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,#ff9cbc,#e45a94);border:3px solid #ffe4ee;width:46px;height:46px;border-radius:16px;font-size:27px;box-shadow:0 5px 16px #e76c9940}
.top-pill{border-radius:50px;background:white;border:1px solid #f4d1de;color:var(--rose-dark);padding:10px 13px;font-size:11px;font-weight:700}
.layout{width:min(100%,1040px);margin:26px auto 60px;padding:0 22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);gap:74px;align-items:center}
.welcome{padding:15px 0 35px;position:relative}
.kicker{font-size:12px;font-weight:800;letter-spacing:2.3px;color:var(--rose-dark)}
.hero-heart{position:absolute;right:10%;top:8px;font-size:62px;transform:rotate(-16deg);color:#f7a8c6;opacity:.6;line-height:1;pointer-events:none}
.hero-heart span{font-size:26px;position:absolute;left:-20px;bottom:5px}
h1{font-size:clamp(36px,4.35vw,60px);line-height:1.28;letter-spacing:-1.8px;margin:19px 0;font-weight:800}
h1 em{font-style:normal;color:var(--rose-dark)}
.welcome>p:not(.kicker){color:var(--muted);line-height:2.05;font-size:14px;max-width:500px}
.welcome>p b{color:var(--rose-dark)}
.mini-benefits{display:flex;flex-wrap:wrap;gap:8px;margin:25px 0}
.mini-benefits span{background:#fff;border:1px solid #f5d5e2;border-radius:28px;padding:9px 12px;color:#8b5a74;font-size:11px;font-weight:600}
.notice{max-width:490px;background:#fff0f5;border:1px solid #f7d8e4;border-radius:15px;padding:14px 16px;display:flex;align-items:center;gap:12px;color:#966179;font-size:12px;line-height:1.8}
.notice>span:first-child{font-size:24px}
.donate-card{background:var(--paper);border:1px solid #f5d5e1;border-radius:25px;padding:27px 28px;box-shadow:var(--shadow)}
.card-heading{text-align:center;margin-bottom:22px}
.card-illustration{margin:0 auto 9px;display:grid;place-items:center;width:58px;height:58px;background:#fff0f6;border-radius:20px;font-size:29px}
.eyebrow{font-size:10px;color:var(--rose-dark);letter-spacing:1.1px;font-weight:800;text-transform:uppercase}
.card-heading h2{font-size:23px;letter-spacing:-.5px;margin:6px 0 5px}
.card-heading p{font-size:11px;color:var(--muted);margin:0}
.card-heading p b{color:var(--rose-dark)}
label{display:block;margin:15px 0 8px;font-size:12px;font-weight:700;color:#75425a}
.required{color:#d73874}
.optional{font-size:10px;font-weight:500;color:#aa8497}
input,textarea{width:100%;border:1px solid #ead0db;border-radius:11px;background:#fffafd;color:var(--ink);padding:12px 13px;outline:none;font-size:13px;min-height:46px;transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:#b598a7}
input:focus,textarea:focus{border-color:#ed86ad;box-shadow:0 0 0 3px #fbcfe0}
textarea{resize:vertical;min-height:67px;max-height:140px}
.label-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:13px}
.label-row label{margin:0 0 9px}
.min-tag{font-size:10px;font-weight:700;color:#bd3e73;background:#fff0f6;border-radius:100px;padding:5px 9px;margin-bottom:8px}
.amounts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.amounts button{border:1px solid #efcad9;background:#fff7fa;color:#9e6280;border-radius:11px;min-height:44px;font-size:13px;font-weight:800}
.amounts button.on{color:white;border-color:#e65e97;background:linear-gradient(130deg,#f58aaf,#e4558e);box-shadow:0 5px 12px #e967963d}
.input-suffix{position:relative;margin-top:9px}
.input-suffix input{padding-right:54px;font-weight:700}
.input-suffix span{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:11px;color:#a87791;font-weight:800;pointer-events:none}
.help{color:#a88093;font-size:10px;margin:6px 0 1px;line-height:1.6}
.methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.methods button{display:grid;grid-template-columns:35px 1fr;grid-template-rows:auto auto;align-items:center;text-align:left;column-gap:9px;border:1px solid #efd5e0;border-radius:13px;background:#fff9fb;padding:11px 12px;color:var(--ink);min-height:64px;font-size:13px;font-weight:700}
.methods button .method-icon{grid-row:span 2;font-size:25px;text-align:center}
.methods button small{font-size:10px;color:var(--muted);font-weight:500}
.methods button.on{border-color:#e86f9d;background:#fff0f6;box-shadow:inset 0 0 0 1px #f39cbb}
.primary{margin-top:20px;width:100%;min-height:52px;border:0;border-radius:13px;background:linear-gradient(110deg,#f383ac,#e34b8b);color:white;font-size:14px;font-weight:800;box-shadow:0 8px 20px #e7568c40}
.primary span{margin-left:6px;font-size:20px;vertical-align:middle}
.primary:disabled{opacity:.55;cursor:wait}
.error{background:#fff0f2;color:#b32858;border:1px solid #ffd0d9;border-radius:10px;padding:10px;font-size:12px;line-height:1.6}
.payment-head{text-align:center;margin:11px 0 17px}
.payment-flower{font-size:33px}
.payment-head h3{font-size:19px;margin:5px 0}
.payment-head p{font-size:12px;color:var(--muted);margin:0}
.qrbox{display:grid;place-items:center;margin:auto;max-width:270px;min-height:200px;border:1px solid #f3cfdd;background:white;border-radius:16px;padding:10px;box-shadow:0 8px 24px #efafc646}
.qrbox img{display:block;max-width:100%;max-height:290px;object-fit:contain}
.memo{margin-top:16px;border:1px dashed #e997b8;background:#fff5f9;text-align:center;border-radius:13px;padding:13px}
.memo span{font-size:10px;letter-spacing:.6px;font-weight:700;color:#a3738c}
.memo strong{display:block;color:#c23975;font-size:24px;letter-spacing:1.6px;margin:7px 0 10px}
.memo button{border:0;background:#e95d95;border-radius:9px;color:white;font-weight:700;font-size:12px;min-height:37px;padding:7px 15px}
.hint{font-size:11px;line-height:1.8;text-align:center;color:#947587}
.status{margin:13px 0;padding:10px 12px;border-radius:11px;background:#fff0f6;color:#b13d70;font-size:12px;font-weight:700;text-align:center;line-height:1.7}
.warning{color:#a36b64;background:#fff9ed;padding:9px;border-radius:9px}
.back{display:block;margin:12px auto 0;border:0;background:none;color:#a34f76;font-size:11px;font-weight:700;min-height:36px}
footer{font-size:11px;text-align:center;color:#b68da0;padding:10px 15px 27px}
@media(max-width:850px){.layout{grid-template-columns:1fr;gap:14px;max-width:540px;margin:9px auto 30px}.welcome{padding:4px 4px 8px;text-align:center}.welcome h1{font-size:35px;letter-spacing:-1px;margin:10px 0}.welcome>p:not(.kicker){font-size:12px;margin:0 auto;line-height:1.8}.mini-benefits{justify-content:center;margin:12px 0}.notice{display:none}.hero-heart{display:none}.donate-card{padding:23px}}
@media(max-width:450px){.topbar{padding:13px 15px}.brand{font-size:17px}.brand-icon{height:40px;width:40px}.top-pill{font-size:10px;padding:8px}.layout{padding:0 12px}.welcome h1{font-size:28px}.welcome .kicker{font-size:10px}.welcome>p:not(.kicker){font-size:11px}.mini-benefits span{font-size:9px;padding:7px}.donate-card{padding:20px 16px;border-radius:20px}.card-heading h2{font-size:21px}.methods button{padding:10px 7px;column-gap:5px}.methods button .method-icon{font-size:22px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* V0.3: Qi-Min avatar highlight */
.avatar-highlight{position:relative;width:176px;margin:20px 0 15px;text-align:center;padding:12px 12px 10px;background:#fff;border:1px solid #f2c3d6;border-radius:28px;box-shadow:0 12px 32px rgba(212,92,135,.19);transform:rotate(-2deg)}
.avatar-photo{width:148px;height:148px;margin:auto;position:relative;display:grid;place-items:center;border:5px solid #f9d5e4;border-radius:22px;background:linear-gradient(135deg,#ffe9f2,#f5add0);overflow:hidden}
.avatar-photo img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-photo img[hidden]{display:none}
#avatarPlaceholder{font-size:75px;color:#fff;text-shadow:0 5px 20px #de6894}
.avatar-title{font-size:13px;color:#b43c73;font-weight:800;margin-top:8px}
.avatar-bow{position:absolute;font-size:30px;right:-13px;top:-16px;transform:rotate(15deg)}
@media(max-width:850px){.avatar-highlight{margin:13px auto 16px;width:142px;padding:8px;border-radius:24px}.avatar-photo{width:124px;height:124px;border-radius:19px}.avatar-title{font-size:12px}}
@media(max-width:450px){.avatar-highlight{width:112px;margin:10px auto 10px;padding:6px;border-radius:19px}.avatar-photo{width:98px;height:98px;border-width:3px;border-radius:15px}#avatarPlaceholder{font-size:53px}.avatar-title{font-size:10px;margin-top:4px}.avatar-bow{font-size:23px}}

.beneficiary{margin:13px 0 8px;padding:11px 14px;border-radius:12px;text-align:center;border:1px solid #f1c7d7;background:#fff7fa;color:#924b6f;font-size:12px;font-weight:700;line-height:1.8;overflow-wrap:anywhere}
#qrError{margin:15px 0;line-height:1.8;text-align:center}

.paypal-link{display:block;text-align:center;margin:12px auto;border-radius:13px;padding:15px;background:linear-gradient(105deg,#1b62c7,#2e8bdb);color:white;text-decoration:none;font-weight:800;font-size:13px;box-shadow:0 7px 17px rgba(30,100,195,.18)}
#paypalPayment .primary{margin-top:8px}
.paypal-amounts{grid-template-columns:repeat(4,minmax(0,1fr))}
#bankFields .label-row,#paypalFields .label-row{margin-top:18px}
#paypalPayment .hint{padding:9px 5px}