/* หน้า BIO จริง (bio.html) — ออกแบบแบบ mobile first แล้วจัดกลางเมื่อจอกว้าง */
.bio-public{margin:0;color:var(--pigy-text);background:radial-gradient(circle at 12% 6%,rgba(255,168,214,.4),transparent 34%),radial-gradient(circle at 88% 10%,rgba(178,138,255,.32),transparent 32%),linear-gradient(170deg,#fff5fb,#f4efff);font-family:"LINE Seed Sans TH",Tahoma,sans-serif;min-height:100vh}
.bio-viewport{width:min(430px,100%);margin-inline:auto;padding-bottom:34px;overflow:hidden;background:#fff;box-shadow:0 24px 70px rgba(96,44,92,.16)}
.bio-scene{animation:bio-enter .32s cubic-bezier(.22,.85,.28,1) both}
@keyframes bio-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.bio-public .cover-tools button{width:32px;height:32px;border:0;border-radius:50%;color:#fff;background:rgba(255,255,255,.22);font-size:14px;backdrop-filter:blur(10px)}
.bio-public .cover-tools button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.bio-public .bio-socials .social{text-decoration:none}

/* ---------- ฉากขั้นตอนการโดเนท ---------- */
.donate-scene{padding:0 0 24px;background:linear-gradient(180deg,#fdeaf5 0,#fff 220px)}
.donate-head{display:flex;align-items:center;gap:12px;padding:18px 16px 10px}
.donate-head h2{margin:0;font-size:18px;text-align:center}
.donate-head p{margin:2px 0 0;color:var(--pigy-dim);font-size:11.5px;text-align:center}
.donate-head>div{flex:1}
.round-button{display:grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid var(--pigy-line);border-radius:50%;color:var(--pigy-text);background:#fff;font-size:18px;line-height:1}
.round-button:focus-visible{outline:3px solid rgba(243,78,152,.34);outline-offset:2px}

/* แถบขั้นตอน: เส้นเชื่อมวาดด้วย :before ของ li เพื่อไม่ให้มีรอยต่อ */
.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:6px 0 18px;padding:0 16px;list-style:none}
.stepper li{position:relative;display:grid;justify-items:center;gap:5px}
.stepper li:not(:first-child):before{position:absolute;right:50%;top:15px;left:-50%;height:2px;content:"";background:var(--pigy-line)}
.stepper li.done:before{background:#f9a7cc}
.stepper b{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#b49aab;background:#f3e8ef;font-size:13px}
.stepper li.active b{color:#fff;background:linear-gradient(135deg,#fb4c98,#e02f80);box-shadow:0 6px 14px rgba(214,62,142,.3)}
.stepper li.done b{color:#fff;background:#f9a7cc}
.stepper small{color:var(--pigy-dim);font-size:10px;text-align:center}
.stepper li.active small{color:var(--pigy-pink-deep);font-weight:800}

.step-pane{padding:0 16px}
.step-lead{margin:0 0 12px;color:var(--pigy-dim);font-size:12.5px;text-align:center}
.channel-grid.tall .channel{padding:16px 12px}
.bio-public .channel{width:100%}
.bio-public .channel span{display:block}

.selected-channel{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:13px 14px;border:1px solid var(--pigy-line);border-radius:15px;background:#fff}
.selected-channel i{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:#e8f0ff;font-size:16px;font-style:normal}
.selected-channel b{flex:1;font-size:13.5px}
.selected-channel button{border:0;background:none;cursor:pointer}

#donateForm{display:grid;gap:14px}
.amount-wrap{position:relative;display:block}
.amount-wrap input{width:100%;min-height:48px;padding:0 56px 0 14px;border:1px solid var(--pigy-line);border-radius:13px;outline:0;color:var(--pigy-text);background:#fff;font:inherit;font-weight:400}
.amount-wrap input:focus{border-color:#f37fb4;box-shadow:0 0 0 3px rgba(243,78,152,.13)}
.amount-wrap b{position:absolute;right:14px;top:50%;color:var(--pigy-dim);font-size:12px;transform:translateY(-50%)}
.amount-chips{margin-top:-4px}
.amount-chips .chip{flex:1;justify-content:center;min-width:52px}
#donorMessage,.bio-public textarea{width:100%;padding:12px 14px;border:1px solid var(--pigy-line);border-radius:13px;outline:0;color:var(--pigy-text);background:#fff;font:inherit;font-weight:400;line-height:1.6;resize:vertical}
#donorMessage:focus{border-color:#f37fb4;box-shadow:0 0 0 3px rgba(243,78,152,.13)}

/* กล่อง QR: ลาย QR สร้างด้วย conic/linear-gradient ให้ดูสมจริงโดยไม่ต้องใช้ไฟล์ภาพ */
.qr-box{padding:16px;border:1px solid var(--pigy-line);border-radius:17px;background:#fff;text-align:center}
.qr-title{margin:0 0 12px;font-size:12.5px;font-weight:800;text-align:left}
.qr-code{width:min(210px,64vw);aspect-ratio:1;margin:0 auto 14px;padding:6px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--pigy-line)}
.qr-code svg{display:block;width:100%;height:100%}
.qr-actions{display:flex;gap:8px}
.qr-actions .btn{flex:1}

.form-error{margin:0;color:#d62c5e;font-size:12px;font-weight:800}
.btn.big{min-height:52px;font-size:15px;border-radius:15px}

/* ---------- อัปโหลดสลิป ---------- */
.slip-title{margin:0 0 4px;font-size:20px;text-align:center}
.dropzone{position:relative;display:grid;justify-items:center;gap:6px;padding:34px 18px;border:2px dashed #e7cede;border-radius:18px;background:#fffafd;cursor:pointer;text-align:center}
.dropzone:hover,.dropzone:focus-within{border-color:#f9a7cc;background:var(--pigy-pink-soft)}
.dropzone-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:#ede2ff;font-size:28px}
.dropzone b{font-size:13px}
.dropzone small{color:var(--pigy-dim);font-size:11.5px}
.dropzone img{max-width:100%;max-height:220px;margin-top:10px;border-radius:12px}
.sample-title{margin:20px 0 10px;font-size:14px}
.sample-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 20px;padding:0;list-style:none}
.sample-list li{position:relative;display:grid;justify-items:center;gap:6px;padding:14px 8px;border:1px solid var(--pigy-line);border-radius:14px;background:#fff;text-align:center}
.sample-list li.ok{border-color:#9fdcc2}
.sample-list li.ok:after{position:absolute;right:6px;bottom:6px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;color:#fff;background:#3fbf94;content:"✓";font-size:10px}
.sample-art{font-size:26px}
.sample-list small{color:var(--pigy-dim);font-size:10.5px;line-height:1.4}
.foot-note{margin:10px 0 0;color:var(--pigy-dim);font-size:11px;text-align:center}

/* ---------- ขอบคุณ ---------- */
.thanks-pane{position:relative;padding-top:14px;text-align:center}
.round-button.close{position:absolute;right:16px;top:0}
.thanks-pig{width:190px;margin:8px auto 4px;filter:drop-shadow(0 14px 20px rgba(120,58,100,.22))}
.thanks-pane h3{margin:0;font-size:24px}
.thanks-sub{margin:6px 0 18px;color:var(--pigy-dim);font-size:13px}
.receipt{display:grid;gap:10px;margin:0 0 14px;padding:16px;border:1px solid var(--pigy-line);border-radius:17px;background:#fff;text-align:left}
.receipt div{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.receipt dt{color:var(--pigy-dim);font-size:12px}
.receipt dd{margin:0;max-width:60%;font-size:12.5px;font-weight:800;text-align:right;word-break:break-word}
.stream-note{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 16px;padding:12px;border-radius:14px;background:var(--pigy-violet-soft);color:#6f42db;font-size:12px;font-weight:800}
.thanks-pane .btn-ghost{margin-top:9px}

.bio-footer{padding:20px 16px 4px;text-align:center}
.bio-footer a{color:var(--pigy-pink-deep);font-size:12px;font-weight:800;text-decoration:none}
.bio-footer a:hover{text-decoration:underline}

@media(min-width:640px){
  .bio-viewport{margin-top:26px;margin-bottom:26px;border-radius:28px}
}
@media(prefers-reduced-motion:reduce){.bio-scene{animation:none}}

/* ---------- โทนสีหลักของหน้า BIO (ตั้งจากหน้าตั้งค่าขั้นสูง) ---------- */
body[data-bio-theme="violet"]{--pigy-pink:#8b5cf6;--pigy-pink-deep:#6f42db;--pigy-pink-soft:#efe8ff}
body[data-bio-theme="mint"]{--pigy-pink:#22a279;--pigy-pink-deep:#17805f;--pigy-pink-soft:#dff6ee}
body[data-bio-theme="night"]{--pigy-pink:#4b4260;--pigy-pink-deep:#2f2840;--pigy-pink-soft:#ece9f2}
body[data-bio-theme] .btn-primary{background:linear-gradient(135deg,var(--pigy-pink),var(--pigy-pink-deep))}
body[data-bio-theme] .stepper li.active b{background:linear-gradient(135deg,var(--pigy-pink),var(--pigy-pink-deep))}

/* ---------- เอฟเฟกต์เหรียญลอยบนหน้าปก ---------- */
.coin-rain{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.coin-rain i{position:absolute;top:-24px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#ffe9a8 0 24%,#ffc94d 60%,#e09b17 100%);box-shadow:0 2px 6px rgba(120,70,0,.3);animation:coin-fall 7s linear infinite}
@keyframes coin-fall{0%{transform:translateY(-24px) rotate(0);opacity:0}10%{opacity:1}100%{transform:translateY(340px) rotate(420deg);opacity:0}}

/* ---------- ตัวเลือกของจาก Wishlist ---------- */
.wish-picker{display:grid;gap:8px;padding:14px;border:1px solid var(--pigy-line);border-radius:16px;background:#fdfaff}
.picker-title{margin:0 0 2px;font-size:12.5px;font-weight:800}
.wish-option{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border:1px solid var(--pigy-line);border-radius:13px;background:#fff;font:inherit;text-align:left;cursor:pointer;transition:.2s}
.wish-option.active,.wish-option:hover{border-color:#f9a7cc;background:var(--pigy-pink-soft)}
.wish-option i{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:#ffeaf4;font-size:16px;font-style:normal}
.wish-option b{display:block;font-size:12.5px}
.wish-option small{display:block;color:var(--pigy-dim);font-size:11px}
.wish-option:focus-visible{outline:3px solid rgba(243,78,152,.3);outline-offset:2px}