/* Collage Maker - tool-specific rules only. Shared rules stay in style.css. */

.cm-studio{grid-template-columns:264px minmax(0,1fr) 300px;grid-template-areas:"rail stage side"}
.studio .cm-rail{grid-area:rail}
.studio .cm-stagep{grid-area:stage}
.studio .cm-side{grid-area:side}

.cm-flab{font-size:.85rem;font-weight:700;margin:4px 0 7px}
.cm-achips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.cm-achip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:5px 9px;font:inherit;font-size:.84rem;font-weight:700;cursor:pointer}
.cm-achip.sel{border-color:var(--brand);background:var(--accent);color:var(--brand)}
.cm-custom{display:flex;gap:6px;align-items:center;margin:-4px 0 12px}
.cm-custom input{width:64px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);font:inherit;font-weight:600;padding:5px 7px}
.cm-lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cm-lthumb{border:1px solid var(--line);background:var(--bg-soft);border-radius:8px;padding:5px;cursor:pointer}
.cm-lthumb svg{width:100%;height:auto;display:block;fill:var(--muted);opacity:.85}
.cm-lthumb.sel{border-color:var(--brand);background:var(--accent)}
.cm-lthumb.sel svg{fill:var(--brand);opacity:1}
.cm-lname{font-size:.72rem;color:var(--muted);text-align:center;margin-top:3px;line-height:1.25}
.cm-lthumb.sel .cm-lname{color:var(--brand);font-weight:700}

.cm-addbar{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--muted);margin-bottom:12px;flex-wrap:wrap}
.cm-addbar .sp{flex:1}
.cm-stagewrap{position:relative}
.cm-canvas{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line);touch-action:none;cursor:grab}
.cm-canvas:active{cursor:grabbing}
.cm-empty{position:absolute;inset:0;border:2px dashed var(--accent-border);border-radius:12px;background:var(--bg-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;cursor:pointer}
.cm-empty .dz-ic{width:44px;height:44px;border-radius:50%;background:var(--accent);border:1px solid var(--accent-border);color:var(--brand);font-size:1.15rem;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.cm-empty .big{font-weight:800;font-size:1.02rem;margin:2px 0 4px}
.cm-empty p{margin:0;color:var(--muted);font-size:.9rem;max-width:430px}
.cm-empty.over{border-color:var(--brand);background:var(--accent)}
.cm-hint{font-size:.84rem;color:var(--muted);margin:10px 0 0}

.cm-ctl{margin-bottom:11px}
.cm-ctl-h{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:3px}
.cm-ctl-h b{font-weight:700}
.cm-ctl input[type=range]{width:100%;accent-color:var(--brand);margin:0}
.cm-swrow{display:flex;gap:8px;margin-bottom:4px;align-items:center}
.cm-sw{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);cursor:pointer;flex:none}
.cm-sw.sel{outline:2px solid var(--brand);outline-offset:2px}
.cm-sw-custom{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg-soft);color:var(--brand);font-weight:800}
.cm-sw-custom input{position:absolute;inset:0;opacity:0;cursor:pointer}
.cm-sep{border-top:1px solid var(--line);margin:13px 0}
.cm-fchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.cm-fchip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:5px 10px;font:inherit;font-size:.84rem;font-weight:700;cursor:pointer}
.cm-fchip.sel{border-color:var(--brand);background:var(--accent);color:var(--brand)}
.cm-pad{display:flex;gap:6px;align-items:center;margin-bottom:11px}
.cm-pad .mini-btn{min-width:36px;text-align:center}
.cm-btnrow{display:flex;gap:7px;flex-wrap:wrap}
.cm-exrow{display:flex;gap:8px;margin-bottom:10px}
.cm-xsel{flex:1;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:.88rem;font-weight:600;padding:7px 9px;min-width:0}
.cm-expbtn{width:100%}
.cm-status{font-size:.88rem;margin:10px 0 0;min-height:1.2em}
.cm-status.err{color:#b3261e}
[data-theme="dark"] .cm-status.err{color:#ff9d94}
.cm-result{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.cm-result .rlab{font-weight:800;font-size:.92rem;margin:0 0 8px}
.cm-dl{width:100%;text-align:center;text-decoration:none}
.cm-cnt{border-top:1px solid var(--line);padding-top:10px}
.cm-note{font-size:.84rem;color:var(--muted);margin:10px 0 0}
.cm-facts{grid-column:span 4;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cm-facts .fact b{display:block;font-size:.92rem;margin-bottom:2px}
.cm-facts .fact span{font-size:.86rem;color:var(--muted)}

@media (max-width:900px){
  .cm-studio{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "rail" "side"}
  .cm-facts{grid-template-columns:1fr}
  .cm-lgrid{grid-template-columns:repeat(4,1fr)}
}

.cm-x{position:absolute;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.1rem;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 4px rgba(13,21,38,.2);z-index:3;padding:0}
.cm-x:hover{border-color:#b3261e;color:#b3261e}

/* custom canvas mode */
.cm-mode{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:2px 0 14px}
.cm-mode button{flex:1;padding:8px 4px;font:inherit;font-size:.84rem;font-weight:700;background:var(--bg-soft);color:var(--muted);border:0;cursor:pointer}
.cm-mode button.sel{background:var(--brand);color:#fff}
.cm-shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cm-shape-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 2px 7px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:.72rem;font-weight:600;cursor:pointer}
.cm-shape-btn:hover{border-color:var(--brand)}
.cm-shape-btn svg{width:26px;height:26px;stroke:var(--brand);fill:none;stroke-width:1.7}
.cm-bgrow{display:flex;gap:8px;align-items:center;margin-top:8px}
.cm-sw-img{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg-soft);color:var(--brand);padding:0}
.cm-sw-img svg{width:17px;height:17px}
.cm-sw-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cm-bgrow-t{font-size:.84rem;color:var(--muted);font-weight:600}
.cm-bgrow .mini-btn{margin-left:auto}
.cm-addshape{width:100%;margin-top:10px}