:root{--ecp-bg:#0e1320;--ecp-card:#101a2b;--ecp-accent:#f5a623;--ecp-danger:#ff4d4f}
#inink-ecp{max-width:1220px;margin:30px auto}
#inink-ecp .ecp-panel{background:var(--ecp-bg);border-radius:18px;padding:18px;color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.25)}
#inink-ecp label{font-size:13px;display:flex;align-items:center;gap:8px}
#inink-ecp input,#inink-ecp select{padding:6px 8px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#0b1220;color:#fff}
#inink-ecp .ecp-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
#inink-ecp .ecp-top{justify-content:space-between}
#inink-ecp .ecp-mid{margin-top:14px;gap:14px;align-items:stretch}
#inink-ecp .ecp-left{flex:0 0 380px;background:var(--ecp-card);border-radius:14px;padding:14px}
#inink-ecp .ecp-right{flex:1;background:var(--ecp-card);border-radius:14px;padding:14px;min-width:320px}
#inink-ecp .ecp-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
#inink-ecp button{background:var(--ecp-accent);border:none;padding:9px 12px;border-radius:999px;cursor:pointer;font-weight:700}
#inink-ecp button.danger{background:var(--ecp-danger)}
#inink-ecp button:disabled{opacity:.55;cursor:not-allowed}
#inink-ecp .ecp-subhead{font-weight:800;margin:8px 0 6px}
#inink-ecp .ecp-theme{display:flex;gap:10px;margin-top:10px}
#inink-ecp .ecp-theme input{flex:1}
#inink-ecp .ecp-palette{display:flex;flex-wrap:wrap;gap:8px;padding:10px;border-radius:12px;background:#0b1220;min-height:52px}
.ecp-emoji{font-size:22px;line-height:1;background:rgba(255,255,255,.06);padding:6px;border-radius:12px;cursor:pointer;user-select:none;transition:all .15s ease}
.ecp-emoji.off{opacity:.35;filter:grayscale(1)}
.ecp-emoji.ecp-image-tile{width:40px;height:40px;padding:0;background-size:cover;background-position:center;background-repeat:no-repeat;border:2px solid rgba(255,255,255,.1)}
.ecp-emoji.ecp-image-tile:hover{border-color:var(--ecp-accent)}
.ecp-emoji:hover{transform:scale(1.1)}
#inink-ecp-canvas-wrap{width:100%;height:520px;background:#fff;border-radius:12px;overflow:auto;overflow-x:scroll;overflow-y:scroll;position:relative}
#inink-ecp-canvas-wrap canvas{border:2px dashed #ddd}

/* Text Warp Panel (Left Sidebar) */
.ecp-warp-panel{margin-top:10px;margin-bottom:15px;padding:12px;background:rgba(255,255,255,.03);border-radius:8px;border:1px solid rgba(255,255,255,.08)}
.ecp-warp-panel label{display:block;font-size:12px;color:rgba(255,255,255,.9)}
.ecp-warp-panel select,.ecp-warp-panel input[type="range"]{width:100%;margin-top:4px}
.ecp-warp-panel .ecp-hint{font-size:11px;opacity:.7;margin-top:8px}

/* OLD Floating Controls (Deprecated - kept for backwards compat) */
.ecp-warp-controls{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:rgba(14,19,32,.95);padding:10px 16px;border-radius:10px;display:flex;align-items:center;gap:8px;box-shadow:0 4px 12px rgba(0,0,0,.4);z-index:100}
.ecp-warp-style-select{background:#0b1220;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:6px 10px;font-size:13px}
#inink-ecp .ecp-hint{opacity:.8;font-size:12px;margin-top:6px}
#inink-ecp .ecp-note{margin-top:10px;font-size:12px;opacity:.9}
.ecp-pack-selectors select{font-size:12px;padding:5px 7px}
@media(max-width:980px){
  #inink-ecp .ecp-left{flex:1 1 100%}
  #inink-ecp .ecp-right{flex:1 1 100%}
  #inink-ecp-canvas-wrap{height:440px}
}