.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:50;}
.modal-overlay.open{display:flex;}
.modal{background:var(--panel);border:1px solid var(--border);border-radius:14px;width:420px;max-width:96vw;max-height:92vh;overflow-y:auto;display:flex;flex-direction:column;}
.mp-wrap{height:110px;border-radius:14px 14px 0 0;overflow:hidden;position:relative;flex-shrink:0;background:linear-gradient(135deg,var(--accent),#8e44ad);}
.mp-banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;}
.mp-avatar-wrap{position:absolute;bottom:12px;left:18px;}
.mp-avatar{width:56px;height:56px;border-radius:50%;border:3px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:24px;overflow:hidden;background:#444;}
.mp-avatar-img{width:100%;height:100%;object-fit:cover;display:none;}
.modal-inner{padding:14px 18px 18px;}
.modal-sec{margin-bottom:14px;}
.modal-sec-lbl{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:7px;}
.modal-sec input,.modal-sec textarea{width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:7px;color:var(--text);padding:8px 10px;font-size:13px;outline:none;resize:none;}
.modal-sec input:focus,.modal-sec textarea:focus{border-color:var(--accent);}
.mp-edit-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:rgba(255,255,255,.0);background:rgba(0,0,0,.0);transition:all .2s;pointer-events:none;}
.mp-wrap:hover .mp-edit-hint{color:rgba(255,255,255,.9);background:rgba(0,0,0,.35);}
.mp-av-hint{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:rgba(255,255,255,.0);background:rgba(0,0,0,.0);transition:all .2s;pointer-events:none;}
.mp-avatar:hover .mp-av-hint{color:#fff;background:rgba(0,0,0,.45);}
.panel-body{padding:12px 18px;border-bottom:1px solid var(--border);}
.panel-body input{width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:7px;color:var(--text);padding:8px 10px;font-size:13px;outline:none;}
.panel-body input:focus{border-color:var(--accent);}
.hex-row{display:flex;align-items:center;gap:8px;margin-top:8px;}
.hex-row input:not([type="color"]){background:var(--input-bg);border:1px solid var(--border);border-radius:7px;color:var(--text);padding:6px 10px;font-size:13px;outline:none;}
.hex-row input:not([type="color"]):focus{border-color:var(--accent);}
.upload-btn{width:100%;padding:9px;background:var(--panel2);border:1px solid var(--border);border-radius:7px;color:var(--text);cursor:pointer;font-size:13px;text-align:center;}
.upload-btn:hover{border-color:var(--accent);}
.color-swatches{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:4px;}
.cswatch{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .1s,border-color .1s;flex-shrink:0;}
.cswatch:hover{transform:scale(1.15);}
.cswatch.sel{border-color:#fff;box-shadow:0 0 0 2px var(--accent);}
.avatar-tabs{display:flex;border:1px solid var(--border);border-radius:7px;overflow:hidden;margin-bottom:0;}
.atab{flex:1;padding:7px 4px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;}
.atab.active{background:var(--accent);color:#fff;}
.avatar-pick{display:flex;gap:6px;flex-wrap:wrap;}
.avatar-pick span{font-size:22px;cursor:pointer;padding:4px;border-radius:6px;border:2px solid transparent;}
.avatar-pick span.selected{border-color:var(--accent);}
.modal-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:6px;}
.modal-btns button{padding:8px 18px;border-radius:7px;border:none;cursor:pointer;font-size:13px;font-weight:600;}
.btn-cancel{background:var(--panel2);color:var(--text);}
.btn-save{background:var(--accent);color:#fff;}
.theme-swatches{display:flex;gap:10px;flex-wrap:wrap;}
.theme-swatch-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:var(--muted);}
.theme-swatch{width:44px;height:44px;border-radius:8px;cursor:pointer;border:2px solid var(--border);position:relative;display:flex;align-items:center;justify-content:center;font-size:16px;}
.theme-swatch:hover{border-color:var(--accent);}
.theme-swatch .ts-edit{font-size:11px;}