/*
 * BIO — สไตล์ที่ใช้ร่วมกันสองที่
 * 1) หน้า bio-settings.html (ฟอร์มซ้าย + พรีวิวมือถือขวา)
 * 2) หน้า bio.html ซึ่งเป็นหน้า BIO จริงที่ผู้สนับสนุนเปิด
 * บล็อก .bio-* ออกแบบที่ความกว้างมือถือจริง จึงใช้ซ้ำได้ทั้งในกรอบพรีวิวและหน้าเต็ม
 */


/* ================= หน้า BIO Settings ================= */
.bio-layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px;align-items:start}
.bio-forms{min-width:0}
.bio-page-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:18px}
.bio-page-head h2{display:flex;align-items:center;gap:9px;margin:0;font-size:30px;letter-spacing:-.035em}
.bio-page-head p{margin:3px 0 0;color:var(--pigy-dim);font-size:13px}
.pane-title{margin:0 0 4px;font-size:19px}
.pane-sub{margin:0 0 16px;color:var(--pigy-dim);font-size:12.5px}
.lock-hint{margin-left:8px;color:var(--pigy-dim);font-size:12px;font-weight:400}

.bio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr));gap:14px}
.bio-card{min-width:0}
.bio-card h4{margin:0;font-size:15px}
.bio-card .card-sub{margin:3px 0 14px;color:var(--pigy-dim);font-size:11.5px}
.bio-card.wide{grid-column:1/-1}

/* รูปโปรไฟล์และกรอบ */
.avatar-editor{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.avatar-preview{position:relative;flex:none;width:96px;height:96px}
.avatar-preview img{width:100%;height:100%;padding:5px;border-radius:50%;object-fit:cover;background:linear-gradient(140deg,#ffd9ec,#efe0ff)}
.avatar-preview:after{position:absolute;inset:0;border-radius:50%;content:"";box-shadow:inset 0 0 0 3px #ff5fa4;pointer-events:none}
.avatar-camera{position:absolute;right:0;bottom:2px;width:30px;height:30px;border:2px solid #fff;border-radius:50%;color:#fff;background:#3a2740;font-size:13px}
.frame-picker,.cover-picker,.theme-picker{display:flex;flex-wrap:wrap;gap:10px}
.frame{position:relative;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:transparent}
.frame:before{position:absolute;inset:0;border-radius:50%;content:"";background:var(--frame);-webkit-mask:radial-gradient(circle,transparent 0 58%,#000 60%);mask:radial-gradient(circle,transparent 0 58%,#000 60%)}
.frame[aria-checked="true"]:after{position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;color:#fff;background:#f34e98;content:"✓";font-size:10px}
.frame:focus-visible,.cover:focus-visible,.theme-dot:focus-visible,.social:focus-visible{outline:3px solid rgba(243,78,152,.34);outline-offset:3px}
.change-button{margin-top:14px;margin-left:auto;display:block}

/* หน้าปก */
.cover{position:relative;width:78px;height:62px;padding:0;border:2px solid transparent;border-radius:13px;background:var(--cover-bg,#f0e6f5);background-size:cover;background-position:center}
.cover[data-cover="pink"]{--cover-bg:radial-gradient(circle at 30% 24%,rgba(255,255,255,.6),transparent 34%),linear-gradient(160deg,#ff9ecd,#c98bf0)}
.cover[data-cover="violet"]{--cover-bg:linear-gradient(160deg,#7d5bd4,#3c2a63)}
.cover[data-cover="cyber"]{--cover-bg:radial-gradient(circle at 50% 50%,rgba(90,200,255,.5),transparent 46%),linear-gradient(160deg,#101a2e,#06070d)}
.cover[data-cover="dusk"]{--cover-bg:linear-gradient(160deg,#b0c4d8,#6b7f95)}
.cover:after{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:#7c48e8;background:rgba(255,255,255,.86);content:"⌄";font-size:11px;transform:translate(-50%,-50%)}
.cover[aria-checked="true"]{border-color:#f34e98;box-shadow:0 0 0 3px rgba(243,78,152,.18)}
.cover[aria-checked="true"]:after{color:#fff;background:#f34e98;content:"✓"}

/* ช่องกรอกพร้อมตัวนับ */
.input-count{position:relative;display:block}
.input-count input{width:100%;min-height:46px;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}
.input-count input:focus{border-color:#f37fb4;box-shadow:0 0 0 3px rgba(243,78,152,.13)}
.input-count b{position:absolute;right:14px;top:50%;color:#b49aab;font-size:11px;font-weight:700;transform:translateY(-50%)}

/* ปุ่มโดเนทแบบลากจัดลำดับได้ */
.donate-buttons{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.donate-buttons li{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--pigy-line);border-radius:14px;background:#fff;cursor:grab}
.donate-buttons li.dragging{opacity:.45}
.donate-buttons li.locked{opacity:.62;cursor:default}
.donate-buttons .drag{color:#c8b2c1;font-size:15px}
.btn-icon{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:10px;font-size:15px}
.btn-icon.pink{background:#ffe3f0}.btn-icon.violet{background:#ece2ff}.btn-icon.gold{background:#fff0d6}.btn-icon.grey{background:#efeaee}
.donate-buttons b{flex:1;font-size:13px}
.donate-buttons .dot{width:16px;height:16px;flex:none;border-radius:5px}
.dot.pink{background:#f34e98}.dot.violet{background:#8b5cf6}.dot.gold{background:#f5a623}
.donate-buttons .lock{color:#a8929f;font-size:13px}

/* ลิงก์และโซเชียล */
.link-row{display:flex;gap:8px}
.link-row input{flex:1;min-height:44px;padding:0 14px;border:1px solid var(--pigy-line);border-radius:13px;outline:0;color:var(--pigy-text);background:#fff;font:inherit;font-weight:400}
.social-picker{display:flex;flex-wrap:wrap;gap:10px}
.social{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;color:#fff;font-size:16px;font-weight:800;transition:.22s}
.social.yt{background:#ff0033}.social.tt{background:#111}.social.fb{background:#1877f2}.social.dc{background:#5865f2}.social.ig{background:linear-gradient(135deg,#feda75,#d62976 52%,#4f5bd5)}
.social-picker .social{opacity:.32;filter:grayscale(.7)}
.social-picker .social.active{opacity:1;filter:none}

/* ตั้งค่าขั้นสูง */
.advanced-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:14px}
.adv-card h4{margin:12px 0 3px;font-size:15px}
.adv-card>p{margin:0 0 14px;color:var(--pigy-dim);font-size:11.5px}
.adv-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;font-size:19px}
.adv-icon.pink{background:var(--pigy-pink-soft)}.adv-icon.violet{background:var(--pigy-violet-soft)}.adv-icon.gold{background:#fff2da}
.adv-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12.5px;font-weight:800}
.adv-row span{flex:1}
.theme-dot{width:34px;height:34px;padding:0;border:2px solid transparent;border-radius:50%;background:var(--tone)}
.theme-dot[aria-checked="true"]{border-color:#fff;box-shadow:0 0 0 2px #f34e98}
.bio-save-bar{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}

/* ================= กรอบมือถือพรีวิว ================= */
.phone-wrap{position:sticky;top:20px}
.phone{max-width:100%;overflow:hidden;border:9px solid #16121c;border-radius:42px;background:#fff;box-shadow:0 26px 60px rgba(70,30,64,.26)}
.phone-status{display:flex;align-items:center;justify-content:space-between;padding:9px 18px 5px;color:#fff;background:#2b1b36;font-size:11px;font-weight:800}
.phone-screen{max-height:72vh;overflow-y:auto;background:#fff;scrollbar-width:thin}
.phone-note{margin:12px 0 0;color:var(--pigy-dim);font-size:11.5px;text-align:center}

/* ================= บล็อกหน้า BIO (ใช้ร่วมกับ bio.html) ================= */
.bio-cover{position:relative;padding:26px 20px 22px;text-align:center;background:var(--cover-bg,radial-gradient(circle at 30% 22%,rgba(255,255,255,.34),transparent 36%),linear-gradient(165deg,#6b3f9e,#3a2350))}
.bio-cover[data-cover="pink"]{--cover-bg:radial-gradient(circle at 28% 20%,rgba(255,255,255,.34),transparent 38%),linear-gradient(165deg,#8e4fb4,#4a2a63)}
.bio-cover[data-cover="violet"]{--cover-bg:linear-gradient(165deg,#7d5bd4,#2f2050)}
.bio-cover[data-cover="cyber"]{--cover-bg:radial-gradient(circle at 50% 34%,rgba(90,200,255,.34),transparent 44%),linear-gradient(165deg,#101a2e,#06070d)}
.bio-cover[data-cover="dusk"]{--cover-bg:linear-gradient(165deg,#93a9c0,#4d5f74)}
/* ประกายดาวบนหน้าปก: ใช้ radial-gradient หลายจุด ไม่ต้องโหลดภาพ */
.bio-cover:before{position:absolute;inset:0;content:"";background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.55) 0 1px,transparent 2px);background-size:74px 74px,53px 53px;background-position:12px 18px,44px 8px;opacity:.6;pointer-events:none}
.bio-cover.no-sparkle:before{display:none}
.cover-tools{position:absolute;right:14px;top:14px;display:flex;gap:8px}
.cover-tools span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:#fff;background:rgba(255,255,255,.2);font-size:13px;backdrop-filter:blur(10px)}
.bio-avatar{position:relative;width:132px;height:132px;margin:6px auto 12px;border-radius:50%;padding:5px;background:var(--frame-bg,linear-gradient(140deg,#ff5fa4,#e02f80))}
.bio-avatar[data-frame="gold"]{--frame-bg:linear-gradient(140deg,#ffd45c,#e58a1f)}
.bio-avatar[data-frame="violet"]{--frame-bg:linear-gradient(140deg,#b58cff,#7c48e8)}
.bio-avatar img{width:100%;height:100%;border:4px solid rgba(20,10,26,.5);border-radius:50%;object-fit:cover;background:#f6e9f7}
.bio-name{display:flex;align-items:center;justify-content:center;gap:7px;margin:0;color:#fff;font-size:25px;letter-spacing:-.02em}
.verified{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:#fff;background:#2f86f6;font-size:11px}
.bio-desc{margin:6px 0 14px;color:rgba(255,255,255,.86);font-size:12.5px;line-height:1.65}
.bio-socials{display:flex;justify-content:center;gap:10px}
.bio-socials .social{width:38px;height:38px;box-shadow:0 6px 14px rgba(0,0,0,.24)}
.bio-socials .social[hidden]{display:none}

.bio-body{position:relative;margin-top:-14px;padding:16px 16px 22px;border-radius:18px 18px 0 0;background:#fff}
.bio-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 18px;padding:0;list-style:none}
.bio-tabs li{position:relative;display:grid;justify-items:center;gap:5px;padding:11px 4px;border:1px solid var(--pigy-line);border-radius:15px;background:#fff;text-align:center}
.bio-tabs li.active{border-color:#f9a7cc;background:linear-gradient(160deg,#fff,#ffe6f2);box-shadow:0 8px 18px rgba(243,78,152,.14)}
.bio-tabs li.locked{opacity:.55}
.bio-tabs li:has(button){padding:0}
.bio-tabs button{display:grid;justify-items:center;gap:5px;width:100%;padding:11px 4px;border:0;border-radius:inherit;background:none;font:inherit;color:inherit;text-align:inherit;cursor:pointer}
.bio-tabs button:focus-visible{outline:3px solid rgba(243,78,152,.34);outline-offset:2px}
.bio-tabs i{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#ffeaf4;font-size:20px;font-style:normal}
.bio-tabs b{font-size:10.5px;font-weight:800;line-height:1.3}
.bio-tabs .flag{position:absolute;right:6px;top:6px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;color:#fff;background:#f34e98;font-size:9px}
.bio-support{margin:0;font-size:18px}
.bio-support-sub{margin:3px 0 14px;color:var(--pigy-dim);font-size:12px}
.bio-channels{padding:14px;border:1px solid var(--pigy-line);border-radius:17px;background:#fdfaff}
.channel-title{margin:0 0 11px;font-size:12.5px;font-weight:800}
.channel-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.channel{display:flex;align-items:center;gap:9px;padding:11px;border:1px solid var(--pigy-line);border-radius:13px;background:#fff;font:inherit;text-align:left;transition:.22s}
button.channel{cursor:pointer}
button.channel:hover,button.channel:focus-visible{border-color:#f9a7cc;background:var(--pigy-pink-soft)}
button.channel:focus-visible{outline:3px solid rgba(243,78,152,.3);outline-offset:2px}
.channel i{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:#ffeaf4;font-size:16px;font-style:normal}
.channel b{display:block;font-size:12px}
.channel small{display:block;color:var(--pigy-dim);font-size:10.5px}
.channel-foot{margin:13px 0 0;color:var(--pigy-dim);font-size:11px;text-align:center}

/* ธีม Ninja ของหน้า settings */
body.ninja .bio-card,body.ninja .adv-card,body.ninja .donate-buttons li,body.ninja .input-count input,body.ninja .link-row input,body.ninja .bio-tabs li,body.ninja .channel{color:var(--pigy-text);background:#2c2d35}
body.ninja .bio-channels{background:#26272e}
body.ninja .bio-body{background:#22232a}
body.ninja .phone-screen{background:#22232a}
body.ninja .avatar-preview img{background:#33343d}

/* Responsive */
@media(max-width:1100px){
  /* minmax(0,1fr) กันไม่ให้กรอบมือถือ 400px ดันคอลัมน์จนหน้าล้นออกนอกจอ */
  .bio-layout{grid-template-columns:minmax(0,1fr)}
  .phone-wrap{position:static;width:min(400px,100%);margin-inline:auto}
  .phone-screen{max-height:none}
}
@media(max-width:640px){
  .bio-page-head h2{font-size:24px}
  /* บีบตัวเลือกกรอบและหน้าปกให้พอดีการ์ดบนจอแคบ ไม่ให้ล้นออกนอกจอ */
  .avatar-preview{width:78px;height:78px}
  .frame{width:38px;height:38px}
  .cover{width:calc(25% - 8px);min-width:58px;height:54px}
  .social{width:36px;height:36px}
  .pill-tabs{width:100%}
  .pill-tabs button{flex:1;padding:0 10px}
  .change-button{margin-left:0}
  .bio-save-bar .btn{flex:1}
}