/* ===== ManaKlade Cover Designer — panel UI (Phase 5c). Scoped .mk-designer ===== */
.mk-designer .designer-panel{display:flex;flex-direction:column;height:660px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);}
.mk-designer .dp-head{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--line);}
.mk-designer .dp-back{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13.5px;font-weight:600;padding:8px 11px;border-radius:9px;transition:.12s;}
.mk-designer .dp-back:hover{background:var(--chip);color:var(--ink);}
.mk-designer .dp-back svg{width:16px;height:16px;}
.mk-designer .dp-head .dp-title{font-size:15px;font-weight:700;flex:1;letter-spacing:-.01em;}
.mk-designer .dp-tool{width:36px;height:36px;border-radius:9px;background:#fff;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:.12s;}
.mk-designer .dp-tool:hover{color:var(--teal);}
.mk-designer .dp-tool svg{width:17px;height:17px;}
.mk-designer .dp-tool[disabled]{opacity:.4;pointer-events:none;}

.mk-designer .dp-chips{display:flex;gap:8px;padding:18px 16px 16px;overflow-x:auto;}
.mk-designer .dp-chip{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:var(--radius);background:var(--chip);color:var(--ink-2);font-size:13px;font-weight:600;white-space:nowrap;transition:.12s;flex:0 0 auto;}
.mk-designer .dp-chip svg{width:16px;height:16px;color:var(--teal);}
.mk-designer .dp-chip:hover{background:var(--chip-hover);}
.mk-designer .dp-chip.on{background:var(--teal);color:#fff;}
.mk-designer .dp-chip.on svg{color:#fff;}

.mk-designer .dp-body{flex:1;overflow-y:auto;}
.mk-designer .dp-body .rail-body{padding:16px;overflow:visible;}
.mk-designer .rail-section-title{font-size:12px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px;}

.mk-designer .dp-insp-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--sel-soft);}
.mk-designer .dp-insp-head .ih-icon{width:30px;height:30px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--teal);}
.mk-designer .dp-insp-head .ih-icon svg{width:17px;height:17px;}
.mk-designer .dp-insp-head .ih-name{font-size:14px;font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mk-designer .dp-insp-head .ih-act{width:30px;height:30px;border-radius:8px;color:var(--muted);display:flex;align-items:center;justify-content:center;}
.mk-designer .dp-insp-head .ih-act:hover{background:#fff;color:var(--ink);}
.mk-designer .dp-insp-head .ih-act.del:hover{background:rgba(192,71,63,.14);color:var(--danger);}
.mk-designer .dp-insp-head .ih-act svg{width:16px;height:16px;}
.mk-designer .dp-done{font-size:12.5px;font-weight:700;color:var(--teal-deep);padding:8px 13px;border-radius:8px;background:#fff;border:1px solid var(--line);transition:.12s;}
.mk-designer .dp-done:hover{background:var(--teal);color:#fff;border-color:var(--teal);}

.mk-designer .dp-foot{border-top:1px solid var(--line);padding:14px 16px;display:flex;align-items:center;gap:14px;background:#fff;}
.mk-designer .dp-foot .dp-price{font-size:20px;font-weight:700;color:var(--ink);white-space:nowrap;letter-spacing:-.01em;}
.mk-designer .dp-foot .dp-price small{display:block;font-size:11px;color:var(--faint);font-weight:500;letter-spacing:0;}
.mk-designer .dp-foot .dp-cart-btn{flex:1;height:48px;font-size:14px;background:var(--grad);color:#fff;border-radius:var(--radius);font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 6px 16px -6px rgba(15,86,102,.5);transition:.15s;padding:0 18px;}
.mk-designer .dp-foot .dp-cart-btn:hover{background:var(--grad-hover);}
.mk-designer .dp-foot .dp-cart-btn svg{width:18px;height:18px;}

/* tool buttons (text presets / font list) */
.mk-designer .tool-btn{width:100%;display:flex;align-items:center;gap:12px;height:48px;min-height:48px;padding:0 14px;border-radius:var(--radius-sm);background:var(--chip);color:var(--ink-2);font-size:14px;font-weight:500;transition:.13s;margin-bottom:9px;text-align:left;}
.mk-designer .tool-btn:hover{background:var(--sel-soft);color:var(--teal-deep);}

/* upload */
.mk-designer .upload-drop{border:2px dashed var(--line);border-radius:var(--radius);padding:26px 14px;text-align:center;color:var(--muted);transition:.15s;cursor:pointer;}
.mk-designer .upload-drop:hover,.mk-designer .upload-drop.drag{border-color:var(--teal);background:var(--sel-soft);color:var(--teal-deep);}
.mk-designer .upload-drop svg{width:30px;height:30px;color:var(--teal);margin-bottom:8px;}
.mk-designer .upload-drop .ud-title{font-weight:600;font-size:14px;color:var(--ink-2);}
.mk-designer .upload-drop .ud-sub{font-size:12px;margin-top:3px;}
/* the input carries [hidden], but the theme sets a display on inputs and an
   author rule beats the UA [hidden] rule — keep the native picker out of sight */
.mk-designer .upload-drop .up-input{display:none!important;}
.mk-designer .uploads-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;}
.mk-designer .upload-thumb{aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;background:var(--chip);cursor:pointer;position:relative;border:1px solid var(--line);}
.mk-designer .upload-thumb img{width:100%;height:100%;object-fit:cover;}
.mk-designer .upload-thumb:hover{outline:2px solid var(--teal);}

/* fields + controls */
.mk-designer .field{padding:13px 16px;border-bottom:1px solid var(--line-2);}
.mk-designer .field-row{display:flex;gap:10px;}
.mk-designer .field-row > .field-col{flex:1;}
.mk-designer .field-label{font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;}
.mk-designer .field-label .fl-val{color:var(--faint);font-weight:500;text-transform:none;letter-spacing:0;}
.mk-designer .txt-input,.mk-designer .num-input,.mk-designer select.sel-input{width:100%;border:1px solid var(--line);border-radius:7px;padding:8px 10px;font-size:13.5px;color:var(--ink-2);background:#fff;transition:.12s;font-family:inherit;}
.mk-designer .txt-input:focus,.mk-designer .num-input:focus,.mk-designer select.sel-input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--sel-soft);}
.mk-designer textarea.txt-input{resize:vertical;min-height:64px;line-height:1.4;}
.mk-designer select.sel-input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;}
.mk-designer .range{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;background:var(--line);outline:none;}
.mk-designer .range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:1.5px solid var(--teal);box-shadow:var(--shadow-sm);cursor:pointer;}
.mk-designer .range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:1.5px solid var(--teal);cursor:pointer;}
.mk-designer .seg{display:flex;background:var(--chip);border-radius:8px;padding:3px;gap:2px;}
.mk-designer .seg button{flex:1;display:flex;align-items:center;justify-content:center;padding:7px;border-radius:6px;color:var(--muted);transition:.12s;font-size:13px;}
.mk-designer .seg button svg{width:16px;height:16px;}
.mk-designer .seg button.on{background:#fff;color:var(--teal);box-shadow:var(--shadow-sm);}
.mk-designer .color-row{display:flex;align-items:center;gap:10px;}
.mk-designer .color-chip{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);cursor:pointer;flex-shrink:0;position:relative;overflow:hidden;}
.mk-designer .color-chip input{position:absolute;inset:-6px;width:150%;height:150%;cursor:pointer;border:none;padding:0;background:none;}
.mk-designer .color-presets{display:flex;flex-wrap:wrap;gap:6px;flex:1;}
/* These are <button>s, so they pick up the theme's button padding (6.4px 16px).
   With box-sizing:border-box that forced them 34px wide against a 22px height,
   so border-radius:50% drew ovals. Reset the padding and stop flex resizing them. */
.mk-designer .color-presets .cp{flex:0 0 22px;width:22px;height:22px;padding:0;min-width:0;box-sizing:border-box;appearance:none;-webkit-appearance:none;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;transition:transform .1s;}
.mk-designer .color-presets .cp:hover{transform:scale(1.15);}
.mk-designer .color-presets .cp.on{box-shadow:0 0 0 2px var(--sel);}
.mk-designer .mini-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.mk-designer .mini-btn{display:flex;align-items:center;justify-content:center;padding:8px;border-radius:7px;background:var(--chip);color:var(--ink-2);transition:.12s;}
.mk-designer .mini-btn:hover{background:var(--sel-soft);color:var(--teal-deep);}
.mk-designer .mini-btn.on-style{background:var(--sel-soft);color:var(--teal-deep);}
.mk-designer .mini-btn svg{width:16px;height:16px;}

/* layers */
.mk-designer .layers{padding:10px;}
.mk-designer .layers-empty{padding:30px 18px;text-align:center;color:var(--faint);font-size:13px;}
.mk-designer .layer{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;cursor:pointer;transition:background .1s;margin-bottom:3px;user-select:none;}
.mk-designer .layer:hover{background:var(--chip);}
.mk-designer .layer.on{background:var(--sel-soft);}
.mk-designer .layer.dragging{opacity:.5;}
.mk-designer .layer.drop-before{box-shadow:inset 0 2px 0 var(--teal);}
.mk-designer .layer.drop-after{box-shadow:inset 0 -2px 0 var(--teal);}
.mk-designer .layer .l-grip{color:var(--faint);display:flex;cursor:grab;touch-action:none;}
.mk-designer .layer .l-grip svg{width:13px;height:16px;}
.mk-designer .layer .l-thumb{width:30px;height:30px;border-radius:6px;background:var(--chip);border:1px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--muted);}
.mk-designer .layer .l-thumb img{width:100%;height:100%;object-fit:cover;}
.mk-designer .layer .l-thumb svg{width:15px;height:15px;}
.mk-designer .layer .l-name{flex:1;font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mk-designer .layer.hidden-el .l-name,.mk-designer .layer.hidden-el .l-thumb{opacity:.45;}
.mk-designer .layer .l-act{width:24px;height:24px;border-radius:5px;color:var(--faint);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mk-designer .layer .l-act:hover{background:rgba(0,0,0,.06);color:var(--ink-2);}
.mk-designer .layer .l-act svg{width:15px;height:15px;}
.mk-designer .layer .l-act.active{color:var(--teal);}

@media (max-width:1080px){ .mk-designer .designer-panel{height:560px;} }