.prompt-container {
  position: fixed;
  bottom: 14px;
  left: 348px;
  right: 16px;
  z-index: 1000;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.prompt-card{
  width: 100%;
  max-width: 920px;
  pointer-events: auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 20px 14px;
  flex-shrink:0;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  transition:border-color .2s ease;
  backdrop-filter: blur(10px);
}

.sidebar.collapsed ~ .main .prompt-container{left:92px}

.prompt-card:hover{border-color:#2C323A}

.pc-head{
  display:flex;
  align-items:center;
  gap:10px;
}

.crumb{
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  color:#79828E;
  cursor:pointer;
  transition:color .15s ease;
}

.crumb:hover{color:var(--text-soft)}

.crumb-sep{color:#4E5560;font-size:12px;user-select:none}

.crumb.pink{color:var(--pink)}

.crumb.pink:hover{color:#FF74EA}

.pc-add{
  margin-left:auto;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border-radius:4px;
  color:var(--dim);
  transition:color .15s ease, background .15s ease;
}

.pc-add svg{width:17px;height:17px}

.pc-add:hover{color:#fff;background:rgba(255,255,255,.05)}

.pc-body{
  margin:16px 0 20px;
  font-size:15px;
  line-height:1.7;
  color:#D9DEE6;
  max-height:40vh;
  overflow-y:auto;
  overflow-wrap:break-word;
}

.pc-text{
  /* block: pusty edytor musi byc klikalny cala szerokoscia karty */
  display:block;
  min-height:1.7em;
  outline:none;
  cursor:text;
  caret-color:var(--blue);
  white-space:pre-wrap;
}

/* po wejsciu w pole podpowiedz znika — zostaje sam kursor */
.pc-text:focus:empty::before{content:none}

.pc-text:empty::before{
  content:attr(data-placeholder);
  color:var(--dim);
}

.pc-text .tag{
  text-transform:uppercase;
  display:inline;
  margin:0 2px;
  transform:none;
  cursor:text;
  padding:3px 10px;
}

.tag{
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  padding:4px 13px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  vertical-align:middle;
  transform:translateY(-1px);
  cursor:pointer;
  transition:background .15s ease;
}

.tag.purple{
  color:#B9A3FF;
  border:1px solid rgba(150,110,255,.55);
  background:rgba(139,92,246,.10);
}

.tag.purple:hover{background:rgba(139,92,246,.2)}

.tag.blue{
  color:#5FA8FF;
  border:1px solid rgba(76,159,255,.5);
  background:rgba(76,159,255,.08);
}

.tag.blue:hover{background:rgba(76,159,255,.18)}

.pc-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.pc-tools{display:flex;gap:10px}

.tool-btn{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
  border-radius:50%;
  color:var(--muted);
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}

.tool-btn svg{width:16px;height:16px}

.tool-btn:hover{border-color:var(--border-hi);color:var(--text);background:#191D23}

.pc-actions{display:flex;align-items:center;gap:10px}

.llm-btn{
  height:40px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 18px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--text);
  transition:border-color .15s ease, background .15s ease;
}

.llm-btn svg{width:15px;height:15px}

.llm-btn:hover{background:#191D23;border-color:var(--border-hi)}

.llm-btn:hover svg{filter:brightness(1.2)}

.go-btn{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
  border-radius:50%;
  color:var(--text-soft);
  transition:border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}

.go-btn svg{width:17px;height:17px}

.go-btn:hover{
  background:#1E2733;
  border-color:rgba(76,159,255,.5);
  color:var(--blue);
}

.go-btn:active{transform:scale(.94)}

.gallery{
  margin-top:13px;
  display:grid;
  grid-template-columns:repeat(var(--cols,4),1fr);
  gap:10px;
  padding-bottom:6px;
}

.tile{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--card);
  aspect-ratio:8/5;
  cursor:pointer;
  transition:transform .25s ease, border-color .25s ease, opacity .3s ease;
}

.tile:hover{
  transform:translateY(-3px);
  border-color:var(--border-hi);
  box-shadow:0 16px 36px rgba(0,0,0,.45);
}

.tile .scene{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}

.tile:hover .scene{transform:scale(1.045)}

.badge-new{
  position:absolute;
  top:12px;right:12px;
  z-index:2;
  padding:4px 11px;
  border-radius:999px;
  background:rgba(6,10,8,.6);
  border:1px solid rgba(46,229,157,.75);
  color:var(--green);
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  backdrop-filter:blur(4px);
}

.heart-chip{
  position:absolute;
  top:12px;left:12px;
  z-index:2;
  width:30px;height:30px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,12,16,.55);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  opacity:0;
  backdrop-filter:blur(4px);
  transition:opacity .2s ease, background .15s ease, transform .15s ease;
}

.heart-chip svg{width:14px;height:14px;fill:none}

.tile:hover .heart-chip{opacity:1}

.heart-chip:focus-visible{opacity:1}

.heart-chip:hover{transform:scale(1.1)}

.heart-chip.faved{
  opacity:1;
  background:#fff;
  border-color:#fff;
  color:var(--red);
}

.heart-chip.faved svg{fill:currentColor}

.tile.asset{
  display:flex;
  flex-direction:column;
}

.px-wrap{
  flex:1;
  min-height:0;
  position:relative;
  background:#000;
  overflow:hidden;
}

.px-wrap > svg{
  width:100%;height:100%;
  shape-rendering:crispEdges;
}

.px-wrap > img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}

.tile:hover .px-wrap > img{transform:scale(1.045)}

.expand-btn{
  position:absolute;
  top:10px;right:10px;
  z-index:2;
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border-radius:4px;
  color:#6B7480;
  transition:color .15s ease, background .15s ease;
}

.expand-btn svg{width:14px;height:14px}

.expand-btn:hover{color:#fff;background:rgba(255,255,255,.08)}

.asset-caption{
  padding:10px 12px 11px;
  background:var(--card);
  font-size:16px;
  font-weight:900;
  letter-spacing:.06em;
  color:#EDF1F6;
}

.lightbox{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  background:rgba(4,6,10,.9);
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease, visibility .22s;
}

.lightbox.open{
  opacity:1;
  visibility:visible;
}

.lb-wrap{
  display:flex;
  gap:14px;
  height:87vh;
  max-width:100%;
  transform:scale(.98);
  transition:transform .22s ease;
}

.lightbox.open .lb-wrap{transform:scale(1)}

.lb-stage{
  position:relative;
  height:100%;
  min-width:0;
}

.lb-stage img{
  height:100%;
  width:auto;
  max-width:calc(100vw - 300px - 14px - 24px);
  object-fit:contain;
  border-radius:10px;
  display:block;
}

.lb-close{
  position:absolute;
  top:16px;right:16px;
  width:40px;height:40px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(14,17,22,.65);
  border:1px solid rgba(255,255,255,.08);
  color:#C6CDD6;
  backdrop-filter:blur(4px);
  transition:background .15s ease, color .15s ease, transform .15s ease;
}

.lb-close svg{width:16px;height:16px}

.lb-close:hover{background:rgba(30,35,42,.9);color:#fff;transform:scale(1.06)}

.lb-side{
  width:300px;
  flex-shrink:0;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow-y:auto;
}

.lb-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px;
  flex-shrink:0;
}

.lb-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.lb-title{
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  color:var(--dim);
}

.lb-x{
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border-radius:4px;
  color:var(--dim);
  transition:color .15s ease, background .15s ease;
}

.lb-x svg{width:14px;height:14px}

.lb-x:hover{color:#fff;background:rgba(255,255,255,.06)}

.lb-label{
  margin:13px 0 5px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--dim);
}

.lb-label.lb-with-icon{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:16px;
}

.lb-label.lb-with-icon svg{width:12px;height:12px}

.lb-value{
  font-size:13px;
  color:#DCE1E8;
  word-break:break-all;
}

.lb-link{
  display:inline-block;
  font-size:13px;
  color:var(--blue);
  cursor:pointer;
  transition:filter .15s ease;
}

.lb-link:hover{text-decoration:underline;filter:brightness(1.2)}

.lb-chip-sm{
  display:inline-flex;
  padding:3px 10px;
  border-radius:4px;
  background:#1A1F26;
  border:1px solid var(--border);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  color:#AEB7C2;
}

.lb-prompt{
  display:flex;
  align-items:flex-start;
  gap:8px;
  background:#191D23;
  border:1px solid var(--border);
  border-radius:5px;
  padding:8px 8px 8px 11px;
  transition:border-color .15s ease;
}

.lb-prompt:hover{border-color:var(--border-hi)}

.lb-prompt span{
  flex:1;
  min-width:0;
  font-size:12px;
  line-height:1.55;
  color:#C6CDD6;
  /* pelna tresc promptu: zawijanie zamiast wielokropka, dlugie prompty
     po LLM dostaja przewijanie zamiast rozpychania calego panelu */
  white-space:pre-wrap;
  overflow-wrap:break-word;
  max-height:220px;
  overflow-y:auto;
}

.lb-copy{
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border-radius:4px;
  color:var(--dim);
  transition:color .15s ease, background .15s ease;
}

.lb-copy svg{width:14px;height:14px}

.lb-copy:hover{color:#fff;background:rgba(255,255,255,.06)}

.lb-copy.copied{color:var(--green)}

.lb-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.lb-tag{
  padding:4px 10px;
  border-radius:4px;
  background:#1A1F26;
  border:1px solid var(--border);
  font-size:11px;
  font-weight:600;
  color:#AEB7C2;
  cursor:default;
  transition:color .15s ease, border-color .15s ease;
}

.lb-tag:hover{color:#E6EAF0;border-color:var(--border-hi)}

.lb-addtag{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  background:#191D23;
  border:1px solid var(--border);
  border-radius:5px;
  padding:5px 5px 5px 12px;
  transition:border-color .15s ease;
}

.lb-addtag:focus-within{border-color:var(--border-hi)}

.lb-addtag input{
  flex:1;
  min-width:0;
  background:none;
  border:none;
  outline:none;
  color:var(--text);
  font-size:12px;
  font-family:inherit;
}

.lb-addtag input::placeholder{color:var(--dim)}

.lb-addtag button{
  width:26px;height:26px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:filter .15s ease, transform .15s ease;
}

.lb-addtag button svg{width:13px;height:13px}

.lb-addtag button:hover{filter:brightness(1.15)}

.lb-addtag button:active{transform:scale(.9)}

.lb-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}

.lb-action{
  width:100%;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 12px;
  border-radius:5px;
  background:#191D23;
  border:1px solid transparent;
  color:#C6CDD6;
  font-size:12px;
  font-weight:600;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}

.lb-action svg{width:15px;height:15px;color:var(--muted);transition:color .15s ease, fill .15s ease}

.lb-action:hover{background:#1E242C;border-color:var(--border-hi);color:#fff}

.lb-action:hover svg{color:#fff}

.lb-action.active{color:#FF4F86}

/* inline pole edycji Kontextem (window.prompt jest u nas martwy) */
.lb-editbox{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border-radius:5px;
  background:#14171C;
  border:1px solid var(--border-hi);
}
.lb-editbox textarea{
  width:100%;
  resize:vertical;
  min-height:56px;
  padding:8px 10px;
  border-radius:4px;
  background:#191D23;
  border:1px solid transparent;
  color:#E4E9EF;
  font-size:12px;
  font-family:inherit;
  line-height:1.5;
}
.lb-editbox textarea:focus{outline:none;border-color:var(--border-hi)}
.lb-editbox .btn-primary{
  padding:8px 12px;
  font-size:11px;
  letter-spacing:.08em;
}

.lb-action.active svg{color:#FF4F86;fill:currentColor}

/* ===== STUDIO: warstwa API (generacja, wgrywanie, stany) ===== */

.toast-box{
  position:fixed;
  right:16px;bottom:16px;
  z-index:4000;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}
.toast{
  max-width:360px;
  padding:10px 14px;
  background:var(--card-2);
  border:1px solid #2C323A;
  border-radius:7px;
  color:var(--text);
  font-size:12px;
  line-height:1.45;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease;
}
.toast.show{opacity:1;transform:none}
.toast-err{border-color:#7A2E2E;color:#FFB4B4}

.tile.pending{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  aspect-ratio:16/10;
  background:var(--card-2);
  border:1px dashed #2C323A;
  cursor:default;
}
.tile.pending .spin{
  width:26px;height:26px;
  border:3px solid #2C323A;
  border-top-color:var(--text);
  border-radius:50%;
  animation:vgSpin .8s linear infinite;
}
@keyframes vgSpin{to{transform:rotate(360deg)}}
.pending-label{font-size:11px;color:var(--dim);letter-spacing:.06em}
.tile-cancel{
  position:absolute;
  top:8px;right:8px;
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  border-radius:5px;
  background:rgba(0,0,0,.45);
  color:var(--dim);
  font-size:12px;
}
.tile-cancel:hover{color:var(--text);background:rgba(0,0,0,.7)}

.gallery-empty{
  grid-column:1/-1;
  padding:60px 20px;
  text-align:center;
  color:var(--dim);
  font-size:13px;
  border:1px dashed #232830;
  border-radius:10px;
}
.gallery.drag-over{outline:2px dashed #4C9FFF;outline-offset:-6px}

.tree-empty{padding:14px 10px;color:var(--dim);font-size:12px;line-height:1.5}
.tree-count{
  margin-left:auto;
  font-size:10px;
  color:var(--dim);
  background:rgba(255,255,255,.05);
  border-radius:999px;
  padding:1px 7px;
}
.tree-del{
  display:none;
  margin-left:6px;
  width:20px;height:20px;
  align-items:center;justify-content:center;
  border-radius:4px;
  color:var(--dim);
  flex-shrink:0;
}
.tree-del svg{width:12px;height:12px}
.tree-row:hover .tree-del{display:flex}
.tree-del:hover{color:#FF7B7B;background:rgba(255,255,255,.06)}
.tree-row .tree-count + .tree-del{margin-left:4px}

.tree-inline input{
  flex:1;
  min-width:0;
  background:var(--card-2);
  border:1px solid #2C323A;
  border-radius:5px;
  padding:4px 8px;
  font-size:12px;
  color:var(--text);
  outline:none;
}
.tree-inline input:focus{border-color:#4C9FFF}

.gen-pop{
  position:absolute;
  bottom:calc(100% + 10px);
  left:20px;
  width:320px;
  background:var(--card-2);
  border:1px solid #2C323A;
  border-radius:8px;
  padding:12px;
  display:none;
  z-index:1200;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
.gen-pop.open{display:block}
.gp-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--dim);
  margin:10px 0 6px;
}
.gp-label:first-child{margin-top:0}
.gp-models{display:flex;flex-direction:column;gap:4px}
.gp-model{
  background:none;
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:7px 10px;
  border:1px solid transparent;
  border-radius:6px;
  font-size:12px;
  cursor:pointer;
  color:var(--text-soft);
}
.gp-model em{font-style:normal;font-size:10px;color:var(--dim)}
.gp-model:hover{background:rgba(255,255,255,.04)}
.gp-model.active{border-color:#4C9FFF;color:var(--text);background:rgba(76,159,255,.08)}
.gp-chips{display:flex;flex-wrap:wrap;gap:5px}
.gp-chip{
  padding:4px 9px;
  border:1px solid #2C323A;
  border-radius:999px;
  font-size:11px;
  color:var(--text-soft);
  cursor:pointer;
}
.gp-chip:hover{color:var(--text)}
.gp-chip.active{border-color:#4C9FFF;color:#9CCBFF;background:rgba(76,159,255,.1)}
.gp-row{display:flex;gap:16px;align-items:flex-end}
.gp-count{
  display:flex;
  align-items:center;
  gap:10px;
}
.gp-count button{
  width:26px;height:26px;
  border:1px solid #2C323A;
  border-radius:6px;
  color:var(--text-soft);
  font-size:14px;
}
.gp-count button:hover{color:var(--text);border-color:#3A414B}
.gp-n{min-width:16px;text-align:center;font-size:13px;font-weight:700}
.gp-seed-box{flex:1}
.gp-seed{
  width:100%;
  background:var(--card);
  border:1px solid #2C323A;
  border-radius:6px;
  padding:5px 9px;
  font-size:12px;
  color:var(--text);
  outline:none;
}
.gp-seed:focus{border-color:#4C9FFF}

.lb-action[disabled]{opacity:.35;cursor:default;pointer-events:none}

/* popover parametrow kotwiczy sie do karty prompta */
.prompt-card{position:relative}

/* ===== PIGUŁKI W PROMPCIE ===== */
.pc-pill{
  display:inline-block;
  margin:0 2px;
  padding:2px 10px;
  border:1px solid;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  user-select:none;
  vertical-align:baseline;
  text-transform:uppercase;
}
.pc-pill.c-purple{border-color:#8B5CF6;color:#B79CFF;background:rgba(139,92,246,.12)}
.pc-pill.c-green{border-color:#22c55e;color:#6EE7A0;background:rgba(34,197,94,.12)}
.pc-pill.c-blue{border-color:#4C9FFF;color:#9CCBFF;background:rgba(76,159,255,.12)}
.pc-pill.c-yellow{border-color:#eab308;color:#F2D34B;background:rgba(234,179,8,.12)}
.pc-pill.c-pink{border-color:#E44FD4;color:#F49BEA;background:rgba(228,79,212,.12)}
.pc-pill.c-slate{border-color:#64748b;color:#A9B4C4;background:rgba(100,116,139,.14)}
.pc-pill.dead{border-style:dashed;opacity:.55;cursor:not-allowed}
.pc-pill:hover{filter:brightness(1.15)}
.pc-text.locked{opacity:.75;cursor:default}
.llm-btn.busy{opacity:.5;pointer-events:none}

/* ===== MENEDŻER SZABLONÓW ===== */
.tpl-modal .tm-card{
  width:min(860px,94vw);
  max-height:84vh;
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.tm-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid #232830;
}
.tm-title{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--text-soft)}
.tm-search{
  flex:1;
  background:var(--card-2);
  border:1px solid #2C323A;
  border-radius:7px;
  padding:7px 12px;
  font-size:12px;
  color:var(--text);
  outline:none;
}
.tm-search:focus{border-color:#4C9FFF}
.tm-x{
  width:28px;height:28px;
  border-radius:6px;
  color:var(--dim);
}
.tm-x:hover{color:var(--text);background:rgba(255,255,255,.06)}
.tm-body{
  flex:1;
  min-height:0;
  display:flex;
  overflow:hidden;
}
.tm-side{
  width:190px;
  flex-shrink:0;
  border-right:1px solid #232830;
  padding:10px 8px;
  overflow-y:auto;
}
.tm-frow{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:6px;
  font-size:12px;
  color:var(--text-soft);
  cursor:pointer;
}
.tm-frow em{font-style:normal;margin-left:auto;font-size:10px;color:var(--dim)}
.tm-frow:hover{background:rgba(255,255,255,.04)}
.tm-frow.active{background:rgba(76,159,255,.1);color:#9CCBFF}
.tm-frow .tree-del{display:none}
.tm-frow:hover .tree-del{display:flex}
.tm-fadd{
  width:100%;
  margin-top:8px;
  padding:7px;
  border:1px dashed #2C323A;
  border-radius:6px;
  color:var(--dim);
  font-size:11px;
}
.tm-fadd:hover{color:var(--text);border-color:#3A414B}
.tm-grid{
  flex:1;
  overflow-y:auto;
  padding:12px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:10px;
  align-content:start;
}
.tm-empty{grid-column:1/-1;padding:40px;text-align:center;color:var(--dim);font-size:12px}
.tm-tpl{
  border:1px solid #232830;
  border-radius:8px;
  padding:10px;
  cursor:pointer;
  background:var(--card-2);
}
.tm-tpl:hover{border-color:#4C9FFF}
.tm-tpl-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.tm-acts{display:flex;gap:2px}
.tm-acts button{
  width:24px;height:24px;
  border-radius:5px;
  font-size:12px;
  color:var(--dim);
  display:flex;align-items:center;justify-content:center;
}
.tm-acts button:hover{background:rgba(255,255,255,.07);color:var(--text)}
.tm-lock.on{color:#F2D34B}
.tm-prev{
  margin-top:8px;
  font-size:11px;
  line-height:1.5;
  color:var(--text-soft);
  min-height:32px;
  overflow-wrap:break-word;
}
.tm-prev em{color:var(--dim)}
.tm-colors{display:flex;gap:5px;margin-top:8px}
.tm-dot{
  width:14px;height:14px;
  border-radius:50%;
  border:1px solid;
  opacity:.5;
}
.tm-dot:hover{opacity:1}
.tm-dot.active{opacity:1;outline:2px solid rgba(255,255,255,.35);outline-offset:1px}
.tm-dot.c-purple{background:rgba(139,92,246,.5);border-color:#8B5CF6}
.tm-dot.c-green{background:rgba(34,197,94,.5);border-color:#22c55e}
.tm-dot.c-blue{background:rgba(76,159,255,.5);border-color:#4C9FFF}
.tm-dot.c-yellow{background:rgba(234,179,8,.5);border-color:#eab308}
.tm-dot.c-pink{background:rgba(228,79,212,.5);border-color:#E44FD4}
.tm-dot.c-slate{background:rgba(100,116,139,.5);border-color:#64748b}
.tm-foot{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-top:1px solid #232830;
}
.tm-new-name{
  flex:1;
  background:var(--card-2);
  border:1px solid #2C323A;
  border-radius:7px;
  padding:8px 12px;
  font-size:12px;
  color:var(--text);
  outline:none;
  text-transform:uppercase;
}
.tm-new-name:focus{border-color:#4C9FFF}
.tm-new-colors{display:flex;gap:5px}
.tm-create{
  padding:8px 16px;
  border-radius:7px;
  background:rgba(76,159,255,.14);
  border:1px solid #4C9FFF;
  color:#9CCBFF;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
}
.tm-create:hover{background:rgba(76,159,255,.22)}
.tpl-pick{left:auto;right:20px;width:280px}

/* ===== DROBIAZGI NOWYCH ZAKLADEK ===== */
.bl-del{
  display:inline-flex;
  width:20px;height:20px;
  align-items:center;justify-content:center;
  border-radius:4px;
  color:var(--dim);
  vertical-align:middle;
  margin-left:6px;
  opacity:0;
}
.bl-del svg{width:12px;height:12px}
.bl-card:hover .bl-del, .bl-row:hover .bl-del{opacity:1}
.bl-del:hover{color:#FF7B7B;background:rgba(255,255,255,.06)}
.tw-hint{font-size:11px;color:var(--dim);padding:6px 2px;line-height:1.5}
.tw-err{color:#FFB4B4}
.tw-dl{
  display:inline-block;
  margin-top:6px;
  padding:6px 12px;
  border:1px solid #4C9FFF;
  border-radius:6px;
  color:#9CCBFF;
  font-size:11px;
  font-weight:700;
  text-decoration:none;
}
.tw-dl:hover{background:rgba(76,159,255,.14)}

/* menedzer szablonow: samodzielna powloka okna — na srodku, nad wszystkim
   poza ekranem logowania (3000) i toastami (4000) */
.tpl-modal{
  position:fixed;
  inset:0;
  z-index:2600;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(2,4,8,.62);
  backdrop-filter:blur(3px);
}
.tpl-modal.open{display:flex}
.tpl-modal .tm-card{width:min(860px,94vw)}

/* przeciaganie w drzewku */
.tree-row.dragging{opacity:.45}
.tree-row.drop-into{outline:1.5px dashed #4C9FFF;outline-offset:-2px;background:rgba(76,159,255,.14);border-radius:6px}
.tree-row.drop-before{box-shadow:inset 0 2px 0 #4C9FFF}
.lb-tag-own{display:inline-flex;align-items:center;gap:4px}
.lb-tag-x{color:var(--dim);font-size:12px;line-height:1}
.lb-tag-x:hover{color:#FF7B7B}

/* ===========================================================================
   MIRO SPEC — kafelki (hover-akcje), nowości, paginacja, chipy promptu,
   referencje, biny, archiwum, lightbox-ikony, kadrowanie, autocomplete
   =========================================================================== */

/* --- zielona kropka nowości + plakietki kafelka --- */
.dot-new{
  position:absolute;top:8px;right:8px;width:10px;height:10px;border-radius:50%;
  background:#3DDC84;border:2px solid rgba(0,0,0,.55);pointer-events:none;
}
.tree-new{
  width:8px;height:8px;border-radius:50%;background:#3DDC84;flex:0 0 auto;
  margin-left:6px;
}
.badge-fav,.badge-star{
  position:absolute;top:8px;left:8px;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:rgba(12,14,17,.78);
}
.badge-fav svg{width:12px;height:12px;color:#FF4F86;fill:#FF4F86}
@keyframes badgePop{
  0%{transform:scale(.2);opacity:0}
  60%{transform:scale(1.25);opacity:1}
  100%{transform:scale(1);opacity:1}
}
.badge-pop{animation:badgePop .28s cubic-bezier(.3,.6,.4,1.4) both}
.badge-star{left:34px;}
.badge-fav:only-of-type{left:8px}
.badge-star svg{width:13px;height:13px;color:#FFC63D;fill:#FFC63D}

/* --- akcje na hover kafelka --- */
.tile-acts{
  position:absolute;left:0;right:0;bottom:0;display:flex;gap:4px;justify-content:center;
  padding:8px 6px;opacity:0;transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease;
  background:linear-gradient(to top, rgba(10,12,15,.85), rgba(10,12,15,0));
}
.tile:hover .tile-acts{opacity:1;transform:none}
.ta{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(20,23,28,.92);border:1px solid #262B33;color:#C6CDD6;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.ta svg{width:14px;height:14px}
.ta:hover{background:#1E242C;border-color:var(--border-hi);color:#fff}
.ta-fav.on{color:#FF4F86}
.ta-fav.on svg{fill:#FF4F86}
.ta-del:hover{color:#FF7B7B;border-color:#4A2626}

/* --- pasek: gwiazdka-filtr + paginacja --- */
.star-btn.active{color:#FFC63D}
.star-btn.active svg{fill:#FFC63D}
.pager{display:flex;align-items:center;gap:6px;margin-left:10px}
.pg-btn{
  width:24px;height:24px;border-radius:4px;background:#191D23;border:1px solid transparent;
  color:#C6CDD6;font-size:15px;line-height:1;
}
.pg-btn:hover{border-color:var(--border-hi);color:#fff}
.pg-btn:disabled{opacity:.35;pointer-events:none}
.pg-label{font-size:10px;letter-spacing:.1em;color:var(--muted);white-space:nowrap}

/* --- górny pasek karty promptu: okruszki + chipy modelu --- */
.pc-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pc-topbar .pc-head{flex:1;min-width:0}
.pc-chipbar{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.pc-chip{
  display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:99px;
  background:#191D23;border:1px solid #262B33;color:#C6CDD6;font-size:11px;font-weight:600;
  transition:border-color .15s ease, color .15s ease;
}
.pc-chip svg{width:12px;height:12px}
.pc-chip:hover{border-color:var(--border-hi);color:#fff}
.pc-chip-refs{color:#3DDC84;border-color:#1E3B2C}

/* --- referencje obrazkowe (pole input) --- */
.pc-inputs{
  display:flex;align-items:center;gap:8px;padding:8px 2px 2px;
  border-top:1px dashed #262B33;margin-top:8px;flex-wrap:wrap;
}
.pc-inputs.drag-over{background:rgba(61,220,132,.05)}
.pc-refs{display:flex;gap:6px;flex-wrap:wrap}
.pc-ref{position:relative;width:44px;height:44px;border-radius:5px;overflow:hidden;border:1px solid #262B33}
.pc-ref img{width:100%;height:100%;object-fit:cover;display:block}
.pc-ref-x{
  position:absolute;top:0;right:0;width:16px;height:16px;font-size:11px;line-height:1;
  background:rgba(10,12,15,.85);color:#C6CDD6;border-bottom-left-radius:5px;
}
.pc-ref-x:hover{color:#FF7B7B}
.pc-refbtn{
  display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:5px;
  background:#191D23;border:1px dashed #2E3540;color:#C6CDD6;font-size:11px;font-weight:600;
  transition:border-color .15s ease, color .15s ease;
}
.pc-refbtn svg{width:13px;height:13px}
.pc-refbtn:hover{border-color:var(--border-hi);color:#fff}
.pc-refhint{font-size:10px;color:var(--dim)}

/* --- uchwyt skalowania okna promptu --- */
.pc-resize{
  position:absolute;left:0;right:0;top:-4px;height:8px;cursor:ns-resize;z-index:3;
}
.pc-resize:hover{background:linear-gradient(to bottom, rgba(76,159,255,.25), transparent)}
.prompt-card{position:relative}

/* --- autocomplete #SZABLON --- */
.tpl-suggest{
  position:absolute;bottom:calc(100% + 8px);left:16px;z-index:60;min-width:220px;
  background:#14171C;border:1px solid var(--border-hi);border-radius:7px;padding:5px;
  display:flex;flex-direction:column;gap:2px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.ts-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:5px 8px;border-radius:5px;text-align:left;
}
.ts-item em{font-size:10px;color:var(--dim);font-style:normal}
.ts-item:hover,.ts-item.active{background:#1E242C}

/* --- menedżer szablonów: rozszerzenia --- */
.tm-sort{
  background:#191D23;border:1px solid #262B33;color:#C6CDD6;border-radius:5px;
  font-size:11px;padding:5px 7px;margin-right:8px;
}
.tm-fsub{
  margin-left:auto;width:18px;height:18px;border-radius:4px;color:var(--dim);
  font-size:12px;line-height:1;
}
.tm-fsub:hover{color:#fff;background:#1E242C}
.tm-frow.tm-sub{padding-left:22px}
.tm-faddrow{padding:4px 8px}
.tm-faddrow input,.bm-addrow input,.bp-new{
  width:100%;background:#191D23;border:1px solid var(--border-hi);border-radius:5px;
  color:#E4E9EF;font-size:12px;padding:6px 8px;
}
.tm-archrow{
  margin-top:10px;padding:7px 10px;border-top:1px solid #21252C;color:var(--dim);
  font-size:11px;font-weight:700;letter-spacing:.06em;cursor:pointer;
  display:flex;justify-content:space-between;
}
.tm-archrow:hover,.tm-archrow.active{color:#fff}
.tm-tpl.tm-archived{opacity:.55}
.tm-info.on{color:#4C9FFF}
.tm-detail{display:flex;flex-direction:column;gap:7px;margin:8px 0 2px}
.tm-detail label{display:flex;flex-direction:column;gap:3px;font-size:9px;letter-spacing:.08em;color:var(--dim)}
.tm-detail input,.tm-detail textarea{
  background:#12151A;border:1px solid #262B33;border-radius:4px;color:#E4E9EF;
  font-size:11px;padding:5px 7px;font-family:inherit;resize:vertical;
}
.tm-detail input:focus,.tm-detail textarea:focus{outline:none;border-color:var(--border-hi)}
.tm-by{font-size:10px;color:var(--dim)}
.tm-by b{color:#C6CDD6;font-weight:600}

/* --- okno ASSET BINS + archiwum (na szkielecie tw-modal/tm-*) --- */
/* powloka jak w .tpl-modal — bez niej klasa .open niczego nie pokazuje */
.bins-modal,.arch-modal{
  position:fixed;
  inset:0;
  z-index:2600;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(2,4,8,.62);
  backdrop-filter:blur(3px);
}
.bins-modal.open,.arch-modal.open{display:flex}
/* podwójna klasa: narzedzia.css laduje sie pozniej i .tw-modal-card{width:420px}
   wygrywalby kolejnoscia przy tej samej specyficznosci */
.tw-modal-card.bm-card,.tw-modal-card.am-card{
  width:min(1240px, 95vw);
  height:min(820px, 88vh);
  max-height:88vh;
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.bm-card .tm-body{flex:1;min-height:260px;display:flex;overflow:hidden}
.bm-mode{font-size:10px;letter-spacing:.1em;color:#3DDC84;font-weight:700;margin-right:auto;margin-left:14px}
.bm-side{width:230px;flex:0 0 auto;border-right:1px solid #21252C;padding:8px;overflow:auto}
.bm-grid{flex:1;padding:12px;overflow:auto}
.bm-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.bm-bar span{font-size:12px;font-weight:700;letter-spacing:.05em}
.bm-upload{
  padding:6px 12px;border-radius:5px;background:#191D23;border:1px dashed #2E3540;
  color:#C6CDD6;font-size:11px;font-weight:600;
}
.bm-upload:hover{border-color:var(--border-hi);color:#fff}
.bm-tiles{display:grid;grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));gap:10px}
.bm-tile{position:relative;border-radius:6px;overflow:hidden;border:1px solid #21252C;aspect-ratio:1;cursor:pointer}
.bm-tile img{width:100%;height:100%;object-fit:cover;display:block}
.bm-tile:hover{border-color:var(--border-hi)}
.bm-x{
  position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:4px;
  background:rgba(10,12,15,.85);color:#C6CDD6;font-size:11px;line-height:1;opacity:0;
}
.bm-tile:hover .bm-x{opacity:1}
.bm-x:hover{color:#FF7B7B}
.bin-pick{
  position:fixed;z-index:3000;min-width:210px;background:#14171C;
  border:1px solid var(--border-hi);border-radius:7px;padding:8px;
  display:flex;flex-direction:column;gap:4px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.am-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid #232830;
}
.am-head-l{display:flex;align-items:center;gap:12px}
.am-head-l > span:last-child{display:flex;flex-direction:column;gap:2px}
.am-icon{
  width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:#191D23;border:1px solid #262B33;color:#8A93A0;flex:0 0 auto;
}
.am-icon svg{width:16px;height:16px}
.am-count{font-size:10px;color:var(--dim);letter-spacing:.06em}
.am-body{flex:1;overflow:auto;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.am-group{
  border:1px solid #21252C;border-radius:10px;background:#101318;
  padding:12px;overflow:hidden;
  transition:opacity .35s ease, transform .35s ease, margin .35s ease, max-height .35s ease;
  max-height:1200px;
}
.am-group-out{opacity:0;transform:scale(.97);max-height:0;margin:-7px 0;padding-top:0;padding-bottom:0}
.am-path{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:10px;font-weight:700;letter-spacing:.09em;margin:0 2px 11px;
}
.am-crumb{color:#79828E}
.am-crumb.last{
  color:#E4E9EF;background:#191D23;border:1px solid #262B33;
  padding:3px 9px;border-radius:99px;letter-spacing:.07em;
}
.am-sep{color:#3A414B;font-size:11px}
.am-path em{
  margin-left:auto;font-style:normal;font-weight:600;font-size:10px;
  color:var(--dim);letter-spacing:.04em;
}
.am-tiles{display:grid;grid-template-columns:repeat(auto-fill, minmax(158px, 1fr));gap:12px}
.am-tile{
  position:relative;border-radius:8px;overflow:hidden;border:1px solid #262B33;
  aspect-ratio:1;background:#0C0E12;
  transition:transform .2s ease, border-color .2s ease;
  will-change:transform;
}
.am-tile:hover{transform:translateY(-2px);border-color:var(--border-hi)}
.am-tile img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.7) brightness(.92);
  transition:filter .25s ease, transform .3s ease;
}
.am-tile:hover img{filter:none;transform:scale(1.04)}
.am-acts{
  position:absolute;inset:auto 0 0 0;display:flex;justify-content:center;gap:8px;
  padding:16px 8px 9px;opacity:0;transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease;
  background:linear-gradient(to top, rgba(8,10,13,.92), transparent);
}
.am-tile:hover .am-acts{opacity:1;transform:none}
.am-acts button{
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(20,23,28,.95);border:1px solid #2A303A;color:#C6CDD6;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.am-acts button svg{width:14px;height:14px}
.am-restore:hover{color:#7FD7A6;border-color:#2A4636;background:#15201A}
.am-purge:hover{color:#FF8B8B;border-color:#4A2626;background:#1F1416}
.am-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:40px 0;color:var(--dim);
}
.am-empty svg{width:44px;height:44px;color:#2C333C}
.am-empty-t{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--muted)}
.am-empty-s{font-size:11px;color:var(--dim)}

/* kasowany kafelek: najpierw "gaśnie" (lekki blur + grayscale),
   potem podskakuje i znika z mocnym blurem */
@keyframes tileVanish{
  0%{transform:none;opacity:1;filter:blur(0) grayscale(0)}
  30%{transform:none;opacity:1;filter:blur(2.5px) grayscale(1) brightness(.85)}
  52%{transform:translateY(-12px) scale(1.05);opacity:1;filter:blur(3px) grayscale(1) brightness(.85)}
  100%{transform:translateY(12px) scale(.5);opacity:0;filter:blur(12px) grayscale(1)}
}
/* body.app-reveal .tile ma animacje wejscia riseIn o wyzszej specyficznosci
   — selektor musi ja przebijac, inaczej kasowanie nie animuje sie w galerii */
.tile-vanish,
body.app-reveal .tile.tile-vanish{
  animation:tileVanish .58s cubic-bezier(.3,.55,.4,1) forwards;
  animation-delay:0s;
  pointer-events:none;
  z-index:3;
}

/* --- lewy panel: stopka ASSETY/ARCHIWUM --- */
.panel-foot{
  display:flex;gap:6px;padding:8px;border-top:1px solid #21252C;margin-top:auto;
}
.pf-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 4px;border-radius:5px;background:#14171C;border:1px solid #21252C;
  color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.08em;
  transition:border-color .15s ease, color .15s ease;
}
.pf-btn svg{width:13px;height:13px}
.pf-btn:hover{color:#fff;border-color:var(--border-hi)}
#panelStudio:not([hidden]){display:flex;flex-direction:column}
#panelStudio .tree{flex:1}

/* --- lightbox: rząd ikon akcji + referencje + kadrowanie --- */
.lb-iconrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.lb-ic{
  width:34px;height:34px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  background:#191D23;border:1px solid transparent;color:#C6CDD6;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.lb-ic svg{width:15px;height:15px}
.lb-ic:hover{background:#1E242C;border-color:var(--border-hi);color:#fff}
.lb-ic.active{color:#FF4F86}
#lbStar.active{color:#FFC63D}
.lb-ic-danger:hover{color:#FF7B7B;border-color:#4A2626}
.lb-refs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lb-refs-no{
  font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--dim);
  background:#191D23;border-radius:4px;padding:3px 8px;
}
.lb-ref{width:40px;height:40px;border-radius:5px;overflow:hidden;border:1px solid #262B33;cursor:pointer}
.lb-ref img{width:100%;height:100%;object-fit:cover;display:block}
.lb-ref:hover{border-color:var(--border-hi)}
.lb-ref-reuse{
  display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:5px;
  background:#191D23;border:1px solid #262B33;color:#C6CDD6;font-size:10px;font-weight:700;
}
.lb-ref-reuse svg{width:11px;height:11px}
.lb-ref-reuse:hover{color:#fff;border-color:var(--border-hi)}
.lb-cropbar{
  display:flex;align-items:center;gap:8px;margin-top:10px;padding:9px 10px;
  border-radius:5px;background:#14171C;border:1px solid var(--border-hi);
}
.lb-cropbar span{font-size:11px;color:var(--muted);flex:1}
.lb-cropbar button{font-size:10px;padding:6px 10px;border-radius:4px}
#lbCropCancel{background:#191D23;color:#C6CDD6;border:1px solid #262B33}
#lbCropCancel:hover{color:#fff;border-color:var(--border-hi)}
.lb-croplayer{position:absolute;z-index:5;cursor:crosshair}
.lb-cropsel{
  position:absolute;border:1.5px dashed #3DDC84;background:rgba(61,220,132,.12);
  pointer-events:none;
}
.lb-stage{position:relative}

/* naglowki okien bez pola szukania: X zawsze przy prawej krawedzi */
.bins-modal .tm-x, .arch-modal .tm-x{margin-left:auto}

/* podpowiedzi @ASSET: miniatura + nazwa + bin */
.ts-thumb{width:34px;height:26px;object-fit:cover;border-radius:4px;flex:0 0 auto}
.ts-aname{
  flex:1;min-width:0;font-size:11px;font-weight:600;color:#C6CDD6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;
}