/* TalkShow Thumbnail Maker */

/* ---------- Designer (admin) ---------- */
.tsm-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) 340px;
  gap:20px;
  align-items:start;
}
#tsm_canvas{
  width:100%;
  max-width:900px;
  height:auto;
  border:1px solid #c3c4c7;
  border-radius:4px;
  background:#1c1c1e;
  cursor:crosshair;
  touch-action:none;
}
.tsm-selinfo{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:8px;
}
.tsm-selinfo label{ display:flex; gap:4px; align-items:center; }
.tsm-selinfo input{ width:72px; }
.tsm-quad-fields{ display:grid; gap:4px; width:100%; margin-top:4px; }
.tsm-quad-row{ display:flex; gap:8px; align-items:center; }
.tsm-quad-lab{ min-width:84px; font-size:12px; color:#50575e; }
.tsm-quad-row input{ width:70px; }
.tsm-fieldset{
  border:1px solid #c3c4c7;
  border-radius:4px;
  padding:10px 12px;
  margin-bottom:12px;
  background:#fff;
}
.tsm-legend{ font-weight:600; margin-bottom:8px; }
.tsm-fieldset label{
  display:inline-flex;
  gap:6px;
  align-items:center;
  margin:0 10px 8px 0;
}
.tsm-fieldset input[type=number]{ width:76px; }
#tsm_slot_list p{ margin:6px 0; display:flex; gap:6px; align-items:center; }

@media (max-width:1100px){
  .tsm-grid{ grid-template-columns:1fr; }
}

/* ---------- Generator (front + admin) — branded UI ---------- */
.tsm-gen{
  --tsm-brand:#d12b3d;
  --tsm-brand-dark:#8f1d2a;
  --tsm-ink:#1d1d1f;
  --tsm-muted:#6b7075;
  --tsm-line:#e6e7ea;
  --tsm-bg:#f4f5f7;
  --tsm-card:#ffffff;
  --tsm-radius:14px;
  max-width:1200px;
  margin:0 auto;
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--tsm-ink);
  -webkit-font-smoothing:antialiased;
}
.tsm-gen *{ box-sizing:border-box; }

/* header */
.tsm-gen-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
  padding:16px 18px;
  background:linear-gradient(100deg,var(--tsm-brand-dark),var(--tsm-brand));
  border-radius:var(--tsm-radius);
  margin-bottom:18px;
  box-shadow:0 6px 22px rgba(143,29,42,.22);
}
.tsm-gen-title{ color:#fff; font-weight:800; font-size:20px; letter-spacing:.2px; }
.tsm-gen-tpl{ display:flex; align-items:center; gap:8px; color:#fff; font-weight:600; font-size:13px; }
.tsm-gen-tpl select{
  border:0; border-radius:10px; padding:9px 12px; min-width:240px;
  font-size:14px; font-family:inherit; background:#fff; color:var(--tsm-ink); cursor:pointer;
}

/* layout */
.tsm-gen-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:22px; align-items:start;
}

/* stage */
.tsm-gen-stage{ position:sticky; top:16px; }
.tsm-canvas-wrap{
  padding:10px; background:var(--tsm-card); border:1px solid var(--tsm-line);
  border-radius:var(--tsm-radius); box-shadow:0 4px 18px rgba(20,20,30,.06);
}
#tsmg_canvas{
  width:100%; height:auto; display:block; border-radius:8px;
  background:#111; touch-action:none; cursor:grab;
}
#tsmg_canvas:active{ cursor:grabbing; }
.tsm-gen-zoom{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px;
  padding:8px 12px; background:var(--tsm-card); border:1px solid var(--tsm-line); border-radius:999px;
}
.tsm-gen-zoom > span:first-child{ font-weight:700; font-size:13px; }
.tsm-gen-zoom input[type=range]{ flex:1; min-width:120px; accent-color:var(--tsm-brand); }
.tsm-zoom-btn{
  width:34px; height:34px; border:1px solid var(--tsm-line); background:#fff; color:var(--tsm-ink);
  border-radius:50%; font-size:20px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.tsm-zoom-btn:hover{ border-color:var(--tsm-brand); color:var(--tsm-brand); }

/* controls column */
.tsm-gen-controls{ display:grid; gap:14px; }
.tsm-sec{
  background:var(--tsm-card); border:1px solid var(--tsm-line); border-radius:var(--tsm-radius);
  padding:16px; box-shadow:0 2px 10px rgba(20,20,30,.04);
}
.tsm-sec-h{
  display:flex; align-items:center; gap:8px;
  font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--tsm-ink); margin-bottom:12px;
}
.tsm-step{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--tsm-brand); color:#fff; font-size:12px; font-weight:800;
}
.tsm-optional{ font-size:11px; color:var(--tsm-muted); font-weight:600; text-transform:none; letter-spacing:0; }
.tsm-hint{ margin:8px 0 0; font-size:12px; color:var(--tsm-muted); line-height:1.5; }

/* inputs */
.tsm-gen textarea,
.tsm-gen input[type=text],
.tsm-gen input[type=number],
.tsm-gen input[type=search],
.tsm-gen select{
  font-family:inherit; font-size:14px; color:var(--tsm-ink);
  border:1px solid var(--tsm-line); border-radius:10px; background:#fff; padding:9px 11px;
}
.tsm-gen textarea{ width:100%; resize:vertical; }
.tsm-gen #tsmg_ep{ width:100%; letter-spacing:1px; }
.tsm-gen textarea:focus,
.tsm-gen input:focus,
.tsm-gen select:focus{ outline:none; border-color:var(--tsm-brand); box-shadow:0 0 0 3px rgba(209,43,61,.14); }

/* inline styling row */
.tsm-gen-inline{ display:flex; gap:10px 14px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.tsm-gen-inline label{ display:inline-flex; gap:6px; align-items:center; font-size:12px; font-weight:600; color:var(--tsm-muted); }
.tsm-gen-inline input[type=number]{ width:66px; padding:6px 8px; }
.tsm-gen-inline select{ padding:6px 8px; }
.tsm-gen-inline input[type=color]{
  width:34px; height:30px; padding:0; border:1px solid var(--tsm-line); border-radius:8px; background:#fff; cursor:pointer;
}
.tsm-check{ color:var(--tsm-ink) !important; }
.tsm-check input{ accent-color:var(--tsm-brand); }

/* photo slot rows */
.tsm-gen-slotrow{
  display:flex; gap:10px; align-items:center;
  padding:10px 12px; margin-bottom:8px;
  border:1px solid var(--tsm-line); border-radius:10px; background:#fafafb;
}
.tsm-gen-slotrow span{ flex:1; font-weight:700; font-size:13px; }
.tsm-gen-slotrow em{
  font-style:normal; font-size:11px; font-weight:700; color:var(--tsm-muted);
  padding:3px 8px; border-radius:999px; background:#eceef1;
}
.tsm-gen-slotrow em.on{ color:#0a7d3c; background:#e3f6ea; }

/* buttons */
.tsm-gen .tsm-btn,
.tsm-gen .button{
  font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
  border-radius:10px; padding:9px 14px; border:1px solid var(--tsm-line);
  background:#fff; color:var(--tsm-ink); transition:all .15s ease; line-height:1.2;
}
.tsm-gen .button:hover{ border-color:var(--tsm-brand); color:var(--tsm-brand); }
.tsm-gen .tsm-btn-primary{
  width:100%; padding:13px 16px; font-size:15px; border:0; color:#fff;
  background:linear-gradient(100deg,var(--tsm-brand-dark),var(--tsm-brand));
  box-shadow:0 6px 16px rgba(209,43,61,.28);
}
.tsm-gen .tsm-btn-primary:hover{ filter:brightness(1.05); }
.tsm-gen .tsm-btn-primary:disabled{ opacity:.6; cursor:default; }
.tsm-gen .tsm-btn-ghost{
  flex:1; border:1.5px solid var(--tsm-brand); color:var(--tsm-brand); background:#fff;
}
.tsm-gen .tsm-btn-ghost:hover{ background:rgba(209,43,61,.06); }
.tsm-gen-slotrow .button{ padding:7px 12px; font-size:13px; }
.tsm-addbtn{
  width:100%; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
  padding:11px; border-radius:10px; color:var(--tsm-brand);
  border:1.5px dashed var(--tsm-brand); background:rgba(209,43,61,.04);
}
.tsm-addbtn:hover{ background:rgba(209,43,61,.09); }

.tsm-export{ display:grid; gap:10px; }
.tsm-gen-actionrow{ display:flex; gap:10px; flex-wrap:wrap; }

/* custom text cards */
.tsm-gen-textcard{
  border:1px solid var(--tsm-line); border-radius:12px; padding:12px;
  display:grid; gap:10px; margin-top:10px; background:#fafafb;
}
.tsm-gen-textcard.sel{ border-color:var(--tsm-brand); box-shadow:0 0 0 3px rgba(209,43,61,.14); background:#fff; }
.tsm-gen-textcard textarea{ width:100%; }
.tsm-gen-textactions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.tsm-gen .button-link-delete{
  border:0; background:transparent; color:var(--tsm-brand); font-weight:700; cursor:pointer;
  font-family:inherit; font-size:13px; padding:6px 4px;
}
.tsm-gen .button-link-delete:hover{ text-decoration:underline; }

@media (max-width:900px){
  .tsm-gen-grid{ grid-template-columns:1fr; }
  .tsm-gen-stage{ position:static; }
}

/* ---------- Save / share result ---------- */
.tsm-gen-result{
  margin-top:4px; padding:14px;
  border:1px solid var(--tsm-line); border-radius:12px; background:#f2fbf5;
}
.tsm-gen-ok{ margin:0 0 10px; font-weight:800; color:#0a7d3c; }
.tsm-gen-linkrow{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tsm-gen-linkinput{
  flex:1; min-width:180px; padding:9px 11px; border:1px solid var(--tsm-line);
  border-radius:10px; background:#fff; font-family:inherit; font-size:13px;
}
.tsm-gen-sharerow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.tsm-gen-sharerow a.button,
.tsm-gen-sharerow button{ text-decoration:none; }

/* ---------- Gallery ---------- */
.tsm-gallery{ max-width:1100px; }
.tsm-gal-search{
  width:100%; max-width:420px; padding:8px 10px;
  border:1px solid #c3c4c7; border-radius:6px; margin:8px 0 16px;
}
.tsm-gal-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}
.tsm-gal-note{ color:#50575e; }
.tsm-gal-card{
  border:1px solid #dcdcde; border-radius:8px; overflow:hidden;
  background:#fff; display:flex; flex-direction:column;
}
.tsm-gal-card img{ width:100%; height:auto; display:block; background:#111; }
.tsm-gal-meta{ padding:8px 10px; display:grid; gap:2px; }
.tsm-gal-meta strong{ font-size:13px; line-height:1.3; }
.tsm-gal-meta span{ font-size:12px; color:#50575e; }
.tsm-gal-actions{ display:flex; gap:6px; flex-wrap:wrap; padding:0 10px 10px; }
.tsm-gal-actions .button, .tsm-gal-actions .button-link-delete{ cursor:pointer; }

/* ---------- Restore bar + footer ---------- */
.tsm-restorebar{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  background:#eef6ff; border:1px solid #cfe4fb; color:#0b3a66;
  border-radius:10px; padding:10px 14px; margin-bottom:14px; font-size:13px;
}
.tsm-restore-clear{
  margin-left:auto; cursor:pointer; font-family:inherit; font-weight:700; font-size:13px;
  border:1px solid #cfe4fb; background:#fff; color:#0b3a66; border-radius:8px; padding:6px 10px;
}
.tsm-restore-clear:hover{ border-color:#0b3a66; }
.tsm-gen-footer{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--tsm-line);
  font-size:13px; color:var(--tsm-muted);
}
.tsm-gen-footer a{ color:var(--tsm-muted); text-decoration:none; }
.tsm-gen-footer a:hover{ color:var(--tsm-brand); }
.tsm-foot-logo{ height:28px; width:auto; }
.tsm-foot-credit{ margin-left:auto; }

/* ---------- URL auto-fill ---------- */
.tsm-url-row{ display:flex; gap:8px; align-items:center; }
.tsm-url-row input{ flex:1; min-width:0; }
.tsm-url-result{
  margin-top:10px; padding:10px 12px;
  border:1px solid var(--tsm-line); border-radius:10px; background:#f2fbf5;
}

/* ---------- Multi-platform export ---------- */
.tsm-multi{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--tsm-line); }
.tsm-multi-h{ font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.tsm-size-list{ display:grid; gap:6px; margin-bottom:10px; }
.tsm-size-item{ display:flex; gap:8px; align-items:center; font-size:13px; font-weight:400; }
.tsm-size-item input{ accent-color:var(--tsm-brand); }

/* ---------- Advanced text controls ---------- */
.tsm-adv{ margin-top:6px; padding-top:6px; border-top:1px dashed var(--tsm-line); opacity:.95; }
.tsm-adv label{ font-size:11px; }
.tsm-adv input[type="number"]{ width:56px; }

/* ---------- Create-from-URL result panel ---------- */
.tsm-url-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.tsm-url-badge{ background:var(--tsm-brand,#d12b3d); color:#fff; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:.5px; }
.tsm-url-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.tsm-url-datelang{ font-size:13px; margin:6px 0; display:flex; gap:12px; align-items:center; }
.tsm-url-datelang label{ display:inline-flex; align-items:center; gap:4px; }
.tsm-url-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.tsm-chip{ cursor:pointer; font-family:inherit; font-size:12px; font-weight:600; border:1px solid var(--tsm-line,#d9d9e3); background:#fff; color:var(--tsm-ink,#1a1a2e); border-radius:20px; padding:5px 12px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tsm-chip:hover{ border-color:var(--tsm-brand,#d12b3d); color:var(--tsm-brand,#d12b3d); }

/* ---------- Engine-2: canvas editing + style panel ---------- */
.tsm-gen2 #tsmg2_canvas{ cursor:crosshair; touch-action:none; }
.tsm-style{ border:1px solid var(--tsm-line,#d9d9e3); border-radius:12px; padding:12px; margin-bottom:14px; background:rgba(0,0,0,0.02); }
.tsm-style-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin:8px 0; }
.tsm-ctl{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; justify-content:space-between; }
.tsm-ctl input[type=range]{ flex:1; min-width:0; }
.tsm-ctl .tsm-style-text{ flex:1; min-width:0; width:100%; resize:vertical; font:inherit; padding:6px 8px; border:1px solid var(--tsm-line,#d9d9e3); border-radius:8px; }
.tsm-style > .tsm-ctl{ margin-bottom:8px; }
.tsm-ctl select, .tsm-ctl input[type=color]{ flex:0 0 auto; }
@media (max-width:640px){ .tsm-style-grid{ grid-template-columns:1fr; } }

/* Engine-2 multi-size export list */
.tsm-multisize{ margin:10px 0; }
.tsm-multisize summary{ cursor:pointer; font-weight:600; font-size:13px; }
.tsm-size-list{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.tsm-size-item{ font-size:13px; display:flex; align-items:center; gap:8px; }
#tsmg2_savebar{ margin-top:12px; display:flex; align-items:center; gap:10px; }

/* ---------- Element Manager (admin) ---------- */
.tsm-el-root{ font-size:13px; }
/* app-shell: header + 3 columns (layers | canvas | properties) */
.tsm-shell{ background:#f6f7f7; border:1px solid #dcdcde; border-radius:8px; overflow:hidden; }
.tsm-shell-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:10px 14px; background:#1d2327; color:#fff; }
.tsm-shell-title{ font-weight:800; font-size:14px; letter-spacing:.02em; }
.tsm-shell-tools{ display:flex; gap:14px; flex-wrap:wrap; }
.tsm-shell-tools label{ display:flex; flex-direction:column; gap:3px; font-size:11px; font-weight:600; color:#c3c4c7; }
.tsm-shell-tools select{ min-width:190px; }
.tsm-shell-hint{ margin:8px 14px 0 !important; color:#646970; }
.tsm-shell-body{ display:grid; grid-template-columns:260px minmax(0,1fr) 330px; gap:14px; align-items:start; padding:14px; }
.tsm-shell-toolbar{ padding:8px 14px 0; }
.tsm-shell-toolbar .button{ font-size:12px; }
.tsm-shell-body.tsm-left-collapsed{ grid-template-columns: minmax(0,1fr) 330px; }
.tsm-shell-body.tsm-left-collapsed .tsm-shell-left{ display:none; }
.tsm-shell-left,.tsm-shell-right{ background:#fff; border:1px solid #dcdcde; border-radius:8px; padding:12px; position:sticky; top:40px; max-height:calc(100vh - 130px); overflow:auto; }
.tsm-shell-mid{ background:#111; border:1px solid #000; border-radius:8px; padding:12px; display:flex; align-items:flex-start; justify-content:center; min-width:0; }
.tsm-shell-mid canvas{ max-width:100%; height:auto; background:#111; border-radius:4px; cursor:crosshair; }
.tsm-el-h-note{ font-weight:600; text-transform:none; letter-spacing:0; color:#8a8a8a; font-size:10px; margin-left:6px; }
.tsm-el-h{ font-weight:700; margin-bottom:8px; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:#555; }
.tsm-el-layers{ display:flex; flex-direction:column; gap:4px; max-height:320px; overflow:auto; }
.tsm-el-layer{ display:flex; align-items:center; gap:2px; border:1px solid #e5e5ee; border-radius:6px; padding:2px 4px; background:#fafafc; }
.tsm-el-layer.sel{ border-color:#d12b3d; background:#fff5f6; }
.tsm-el-lname{ flex:1; text-align:left; background:none; border:none; cursor:pointer; font-weight:600; padding:4px 2px; display:flex; align-items:center; gap:6px; min-width:0; }
.tsm-el-lname:hover{ color:#d12b3d; }
.tsm-el-badges{ display:inline-flex; gap:3px; margin-left:auto; }
.tsm-el-badge{ font-size:9px; font-weight:700; text-transform:uppercase; padding:1px 5px; border-radius:10px; color:#fff; }
.tsm-el-badge.b-src{ background:#5a6b7b; }
.tsm-el-badge.b-pub{ background:#2b8a3e; }
.tsm-el-badge.b-adm{ background:#c92a2a; }
.tsm-el-mini{ border:1px solid #d9d9e3; background:#fff; border-radius:5px; width:24px; height:24px; line-height:1; cursor:pointer; font-size:11px; padding:0; }
.tsm-el-mini:hover{ background:#f0f0f5; }
.tsm-el-mini.danger:hover{ background:#ffe3e3; border-color:#c92a2a; color:#c92a2a; }
.tsm-el-props{ display:flex; flex-direction:column; gap:8px; }
.tsm-el-field{ display:flex; flex-direction:column; gap:3px; font-weight:600; font-size:12px; }
.tsm-el-field input[type=text], .tsm-el-field input[type=number], .tsm-el-field select, .tsm-el-field textarea{ font:inherit; padding:5px 7px; border:1px solid #d9d9e3; border-radius:6px; width:100%; }
.tsm-el-field textarea{ resize:vertical; }
.tsm-el-inline{ display:flex; gap:10px; flex-wrap:wrap; }
.tsm-el-inline .tsm-el-field{ flex:1; min-width:90px; }
.tsm-el-seg{ display:inline-flex; border:1px solid #d9d9e3; border-radius:6px; overflow:hidden; }
.tsm-el-seg button{ border:none; background:#fff; padding:5px 8px; cursor:pointer; font-size:11px; font-weight:600; border-right:1px solid #eee; }
.tsm-el-seg button:last-child{ border-right:none; }
.tsm-el-seg button.on{ background:#d12b3d; color:#fff; }
@media (max-width:1400px){ .tsm-shell-body{ grid-template-columns:230px minmax(0,1fr) 300px; } }
@media (max-width:1100px){ .tsm-shell-body{ grid-template-columns:220px minmax(0,1fr); } .tsm-shell-right{ grid-column:1 / -1; position:static; max-height:none; } }
@media (max-width:782px){ .tsm-shell-body{ grid-template-columns:1fr; } .tsm-shell-left{ position:static; max-height:none; } .tsm-shell-tools select{ min-width:150px; } }