/* รูปโปรไฟล์ที่พนักงานอัปเอง (12/10/2569) — การ์ดบนหน้าโปรไฟล์ของฉัน · โทนเดียวกับหน้าแรกเมนูพนักงาน (วงกลม · แดง #c8161d · ชมพูอ่อน) */
.pp-card{display:flex;align-items:center;gap:16px;margin:6px 0 18px;padding:16px;border:1px solid #ece6e7;border-radius:18px;background:#fff;box-shadow:0 2px 12px rgba(30,0,4,.04)}
.pp-card[hidden]{display:none}
.pp-face{position:relative;display:grid;place-items:center;flex:0 0 auto;width:92px;height:92px;border-radius:50%;overflow:hidden;background:radial-gradient(120% 120% at 30% 20%,#fff 0%,#fdeef0 70%);color:#8e1b22;font-size:30px;font-weight:700;box-shadow:0 0 0 4px #fff,0 4px 14px rgba(120,10,20,.14)}
.pp-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pp-face img[hidden]{display:none}
.pp-body{flex:1;min-width:0}
.pp-body>strong{display:block;font-size:17px;line-height:1.3}
.pp-source{display:block;margin-top:2px;color:#c8161d;font-size:13px;font-weight:600}
.pp-note{margin:6px 0 10px;color:#6b6b72;font-size:13px;line-height:1.45}
.pp-actions{display:flex;flex-wrap:wrap;gap:8px}
.pp-actions .button{min-height:42px;padding:8px 16px;border-radius:999px}
.pp-status{margin:8px 0 0;font-size:13px;color:#970c15}
.pp-status:empty{display:none}
.pp-status.success{color:#0a6247}
.pp-card.editing .pp-face,.pp-card.editing .pp-body>.pp-actions{display:none}
/* จัดรูป: ลากรูป · วงกลม = ส่วนที่จะเป็นรูปโปรไฟล์ */
.pp-editor{margin:12px 0 0;text-align:center}
.pp-editor[hidden]{display:none}
.pp-stage{position:relative;width:min(300px,100%);aspect-ratio:1;margin:0 auto;overflow:hidden;border-radius:18px;background:#1c1c1f;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.pp-stage.dragging{cursor:grabbing}
.pp-stage img{position:absolute;left:0;top:0;width:auto;height:auto;max-width:none;max-height:none;transform-origin:0 0;pointer-events:none;-webkit-user-drag:none}
.pp-ring{position:absolute;inset:0;border:2px solid rgba(255,255,255,.95);border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.5);pointer-events:none}
.pp-hint{margin:10px 0 4px;color:#6b6b72;font-size:13px}
.pp-zoom{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;width:min(300px,100%);margin:6px auto 12px;font-size:14px;font-weight:600}
.pp-zoom input{flex:1;width:auto;min-height:0;padding:0;border:0;background:transparent;accent-color:#c8161d}
.pp-editor .pp-actions{justify-content:center}
@media(max-width:400px){.pp-card{gap:12px;padding:14px}.pp-face{width:78px;height:78px;font-size:26px}}