/* ===== แผงข้อมูลเมนูบน: เอาเมาส์ชี้ -> เลื่อนลงมาแบบ 3 มิติ ===== */
.mp{position:fixed;top:0;left:0;z-index:99000;width:344px;max-width:calc(100vw - 16px);box-sizing:border-box;visibility:hidden;opacity:0;pointer-events:none;transform-origin:50% 0;
 transform:perspective(1100px) translateY(-16px) rotateX(-24deg) scale(.95);
 transition:opacity .18s ease,transform .36s cubic-bezier(.2,.85,.25,1.12),visibility 0s linear .36s,left .24s cubic-bezier(.3,.8,.3,1)}
.mp.on{visibility:visible;opacity:1;pointer-events:auto;transform:perspective(1100px) translateY(0) rotateX(0) scale(1);transition-delay:0s,0s,0s,0s}
.mp.nt{transition:opacity .18s ease,transform .36s cubic-bezier(.2,.85,.25,1.12),visibility 0s linear .36s}
.mp.wide{width:392px}
.mp-in{position:relative;max-height:calc(100vh - 96px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#55524b transparent;padding:14px 12px 12px;border-radius:16px;border:1px solid #000;color:#e6dfd0;
 background:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px),linear-gradient(180deg,#3a3935,#262522 48%,#1b1a18);
 box-shadow:0 26px 44px -6px rgba(0,0,0,.72),0 10px 18px rgba(0,0,0,.5),0 4px 0 #0a0a09,inset 0 1px 0 rgba(255,255,255,.24),0 0 0 1px #3f3d38}
.mp-in::before{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#ff3b2f 25%,#ff3b2f 75%,transparent);box-shadow:0 0 10px rgba(255,59,47,.85)}
.mp-ar{position:absolute;top:-7px;left:var(--ax,40px);width:14px;height:14px;margin-left:-7px;transform:rotate(45deg);border-radius:3px 0 0 0;background:#3a3935;border-left:1px solid #000;border-top:1px solid #000;box-shadow:-2px -2px 6px rgba(0,0,0,.35),inset 1px 1px 0 rgba(255,255,255,.22);transition:left .24s cubic-bezier(.3,.8,.3,1)}
.mp-bd{animation:mp-sw .3s cubic-bezier(.2,.8,.25,1) both}
@keyframes mp-sw{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mp-hd{display:flex;align-items:center;gap:12px;padding:2px 6px 12px;margin:0 0 6px;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 1px 0 rgba(0,0,0,.5)}
.mp-hi{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;color:#fff;background:linear-gradient(180deg,#ff6a5c,#d92a1c);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(90,0,0,.3),0 6px 14px -3px rgba(255,59,47,.6)}
.mp-hi svg{width:20px;height:20px}
.mp-ht{margin:0;font-size:16px;font-weight:700;line-height:1.25;color:#f6f2e9;text-shadow:0 -1px 0 rgba(0,0,0,.6)}
.mp-hs{margin:2px 0 0;font-size:12.5px;line-height:1.35;color:#9a968c}
.mp-ls{display:flex;flex-direction:column;gap:2px;perspective:800px}
.mp-it{display:flex;align-items:flex-start;gap:12px;padding:9px 8px;border-radius:12px;text-decoration:none;color:inherit;transform-origin:50% 0;transition:background .15s,transform .15s,box-shadow .15s;
 animation:mp-pop .42s cubic-bezier(.2,.85,.25,1.1) both;animation-delay:calc(var(--i,0)*55ms + 60ms)}
@keyframes mp-pop{from{opacity:0;transform:translateY(-12px) rotateX(-40deg)}to{opacity:1;transform:none}}
a.mp-it:hover,.mp-it.hv:hover{background:rgba(255,255,255,.07);transform:translateZ(0) translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 12px -6px rgba(0,0,0,.7)}
.mp-ic{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:#ffd7d0;background:linear-gradient(180deg,#2c2b28,#1a1917);box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.1)}
.mp-ic svg{width:18px;height:18px}
.mp-tx{min-width:0;flex:1}
.mp-tx b{display:block;font-size:14px;font-weight:700;line-height:1.35;color:#f2eee4}
.mp-tx span{display:block;margin-top:1px;font-size:12.5px;line-height:1.5;color:#a9a59b}
.mp-tx em{display:inline-block;margin-right:6px;padding:0 7px;border-radius:999px;font:700 11px/1.7 inherit;font-style:normal;color:#ffd7d0;background:rgba(255,59,47,.18);border:1px solid rgba(255,59,47,.35)}
.mp-it.off .mp-tx b{color:#cfcabd}
.mp-it.off .mp-tx span{color:#77736a}
.mp-ft{margin:8px 6px 2px;padding-top:9px;border-top:1px solid rgba(255,255,255,.07);font-size:12px;line-height:1.5;color:#77736a}
.topbar .mnav button[aria-expanded="true"]{background:rgba(255,255,255,.1);color:#fff}
.topbar .mnav button[aria-expanded="true"]::after{width:calc(100% - 24px)}
body.cute .mp-in{background:linear-gradient(180deg,#3d2f60,#2a2040);border:2px dashed rgba(255,143,199,.55);box-shadow:0 22px 40px -6px rgba(10,0,30,.7),0 4px 0 #1a1230,inset 0 1px 0 rgba(255,255,255,.2);color:#fff}
body.cute .mp-in::before{background:linear-gradient(90deg,transparent,#ff8fc7 25%,#b79cff 75%,transparent);box-shadow:0 0 10px rgba(255,143,199,.8)}
body.cute .mp-ar{background:#3d2f60;border-color:rgba(255,143,199,.55)}
body.cute .mp-hi{background:linear-gradient(135deg,#ff8fc7,#b79cff);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 14px -3px rgba(255,143,199,.6)}
body.cute .mp-ic{color:#ffd95a;background:rgba(255,255,255,.08)}
body.cute .mp-tx em{color:#ffd95a;background:rgba(255,217,90,.14);border-color:rgba(255,217,90,.4)}


/* ---- ภาพประกอบวิธีใช้ โผล่ด้านข้างแผง ---- */
.mp-side{display:none;position:absolute;top:0;left:calc(100% + 14px);width:var(--sdw,420px);box-sizing:border-box;padding:14px;border-radius:16px;border:1px solid #000;color:#e6dfd0;
 background:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px),linear-gradient(180deg,#3a3935,#262522 48%,#1b1a18);
 box-shadow:0 26px 44px -6px rgba(0,0,0,.72),0 10px 18px rgba(0,0,0,.5),0 4px 0 #0a0a09,inset 0 1px 0 rgba(255,255,255,.24),0 0 0 1px #3f3d38;
 opacity:0;transform:perspective(900px) translateX(-30px) rotateY(-28deg) scale(.92);transform-origin:0 30%;transition:opacity .22s ease,transform .5s cubic-bezier(.2,.85,.25,1.15)}
.mp.has-sd .mp-side{display:block}
.mp.on .mp-side{opacity:1;transform:perspective(900px);transition-delay:.14s}
.mp.sd-l .mp-side{left:auto;right:calc(100% + 14px);transform:perspective(900px) translateX(30px) rotateY(28deg) scale(.92);transform-origin:100% 30%}
.mp.sd-l.on .mp-side{transform:perspective(900px)}
.mp.sd-off .mp-side{display:none!important}
.mp-side::before{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#ff3b2f 25%,#ff3b2f 75%,transparent);box-shadow:0 0 10px rgba(255,59,47,.85)}
.mp-sd-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 2px 10px}
.mp-sd-hd b{font-size:16px;font-weight:700;color:#f2eee4;text-shadow:0 -1px 0 rgba(0,0,0,.6)}
.mp-sd-n{padding:2px 12px;border-radius:999px;font:700 13px/1.6 inherit;color:#ffd7d0;background:rgba(255,59,47,.18);border:1px solid rgba(255,59,47,.35)}
.mp-sd-fr{position:relative;aspect-ratio:16/10;max-height:calc(100vh - 230px);border-radius:12px;overflow:hidden;background:#0d0c0b;box-shadow:inset 0 2px 8px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08),0 8px 16px -8px rgba(0,0,0,.8)}
.mp-sd-fr img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;animation:mp-sw .3s ease both}
.mp-sd-fr img[hidden],.mp-sd-ph[hidden]{display:none}
.mp-sd-ph{position:absolute;inset:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:12px;text-align:center;border:1.5px dashed rgba(255,255,255,.18);border-radius:9px;color:#8d897f}
.mp-sd-ph svg{width:56px;height:56px;margin-bottom:2px;opacity:.55}
.mp-sd-ph b{font-size:18px;font-weight:700;color:#cfcabd}
.mp-sd-ph span{font-size:14px;line-height:1.45}
.mp-sd-cp{margin:12px 2px 0;font-size:16px;font-weight:700;line-height:1.4;color:#f2eee4}
.mp-sd-dots{display:flex;gap:5px;margin:9px 2px 1px}
.mp-sd-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);transition:background .15s,width .2s}
.mp-sd-dots i.on{width:24px;border-radius:3px;background:#ff3b2f;box-shadow:0 0 6px rgba(255,59,47,.7)}
.mp-it.sel{background:rgba(255,255,255,.06);box-shadow:inset 2px 0 0 #ff3b2f}
body.cute .mp-side{background:linear-gradient(180deg,#3d2f60,#2a2040);border:2px dashed rgba(255,143,199,.55);color:#fff}
body.cute .mp-sd-dots i.on{background:#ff8fc7;box-shadow:0 0 6px rgba(255,143,199,.7)}
@media(prefers-reduced-motion:reduce){.mp-side,.mp.on .mp-side,.mp.sd-l .mp-side{transition:opacity .01s;transform:none}}
/* ---- ฟอร์มแจ้งปัญหา ---- */
.rp{animation:mp-pop .42s cubic-bezier(.2,.85,.25,1.1) .06s both;transform-origin:50% 0}
.rp-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:2px 0 12px}
.rp-c{min-width:0;padding:8px 4px;border-radius:10px;border:1px solid rgba(255,255,255,.1);cursor:pointer;color:#b4b0a5;font:600 12.5px/1.2 inherit;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.rp-c:hover{color:#fff;border-color:rgba(255,255,255,.22)}
.rp-c[aria-checked="true"]{color:#fff;border-color:#ff6a5c;background:linear-gradient(180deg,#ff6a5c,#d92a1c);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 10px -3px rgba(255,59,47,.6)}
.rp-l{display:flex;align-items:center;justify-content:space-between;margin:0 2px 6px;font-size:12.5px;font-weight:700;color:#cfcabd}
.rp-l small{font-size:12px;font-weight:600;color:#8d897f}
.rp-ta{position:relative;margin:0 0 12px}
.rp-ta textarea,.rp-in{display:block;width:100%;box-sizing:border-box;border-radius:12px;border:1px solid rgba(255,255,255,.1);color:#f2eee4;font:400 14px/1.55 inherit;background:rgba(0,0,0,.38);box-shadow:inset 0 2px 6px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.06);transition:border-color .15s,box-shadow .15s}
.rp-ta textarea{min-height:104px;max-height:220px;padding:10px 12px 24px;resize:vertical}
.rp-in{padding:10px 12px;margin:0 0 12px;font-size:13.5px}
.rp-ta textarea::placeholder,.rp-in::placeholder{color:#77736a}
.rp-ta textarea:focus,.rp-in:focus{outline:0;border-color:#ff6a5c;box-shadow:inset 0 2px 6px rgba(0,0,0,.55),0 0 0 3px rgba(255,59,47,.22)}
.rp-n{position:absolute;right:11px;bottom:6px;font-size:11px;color:#77736a;pointer-events:none}
.rp-th{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 12px}
.rp-tb,.rp-add,.rp-em,.rp-ld{position:relative;aspect-ratio:1;border-radius:12px;min-width:0}
.rp-tb{overflow:visible;background:#111;box-shadow:0 6px 12px -4px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.12);animation:rp-in .32s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes rp-in{from{opacity:0;transform:scale(.7) rotate(-6deg)}to{opacity:1;transform:none}}
.rp-tb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px}
.rp-tb button{position:absolute;top:-7px;right:-7px;width:22px;height:22px;padding:0 0 1px;display:grid;place-items:center;border-radius:50%;border:2px solid #1b1a18;cursor:pointer;color:#fff;font:700 14px/1 inherit;background:linear-gradient(180deg,#ff6a5c,#d92a1c);box-shadow:0 2px 6px rgba(0,0,0,.6);transition:transform .12s}
.rp-tb button:hover{transform:scale(1.15)}
.rp-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;border:1.5px dashed rgba(255,255,255,.25);cursor:pointer;color:#b4b0a5;font:600 11.5px/1.2 inherit;background:rgba(255,255,255,.03);transition:border-color .15s,color .15s,background .15s}
.rp-add svg{width:20px;height:20px}
.rp-add:hover{border-color:#ff6a5c;color:#fff;background:rgba(255,59,47,.08)}
.rp-em{border:1.5px dashed rgba(255,255,255,.08);background:rgba(0,0,0,.18)}
.rp-ld{display:grid;place-items:center;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.rp-ld::after{content:"";width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.2);border-top-color:#ff6a5c;animation:rp-sp .7s linear infinite}
@keyframes rp-sp{to{transform:rotate(360deg)}}
.rp.dz .rp-th{outline:2px dashed #ff6a5c;outline-offset:4px;border-radius:12px}
.rp-er{margin:0 0 10px;padding:9px 12px;border-radius:10px;font-size:12.5px;line-height:1.45;color:#ffb3a8;background:rgba(255,70,50,.1);border:1px solid rgba(255,90,70,.3)}
.rp-er:empty{display:none}
.rp-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 16px;border-radius:13px;border:0;cursor:pointer;color:#fff;font:700 15.5px/1.2 inherit;text-shadow:0 -1px 0 rgba(90,0,0,.5);background:linear-gradient(180deg,#ff6a5c,#d92a1c);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -3px 0 rgba(90,0,0,.35) inset,0 8px 18px -4px rgba(255,59,47,.55),0 2px 4px rgba(0,0,0,.5);transition:transform .12s,filter .15s,box-shadow .12s}
.rp-go svg{width:18px;height:18px}
.rp-go:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.rp-go:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -1px 0 rgba(90,0,0,.35) inset,0 3px 8px -2px rgba(255,59,47,.5)}
.rp-go:disabled{cursor:not-allowed;filter:grayscale(.85) brightness(.7);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 -3px 0 rgba(0,0,0,.3) inset}
.rp-go.alt{color:#e8e3d8;text-shadow:none;background:linear-gradient(180deg,#3c3c41,#2d2d31);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 2px 6px rgba(0,0,0,.45)}
.rp-done{text-align:center;padding:12px 6px 4px}
.rp-ck{width:60px;height:60px;margin:2px auto 14px;display:grid;place-items:center;border-radius:50%;color:#0d2a17;background:linear-gradient(180deg,#7dffa8,#2fcf6a);box-shadow:0 0 0 8px rgba(60,255,120,.1),0 10px 24px -4px rgba(47,207,106,.55);animation:rp-in .45s cubic-bezier(.2,.9,.3,1.3) both}
.rp-ck svg{width:30px;height:30px}
.rp-done h3{margin:0 0 6px;font-size:18px;color:#f6f2e9}
.rp-done p{margin:0 0 16px;font-size:13.5px;line-height:1.55;color:#a9a59b}
.rp-ft{margin:10px 4px 0;font-size:11.5px;line-height:1.5;text-align:center;color:#77736a}
body.cute .rp-c[aria-checked="true"],body.cute .rp-go:not(.alt),body.cute .rp-tb button{background:linear-gradient(135deg,#ff8fc7,#b79cff);border-color:#ff8fc7;text-shadow:none}
body.cute .rp-go:not(.alt){box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -3px 0 rgba(90,40,140,.35) inset,0 8px 18px -4px rgba(255,143,199,.55)}
body.cute .rp-ta textarea:focus,body.cute .rp-in:focus{border-color:#ff8fc7;box-shadow:inset 0 2px 6px rgba(0,0,0,.4),0 0 0 3px rgba(255,143,199,.25)}
body.cute .rp-add:hover{border-color:#ff8fc7;background:rgba(255,143,199,.1)}
@media(prefers-reduced-motion:reduce){.rp,.rp-tb,.rp-ck{animation:none}.mp,.mp-ar{transition:opacity .01s}.mp,.mp.on{transform:none}.mp-it,.mp-bd{animation:none}}