/* Map Thumbnail Lab — a real canvas-based thumbnail composer. Free/Premium
   differ only in template count, layer cap, export scale and the watermark —
   never in whether the tool works at all. */

.tl-app{ display:grid; grid-template-columns:260px 1fr 280px; gap:16px; align-items:start; }
.tl-panel{ background:var(--bg-1); border:1px solid var(--border); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:16px; max-height:calc(100vh - 260px); overflow-y:auto; }
.tl-section h4{ font-family:var(--font-display); font-size:13px; margin:0 0 8px; color:var(--text-1); text-transform:uppercase; letter-spacing:.4px; }

.tl-size-grid{ display:flex; flex-direction:column; gap:6px; }
.tl-size-btn{ display:flex; justify-content:space-between; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg-0); color:var(--text-1); cursor:pointer; font-size:12px; }
.tl-size-btn.active{ border-color:var(--accent); color:var(--text-0); background:rgba(var(--accent-rgb),.08); }
.tl-size-btn:disabled{ opacity:.4; cursor:not-allowed; }

.tl-template-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.tl-template{ aspect-ratio:16/9; border-radius:7px; border:2px solid var(--border); cursor:pointer; position:relative; overflow:hidden; }
.tl-template.active{ border-color:var(--accent); }
.tl-template canvas{ width:100%; height:100%; display:block; }
.tl-template .lock{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); font-size:14px; }

.tl-upload-btn{ display:block; text-align:center; padding:8px; border-radius:8px; border:1px dashed var(--border-hi); font-size:11.5px; color:var(--text-1); cursor:pointer; }
.tl-upload-btn:hover{ border-color:var(--accent); color:var(--text-0); }

.tl-add-row{ display:flex; gap:6px; margin-bottom:6px; flex-wrap:wrap; }
.tl-add-row button{ flex:1 1 auto; }
.tl-add-row button:disabled{ opacity:.4; cursor:not-allowed; }

.tl-canvas-wrap{ display:flex; align-items:center; justify-content:center; background:repeating-conic-gradient(#20242e 0% 25%, #181b23 0% 50%) 50% / 20px 20px; border-radius:12px; border:1px solid var(--border); padding:16px; min-height:400px; }
#tl-canvas{ max-width:100%; max-height:calc(100vh - 300px); box-shadow:0 10px 40px rgba(0,0,0,.5); cursor:default; }

.tl-layers-list{ display:flex; flex-direction:column; gap:4px; }
.tl-layer-row{ display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:7px; border:1px solid var(--border); background:var(--bg-0); font-size:12px; cursor:pointer; }
.tl-layer-row.selected{ border-color:var(--accent); background:rgba(var(--accent-rgb),.08); }
.tl-layer-row .grow{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tl-layer-row button{ background:none; border:none; color:var(--text-2); cursor:pointer; font-size:12px; padding:2px 4px; }
.tl-layer-row button:hover{ color:var(--text-0); }
.tl-empty-note{ color:var(--text-2); font-size:11.5px; padding:8px 0; }

#tl-props label{ display:block; font-size:11px; color:var(--text-1); margin:8px 0 4px; }
#tl-props input, #tl-props select{ width:100%; padding:6px 8px; border-radius:7px; border:1px solid var(--border); background:var(--bg-0); color:var(--text-0); font-size:12px; }
#tl-props input[type=color]{ padding:2px; height:30px; }
#tl-props .row2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }

@media (max-width:1000px){
  .tl-app{ grid-template-columns:1fr; }
  .tl-panel{ max-height:none; }
}