.side-panel .panel-body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.side-panel .panel-body[hidden]{display:none}

.odchlan{
  flex:1;
  min-width:0;
  display:flex;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}

.odchlan[hidden]{display:none}

.oc-canvas{
  position:relative;
  flex:1;
  min-width:0;
  overflow:hidden;
  cursor:grab;
  background-color:#0B0D11;
  background-image:radial-gradient(circle, #1E242C 1px, transparent 1px);
  background-size:22px 22px;
}

.oc-canvas.panning{cursor:grabbing}

.oc-world{
  position:absolute;
  top:0;left:0;
  transform-origin:0 0;
}

.oc-world.interacting{will-change:transform}

.oc-wires{
  position:absolute;
  top:0;left:0;
  overflow:visible;
  pointer-events:none;
}

.oc-wire{
  fill:none;
  stroke-width:2;
  pointer-events:none;
  transition:stroke .13s ease, stroke-width .13s ease;
}

.oc-wire-hit{
  fill:none;
  stroke:transparent;
  stroke-width:16;
  pointer-events:stroke;
  cursor:pointer;
}

.oc-wire-hit:hover + .oc-wire{
  stroke:#F4655F !important;
  stroke-width:3;
}

.oc-wire.dragging{
  stroke-dasharray:6 5;
  pointer-events:none;
  animation:ocDash .7s linear infinite;
}

@keyframes ocDash{
  to{stroke-dashoffset:-22}
}

.oc-nodes{position:absolute;top:0;left:0}

.oc-node{
  position:absolute;
  z-index:1;
  min-height:96px;
  background:#0F1216;
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:0 14px 34px rgba(0,0,0,.5);

  transition:border-color .15s ease;
}

.oc-node:hover{border-color:var(--border-hi)}

.oc-node.selected{
  border-color:var(--accent,var(--blue));
  box-shadow:0 0 0 1px var(--accent,var(--blue)), 0 16px 40px rgba(0,0,0,.55);
}

.oc-node.running{
  border-color:var(--blue);
  box-shadow:0 0 0 1px var(--blue);
}

.oc-node.done{
  border-color:var(--green);
  box-shadow:0 0 0 1px var(--green);
}

.oc-head{
  display:flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 10px 0 12px;
  border-bottom:1px solid #1A1F26;
  cursor:move;
  user-select:none;
}

.oc-dot{
  width:7px;height:7px;
  border-radius:50%;
  flex-shrink:0;
}

.oc-name{
  min-width:0;
  max-width:calc(100% - 46px);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--text-soft);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.oc-head{justify-content:flex-start}

.oc-head .oc-x{margin-left:auto}

.oc-title-text{
  cursor:text;
  border-radius:3px;
  padding:1px 4px;
  margin:0 -4px;
  transition:background .13s ease, color .13s ease;
}

.oc-title-text:hover{
  background:rgba(255,255,255,.07);
  color:#fff;
}

.oc-x{
  width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  border-radius:3px;
  color:var(--dim);
  opacity:0;
  transition:opacity .15s ease, color .15s ease, background .15s ease;
}

.oc-x svg{width:11px;height:11px}

.oc-node:hover .oc-x{opacity:1}

.oc-x:hover{color:#F4655F;background:rgba(244,101,95,.1)}

.oc-body{padding:8px 10px 10px}

.oc-field{
  min-height:56px;
  font-size:12px;
  line-height:1.55;
  color:#C6CDD6;
  outline:none;
  cursor:text;
  caret-color:var(--blue);
  white-space:pre-wrap;
  overflow-wrap:break-word;
}

.oc-field.note{color:#E0CE93}

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

.oc-params{display:flex;flex-wrap:wrap;gap:6px}

.oc-param{
  padding:4px 10px;
  border-radius:999px;
  background:#171B21;
  border:1px solid var(--border);
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  color:#AEB7C2;
  white-space:nowrap;
}

.oc-out{
  margin-top:9px;
  padding:8px 10px;
  background:#0A0C10;
  border:1px solid var(--border);
  border-radius:5px;
  font-size:11px;
  line-height:1.5;
  color:var(--muted);
  max-height:64px;
  overflow:hidden;
}

.oc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
}

.oc-grid img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:4px;
  display:block;
}

.oc-port{
  position:absolute;
  width:11px;height:11px;
  margin-top:-5.5px;
  border-radius:50%;
  background:#0B0D11;
  border:2px solid var(--pc,#4C9FFF);
  cursor:crosshair;
  transition:transform .13s ease, opacity .13s ease;
}

.oc-port::after{
  content:"";
  position:absolute;
  inset:-9px;
  border-radius:50%;
}

.oc-nodes.wiring .oc-port.in.compat{
  transform:scale(1.4);
}

.oc-nodes.wiring .oc-port:not(.compat){opacity:.25}

.oc-port.in{left:-6px}

.oc-port.out{right:-6px}

.oc-port.on{background:var(--pc,#4C9FFF)}

.oc-port:hover{
  transform:scale(1.45);
}

.oc-port-label{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  padding:2px 7px;
  border-radius:3px;
  background:#0B0D11;
  border:1px solid var(--border);
  font-size:9px;
  font-style:normal;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--text-soft);
  white-space:nowrap;
  opacity:0;
  transition:opacity .15s ease;
  pointer-events:none;
  z-index:3;
}

.oc-port.in .oc-port-label{right:18px;left:auto}

.oc-port.out .oc-port-label{left:18px;right:auto}

.oc-node:hover .oc-port-label{opacity:1}

.oc-frame{
  z-index:0;
  min-height:0;
  background:rgba(76,159,255,.02);
  border:1px dashed #2C333C;
  border-radius:9px;
  box-shadow:none;
  pointer-events:none;
}

.oc-frame:hover{border-color:var(--border-hi)}

.oc-frame.selected{box-shadow:none;border-color:var(--blue)}

.oc-frame-title{
  position:absolute;
  top:-11px;left:16px;
  z-index:6;
  display:flex;
  align-items:center;
  gap:8px;
  padding:3px 10px;
  background:#0B0D11;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
  color:var(--text-soft);
  pointer-events:auto;
  cursor:move;
}

.oc-frame-title:hover{border-color:var(--border-hi)}

.oc-frame .oc-x{pointer-events:auto;opacity:0}

.oc-frame-title:hover .oc-x{opacity:1}

.oc-rz{
  position:absolute;
  pointer-events:auto;
  z-index:4;
}

.oc-rz.n{top:-6px;left:12px;right:12px;height:12px;cursor:ns-resize}

.oc-frame .oc-rz.n{left:auto;width:calc(100% - 24px);right:12px}

.oc-rz.s{bottom:-6px;left:12px;right:12px;height:12px;cursor:ns-resize}

.oc-rz.w{left:-6px;top:12px;bottom:12px;width:12px;cursor:ew-resize}

.oc-rz.e{right:-6px;top:12px;bottom:12px;width:12px;cursor:ew-resize}

.oc-rz.nw{top:-7px;left:-7px;width:16px;height:16px;cursor:nwse-resize}

.oc-rz.ne{top:-7px;right:-7px;width:16px;height:16px;cursor:nesw-resize}

.oc-rz.sw{bottom:-7px;left:-7px;width:16px;height:16px;cursor:nesw-resize}

.oc-rz.se{bottom:-7px;right:-7px;width:16px;height:16px;cursor:nwse-resize}

.oc-frame .oc-rz.nw::after,
.oc-frame .oc-rz.ne::after,
.oc-frame .oc-rz.sw::after,
.oc-frame .oc-rz.se::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:2px;
  background:var(--blue);
  opacity:0;
  transition:opacity .15s ease;
}

.oc-frame:hover .oc-rz::after,
.oc-frame.selected .oc-rz::after{opacity:.85}

.oc-name-input{
  flex:1;
  min-width:0;
  height:20px;
  padding:0 6px;
  background:#0B0D11;
  border:1px solid var(--blue);
  border-radius:3px;
  color:#fff;
  font-family:inherit;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  outline:none;
  pointer-events:auto;
  -webkit-font-smoothing:antialiased;
}

.oc-topbar{
  position:absolute;
  top:16px;right:16px;
  display:flex;
  align-items:center;
  gap:8px;
  z-index:20;
}

.oc-icon-btn{
  width:36px;height:36px;
  background:#12151A;
  border:1px solid var(--border);
  border-radius:7px;
  color:var(--muted);
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}

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

.oc-icon-btn:hover{color:#fff;background:#171B21;border-color:var(--border-hi)}

.oc-zoom{
  min-width:46px;
  text-align:center;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--blue);
}

.oc-run{
  position:absolute;
  bottom:16px;left:50%;
  transform:translateX(-50%);
  z-index:20;
  display:flex;
  align-items:center;
  gap:9px;
  height:44px;
  padding:0 24px;
  border-radius:999px;
  background:var(--blue);
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
  transition:filter .15s ease, transform .15s ease;
}

.oc-run svg{width:13px;height:13px}

.oc-run:hover{filter:brightness(1.12)}

.oc-run:active{transform:translateX(-50%) scale(.97)}

.oc-run.running{
  background:#171B21;
  color:var(--blue);
  box-shadow:none;
  cursor:default;
}

.oc-run.running svg{animation:ocSpin 1s linear infinite}

.oc-run:disabled{
  background:#171B21;
  color:var(--dim);
  box-shadow:none;
  cursor:not-allowed;
}

@keyframes ocSpin{
  to{transform:rotate(360deg)}
}

.oc-hint{
  position:absolute;
  bottom:16px;left:20px;
  z-index:20;
  max-width:calc(50% - 150px);
  font-size:10px;
  line-height:1.5;
  letter-spacing:.03em;
  color:var(--dim);
  pointer-events:none;
}

.oc-empty{
  position:absolute;
  inset:0;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  pointer-events:none;
}

.oc-empty[hidden]{display:none !important}

.oc-empty svg{width:38px;height:38px;color:#2C333C}

.oc-empty-title{
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  color:var(--muted);
}

.oc-empty-sub{font-size:12px;color:var(--dim)}

.oc-empty-btn{
  margin-top:6px;
  height:36px;
  padding:0 20px;
  border-radius:7px;
  background:#12151A;
  border:1px solid var(--border);
  color:var(--text-soft);
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  pointer-events:auto;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}

.oc-empty-btn:hover{background:#171B21;border-color:var(--border-hi);color:#fff}

.oc-menu{
  position:absolute;
  z-index:40;
  min-width:186px;
  background:var(--card-2);
  border:1px solid #232830;
  border-radius:7px;
  padding:8px;
  box-shadow:0 18px 44px rgba(0,0,0,.6);
  display:none;
}

.oc-menu.open{display:block;animation:modalIn .16s ease}

.oc-menu-label{
  margin:2px 6px 7px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
  color:var(--dim);
}

.oc-menu-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border-radius:5px;
  font-size:12px;
  font-weight:600;
  color:var(--text-soft);
  transition:background .13s ease, color .13s ease;
}

.oc-menu-item:hover{background:#1A1F27;color:#fff}

/* konfigurowalne wezly */
.oc-set{
  background:var(--card-2);
  border:1px solid #2C323A;
  border-radius:5px;
  color:var(--text-soft);
  font-size:11px;
  padding:3px 6px;
  outline:none;
  max-width:120px;
}
.oc-set:focus{border-color:#4C9FFF}
.oc-seed{width:64px}
.oc-run-one{
  margin-top:8px;
  width:100%;
  padding:6px 10px;
  border:1px solid #4C9FFF;
  border-radius:6px;
  background:rgba(76,159,255,.10);
  color:#9CCBFF;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
}
.oc-run-one:hover{background:rgba(76,159,255,.2)}
.oc-grid img{cursor:pointer}

/* statusy wykonania na wezlach (wezly juz sa position:absolute) */
.oc-status{
  position:absolute;
  top:-11px;
  right:10px;
  padding:2px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  background:var(--card-2, #14161A);
  border:1px solid #4C9FFF;
  color:#9CCBFF;
  z-index:6;
  white-space:nowrap;
}
.oc-status.ok{border-color:#2EE59D;color:#7FF0C0}
.oc-status.err{border-color:#E4574F;color:#FFB4B4}
.oc-node.oc-working{animation:ocWorkPulse 1.2s ease infinite}
@keyframes ocWorkPulse{
  0%,100%{border-color:#8B5CF6}
  50%{border-color:#4C9FFF}
}
.oc-taskpick{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:86px;
  width:320px;
  z-index:1400;
  background:var(--card, #14161A);
  border:1px solid #2C323A;
  border-radius:10px;
  padding:6px;
  box-shadow:0 22px 60px rgba(0,0,0,.6);
  animation:tutSlide .22s ease;
}
.oc-tp-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px 8px 12px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--dim);
}
.oc-tp-x{
  width:22px;height:22px;
  border-radius:5px;
  color:var(--dim);
}
.oc-tp-x:hover{color:var(--text);background:rgba(255,255,255,.07)}
.oc-tp-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  text-align:left;
  padding:9px 12px;
  border-radius:7px;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-soft);
}
.oc-tp-item:hover{background:rgba(76,159,255,.1);color:#9CCBFF}
.oc-tp-go{color:var(--dim);font-size:15px}
.oc-tp-item:hover .oc-tp-go{color:#9CCBFF}

/* dnd canvasow/folderow: cel "luzem" + inline zmiana nazwy */
#ocPipeTree.drop-root{outline:1px dashed #4C9FFF;outline-offset:-3px;background:rgba(76,159,255,.04)}
.tree-rename{
  flex:1;min-width:0;background:#191D23;border:1px solid #4C9FFF;border-radius:4px;
  color:#E4E9EF;font-size:12px;padding:3px 7px;outline:none;
}

/* ===========================================================================
   SPEC MIRO: kolory ramek, kropki nowosci, guma zaznaczania, inspektor,
   navigator, wezel OBRAZY (dodawanie/tryby), szablony plotna, backupy
   =========================================================================== */

/* ramka: kolor z palety (var --fcol nadawana w renderze) */
.oc-frame{border-color:var(--fcol, #2A303A) !important}
.oc-frame .oc-frame-title{color:var(--fcol, #8A93A0)}
.oc-fcolors{display:none;align-items:center;gap:5px;margin-left:10px}
.oc-frame.selected .oc-fcolors{display:inline-flex}
.oc-fdot{
  width:13px;height:13px;border-radius:50%;border:2px solid rgba(10,12,15,.6);
  transition:transform .12s ease;
}
.oc-fdot:hover{transform:scale(1.25)}
.oc-fdot.on{border-color:#fff}

/* zielona kropka "nieobejrzany wynik" przy nazwie modulu */
.oc-unseen{
  width:8px;height:8px;border-radius:50%;background:#3DDC84;flex:0 0 auto;
  margin-left:2px;
}

/* guma zaznaczania (Shift+przeciagniecie po pustym plotnie) */
.oc-rubber{
  position:absolute;z-index:40;pointer-events:none;
  border:1.5px dashed #4C9FFF;background:rgba(76,159,255,.08);border-radius:4px;
}

/* wezel OBRAZY: kafelek Dodaj + miniaturki z krzyzykiem */
.oc-add-img{
  width:64px;height:64px;border-radius:6px;flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:#14171C;border:1px dashed #2E3540;color:#8A93A0;
  transition:border-color .15s ease, color .15s ease;
}
.oc-add-img b{font-size:15px;line-height:1;font-weight:700}
.oc-add-img i{font-size:9px;font-style:normal;letter-spacing:.06em}
.oc-add-img:hover{border-color:var(--border-hi);color:#fff}
.oc-thumb{position:relative;width:64px;height:64px;border-radius:6px;overflow:hidden;flex:0 0 auto}
.oc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.oc-img-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:6px;opacity:0;
}
.oc-thumb:hover .oc-img-x{opacity:1}
.oc-img-x:hover{color:#FF7B7B}

/* podglad Enhanced w wezle LLM */
.oc-out{
  margin-top:6px;padding:7px 9px;border-radius:5px;background:#12151A;
  border:1px solid #21252C;font-size:10px;line-height:1.5;color:#8FA0B4;
  max-height:74px;overflow:auto;
}

/* inspektor wezla (prawa strona) */
.oc-insp{
  position:absolute;top:64px;right:16px;width:250px;max-height:calc(100% - 140px);
  overflow:auto;z-index:30;
  background:#14171C;border:1px solid var(--border-hi);border-radius:9px;padding:11px 12px;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.oi-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.oi-title{font-size:11px;font-weight:800;letter-spacing:.1em;color:#E4E9EF}
.oi-x{width:20px;height:20px;border-radius:4px;color:var(--dim);font-size:11px;line-height:1}
.oi-x:hover{color:#fff;background:#1E242C}
.oi-row{display:flex;flex-direction:column;gap:2px;padding:6px 0;border-top:1px solid #1D222A}
.oi-k{font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--dim)}
.oi-v{font-size:11px;line-height:1.5;color:#C6CDD6;word-break:break-word}

/* navigator (minimapa) */
.oc-nav{
  position:absolute;right:16px;bottom:70px;z-index:30;
  background:rgba(14,16,20,.92);border:1px solid #262B33;border-radius:8px;padding:5px;
}
.oc-nav canvas{display:block;border-radius:4px;cursor:pointer}

/* topbar: separator i dodatkowe guziki */
.oc-topsep{width:1px;height:18px;background:#262B33;margin:0 2px}
.oc-tpl-sys{
  font-style:normal;font-size:8px;font-weight:800;letter-spacing:.1em;color:#7FD7A6;
  margin-left:6px;
}
.oc-tpl-dot{width:8px;height:8px;border-radius:50%;background:#4C9FFF;margin-left:auto;flex:0 0 auto}

/* popovery: input Zapisz-jako, lista backupow */
.oc-tp-input{
  margin:10px;width:calc(100% - 20px);background:#191D23;border:1px solid var(--border-hi);
  border-radius:5px;color:#E4E9EF;font-size:12px;padding:8px 10px;outline:none;
}
.oc-tp-meta{margin-left:auto;font-size:10px;color:var(--dim);padding:0 8px}
.oc-tp-empty{padding:14px;font-size:11px;color:var(--dim)}

/* okno SZABLONY PLOTNA */
.oc-tpl-modal .bm-card{width:min(880px, 92vw);height:min(620px, 84vh)}
.tm-frow-head{
  padding:10px 10px 5px;font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--dim);
}
.oc-st-main{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
.oc-st-box{border:1px solid #262B33;border-radius:9px;padding:13px}
.oc-st-title{font-size:10px;font-weight:800;letter-spacing:.12em;color:#C6CDD6;margin-bottom:10px}
.oc-st-nums{display:flex;gap:40px;font-size:9px;letter-spacing:.08em;color:var(--dim);margin-bottom:10px}
.oc-st-nums b{font-size:16px;color:#E4E9EF;letter-spacing:0}
.oc-st-chips{display:flex;flex-wrap:wrap;gap:6px}
.oc-st-chip{
  font-size:9px;font-weight:700;letter-spacing:.06em;color:#AEB6C0;
  background:#191D23;border:1px solid #262B33;border-radius:4px;padding:4px 8px;
}
.oc-st-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.oc-st-meta label{display:flex;flex-direction:column;gap:4px;font-size:9px;letter-spacing:.1em;color:var(--dim);font-weight:700}
.oc-st-meta input{
  background:transparent;border:none;border-bottom:1px solid #2A303A;color:#E4E9EF;
  font-size:12px;padding:5px 1px;outline:none;
}
.oc-st-meta input:focus{border-bottom-color:#4C9FFF}
.oc-st-by{grid-column:1 / -1;font-size:9px;letter-spacing:.1em;color:var(--dim);font-weight:700;line-height:1.9}
.oc-st-by b{font-size:12px;color:#4C9FFF;letter-spacing:0}
.oc-st-actions{margin-top:auto;display:flex;align-items:center;gap:10px}
.oc-st-spacer{flex:1}
.oc-st-save{
  font-size:10px;font-weight:600;color:#8A93A0;background:#14171C;
  border:1px dashed #2E3540;border-radius:5px;padding:8px 11px;
  transition:color .15s ease, border-color .15s ease;
}
.oc-st-save:hover{color:#fff;border-color:var(--border-hi)}
.oc-st-save.holding{border-style:solid;border-color:#3DDC84;color:#7FD7A6}
.oc-st-add{
  font-size:11px;font-weight:700;color:#C6CDD6;background:#191D23;
  border:1px solid #262B33;border-radius:5px;padding:9px 13px;
}
.oc-st-add:hover{color:#fff;border-color:var(--border-hi)}
.oc-st-load{font-size:11px;padding:9px 15px;border-radius:5px}

/* autocomplete #SZABLON w wezle PROMPT (dropdown przy kursorze) */
.tpl-suggest.oc-sugfix{position:fixed;bottom:auto;left:auto;z-index:3000;min-width:200px}

/* ostrzezenie na generatorze: model nie przyjmie podpietych obrazow */
.oc-warn{
  flex:0 0 auto;font-size:12px;line-height:1;color:#F2C93B;cursor:help;
  margin-left:2px;
}

/* wezel PODGLAD: duzy obraz sesji + pasek miniatur */
.oc-prev{display:flex;flex-direction:column;gap:6px}
.oc-prev-main{
  width:100%;border-radius:6px;display:block;object-fit:cover;
  aspect-ratio:16/10;background:#0C0E12;cursor:pointer;
  border:1px solid #21252C;
}
.oc-prev-main:hover{border-color:var(--border-hi)}
.oc-prev-strip{display:flex;gap:5px}
.oc-prev-strip img{
  width:44px;height:34px;object-fit:cover;border-radius:4px;cursor:pointer;
  border:1px solid #21252C;
}
.oc-prev-strip img:hover{border-color:var(--border-hi)}
.oc-prev-empty{
  padding:14px 10px;font-size:10px;line-height:1.6;color:var(--dim);text-align:center;
  border:1px dashed #21252C;border-radius:6px;
}