/* KCYO patches: theme buttons, safe-area, art handles */
#kcyo-stage .btn, .kcyo-pill.active { background:#DAA520; color:#111; border:0; }
.kcyo-pill { background:#f3f4f6; color:#111; border-radius:999px; padding:6px 10px; border:1px solid #e5e7eb; }
.kcyo-pill.active { box-shadow:0 0 0 2px rgba(218,165,32,0.35) inset; }
#kcyo-safe{ outline:2px dashed #DAA520; outline-offset:-2px; }
#kcyo-safe::after{ content:''; position:absolute; inset:0; border:2px solid rgba(218,165,32,0.65); pointer-events:none; }
.kcyo-handle{ position:absolute; width:12px; height:12px; border:2px solid #111; background:#DAA520; border-radius:2px; z-index:5; }
.kcyo-handle.nw{ left:-6px; top:-6px;}
.kcyo-handle.ne{ right:-6px; top:-6px;}
.kcyo-handle.sw{ left:-6px; bottom:-6px;}
.kcyo-handle.se{ right:-6px; bottom:-6px;}
#kcyo-art{ position:absolute; cursor:move; box-shadow:0 0 0 2px rgba(218,165,32,0.65); }
#kcyo-art.resizing, #kcyo-art.dragging { cursor:grabbing; }

/* === CJ-3 Responsive & UI Suite === */
.kcyo-designer-root{ display:grid; grid-template-columns: 1fr 280px; gap:16px; align-items:start; }
.kcyo-stage-wrap{ position:relative; width:100%; max-width:720px; margin:0 auto; }
.kcyo-stage{ position:relative; width:100%; aspect-ratio: 3 / 4; background:#fafafa; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; }
#kcyo-base{ width:100%; height:100%; object-fit:contain; object-position:center; display:block; }
#kcyo-safe{ position:absolute; box-sizing:border-box; pointer-events:none; }
.kcyo-pricing-box{ position:sticky; top:10px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:12px; box-shadow:0 2px 10px rgba(0,0,0,.04); }
.kcyo-pricing-box h4{ margin:0 0 8px; font-size:14px; }
.kcyo-pricing-row{ display:flex; justify-content:space-between; font-size:14px; padding:2px 0; }
.kcyo-pricing-row.total{ border-top:1px dashed #e5e7eb; margin-top:6px; padding-top:6px; font-weight:600; }
.kcyo-toolbar{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 10px; }
.kcyo-toolbar .btn{ border:1px solid #e5e7eb; border-radius:8px; padding:6px 8px; background:#f8fafc; }
.kcyo-toolbar .btn:hover{ background:#fff; border-color:#d1d5db; }
.kcyo-toolbar .btn[data-pos]{ font-size:13px; }

.kcyo-art-numeric{ display:flex; gap:8px; align-items:center; margin:8px 0 10px; }
.kcyo-art-numeric input{ width:90px; }
.kcyo-tray{ display:grid; grid-template-columns:repeat(auto-fill, minmax(72px,1fr)); gap:10px; margin-top:8px; }
.kcyo-tray .thumb{ border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; background:#fff; padding:4px; cursor:grab; }
.kcyo-tabbar{ display:flex; gap:8px; border-bottom:1px solid #e5e7eb; margin-bottom:8px; }
.kcyo-tabbar .tab{ padding:6px 10px; border-radius:8px 8px 0 0; background:#f3f4f6; cursor:pointer; }
.kcyo-tabbar .tab.active{ background:#fff; border:1px solid #e5e7eb; border-bottom:0; }

/* Buttons and pills theme */
.kcyo-btn, .kcyo-pill{ background:#f3f4f6; color:#111; border-radius:999px; padding:6px 10px; border:1px solid #e5e7eb; }
.kcyo-btn.primary, .kcyo-pill.active{ background:#DAA520; color:#111; border-color:#c89c1b; box-shadow:0 0 0 2px rgba(218,165,32,0.25) inset; }

/* Artwork handle styling (gold) */
#kcyo-art{ position:absolute; cursor:move; box-shadow:0 0 0 2px rgba(218,165,32,.65); }
#kcyo-art .kcyo-handle{ position:absolute; width:12px; height:12px; border:2px solid #111; background:#DAA520; border-radius:2px; }
#kcyo-art .kcyo-handle.nw{ left:-6px; top:-6px; cursor:nwse-resize; }
#kcyo-art .kcyo-handle.ne{ right:-6px; top:-6px; cursor:nesw-resize; }
#kcyo-art .kcyo-handle.sw{ left:-6px; bottom:-6px; cursor:nesw-resize; }
#kcyo-art .kcyo-handle.se{ right:-6px; bottom:-6px; cursor:nwse-resize; }

/* Mobile / tablets */
@media (max-width: 1024px){
  .kcyo-designer-root{ grid-template-columns: 1fr; }
  .kcyo-pricing-box{ position:relative; top:auto; }
}
@media (max-width: 640px){
  .kcyo-stage-wrap{ max-width: 100%; }
  .kcyo-toolbar .btn{ padding:5px 6px; font-size:12px; }
  .kcyo-art-numeric input{ width:78px; }
  .kcyo-tabbar{ gap:6px; }
}