.mp-header { text-align:center; padding:1.6rem 1rem .4rem; }
.mp-header-emoji { font-size:2.4rem; display:block; }
.mp-header h1 { font-size:1.5rem; font-weight:800; margin:.3rem 0 .2rem; }
.mp-header p { color:var(--bs-secondary,#6b7280); margin:0; font-size:.9rem; }

.mp-shell { max-width:720px; margin:0 auto; padding:1rem; }
.mp-card { border-radius:16px; background:var(--bs-body-bg,#fff); box-shadow:0 1px 3px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.07); padding:1.2rem; }

.mp-search { display:flex; gap:.5rem; }
.mp-input { flex:1; padding:.65rem .8rem; border-radius:10px; border:1px solid rgba(0,0,0,.18); font-size:1rem; }
.mp-input:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15); }
.mp-btn { border:none; border-radius:10px; padding:.65rem 1.2rem; font-weight:700; background:#6366f1; color:#fff; cursor:pointer; }
.mp-btn:hover { filter:brightness(1.08); }
.mp-btn:disabled { opacity:.6; cursor:default; }

.mp-result { display:none; margin-top:1.1rem; }
.mp-nameblock { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.8rem; }
.mp-name { font-size:1.3rem; font-weight:800; }
.mp-tag { font-size:.74rem; padding:.15rem .5rem; border-radius:999px; font-weight:700; }
.mp-tag.on { background:rgba(16,185,129,.15); color:#10b981; }
.mp-tag.off { background:rgba(148,163,184,.2); color:#94a3b8; }

/* กล่องสกิน: รูป render หลายสไตล์ (แถวบน) + 3D เต็มกว้างการ์ด (ด้านล่าง) */
.mp-skinbox { display:flex; flex-direction:column; gap:1rem; align-items:stretch; }
.mp-renders { display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.mp-render-img { height:170px; max-width:170px; image-rendering:pixelated; background:#0000000a; border-radius:10px; padding:4px; }
.mp-stylebar { display:flex; flex-wrap:wrap; gap:.35rem; justify-content:center; max-width:230px; }
.mp-sbtn { border:1px solid rgba(0,0,0,.18); background:var(--bs-body-bg,#fff); border-radius:8px; padding:.28rem .6rem; font-size:.78rem; cursor:pointer; color:var(--bs-body-color,#111); }
.mp-sbtn:hover { border-color:#6366f1; }
.mp-sbtn.active { background:#6366f1; color:#fff; border-color:#6366f1; }
.mp-dlbtn { border:none; border-radius:9px; padding:.45rem 1rem; font-weight:700; font-size:.82rem; cursor:pointer; background:#10b981; color:#fff; }
.mp-dlbtn:hover { filter:brightness(1.08); }
.mp-dlbtn:disabled { opacity:.5; cursor:default; }

.mp-3dwrap { display:flex; flex-direction:column; align-items:center; gap:.3rem; width:100%; }
.mp-scene { width:100%; height:460px; perspective:1200px; position:relative; cursor:grab; touch-action:none;
            background:radial-gradient(ellipse at 50% 40%, rgba(99,102,241,.07), transparent 70%); border-radius:14px; }
.mp-scene:active { cursor:grabbing; }
.mp-model { position:absolute; left:50%; top:50%; transform-style:preserve-3d;
            transform:translateY(-24px) rotateX(-8deg) rotateY(25deg); }
.mp-model.spin { animation:mpSpin 11s linear infinite; }
@keyframes mpSpin {
  from { transform:translateY(-24px) rotateX(-8deg) rotateY(0deg); }
  to   { transform:translateY(-24px) rotateX(-8deg) rotateY(360deg); }
}
.mp-part { position:absolute; left:0; top:0; transform-style:preserve-3d; }
.mp-cface { position:absolute; left:0; top:0; background-image:var(--skin); background-repeat:no-repeat;
            image-rendering:pixelated; backface-visibility:hidden; }
.mp-3dhint { font-size:.72rem; color:var(--bs-secondary,#6b7280); }

/* skeleton loading (ระหว่างโหลดสกิน/3D) */
@keyframes mpShimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
.mp-skel { position:absolute; inset:0; display:none; border-radius:14px;
           background:linear-gradient(110deg, rgba(120,130,160,.06) 25%, rgba(120,130,160,.16) 37%, rgba(120,130,160,.06) 50%);
           background-size:200% 100%; animation:mpShimmer 1.25s ease-in-out infinite; }
.mp-skel::after { content:''; position:absolute; left:50%; top:50%; width:120px; height:288px;
                  transform:translate(-50%,-50%); border-radius:26px; background:rgba(120,130,160,.10); }
.mp-scene.loading .mp-skel { display:block; }
.mp-scene.loading .mp-model { visibility:hidden; }
.mp-render-img.loading { background:linear-gradient(110deg, rgba(120,130,160,.06) 25%, rgba(120,130,160,.16) 37%, rgba(120,130,160,.06) 50%);
                         background-size:200% 100%; animation:mpShimmer 1.25s ease-in-out infinite; min-height:170px; min-width:120px; }

.mp-out-row { display:flex; align-items:center; gap:.6rem; background:var(--bs-secondary-bg,#f4f5f7); border-radius:10px; padding:.55rem .7rem; margin-top:.5rem; }
.mp-out-row .k { font-size:.74rem; color:var(--bs-secondary,#6b7280); width:140px; flex-shrink:0; font-weight:600; }
.mp-out-row .v { font-family:ui-monospace,Consolas,monospace; font-size:.9rem; word-break:break-all; flex:1; }
.mp-copy { border:none; background:transparent; cursor:pointer; color:#6366f1; font-size:.8rem; padding:.15rem .45rem; border-radius:6px; font-weight:600; }
.mp-copy:hover { background:rgba(99,102,241,.12); }
.mp-err { color:#ef4444; font-size:.88rem; margin-top:.7rem; min-height:1em; }
.mp-sec-label { font-size:.78rem; font-weight:700; color:var(--bs-secondary,#6b7280); margin:.9rem 0 .1rem; }

/* แกลเลอรีสกินที่ค้นล่าสุด */
.mp-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:.7rem; }
.mp-pcard { border:none; background:var(--bs-secondary-bg,#f4f5f7); border-radius:12px; padding:.7rem .4rem .55rem;
            text-align:center; cursor:pointer; transition:transform .15s, box-shadow .15s; }
.mp-pcard:hover { transform:translateY(-3px); box-shadow:0 6px 16px rgba(0,0,0,.12); }
.mp-pcard img { height:78px; image-rendering:pixelated; }
.mp-pcard .nm { font-size:.78rem; font-weight:700; margin-top:.35rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-empty { text-align:center; padding:1.5rem; color:var(--bs-secondary,#6b7280); font-size:.9rem; }