/* ─────────────────────────────────────────
   Ninkd Design Editor
   ───────────────────────────────────────── */

.ninkd-designer-wrap {
    margin: 16px 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

/* ── Toolbar ── */
.ninkd-de-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    flex-wrap: wrap;
}

.ninkd-de-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
    line-height: 1;
    transition: background .15s, border-color .15s;
}
.ninkd-de-btn:hover       { background: #f0f0f0; border-color: #999; }
.ninkd-de-btn:disabled    { opacity: .5; cursor: default; }
.ninkd-de-btn.active      { background: #2271b1; color: #fff; border-color: #2271b1; }
.ninkd-de-btn--primary    { background: #2271b1; color: #fff; border-color: #2271b1; }
.ninkd-de-btn--primary:hover { background: #135e96; }
.ninkd-de-btn--saved      { background: #2d7a2d !important; }
.ninkd-de-btn--danger     { color: #b32d2e; border-color: #b32d2e; }
.ninkd-de-btn--danger:hover { background: #b32d2e; color: #fff; }
.ninkd-de-btn--sm         { padding: 4px 8px; font-size: 12px; }

.ninkd-de-btn svg {
    width: 16px; height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

.ninkd-de-text-count {
    font-size: 12px;
    color: #888;
    margin-left: 4px;
}

/* ── Body ── */
.ninkd-de-body {
    display: flex;
    gap: 0;
}

/* ── Stage wrap ── */
.ninkd-de-stage-wrap {
    flex: 0 0 auto;
    padding: 16px;
    background: #e8e8e8;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ninkd-de-stage {
    position: relative;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.15);
    overflow: hidden;
    cursor: crosshair;
}

/* ── Image ── */
.ninkd-de-image {
    position: absolute;
    display: block;
    cursor: move;
    user-select: none;
    -webkit-user-drag: none;
}

/* ── Resize handles ── */
.ninkd-de-handles {
    position: absolute;
    pointer-events: none;
    border: 2px solid #2271b1;
    box-sizing: border-box;
}

.ninkd-de-handle {
    position: absolute;
    width: 10px; height: 10px;
    background: #fff;
    border: 2px solid #2271b1;
    border-radius: 2px;
    pointer-events: all;
    transform: translate(-50%, -50%);
}
.ninkd-de-handle[data-dir="nw"] { top: 0;   left: 0;   cursor: nw-resize; }
.ninkd-de-handle[data-dir="n"]  { top: 0;   left: 50%; cursor: n-resize; }
.ninkd-de-handle[data-dir="ne"] { top: 0;   left: 100%;cursor: ne-resize; }
.ninkd-de-handle[data-dir="e"]  { top: 50%; left: 100%;cursor: e-resize; }
.ninkd-de-handle[data-dir="se"] { top: 100%;left: 100%;cursor: se-resize; }
.ninkd-de-handle[data-dir="s"]  { top: 100%;left: 50%; cursor: s-resize; }
.ninkd-de-handle[data-dir="sw"] { top: 100%;left: 0;   cursor: sw-resize; }
.ninkd-de-handle[data-dir="w"]  { top: 50%; left: 0;   cursor: w-resize; }

/* ── Crop overlay ── */
.ninkd-crop-overlay {
    position: absolute;
    inset: 0;
    cursor: default;
}

.ninkd-crop-box {
    position: absolute;
    border: 2px dashed #fff;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.55);
    cursor: move;
    box-sizing: border-box;
}

.ninkd-crop-handle {
    position: absolute;
    width: 12px; height: 12px;
    background: #fff;
    border: 2px solid #2271b1;
    border-radius: 2px;
    transform: translate(-50%, -50%);
}
.ninkd-crop-handle[data-dir="nw"] { top: 0;    left: 0;    cursor: nw-resize; }
.ninkd-crop-handle[data-dir="ne"] { top: 0;    left: 100%; cursor: ne-resize; }
.ninkd-crop-handle[data-dir="se"] { top: 100%; left: 100%; cursor: se-resize; }
.ninkd-crop-handle[data-dir="sw"] { top: 100%; left: 0;    cursor: sw-resize; }

.ninkd-crop-label {
    position: absolute;
    top: -26px; left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.7);
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
}

/* ── Crop actions ── */
.ninkd-crop-actions {
    display: flex;
    gap: 8px;
}

/* ── Text layers ── */
.ninkd-text-layers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ninkd-text-el {
    pointer-events: all;
    cursor: move;
    padding: 2px 4px;
    border: 2px solid transparent;
    border-radius: 2px;
}
.ninkd-text-el:hover        { border-color: rgba(34,113,177,.4); }
.ninkd-text-el.ninkd-text-selected { border-color: #2271b1; background: rgba(34,113,177,.06); }

/* ── Properties panel ── */
.ninkd-de-panel {
    flex: 1;
    min-width: 200px;
    max-width: 240px;
    padding: 16px;
    border-left: 1px solid #e0e0e0;
    overflow-y: auto;
    background: #fafafa;
}

.ninkd-de-panel h4 {
    margin: 0 0 12px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #555;
    border-bottom: 1px solid #eee;
    padding-bottom: 6px;
}

.ninkd-de-panel label {
    display: block;
    font-size: 12px;
    color: #555;
    margin-bottom: 8px;
}

.ninkd-de-input {
    display: block;
    width: 100%;
    margin-top: 3px;
    padding: 5px 7px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    box-sizing: border-box;
}

input[type="color"].ninkd-de-input {
    padding: 2px;
    height: 34px;
    cursor: pointer;
}

.ninkd-de-row {
    display: flex;
    gap: 8px;
}

.ninkd-de-panel-image,
.ninkd-de-panel-text {
    margin-bottom: 16px;
}

/* Responsive: collapse panel below stage on small screens */
@media (max-width: 640px) {
    .ninkd-de-body       { flex-direction: column; }
    .ninkd-de-panel      { max-width: 100%; border-left: none; border-top: 1px solid #e0e0e0; }
    .ninkd-de-stage-wrap { padding: 8px; }
}