#arf-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99999;display:flex;align-items:center;justify-content:center;padding:18px;}
#arf-overlay.arf-hidden{display:none;}
.arf-canvas-wrap{position:relative;background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.3);width:min(1200px,95vw);height:min(85vh,760px);display:flex;flex-direction:column;overflow:hidden;}
.arf-close{position:absolute;top:10px;right:10px;background:#fff;border:none;border-radius:999px;width:34px;height:34px;font-size:22px;line-height:34px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2);z-index:5}
.arf-nav{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:none;border-radius:999px;width:40px;height:40px;font-size:26px;line-height:38px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2);z-index:5}
.arf-prev{left:12px}.arf-next{right:12px}
.arf-canvas{position:relative;flex:1;overflow:hidden;background:#f6f6f6; touch-action:none;}
.arf-room-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.arf-art-wrap{position:absolute;top:0;left:0;transform-origin:top left;transition:filter .2s ease;will-change:transform; cursor:grab; pointer-events:auto; touch-action:none; z-index:4;}
.arf-art-wrap:active{cursor:grabbing;}
.arf-art{display:block;max-width:380px;width:380px;height:auto;user-select:none;pointer-events:auto;background:#eee;}
.arf-handle{position:absolute;right:-14px;bottom:-14px;width:28px;height:28px;border-radius:50%;background:#111;opacity:.9;cursor:nwse-resize;box-shadow:0 2px 6px rgba(0,0,0,.3); z-index:5;}
.arf-handle:after{content:'';position:absolute;inset:8px;background:linear-gradient(45deg,transparent 40%,#fff 40%,#fff 60%,transparent 60%);}
.arf-toolbar{display:flex;gap:14px;align-items:center;padding:10px 12px;border-top:1px solid #eee;background:#fafafa;flex-wrap:wrap}
.arf-upload input{display:none}
.arf-upload span{display:inline-block;background:#ff6d4a;color:#fff;padding:10px 14px;border-radius:10px;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.15);}
.arf-selects{display:flex;gap:12px;align-items:center}
.arf-selects label{font-size:12px;display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #eee;padding:6px 8px;border-radius:8px}
#arf-size{width:160px}
.arf-hint{font-size:12px;color:#666;margin-left:auto;padding-right:6px}
.arf-thumbs{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #eee;background:#fff;overflow:auto}
.arf-thumb{border:none;background:#fff;padding:0;border-radius:10px;box-shadow:0 2px 4px rgba(0,0,0,.12);cursor:pointer;flex:0 0 auto}
.arf-thumb img{display:block;width:120px;height:70px;object-fit:cover;border-radius:10px}
.arf-art-wrap{box-sizing:content-box}
.arf-art-wrap.frame-none{padding:0;border:none}
.arf-art-wrap.frame-black{padding:14px;border:10px solid #111}
.arf-art-wrap.frame-white{padding:14px;border:10px solid #fff}
.arf-art-wrap.frame-classic{padding:16px;border:14px solid transparent;border-image-slice:30; border-image-width:14; border-image-repeat:stretch; border-image-source:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23A86'/%3E%3Cstop offset='1' stop-color='%23FC6'/%3E%3C/linearGradient%3E%3Crect x='0' y='0' width='60' height='60' fill='url(%23g)'/%3E%3C/svg%3E");}
.arf-btn-view-room{display:inline-flex;align-items:center;gap:6px;background:#111;color:#fff;border:none;border-radius:10px;padding:10px 14px;cursor:pointer;margin:8px 0;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.arf-btn-view-room:hover{opacity:.9}
@media (max-width:640px){
  .arf-thumb img{width:90px;height:54px}
  #arf-size{width:120px}
  .arf-upload span{padding:9px 12px}
}