/* ===== Custom Make (custom.php, v74) - experience-center layout ===== */
.cm-sec { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }
.cm-sec:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.cm-sec-head {
    display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
    font-size: 12.5px; font-weight: 700;
}
.cm-mini-step {
    width: 21px; height: 21px; border-radius: 7px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; color: var(--primary);
    background: rgba(124,58,237,.14); border: 1px solid rgba(124,58,237,.3);
}

/* Reference image strip */
.cm-refs { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-ref, .cm-ref-add {
    width: 76px; height: 76px; border-radius: 12px; overflow: hidden; position: relative;
}
.cm-ref { border: 1px solid var(--border); }
.cm-ref img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-ref video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.cm-ref-x {
    position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
    border: 0; border-radius: 50%; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(12,12,20,.72); color: #fff; font-size: 10px;
    opacity: 0; transition: opacity .15s ease;
}
.cm-ref:hover .cm-ref-x { opacity: 1; }
.cm-ref-x:hover { background: #e5484d; }
.cm-ref-add {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    border: 1.5px dashed rgba(255,255,255,.22); cursor: pointer; color: var(--text-3);
    background: rgba(255,255,255,.02); transition: border-color .15s ease, color .15s ease;
}
.cm-ref-add i { font-size: 17px; }
.cm-ref-add b { font-size: 11.5px; color: var(--text-2); font-weight: 600; }
.cm-ref-add em { font-style: normal; font-size: 9.5px; opacity: .8; }
.cm-ref-add:hover { border-color: rgba(139,92,246,.6); color: var(--text-2); }
.cm-ref-add.drag { border-color: rgba(139,92,246,.85); background: rgba(139,92,246,.08); }
.cm-ref-add.off { opacity: .38; cursor: default; }
.cm-ref-add.busy .cm-ref-login, .cm-ref-add.busy > i, .cm-ref-add.busy > b, .cm-ref-add.busy > em { visibility: hidden; }
.cm-ref-busy {
    position: absolute; inset: 0; display: none;
    align-items: center; justify-content: center;
    background: rgba(12,12,20,.55);
}
.cm-ref-add.busy .cm-ref-busy { display: flex; }
.cm-ref-busy .spin { animation: crSpin .9s linear infinite; display: inline-block; font-size: 16px; }
.cm-ref-hint { margin-top: 7px; }

/* Prompt */
.cm-prompt {
    min-height: 158px; resize: vertical; line-height: 1.55; font-size: 13.5px;
    background: rgba(255,255,255,.03); border-radius: 12px;
}
.cm-prompt:focus { border-color: rgba(139,92,246,.55); box-shadow: 0 0 0 3px rgba(139,92,246,.12); }
.cm-prompt-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; row-gap: 4px; margin-top: 5px; font-size: 11px; color: var(--text-3); flex-wrap: wrap; }
.cm-foot-left { display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; row-gap: 4px; }
.cm-enhance-hint { font-size: 11px; color: var(--text-3); }
/* AI keyword enhance button (Custom Make): expand a rough idea into engine keywords.
   Solid brand gradient (was a dim ghost pill) so the button stands out and gets used. */
.cm-enhance-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px; border-radius: 999px; cursor: pointer;
    font-size: 12px; font-weight: 700; color: #fff;
    background: var(--grad); border: 1px solid rgba(139,92,246,.55);
    box-shadow: 0 3px 14px rgba(124,58,237,.35);
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cm-enhance-btn:hover { background: var(--grad-hover); box-shadow: 0 4px 20px rgba(124,58,237,.5); transform: translateY(-1px); }
.cm-enhance-btn:disabled { opacity: .65; cursor: wait; transform: none; }
.cm-enhance-btn .spin { animation: crSpin .9s linear infinite; display: inline-block; }