/* Photo editor (public/photo-editor.js): bottom sheet on phones, centred dialog on desktop. */
html.pe-open,html.pe-open body{overflow:hidden}
.pe-backdrop{position:fixed;inset:0;z-index:330;display:flex;align-items:flex-end;justify-content:center;background:#1d1006a6}
.pe-backdrop [hidden]{display:none!important}
.pe-sheet{box-sizing:border-box;display:flex;flex-direction:column;width:min(100%,600px);max-height:calc(100dvh - 12px);background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -10px 30px #0000003d;outline:none}
.pe-head{display:flex;align-items:flex-start;gap:10px;padding:14px 16px 8px}
.pe-head>div{flex:1;min-width:0}
.pe-head h3{margin:0;font-size:17px;font-weight:800;color:#2a1a0d}
.pe-head p{margin:2px 0 0;font-size:12.5px;color:#6b5866}
.pe-x{flex:0 0 36px;width:36px;height:36px;border:0;border-radius:50%;background:#f7f5f1;color:#5d4656;font-size:22px;line-height:36px;cursor:pointer}
.pe-tabs{display:flex;gap:4px;margin:0 16px;padding:3px;border-radius:12px;background:#f5eef3}
.pe-tabs button{flex:1;height:34px;border:0;border-radius:9px;background:none;color:#6b5866;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.pe-tabs button[aria-selected="true"]{background:#fff;color:#a35a12;box-shadow:0 1px 4px #5b34171f}
.pe-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:10px 16px 6px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-content:start}
.pe-modes{display:flex;gap:6px;justify-content:center}
.pe-modes button{height:30px;padding:0 14px;border:1px solid #ead7f1;border-radius:999px;background:#fff;color:#6b5866;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.pe-modes button[aria-pressed="true"]{border-color:#d67d24;color:#a35a12;background:#fdf8f1}
.pe-stage{display:grid;justify-items:center;min-width:0;padding:8px;border-radius:14px;background:#1d120a}
.pe-frame{position:relative;box-sizing:border-box;width:100%;max-width:520px;overflow:hidden;border-radius:8px;background:#2b1e14;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.pe-frame:active{cursor:grabbing}
.pe-frame:focus-visible{outline:3px solid #7cc4ff;outline-offset:3px}
.pe-frame.is-circle{max-width:min(300px,100%)}
.pe-frame.is-circle::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 999px #1d120ab8;pointer-events:none;outline:2px solid #ffffffd9;outline-offset:-2px}
.pe-src{position:absolute;max-width:none;transform-origin:50% 50%;pointer-events:none;-webkit-user-drag:none}
.pe-loading{position:absolute;inset:0;display:grid;place-items:center;color:#f4ebdd;font-size:13px}
.pe-frame.is-ready .pe-loading{display:none}
/* The cover's Back / Share / ⋯ buttons, drawn where they sit on the profile. */
.pe-mock{display:none;position:absolute;inset:0;pointer-events:none}
.pe-frame.is-cover .pe-mock{display:block}
.pe-mock i{position:absolute;top:4.5%;display:grid;place-items:center;width:clamp(26px,10%,40px);aspect-ratio:1;border-radius:50%;background:#1a110a94;color:#fff;font-style:normal;font-size:15px;line-height:1}
.pe-mock .l{left:2.5%}.pe-mock .r{right:14%}.pe-mock .r2{right:2.5%}
.pe-hint{margin:0;text-align:center;font-size:12.5px;color:#6b5866}
.pe-tools{display:flex;align-items:center;gap:6px;min-width:0}
.pe-tool{flex:0 0 38px;width:38px;height:38px;border:1px solid #ead7f1;border-radius:50%;background:#fff;color:#2a1a0d;font:inherit;font-size:20px;font-weight:700;line-height:1;cursor:pointer;display:grid;place-items:center}
.pe-tool:disabled{opacity:.4;cursor:default}
.pe-tools input[type=range]{flex:1;min-width:60px;accent-color:#c8731e;height:28px}
.pe-zv{flex:0 0 34px;font-size:12.5px;font-weight:700;color:#6b5866;text-align:right}
.pe-reset{flex:0 0 auto;height:34px;padding:0 12px;border:0;border-radius:999px;background:#f5eef3;color:#5d4656;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.pe-previews{display:flex;gap:10px;align-items:flex-end;min-width:0;overflow-x:auto;padding:4px 0 2px;scrollbar-width:thin}
.pe-previews figure{margin:0;flex:0 0 auto;display:grid;gap:4px;justify-items:center}
.pe-previews canvas{display:block;border-radius:6px;background:#2b1e14}
.pe-previews .pv-cover{width:118px}
.pe-previews .pv-avatar{width:56px;border-radius:50%}
.pe-previews .pv-thumb{width:56px}
.pe-previews .pv-full{width:72px}
.pe-previews figcaption{font-size:11px;color:#6b5866;white-space:nowrap}
.pe-tool:focus-visible,.pe-reset:focus-visible,.pe-tabs button:focus-visible,.pe-modes button:focus-visible,.pe-x:focus-visible,.pe-save:focus-visible,.pe-cancel:focus-visible{outline:3px solid #147fe5;outline-offset:2px}
.pe-foot{display:flex;align-items:center;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid #f3efea}
.pe-status{flex:1;min-width:0;margin:0;font-size:12px;color:#6b5866;overflow-wrap:anywhere}
.pe-status.err{color:#b91c1c;font-weight:700}
.pe-cancel{height:40px;padding:0 16px;border:1px solid #ead7f1;border-radius:999px;background:#fff;color:#5d4656;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.pe-save{height:40px;min-width:92px;padding:0 20px;border:0;border-radius:999px;background:linear-gradient(135deg,#d67d24,#a35a12);color:#fff;font:inherit;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 4px 10px #a35a1233}
.pe-save:disabled{opacity:.6;cursor:default}
@media (min-width:781px){.pe-backdrop{align-items:center;padding:24px}.pe-sheet{border-radius:20px;max-height:min(860px,calc(100dvh - 48px))}.pe-foot{border-radius:0 0 20px 20px}}
@media (max-height:640px){.pe-previews .pv-cover{width:96px}.pe-stage{padding:4px}}
@media (max-width:380px){.pe-tools input[type=range]{min-width:40px}.pe-reset{padding:0 10px}.pe-previews .pv-cover{width:96px}}