/* Prevent rubber-band/overscroll background bleed on touchpad 2-finger scroll */
html, body {
  overscroll-behavior: none;
  overflow: hidden;
  height: 100%;
}
/* Canvas-only: a visible native selection highlight looks broken while
   click-dragging to select/move elements on the canvas. Scoped to #playground
   so it doesn't also blank out selection in every panel's text inputs —
   that used to be a bare `::selection`, which made Ctrl+A / drag-select in
   the Bindings panel (and everywhere else) invisible even though it still
   worked functionally. */
#playground ::selection {
  background: transparent;
  color: inherit;
}
#playground ::-moz-selection {
  background: transparent;
  color: inherit;
}
/* Accordion */
.wc-acc_ldg{border:1px solid var(--border);border-radius:5px;margin-bottom:6px;overflow:hidden;}
.wc-acc-head_ldg{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;cursor:pointer;background:var(--panel);user-select:none;transition:background .12s;}
.wc-acc-head_ldg:hover{background:var(--panel2);}
.wc-acc_ldg.wc-open_ldg .wc-acc-head_ldg{background:var(--panel2);border-bottom:1px solid var(--border);}
.wc-acc-title_ldg{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.06em;color:var(--text-hi);}
.wc-acc-dot_ldg{width:6px;height:6px;border-radius:50%;border:1px solid var(--border-h);flex-shrink:0;transition:all .2s;}
.wc-acc_ldg.wc-open_ldg .wc-acc-dot_ldg{background:var(--accent);box-shadow:0 0 7px var(--accent);border-color:var(--accent);}
.wc-acc-right_ldg{display:flex;align-items:center;gap:8px;}
.wc-acc-val_ldg{font-size:11.5px;color:var(--accent);opacity:.65;letter-spacing:.04em;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wc-acc-arr_ldg{font-size:12px;color:var(--text);transition:transform .2s;}
.wc-acc_ldg.wc-open_ldg .wc-acc-arr_ldg{transform:rotate(180deg);}
.wc-acc-body_ldg{display:none;padding:10px;background:var(--panel);}
.wc-acc_ldg.wc-open_ldg .wc-acc-body_ldg{display:block;}

/* Option grids */
.wc-og2_ldg{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
.wc-og3_ldg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;}
.wc-og4_ldg{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:5px;}
.wc-opt_ldg{background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:5px 4px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:border-color .12s,background .12s;}
.wc-opt_ldg:hover{border-color:var(--border-h);}
.wc-opt_ldg.wc-active_ldg{border-color:var(--accent);background:rgba(0,234,255,.05);}
.wc-opt_ldg>span{font-size:11.5px;color:var(--text);text-align:center;line-height:1.3;}
.wc-opt_ldg.wc-active_ldg>span{color:var(--accent);}

/* Neo glow boxes */
.wc-mb_ldg{border-radius:2px;}
.wc-na_ldg{background:var(--neo1);box-shadow:0 0 3px var(--neo1);}
.wc-nb_ldg{background:var(--neo2);box-shadow:0 0 3px var(--neo2);}
.wc-nc_ldg{background:var(--neo3);box-shadow:0 0 3px var(--neo3);}
.wc-nd_ldg{background:rgba(0,234,255,.4);box-shadow:0 0 2px var(--neo1);}

/* justify-items / align-items: item inside a dotted cell */
.wc-ji-canvas_ldg{
  width:100%;height:34px;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:2px;padding:2px;
}
.wc-ji-cell_ldg{
  border:1px dashed rgba(0,234,255,.25);
  border-radius:2px;
  display:flex;
  overflow:hidden;
}

/* justify-content / align-content: whole grid inside dotted outer boundary */
.wc-jc-canvas_ldg{
  width:100%;height:34px;
  border:1px dashed rgba(255,255,255,.15);
  border-radius:2px;
  display:grid;
  position:relative;
  overflow:hidden;
}
/* inner grid that moves around */
.wc-jc-inner_ldg{
  display:grid;
  gap:2px;
  position:absolute;
}

/* Inputs */
.wc-row_ldg{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.wc-lbl_ldg{font-size:11.5px;color:var(--text);opacity:.45;letter-spacing:.05em;text-transform:uppercase;}
.wc-inp_ldg{background:var(--bg);border:1px solid var(--border);border-radius:3px;color:var(--text-hi);font-family:'Courier New',monospace;font-size:12px;padding:3px 6px;outline:none;transition:border-color .12s;}
.wc-inp_ldg:focus{border-color:var(--accent);}
.wc-inp_ldg.wc-sm_ldg{width:44px;text-align:center;}
.wc-inp_ldg.wc-md_ldg{width:72px;}

/* Sub-section label with checkbox */
.wc-slbl_ldg{
  display:flex;align-items:center;gap:6px;
  font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text);opacity:.55;margin:8px 0 5px;
}
.wc-slbl_ldg.wc-disabled_ldg{opacity:.25;pointer-events:none;}
/* custom checkbox */
.wc-chk_ldg{
  width:12px;height:12px;border-radius:2px;border:1px solid var(--border-h);
  background:transparent;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .12s;
}
.wc-chk_ldg.wc-on_ldg{background:var(--accent);border-color:var(--accent);}
.wc-chk_ldg.wc-on_ldg::after{content:'✓';font-size:11.5px;color:#000;line-height:1;}
.wc-opt-section_ldg{transition:opacity .15s;}
.wc-opt-section_ldg.wc-disabled_ldg{opacity:.25;pointer-events:none;}

/* Track builder — each track is a type picker (Fr/Px/%/Auto) + number-param stepper(s),
   stacked top row (type + delete) / bottom row (size control), instead of raw CSS text. */
.wc-track-list_ldg{display:flex;flex-direction:column;gap:4px;margin-bottom:6px;}
.wc-track-item_ldg{display:flex;flex-direction:column;gap:5px;padding:6px 7px;background:var(--panel2);border:1px solid var(--border);border-radius:4px;}
.wc-track-top_ldg{display:flex;align-items:center;gap:5px;}
.wc-track-bottom_ldg{display:flex;align-items:center;gap:6px;}
.wc-track-num_ldg{font-size:11.5px;color:var(--accent);opacity:.5;min-width:10px;}
.wc-track-seg_ldg{display:flex;border:1px solid var(--border);border-radius:3px;overflow:hidden;}
.wc-track-seg-btn_ldg{padding:2px 6px;font-size:11.5px;color:var(--text);opacity:.55;cursor:pointer;font-family:'Courier New',monospace;transition:all .12s;}
.wc-track-seg-btn_ldg:hover{opacity:.85;}
.wc-track-seg-btn_ldg.wc-active_ldg{background:var(--accent);color:#000;opacity:1;}
.wc-track-range-link_ldg{font-size:11.5px;color:var(--text);opacity:.4;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;white-space:nowrap;}
.wc-track-range-link_ldg:hover{opacity:.7;}
.wc-track-range-link_ldg.wc-active_ldg{color:var(--accent);opacity:.9;}
.wc-track-auto-note_ldg{font-size:11.5px;color:var(--text);opacity:.4;font-style:italic;}
.wc-track-bar_ldg{height:6px;border-radius:2px;min-width:4px;max-width:60px;}
.wc-trk-del_ldg{background:transparent;border:none;color:var(--text);opacity:.4;cursor:pointer;font-size:12px;padding:0 2px;line-height:1;margin-left:auto;}
.wc-trk-del_ldg:hover{opacity:.9;color:var(--neo3);}
.wc-add-track_ldg{display:flex;gap:4px;margin-top:4px;}
.wc-add-track_ldg button{padding:3px 8px;background:transparent;border:1px solid var(--border-h);border-radius:3px;color:var(--accent);font-family:'Courier New',monospace;font-size:12px;cursor:pointer;transition:all .12s;}
.wc-add-track_ldg button:hover{background:rgba(0,234,255,.07);}
.wc-repeat-pill_ldg{margin-top:5px;font-size:11.5px;color:var(--accent);opacity:.55;padding:4px 7px;background:rgba(0,234,255,.04);border:1px dashed rgba(0,234,255,.2);border-radius:3px;word-break:break-all;min-height:18px;}

/* track-bottom_ldg's number-param steppers, sized down to fit the sidebar */
.wc-ldg-stepper-field{display:flex;align-items:center;gap:4px;}
.wc-ldg-stepper-lbl{font-size:11.5px;color:var(--text);opacity:.4;white-space:nowrap;}
.wc-ldg-stepper .wc-number-param{font-size:12px;}
.wc-ldg-stepper .wc-numberParamUpdate{width:14px;height:14px;font-size:12px;}
.wc-ldg-stepper .wc-number-param-val{min-width:24px;line-height:14px;font-size:12px;}

/* Gap */
.wc-gap-row_ldg{display:flex;align-items:center;gap:6px;margin-bottom:5px;}
.wc-gap-lbl_ldg{font-size:11.5px;color:var(--text);opacity:.45;}
.wc-gap-val_ldg{font-size:12px;color:var(--accent);min-width:28px;text-align:right;}
.wc-unit-tog_ldg{display:flex;border:1px solid var(--border);border-radius:3px;overflow:hidden;}
.wc-unit-btn_ldg{padding:2px 7px;font-size:11.5px;cursor:pointer;font-family:'Courier New',monospace;transition:all .12s;}

/* Stacking cell — diagonal split with SVG triangles */
.wc-gcell_ldg.wc-stacked_ldg{position:relative;overflow:hidden;}
.wc-st-tri_ldg{position:absolute;top:0;left:0;width:100%;height:100%;}
.wc-areas-wrap_ldg{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;}
.wc-grid-canvas_ldg{display:grid;border:1px solid var(--border);border-radius:4px;overflow:hidden;flex-shrink:0;user-select:none;}
.wc-gcell_ldg{border:1px solid rgba(0,234,255,.1);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:rgba(255,255,255,.5);cursor:crosshair;transition:border-color .1s;}
.wc-gcell_ldg:hover{border-color:var(--accent);}
.wc-gcell_ldg.wc-painted_ldg{color:rgba(0,0,0,.72);}
.wc-area-rows-list_ldg{display:flex;flex-direction:column;gap:4px;}
.wc-area-row_ldg{display:flex;align-items:center;gap:6px;}
.wc-area-dot_ldg{width:10px;height:10px;border-radius:50%;flex-shrink:0;cursor:pointer;transition:box-shadow .12s;animation:areaDotPulse_ldg 1.4s ease-in-out infinite;}
.wc-area-dot_ldg.wc-sel_ldg{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent);animation:none;}
@keyframes areaDotPulse_ldg{0%,100%{box-shadow:0 0 0 2px var(--bg),0 0 0 4px transparent;}50%{box-shadow:0 0 0 2px var(--bg),0 0 0 4px rgba(0,234,255,.55);}}
.wc-area-name_ldg{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:3px;color:var(--text-hi);font-family:'Courier New',monospace;font-size:12px;padding:2px 5px;outline:none;min-width:0;}
.wc-area-name_ldg:focus{border-color:var(--accent);}
.wc-area-del_ldg{background:transparent;border:none;color:var(--text);opacity:.35;cursor:pointer;font-size:12px;padding:0;line-height:1;}
.wc-area-del_ldg:hover{opacity:.9;color:var(--neo3);}
.wc-add-area_ldg{padding:3px 8px;background:transparent;border:1px solid var(--border-h);border-radius:3px;color:var(--accent);font-family:'Courier New',monospace;font-size:12px;cursor:pointer;transition:all .12s;margin-top:6px;width:100%;}
.wc-add-area_ldg:hover{background:rgba(0,234,255,.07);}
.wc-area-warn_ldg{font-size:11.5px;color:var(--neo3);margin-top:4px;min-height:12px;}
.wc-area-hint_ldg{font-size:11px;color:var(--text);opacity:.5;margin-top:4px;}
.wc-area-hint_ldg.wc-armed_ldg{color:var(--accent);opacity:.85;}
.wc-areas-out_ldg{margin-top:8px;font-size:11.5px;color:var(--text);background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:7px;line-height:1.8;word-break:break-all;}
.wc-areas-out_ldg .wc-ak_ldg{color:var(--neo2);}
.wc-areas-out_ldg .wc-av_ldg{color:var(--accent);}

/* Live */
.wc-live_ldg{background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:8px;margin-top:8px;}
.wc-live-lbl_ldg{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);opacity:.5;margin-bottom:6px;}
.wc-live-grid_ldg{width:100%;min-height:100px;display:grid;gap:4px;border:1px dashed rgba(0,234,255,.12);border-radius:3px;padding:5px;transition:all .3s;}
.wc-live-cell_ldg{border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:rgba(0,0,0,.72);min-height:24px;transition:all .3s;}
.wc-css-out_ldg{margin-top:7px;font-size:11.5px;line-height:1.9;color:var(--text);word-break:break-all;}
.wc-css-out_ldg .wc-p_ldg{color:var(--neo2);}
.wc-css-out_ldg .wc-v_ldg{color:var(--accent);}



#wb-context-tabs{
  display:flex;
  align-items:center;
  gap:2px;
  padding:0 6px;
  height:28px;
  background:#1a1a1a;
  border-bottom:1px solid #2e2e2e;
  overflow-x:auto;
  flex-shrink:0;
}
#wb-context-tabs::-webkit-scrollbar{height:2px;}
#wb-context-tabs::-webkit-scrollbar-track{background:transparent;}
#wb-context-tabs::-webkit-scrollbar-thumb{background:#444;}

.wc-ctx-tab{
  padding:2px 9px;
  border:none;
  border-radius:3px;
  background:transparent;
  color:rgba(255,255,255,0.45);
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
  max-width:130px;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:background .12s,color .12s;
  flex-shrink:0;
}
.wc-ctx-tab:hover{background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.85);}
.wc-ctx-tab.wc-ctx-tab-active{background:rgba(255,255,255,0.11);color:#fff;font-weight:500;}
.wc-ctx-tab-module{color:rgba(100,180,255,0.55);}
.wc-ctx-tab-module:hover{color:rgba(100,180,255,0.95);}
.wc-ctx-tab-module.wc-ctx-tab-active{color:#64b4ff;background:rgba(100,180,255,0.11);}
.wc-ctx-sep{color:rgba(255,255,255,0.18);padding:0 3px;font-size:12px;flex-shrink:0;}
.wc-pages-wrap{padding:0;}
.wc-pages-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(0,234,255,0.08);margin-bottom:0;}
.wc-pages-header .wc-right_heading{margin:0;font-size:12px;color:rgba(255,255,255,0.6);letter-spacing:.08em;text-transform:uppercase;font-weight:600;}
.wc-pages-add-btn{display:inline-flex;align-items:center;gap:5px;background:rgba(0,234,255,0.09);border:1px solid rgba(0,234,255,0.3);color:rgba(0,234,255,0.85);cursor:pointer;border-radius:5px;padding:4px 10px;font-size:12px;line-height:1.4;font-weight:500;transition:all .15s;position:relative;overflow:hidden;}
.wc-pages-add-btn::before{content:'';position:absolute;inset:0;background:rgba(0,234,255,0.05);opacity:0;transition:opacity .15s;}
.wc-pages-add-btn:hover{background:rgba(0,234,255,0.16);border-color:rgba(0,234,255,0.55);color:#00eaff;}
.wc-pages-add-btn:hover::before{opacity:1;}
.wc-pages-add-btn:active{transform:scale(0.98);}
/* modules-specific styles */
#wb-modules-list{display:flex;flex-direction:column;gap:0;padding:8px;}
#wb-modules-list .wc-pages-item{margin-bottom:2px;}
.wc-modules-search-wrap{padding:8px 10px;border-bottom:1px solid rgba(0,234,255,0.06);}
.wc-modules-search-inp{width:100%;padding:6px 8px;background:rgba(255,255,255,0.05);border:1px solid rgba(0,234,255,0.15);border-radius:5px;color:rgba(255,255,255,0.9);font-size:12px;outline:none;font-family:inherit;transition:border-color .15s,background .15s;}
.wc-modules-search-inp::placeholder{color:rgba(255,255,255,0.3);}
.wc-modules-search-inp:focus{border-color:rgba(0,234,255,0.4);background:rgba(0,234,255,0.04);}
/* Project Explorer — panel */
.wc-proj-panel-wrap{padding:10px 10px 12px;}
.wc-proj-panel-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.wc-proj-panel-header .wc-right_heading{margin:0;font-size:11px;font-weight:500;color:rgba(255,255,255,0.4);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;}
.wc-proj-switch-btn{background:none;border:1px solid rgba(255,255,255,0.14);color:rgba(255,255,255,0.55);cursor:pointer;border-radius:4px;padding:3px 8px;font-size:12px;transition:border-color .15s,color .15s;}
.wc-proj-switch-btn:hover{border-color:rgba(0,234,255,0.45);color:#00eaff;}
.wc-proj-active-row{display:flex;align-items:center;gap:7px;margin-bottom:3px;}
.wc-proj-active-name{font-size:12px;font-weight:500;color:rgba(255,255,255,0.85);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wc-proj-active-meta{font-size:12px;color:rgba(255,255,255,0.35);margin-bottom:10px;padding-left:21px;}
.wc-proj-panel-titlewrap{display:flex;align-items:center;gap:7px;min-width:0;}
/* Plan usage: the pill is the number, the hairline under the header is the
   feeling. "9/10" alone never read as "nearly out of room". */
.wc-proj-count-badge{display:inline-flex;align-items:center;justify-content:center;gap:1px;min-width:17px;height:15px;padding:0 5px;border-radius:4px;background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;transition:background .15s,color .15s;}
.wc-proj-count-used{color:rgba(255,255,255,0.65);}
.wc-proj-count-sep{color:rgba(255,255,255,0.22);margin:0 1px;font-weight:500;}
.wc-proj-count-max{color:rgba(255,255,255,0.32);font-weight:500;}
.wc-proj-count-badge.wc-proj-count-near{background:rgba(255,190,60,0.13);}
.wc-proj-count-near .wc-proj-count-used{color:#ffbe3c;}
.wc-proj-count-near .wc-proj-count-max{color:rgba(255,190,60,0.5);}
.wc-proj-count-near .wc-proj-count-sep{color:rgba(255,190,60,0.35);}
.wc-proj-count-badge.wc-proj-count-full{background:rgba(255,90,110,0.15);}
.wc-proj-count-full .wc-proj-count-used{color:#ff6b7f;}
.wc-proj-count-full .wc-proj-count-max{color:rgba(255,107,127,0.55);}
.wc-proj-count-full .wc-proj-count-sep{color:rgba(255,107,127,0.4);}
.wc-proj-meter{height:2px;border-radius:2px;background:rgba(255,255,255,0.07);overflow:hidden;margin:0 0 9px;}
.wc-proj-meter-fill{display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,#00a8c8,#00eaff);transition:width .35s cubic-bezier(.4,0,.2,1),background .2s;}
.wc-proj-meter-near .wc-proj-meter-fill{background:linear-gradient(90deg,#d99a1f,#ffbe3c);}
.wc-proj-meter-full .wc-proj-meter-fill{background:linear-gradient(90deg,#d4425a,#ff6b7f);}

.wc-proj-panel-header-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.wc-proj-new-btn-sidebar{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.65);cursor:pointer;border-radius:5px;padding:4px 9px;font-size:11px;font-weight:600;line-height:1;font-family:inherit;letter-spacing:.03em;transition:background .15s,border-color .15s,color .15s;}
.wc-proj-new-btn-sidebar svg{display:block;}
.wc-proj-new-btn-sidebar:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.22);color:rgba(255,255,255,0.9);}
.wc-proj-new-btn-sidebar:active{transform:translateY(1px);}
.wc-proj-reload-btn-sidebar{background:none;border:none;color:rgba(255,255,255,0.38);cursor:pointer;border-radius:6px;transition:color .15s,background .15s;height:26px;width:26px;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;}
.wc-proj-reload-btn-sidebar svg{display:block;}
.wc-proj-reload-btn-sidebar:hover{color:#00eaff;background:rgba(255,255,255,0.06);}
.wc-proj-reload-btn-sidebar.spinning{animation:wc-proj-reload-spin .7s linear infinite;color:#00eaff;pointer-events:none;}

/* Search — icon inside the field, clear button appears once it's in use. */
.wc-proj-search-wrap{position:relative;display:flex;align-items:center;margin-bottom:9px;}
.wc-proj-search-ico{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,0.25);pointer-events:none;transition:color .15s;}
.wc-proj-search-wrap:focus-within .wc-proj-search-ico{color:rgba(255,255,255,0.55);}
.wc-proj-search-inp{width:100%;padding:6px 26px 6px 30px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:6px;color:rgba(255,255,255,0.85);font-size:12px;outline:none;font-family:inherit;transition:border-color .15s,background .15s;}
.wc-proj-search-inp::placeholder{color:rgba(255,255,255,0.22);font-size:12px;}
.wc-proj-search-inp:focus{border-color:rgba(0,234,255,0.4);background:rgba(0,234,255,0.045);}
.wc-proj-search-clear{position:absolute;right:7px;display:none;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.55);font-size:13px;line-height:1;cursor:pointer;transition:background .12s,color .12s;}
.wc-proj-search-clear:hover{background:rgba(255,255,255,0.2);color:#fff;}

.wc-proj-live-summary{display:flex;align-items:center;gap:6px;margin:0 0 9px;padding:5px 8px;border-radius:7px;background:rgba(52,231,140,0.08);border:1px solid rgba(52,231,140,0.22);color:rgba(120,240,180,0.9);font-size:14px;font-weight:500;}
.wc-proj-live-dot{width:6px;height:6px;border-radius:50%;background:#34e78c;box-shadow:0 0 0 0 rgba(52,231,140,0.6);animation:wc-proj-live-pulse 1.8s ease-out infinite;flex-shrink:0;}
.wc-proj-live-badge{display:inline-flex;align-items:center;gap:3px;flex-shrink:0;background:rgba(52,231,140,0.1);border:1px solid rgba(52,231,140,0.3);color:rgba(120,240,180,0.95);cursor:pointer;border-radius:4px;padding:1px 5px;font-size:13px;font-weight:600;line-height:1.5;font-family:inherit;transition:background .12s,border-color .12s;}
.wc-proj-live-badge:hover{background:rgba(52,231,140,0.2);border-color:rgba(52,231,140,0.5);}
.wc-proj-live-badge .wc-proj-live-dot{width:4px;height:4px;}
.wc-proj-live-time{font-variant-numeric:tabular-nums;letter-spacing:.01em;}
.wc-proj-panel-item.has-live{border-color:rgba(52,231,140,0.2);}

/* Empty / no-match state */
.wc-proj-panel-none{display:flex;flex-direction:column;align-items:center;gap:3px;padding:26px 10px;text-align:center;color:rgba(255,255,255,0.3);font-size:14px;line-height:1.6;}
.wc-proj-panel-none svg{color:rgba(255,255,255,0.16);margin-bottom:4px;}
.wc-proj-panel-none-title{color:rgba(255,255,255,0.58);font-size:14px;font-weight:600;}
.wc-proj-panel-none strong{color:rgba(0,234,255,0.8);font-weight:600;}

/* Rows: dense enough that a full plan's worth of projects fits without
   scrolling, grouped by recency so the list reads as a timeline. */
.wc-proj-panel-list{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;}
.wc-proj-group-label{padding:8px 2px 3px;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,0.2);}
.wc-proj-group-label:first-child{padding-top:0;}
.wc-proj-panel-item{position:relative;display:flex;align-items:center;gap:9px;padding:6px 7px 6px 9px;border-radius:8px;border:1px solid transparent;background:transparent;transition:background .13s,border-color .13s,box-shadow .13s;cursor:pointer;}
.wc-proj-panel-item::before{content:'';position:absolute;left:2px;top:9px;bottom:9px;width:2px;border-radius:2px;background:transparent;transition:background .14s;}
.wc-proj-panel-item:hover{background:rgba(255,255,255,0.055);border-color:rgba(255,255,255,0.09);}
.wc-proj-panel-item.active{border-color:rgba(0,234,255,0.26);background:rgba(0,234,255,0.075);cursor:default;}
.wc-proj-panel-item.active::before{background:#00c8e8;box-shadow:0 0 8px rgba(0,234,255,0.6);}
.wc-proj-panel-item.active:hover{background:rgba(0,234,255,0.09);}
.wc-proj-panel-item-icon{flex-shrink:0;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;letter-spacing:.02em;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.14);text-shadow:0 1px 1px rgba(0,0,0,0.35);}
.wc-proj-panel-item.active .wc-proj-panel-item-icon{box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2),0 0 0 2px rgba(0,234,255,0.32);}
.wc-proj-panel-item-info{flex:1;min-width:0;cursor:pointer;}
.wc-proj-panel-item-name{display:block;font-size:13px;font-weight:500;color:rgba(255,255,255,0.78);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wc-proj-panel-item:hover .wc-proj-panel-item-name{color:rgba(255,255,255,0.95);}
.wc-proj-panel-item.active .wc-proj-panel-item-name{color:#fff;font-weight:600;}
.wc-proj-panel-item-meta{display:flex;align-items:center;gap:5px;margin-top:1px;min-width:0;}
.wc-proj-panel-item-time{font-size:11px;color:rgba(255,255,255,0.28);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wc-proj-open-tag{display:inline-block;flex-shrink:0;padding:1px 6px;border-radius:3px;background:transparent;border:1px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.4);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;line-height:1.6;}
/* Actions stay out of the way until the row is hovered (keyboard focus surfaces
   them too). They float ABOVE the row rather than sitting in its flex flow: in a
   220px sidebar three inline buttons would chop ~70px off every project name for
   as long as the pointer rests there. The backdrop repeats the row's own two
   layers — panel colour plus hover tint — so the name simply slides under it. */
.wc-proj-panel-item-actions{position:absolute;right:5px;top:50%;display:flex;align-items:center;gap:2px;padding-left:18px;opacity:0;pointer-events:none;transform:translateY(-50%) translateX(4px);transition:opacity .12s,transform .12s;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.055) 16px),linear-gradient(90deg,transparent,var(--bg-panel,#141414) 16px);}
.wc-proj-panel-item.active .wc-proj-panel-item-actions{background:linear-gradient(90deg,transparent,rgba(0,234,255,0.09) 16px),linear-gradient(90deg,transparent,var(--bg-panel,#141414) 16px);}
.wc-proj-panel-item:hover .wc-proj-panel-item-actions,
.wc-proj-panel-item:focus-within .wc-proj-panel-item-actions{opacity:1;pointer-events:auto;transform:translateY(-50%);}
.wc-proj-panel-item-act-btn{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.5);cursor:pointer;border-radius:6px;width:21px;height:21px;display:flex;align-items:center;justify-content:center;padding:0;font-size:14px;transition:background .12s,border-color .12s,color .12s;line-height:1;}
.wc-proj-panel-item-act-btn svg{display:block;}
.wc-proj-panel-item-act-btn:hover{background:rgba(255,255,255,0.13);border-color:rgba(255,255,255,0.26);color:#fff;}
.wc-proj-panel-item-del:hover{background:rgba(255,60,60,0.16);border-color:rgba(255,70,70,0.42);color:#ff7373;}
.wc-proj-panel-item .wc-proj-rename-input{font-size:14px;padding:1px 4px;}
/* Renaming in place: the floating actions would sit on top of the field. */
.wc-proj-panel-item:has(.wc-proj-rename-input) .wc-proj-panel-item-actions{display:none;}
@keyframes wc-proj-reload-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes wc-proj-live-pulse{0%{box-shadow:0 0 0 0 rgba(52,231,140,0.55)}70%{box-shadow:0 0 0 5px rgba(52,231,140,0)}100%{box-shadow:0 0 0 0 rgba(52,231,140,0)}}
/* Themed scrollbar for the left sidebar sections, incl. Project Explorer */
.wc-section.wc-active::-webkit-scrollbar{width:6px;}
.wc-section.wc-active::-webkit-scrollbar-track{background:transparent;}
.wc-section.wc-active::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:3px;}
.wc-section.wc-active::-webkit-scrollbar-thumb:hover{background:rgba(0,234,255,0.35);}
/* Project Explorer — popup overlay */
.wc-proj-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);display:flex;align-items:center;justify-content:center;z-index:99990;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .18s;}
.wc-proj-popup-overlay.wc-proj-popup-visible{opacity:1;pointer-events:all;}
.wc-proj-popup-box{background:#16182a;border:1px solid rgba(255,255,255,0.1);border-radius:12px;width:460px;max-width:92vw;max-height:72vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.7);}
.wc-proj-popup-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid rgba(255,255,255,0.07);flex-shrink:0;}
.wc-proj-popup-title{font-size:14px;font-weight:600;color:rgba(255,255,255,0.9);}
.wc-proj-popup-actions{display:flex;align-items:center;gap:8px;}
.wc-proj-new-btn{background:rgba(0,234,255,0.09);border:1px solid rgba(0,234,255,0.28);color:rgba(0,234,255,0.85);cursor:pointer;border-radius:6px;padding:5px 12px;font-size:12px;font-family:inherit;transition:all .15s;}
.wc-proj-new-btn:hover{background:rgba(0,234,255,0.18);border-color:rgba(0,234,255,0.55);color:#00eaff;}
.wc-proj-close-btn{background:none;border:none;color:rgba(255,255,255,0.35);cursor:pointer;font-size:16px;line-height:1;padding:2px 4px;border-radius:4px;transition:color .12s;}
.wc-proj-close-btn:hover{color:rgba(255,255,255,0.8);}
.wc-proj-popup-list{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:5px;}
.wc-proj-popup-empty{padding:28px 0;font-size:12px;color:rgba(255,255,255,0.3);text-align:center;line-height:1.8;}
.wc-proj-card{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.03);transition:background .12s,border-color .12s;}
.wc-proj-card:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.1);}
.wc-proj-card.wc-proj-card-active{border-color:rgba(0,234,255,0.25);background:rgba(0,234,255,0.05);}
.wc-proj-card-icon{flex-shrink:0;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;letter-spacing:.02em;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.14);text-shadow:0 1px 1px rgba(0,0,0,0.35);}
.wc-proj-card.wc-proj-card-active .wc-proj-card-icon{box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18),0 0 0 2px rgba(0,234,255,0.3);}
.wc-proj-card-info{flex:1;min-width:0;}
.wc-proj-card-name{display:block;font-size:12px;color:rgba(255,255,255,0.85);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wc-proj-card-meta{display:block;font-size:12px;color:rgba(255,255,255,0.35);margin-top:2px;}
.wc-proj-rename-input{width:100%;background:rgba(255,255,255,0.07);border:1px solid rgba(0,234,255,0.4);border-radius:3px;color:#fff;font-size:12px;padding:1px 5px;outline:none;font-family:inherit;}
.wc-proj-card-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.wc-proj-act{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.6);cursor:pointer;border-radius:4px;padding:3px 9px;font-size:12px;font-family:inherit;transition:all .12s;line-height:1;}
.wc-proj-act:hover{background:rgba(255,255,255,0.12);color:#fff;border-color:rgba(255,255,255,0.2);}
.wc-proj-act-open{background:rgba(0,234,255,0.08);border-color:rgba(0,234,255,0.25);color:rgba(0,234,255,0.75);}
.wc-proj-act-open:hover{background:rgba(0,234,255,0.16);border-color:rgba(0,234,255,0.5);color:#00eaff;}
.wc-proj-act-current{background:rgba(0,234,255,0.14);border-color:rgba(0,234,255,0.4);color:#00eaff;cursor:default;}
.wc-proj-act-current:hover{background:rgba(0,234,255,0.14);border-color:rgba(0,234,255,0.4);color:#00eaff;}
.wc-proj-act-icon{padding:3px 7px;}
.wc-proj-act-del:hover{background:rgba(255,60,60,0.12);border-color:rgba(255,60,60,0.3);color:#ff7373;}
#wb-pages-list{display:flex;flex-direction:column;gap:2px;}
.wc-pages-item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:6px;cursor:pointer;font-size:12px;color:rgba(255,255,255,0.65);transition:all .12s cubic-bezier(.34,1.56,.64,1);user-select:none;border:1px solid rgba(0,234,255,0.08);background:rgba(0,0,0,0.15);position:relative;overflow:hidden;}
.wc-pages-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:rgba(0,234,255,0);transition:background .15s;}
.wc-pages-item:hover{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.95);border-color:rgba(0,234,255,0.2);transform:translateX(2px);}
.wc-pages-item.wc-active{background:rgba(0,234,255,0.12);color:#00eaff;border-color:rgba(0,234,255,0.35);}
.wc-pages-item.wc-active::before{background:rgba(0,234,255,0.7);}
.wc-pages-item-icon{flex-shrink:0;opacity:0.5;display:flex;align-items:center;width:16px;height:16px;color:rgba(0,234,255,0.6);transition:opacity .15s,color .15s;}
.wc-pages-item:hover .wc-pages-item-icon{opacity:0.8;color:rgba(0,234,255,0.9);}
.wc-pages-item.wc-active .wc-pages-item-icon{opacity:1;color:#00eaff;}
.wc-pages-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline:none;font-weight:500;}
.wc-pages-item-name[contenteditable="true"]{background:rgba(255,255,255,0.08);border-radius:3px;padding:1px 4px;color:#fff;cursor:text;font-weight:inherit;}
.wc-pages-item-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:16px;padding:0 4px;background:rgba(0,234,255,0.1);border:1px solid rgba(0,234,255,0.2);border-radius:3px;color:rgba(0,234,255,0.7);font-size:12px;font-weight:600;flex-shrink:0;}
.wc-pages-item:hover .wc-pages-item-badge{background:rgba(0,234,255,0.15);border-color:rgba(0,234,255,0.35);}
.wc-pages-item-actions{display:flex;align-items:center;gap:2px;flex-shrink:0;opacity:0;transition:opacity .12s;}
.wc-pages-item:hover .wc-pages-item-actions{opacity:1;}
.wc-pages-item-action{background:none;border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.4);cursor:pointer;padding:3px 5px;border-radius:3px;display:flex;align-items:center;justify-content:center;line-height:1;transition:all .12s;font-size:12px;}
.wc-pages-item-action:hover{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.85);border-color:rgba(255,255,255,0.2);}
.wc-pages-item-del{color:rgba(255,80,80,0.5);}
.wc-pages-item-del:hover{background:rgba(255,60,60,0.15);border-color:rgba(255,60,60,0.4);color:rgba(255,90,90,0.95);}
.wc-modules-empty{padding:20px 16px;text-align:center;color:rgba(255,255,255,0.3);font-size:12px;line-height:1.6;}
.wc-modules-empty-icon{font-size:28px;margin-bottom:8px;opacity:0.5;}
.wc-modules-empty strong{display:block;color:rgba(255,255,255,0.45);font-weight:600;margin-bottom:4px;}
.wc-pages-rename-input{flex:1;min-width:0;background:rgba(255,255,255,0.07);border:1px solid rgba(0,234,255,0.35);border-radius:3px;color:#fff;font-size:12px;padding:1px 5px;outline:none;font-family:inherit;width:100%;}
.wc-pages-rename-input.wc-pages-rename-error{border-color:rgba(255,60,60,0.7);background:rgba(255,40,40,0.08);animation:pages-shake .25s ease;}
@keyframes pages-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
/* Module creation modal */

.wc-module-create-inp{color:white;}
.wc-create-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:99999;backdrop-filter:blur(3px);}
.wc-create-modal-box{background:#1a1d2e;border:1px solid rgba(255,255,255,0.12);border-radius:10px;padding:22px 24px;min-width:280px;max-width:360px;width:90%;box-shadow:0 16px 48px rgba(0,0,0,0.6);}
.wc-create-modal-title{font-size:14px;font-weight:600;color:rgba(255,255,255,0.9);margin-bottom:16px;}
.wc-create-modal-label{display:block;font-size:12px;color:rgba(255,255,255,0.4);letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px;}
.wc-create-modal-input{width:100%;box-sizing:border-box;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:6px;color:#fff;font-size:13px;font-family:inherit;padding:7px 10px;outline:none;transition:border-color .15s,background .15s;}
.wc-create-modal-input:focus{border-color:rgba(0,234,255,0.45);}
.wc-create-modal-input.wc-input-error{border-color:rgba(255,60,60,0.7);background:rgba(255,40,40,0.08);animation:pages-shake .25s ease;}
.wc-create-modal-slug{font-size:12px;color:rgba(0,234,255,0.65);margin-top:4px;min-height:14px;letter-spacing:.03em;}
.wc-create-modal-err{font-size:12px;color:rgba(255,80,80,0.85);margin-top:3px;min-height:14px;}
.wc-create-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;}
.wc-create-modal-btn{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.7);font-size:12px;padding:6px 16px;border-radius:6px;cursor:pointer;transition:all .12s;font-family:inherit;}
.wc-create-modal-btn:hover{background:rgba(255,255,255,0.1);color:#fff;}
.wc-create-modal-btn-primary{background:rgba(0,234,255,0.12);border-color:rgba(0,234,255,0.35);color:#00eaff;}
.wc-create-modal-btn-primary:hover{background:rgba(0,234,255,0.2);border-color:rgba(0,234,255,0.6);}
.wc-create-modal-btn-danger{background:rgba(255,45,120,0.08);border-color:rgba(255,45,120,0.3);color:rgba(255,110,150,0.9);}
.wc-create-modal-btn-danger:hover{background:rgba(255,45,120,0.16);border-color:rgba(255,45,120,0.55);color:#ff6e96;}
.wc-dom-usage-row{background:rgba(255,255,255,0.04);border-left:2px solid;border-radius:5px;padding:7px 9px;margin-bottom:5px;text-align:left;}
.wc-dom-usage-warn{color:#ffb454;font-weight:600;}
.wc-mod-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:2px;}
.wc-mod-type-btn{display:flex;flex-direction:column;align-items:center;gap:5px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:7px;color:rgba(255,255,255,0.55);font-size:12px;font-family:inherit;padding:9px 4px 7px;cursor:pointer;transition:all .12s;line-height:1;}
.wc-mod-type-btn:hover{background:rgba(255,255,255,0.09);color:rgba(255,255,255,0.85);border-color:rgba(255,255,255,0.2);}
.wc-mod-type-btn.wc-active{background:rgba(0,234,255,0.1);border-color:rgba(0,234,255,0.45);color:#00eaff;}
/* Module insert-at slot panel */
.wc-mod-slot-header{display:flex;align-items:center;justify-content:space-between;padding:0 2px 6px;gap:6px;}
.wc-mod-slot-header>span:first-child{font-size:12px;color:rgba(255,255,255,0.3);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;}
.wc-mod-slot-node-lbl{font-size:12px;color:rgba(0,234,255,0.7);font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#wb-mod-children-slots{display:flex;flex-direction:column;}
.wc-mod-divider{position:relative;height:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.wc-mod-divider::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,0.07);transition:background-color .12s,height .12s;}
.wc-mod-divider-btn{position:relative;z-index:1;width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.18);color:rgba(255,255,255,0.45);font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .12s;cursor:pointer;padding:0;}
.wc-mod-divider:hover .wc-mod-divider-btn{opacity:1;}
.wc-mod-divider:hover::before{background:rgba(0,234,255,0.3);}
.wc-mod-divider.wc-mod-divider-active::before{background:#00eaff;height:2px;}
.wc-mod-divider.wc-mod-divider-active .wc-mod-divider-btn{opacity:1;background:rgba(0,234,255,0.25);border-color:#00eaff;color:#00eaff;}
.wc-mod-divider.wc-mod-divider-dragover::before{background:#00eaff;height:2px;}
.wc-mod-child-row{display:flex;align-items:center;gap:6px;padding:4px 4px;border-radius:4px;cursor:grab;}
.wc-mod-child-row:hover{background:rgba(255,255,255,0.05);}
.wc-mod-child-row.wc-mod-child-dragging{opacity:0.35;}
.wc-mod-child-handle{color:rgba(255,255,255,0.22);font-size:12px;flex-shrink:0;}
.wc-mod-child-lbl{font-size:12px;color:rgba(255,255,255,0.55);font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
.wc-mod-child-empty{font-size:12px;color:rgba(255,255,255,0.25);padding:4px 2px;font-style:italic;text-align:center;}
/* Floating "linked module" badge — purple to match the read-only/Preview
   mode accent already used elsewhere (#toggleBtn_0.active) */
.wc-module-locked-label{display:flex;align-items:center;background:rgba(10,15,25,0.92);border:1px solid rgba(168,85,247,0.45);color:#c084fc;font-size:12px;font-family:inherit;padding:4px 10px;border-radius:20px;white-space:nowrap;box-shadow:0 2px 12px rgba(0,0,0,0.5);}
.wc-module-locked-edit-btn{display:flex;align-items:center;background:rgba(168,85,247,0.14);border:1px solid rgba(168,85,247,0.5);color:#c084fc;font-size:12px;font-family:inherit;padding:4px 10px;border-radius:20px;cursor:pointer;white-space:nowrap;box-shadow:0 2px 12px rgba(0,0,0,0.5);transition:all .12s;}
.wc-module-locked-edit-btn:hover{background:rgba(168,85,247,0.25);border-color:rgba(168,85,247,0.8);}
.wc-module-locked-unlink-btn{display:flex;align-items:center;background:rgba(240,80,80,0.12);border:1px solid rgba(240,80,80,0.45);color:#f0a0a0;font-size:12px;font-family:inherit;padding:4px 10px;border-radius:20px;cursor:pointer;white-space:nowrap;box-shadow:0 2px 12px rgba(0,0,0,0.5);transition:all .12s;}
.wc-module-locked-unlink-btn:hover{background:rgba(240,80,80,0.22);border-color:rgba(240,80,80,0.75);}

/* Linked module instance on canvas — locked, styled distinctly (purple) from
   the normal cyan edit-mode outline so it reads as "not directly editable here" */
.wc-edit-mode-el.wc-module-linked-instance{outline:1.5px dashed #a855f799 !important;}
.wc-edit-mode-el.wc-module-linked-instance:hover{outline:1.5px solid #a855f7cc !important;}
.wc-edit-mode-el.wc-module-linked-instance.wc-selected{outline:2px solid #a855f7 !important;}
.wc-box.wc-module-linked-instance.wc-selected{border:2px solid #a855f7 !important;}

/* Insert-mode choice modal (Copy vs Linked) */
.wc-mod-insert-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px;}
.wc-mod-insert-mode-btn{display:flex;flex-direction:column;align-items:flex-start;gap:6px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:rgba(255,255,255,0.85);font-family:inherit;padding:12px;cursor:pointer;text-align:left;transition:all .12s;}
.wc-mod-insert-mode-btn:hover{background:rgba(0,234,255,0.08);border-color:rgba(0,234,255,0.4);}
.wc-mod-insert-mode-title{font-size:12px;font-weight:600;letter-spacing:.02em;}
.wc-mod-insert-mode-desc{font-size:12px;line-height:1.4;color:rgba(255,255,255,0.5);}
/* ModuleShow editor area */
#wb-ModuleShow{width:100%;min-height:100%;background:white;color:black;box-sizing:border-box;color-scheme:light;}

/* Reset canvas form controls to the browser's own UA-stylesheet default
   (native border, native font, native white background) instead of
   inheriting the dark editor UI's font/colors or the forced-dark heuristic. */
#playground input, #playground textarea, #playground select,
#wb-ModuleShow input, #wb-ModuleShow textarea, #wb-ModuleShow select {
  all: revert;
  color-scheme: light;
}



.wc-context-menu {
  position: fixed;
  display: none;
  list-style: none;
  padding: 4px 0;
  margin: 0;
  background: #1e1e24;
  border: 1px solid rgba(0,234,255,0.22);
  box-shadow: 0 12px 40px rgba(0,0,0,0.75), 0 0 0 1px rgba(0,234,255,0.06);
  min-width: 170px;
  z-index: 9999;
  border-radius: 8px;
  font-size:12px;
  font-family: inherit;
}
.wc-context-menu li {
  padding: 7px 14px;
  cursor: pointer;
  color: rgba(255,255,255,0.72);
  transition: background .1s, color .1s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wc-context-menu li:hover {
  background: rgba(0,234,255,0.08);
  color: #00eaff;
}
.wc-context-menu li.wc-ctx-sep {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 2px;
}
.wc-context-menu li[data-action="delete"] {
  border-top: 1px solid rgba(255,80,80,0.18);
  margin-top: 2px;
}
.wc-context-menu li[data-action="delete"]:hover {
  background: rgba(255,80,80,0.12);
  color: #ff6060;
}
.wc-context-menu li.wc-ctx-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  position: relative;
}
.wc-context-menu li.wc-ctx-disabled:hover {
  background: transparent;
  color: rgba(255,255,255,0.72);
}
.wc-context-menu li[data-action="delete"].wc-ctx-disabled:hover {
  background: transparent;
  color: rgba(255,100,100,0.85);
}
.wc-context-menu li.wc-ctx-disabled[data-tooltip]:not([data-tooltip=""])::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #1a1a1a;
  color: #fff;
  font-size:12px;
  font-weight: 400;
  white-space: nowrap;
  padding: 5px 8px;
  border-radius: 5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.wc-context-menu li.wc-ctx-disabled:hover[data-tooltip]:not([data-tooltip=""])::after {
  opacity: 1;
}

.wc-hover-info-tooltip {
  position: fixed;
  display: none;
  background: #1e1e24;
  border: 1px solid rgba(0,234,255,0.22);
  box-shadow: 0 12px 40px rgba(0,0,0,0.75), 0 0 0 1px rgba(0,234,255,0.06);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 150px;
  max-width: 280px;
  z-index: 9998;
  font-size:12px;
  font-family: inherit;
  pointer-events: none;
  line-height: 1.4;
}
.wc-hover-info-tooltip .wc-hit-tag {
  color: #00eaff;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  font-size:12px;
  margin-bottom: 4px;
  word-break: break-all;
}
.wc-hover-info-tooltip .wc-hit-type {
  display: inline-block;
  font-family: inherit;
  font-weight: 600;
  font-size:12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 1px 6px;
  border-radius: 3px;
  vertical-align: middle;
}
.wc-hover-info-tooltip .wc-hit-type-container { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.14); }
.wc-hover-info-tooltip .wc-hit-type-text { background: rgba(74,222,128,0.12); color: #4ade80; border: 1px solid rgba(74,222,128,0.28); }
.wc-hover-info-tooltip .wc-hit-type-image { background: rgba(255,176,46,0.12); color: #ffb02e; border: 1px solid rgba(255,176,46,0.28); }
.wc-hover-info-tooltip .wc-hit-dims {
  color: rgba(255,255,255,0.4);
  font-family: var(--font-mono, monospace);
  font-size:12px;
  margin-bottom: 4px;
}
.wc-hover-info-tooltip .wc-hit-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}
.wc-hover-info-tooltip .wc-hit-label {
  flex: 0 0 auto;
  color: rgba(255,255,255,0.4);
  font-size:12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  min-width: 52px;
}
.wc-hover-info-tooltip .wc-hit-items {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.wc-hover-info-tooltip .wc-hit-pill {
  background: rgba(0,234,255,0.1);
  color: rgba(255,255,255,0.78);
  border: 1px solid rgba(0,234,255,0.18);
  border-radius: 4px;
  padding: 1px 5px;
  font-size:12px;
  font-family: var(--font-mono, monospace);
  word-break: break-all;
}
.wc-hover-info-tooltip .wc-hit-pill.wc-hit-anim { background: rgba(168,85,247,0.12); border-color: rgba(168,85,247,0.28); }
.wc-hover-info-tooltip .wc-hit-pill.wc-hit-adapter { background: rgba(255,176,46,0.1); border-color: rgba(255,176,46,0.25); }
.wc-hover-info-tooltip .wc-hit-empty {
  color: rgba(255,255,255,0.3);
  font-size:12px;
  margin-top: 4px;
}



.wc-id_selection{
  border: 1px solid var(--accent);
  padding:5px;
  color:white;
}

.wc-scene{
  min-height:420px;
  background:var(--bg-base);
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  padding:2rem;
  font-family:system-ui,sans-serif;
}

.wc-trigger-btn{
  background:transparent;
  border:1px solid var(--border-hover);
  color:var(--neo1);
  padding:10px 28px;
  border-radius:8px;
  font-size:14px;
  cursor:pointer;
  letter-spacing:.04em;
  transition:background .18s,box-shadow .18s;
}
.wc-trigger-btn:hover{background:rgba(0,234,255,0.07);box-shadow:0 0 0 1px var(--neo1)22;}

.wc-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.65);
  display:flex;align-items:center;justify-content:center;
  z-index:10001;
  opacity:0;pointer-events:none;
  transition:opacity .2s;
}
.wc-overlay.wc-open{opacity:1;pointer-events:all;}

.wc-popupBig{
  background:#1e1e24;
  /* .popupBig lives outside #root, so every var(--xxx) its own descendants reference
     (.popupBig-title, .btn-add, .sel-label, .sel-field, .status-dot.ok, .warn-red,
     the dynamic .pf-* form rows, etc.) never resolves — text fell back to black-on-dark
     and .btn-add's background fell back to transparent, hiding its own near-black label.
     Redeclare the handful of #root vars this popup's CSS actually depends on, and set a
     real text color; both cascade to every descendant that doesn't set its own. */
  --accent:#00eaff;--a25:rgba(0,234,255,0.25);--green:#00ff88;--red:#ff4466;
  --muted:rgba(255,255,255,0.38);--neo1:#00eaff;
  color:rgba(255,255,255,0.88);
  border:1px solid rgba(0,234,255,0.28);
  border-radius:14px;
  width:520px;
  max-width:90vw;
  max-height:82vh;
  overflow-y:auto;
  box-shadow:0 24px 80px rgba(0,0,0,0.85),0 0 0 1px rgba(0,234,255,0.08),inset 0 1px 0 rgba(255,255,255,0.04);
  transform:translateY(12px) scale(.97);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),opacity .2s;
  opacity:0;
}
.wc-overlay.wc-open .wc-popupBig{transform:translateY(0) scale(1);opacity:1;}

.wc-popupBig-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px 16px;
}
.wc-popupBig-title{
  font-size:15px;font-weight:500;
  color:var(--text-active);
  letter-spacing:.01em;
  flex:1;display:flex;align-items:center;gap:8px;
}
.wc-popupBig-title-icon{color:#00eaff;flex-shrink:0;}
.wc-header-actions{display:flex;align-items:center;gap:8px;}

.wc-popupBig-body{overflow-y:auto;flex:1;padding-bottom:12px;}

.wc-btn-cancel{
  background:transparent;
  border:1px solid rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.6);
  padding:6px 16px;
  border-radius:7px;
  font-size:13px;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.wc-btn-cancel:hover{border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.92);}

.wc-btn-add{
  background:var(--neo1);
  border:none;
  color:#0d0d0d;
  padding:6px 18px;
  border-radius:7px;
  font-size:13px;font-weight:600;cursor:pointer;
  transition:opacity .15s,box-shadow .15s;
}
.wc-btn-add:hover{opacity:.9;box-shadow:0 0 12px rgba(0,234,255,0.4);}

.wc-divider{
  height:1px;
  background:linear-gradient(to right, transparent 0%, var(--border) 8%, rgba(0,234,255,0.18) 50%, var(--border) 92%, transparent 100%);
  margin:0 20px;
}

.wc-popup-body{
  padding:22px 20px 24px;
  display:flex;flex-direction:column;gap:16px;
}


/* 
 
  #dom_viewport {
    height:200px;
    /* width: 90vw;
    height: 75vh; 
    /* width: 100px;
    height: 100px; 
    overflow: hidden;
    position: relative;
    cursor: grab;
    touch-action: none;
    border: 1px solid #1e1e1e;
  }
  #dom_viewport:active { cursor: grabbing; }
 
  #dom_canvas {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
  }
 
  #dom_controls {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
 
  .dom_btn {
    background: transparent;
    border: 1px solid #333;
    color: #888;
    padding: 7px 16px;
    font-family: 'Courier New', monospace;
    font-size:12px;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: all 0.2s;
  }
  .dom_btn:hover { border-color: #fff; color: #fff; }
 
  #dom_hint {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    text-align: center;
    font-size:12px;
    color: #333;
    pointer-events: none;
    letter-spacing: 0.06em;
  } */

/* Tree viewport + SVG primitives. Everything else about the DOM panel
   (header / search / breadcrumb / legend / controls) lives in the
   "DOM TREE PANEL" block further down — keep it in one place. */
  #wb-dom_viewport {
    flex: 1 1 auto;
    min-height: 240px;
    overflow: hidden;
    position: relative;
    cursor: grab;
    touch-action: none;
    background:
      radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 0) 0 0 / 18px 18px,
      radial-gradient(120% 90% at 50% 0%, rgba(0,234,255,0.045), transparent 62%),
      #0b0b0f;
  }
  #wb-dom_viewport:active { cursor: grabbing; }

  #wb-dom_svg {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    overflow: visible;
  }

  .wc-dom_node {
    cursor: pointer;
    transition: stroke 0.15s, stroke-width 0.15s;
  }
  .wc-dom_node:hover {
    stroke-width: 3.5;
  }

  .wc-dom_branch {
    fill: none;
    stroke: rgba(255,255,255,0.13);
    stroke-width: 1.6;
    stroke-linecap: round;
  }

  .wc-dom_branch_stub {
    stroke: rgba(255,255,255,0.18);
    stroke-width: 2;
    stroke-dasharray: 3 3;
    stroke-linecap: round;
  }



.wc-flag-wrap {
  display: inline-flex;
  align-items: center;
  transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1);
  cursor: pointer;
}
.wc-flag-wrap:hover {
  transform: scale(3);
  z-index: 10;
  position: relative;
}
.wc-animation-class-param{
  display:flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
}
.wc-animation-class-param input[type="number"],
.wc-animation-class-param input[type="text"] {
  flex: 1;
  min-width: 0;
}
.wc-animation-class-param span {
  flex-shrink: 0;
  white-space: nowrap;
}
#wb-bottom-panel-bottom-set1{padding:0;display:flex;flex-direction:column;height:100%;min-height:0;}
#wb-animation-app{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;}

/* ── TOPBAR ── */
#wb-animation-topbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(0,234,255,0.05),transparent 60%),var(--panel);
  flex-shrink:0;padding:5px 14px;
  border-bottom:1px solid var(--border);
}

#wb-animation-anim-name-wrap{display:flex;align-items:center;gap:5px;flex-shrink:0}
.wc-anim-name-eyebrow{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim)}
#wb-animation-anim-name{background:rgba(255,255,255,0.045);border:1px solid rgba(255,255,255,0.09);color:var(--text-hi);font-weight:600;font-size:13px;outline:none;padding:4px 9px;border-radius:6px;transition:border-color .2s,background .2s;cursor:text;width:150px}
#wb-animation-anim-name:hover,#wb-animation-anim-name:focus{border-color:rgba(0,234,255,0.45);background:rgba(0,234,255,0.06)}
#wb-animation-anim-name.wc-name-err,#wb-animation-anim-name.wc-animation-name-err{border-color:rgba(255,70,70,0.6);color:rgba(255,100,100,0.9)}
#wb-animation-anim-name.wc-anim-renaming{border-color:rgba(255,193,7,0.6);background:rgba(255,193,7,0.05)}
#wb-anim-name-row{display:flex;align-items:center;gap:5px}
.wc-anim-name-btn{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:6px;color:var(--text-dim);padding:5px 7px;cursor:pointer;font-size:12px;font-weight:500;transition:all .15s;white-space:nowrap;line-height:1}
.wc-anim-name-btn:hover{border-color:rgba(0,234,255,0.4);color:var(--accent);background:rgba(0,234,255,0.07)}
.wc-anim-name-btn.wc-active{border-color:rgba(255,193,7,0.55);color:#ffc107;background:rgba(255,193,7,0.08)}
.wc-anim-name-btn-new{color:var(--accent);border-color:rgba(0,234,255,0.3)}

#wb-animation-body-selector{display:flex;padding:4px 14px 6px;}
.wc-anim-sel-row{display:flex;align-items:center;gap:10px}
.wc-anim-sel-row-applied{flex:1;min-width:160px}
.wc-anim-sel-row-presets{flex:1.3;min-width:220px}
.wc-anim-sel-row-pick{align-items:flex-start;flex:1}
.wc-anim-sel-lbl{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim);flex-shrink:0;width:78px;padding-top:2px}
.wc-anim-sel-row #wb-CurrentAnimationList{margin:0;flex:1}
#wb-animation-animation-name-err-tip{font-size:12px;color:rgba(255,100,100,0.85);display:none;white-space:nowrap}
.wc-animation-edit-icon{color:var(--text-dim);cursor:pointer;font-size:12px;transition:color .2s}
/* ── autosuggest ── */
#wb-anim-name-suggest{display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:155px;max-width:280px;max-height:200px;overflow-y:auto;z-index:9999;background:#1c1f2e;border:0.5px solid rgba(0,234,255,0.28);border-radius:7px;box-shadow:0 6px 24px rgba(0,0,0,.6);padding:3px 0;}
.wc-anim-suggest-item{padding:5px 11px;font-size:12px;color:rgba(255,255,255,0.75);cursor:pointer;white-space:nowrap;transition:background .08s,color .08s;}
.wc-anim-suggest-item.wc-hovered,.wc-anim-suggest-item:hover{background:rgba(0,234,255,0.1);color:#00eaff;}
.wc-anim-suggest-add{color:rgba(0,234,255,0.65);border-top:0.5px solid rgba(255,255,255,0.07);margin-top:2px;padding-top:5px;}
.wc-module-name-bar{position:relative;display:flex;align-items:center;}
.wc-module-name-bar-inp{flex:1;padding-right:30px !important;color:#fff !important;}
.wc-module-name-dot{position:absolute;right:10px;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.1);transition:background .2s,box-shadow .2s;flex-shrink:0;}
.wc-module-name-dot.wc-dot-green{background:#3ddc84;box-shadow:0 0 6px rgba(61,220,132,0.5);}
.wc-module-name-dot.wc-dot-yellow{background:#ffd60a;box-shadow:0 0 6px rgba(255,214,10,0.5);}
.wc-module-name-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
.wc-module-name-chip{font-size:12px;font-family:var(--mono);padding:3px 8px;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.13);border-radius:4px;color:rgba(255,255,255,0.45);cursor:pointer;transition:all .12s;}
.wc-module-name-chip:hover{background:rgba(0,234,255,0.1);border-color:rgba(0,234,255,0.35);color:#00eaff;}
/* ── right panel improvements ── */
#wb-anim-search-wrap{padding:6px 8px;border-bottom:0.5px solid var(--border);flex-shrink:0;}
#wb-anim-search-input{width:100%;box-sizing:border-box;background:rgba(255,255,255,0.04);border:0.5px solid rgba(255,255,255,0.09);border-radius:5px;color:rgba(255,255,255,0.8);font-size:12px;padding:4px 8px;outline:none;font-family:inherit;}
#wb-anim-search-input:focus{border-color:rgba(0,234,255,0.3);}
#wb-anim-list-body{flex:1 0 auto;overflow:visible;padding:6px;display:flex;flex-direction:column;gap:3px}
.wc-anim-list-del{opacity:0;flex-shrink:0;margin-left:6px;font-size:12px;color:rgba(255,90,90,0.75);padding:2px 5px;border-radius:4px;transition:opacity .12s,background .12s;line-height:1}
.wc-anim-list-del:hover{background:rgba(255,90,90,0.15);color:#ff6b6b}
#wb-anim-list-body>div:hover .wc-anim-list-del{opacity:1}
/* ── preset palette ── */
#wb-anim-presets-section{flex:1;min-width:0;position:relative;border:1.5px dashed rgba(255,255,255,0.15);border-radius:5px;background:rgba(0,0,0,0.14);display:flex;flex-direction:column;max-height:66px;padding:3px 6px 2px}
#wb-anim-presets-header{padding:0 2px 3px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim);display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-shrink:0}
#wb-anim-presets-sub{font-size:11.5px;text-transform:none;letter-spacing:0;color:rgba(255,255,255,0.22);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* one horizontal lane: the preset list scrolls sideways, and the arrows +
   edge fades below are the only thing telling the user there is more. */
#wb-anim-presets-grid{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:rgba(0,234,255,0.45) transparent;padding-bottom:3px}
#wb-anim-presets-grid::-webkit-scrollbar{height:5px}
#wb-anim-presets-grid::-webkit-scrollbar-track{background:rgba(255,255,255,0.05);border-radius:3px}
#wb-anim-presets-grid::-webkit-scrollbar-thumb{background:rgba(0,234,255,0.4);border-radius:3px}
#wb-anim-presets-grid::-webkit-scrollbar-thumb:hover{background:rgba(0,234,255,0.7)}
#wb-anim-presets-section.wc-ps-fade-l #wb-anim-presets-grid{mask-image:linear-gradient(to right,transparent 0,#000 26px)}
#wb-anim-presets-section.wc-ps-fade-r #wb-anim-presets-grid{mask-image:linear-gradient(to left,transparent 0,#000 26px)}
#wb-anim-presets-section.wc-ps-fade-l.wc-ps-fade-r #wb-anim-presets-grid{mask-image:linear-gradient(to right,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%)}
/* scroll arrows — only rendered when the lane actually overflows */
.wc-ps-arrow{position:absolute;top:50%;transform:translateY(-50%);width:19px;height:30px;display:none;align-items:center;justify-content:center;z-index:4;cursor:pointer;border:0.5px solid rgba(0,234,255,0.3);border-radius:5px;background:rgba(18,21,32,0.92);color:#00eaff;font-size:12px;line-height:1;padding:0;transition:background .15s,border-color .15s,opacity .15s}
.wc-ps-arrow:hover{background:rgba(0,234,255,0.16);border-color:rgba(0,234,255,0.6)}
.wc-ps-arrow-l{left:2px}.wc-ps-arrow-r{right:2px}
#wb-anim-presets-section.wc-ps-scrollable .wc-ps-arrow{display:flex}
.wc-ps-arrow[disabled]{opacity:.25;cursor:default}
#wb-anim-presets-section.wc-ps-scrollable #wb-anim-presets-grid{padding-left:22px;padding-right:22px}
.wc-anim-preset-card{flex:0 0 auto}

.wc-anim-preset-card{display:flex;flex-direction:row;align-items:center;gap:6px;padding:5px 7px;border:1px solid rgba(255,255,255,0.07);border-radius:7px;background:rgba(255,255,255,0.02);cursor:pointer;transition:all .15s;min-width:0}
.wc-anim-preset-card:hover{border-color:rgba(0,234,255,0.35);background:rgba(0,234,255,0.06);transform:translateY(-1px)}
.wc-anim-preset-stage{width:22px;height:22px;flex-shrink:0;border-radius:5px;background:rgba(255,255,255,0.03);border:0.5px solid rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;overflow:hidden;contain:layout paint}
.wc-anim-preset-thumb{width:12px;height:12px;border-radius:3px;background:linear-gradient(135deg,#00eaff,#7b5cff);box-shadow:0 0 8px rgba(0,234,255,0.4)}
.wc-anim-preset-thumb-typewriter{height:6px;border-radius:2px;align-self:center}
.wc-anim-preset-card-lbl{font-size:12px;color:rgba(255,255,255,0.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.wc-anim-preset-card:hover .wc-anim-preset-card-lbl{color:#fff}
/* ── bigger floating preset preview (replaces the native title tooltip) ── */
#wb-anim-preset-bigpreview{
  position:fixed;left:0;top:0;z-index:99999;
  transform:translate(-50%,-100%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 16px;border-radius:10px;
  background:#11141c;border:1px solid rgba(0,234,255,0.25);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;
  transition:opacity .12s ease,transform .12s ease;
}
#wb-anim-preset-bigpreview.wc-visible{opacity:1}
#wb-anim-preset-bigpreview.wc-anim-bigpreview-below{transform:translate(-50%,0)}
.wc-anim-preset-bigpreview-stage{width:130px;height:80px;border-radius:8px;background:rgba(255,255,255,0.03);border:0.5px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;overflow:visible}
.wc-anim-preset-bigpreview-thumb{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#00eaff,#7b5cff);box-shadow:0 0 18px rgba(0,234,255,0.45)}
.wc-anim-preset-bigpreview-thumb-typewriter{height:16px;border-radius:4px;align-self:center}
.wc-anim-preset-bigpreview-lbl{font-size:14px;font-weight:600;color:rgba(255,255,255,0.85);white-space:nowrap}
#wb-anim-css-preview{flex-shrink:0;border-top:0.5px solid var(--border);background:rgba(0,0,0,.18);max-height:180px;overflow:hidden;flex-direction:column;}
#wb-anim-css-preview-header{padding:4px 10px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim);border-bottom:0.5px solid rgba(255,255,255,0.05);flex-shrink:0;display:flex;justify-content:space-between;align-items:center;}
#wb-anim-css-code{margin:0;padding:8px 10px;font-size:12px;font-family:ui-monospace,Consolas,'Courier New',monospace;color:rgba(0,234,255,0.75);white-space:pre;overflow:auto;flex:1;}
.wc-animation-edit-icon:hover{color:var(--accent)}
#wb-animation-topbar-mid{display:flex;align-items:center;gap:10px;flex:1;justify-content:center;flex-wrap:wrap}
.wc-animation-time-field{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-dim);}
.wc-animation-time-input{width:46px;background:var(--panel2);border:0.5px solid var(--border);border-radius:4px;padding:3px 6px;color:var(--accent);text-align:center;outline:none}
.wc-animation-time-input:focus{border-color:var(--border-h)}
#wb-animation-anim-preview-stage{width:180px;height:36px;background:rgba(255,255,255,0.03);border:0.5px solid var(--border);border-radius:6px;position:relative;overflow:hidden;cursor:pointer;flex-shrink:0;contain:strict}
#wb-animation-anim-box{width:28px;height:28px;border-radius:5px;background:linear-gradient(135deg,var(--accent),var(--accent2));position:absolute;top:4px;left:4px;box-shadow:0 0 10px rgba(0,234,255,0.3);will-change:left,opacity,transform}
.wc-animation-play-controls{display:flex;gap:6px;flex-shrink:0;align-items:center}
#wb-animation-btn-toggle{
  display:flex;align-items:center;gap:6px;
  background:rgba(0,234,255,0.1);
  border:1px solid rgba(0,234,255,0.45);
  border-radius:6px;color:var(--accent);
  padding:5px 14px;cursor:pointer;font-size:12px;font-weight:500;
  transition:all .15s;
  white-space:nowrap;
}
#wb-animation-btn-toggle:hover{background:rgba(0,234,255,0.18);border-color:var(--accent)}
#wb-animation-btn-toggle.wc-paused{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);color:rgba(255,255,255,0.55)}
#wb-animation-btn-toggle.wc-paused:hover{background:rgba(0,234,255,0.08);border-color:rgba(0,234,255,0.35);color:var(--accent)}
#wb-animation-btn-toggle-icon{font-size:12px;line-height:1}
#wb-animation-btn-restart{
  display:flex;align-items:center;gap:6px;
  background:rgba(0,234,255,0.1);
  border:1px solid rgba(0,234,255,0.45);
  border-radius:6px;color:var(--accent);
  padding:5px 14px;cursor:pointer;font-size:12px;font-weight:500;
  transition:all .15s;
  white-space:nowrap;
}
#wb-animation-btn-restart:hover{background:rgba(0,234,255,0.18);border-color:var(--accent)}

/* ── BODY ──
   The list / timeline / properties columns used to each scroll independently
   (3 separate scrollbars), then that got unified onto #wb-animation-body —
   still only a slice of the tab. The scroll now lives on #wb-animation-app
   (the WHOLE Animation Panel tab: topbar + selector row + this body), so
   nothing in here scrolls on its own — overflow:visible lets each column's
   content spill into the app-level scroll area. Column headers are sticky
   so they stay pinned while the whole tab scrolls underneath them. */
#wb-animation-body{display:flex;flex:1 0 auto;overflow:visible;position:relative}

/* ── EDIT (Timeline center + Properties right), side by side ── */
#wb-animation-edit-panel{flex:1;min-width:300px;display:flex;flex-direction:row;overflow:visible;position:relative}
#wb-animation-edit-dim{display:none;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;background:rgba(8,8,12,0.6);backdrop-filter:blur(1px);font-size:12px;color:rgba(255,255,255,0.5);letter-spacing:.02em;text-align:center;padding:0 20px}
#wb-animation-edit-panel.wc-no-selection #wb-animation-edit-dim{display:flex}
#wb-animation-edit-panel.wc-no-selection #wb-animation-left-panel,
#wb-animation-edit-panel.wc-no-selection #wb-animation-center-panel{opacity:.3;pointer-events:none}
#wb-animation-edit-panel #wb-animation-center-panel{order:1}
#wb-animation-edit-panel #wb-animation-rresize{order:2}
#wb-animation-edit-panel #wb-animation-left-panel{order:3}

/* ── RIGHT (Properties) ── */
#wb-animation-left-panel{width:20%;min-width:200px;max-height:none;background:var(--panel);border-left:0.5px solid var(--border);border-right:none;border-bottom:none;display:flex;flex-direction:column;overflow:visible;flex-shrink:0;transition:opacity .2s,width .25s ease}
#wb-animation-left-panel.wc-collapsed{width:0;min-width:0;border-left:none;overflow:hidden}
#wb-animation-left-panel-header{
  display:flex;align-items:center;gap:6px;padding:10px 12px;
  font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-hi);
  background:linear-gradient(180deg,rgba(0,234,255,0.06),transparent 70%),var(--panel);
  border-bottom:0.5px solid var(--border);flex-shrink:0;
  position:sticky;top:0;z-index:10
}
#wb-animation-left-panel-header svg{color:var(--accent);flex-shrink:0}
#wb-animation-prop-list{flex:1 0 auto;overflow:visible;padding:8px 7px}
.wc-animation-prop-section-title{
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,0.3);padding:0 3px;margin:12px 0 6px;
}
.wc-animation-prop-section-title:first-child{margin-top:2px}
/* Label sits ABOVE a full-width control: the column is narrow, and a
   side-by-side fixed-width label squeezed every control until it clipped. */
.wc-animation-prop-row{display:flex;flex-direction:column;align-items:stretch;gap:5px;position:relative;
  padding:7px 4px 9px;border-bottom:0.5px solid rgba(255,255,255,0.06);transition:background .15s}
.wc-animation-prop-row:last-child{border-bottom:none}
.wc-animation-prop-row::before{content:'';position:absolute;left:-7px;top:7px;bottom:9px;width:2px;border-radius:2px;background:var(--accent);opacity:0;transition:opacity .15s}
.wc-animation-prop-row:hover::before{opacity:.55}
.wc-animation-prop-label-group{display:flex;align-items:center;gap:6px;min-width:0}
.wc-animation-prop-icon{color:rgba(255,255,255,0.32);flex-shrink:0;transition:color .15s}
.wc-animation-prop-row:hover .wc-animation-prop-icon{color:var(--accent)}
.wc-parametersList_style_element_name{color:var(--text);flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.wc-animation-prop-control{width:100%;min-width:0;display:flex;align-items:center;gap:4px}
.wc-animation-prop-input{width:48px;background:var(--panel2);border:0.5px solid rgba(255,255,255,0.08);border-radius:4px;padding:3px 5px;color:var(--text-hi);outline:none;text-align:right}
.wc-animation-prop-input:focus{border-color:var(--border-h)}
.wc-animation-prop-unit{font-size:12px;color:var(--text-dim)}
.wc-animation-prop-select{flex:1;background:var(--panel2);border:0.5px solid rgba(255,255,255,0.08);border-radius:4px;padding:3px 4px;color:var(--text-hi);outline:none;cursor:pointer}
.wc-animation-prop-select:focus{border-color:var(--border-h)}
.wc-animation-prop-divider{height:0.5px;background:rgba(255,255,255,0.05);margin:4px 0}
.wc-animation-prop-row.wc-timing-active{background:rgba(0,234,255,0.07);outline:0.5px solid rgba(0,234,255,0.22);outline-offset:-1px}
.wc-animation-prop-row.wc-timing-active::before{opacity:1}
.wc-animation-prop-row.wc-timing-active .wc-animation-prop-icon{color:var(--accent)}
.wc-animation-prop-row.wc-timing-active .wc-prop-label{color:var(--accent)}
.wc-animation-timing-btn{flex:1;background:var(--panel2);border:0.5px solid rgba(0,234,255,0.22);border-radius:4px;padding:3px 6px;color:var(--accent);outline:none;cursor:pointer;text-align:left;transition:all .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-animation-timing-btn:hover,.wc-timing-btn.wc-open{border-color:var(--accent);background:rgba(0,234,255,0.1)}

/* ── Properties panel controls: the shared number-param/dropdown components
   default to a bulkier, pill-shaped look sized for wider panels — scale them
   down to match this panel's compact row height (32px) so steppers, unit
   boxes and dropdowns read as one consistent control language ── */
#wb-animation-prop-list .wc-animation-prop-control{gap:5px}
#wb-animation-prop-list .wc-number-param{
  flex:0 1 104px;width:104px;min-width:76px;border-radius:6px;background:var(--panel2);
  border-color:rgba(255,255,255,0.1);font-size:12px;
}
#wb-animation-prop-list .wc-number-param:hover{border-color:rgba(0,234,255,0.3)}
#wb-animation-prop-list .wc-numberParamUpdate{width:22px;height:22px;font-size:13px;font-weight:400;color:rgba(255,255,255,0.4)}
#wb-animation-prop-list .wc-number-param-val{flex:1;min-width:0;line-height:22px;font-size:12px;border-color:rgba(255,255,255,0.08)}
#wb-animation-prop-list .wc-SingleValueStyleElement{
  flex:0 0 auto;width:auto;min-width:22px;height:24px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  padding:0 8px;border-radius:6px;font-size:12px;font-weight:500;
  color:var(--text-dim);background:var(--panel2);border-color:rgba(255,255,255,0.08);
}
#wb-animation-prop-list .wc-style_prop_dd-wrap{width:100%}
#wb-animation-prop-list .wc-style_prop_dd-trigger{
  background:var(--panel2);border-color:rgba(255,255,255,0.1);border-radius:6px;
  padding:5px 9px;font-size:12px;
}
#wb-animation-prop-list .wc-style_prop_dd-trigger:hover{border-color:rgba(0,234,255,0.3);background:var(--panel2)}
#wb-animation-prop-list .wc-style_prop_dd-flag svg{display:block}
#wb-animation-prop-list .wc-style_prop_dd-panel{background:#1c1f2e;border-color:rgba(0,234,255,0.22)}
#wb-animation-prop-list .wc-radio-item{width:15px;height:15px;margin-right:6px}
#wb-animation-prop-control_iteration.wc-anim-iter-row{
  flex-direction:row;align-items:center;gap:6px;width:100%;flex-wrap:nowrap;
}
.wc-anim-iter-radio-holder{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wc-anim-iter-radio-holder .wc-radio-item{margin-right:0}
.wc-anim-iter-item{display:flex;align-items:center;min-width:0}
.wc-anim-iter-item.wc-anim-iter-count{flex:0 1 auto}
.wc-anim-iter-item.wc-anim-iter-inf{flex:0 0 auto}
#wb-animation-prop-control_iteration .wc-SingleValueStyleElement{min-width:52px;cursor:pointer}

#wb-animation-timing-row .wc-animation-prop-control>*{flex:1;min-width:0}
#wb-animation-timing-row{
  overflow:visible;
}





.wc-animation-timeline-root{background:var(--bg);border:1px solid var(--border);border-radius:9px;overflow:hidden;font-family:inherit;font-size:12px;color:var(--text)}
.wc-animation-timeline-head{display:flex;align-items:center;gap:10px;padding:7px 12px;background:var(--panel);border-bottom:1px solid var(--border)}
.wc-anim-player-group{display:flex;align-items:center;gap:4px;flex-shrink:0}
.wc-anim-player-btn{background:rgba(255,255,255,0.03);border:1px solid var(--border);color:var(--text);width:26px;height:26px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0}
.wc-anim-player-btn:hover{border-color:var(--border-hover);color:var(--text-hi)}
.wc-anim-player-play{background:rgba(0,234,255,0.1);border-color:rgba(0,234,255,0.45);color:var(--accent);width:34px}
.wc-anim-player-play:hover{background:rgba(0,234,255,0.2);border-color:var(--accent);color:var(--accent)}
.wc-anim-player-play.wc-playing{background:rgba(0,234,255,0.25);box-shadow:0 0 10px rgba(0,234,255,0.35)}
.wc-anim-player-toggle.wc-active{border-color:rgba(0,234,255,0.5);color:var(--accent);background:rgba(0,234,255,0.1)}
.wc-animation-timeline-time{font-size:12px;color:var(--text-dim);font-family:ui-monospace,Consolas,'Courier New',monospace;white-space:nowrap;flex-shrink:0}
.wc-animation-timeline-cur{font-size:13px;font-weight:500;color:var(--accent);min-width:34px}
.wc-animation-timeline-vals{flex:1;font-size:12px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-animation-timeline-addprop{background:none;border:1px solid var(--border);color:var(--text-dim);font-size:12px;padding:4px 9px;border-radius:4px;cursor:pointer;white-space:nowrap}
.wc-animation-timeline-addprop:hover{border-color:var(--border-hover);color:var(--text-hi)}
.wc-animation-timeline-body{display:flex;min-width:0}
.wc-animation-timeline-labels{width:96px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);z-index:2}
.wc-animation-timeline-labelspace{height:52px;border-bottom:1px solid var(--border)}
.wc-animation-timeline-labelrow{height:36px;display:flex;align-items:center;padding:0 10px;border-bottom:1px solid var(--border);font-size:12px;justify-content:space-between}
.wc-animation-timeline-labelrow span{color:var(--text)}
.wc-animation-timeline-labeldel{opacity:0;cursor:pointer;color:rgba(255,90,90,.5);font-size:12px}
.wc-animation-timeline-labelrow:hover .wc-animation-timeline-labeldel{opacity:1}
.wc-animation-timeline-right{flex:1;min-width:0;position:relative}
.wc-animation-timeline-kfrow{height:52px;background:var(--panel);border-bottom:1px solid var(--border);position:relative;user-select:none;width:100%}
.wc-animation-tick{position:absolute;bottom:0;width:1px;height:5px;background:rgba(255,255,255,0.07)}
.wc-animation-timeline-kfmarker{position:absolute;top:0;height:100%;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%);z-index:4}
.wc-animation-timeline-kflabel{display:flex;align-items:center;gap:3px;padding:2px 5px;border-radius:4px;border:1px solid var(--border);background:#0d0d0d;cursor:default}
.wc-animation-timeline-kflabel:hover{border-color:var(--border-hover)}
.wc-animation-timeline-kfpct{font-size:12px;color:var(--text-dim)}
.wc-animation-timeline-kflabel.wc-animation-timeline-kfactive .wc-animation-timeline-kfpct{color:var(--accent)}
.wc-animation-timeline-kflabel.wc-animation-timeline-kfactive{border-color:rgba(0,234,255,0.4)}
.wc-animation-timeline-kfdel{font-size:11.5px;color:rgba(255,90,90,0);cursor:pointer;padding:0 1px;line-height:1}
.wc-animation-timeline-kflabel:hover .wc-animation-timeline-kfdel{color:rgba(255,90,90,0.7)}
.wc-animation-timeline-kfhide{font-size:11.5px;color:rgba(255,255,255,0.18);cursor:pointer;padding:0 1px;line-height:1}
.wc-animation-timeline-kflabel:hover .wc-animation-timeline-kfhide{color:rgba(255,255,255,0.55)}
.wc-animation-timeline-kfhide.wc-animation-timeline-kfhidden{color:#ffc426}
.wc-animation-timeline-kfmarker.wc-animation-timeline-kfmarker-hidden .wc-animation-timeline-kflabel{opacity:0.4}
.wc-animation-timeline-kfmarker.wc-animation-timeline-kfmarker-hidden .wc-animation-timeline-kfstem{background:repeating-linear-gradient(to bottom,rgba(255,255,255,0.15) 0,rgba(255,255,255,0.15) 3px,transparent 3px,transparent 6px)}
.wc-animation-timeline-kfstem{width:1px;flex:1;background:rgba(0,234,255,0.2)}
.wc-animation-timeline-kfmarker.wc-animation-timeline-kfactive .wc-animation-timeline-kfstem{background:var(--accent)}
.wc-animation-timeline-scrubber{position:absolute;top:0;bottom:0;pointer-events:none;z-index:6}
.wc-animation-timeline-scrubline{position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--accent);opacity:.85}
.wc-animation-timeline-scrubdiamond{position:absolute;top:3px;left:50%;transform:translateX(-50%) rotate(45deg);width:7px;height:7px;background:var(--accent);border-radius:1px;box-shadow:0 0 7px rgba(0,234,255,0.75)}
.wc-animation-timeline-track{height:36px;position:relative;border-bottom:1px solid var(--border);width:100%}
.wc-animation-timeline-segment{position:absolute;top:50%;height:8px;transform:translateY(-50%);border-radius:4px;background:linear-gradient(to right,rgba(0,234,255,0.12),rgba(0,234,255,0.72));z-index:1}
.wc-animation-timeline-segment.wc-animation-timeline-segactive{background:linear-gradient(to right,rgba(0,234,255,0.3),rgba(0,234,255,1));box-shadow:0 0 6px rgba(0,234,255,0.25)}
.wc-animation-timeline-addbar{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--panel);border-top:1px solid var(--border);flex-wrap:wrap}
.wc-animation-timeline-input{background:#0a0a0a;border:1px solid var(--border);color:var(--text-hi);border-radius:4px;padding:3px 7px;font-size:12px;outline:none}
.wc-animation-timeline-input:focus{border-color:var(--border-hover)}
.wc-animation-timeline-btn{background:none;border:1px solid var(--border);color:var(--text-dim);font-size:12px;padding:4px 9px;border-radius:4px;cursor:pointer}
.wc-animation-timeline-btn:hover{border-color:var(--border-hover);color:var(--text-hi)}
.wc-animation-timeline-btn-primary{background:linear-gradient(135deg,rgba(0,234,255,0.22),rgba(0,234,255,0.08));border-color:rgba(0,234,255,0.5);color:#00eaff;font-weight:600}
.wc-animation-timeline-btn-primary:hover{background:linear-gradient(135deg,rgba(0,234,255,0.32),rgba(0,234,255,0.14));border-color:#00eaff;color:#fff}
/* ── keyframe editor ── */
#wb-anim-kf-editor{border-top:1px solid var(--border);background:rgba(0,0,0,.18);padding:7px 10px;}
#wb-anim-kf-editor-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
#wb-anim-kf-editor-title{font-size:12px;color:var(--text-dim);letter-spacing:.04em;}
#wb-anim-kf-editor-title strong{color:#00eaff;font-weight:600;}
#wb-anim-kf-editor-close{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:13px;padding:0 2px;line-height:1;transition:color .12s;}
#wb-anim-kf-editor-close:hover{color:var(--text-hi);}
#wb-anim-kf-editor-body{display:flex;flex-direction:column;gap:3px;max-height:130px;overflow-y:auto;margin-bottom:6px;overscroll-behavior:contain}
.wc-anim-kf-row{display:flex;align-items:center;gap:5px;}
.wc-anim-kf-prop{font-size:12px;color:rgba(0,234,255,0.7);flex:0 0 90px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wc-anim-kf-val{flex:1;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.12);border-radius:4px;color:#fff;font-size:12px;padding:3px 7px;outline:none;font-family:inherit;min-width:0;text-align:left;cursor:pointer;transition:background .12s,border-color .12s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wc-anim-kf-val:hover,.wc-anim-kf-val:focus{border-color:rgba(0,234,255,0.4);background:rgba(0,234,255,0.08);}
.wc-anim-kf-del{background:none;border:none;color:rgba(255,90,90,0.45);cursor:pointer;font-size:12px;padding:0 3px;flex-shrink:0;transition:color .1s;}
.wc-anim-kf-del:hover{color:rgba(255,90,90,0.9);}
#wb-ra .wc-ra-lbl{font-size:12px;color:rgba(255,255,255,.35);margin:10px 0 5px;padding-left:1px;letter-spacing:.06em;text-transform:uppercase;}
#wb-ra .wc-ra-lbl:first-child{margin-top:0;}
#wb-ra .wc-ra-current-row{display:flex;align-items:center;gap:6px;margin:6px 2px 12px;}
#wb-ra .wc-ra-current-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0;box-shadow:0 0 4px rgba(0,234,255,.6);}
#wb-ra .wc-ra-current-name{font-size:12px;color:rgba(255,255,255,.45);letter-spacing:.03em;margin:0;}
#wb-ra .wc-ra-divider{height:1px;background:rgba(255,255,255,.06);margin:4px 0 10px;}
/* ── Element animations list (top of #ra) ── */
#wb-ra-el-anims-wrap{margin-bottom:6px;}
.wc-ra-el-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:20px 10px;color:rgba(255,255,255,0.2);font-size:12px;text-align:center;line-height:1.4;}
.wc-ra-el-empty svg{opacity:.25;}
#wb-ra-el-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
#wb-ra-el-header .wc-ra-lbl{margin:0;font-size:12px;}
.wc-ra-el-count{font-size:12px;color:rgba(255,255,255,0.2);letter-spacing:.04em;}
.wc-ra-el-item{display:flex;align-items:center;justify-content:space-between;padding:7px 9px;border-radius:7px;cursor:pointer;border:1px solid rgba(255,255,255,0.07);background:rgba(255,255,255,0.025);margin-bottom:4px;transition:background .15s,border-color .15s;}
.wc-ra-el-item:last-child{margin-bottom:0;}
.wc-ra-el-item:hover{background:rgba(0,234,255,0.08);border-color:rgba(0,234,255,0.28);}
.wc-ra-el-item-name{font-size:12px;color:rgba(255,255,255,0.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;}
.wc-ra-el-item-right{display:flex;align-items:center;gap:5px;flex-shrink:0;}
.wc-ra-el-item-kf{font-size:12px;color:#00eaff;font-family:var(--mono);background:rgba(0,234,255,0.08);border:1px solid rgba(0,234,255,0.14);padding:1px 5px;border-radius:3px;letter-spacing:.03em;}
.wc-ra-el-item-open{font-size:12px;color:rgba(255,255,255,0.25);opacity:0;transition:opacity .15s;}
.wc-ra-el-item:hover .wc-ra-el-item-open{opacity:1;color:#00eaff;}
.wc-ra-el-item-unset{border-color:rgba(255,255,255,0.04);background:rgba(255,255,255,0.01);}
.wc-ra-el-item-unset:hover{background:rgba(0,234,255,0.04);border-color:rgba(0,234,255,0.15);}
.wc-ra-el-add-btn{font-size:12px;color:var(--accent,#00eaff);background:rgba(0,234,255,0.08);border:1px solid rgba(0,234,255,0.2);border-radius:4px;padding:2px 7px;cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s,color .12s;flex-shrink:0;}
.wc-ra-el-add-btn:hover{background:rgba(0,234,255,0.18);border-color:rgba(0,234,255,0.5);color:#fff;}

#wb-ra-el-presets-wrap{margin-top:10px;}
.wc-ra-preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
.wc-ra-preset-btn{font-size:12px;color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.07);border-radius:6px;padding:6px 8px;cursor:pointer;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s,border-color .12s,color .12s;}
.wc-ra-preset-btn:hover{background:rgba(0,234,255,0.08);border-color:rgba(0,234,255,0.28);color:#fff;}
.wc-ra-preset-hint{grid-column:1/-1;font-size:12px;color:rgba(255,255,255,0.2);padding:6px 2px;line-height:1.4;}
#wb-anim-kf-bar{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:3px 8px 6px;}
.wc-anim-kf-bar-label{font-size:12px;color:rgba(255,255,255,0.3);letter-spacing:.06em;text-transform:uppercase;margin-right:2px;flex-shrink:0;}
.wc-anim-kf-bar-chip{font-size:12px;color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:4px;padding:1px 6px;cursor:pointer;transition:background .12s,color .12s,border-color .12s;user-select:none;}
.wc-anim-kf-bar-chip:hover{background:rgba(255,255,255,0.11);color:rgba(255,255,255,0.8);}
.wc-anim-kf-bar-chip.wc-active{background:rgba(0,220,200,0.14);border-color:rgba(0,220,200,0.4);color:#00ddc8;}
#wb-anim-kf-editor-foot{border-top:0.5px solid rgba(255,255,255,0.06);padding-top:5px;}
#wb-anim-kf-editor-open-panel{width:100%;background:rgba(0,234,255,0.06);border:0.5px solid rgba(0,234,255,0.18);border-radius:5px;color:rgba(0,234,255,0.65);font-size:12px;padding:5px 10px;cursor:pointer;text-align:left;transition:background .12s,color .12s,border-color .12s;font-family:inherit;}
#wb-anim-kf-editor-open-panel:hover{background:rgba(0,234,255,0.13);border-color:rgba(0,234,255,0.4);color:#00eaff;}

















































/* ── RESIZE HANDLE ── */
.wc-animation-resize-handle{width:5px;flex-shrink:0;cursor:col-resize;background:transparent;transition:background .15s;position:relative;z-index:5;display:flex;align-items:center;justify-content:center}
.wc-animation-resize-handle::after{content:'';width:1px;height:30px;background:rgba(0,234,255,0.15);border-radius:1px;transition:background .15s}
.wc-animation-resize-handle:hover::after,.wc-resize-handle.wc-dragging::after{background:rgba(0,234,255,0.5)}

/* Explicit collapse/expand toggle on each resize handle — lets a panel be
   folded shut (to give the timeline more room) with one click, instead of
   only via dragging the handle all the way in. */
.wc-anim-panel-toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:28px;border-radius:5px;background:var(--panel2,#1a1a1a);border:0.5px solid rgba(0,234,255,0.25);color:rgba(255,255,255,0.5);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:6;padding:0;transition:background .15s,color .15s,border-color .15s}
.wc-anim-panel-toggle:hover{background:rgba(0,234,255,0.14);color:var(--accent);border-color:rgba(0,234,255,0.55)}
.wc-anim-panel-toggle svg{display:block;transition:transform .2s}
#wb-animation-right-panel.wc-collapsed+#wb-animation-lresize .wc-anim-panel-toggle svg{transform:rotate(180deg)}
#wb-animation-left-panel.wc-collapsed+#wb-animation-rresize .wc-anim-panel-toggle svg{transform:rotate(180deg)}

/* ── CENTER ── */
#wb-animation-center-panel{flex:1;min-width:160px;background:var(--bg);display:flex;flex-direction:column;overflow:visible}
#wb-animation-center-header{padding:9px 12px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim);border-bottom:0.5px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;background:var(--bg)}
#wb-animation-time-display{font-size:12px;color:var(--accent);font-weight:600}
#wb-animation-timeline{flex:1 0 auto;position:relative;overflow:visible;padding:0 12px 12px 0}

/* ruler */
.wc-animation-tick{position:absolute;bottom:0;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%)}
.wc-animation-tick-line{width:0.5px;background:rgba(255,255,255,0.15)}
.wc-animation-tick-label{font-size:11.5px;color:var(--text-dim);margin-bottom:2px;white-space:nowrap}

/* rows */
.wc-animation-tl-row{display:flex;align-items:center;gap:0;margin-bottom:5px}
.wc-animation-tl-prop-name{width:98px;font-size:12px;color:var(--text-dim);flex-shrink:0;text-align:right;padding-right:8px}
.wc-animation-tl-track-wrap{flex:1;position:relative;height:14px}
.wc-animation-tl-track{width:100%;height:100%;background:rgba(255,255,255,0.03);border-radius:3px;position:relative;overflow:hidden}
.wc-animation-tl-bar{height:100%;border-radius:3px;background:linear-gradient(90deg,rgba(0,234,255,0.55),rgba(0,255,179,0.3));position:absolute;animation:none !important;transition:none !important}
.wc-animation-tl-delay{height:100%;background:rgba(0,234,255,0.1);border-right:1px dashed rgba(0,234,255,0.35);position:absolute;left:0;display:none;animation:none !important;transition:none !important}

/* playhead — positioned relative to #timeline */
#wb-animation-playhead{position:absolute;top:0;bottom:0;width:1px;background:var(--accent);opacity:.85;pointer-events:none;left:98px}
#wb-animation-playhead::before{content:'';position:absolute;top:24px;left:-4px;width:9px;height:9px;border-radius:50%;background:var(--accent)}

/* ── LIST (Animations, primary) ── */
#wb-animation-right-panel{width:28%;min-width:0;background:var(--panel);border-right:0.5px solid var(--border);display:flex;flex-direction:column;overflow:visible;flex-shrink:0;transition:width .25s ease}
#wb-animation-right-panel.wc-collapsed{width:0;min-width:0;border-right:none}
#wb-animation-right-header{padding:9px 12px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim);border-bottom:0.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:sticky;top:0;z-index:10;background:var(--panel)}
#wb-animation-right-close{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:13px;padding:0 2px;transition:color .15s;line-height:1}
#wb-animation-right-close:hover{color:var(--text-hi)}
#wb-anim-list-add-row{padding:7px 10px;margin-top:2px;border-radius:7px;cursor:pointer;font-size:12px;text-align:center;color:rgba(0,234,255,0.4);border:1px dashed rgba(0,234,255,0.2);background:rgba(0,234,255,0.03);transition:all .15s;flex-shrink:0}
#wb-anim-list-add-row:hover{color:#00eaff;border-color:rgba(0,234,255,0.45);background:rgba(0,234,255,0.08)}
/* #animation-right-content{flex:1;overflow-y:auto;padding:10px} */

/* right panel inner */
.wc-animation-rt-section{margin-bottom:14px}
.wc-animation-rt-label{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim);margin-bottom:7px;padding-left:2px}
.wc-animation-timing-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.wc-animation-timing-opt{background:var(--panel2);border:0.5px solid rgba(255,255,255,0.07);border-radius:7px;padding:7px 5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;transition:all .18s}
.wc-animation-timing-opt:hover{border-color:rgba(0,234,255,0.3);background:rgba(0,234,255,0.04)}
.wc-animation-timing-opt.wc-selected{border-color:var(--accent);background:rgba(0,234,255,0.07)}
.wc-animation-timing-opt svg{display:block}
.wc-animation-timing-opt-name{font-size:12px;color:var(--text)}
.wc-animation-timing-opt.wc-selected .wc-timing-opt-name{color:var(--accent)}
.wc-animation-rt-divider{height:0.5px;background:rgba(255,255,255,0.06);margin:12px 0}

/* bezier */
.wc-animation-bez-canvas-wrap{background:var(--panel2);border:0.5px solid var(--border);border-radius:7px;padding:8px;margin-bottom:8px}
.wc-animation-bez-canvas-wrap canvas{display:block;width:100%;cursor:crosshair}
.wc-animation-bez-presets{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.wc-animation-bez-preset{padding:3px 7px;border:0.5px solid rgba(0,234,255,0.18);background:none;color:var(--text);border-radius:4px;cursor:pointer;transition:all .15s}
.wc-animation-bez-preset:hover{border-color:rgba(0,234,255,0.5);color:var(--text-hi)}
.wc-animation-bez-coords{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.wc-animation-bez-coord{display:flex;flex-direction:column;gap:3px}
.wc-animation-bez-coord label{font-size:12px;color:var(--text-dim);letter-spacing:.04em}
.wc-animation-bez-coord input{background:#0a0a0a;border:0.5px solid rgba(0,234,255,0.2);border-radius:4px;padding:4px 6px;color:var(--accent);outline:none}
.wc-animation-bez-coord input:focus{border-color:var(--border-h)}

/* steps */
.wc-animation-steps-canvas-wrap{background:var(--panel2);border:0.5px solid var(--border);border-radius:7px;padding:8px;margin-bottom:8px}
.wc-animation-steps-canvas-wrap canvas{display:block;width:100%}
.wc-animation-steps-ctrl-row{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.wc-animation-steps-ctrl-row label{font-size:12px;color:var(--text-dim);}
.wc-animation-sv{color:var(--accent);font-weight:600}
input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}
.wc-animation-jump-row{display:flex;gap:5px;margin-bottom:8px}
.wc-animation-jump-btn{flex:1;padding:5px;font-size:12px;border:0.5px solid rgba(0,234,255,0.18);background:none;color:var(--text);border-radius:4px;cursor:pointer;transition:all .15s}
.wc-animation-jump-btn.wc-active{border-color:var(--accent);color:var(--accent);background:rgba(0,234,255,0.07)}
.wc-animation-jump-btn:hover:not(.wc-active){border-color:rgba(0,234,255,0.4);color:var(--text-hi)}

/* mini preview */
.wc-animation-mini-anim-wrap{background:var(--panel2);border:0.5px solid var(--border);border-radius:6px;padding:8px;margin-bottom:8px}
.wc-animation-mini-anim-label{font-size:12px;color:var(--text-dim);margin-bottom:5px;}
.wc-animation-mini-track{height:22px;background:rgba(255,255,255,0.03);border-radius:4px;position:relative;overflow:hidden;cursor:pointer;margin-bottom:4px}
.wc-animation-mini-ball{width:18px;height:18px;border-radius:50%;background:var(--accent);position:absolute;top:2px;left:2px;box-shadow:0 0 6px rgba(0,234,255,0.4)}

/* code output */
.wc-animation-code-out{background:#000;border:1px solid rgba(0,234,255,0.4);border-radius:6px;padding:9px 11px;margin-bottom:8px}
.wc-animation-code-out-label{font-size:11.5px;color:rgba(255,255,255,0.25);letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
.wc-animation-code-out pre{font-size:12px;color:var(--accent);font-weight:700;white-space:pre-wrap;word-break:break-all;line-height:1.4}
.wc-animation-code-copy{width:100%;padding:5px;font-size:12px;border:0.5px solid rgba(0,234,255,0.3);background:rgba(0,234,255,0.05);color:var(--accent);border-radius:4px;cursor:pointer;transition:all .15s;margin-top:6px;display:block}
.wc-animation-code-copy:hover{background:rgba(0,234,255,0.12)}
.wc-animation-code-copy.wc-ok{color:#4ade80;border-color:rgba(74,222,128,0.3)}

/* data store */
#wb-animation-data-store{background:var(--panel2);border:0.5px solid var(--border);border-radius:6px;padding:8px}
#wb-animation-data-store-label{font-size:12px;color:var(--text-dim);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.wc-animation-data-row{display:flex;gap:6px;margin-bottom:3px}
.wc-animation-data-key{color:var(--text-dim);flex-shrink:0;width:76px;text-align:right}
.wc-animation-data-val{color:var(--accent);word-break:break-all}

/* ── KEYFRAMES ROW (center panel, below timeline) ── */
#wb-animation-kf-section{border-bottom:0.5px solid rgba(255,255,255,0.06);padding:8px 0 8px 0;background:var(--bg)}
#wb-animation-kf-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;padding-left:98px;padding-right:12px}
#wb-animation-timeline-ruler{height:24px;position:relative;border-bottom:0.5px solid rgba(255,255,255,0.08);margin-bottom:10px;margin-left:98px;margin-top:8px}
#wb-animation-kf-header-label{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim)}
#wb-animation-kf-add-btn{background:none;border:0.5px solid rgba(0,234,255,0.25);border-radius:4px;padding:2px 8px;color:var(--accent);cursor:pointer;transition:all .15s;margin-left:auto}
#wb-animation-kf-add-btn:hover{background:rgba(0,234,255,0.08);border-color:var(--accent)}
#wb-animation-kf-row{display:flex;align-items:center;gap:0;position:relative;padding-left:98px}
#wb-animation-kf-track{flex:1;height:36px;position:relative}
/* keyframe markers — circles, properly visible */
.wc-animation-kf-marker{
  position:absolute;top:50%;transform:translate(-50%,-50%);
  width:14px;height:14px;border-radius:50%;
  background:var(--panel2);border:2px solid rgba(0,234,255,0.45);
  cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;
}
/* 0% and 100% anchors are bigger */
.wc-animation-kf-marker.wc-kf-anchor{width:18px;height:18px;border-color:rgba(0,234,255,0.7);border-width:2px}
.wc-animation-kf-marker:hover{border-color:var(--accent);background:rgba(0,234,255,0.22);}
.wc-animation-kf-marker.wc-kf-selected{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px rgba(0,234,255,0.6);}
/* delete — tiny, muted, only on hover */
.wc-animation-kf-del-btn{
  position:absolute;top:-5px;right:-5px;
  width:12px;height:12px;
  background:rgba(180,40,40,0.8);border:none;border-radius:50%;
  color:#fff;font-size:12px;font-weight:700;
  cursor:pointer;
  display:none;align-items:center;justify-content:center;
  line-height:1;padding:0;z-index:2;
  transition:background .15s;
}
.wc-animation-kf-marker:hover .wc-animation-kf-del-btn{display:flex}
.wc-animation-kf-del-btn:hover{background:rgba(220,50,50,1)}
.wc-animation-kf-label{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);color:var(--text-dim);white-space:nowrap;pointer-events:none}
.wc-animation-kf-marker.wc-animation-kf-selected .wc-animation-kf-label{color:var(--accent)}
/* add-frame popup */
#wb-animation-kf-add-popup{display:none;position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--panel);border:0.5px solid var(--border-h);border-radius:6px;padding:7px 10px;z-index:20;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,0.5)}
#wb-animation-kf-add-popup.wc-show{display:flex;align-items:center;gap:6px}
#wb-animation-kf-pct-input{width:52px;background:#0a0a0a;border:0.5px solid rgba(0,234,255,0.3);border-radius:4px;padding:3px 6px;color:var(--accent);text-align:center;outline:none}
#wb-animation-kf-pct-input:focus{border-color:var(--border-h)}
#wb-animation-kf-popup-add{padding:3px 10px;border:0.5px solid rgba(0,234,255,0.3);background:rgba(0,234,255,0.07);color:var(--accent);border-radius:4px;cursor:pointer;transition:all .15s}
#wb-animation-kf-popup-add:hover{background:rgba(0,234,255,0.15)}

/* ::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(0,234,255,0.2);border-radius:2px} */



  #wb-bottom-wrap-body{position:absolute;top:0;left:0;right:0;bottom:0;
  background:var(--panel);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;}

#wb-bottom-wrap-body::-webkit-scrollbar{width:8px}
#wb-bottom-wrap-body::-webkit-scrollbar-track{background:transparent}
#wb-bottom-wrap-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:4px;border:2px solid transparent;background-clip:content-box}
#wb-bottom-wrap-body::-webkit-scrollbar-thumb:hover{background:rgba(0,234,255,0.45);border:2px solid transparent;background-clip:content-box}
#wb-bottom-wrap-body:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border:2px solid transparent;background-clip:content-box}
  #wb-bottom-wrap-inner{
    width:100%;background:var(--bg);border-radius:12px;
    overflow:clip;font-family:var(--font-sans,sans-serif);
    border:1px solid var(--border);
    flex:1;min-height:0;display:flex;flex-direction:column;
    position:relative;
  }
  #wb-bottom-heading{
    display:flex;align-items:stretch;flex-shrink:0;
    background:var(--bar);
    border-bottom:1px solid var(--border);
    padding:0 20px;gap:4px;
  }
  .wc-bottom-heading-style{
    position:relative;padding:9px 18px;
    font-size:12px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;
    color:var(--text);cursor:pointer;
    transition:color .2s ease;white-space:nowrap;
  }
  .wc-bottom-heading-style::after{
    content:'';position:absolute;bottom:-1px;left:12px;right:12px;
    height:2px;border-radius:2px 2px 0 0;
    background:var(--neo1);
    box-shadow:0 0 8px var(--neo1),0 0 20px rgba(0,234,255,0.4);
    transform:scaleX(0);opacity:0;
    transition:transform .28s cubic-bezier(0.4,0,0.2,1),opacity .2s ease;
  }
  .wc-bottom-heading-style.wc-active{color:var(--neo1);}
  .wc-bottom-heading-style.wc-active::after{transform:scaleX(1);opacity:1;}
  .wc-bottom-heading-style:hover:not(.wc-active){color:rgba(255,255,255,0.7);}

  .wc-bottom-panel{
    padding:28px 24px;
    opacity:0;transform:translateY(8px);
    transition:opacity .28s ease,transform .28s cubic-bezier(0.4,0,0.2,1);
    pointer-events:none;position:absolute;inset:0;
  }
  .wc-bottom-panel.wc-active{
    opacity:1;transform:translateY(0);
    pointer-events:auto;position:relative;
  }

  .wc-bottom-panel-label{
    font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
    color:var(--neo1);margin-bottom:16px;opacity:0.7;
  }
  .wc-bottom-panel-title{
    font-size:22px;font-weight:500;color:var(--text-hi);
    margin-bottom:10px;line-height:1.3;
  }
  .wc-bottom-panel-desc{
    font-size:14px;color:var(--text);line-height:1.75;max-width:520px;
  }
  .wc-bottom-divider{
    height:1px;background:var(--border);margin:22px 0;
  }
  .wc-bottom-stat-row{display:flex;gap:16px;flex-wrap:wrap;}
  .wc-bottom-stat{
    flex:1;min-width:100px;
    background:#111;border:1px solid var(--border);border-radius:8px;
    padding:14px 16px;
  }
  .wc-bottom-stat-val{
    font-size:20px;font-weight:500;color:var(--text-hi);margin-bottom:4px;
  }
  .wc-bottom-stat-key{font-size:12px;color:var(--text);letter-spacing:0.06em;text-transform:uppercase;}
  .wc-bottom-s1 .wc-bottom-stat-val{color:var(--neo1);text-shadow:0 0 12px rgba(0,234,255,0.5);}
  .wc-bottom-s2 .wc-bottom-stat-val{color:var(--neo2);text-shadow:0 0 12px rgba(191,0,255,0.5);}

  .wc-bottom-tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;}
  .wc-bottom-tag{
    padding:5px 13px;border-radius:99px;font-size:12px;font-weight:500;
    border:1px solid var(--border);color:var(--text);
    background:rgba(0,234,255,0.04);letter-spacing:0.03em;
    transition:border-color .18s,color .18s;
  }
  .wc-bottom-tag:hover{border-color:var(--border-h);color:var(--neo1);}














.wc-font-flag {
  display: inline-flex;
  cursor: default;
}

.wc-font-flag svg {
  transition: transform 0.15s ease, transform-origin 0.15s ease;
  transform-origin: left center;
}

.wc-font-flag:hover svg {
  transform: scale(3);
  transform-origin: left center;
}



#wb-selector_element_data.wc-inactive{
  display: none;
}
#wb-selector_element_data{
  font-size:14px;
  color:var(--accent);
  padding:10px;
  border:1px solid var(--modal-border);
  margin:5px;
  border-radius: 10px;
  padding:10px;
  
}

#wb-selector_element_data_id{
  border:1px solid var(--modal-border);
  border-radius: 4px;
  padding:4px;
  margin:4px;
  width:100%;
  
}


#wb-selector_element_data_class{
  border:1px solid var(--modal-border);
  border-radius: 4px;
  padding:4px;
  width:100%;
  margin:4px;
  
}

.wc-selector_element_data-value{
  color:rgba(255,255,255,0.8);
  display:flex;
  align-items:center;
  flex-direction: row;
  border-radius: 5px;
  padding:2px 7px;
  margin:0;
  font-size:12px;
  font-family:var(--mono);
  line-height:1.5;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.09);
}
.wc-selector_element_data-value.wc-selector_id{
  background:rgba(186,130,255,0.12);border-color:rgba(186,130,255,0.28);color:#caa3ff;
}
.wc-selector_element_data-value.wc-selector_cls{
  background:rgba(255,170,60,0.12);border-color:rgba(255,170,60,0.28);color:#ffc56b;
}
.wc-selector_element_data-value.wc-selector_state{
  background:rgba(0,220,140,0.12);border-color:rgba(0,220,140,0.28);color:#3fe3ad;
}
.wc-selector_element_data-value.wc-selector_virtual{
  background:rgba(0,234,255,0.12);border-color:rgba(0,234,255,0.28);color:#5fe9ff;
}
.wc-selector_element_data-value.wc-selector_combination{
  background:transparent;border-color:transparent;color:rgba(255,255,255,0.25);padding:2px 2px;font-size:12px;
}
.wc-selector_element_data-value{cursor:pointer;transition:filter .15s,background .15s;}
.wc-selector_element_data-value:hover{filter:brightness(1.2);}
.wc-selector_element_data-value.wc-sel-active{
  background:rgba(0,234,255,0.1);
  box-shadow:0 0 0 2px var(--accent);
}
/* 
@media screen and (max-width: 240px){

  .selector_element_data-value{
    flex-direction: row;
    padding:2px;
    border:1px solid var(--modal-border);
  
  }
  
} */


.wc-selector_also_in {
  font-size:12px;
  color: var(--accent, #00eaff);
  opacity: 0.65;
  padding: 0 4px;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: default;
}

.wc-selector_element_data-delete {
  font-size:12px;
  opacity: 0.45;
  cursor: pointer;
  width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;
  border-radius: 50%;
  margin-left:auto;
  flex-shrink:0;
  color:rgba(255,255,255,0.6);
  transition: all 0.15s ease;
}

.wc-selector_element_data-delete:hover {
  opacity: 1;
  color: #ff5c5c;
  background: rgba(255, 70, 70, 0.15);
}

.wc-selector_element_data-delete.wc-inactive{
  opacity:0.5
}

.wc-selectors_element_id{
  border:1px solid var(--modal-border);
  color: var(--accent);
  padding:5px;
  background: #000;
}

.wc-selectors_element_id::placeholder{
  color:grey
}


.wc-Selector-wrap{padding:10px;max-width:340px;color:white;}

.wc-selector-target-indicator{font-size:12px;color:rgba(255,255,255,0.55);background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:6px;padding:5px 8px;margin-bottom:6px;font-family:'JetBrains Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wc-selector-target-indicator.wc-selector-target-set{color:var(--accent);border-color:rgba(0,234,255,0.3);background:rgba(0,234,255,0.06);}

.wc-style-target-indicator{font-size:12px;line-height:1.4;color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.04);border:1px dashed var(--border);border-radius:6px;padding:6px 8px;margin-bottom:6px;}
/* Amber warn variant — same hue as the pulsing canvas outline (wcBodyEditPulse),
   so the right-panel hint reads as the explanation of that yellow blink. */
.wc-style-target-indicator.wc-body-warn{color:rgba(255,205,120,0.92);background:rgba(255,176,46,0.09);border:1px solid rgba(255,176,46,0.45);}
.wc-style-target-indicator.wc-body-warn b{color:#ffcf85;font-weight:700;}
.wc-style-target-indicator.wc-body-warn .wc-body-warn-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ffb02e;box-shadow:0 0 6px rgba(255,176,46,0.7);margin-right:6px;vertical-align:middle;animation:tfb-blink 1.8s ease-in-out infinite;}

/* ── ACCORDION (your style) ── */
.wc-Selector-acc-wrap{padding:0}
.wc-Selector-acc-item{border:1px solid var(--a22);border-radius:8px;margin-bottom:8px;transition:border-color .25s,opacity .25s}
.wc-Selector-acc-item.wc-open{border-color:var(--a66)}
.wc-Selector-acc-item.wc-Selector-inactive{opacity:.4;border-color:rgba(0,234,255,0.11)}
.wc-Selector-acc-item.wc-Selector-inactive .wc-Selector-acc-body-inner{pointer-events:none}
.wc-Selector-acc-header{display:flex;align-items:center;padding:.55rem .9rem;gap:0;min-height:44px;cursor:pointer;user-select:none;overflow: auto;}
.wc-Selector-acc-header:hover{background:var(--a08)}

/* @media (max-width:200px) {
  .Selector-acc-header{

  }
} */


.wc-Selector-acc-cb{flex-shrink:0;width:15px;height:15px;border:1.5px solid rgba(0,234,255,0.44);border-radius:3px;margin-right:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s,border-color .18s;position:relative;background:var(--accent);border-color:var(--accent)}
.wc-Selector-acc-cb::after{content:'';position:absolute;width:8px;height:4.5px;border-left:2px solid #111;border-bottom:2px solid #111;transform:rotate(-45deg) translate(0px,-1px)}
.wc-Selector-acc-cb.wc-Selector-unchecked{background:transparent;border-color:rgba(0,234,255,0.44)}
.wc-Selector-acc-cb.wc-Selector-unchecked::after{display:none}
.wc-Selector-acc-svg-icon{flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.wc-Selector-acc-sep{flex-shrink:0;width:1px;height:18px;background:rgba(0,234,255,0.3);margin:0 9px}
.wc-Selector-acc-label{flex:1;font-size:13px;font-weight:500;white-space:nowrap;}
.wc-Selector-acc-badge{font-size:12px;padding:2px 7px;border-radius:4px;font-family:var(--mono);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;margin-right:6px}
.wc-Selector-acc-badge.wc-Selector-badge-cyan{background:var(--a12);border:.5px solid var(--a25);color:var(--green)}
.wc-Selector-acc-badge.wc-Selector-badge-purple{background:var(--pu12);border:.5px solid var(--pu25);color:var(--neo3)}
.wc-Selector-acc-badge.wc-Selector-badge-none{color:var(--muted)}
.wc-Selector-acc-toggle{flex-shrink:0;width:18px;height:18px;position:relative;border:1.5px solid var(--green);border-radius:50%;margin-left:6px;transition:transform .3s,background .25s;pointer-events:none}
.wc-Selector-acc-toggle::before,.wc-Selector-acc-toggle::after{content:'';position:absolute;background:white;border-radius:2px}
.wc-Selector-acc-toggle::before{width:7px;height:1.5px;top:50%;left:50%;transform:translate(-50%,-50%)}
.wc-Selector-acc-toggle::after{width:1.5px;height:7px;top:50%;left:50%;transform:translate(-50%,-50%);transition:opacity .25s}
.wc-Selector-acc-item.wc-open .wc-Selector-acc-toggle{background:var(--a12);transform:rotate(90deg)}
.wc-Selector-acc-item.wc-open .wc-Selector-acc-toggle::after{opacity:0}
.wc-Selector-acc-body{
  display:none;padding:8px 10px 10px;
}
/* .Selector-acc-body-inner{
  display: flex;
  flex-direction: column;
} */
.wc-Selector-acc-item.wc-open .wc-Selector-acc-body{display:block}

/* ── CARD ── */
.wc-Selector-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;margin-bottom:8px}
.wc-Selector-card-head{display:flex;align-items:center;gap:7px;padding:9px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);border-bottom:1px solid var(--border)}
.wc-Selector-card-body{padding:10px 12px}

/* ── INPUTS / BUTTONS ── */
.wc-Selector-inp{width:100%;background:#0a0a0a;border:1px solid var(--a25);border-radius:6px;padding:5px 9px;color:white;font-size:12px;font-family:var(--mono);outline:none;transition:border-color .15s}
.wc-Selector-inp:focus{border-color:var(--accent)}
.wc-Selector-inp::placeholder{color:grey}
.wc-Selector-row{display:flex;gap:6px;align-items:center}
.wc-Selector-btn{background:transparent;border:1px solid var(--a25);border-radius:6px;color:var(--accent);font-size:12px;font-family:var(--mono);padding:5px 10px;cursor:pointer;transition:all .15s;white-space:nowrap}
.wc-Selector-btn:hover{background:var(--a12)}
.wc-Selector-btn.wc-Selector-accent{border-color:var(--A25);color:var(--accent)}.wc-Selector-btn.wc-Selector-accent:hover{background:var(--p12)}
.wc-Selector-btn.wc-Selector-red{border-color:rgba(255,68,102,0.3);color:var(--red)}.wc-Selector-btn.wc-Selector-red:hover{background:rgba(255,68,102,0.08)}
.wc-Selector-btn.wc-Selector-copied{border-color:rgba(0,255,136,0.4);color:#00ff88;background:rgba(0,255,136,0.08)}
.wc-Selector-btn:disabled{opacity:.25;cursor:not-allowed}


.wc-Selector-btn-element{background:transparent;
  border:1px solid var(--a25);border-radius:6px;
  color:var(--accent);font-size:12px;font-family:var(--mono);padding:5px 10px;cursor:pointer;transition:all .15s;white-space:nowrap}
.wc-Selector-btn-element:hover{background:var(--a12)}
.wc-Selector-btn-element.wc-Selector-accent{border-color:var(--A25);color:var(--accent)}.wc-Selector-btn.wc-Selector-accent:hover{background:var(--p12)}
.wc-Selector-btn-element.wc-Selector-red{border-color:rgba(255,68,102,0.3);color:var(--red)}.wc-Selector-btn.wc-Selector-red:hover{background:rgba(255,68,102,0.08)}
.wc-Selector-btn-element:disabled{opacity:.25;cursor:not-allowed}
.wc-Selector-btn-element.wc-inactive{display: none;}
.wc-Selector-btn-element.wc-pinned{
  background-color: var(--tab-bg);
}

.wc-Selector-msg{font-size:12px;padding:4px 9px;border-radius:5px;margin-top:5px;display:none;align-items:center;justify-content:space-between;gap:6px}
.wc-Selector-msg.wc-Selector-error{background:rgba(255,68,102,0.1);border:1px solid rgba(255,68,102,0.3);color:var(--red);display:flex}
.wc-Selector-msg.wc-Selector-warn{background:rgba(255,183,0,0.08);border:1px solid rgba(255,183,0,0.28);color:#ffb700;display:flex}
.wc-Selector-msg-x{cursor:pointer;opacity:.5;flex-shrink:0}.wc-Selector-msg-x:hover{opacity:1}
.wc-Selector-add-box{padding:8px;border-radius:7px;background:var(--panel2);border:1px solid var(--border);margin-bottom:7px}
.wc-Selector-add-lbl{
  padding:5px;
  color:white;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-family:var(--mono);
}
.wc-Selector-tag-row{display:flex;flex-wrap:wrap;gap:4px;min-height:16px;margin-top:5px}
.wc-Selector-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font-size:12px}
.wc-Selector-tag.wc-Selector-cls{background:var(--a12);border:.5px solid var(--a25);color:var(--accent)}
.wc-Selector-tag.wc-Selector-id{background:var(--a12);border:.5px solid var(--a25);color:var(--accent)}
.wc-Selector-tag-x{cursor:pointer;opacity:.4;font-size:12px}.wc-Selector-tag-x:hover{opacity:1}

/* ── Identifiers Card (Add-element popup) — same tokens as .Selector-* above
   (dark #0a0a0a fields, --a25 cyan borders, --accent focus, pill tags) so
   assigning an id/class feels like the same control everywhere it shows up. ── */
.wc-sel-group{margin-bottom:14px}
.wc-sel-group:last-child{margin-bottom:0}
.wc-sel-label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-family:var(--mono);margin-bottom:6px}
.wc-sel-field{position:relative;display:flex;align-items:center;gap:6px;background:#0a0a0a;border:1px solid var(--a25);border-radius:6px;padding:0 9px;transition:border-color .15s}
.wc-sel-field:focus-within{border-color:var(--accent)}
.wc-sel-field.wc-flash{border-color:var(--red);animation:sel-field-shake .3s}
@keyframes sel-field-shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.wc-sel-field input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:#fff;font-size:12px;font-family:var(--mono);padding:7px 0}
.wc-sel-field input::placeholder{color:grey}
.wc-status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:rgba(255,255,255,0.15);transition:background .15s}
.wc-status-dot.wc-ok{background:var(--green)}
.wc-status-dot.wc-warn{background:#ffb700}

/* .sel-field lives inside .popupBig, which redeclares only accent/green/red/muted
   (see .popupBig comment above) — var(--a12) etc. aren't defined there, so this
   uses a literal instead of the --aXX tokens the sidebar's .sel2-apply-btn uses. */
.wc-sel-add-btn{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;margin:0 -3px 0 1px;background:transparent;border:none;border-radius:4px;color:var(--accent);opacity:.7;cursor:pointer;transition:opacity .12s,background .12s}
.wc-sel-add-btn:hover{opacity:1;background:rgba(0,234,255,0.12)}
.wc-sel-add-btn:active{transform:scale(.92)}

.wc-hint{font-size:12px;color:rgba(255,255,255,0.3);margin-top:4px;font-family:var(--mono)}

.wc-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.wc-pill{display:inline-flex;align-items:center;gap:4px;background:var(--a08);border:1px solid var(--a25);border-radius:20px;padding:3px 4px 3px 9px;font-size:12px;color:var(--accent);font-family:var(--mono)}
.wc-pill.wc-pill-new{border-color:rgba(0,255,136,0.35);color:var(--green)}
.wc-pill-badge{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;background:rgba(0,255,136,0.15);color:var(--green);border-radius:3px;padding:1px 4px}
.wc-pill-btn{background:transparent;border:none;color:inherit;opacity:.5;cursor:pointer;font-size:12px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:opacity .15s,background .15s;flex-shrink:0}
.wc-pill-btn:hover{opacity:1;background:rgba(255,255,255,0.08)}
.wc-pill-btn.wc-rm:hover{color:var(--red);background:rgba(255,68,102,0.12)}

.wc-autocomplete-list{position:fixed;background:#1a1a1a;border:1.5px solid var(--a25);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.5);z-index:99999;display:none;overflow:hidden;max-height:190px}
.wc-autocomplete-list.wc-open{display:block}
.wc-ac-scroll{max-height:190px;overflow-y:auto}
.wc-ac-scroll::-webkit-scrollbar{width:3px}
.wc-ac-scroll::-webkit-scrollbar-thumb{background:rgba(0,234,255,0.15);border-radius:2px}
.wc-ac-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;cursor:pointer;font-size:12px;color:rgba(255,255,255,.7);font-family:var(--mono)}
.wc-ac-item:hover,.wc-ac-item.wc-active{background:var(--a08);color:#fff}
.wc-ac-tag{font-size:12px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.04em}

.wc-warn{display:none;align-items:center;gap:6px;font-size:12px;padding:5px 9px;border-radius:5px;margin-bottom:6px;opacity:0;transform:translateY(-3px);transition:opacity .15s,transform .15s}
.wc-warn.wc-show{display:flex;opacity:1;transform:translateY(0)}
.wc-warn-yellow{background:rgba(255,183,0,0.08);border:1px solid rgba(255,183,0,0.28);color:#ffb700}
.wc-warn-red{background:rgba(255,68,102,0.1);border:1px solid rgba(255,68,102,0.3);color:var(--red)}
.wc-warn-close{margin-left:auto;cursor:pointer;opacity:.5;background:none;border:none;color:inherit;font-size:12px;flex-shrink:0;line-height:1}
.wc-warn-close:hover{opacity:1}

/* ── DROPDOWN ── */
.wc-Selector-dd-wrap{position:relative;user-select:none;width:100%;display: flex;flex-direction: row;}
.wc-Selector-acc-body-inner .wc-Selector-dd-wrap{
  display: flex;flex-direction: column;
}
.wc-Animation-Selector-dd-wrap{position:relative;user-select:none;width:min(500px,100%);display: flex;flex-direction: row;}

.wc-Selector-dd-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;background:#1a1a1a;border:1.5px solid rgba(255,255,255,0.1);border-radius:8px;padding:7px 12px;transition:border-color .15s,background .15s;color:rgba(255,255,255,0.75);font-size:12px;font-family:var(--mono);overflow: hidden;}
.wc-Selector-dd-trigger:hover{background:#1d1d1d;border-color:var(--a25)}
.wc-Selector-dd-trigger.wc-Selector-open{border-color:rgba(0,234,255,0.4)}
.wc-Selector-dd-left{display:flex;align-items:center;gap:7px;flex:1;min-width:0}
.wc-Selector-dd-lbl{display:flex;align-items:center;gap:3px;flex-wrap:wrap;min-height:18px}
.wc-Selector-dd-lbl.wc-Selector-picked .wc-selector_element_data-value{opacity:1}
.wc-Selector-dd-lbl .wc-selector_element_data-value{padding:1px 5px;font-size:12px}
.wc-Selector-dd-arrow{flex-shrink:0;transition:transform .18s;display:flex;align-items:center}
.wc-Selector-dd-trigger.wc-Selector-open .wc-Selector-dd-arrow{transform:rotate(180deg)}
.wc-Selector-dd-panel{
  position:absolute;top:calc(100% + 5px);left:0;right:0;background:#1a1a1a;border:1.5px solid var(--a25);border-radius:8px;overflow:hidden;display:none;z-index:999;box-shadow:0 8px 24px rgba(0,0,0,0.5);
  width:100%;pointer-events:auto;
}
/* bottom panels (Animation / Responsive) sit near the bottom of the viewport —
   opening the selector-pick dropdown downward gets clipped, so flip it upward */
.wc-bottom-panel .wc-Selector-dd-panel{top:auto;bottom:calc(100% + 5px);box-shadow:0 -8px 24px rgba(0,0,0,0.5);}
.wc-Selector-dd-panel.wc-Selector-open{display:block}
.wc-Selector-dd-search{display:flex;align-items:center;gap:6px;padding:7px 10px;border-bottom:1px solid var(--border);overflow: hidden; }
.wc-Selector-dd-search-icon{flex-shrink:0;opacity:.3}
.wc-Selector-dd-sin{flex: 1 1 0;width: 0;  background:transparent;border:none;outline:none;font-size:12px;color:rgba(255,255,255,.7);font-family:var(--mono)}
.wc-Selector-dd-sin::placeholder{color:rgba(255,255,255,.2)}
.wc-Selector-dd-list{max-height:320px;overflow-y:auto;overscroll-behavior:contain}
.wc-Selector-dd-list::-webkit-scrollbar{width:6px}
.wc-Selector-dd-list::-webkit-scrollbar-track{background:rgba(0,234,255,0.03)}
.wc-Selector-dd-list::-webkit-scrollbar-thumb{background:rgba(0,234,255,0.25);border-radius:3px;border:1px solid rgba(0,234,255,0.1)}
.wc-Selector-dd-list::-webkit-scrollbar-thumb:hover{background:rgba(0,234,255,0.4)}

.wc-Selector-dd-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;color:rgba(255,255,255,0.45);font-size:12px;text-align:center;gap:6px}
.wc-Selector-dd-empty-icon{font-size:28px;opacity:0.4;line-height:1}
.wc-Selector-dd-empty strong{color:rgba(255,255,255,0.65);font-weight:600}

.wc-Selector-dd-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;cursor:pointer;font-size:12px;color:rgba(255,255,255,0.65);transition:all 0.12s ease;border-bottom:1px solid rgba(255,255,255,0.03)}
.wc-Selector-dd-item:last-child{border-bottom:none}
.wc-Selector-dd-item:hover{background:rgba(0,234,255,0.08);color:rgba(255,255,255,0.95)}
.wc-Selector-dd-item.wc-Selector-picked{background:rgba(0,234,255,0.14);color:var(--accent);border-left:2px solid var(--accent);padding-left:10px}
.wc-Selector-dd-item.wc-Selector-picked .wc-Selector-dd-item-badge{opacity:1}

.wc-Selector-dd-item-code{display:flex;align-items:center;flex:1;min-width:0;font-family:var(--mono);overflow:hidden;text-overflow:ellipsis}
.wc-Selector-dd-item-code span{overflow:hidden;text-overflow:ellipsis}

.wc-Selector-dd-item-types{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0}
.wc-Selector-dd-item-badge{display:inline-flex;align-items:center;padding:2px 6px;border-radius:3px;font-size:12px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;white-space:nowrap;opacity:0.7;transition:all 0.12s ease}

.wc-Selector-dd-item-badge-id{background:rgba(0,234,255,0.15);color:#00eaff;border:0.5px solid rgba(0,234,255,0.3)}
.wc-Selector-dd-item-badge-class{background:rgba(124,179,66,0.15);color:#7cb342;border:0.5px solid rgba(124,179,66,0.3)}
.wc-Selector-dd-item-badge-state{background:rgba(255,183,0,0.15);color:#ffb700;border:0.5px solid rgba(255,183,0,0.3)}
.wc-Selector-dd-item-badge-virtual{background:rgba(168,85,247,0.15);color:#a855f7;border:0.5px solid rgba(168,85,247,0.3)}
.wc-Selector-dd-item-badge-combination{background:rgba(59,130,246,0.15);color:#3b82f6;border:0.5px solid rgba(59,130,246,0.3)}

.wc-Selector-dd-item:hover .wc-Selector-dd-item-badge{opacity:1}
.wc-Selector-dd-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-Selector-dd-item-cat{font-size:12px;opacity:.3;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0}
.wc-Selector-dd-item-svg{flex-shrink:0;display:flex;align-items:center;opacity:.55}
.wc-Selector-dd-item.wc-Selector-selected .wc-Selector-dd-item-svg{opacity:1}

/* ── Animation pane "pick a selector" list: flatten the nested boxes ── */
#wb-Anim-list.wc-Selector-dd-list{max-height:260px}
#wb-Anim-list .wc-Selector-dd-item{padding:7px 10px}
#wb-Anim-list .wc-selector_element_data-wrap{
  background:transparent;border:none;border-radius:0;padding:0;gap:3px;
}
#wb-Anim-list .wc-selector_element_data-wrap:hover{background:transparent;border-color:transparent}
#wb-Anim-list .wc-selector_element_data-value{
  border:none;padding:1px 6px;border-radius:4px;background:rgba(255,255,255,0.06);
}
#wb-Anim-list .wc-selector_element_data-value.wc-selector_id{background:rgba(186,130,255,0.14);color:#caa3ff}
#wb-Anim-list .wc-selector_element_data-value.wc-selector_cls{background:rgba(255,170,60,0.14);color:#ffc56b}
#wb-Anim-list .wc-selector_element_data-value.wc-selector_state{background:rgba(0,220,140,0.14);color:#3fe3ad}
#wb-Anim-list .wc-selector_element_data-value.wc-selector_virtual{background:rgba(0,234,255,0.14);color:#5fe9ff}
#wb-Anim-list .wc-selector_element_data-value.wc-selector_combination{background:transparent;padding:1px 2px}
#wb-Anim-list .wc-Selector-dd-item-badge{
  border:none;padding:0;background:transparent;opacity:.55;font-size:10.5px;
}
#wb-Anim-list .wc-Selector-dd-item:hover .wc-Selector-dd-item-badge{opacity:.85}
#wb-Anim-list .wc-Selector-dd-item-badge-id{color:#00eaff}
#wb-Anim-list .wc-Selector-dd-item-badge-class{color:#7cb342}
#wb-Anim-list .wc-Selector-dd-item-badge-state{color:#ffb700}
#wb-Anim-list .wc-Selector-dd-item-badge-virtual{color:#a855f7}
#wb-Anim-list .wc-Selector-dd-item-badge-combination{color:#3b82f6}

/* ── COMBINATOR STRIP ── */
.wc-Selector-comb-strip{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px;color:white;}
.wc-Selector-comb-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 8px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--muted);transition:all .15s;font-family:var(--mono);cursor:pointer}
.wc-Selector-comb-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--a12)}
.wc-Selector-comb-btn:disabled{opacity:.22;cursor:not-allowed}
.wc-Selector-comb-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}

/* ── CHAIN STEPS ── */
.wc-Selector-chain-step{display:flex;gap:5px;align-items:center;margin-top:5px}
.wc-Selector-chain-lbl{font-size:12px;color:var(--accent);padding:2px 6px;border-radius:4px;background:var(--a12);border:.5px solid var(--a25);white-space:nowrap;flex-shrink:0}

/* ── PREVIEW ── */
.wc-Selector-preview-out{font-size:12px;color:var(--accent);background:rgba(0,234,255,0.04);border:1px solid var(--a25);border-radius:6px;padding:6px 10px;font-family:var(--mono);min-height:28px;word-break:break-all}

/* ── BUILT LIST ── */
.wc-Selector-tok{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:4px;font-size:12px;font-family:var(--mono)}
.wc-Selector-tok.wc-Selector-cls{background:var(--a12);border:.5px solid var(--a25);color:var(--accent)}
.wc-Selector-tok.wc-Selector-id{background:var(--A25);border:.5px solid var(--A25);color:var(--accent)}
.wc-Selector-tok.wc-Selector-psc{background:var(--g08);border:.5px solid var(--g22);color:var(--green)}
.wc-Selector-tok.wc-Selector-pel{background:var(--pu12);border:.5px solid var(--pu25);color:var(--purple)}
.wc-Selector-tok.wc-Selector-comb{display:inline-flex;align-items:center;justify-content:center;padding:0 3px;color:var(--muted);opacity:.7}
.wc-Selector-tok.wc-Selector-el{background:rgba(255,255,255,.04);border:.5px solid var(--border);color:rgba(255,255,255,.45)}
.wc-Selector-built-item{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:7px;background:var(--panel2);border:1px solid var(--border);margin-bottom:4px}
.wc-Selector-built-toks{display:flex;flex-wrap:wrap;gap:2px;flex:1;align-items:center}
.wc-Selector-built-acts{display:flex;gap:3px;flex-shrink:0}
.wc-Selector-built-list{max-height:170px;overflow-y:auto}
.wc-Selector-built-list::-webkit-scrollbar{width:3px}
.wc-Selector-built-list::-webkit-scrollbar-thumb{background:var(--a12);border-radius:2px}
.wc-Selector-search-rel{position:relative;margin-bottom:7px}
.wc-Selector-search-rel svg{position:absolute;left:8px;top:50%;transform:translateY(-50%);opacity:.3;pointer-events:none}
.wc-Selector-search-inp{padding-left:26px !important}

/* ── NTH ── */
.wc-Selector-nth-row{display:flex;gap:4px;align-items:center;margin-top:6px;flex-wrap:wrap}
.wc-Selector-nth-inp{width:72px;background:#0a0a0a;border:1px solid var(--a25);border-radius:5px;padding:4px 7px;color:var(--text);font-family:var(--mono);font-size:12px;outline:none;transition:border-color .15s}
.wc-Selector-nth-inp:focus{border-color:var(--accent)}
.wc-Selector-nth-qb{font-size:12px;padding:3px 7px;border-radius:4px;border:1px solid var(--a25);background:transparent;color:var(--accent);cursor:pointer;font-family:var(--mono);transition:background .12s}
.wc-Selector-nth-qb:hover{background:var(--a12)}

.wc-Selector-virt-warn{font-size:12px;color:var(--margin);padding:4px 8px;border-radius:5px;background:var(--pu12);border:1px solid var(--pu25);margin-bottom:6px;display:none}


#wb-showSelectorState{
  color:white;
}
#wb-showSelectorState .wc-Selector-tag{
  border:1px solid var(--a25);
}

#wb-Selector-state-list{
  width: 500px;
}

/* ═══════════════════════════════════════════════════
   SEL2 — production selector panel
═══════════════════════════════════════════════════ */
.wc-sel2-wrap{padding:10px;display:flex;flex-direction:column;gap:8px}

/* cards */
.wc-sel2-card{background:var(--panel2);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.wc-sel2-card-hd{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border)}
.wc-sel2-card-title{font-size:12px;font-weight:600;color:var(--text);letter-spacing:.03em}
.wc-sel2-badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;font-size:12px;font-weight:700;font-family:var(--mono);flex-shrink:0}
.wc-sel2-badge-id{background:var(--A25);color:var(--accent);border:1px solid var(--a25)}
.wc-sel2-badge-cls{background:rgba(0,234,255,.08);color:var(--accent);border:1px solid var(--a25)}
.wc-sel2-card-body{padding:10px 12px}

/* inputs */
.wc-sel2-input-row{display:flex;align-items:center;gap:0;background:#0a0a0a;border:1px solid var(--border);border-radius:7px;overflow:hidden;transition:border-color .15s}
.wc-sel2-input-row:focus-within{border-color:var(--accent)}
.wc-sel2-input-prefix{padding:0 7px;font-size:12px;font-family:var(--mono);font-weight:700;color:var(--accent);background:rgba(0,234,255,.06);border-right:1px solid var(--border);display:flex;align-items:center;align-self:stretch;flex-shrink:0}
.wc-sel2-prefix-id{color:var(--accent)}
.wc-sel2-prefix-cls{color:var(--accent)}
.wc-sel2-input{flex:1;min-width:0;background:transparent;border:none;outline:none;padding:7px 6px;font-size:12px;color:var(--text);font-family:var(--mono)}
.wc-sel2-input::placeholder{color:var(--muted);opacity:.5}
.wc-sel2-apply-btn{display:flex;align-items:center;justify-content:center;min-width:30px;width:30px;height:30px;background:transparent;border:none;border-left:1px solid var(--border);cursor:pointer;color:var(--accent);opacity:.75;transition:opacity .12s,background .12s;flex-shrink:0}
.wc-sel2-apply-btn:hover{opacity:1;background:var(--a12)}
.wc-sel2-warn-inline{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--margin);background:var(--bg);border:1px solid var(--margin);border-radius:5px;padding:4px 8px;margin-bottom:6px}
.wc-sel2-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px;min-height:0}

/* builder card */
.wc-sel2-builder-card{background:var(--panel2);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.wc-sel2-builder-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;min-height:42px;box-sizing:border-box;cursor:pointer;user-select:none;transition:background .12s}
.wc-sel2-builder-hd:hover{background:rgba(255,255,255,.03)}
.wc-sel2-builder-hd-left{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--text);letter-spacing:.03em}
.wc-sel2-builder-hd-right{display:flex;align-items:center;gap:6px}
.wc-sel2-builder-badge{font-size:12px;font-family:var(--mono);color:var(--accent);background:var(--a12);border:.5px solid var(--a25);border-radius:4px;padding:1px 6px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-sel2-builder-arrow{color:var(--muted);transition:transform .2s;display:flex}
.wc-sel2-builder-card.wc-open .wc-sel2-builder-arrow{transform:rotate(180deg)}
.wc-sel2-builder-body{border-top:1px solid var(--border);padding:12px 14px;display:flex;flex-direction:column;gap:14px}

/* field blocks inside builder */
.wc-sel2-field-block{display:flex;flex-direction:column;gap:6px}
.wc-sel2-field-lbl{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.wc-sel2-field-lbl-row{display:flex;align-items:center;justify-content:space-between}
.wc-sel2-clear-link{background:none;border:none;cursor:pointer;font-size:12px;color:var(--margin);padding:0;opacity:.7;transition:opacity .12s}
.wc-sel2-clear-link:hover{opacity:1}
.wc-sel2-dd-override{width:100%}

/* chip grids */
.wc-sel2-chip-grid{display:flex;flex-wrap:wrap;gap:4px}
.wc-sel2-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:6px;font-size:12px;font-family:var(--mono);cursor:pointer;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);transition:background .12s,border-color .12s,color .12s;user-select:none}
.wc-sel2-chip:hover{background:var(--a12);border-color:var(--a25);color:var(--accent)}
.wc-sel2-chip.wc-sel2-chip-active{background:var(--a12);border-color:var(--accent);color:var(--accent);font-weight:600}
.wc-sel2-chip-virt.wc-sel2-chip-active{background:var(--pu12);border-color:var(--purple);color:var(--purple)}
.wc-sel2-chip-virt:hover{background:var(--pu12);border-color:var(--pu25);color:var(--purple)}

/* nth presets */
.wc-sel2-nth-presets{display:flex;gap:3px;flex-wrap:wrap}

/* virt warn */
.wc-sel2-virt-warn{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--margin);background:var(--pu12);border:1px solid var(--pu25);border-radius:5px;padding:4px 8px}

/* preview block */
.wc-sel2-preview-block{background:rgba(0,234,255,.03);border:1px solid var(--a25);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.wc-sel2-preview-lbl{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.wc-sel2-preview-code{font-size:13px;font-family:var(--mono);color:var(--accent);word-break:break-all;min-height:20px}
.wc-sel2-actions-row{display:flex;gap:6px}
.wc-sel2-btn-build{display:flex;align-items:center;gap:5px;flex:1;justify-content:center;padding:7px 12px;border-radius:7px;border:1px solid var(--accent);background:var(--a12);color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;transition:background .12s}
.wc-sel2-btn-build:hover{background:var(--a25)}
.wc-sel2-btn-reset{padding:7px 12px;border-radius:7px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:12px;cursor:pointer;transition:background .12s}
.wc-sel2-btn-reset:hover{background:rgba(255,255,255,.05);color:var(--text)}

/* built rules list card */
.wc-sel2-list-card{background:var(--panel2);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.wc-sel2-list-hd{display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:12px;font-weight:600;color:var(--text);letter-spacing:.03em}
.wc-sel2-list-body{padding:10px 12px}
.wc-sel2-search-row{display:flex;align-items:center;gap:6px;background:#0a0a0a;border:1px solid var(--border);border-radius:6px;padding:5px 9px;margin-bottom:8px;transition:border-color .15s}
.wc-sel2-search-row:focus-within{border-color:var(--a25)}
.wc-sel2-search-row svg{opacity:.3;flex-shrink:0}
.wc-sel2-search-input{flex:1;background:transparent;border:none;outline:none;font-size:12px;color:var(--text);font-family:var(--mono)}
.wc-sel2-search-input::placeholder{color:var(--muted);opacity:.5}
.wc-sel2-empty{font-size:12px;color:var(--muted);text-align:center;padding:14px 0;opacity:.6}

/* no-target overlay on ID / Class cards */
.wc-sel2-card{position:relative}
.wc-sel2-no-target-overlay{display:none;position:absolute;inset:0;border-radius:10px;background:rgba(13,13,13,.72);backdrop-filter:blur(2px);z-index:4;align-items:center;justify-content:center;flex-direction:column;gap:5px;pointer-events:all}
.wc-sel2-card--no-target .wc-sel2-no-target-overlay{display:flex}
.wc-sel2-card--no-target .wc-sel2-card-body{opacity:.35;pointer-events:none}
.wc-sel2-no-target-msg{font-size:12px;color:var(--muted);text-align:center;padding:0 12px;line-height:1.4}



























/* .angle-param { display:flex; flex-direction:column; align-items:center; gap:8px; user-select:none; }
.angle-ring  { border-radius:50%; border:1.5px solid #333; background:var(--panel); position:relative; cursor:grab; }
.angle-ring:active { cursor:grabbing; } */
.wc-angle-val   { font-size:12px; font-weight:500; color:var(--accent); font-family:monospace; min-width:40px; text-align:center; }

.wc-angle-param { display: flex; flex-direction: column; align-items: center; gap: 8px; user-select: none; }
.wc-angle-ring { cursor: grab; }
.wc-angle-ring:active { cursor: grabbing; }
.wc-angle-ring.wc-inactive { opacity: .35; pointer-events: none; cursor: not-allowed; }
.wc-angle-input.wc-inactive { opacity: .4; pointer-events: none; cursor: not-allowed; }

#wb-textForComponentSelection{
  color:white;
  font-size:12px;
}

.wc-dom-node-pill.wc-is-root { border-color: #fbbf24; background: #fffbeb; }
.wc-dom-node-pill.wc-is-root .wc-node-id { color: #92400e; }


#wb-show_DOM {background-color: var(--bg-base);
  /* --bg-base:#0d0d0d;
  --bg-panel:#141414; 
  --border:#00eaff26; */
  font-family: monospace; font-size:13px; border: 0.5px solid #ddd; border-radius: 8px; overflow: hidden;  min-height: 120px; }
#wb-show_DOM .wc-dom-header { padding: 10px 14px; background: #f5f5f5; border-bottom: 0.5px solid #ddd; display: flex; align-items: center; justify-content: space-between; }
#wb-show_DOM .wc-dom-header-label { font-size:12px; font-weight: 500; color: #666; }
#wb-show_DOM .wc-dom-body { padding: 14px; overflow: auto; max-height: 420px; }
.wc-dom-loader { display: flex; align-items: center; gap: 10px; padding: 24px 0; color: #aaa; font-size:13px; }
.wc-dom-spinner { width: 16px; height: 16px; border: 2px solid #ddd; border-top-color: #888; border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.wc-dom-empty { padding: 32px 0; text-align: center; color: #aaa; font-size:13px; }
.wc-dom-section { margin-bottom: 14px; }
.wc-dom-section-label { font-size:12px; font-weight: 500; color: #aaa; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.wc-dom-node-list { display: flex; flex-wrap: wrap; gap: 4px; }
.wc-dom-node-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; border: 0.5px solid #ddd; background: #f9f9f9; font-size:12px; }
.wc-dom-node-pill.wc-is-selected { border-color: #93c5fd; background: #eff6ff; }
.wc-dom-node-pill .wc-tag { color: #2563eb; font-weight: 500; }
.wc-dom-node-pill .wc-node-id { color: #aaa; }
.wc-dom-node-pill .wc-node-cls { color: #16a34a; font-size:12px; }
.wc-dom-badge { font-size:12px; padding: 1px 6px; border-radius: 20px; background: #f0f0f0; border: 0.5px solid #ddd; color: #888; }








.wc-region-item {
    display: flex;
    flex-direction: column;
    margin: 4px 0;
    background: var(--panel);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s;
    user-select: none;
}

.wc-region-item:hover { border-color: rgba(0,234,255,0.12); }
.wc-region-item.wc-dragging { opacity: 0.3; border-color: var(--accent); border-style: dashed; }
.wc-region-item.wc-drag-over { border-color: var(--accent); background: rgba(0,234,255,0.03); }

/* head */
.wc-region-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--bar);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.wc-region-item-flag { display: flex; align-items: center; flex-shrink: 0; }
.wc-region-item-flag svg { display: block; }

.wc-region-item-heading {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size:12px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    letter-spacing: 0.04em;
}
/* Auto-managed background-dependent chips (Repeat/Size/Position/etc.) hold a
   _bgMiniDropdown here instead of static text, so each one is independently editable.
   Its open panel is position:absolute and needs to overflow past this row — the
   ellipsis/nowrap truncation above is for plain text and would otherwise clip the
   open dropdown list right at the chip's edge. */
.wc-region-item-heading-dd { overflow: visible; text-overflow: clip; white-space: normal; }
/* .wc-region-item itself clips overflow (rounds its own corners around the collapsible
   body elsewhere) — scoped override so THIS chip's dropdown panel isn't cut off at the
   card's own edge, without touching every other .wc-region-item use (layer cards,
   font-family/filter stacks) that still wants the clip. */
.wc-bg-pop-content .wc-region-item:has(.wc-region-item-heading-dd) { overflow: visible; }

/* drag handle */
.wc-region-item-icon {
    display: flex;
    flex-direction: column;
    gap: 3px;
    cursor: grab;
    padding: 3px;
    flex-shrink: 0;
}
.wc-region-item-icon:active { cursor: grabbing; }
.wc-region-item-icon span {
    display: block;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255,255,255,0.2);
    transition: background 0.15s;
}
.wc-region-item-icon:hover span { background: var(--accent); }

/* toggle + remove */
.wc-region-toggle, .wc-region-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.2s;
}
.wc-region-toggle:hover { background: rgba(255,255,255,0.06); }
.wc-region-remove:hover { background: rgba(255,45,120,0.12); }
.wc-region-remove:hover svg path { stroke: #ff2d78; }

/* body */
.wc-region-item-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
}

/* background-image layer type switcher (Link / Upload / Color / Gradient per layer) —
   a proper segmented control: the group is a padded, bordered track and the active tab
   is a raised pill inside it. flex:1 tabs stay responsive down to the narrow side panel. */
.wc-layer-type-tabs {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 9px;
}
.wc-layer-type-tab {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
    font-size:12px;
    font-weight: 500;
    letter-spacing: 0.2px;
    padding: 6px 4px;
    border-radius: 6px;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.wc-layer-type-tab span { overflow: hidden; text-overflow: ellipsis; }
.wc-layer-type-tab svg { flex-shrink: 0; opacity: 0.85; }
.wc-layer-type-tab:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.9); }
.wc-layer-type-tab.wc-active {
    background: var(--accent);
    color: #00131a;
    font-weight: 600;
    box-shadow: 0 1px 5px rgba(0,234,255,0.35);
}
/* the gradient-tab swatch glyph has its own fixed colors — don't let it wash
   out to the active tab's dark text color when selected. */
.wc-layer-type-tab.wc-active span:first-child[style*="linear-gradient"] { box-shadow: 0 0 0 1px rgba(0,0,0,0.35); }
@container (max-width: 230px) {
    .wc-layer-type-tab span:not(:first-child) { display: none; }
}
.wc-layer-type-panel { display: flex; flex-direction: column; gap: 4px; }

/* let the layer head wrap instead of overflowing once the panel gets narrow —
   same breakpoint/strategy already used for .parametersList_style_element.
   Intentionally unscoped to any container set up by this feature itself — it
   resolves against the property row's existing outer query container (the one
   the 200px/250px rules below already use), not a new one, so it can't freeze
   the row's width once a layer card exists (see PARAMETER_INPUT_TAKER_7_1). */
@container (max-width: 190px) {
    .wc-region-item-head { flex-wrap: wrap; }
    .wc-region-item-heading { flex-basis: 100%; order: 1; white-space: normal; }
}

/* param rows */
.wc-param-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wc-param-label {
    font-size:12px;
    color: rgba(255,255,255,0.3);
    width: 44px;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}

.wc-param-track {
    flex: 1;
    position: relative;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,0.07);
    cursor: pointer;
}

.wc-param-fill {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    border-radius: 2px;
    background: var(--accent);
    pointer-events: none;
}

.wc-param-thumb {
    position: absolute;
    top: 50%;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--accent);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.wc-param-range {
    position: absolute;
    inset: -8px -4px;
    width: calc(100% + 8px);
    height: calc(100% + 16px);
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

.wc-param-val {
    font-size:12px;
    font-family: var(--font-mono, monospace);
    color: var(--accent);
    min-width: 38px;
    text-align: right;
    flex-shrink: 0;
    font-weight: 600;
}

.wc-file-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size:12px; /* 🔻 reduced */
}

/* Button */
.wc-file-btn {
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--neo1);
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.wc-file-btn:hover {
  border: 1px solid var(--border-hover);
  background: rgba(255,255,255,0.03);
}

/* File name */
.wc-file-name {
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* Status */
.wc-file-status {
  font-size:12px;
  font-weight: 500;
  min-width: 16px;
  text-align: center;
}
.wc-file-delete {
  font-size:12px;
  opacity: 0.5;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.wc-file-delete:hover {
  opacity: 1;
  color: var(--danger, red);
  background: rgba(255, 0, 0, 0.08);
}
.wc-SingleValueStyleElement{
  border:1px solid var(--border);
  padding:6px;
  border-radius: 6px;
  color:var(--neo1);
}

.wc-SingleValueStyleElement.wc-inactive{
  opacity: 50%;
}

.wc-SingleValueStyleElement.wc-inactive:hover{
  opacity: 50%;
}

.wc-SingleValueStyleElement:hover{
  border:1px solid var(--border-hover)
}

/* Free-text property field (PARAMETER_INPUT family 14 — currently `content`).
   The hint under it shows the exact declaration being written, quotes included,
   since the quoting is done for the user and is otherwise invisible. */
.wc-text-param{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex:1;
}
.wc-text-param-input{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--text-hi,rgba(255,255,255,0.9));
  padding:5px 8px;
  font-size:14px;
  font-family:inherit;
  outline:none;
  transition:border-color .15s ease,background .15s ease;
}
.wc-text-param-input::placeholder{
  color:var(--text-dim,rgba(255,255,255,0.35));
}
.wc-text-param-input:hover{
  border-color:var(--border-hover,rgba(0,234,255,0.45));
}
.wc-text-param-input:focus{
  border-color:var(--accent,#00eaff);
  background:rgba(0,234,255,0.05);
}
.wc-text-param-hint{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px;
  line-height:1.4;
  color:var(--text-dim,rgba(255,255,255,0.35));
  word-break:break-all;
}
.wc-text-param.wc-inactive{
  opacity:50%;
}
/* .SingleValueStyleElement input{
  background-color: var(--bg);
} */
.wc-prop-row-2{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px}


#wb-layout_display_container{
  cursor: pointer;
}

/* ── Item tab: parent-context box ── */
.wc-layout-parent-box{
  display:flex;align-items:center;gap:9px;
  padding:9px 11px;margin-bottom:10px;cursor:pointer;
  background:linear-gradient(180deg,rgba(0,234,255,.05),rgba(0,234,255,.015));
  border:1px solid var(--border);border-radius:7px;
  transition:border-color .14s ease,background .14s ease,box-shadow .14s ease;
}
.wc-layout-parent-box:hover{
  border-color:var(--accent);
  background:linear-gradient(180deg,rgba(0,234,255,.1),rgba(0,234,255,.03));
  box-shadow:0 0 0 1px rgba(0,234,255,.12),0 3px 12px -6px rgba(0,234,255,.4);
}
.wc-layout-parent-box-ico{
  flex:0 0 auto;width:20px;height:20px;color:var(--accent);opacity:.9;
}
.wc-layout-parent-box-txt{
  display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
.wc-layout-parent-chip{
  align-self:flex-start;
  font-size:12px;line-height:1;letter-spacing:.01em;text-transform:capitalize;font-weight:700;
  color:var(--accent);
  padding:3px 8px;border-radius:999px;
  background:rgba(0,234,255,.1);border:1px solid rgba(0,234,255,.28);
}
.wc-layout-parent-box-cta{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;
  font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--accent);opacity:.85;white-space:nowrap;
}
.wc-layout-parent-box-cta svg{width:12px;height:12px;transition:transform .14s ease;}
.wc-layout-parent-box:hover .wc-layout-parent-box-cta{opacity:1;}
.wc-layout-parent-box:hover .wc-layout-parent-box-cta svg{transform:translateX(2px);}
.wc-layout-parent-box.wc-not-navigable{cursor:default;}
.wc-layout-parent-box.wc-not-navigable:hover{
  border-color:var(--border);box-shadow:none;
  background:linear-gradient(180deg,rgba(0,234,255,.05),rgba(0,234,255,.015));
}
.wc-layout-parent-box.wc-not-navigable .wc-layout-parent-box-cta{
  color:var(--muted);opacity:.7;font-style:italic;font-weight:500;text-transform:lowercase;
}

.wc-layout-item-empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  padding:22px 16px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(0,234,255,.04),rgba(0,234,255,0));
  border:1px dashed rgba(0,234,255,.2);border-radius:8px;
}
.wc-layout-item-empty-ico{width:30px;height:30px;color:var(--accent);opacity:.5;}
.wc-layout-item-empty-title{
  font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--text-hi);
}
.wc-layout-item-empty-sub{
  font-size:12px;line-height:1.65;color:var(--muted);max-width:210px;
}
.wc-layout-item-empty-sub b{color:var(--accent);font-weight:700;}

#wb-LayoutDisplayInfo {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

#wb-LayoutDisplayInfo.wc-open {
    opacity: 1;
    visibility: visible;
}
/*
#LayoutDisplayInfo {
    transition: max-height 0.3s ease, padding 0.3s ease;
    display: none;
}

#LayoutDisplayInfo.open{
  display: block;
} */

/* ── Accordion ── */
.wc-acc_ldf{border:1px solid var(--border);border-radius:5px;margin-bottom:6px;overflow:hidden;}
.wc-acc-head_ldf{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;cursor:pointer;background:var(--panel);user-select:none;transition:background .12s;}
.wc-acc-head_ldf:hover{background:var(--panel2);}
.wc-acc_ldf.wc-open_ldf .wc-acc-head_ldf{background:var(--panel2);border-bottom:1px solid var(--border);}
.wc-acc-title_ldf{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.06em;color:var(--text-hi);}
.wc-acc-dot_ldf{width:6px;height:6px;border-radius:50%;border:1px solid var(--border-h);flex-shrink:0;transition:all .2s;}
.wc-acc_ldf.wc-open_ldf .wc-acc-dot_ldf{background:var(--accent);box-shadow:0 0 7px var(--accent);border-color:var(--accent);}
.wc-acc-right_ldf{display:flex;align-items:center;gap:8px;}
.wc-acc-val_ldf{font-size:11.5px;color:var(--accent);opacity:.65;letter-spacing:.04em;}
.wc-acc-arr_ldf{font-size:12px;color:var(--text);transition:transform .2s;}
.wc-acc_ldf.wc-open_ldf .wc-acc-arr_ldf{transform:rotate(180deg);}
.wc-acc-body_ldf{display:none;padding:10px;background:var(--panel);}
.wc-acc_ldf.wc-open_ldf .wc-acc-body_ldf{display:block;}

/* ── Option grids ── */
.wc-og2_ldf{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
.wc-og3_ldf{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;}
.wc-opt_ldf{background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:6px 5px 5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;transition:border-color .12s,background .12s;}
.wc-opt_ldf:hover{border-color:var(--border-h);}
.wc-opt_ldf.wc-active_ldf{border-color:var(--accent);background:rgba(0,234,255,.05);}
.wc-opt_ldf span{font-size:11.5px;color:var(--text);text-align:center;line-height:1.3;}
.wc-opt_ldf.wc-active_ldf span{color:var(--accent);}

/* ── Mini canvas inside opt_ldf cards ── */
.wc-mc_ldf{width:100%;height:28px;display:flex;align-items:center;justify-content:center;gap:2px;overflow:hidden;border:1px solid white;}
.wc-mb_ldf{border-radius:2px;}
.wc-na_ldf{background:var(--neo1);box-shadow:0 0 4px var(--neo1);}
.wc-nb2_ldf{background:var(--neo2);box-shadow:0 0 4px var(--neo2);}
.wc-nc_ldf{background:var(--neo3);box-shadow:0 0 4px var(--neo3);}

/* ── Axis note ── */
.wc-axis-note_ldf{font-size:11.5px;color:var(--accent);opacity:.45;margin-bottom:7px;}

/* ── Shrink/basis compact cards ── */
.wc-slbl_ldf{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);opacity:.45;margin:8px 0 5px;display:block;}
.wc-sb2_ldf{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.wc-sbc_ldf{background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;transition:all .12s;}
.wc-sbc_ldf:hover{border-color:var(--border-h);}
.wc-sbc_ldf.wc-active_ldf{border-color:var(--accent);background:rgba(0,234,255,.05);}
.wc-sbc_ldf span{font-size:11.5px;color:var(--text);text-align:center;line-height:1.3;}
.wc-sbc_ldf.wc-active_ldf span{color:var(--accent);}
.wc-sbv_ldf{width:100%;height:12px;display:flex;gap:2px;}
.wc-sv_ldf{height:100%;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:11px;color:rgba(0,0,0,.75);font-weight:700;}

/* ── Advanced toggle ── */
.wc-adv-btn_ldf{display:flex;align-items:center;gap:6px;margin-top:10px;cursor:pointer;width:fit-content;}
.wc-adv-btn_ldf span{font-size:11.5px;color:var(--text);opacity:.45;letter-spacing:.05em;transition:opacity .12s;}
.wc-adv-btn_ldf:hover span{opacity:.8;}
.wc-adv-arr_ldf{font-size:11.5px;color:var(--text);opacity:.35;transition:transform .15s;}
.wc-adv-btn_ldf.wc-open_ldf .wc-adv-arr_ldf{transform:rotate(90deg);}
.wc-adv-body_ldf{display:none;margin-top:8px;}
.wc-adv-btn_ldf.wc-open_ldf+.wc-adv-body_ldf{display:block;}

/* ── Gate note ── */
.wc-gate_ldf{font-size:11.5px;color:var(--text);opacity:.38;padding:7px;background:rgba(0,234,255,.02);border:1px dashed rgba(0,234,255,.1);border-radius:4px;text-align:center;}

/* ── Live preview ── */
.wc-live_ldf{background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:8px;margin-top:8px;}
.wc-live-bar_ldf{display:flex;align-items:center;gap:6px;margin-bottom:7px;flex-wrap:wrap;}
.wc-live-lbl_ldf{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);opacity:.5;}
.wc-gap-lbl_ldf{font-size:11.5px;color:var(--text);opacity:.45;}
.wc-unit-tog_ldf{display:flex;border:1px solid var(--border);border-radius:3px;overflow:hidden;}
.wc-unit-btn_ldf{padding:2px 7px;font-size:11.5px;cursor:pointer;font-family:'Courier New',monospace;transition:all .12s;}
.wc-live-flex_ldf{width:100%;min-height:80px;display:flex;gap:4px;border:1px dashed rgba(0,234,255,.12);border-radius:3px;padding:5px;transition:all .3s;overflow:hidden;}

/* ── Gap controls — their own roomy row, not squeezed into the preview bar ── */
.wc-gap-row_ldf{display:flex;gap:10px;margin-bottom:8px;}
.wc-gap-field_ldf{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--panel);border:1px solid var(--border);border-radius:5px;padding:6px 10px;}
.wc-gap-field_ldf .wc-gap-lbl_ldf{font-size:14px;text-transform:uppercase;letter-spacing:.06em;opacity:.55;}

/* ── Ratio bar ── */
.wc-rbar_ldf{display:flex;gap:2px;height:6px;margin-top:6px;}
.wc-rb_ldf{height:100%;border-radius:2px;}

/* ── number-param steppers, sized down to fit the layout sidebar
   (wraps the app-standard PARAMETER_INPUT_createNumberParam pill, see stylePlayground.js) ── */
.wc-ldf-stepper .wc-number-param,.wc-ldf-ratio-stepper .wc-number-param{font-size:14px;}
.wc-ldf-stepper .wc-numberParamUpdate,.wc-ldf-ratio-stepper .wc-numberParamUpdate{width:14px;height:14px;font-size:14px;}
.wc-ldf-stepper .wc-number-param-val,.wc-ldf-ratio-stepper .wc-number-param-val{min-width:20px;line-height:14px;font-size:14px;}

/* ── gap steppers, bigger than the default sidebar-cramped size ── */
.wc-ldf-gap-stepper .wc-number-param{font-size:14px;}
.wc-ldf-gap-stepper .wc-numberParamUpdate{width:20px;height:20px;font-size:15px;}
.wc-ldf-gap-stepper .wc-number-param-val{min-width:30px;line-height:20px;font-size:14px;}

/* accLayoutordion */
.wc-accLayout{border:1px solid var(--border);border-radius:5px;margin-bottom:6px;overflow:hidden;}
.wc-accLayout-head{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;cursor:pointer;background:var(--panel);transition:background .12s;user-select:none;}
.wc-accLayout-head:hover{background:var(--panel2);}
.wc-accLayout.wc-open .wc-accLayout-head{background:var(--panel2);border-bottom:1px solid var(--border);}
.wc-accLayout-title{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.06em;color:var(--text-hi);}
.wc-accLayout-dot{width:6px;height:6px;border-radius:50%;border:1px solid var(--border-h);flex-shrink:0;transition:all .2s;}
.wc-accLayout.wc-open .wc-accLayout-dot{background:var(--accLayoutent);box-shadow:0 0 7px var(--accLayoutent);border-color:var(--accLayoutent);}
.wc-accLayout-right{display:flex;align-items:center;gap:8px;}
.wc-accLayout-value{font-size:11.5px;color:var(--accLayoutent);opacity:.65;letter-spacing:.04em;}
.wc-accLayout-arrow{font-size:12px;color:var(--text);transition:transform .2s;}
.wc-accLayout.wc-open .wc-accLayout-arrow{transform:rotate(180deg);}
.wc-accLayout-body{display:none;padding:10px;background:var(--panel);}
.wc-accLayout.wc-open .wc-accLayout-body{display:block;}

/* Visual option cards */
.wc-og{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
.wc-og3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;}
.wc-opt{background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:6px 5px 5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;transition:all .12s;}
.wc-opt:hover{border-color:var(--border-h);}
.wc-opt.wc-active{border-color:var(--accLayoutent);background:rgba(0,234,255,.05);}
.wc-opt span{font-size:11.5px;color:var(--text);text-align:center;line-height:1.3;}
.wc-opt.wc-active span{color:var(--accLayoutent);}

/* mini canvas */
.wc-mc{width:100%;height:28px;display:flex;align-items:center;justify-content:center;gap:2px;border-radius:2px;}
.wc-mc.wc-col{flex-direction:column;}
.wc-mb{border-radius:2px;}
.wc-na{background:var(--neo1);box-shadow:0 0 4px var(--neo1);}
.wc-nb2{background:var(--neo2);box-shadow:0 0 4px var(--neo2);}
.wc-nc{background:var(--neo3);box-shadow:0 0 4px var(--neo3);}

/* ratio */
.wc-ratio-row{display:flex;gap:4px;align-items:center;margin-bottom:6px;}
.wc-ratio-row input{width:36px;background:var(--bg);border:1px solid var(--border);border-radius:3px;color:var(--text-hi);font-family:'Courier New',monospace;font-size:12px;padding:3px 4px;text-align:center;outline:none;transition:border-color .12s;}
.wc-ratio-row input:focus{border-color:var(--accLayoutent);}
.wc-sep{color:var(--accLayoutent);opacity:.4;font-size:12px;}
.wc-cbar{display:flex;gap:2px;height:6px;}
.wc-rvb{height:100%;border-radius:2px;}

/* advanced toggle */
.wc-adv-toggle{display:flex;align-items:center;gap:6px;margin-top:10px;cursor:pointer;width:fit-content;}
.wc-adv-toggle span{font-size:11.5px;color:var(--text);opacity:.5;letter-spacing:.05em;}
.wc-adv-toggle:hover span{opacity:.8;}
.wc-adv-arrow{font-size:11.5px;color:var(--text);opacity:.4;transition:transform .15s;}
.wc-adv-open .wc-adv-arrow{transform:rotate(90deg);}
.wc-adv-body{display:none;margin-top:8px;}
.wc-adv-open .wc-adv-body{display:block;}

/* shrink/basis compact */
.wc-slbl{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);opacity:.45;margin:8px 0 5px;display:block;}
.wc-sb-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.wc-sbc{background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;transition:all .12s;}
.wc-sbc:hover{border-color:var(--border-h);}
.wc-sbc.wc-active{border-color:var(--accLayoutent);background:rgba(0,234,255,.05);}
.wc-sbc span{font-size:11.5px;color:var(--text);text-align:center;line-height:1.3;}
.wc-sbc.wc-active span{color:var(--accLayoutent);}
.wc-sbv{width:100%;height:12px;display:flex;gap:2px;}
.wc-sv{height:100%;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:11px;color:rgba(0,0,0,.75);font-weight:700;}

/* gate note */
.wc-gate{font-size:11.5px;color:var(--text);opacity:.4;padding:7px;background:rgba(0,234,255,.02);border:1px dashed rgba(0,234,255,.1);border-radius:4px;text-align:center;}

/* live preview */
.wc-live{background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:8px;margin-top:8px;}
.wc-live-lbl{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accLayoutent);opacity:.5;margin-bottom:6px;}
.wc-live-flex{width:100%;min-height:80px;display:flex;gap:4px;border:1px dashed rgba(0,234,255,.12);border-radius:3px;padding:5px;transition:all .3s;}
.wc-lb{border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:rgba(0,0,0,.72);transition:all .3s;min-width:0;min-height:0;}
.wc-css-out{margin-top:7px;font-size:11.5px;line-height:1.9;color:var(--text);}
.wc-css-out .wc-p{color:var(--neo2);}
.wc-css-out .wc-v{color:var(--accLayoutent);}

/* axis label */
.wc-axis-note{font-size:11.5px;color:var(--accLayoutent);opacity:.5;margin-bottom:7px;display:flex;align-items:center;gap:4px;}
 .wc-layout_wrap { position: relative; display: inline-block; z-index:5;}

  .wc-layout_trigger {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 6px 10px; border-radius: 6px;
    background: #141414; border: 1px solid #00eaff26;
    transition: all 0.2s ease;
  }
  .wc-layout_trigger:hover {
    border-color: #00eaff4d;
    background: #1a1a1a;
  }
  .wc-layout_wrap.wc-open .wc-layout_trigger {
    border-color: #00eaff;
    box-shadow: 0 0 8px rgba(0, 234, 255, 0.15);
  }

  .wc-layout_flag { display: flex; align-items: center; width: 28px; height: 28px; }
  .wc-layout_flag .wc-small { display: flex; align-items: center; }
  .wc-layout_flag .wc-small svg { width: 28px; height: 28px; }
  .wc-layout_flag .wc-big { display: none; }

  .wc-layout_label { font-size:12px; font-family: monospace; color: rgba(255,255,255,0.7); font-weight: 500; }

  .wc-layout_arrow { display: flex; align-items: center; color: rgba(255,255,255,0.4); }
  .wc-layout_arrow svg { display: block; transition: transform 0.2s; }
  .wc-layout_wrap.wc-open .wc-layout_arrow svg { transform: rotate(180deg); }

  .wc-layout_panel {
    display: none; position: absolute; top: calc(100% + 6px); right: 0;
    left: auto;
    background: #0f0f0f; border: 1px solid #00eaff33; border-radius: 8px;
    min-width: 50px; z-index: 99; overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 234, 255, 0.08);
  }
  .wc-layout_wrap.wc-open .wc-layout_panel { display: block; animation: slideDown 0.2s ease; }

  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .wc-layout_search {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px; border-bottom: 1px solid #00eaff1a;
  }
  .wc-layout_search_in {
    background: none; border: none; outline: none;
    color: rgba(255,255,255,0.7); font-size:12px; font-family: monospace; width: 100%;
  }
  .wc-layout_search_in::placeholder { color: rgba(255,255,255,0.2); }

  .wc-layout_list { padding: 6px; display: flex; flex-direction: column; gap: 3px; }

  .wc-layout_item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 8px; border-radius: 6px; cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
  }
  .wc-layout_item:hover {
    background: rgba(0,234,255,0.1);
    border-color: rgba(0,234,255,0.2);
    transform: translateX(2px);
  }
  .wc-layout_item.wc-selected {
    background: rgba(0,234,255,0.15);
    border-color: rgba(0,234,255,0.3);
  }

  .wc-layout_item_flag { display: flex; align-items: center; flex-shrink: 0; position: relative; }
  .wc-layout_item_flag .wc-small { display: flex; align-items: center; }
  .wc-layout_item_flag .wc-small svg { width: 28px; height: 28px; flex-shrink: 0; transition: all 0.3s ease; }

  .wc-layout_item_flag .wc-big {
    width: 0;
    overflow: hidden;
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    margin-left: 4px;
  }

  .wc-layout_item:hover .wc-layout_item_flag .wc-big {
    width: 65px;
  }

  .wc-layout_item_flag .wc-big svg {
    width: 65px;
    height: 36px;
    display: block;
    flex-shrink: 0;
  }

  .wc-layout_item:hover .wc-layout_item_flag .wc-small svg { opacity: 0.3; transform: scale(0.9); }

  .wc-layout_item_name { font-size: 14px; font-family: monospace; color: rgba(255,255,255,0.65); text-transform: capitalize; letter-spacing: 0.3px; }
  .wc-layout_item:hover .wc-layout_item_name { color: rgba(0,234,255,0.9); }
  .wc-layout_item.wc-selected .wc-layout_item_name { color: rgba(0,234,255,1); font-weight: 600; }

  .wc-layout_empty { padding: 12px; font-size: 14px; font-family: monospace; color: rgba(255,255,255,0.25); text-align: center; }

#wb-ltab-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 5px 6px 7px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
}
.wc-layoutBtn {
  height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  color: rgba(255,255,255,0.38);
  font-size:12px;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: .06em;
  text-transform: uppercase;
  user-select: none;
  transition: border-color .12s, color .12s, background .12s;
}
.wc-layoutBtn:hover {
  border-color: rgba(0,234,255,0.3);
  color: rgba(0,234,255,0.7);
  background: rgba(0,234,255,0.04);
}
.wc-layoutBtn.wc-active {
  background: rgba(0,234,255,0.1);
  border-color: rgba(0,234,255,0.4);
  color: #00eaff;
}


#wb-layoutToolContainer{
  color: #00eaff;
}

#wb-layoutToolItem{
  color: #00eaff;
  display:none;
}

#wb-layout-sel-lbl{
  font-size:12px;
  color:var(--accent);
  opacity:.55;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:Courier New,monospace;
  padding:2px 0 4px;
}







.wc-propertyElementROW{
  color:white;
}


/* Property-tile icons. They were 42px, which made every tile taller than the
   word it was labelling and pushed the picker to ~3 columns of billboard-sized
   cards; 26px still reads at a glance but lets four tiles fit a default panel. */
.wc-icon-wrap svg {
  width: 26px;
  height: 26px;
}


@media (max-width: 320px) {
  .wc-badge { display: none; }
  .wc-row { gap: 4px; padding: 6px 4px; }
}


/* body{font-family:system-ui,-apple-system,sans-serif;background:#0d0d0d;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:2rem 1rem} */
.wc-w{width:100%}
/* JSON data stores — never visible, whatever happens to their inline style */
#wb-elementStyleInfo,#wb-animationStyleInfo,#wb-responsiveStyleInfo,#wb-stylePropListArrayPlace{display:none !important}
.wc-stag{display:none;align-items:center;gap:8px;padding:6px 11px;border-radius:8px;border:1px solid;margin-bottom:.55rem;font-size:13px}
.wc-stag.wc-on{display:flex}
.wc-tdot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.wc-tlbl{flex:1;min-width:0}
.wc-tclear{background:none;border:none;cursor:pointer;color:rgba(255,255,255,.28);font-size:15px;padding:0 2px;transition:color .15s;font-family:inherit}
.wc-tclear:hover{color:#fff}
.wc-sbox{position:relative;margin-bottom:.55rem}
.wc-sbox input{width:100%;background:#141414;border:1px solid rgba(0,234,255,.15);border-radius:10px;padding:10px 36px 10px 13px;color:#fff;font-size:14px;outline:none;transition:border .2s;font-family:inherit}
.wc-sbox input::placeholder{color:rgba(255,255,255,.28)}
.wc-sbox input:focus{border-color:rgba(0,234,255,.5)}
.wc-sico{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.28);font-size:15px;pointer-events:none}
/* The picker opens/closes with the search box (focus in / focus out), so the
   swap can't be a bare display:none flip. `display` is transitioned with
   allow-discrete — it stays `grid` for the duration of the fade-out and flips
   to `none` only at the end — while @starting-style gives the opening frame
   something to animate FROM (an element going display:none -> grid has no
   previous style to interpolate against otherwise). Collapsing via display
   (not visibility) matters here: the panel sits mid-column, so a hidden-but-
   laid-out grid would leave a tall dead gap in the sidebar. */
.wc-dd{background:transparent;border:none;overflow:visible;display:none;max-height:none;overflow-y:visible;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px;padding:0;width:100%;margin-left:auto;
  opacity:0;transform:translateY(-6px) scale(.985);transform-origin:top center;
  transition:opacity .16s ease,transform .16s cubic-bezier(.4,0,.2,1),display .16s allow-discrete}
.wc-dd.wc-open{display:grid;opacity:1;transform:none}
@starting-style{.wc-dd.wc-open{opacity:0;transform:translateY(-6px) scale(.985)}}
@media (prefers-reduced-motion:reduce){.wc-dd{transition:none;transform:none}}
.wc-dd::-webkit-scrollbar{width:0px}
.wc-dd::-webkit-scrollbar-track{background:transparent}
.wc-dd::-webkit-scrollbar-thumb{background:transparent;border-radius:0px}
.wc-slbl{display:none}

.wc-row{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 6px 8px;cursor:pointer;transition:background .15s,border-color .15s,transform .12s ease,color .15s,box-shadow .15s;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:rgba(255,255,255,.025);width:100%;box-sizing:border-box;min-height:66px}
.wc-row.wc-city{padding:10px 6px 8px}


.wc-row:hover{background:rgba(0,234,255,.08);border-color:#00eaff;box-shadow:0 0 0 1px rgba(0,234,255,.3),0 4px 12px -5px rgba(0,234,255,.45);transform:translateY(-1px);z-index:1}
.wc-rico{font-size:14px;line-height:1;text-align:center;width:100%;min-height:26px;display:flex;align-items:center;justify-content:center;opacity:.8;transition:opacity .15s}
.wc-row:hover .wc-rico{opacity:1}
.wc-rname{font-size:13.5px;line-height:1.25;letter-spacing:.005em;color:rgba(255,255,255,.62);transition:color .15s;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:normal;text-align:center;width:100%;word-break:break-word}
.wc-row:hover .wc-rname{color:#fff}
.wc-rinfo{position:absolute;top:3px;right:3px;width:14px;height:14px;border:none;background:none;padding:0;display:flex;align-items:center;justify-content:center;border-radius:4px;color:#00eaff;opacity:0;transform:scale(.7);pointer-events:none;transition:opacity .15s,transform .15s,background .15s;cursor:pointer}
.wc-row:hover .wc-rinfo{opacity:.85;transform:scale(1);pointer-events:auto}
.wc-rinfo:hover{opacity:1 !important;background:#00eaff26}
.wc-row.wc-applied{background:rgba(0,234,255,.16);border-color:rgba(0,234,255,.55)}
.wc-row.wc-applied .wc-rico{opacity:1}
.wc-row.wc-applied .wc-rname{color:#00eaff;font-weight:600}
.wc-row.wc-applied:hover{box-shadow:0 0 0 1px rgba(0,234,255,.3),0 4px 12px -5px rgba(0,234,255,.45)}
.wc-row.wc-applied:hover .wc-rname{color:#fff}
.wc-rright{display:none}
.wc-badge{display:none}
/* per-category icon color overrides — set on the row so all SVG children inherit */
.wc-row[data-cat="text"]{--tab-active:#818cf8}
.wc-row[data-cat="border"],.wc-row[data-cat="borderRadius"]{--tab-active:#60a5fa}
.wc-row[data-cat="boxShadow"]{--tab-active:#c084fc}
.wc-row[data-cat="opacity"]{--tab-active:#94a3b8}
.wc-row[data-cat="filter"]{--dimension:#fb923c}
.wc-row[data-cat="position"]{--dimension:#38bdf8}
.wc-row[data-cat="overflow"]{--dimension:#2dd4bf}
.wc-row[data-cat="background"],.wc-row[data-cat="backgroundColor"]{--dimension:#f472b6}
.wc-row[data-cat="cursor"]{--dimension:#94a3b8}

.wc-chk{width:14px;height:14px;border-radius:3px;flex-shrink:0;border:1.5px solid rgba(255,255,255,.18);background:transparent;transition:all .15s;pointer-events:none;position:relative}
.wc-chk.wc-on{border-color:var(--c);background:var(--c)}
.wc-chk.wc-on::after{content:'';position:absolute;left:3px;top:.5px;width:4px;height:7px;border-right:1.5px solid #000;border-bottom:1.5px solid #000;transform:rotate(45deg)}
.wc-empty{padding:22px 14px;text-align:center;color:rgba(255,255,255,.28);font-size:13px;grid-column:1/-1}
.wc-empty em{display:block;font-size:19px;margin-bottom:6px;opacity:.4;font-style:normal}

/* Sits on top of ALL existing styles via !important */
.wc-edit-mode-el {
  outline: 1.5px dashed #00eaff55 !important;
  margin-block: 2px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}
.wc-edit-mode-el:hover {
  outline: 1.5px solid #00eaffaa !important;
}
.wc-edit-mode-el.wc-selected {
  outline: 2px solid #00eaff !important;
}




*{box-sizing:border-box;
    margin:0;
    /* padding:0 */
}
#wb-root{


  --accent: #00eaff; --accent-dim: rgba(0,234,255,.08); --accent-ring: rgba(0,234,255,.18);
    --green: #00c98a; --green-dim: rgba(0,201,138,.10); --green-ring: rgba(0,201,138,.18);
    --amber: #f5a623; --amber-dim: rgba(245,166,35,.10);
    --red: #e05555; --red-dim: rgba(224,85,85,.10);
   

--accent:#00eaff;--a08:rgba(0,234,255,0.08);--a12:rgba(0,234,255,0.12);--a22:rgba(0,234,255,0.22);--a25:rgba(0,234,255,0.25);
--green:#00ff88;--g08:rgba(0,255,136,0.06);--g18:rgba(0,255,136,0.18);
--red:#ff4466;--r10:rgba(255,68,102,0.10);--r25:rgba(255,68,102,0.25);
--yellow:#ffd426;--y10:rgba(255,212,38,0.10);--y28:rgba(255,212,38,0.28);
--bg:#0d0d0d;--panel:#111;--border:rgba(0,234,255,0.15);--border-h:rgba(0,234,255,0.45);
--text:rgba(255,255,255,0.38);--text-hi:rgba(255,255,255,0.88);



  /* font-family:'JetBrains Mono',monospace; */

--a08:rgba(0,234,255,0.08);--a12:rgba(0,234,255,0.12);--a22:rgba(0,234,255,0.22);--a25:rgba(0,234,255,0.25);--a66:rgba(0,234,255,0.66);
  --pink:#ff4dff;--p12:rgba(255,77,255,0.1);--p25:rgba(255,77,255,0.25);
  --purple:#b066ff;--pu12:rgba(176,102,255,0.12);--pu25:rgba(176,102,255,0.28);
  --green:#00ff88;--g08:rgba(0,255,136,0.08);--g22:rgba(0,255,136,0.22);
  --red:#ff4466;--yellow:#ffd426;--text:rgba(255,255,255,0.38);--text-hi:rgba(255,255,255,0.88);


  --bg-base:#0d0d0d;--bg-panel:#141414;--border:#00eaff26;
  --border-hover:#00eaff80;--text:rgba(255,255,255,0.7);--text-tab:rgba(255,255,255,0.35);
  --text-active:#fff;--tab-active:#00eaff;--tabs-border:rgba(255,255,255,0.07);
  --item-hover-bg:rgba(0,234,255,0.05);--toggle-bg:#141414;
  --toggle-border:rgba(0,234,255,0.3);--toggle-border-h:rgba(0,234,255,0.6);
  display:flex;flex-direction:row;align-items:stretch;
  height:100vh;
  background:var(--bg-base);border-radius:12px;
  overflow:hidden;font-family:var(--font-sans,sans-serif);position:relative;user-select:none;
  transition:background .25s;
  
  --neo1:#00eaff;--neo2:#bf00ff;--neo3:#ff2d78;--neo4:#E0E722;
  
  --bg:#0d0d0d;--bar:#111;--panel:#181818;
  --accent:#00eaff;--text:rgba(255,255,255,0.45);--text-hi:rgba(255,255,255,0.9);
  --tab-bg:#1c1c1e;--tab-hover:#222226;--tab-act:#181818;
  --border:rgba(0,234,255,0.18);--border-act:#00eaff;
  --del:#ff453a;--add:#1c1c1e;
  --modal-bg:#1a1a1c;--modal-border:rgba(0,234,255,0.22);
  --outline: #a78bfa;
  --margin:  #f59e0b;
  --padding: #34d399;
  --dimension:#22c55e;
  /* shared with Animation Panel — were previously undefined, causing square corners / off colors */
  --text-dim:rgba(255,255,255,0.35);--text-3:rgba(255,255,255,0.35);--text-2:rgba(255,255,255,0.65);
  --panel2:#161616;--border-2:rgba(255,255,255,0.08);--border-hover:rgba(0,234,255,0.45);
  --radius-sm:6px;--font:inherit;--danger:#ff5c5c;
  --muted:rgba(255,255,255,0.38);
  /* Glass surface for panels that can physically overlap another panel
     (left/right sidebars vs. the fixed bottom dock). A flat opaque
     background on the winning panel makes the one underneath look like it
     isn't there at all; a translucent + blurred surface lets its colors
     bleed through faintly so the overlap reads as "something is layered
     here" instead of a dead seam. */
  --glass-bg:rgba(13,13,15,0.88);--glass-blur:blur(16px) saturate(1.4);
}
#wb-root.wc-light{
  --bg-base:#f0f2f5;--bg-panel:#ffffff;--bg:#f5f6f8;--panel:#ffffff;--bar:#e8eaed;
  --border:rgba(0,100,180,0.2);--border-h:rgba(0,100,180,0.5);
  --border-hover:rgba(0,100,180,0.55);--text:rgba(0,0,0,0.6);--text-tab:rgba(0,0,0,0.4);
  --text-hi:rgba(0,0,0,0.88);--text-active:rgba(0,0,0,0.9);--text-dim:rgba(0,0,0,0.4);--text-2:rgba(0,0,0,0.65);--text-3:rgba(0,0,0,0.4);--muted:rgba(0,0,0,0.38);
  --accent:#0078c8;--a08:rgba(0,120,200,0.08);--a12:rgba(0,120,200,0.12);--a22:rgba(0,120,200,0.22);--a25:rgba(0,120,200,0.25);--a66:rgba(0,120,200,0.66);
  --tab-active:#0078c8;--toggle-bg:#ffffff;--tab-bg:#eaecef;--tab-hover:#dde0e4;--tab-act:#fff;
  --toggle-border:rgba(0,120,200,0.3);--toggle-border-h:rgba(0,120,200,0.6);
  --item-hover-bg:rgba(0,120,200,0.06);--tabs-border:rgba(0,0,0,0.08);
  --modal-bg:#fff;--modal-border:rgba(0,100,180,0.2);
  --border-2:rgba(0,0,0,0.08);--border-act:#0078c8;
  --panel2:#f0f2f5;--bg-panel:#ffffff;
  --outline:#7c3aed;--margin:#d97706;--padding:#059669;--dimension:#16a34a;
  --del:#e02e2e;--danger:#e02e2e;--add:#f0f2f5;
  background:#f0f2f5;
  --glass-bg:rgba(255,255,255,0.86);--glass-blur:blur(16px) saturate(1.4);
}
#wb-root.wc-light .wc-toolbar{background:linear-gradient(180deg,#e8eaed 0%,#dfe1e5 100%);border-bottom-color:rgba(0,0,0,0.12);box-shadow:0 1px 0 rgba(255,255,255,0.6) inset,0 2px 8px rgba(0,0,0,0.1)}
#wb-root.wc-light .wc-toolbar::before{background:linear-gradient(90deg,transparent,#0078c8 50%,transparent)}
#wb-root.wc-light .wc-panel{background:var(--bg-panel)}
#wb-root.wc-light .wc-icon-bar{background:#e0e2e6;border-right-color:rgba(0,0,0,0.1)}
#wb-root.wc-light .wc-icon-tab{color:rgba(0,0,0,0.5)}
#wb-root.wc-light .wc-icon-tab:hover,#wb-root.wc-light .wc-icon-tab.wc-active{color:#0078c8;background:rgba(0,120,200,0.1)}
#wb-root.wc-light .wc-avatar{background:linear-gradient(135deg,#0078c8,#005fa0);border-color:rgba(0,120,200,0.4);color:#fff}

#wb-styleTool{
    display: flex;
    flex-direction: column;
}

#wb-styleTool i{
    font-size:14px;
    color:white;
}

#wb-styleTool i:hover{
    font-size: 16px;
    color:var(--accent);
}


#wb-styleAdd{width:100%;border:1px solid var(--border);padding:8px 10px;margin:6px 0;border-radius:6px;font-size:12px;color:var(--text);cursor:default;background-color:black;transition:border-color .15s,background .15s,color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#wb-styleAdd:hover{border-color:var(--border-hover);background:var(--item-hover-bg);color:var(--text-active)}

#wb-styleSearchBar{width:100%;border:1px solid var(--border);padding:8px 10px;margin:6px 0;border-radius:6px;font-size:12px;color:var(--text);cursor:default;background-color:black;transition:border-color .15s,background .15s,color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#wb-styleSearchBar:hover{border-color:var(--border-hover);background:var(--item-hover-bg);color:var(--text-active)}

/* ── shared panel-wrap ──
   Explicit z-index (rather than relying on the implicit stacking context
   that .wc-panel's will-change:opacity already creates on #wb-left-panel/
   #wb-right-panel) guarantees these sit UNDER the fixed #wb-bottom-wrap
   (z-index:100 below) in every engine — an implicit will-change context at
   z-index:auto should already lose to an explicit positive z-index, but left
   this ambiguous and the dock was intermittently painting BEHIND the left
   sidebar's empty lower half instead of covering it, making an already-open
   bottom dock look closed. */
.wc-panel-wrap{position:relative;display:flex;flex-shrink:0;height:100%;z-index:1;}
/* bottom-wrap is fixed so height:100% from .panel-wrap would be 100vh; JS sets explicit px height */
#wb-bottom-wrap{height:auto;z-index:100;}

/* ── panel base ── */
.wc-panel{
  border:none;
  background:var(--bg-panel);
  display:flex;flex-direction:column;
  overflow:hidden;min-width:0;height:100%;
  position:relative;
  transition:width .35s cubic-bezier(.4,0,.2,1),
             opacity .35s cubic-bezier(.4,0,.2,1),
             background .25s,border-color .25s;
  will-change:width,opacity;
}
.wc-panel.wc-collapsed{width:0!important;opacity:0;border:0px solid blue }

.wc-panelBottom{
  border:none;
  background:var(--bg-panel);display:flex;flex-direction:column;
  overflow:hidden;min-height:0;
  transition:height .35s cubic-bezier(.4,0,.2,1),
             opacity .35s cubic-bezier(.4,0,.2,1),
             background .25s,border-color .25s;
  will-change:height,opacity
}
.wc-panelBottom.wc-collapsed{height:0!important;opacity:0;
  border:0px solid blue;}

#wb-left-panel{width:220px}
#wb-left-panel.wc-collapsed{border:none}
#wb-right-panel.wc-collapsed{border:none}
#wb-bottom-panel{border-left:1px solid var(--border);
  width: 100%;z-index: 10;color:var(--accent);}
#wb-bottom-panel.wc-collapsed{border-color:transparent}

/* bottom wrap: horizontal strip */
/* #bottom-wrap {
  position: relative;
  width: 100%;
  height: 205px;
} */
#wb-bottom-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  /* Elevation cue: the dock sits on TOP of the left/right sidebars' lower
     half (it's full-width, they're full-height) — an upward shadow makes
     that overlap read as intentional "floating above" instead of looking
     like a seam where the sidebar just stops for no reason. */
  box-shadow: 0 -10px 24px -6px rgba(0,0,0,0.55);
  /* Own compositing layer so the dock repaints independently of the
     canvas beneath it. Without this, fast continuous height changes
     during the drag-resize (see #wb-bottom-resize pointermove) can
     desync paint vs. composite for a frame, flashing the white canvas
     background through the dock before it catches up. */
  transform: translateZ(0);
  backface-visibility: hidden;
}


/* resize handle on top edge — 10px tall for easy grabbing */
#wb-bottom-resize {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  cursor: ns-resize;
  touch-action: none;
  z-index: 100;   /* must beat #bottom-panel (will-change creates stacking ctx at z-index:10) */
  transition: background .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Enlarges the touch/mouse hit area to ~17px without widening the visible 5px
   line — a pseudo-element positioned outside its host's box still dispatches
   pointer events to the host, so this doesn't need any JS changes. */
#wb-bottom-resize::before{content:'';position:absolute;left:0;right:0;top:-6px;bottom:-6px;}
#wb-bottom-resize::after {
  content: '';
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.12);
  transition: background .15s;
  pointer-events: none;
}
#wb-bottom-resize:hover{background-color:#818181;}
/* #bottom-resize:hover::after,#bottom-resize.active::after{background:rgba(0,234,255,0.55)}
#bottom-resize:hover,#bottom-resize.active{background:rgba(0,234,255,0.08)} */



/* #left-toggle{right:-18px;border-left:none;border-radius:0 6px 6px 0} */
#wb-bottom-toggle {
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}



/* toggle button sits on the top edge, draggable left/right */
/* #bottom-toggle {
  position: absolute;
  top: -16px;       
  left: 0;           
  width: 28px;
  height: 16px;
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
 
  border-radius: 4px 4px 0 0;
}


#bottom-toggle svg {
  width: 100px;
  height: 100px;
  transform: rotate(180deg); 
} 






/* ── tabs (kept for page/bottom panels) ── */
.wc-tabs{display:flex;border-bottom:1px solid var(--tabs-border);flex-shrink:0}
.wc-tab{flex:1;padding:10px 4px;text-align:center;cursor:pointer;font-size:12px;color:var(--text-tab);white-space:nowrap;overflow:hidden;transition:color .15s}
.wc-tab:hover{color:var(--text-active)}
.wc-tab.wc-active{color:var(--tab-active);box-shadow:inset 0 -2px 0 var(--tab-active)}

.wc-panel-content{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;}
.wc-section{display:none}
.wc-section.wc-active{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:8px;overscroll-behavior:contain;}
#wb-right-panel{flex:1;min-width:0;}
#wb-right-panel .wc-section.wc-active{overflow-y:auto;}
/* ── right-panel content responsiveness ──
   The active section clips horizontal overflow (overflow-x:hidden above), so a
   widget wider than the panel is silently CUT OFF rather than scrolled. At
   narrow panel widths that's exactly what was happening — swatch rows, the hex
   field, layer cards and the "+ Add layer" button ran past the right edge.
   A flex/grid item defaults to min-width:auto (won't shrink below its content),
   which is what forces the overflow; letting the whole subtree shrink to 0 lets
   those rows compress and wrap to fit instead. Inputs/selects/media/canvas are
   capped at the panel width so a long value or thumbnail can't push past it,
   and long unbroken tokens (hex codes, URLs) wrap instead of forcing width. */
#wb-right-panel .wc-section.wc-active *{min-width:0}
#wb-right-panel .wc-section.wc-active input,
#wb-right-panel .wc-section.wc-active select,
#wb-right-panel .wc-section.wc-active textarea,
#wb-right-panel .wc-section.wc-active img,
#wb-right-panel .wc-section.wc-active canvas{max-width:100%}
#wb-right-panel .wc-section.wc-active input,
#wb-right-panel .wc-section.wc-active select,
#wb-right-panel .wc-section.wc-active textarea{box-sizing:border-box}
#wb-right-panel .wc-section.wc-active{overflow-wrap:anywhere}
/* .item{border:1px solid var(--border);padding:8px 10px;margin:6px 0;border-radius:6px;font-size:14px;color:var(--text);cursor:default;transition:border-color .15s,background .15s,color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item:hover{border-color:var(--border-hover);background:var(--item-hover-bg);color:var(--text-active)} */
.wc-item { border:1px solid var(--border); padding:8px 10px; margin:6px 0; border-radius:6px; font-size:12px; color:var(--text); cursor:default; transition:border-color .15s,background .15s,color .15s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

#wb-item-container { --c: #00eaff; --c12: rgba(0,234,255,0.12); }
/* #item-container { --c: #ff8c00; --c12: rgba(255,140,0,0.12); } */
/* #item-container { --c: #c8ff00; --c12: rgba(200,255,0,0.12); } */
#wb-item-text      { --c: #bf00ff; --c12: rgba(191,0,255,0.12); }
#wb-item-input     { --c: #ff2d78; --c12: rgba(255,45,120,0.12); }
#wb-item-button    { --c: #00ff88; --c12: rgba(0,255,136,0.12); }
#wb-item-image     { --c: #f59e0b; --c12: rgba(245,158,11,0.12); }
#wb-item-link      { --c: #a78bfa; --c12: rgba(167,139,250,0.12); }

[id^="item-"] { border-color: var(--c12); color: var(--c); }
[id^="item-"]:hover { border-color: var(--c); background: var(--c12); color: var(--c); }


.wc-prop-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px}
.wc-prop-row:last-child{border-bottom:none}
.wc-prop-key{color:var(--text-tab)}
.wc-prop-val{color:var(--tab-active);font-family:var(--font-mono,monospace);font-size:12px}

/* ── resize handles ── */
/* Rest state is transparent so the handle stops reading as a stray full-height
   cyan bar floating beside the panel (it used to carry an always-on
   rgba(0,180,255,0.2) fill). Discoverability now comes from the small centred
   grip (::after) — same affordance the bottom resize uses — and the cyan glow
   only appears on hover/drag. */
.wc-resize-handle{background-color:transparent;width:5px;height:100%;flex-shrink:0;position:relative;z-index:5;transition:background .2s,box-shadow .2s;touch-action:none}
#wb-left-resize{cursor:ew-resize}
#wb-right-resize{cursor:ew-resize}
.wc-resize-handle:hover,.wc-resize-handle.wc-active{background:linear-gradient(90deg,rgba(0,200,255,0.8),rgba(0,180,255,0.6));box-shadow:0 0 12px rgba(0,200,255,0.5),inset 0 0 4px rgba(255,255,255,0.2);}
/* Enlarges the touch/mouse hit area to ~17px without widening the visible 5px
   line — a pseudo-element positioned outside its host's box still dispatches
   pointer events to the host, so this doesn't need any JS changes. */
.wc-resize-handle::before{content:'';position:absolute;top:0;bottom:0;left:-6px;right:-6px;}
/* Neutral vertical grip, centred — the only thing visible at rest. Turns cyan
   with the handle on hover/drag. pointer-events:none so it never steals the
   drag from the host. */
.wc-resize-handle::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:3px;height:34px;border-radius:2px;background:rgba(255,255,255,0.14);transition:background .2s;pointer-events:none}
.wc-resize-handle:hover::after,.wc-resize-handle.wc-active::after{background:rgba(255,255,255,0.4)}
/* A collapsed wrap is 0px wide but has overflow:visible, so its 5px handle used
   to poke out as a detached cyan sliver at the shell edge. Hide it while
   collapsed — the toggle tab / icon bar are the re-open affordances. */
.wc-panel-wrap.wc-collapsed .wc-resize-handle{display:none}

/* ── toggle buttons ── */
.wc-toggle-btn{
  position:absolute;width:18px;height:52px;
  background:var(--toggle-bg);border:1px solid var(--toggle-border);
  display:flex;align-items:center;justify-content:center;
  cursor:grab;z-index:30;transition:background .15s,border-color .15s
}
.wc-toggle-btn:hover{border-color:var(--toggle-border-h)}
.wc-toggle-btn.wc-dragging-btn{cursor:grabbing}
.wc-toggle-btn svg{width:10px;height:10px;stroke:var(--tab-active);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}


.wc-toggle-btn-bottom {
  position: absolute;
  width: 64px;
  height: 20px;
  background: var(--toggle-bg);
  border: 1px solid var(--toggle-border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
  transition: background .15s, border-color .15s;
}

.wc-toggle-btn-bottom:hover { border-color: var(--toggle-border-h); background: rgba(0,234,255,0.06); }

.wc-toggle-btn-bottom svg {
  width: 10px;
  height: 10px;
  stroke: var(--tab-active);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* ── side panel toggle buttons (left / right) ── */
.wc-toggle-btn-side {
  position: absolute;
  width: 18px;
  height: 48px;
  background: var(--toggle-bg);
  border: 1px solid var(--toggle-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
  top: 50%;
  transform: translateY(-50%);
  transition: background .15s, border-color .15s;
}
.wc-toggle-btn-side:hover { border-color: var(--toggle-border-h); background: rgba(0,234,255,0.06); }
.wc-toggle-btn-side svg {
  width: 10px; height: 10px;
  stroke: var(--tab-active); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
#wb-left-toggle  { right: -18px; border-left: none; border-radius: 0 6px 6px 0; }
#wb-right-toggle { left: -18px;  border-right: none; border-radius: 6px 0 0 6px; }

/* .toggle-btn-bottom{
  position:absolute;

  width:52px;
  height:18px;

  background:var(--toggle-bg);
  border:1px solid var(--toggle-border);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:ns-resize;

  z-index:30;

  transition:
    background .15s,
    border-color .15s;
}

.toggle-btn-bottom:hover{
  border-color:var(--toggle-border-h);
}

.toggle-btn-bottom.dragging-btn{
  cursor:grabbing;
}

.toggle-btn-bottom svg{
  width:10px;
  height:10px;

  stroke:var(--tab-active);
  fill:none;

  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;

  pointer-events:none;
} */

/* ── icon-bar sidebar ── */
/* overflow intentionally visible, not hidden: each .icon-tab's hover tooltip
   (the ::after below) is positioned just outside this 40px-wide bar via
   left/right:calc(100% + 10px) — overflow:hidden here clipped it invisible. */
.wc-icon-bar{width:40px;height:100%;background:var(--bg-panel);display:flex;flex-direction:column;align-items:center;padding:6px 0 40px;gap:2px;flex-shrink:0;z-index:5;box-sizing:border-box;overflow:visible;position:relative}
#wb-left-icon-bar{border-right:1px solid var(--border)}
#wb-right-icon-bar{border-left:1px solid var(--border)}

.wc-icon-tab{width:34px;height:34px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;color:rgba(255,255,255,0.28);transition:background .15s,color .15s}
.wc-icon-tab:hover{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.75)}
.wc-icon-tab.wc-active{color:var(--accent);background:rgba(0,234,255,0.08)}
#wb-left-icon-bar .wc-icon-tab.wc-active{border-left:2px solid var(--accent)}
#wb-right-icon-bar .wc-icon-tab.wc-active{border-right:2px solid var(--accent)}
.wc-icon-tab svg{pointer-events:none}

.wc-icon-tab::after{content:attr(data-tooltip);position:absolute;top:50%;transform:translateY(-50%);background:#1c1c1c;border:1px solid rgba(255,255,255,0.1);border-radius:4px;padding:4px 8px;font-size:12px;color:rgba(255,255,255,0.85);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s .1s;z-index:200}
#wb-left-icon-bar .wc-icon-tab::after{left:calc(100% + 10px)}
#wb-right-icon-bar .wc-icon-tab::after{right:calc(100% + 10px)}
.wc-icon-tab:hover::after{opacity:1}

.wc-icon-bar-close{position:absolute;bottom:0;left:0;width:40px !important;height:34px;border-radius:0 !important;border-top:1px solid rgba(255,255,255,0.06)}
.wc-icon-bar-close svg{transition:transform .3s ease}
.wc-icon-bar-close.wc-flipped svg{transform:rotate(180deg)}

/* Hidden on tablet/desktop; the phone-mode media query below (same
   specificity, later in source, so it must stay AFTER this block) flips it
   to display:flex at ≤767px. */
.wc-wm-mobile-nav{
  display:none;
  position:fixed; left:0; right:0; bottom:0;
  /* Lift above Android button-nav bar when present */
  bottom:env(safe-area-inset-bottom,0px);
  height:56px; z-index:950;
  background:var(--bg-panel,#181818); border-top:1px solid var(--border,rgba(0,234,255,0.18));
  align-items:stretch; justify-content:space-around;
}
.wc-wm-mobile-nav-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; background:none; border:none; color:rgba(255,255,255,0.45);
  font-size:12px; font-family:inherit; letter-spacing:.02em; cursor:pointer;
}
.wc-wm-mobile-nav-btn svg{width:19px;height:19px;pointer-events:none}
.wc-wm-mobile-nav-btn.wc-active{ color:var(--accent,#00eaff); }
.wc-wm-mobile-nav-btn:active{ background:rgba(255,255,255,0.06); }

.wc-wm-mobile-more-pop{
  display:none;
  position:fixed; right:8px; bottom:64px; z-index:955;
  min-width:170px; background:#1c1c1c; border:1px solid rgba(0,234,255,0.28);
  border-radius:10px; padding:6px; box-shadow:0 12px 40px rgba(0,0,0,0.6);
}
.wc-wm-mobile-more-pop.wc-open{ display:block; }
.wc-wm-mobile-more-item{
  padding:10px 12px; font-size:13px; color:rgba(255,255,255,0.85);
  border-radius:6px; cursor:pointer;
}
.wc-wm-mobile-more-item:active{ background:rgba(0,234,255,0.1); }
.wc-wm-mobile-more-head{
  padding:6px 12px; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,0.3);
}
.wc-wm-mobile-more-head + .wc-wm-mobile-more-head{ margin-top:0; }
.wc-wm-mobile-more-item:hover{ background:rgba(255,255,255,0.06); }

/* ═══════════════════════════════════════════════════════════════
   PHONE MODE (≤767px) — left/right/bottom panels become full-screen
   overlays, one at a time (see isPhoneMode()/collapseOtherPanels in
   playground.html). Tablets (≥768px) are untouched by this block.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  /* Desktop-only chrome superseded by the mobile nav bar below */
  #wb-left-icon-bar, #wb-right-icon-bar,
  .wc-toggle-btn-side, .wc-toggle-btn-bottom,
  .wc-resize-handle, #wb-bottom-resize { display:none !important; }

  #wb-left-wrap, #wb-right-wrap, #wb-bottom-wrap{
    position:fixed !important;
    top:0 !important; left:0 !important; right:0 !important; bottom:auto !important;
    width:100% !important;
    height:100vh !important;
    height:100dvh !important; /* wins over the line above in browsers that support it */
    z-index:900;
  }
  /* .collapsed is toggled on the wrap by makePanel's collapse()/expand() (see
     playground.html) in lockstep with the panel's own .collapsed class — an
     ID selector's !important above would otherwise beat .panel.collapsed's
     class-selector !important and keep "closed" panels full-screen and
     click-blocking, so sizing here keys off the wrap's own state instead. */
  #wb-left-wrap.wc-collapsed, #wb-right-wrap.wc-collapsed, #wb-bottom-wrap.wc-collapsed{
    width:0 !important; height:0 !important; pointer-events:none;
  }
  #wb-left-panel, #wb-right-panel, #wb-bottom-panel{ width:100% !important; height:100% !important; }
  #wb-bottom-wrap-body, #wb-bottom-panel{ height:100% !important; }

  /* Canvas content must scroll fully into view above the fixed mobile nav
     bar (56px tall) instead of being covered by it. !important because the
     base #canvas-viewport{padding:8px} rule (playground.css, later in this
     file) is equal specificity and later in source, so it wins otherwise —
     same trap as the wrap/panel sizing rules above. */
  #wb-canvas-viewport{ padding-bottom:64px !important; }

  .wc-wm-mobile-nav{ display:flex !important; }
}

/* ── component cards ── */
.wc-comp-panel{padding:6px 4px}
.wc-comp-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.wc-comp-card{border:1px solid var(--border);border-radius:7px;overflow:hidden;cursor:pointer;transition:border-color .15s,background .15s,transform .15s,box-shadow .15s;user-select:none}
.wc-comp-card:hover{border-color:var(--border-hover);background:rgba(0,234,255,0.04);transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,234,255,0.1)}
.wc-comp-card:active{transform:translateY(0)}
.wc-comp-card-main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:11px 6px 9px;position:relative;min-height:56px}
.wc-comp-card-icon{color:rgba(255,255,255,0.4);transition:color .15s}
.wc-comp-card:hover .wc-comp-card-icon{color:#00eaff}
.wc-comp-card-label{font-size:12px;color:rgba(255,255,255,0.6);line-height:1;letter-spacing:.02em;transition:color .15s}
.wc-comp-card:hover .wc-comp-card-label{color:rgba(255,255,255,0.85)}
/* "Animate on Scroll" — the one card that opens a gallery of ready-made blocks
   rather than a form for one element. Full width because it is a different kind
   of thing, and because its label is the only one that will not fit in half a
   column. Icon and label sit in a row: at full width a stacked card is mostly
   empty space. */
.wc-comp-card-motion{grid-column:1/-1;border-color:rgba(0,234,255,0.22);background:rgba(0,234,255,0.03)}
.wc-comp-card-motion .wc-comp-card-main{flex-direction:row;gap:8px;min-height:40px;padding:9px 6px}
.wc-comp-card-motion .wc-comp-card-icon{color:rgba(0,234,255,0.6)}
.wc-comp-sub-arrow{position:absolute;right:5px;top:5px;color:rgba(255,255,255,0.22);transition:transform .15s;font-size:13px}
.wc-comp-card.wc-open .wc-comp-sub-arrow{transform:rotate(180deg)}
.wc-comp-sub-list{display:none;border-top:1px solid var(--border)}
.wc-comp-card.wc-open .wc-comp-sub-list{display:block}
.wc-comp-sub-item{padding:5px 9px;font-size:12px;color:rgba(255,255,255,0.45);cursor:pointer;transition:background .12s,color .12s}
.wc-comp-sub-item:hover{background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.9)}

/* ── Drag from the panels onto the canvas (canvasDragDrop.js) ──────────────
   #wb-dnd-ind / #wb-dnd-lbl are position:fixed on <body> — never inside the
   canvas, whose transformed artboard would become their containing block. */
[data-wb-drag]{cursor:grab}
[data-wb-drag]:active{cursor:grabbing}
.wc-dnd-src{opacity:.45}
.wc-dnd-hint{font-size:13px;line-height:1.35;color:rgba(255,255,255,0.42);padding:2px 6px 8px}
.wc-modules-search-wrap + .wc-dnd-hint{padding:8px 10px 4px}
body.wc-dnd-dragging #wb-content{outline:2px dashed rgba(0,234,255,0.35);outline-offset:-3px}
#wb-dnd-ind{position:fixed;display:none;pointer-events:none;z-index:9990;box-sizing:border-box;border-radius:3px}
#wb-dnd-ind.is-box{border:2px solid #00eaff;background:rgba(0,234,255,0.08)}
#wb-dnd-ind.is-line{background:#00eaff;box-shadow:0 0 0 1px rgba(0,0,0,0.35),0 0 10px rgba(0,234,255,0.7)}
#wb-dnd-ind.is-bad{border-color:#ff5a5a;background:rgba(255,90,90,0.08)}
#wb-dnd-lbl{position:fixed;display:none;pointer-events:none;z-index:9991;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:4px 9px;border-radius:5px;background:rgba(0,20,22,0.95);border:1px solid rgba(0,234,255,0.45);color:#00eaff;
  font:600 13px/1.3 system-ui,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,0.5)}
#wb-dnd-lbl.is-bad{background:rgba(40,8,8,0.95);border-color:rgba(255,90,90,0.5);color:#ff7373}




#wb-left-toggle{right:-18px;border-left:none;border-radius:0 6px 6px 0}
#wb-right-toggle{left:-18px;border-right:none;border-radius:6px 0 0 6px}

/* ── main canvas ── */
#wb-main{
    width: 100%;
    color:white;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
#wb-canvas-viewport{
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 8px;
    box-sizing: border-box;
    background-color: #181818;
    background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1px);
    background-size: 22px 22px;
}
#wb-centerBlock{
    /* position:relative */
    gap:14px;min-width:0;
    /* overflow:hidden; */
    width: 100%;
    height: 100%;
    
    position:relative
}
#wb-canvas-hint{color:var(--text-tab);font-size:13px;letter-spacing:.05em}
/* #theme-btn{position:absolute;top:12px;right:12px;padding:5px 12px;font-size:12px;cursor:pointer;border-radius:20px;background:var(--toggle-bg);border:1px solid var(--toggle-border);color:var(--text);display:flex;align-items:center;gap:6px;transition:background .2s,color .2s,border-color .2s} */
#wb-theme-btn{padding:5px 12px;font-size:12px;cursor:pointer;border-radius:20px;background:var(--toggle-bg);border:1px solid var(--toggle-border);color:var(--text);display:flex;align-items:center;gap:6px;transition:background .2s,color .2s,border-color .2s}
#wb-theme-btn:hover{border-color:var(--toggle-border-h);color:var(--text-active)}




#wb-main .wc-lm{
  --bg:#e8e8ed;--bar:#d1d1d6;--panel:#f2f2f7;
  --accent:#0078c8;--text:rgba(0,0,0,0.4);--text-hi:rgba(0,0,0,0.88);
  --tab-bg:#c7c7cc;--tab-hover:#bbbbc0;--tab-act:#f2f2f7;
  --border:rgba(0,120,200,0.2);--border-act:#0078c8;
  --del:#ff3b30;--add:#c7c7cc;
  --modal-bg:#fff;--modal-border:rgba(0,120,200,0.25);
  --borderShell:rgba(0,120,200,0.25);
}
#wb-main #wb-shell{
    /* var(--bg) */
  background:white;
  /* border-radius:14px; */
  overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif;
  display:flex;flex-direction:column;min-height:460px;
  height: 100%;
  border:1px solid var(--borderShell);transition:background .2s,border-color .2s;position:relative;
  /* Canvas markup is injected inline (no iframe), so a page element with its
     own position:fixed (e.g. a floating CTA button) would otherwise escape
     #shell and paint against the real browser viewport — on top of the
     editor UI, including the bottom dock. A transform makes #shell the
     containing block for fixed/sticky descendants, trapping them here. */
  transform:translateZ(0);
}
#wb-main #wb-shell.wc-sim-active{flex-shrink:0;transition:width .15s ease,height .15s ease}
#wb-main #wb-shell.wc-resizing{transition:none}
/* Nothing selected → style edits implicitly target <body>, i.e. the whole
   page. The text hint above the property panel says so, but it's easy to
   miss; this outline makes it visible right on the canvas so a background/
   gradient tweak here doesn't silently repaint the entire page. */
#wb-main #wb-shell.wc-body-edit-active{
  outline:2px solid rgba(255,176,46,0.8);
  outline-offset:3px;
  animation:wcBodyEditPulse 1.8s ease-in-out infinite;
}
@keyframes wcBodyEditPulse{
  0%,100%{outline-color:rgba(255,176,46,0.8)}
  50%{outline-color:rgba(255,176,46,0.3)}
}
/* Positioned in JS (not anchored via CSS right/bottom) because #shell's own
   bottom edge can sit behind the fixed-position bottom dock (#bottom-wrap,
   z-index:100) when the canvas is fluid/tall — the handle tracks the actual
   visible corner instead of a corner that may be covered. */
.wc-canvas-resize-handle{
  position:fixed;width:14px;height:14px;z-index:150;
  cursor:nwse-resize;touch-action:none;
  background-image:linear-gradient(135deg,transparent 0,transparent 45%,rgba(0,120,200,.6) 45%,rgba(0,120,200,.6) 55%,transparent 55%,transparent 65%,rgba(0,120,200,.6) 65%,rgba(0,120,200,.6) 75%,transparent 75%);
  opacity:.5;transition:opacity .15s;
}
.wc-canvas-resize-handle:hover,.wc-canvas-resize-handle.wc-active{opacity:1}
#wb-main #wb-bar{
  display:flex;align-items:flex-end;
  background:var(--bar);padding:10px 10px 0;gap:6px;
  transition:background .2s;z-index:2;overflow:hidden
}
#wb-main #wb-scroll-wrap{
  display:flex;align-items:flex-end;gap:2px;
  overflow-x:scroll;
  /* overflow-y:hidden; */
  flex:1;
  scrollbar-width:none;padding-bottom:0
}
#wb-main #wb-scroll-wrap::-webkit-scrollbar{display:none}
.wc-tab{
  display:flex;align-items:center;gap:6px;
  padding:8px 11px 9px;border-radius:8px 8px 0 0;
  background:var(--tab-bg);cursor:pointer;
  border:1px solid transparent;border-bottom:none;
  font-size:15px;color:var(--text);white-space:nowrap;
  flex-shrink:0;position:relative;
  transition:background .15s,color .15s;margin-bottom:-1px
}
#wb-main .wc-tab:hover{background:var(--tab-hover);color:var(--text-hi)}
#wb-main .wc-tab.wc-active{
  background:var(--tab-act);color:var(--text-hi);
  border-color:var(--border-act);border-bottom-color:var(--tab-act);z-index:3
}
#wb-main .wc-tab .wc-lbl{
  overflow:hidden;text-overflow:ellipsis;
  max-width:80px;transition:max-width .2s ease;font-size:15px
}
#wb-main .wc-tab.wc-active .wc-lbl{max-width:170px}
#wb-main .wc-tab.wc-editing .wc-lbl{display:none}
#wb-main .wc-tab-input{
  display:none;
  width:90px;
  min-width:0;
  background:rgba(0,0,0,0.25);
  border:1.5px solid var(--border-act);
  border-radius:5px;
  outline:none;color:var(--text-hi);
  font-size:15px;font-family:inherit;
  padding:2px 7px;
}
#wb-main .wc-lm .wc-tab-input{background:rgba(255,255,255,0.55)}
#wb-main .wc-tab.wc-editing .wc-tab-input{display:block}
#wb-main .wc-tab .wc-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);flex-shrink:0;opacity:0;transition:opacity .15s
}
#wb-main .wc-tab.wc-active .wc-dot{opacity:1}
#wb-main .wc-tab .wc-x{
  font-size:12px;color:var(--text);opacity:0;
  pointer-events:none;transition:opacity .15s;flex-shrink:0;cursor:pointer;line-height:1
}
#wb-main .wc-tab:hover .wc-x,.wc-tab.wc-active .wc-x{opacity:.65;pointer-events:auto}
#wb-main .wc-tab .wc-x:hover{opacity:1;color:var(--del)}
#wb-main .wc-tab .wc-pen{
  font-size:12px;color:var(--text);opacity:0;
  pointer-events:none;transition:opacity .15s;flex-shrink:0;cursor:pointer
}
#wb-main .wc-tab:hover .wc-pen,.wc-tab.wc-active .wc-pen{opacity:.55;pointer-events:auto}
#wb-main .wc-tab .wc-pen:hover{opacity:1;color:var(--accent)}
#wb-main #wb-bar-right{display:flex;align-items:center;gap:6px;padding-bottom:4px;flex-shrink:0}
#wb-main #wb-add-btn,#wb-theme-btn{
  width:26px;height:26px;border-radius:50%;
  background:var(--add);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:background .15s,transform .1s
}
#wb-main #wb-add-btn{font-size:17px;color:var(--accent)}
#wb-main #wb-add-btn:hover{background:var(--tab-hover);transform:scale(1.07)}
#wb-main #wb-add-btn:active{transform:scale(.93)}
#wb-main #wb-theme-btn{font-size:13px}
#wb-main #wb-theme-btn:hover{background:var(--tab-hover)}
#wb-main #wb-content-bar{height:1px;background:var(--border-act);z-index:1;transition:background .2s}

#wb-main #wb-content {
    background-color: white;
    color: black;
    margin: 0;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
}

#playground{
    width: 100%;
    height: 100%;
    color-scheme: light;
    background-color: #ffffff;
}
/* #main #content{
  flex:1;background:var(--panel);padding:32px 28px;
  transition:opacity .18s,background .2s;min-height:300px
} */
/* #main #content.fade{opacity:0}
#main #content h2{font-size:22px;font-weight:500;color:var(--text-hi);margin-bottom:10px}
#main #content p{font-size:16px;color:var(--text);line-height:1.75} */
#wb-main .wc-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:240px;gap:12px}
#wb-main .wc-empty-ring{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--text)}
#wb-main .wc-empty p{font-size:15px;color:var(--text)}
#wb-main .wc-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,0.48);
  display:flex;align-items:center;justify-content:center;
  z-index:20;border-radius:14px
}
#wb-main .wc-lm .wc-overlay{background:rgba(0,0,0,0.28)}
#wb-main .wc-modal{background:var(--modal-bg);border:1px solid var(--modal-border);border-radius:14px;padding:22px 20px 18px;width:268px}
#wb-main .wc-modal h3{font-size:16px;font-weight:500;color:var(--text-hi);margin-bottom:6px}
#wb-main .wc-modal p{font-size:14px;color:var(--text);line-height:1.6;margin-bottom:16px}
#wb-main .wc-modal-row{display:flex;gap:8px}
#wb-main .wc-mbtn{
  flex:1;padding:9px;border-radius:9px;font-size:14px;
  cursor:pointer;border:1px solid var(--border);
  background:var(--tab-bg);color:var(--text-hi);font-family:inherit;transition:background .12s
}
#wb-main .wc-mbtn:hover{background:var(--tab-hover)}
#wb-main mbtn.wc-danger{border-color:var(--del);color:var(--del)}
#wb-main .wc-mbtn.wc-danger:hover{background:rgba(255,69,58,.1)}

/*


/* 
.tab{
    border: 2px solid black;
    flex: 1;      
}

#addTab{
    border: 5px solid red;
    border-radius: 10px ;
}

.priority {
    border: 2px dotted #00eaff;
    background-color: white;
    transition: all 0.3s ease;
}

.priority {
    box-shadow: 0 0 5px #00eaff,
                0 0 10px rgba(0, 234, 255, 0.4);
}

.priority:hover {
    border: 2px solid #00eaff;
    box-shadow: 0 0 10px #00eaff,
                0 0 20px #00eaff,
                0 0 40px rgba(0, 234, 255, 0.7);
    transform: translateY(-3px);
}

.priority.clicked {
    border: 3px solid #0066ff !important;
    box-shadow: 0 0 12px #0066ff,
                0 0 25px rgba(0, 102, 255, 0.6);
} */

/* .isInEditMode {
  margin: 10px !important;
} */

/* .toolbar { display: flex; align-items: center; 
    border:2px solid plum
    gap: 12px; padding: 12px 0 16px; 
} */

/* Toolbar */
.wc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  position: relative;
  flex-shrink: 0;
  background: linear-gradient(180deg, #141416 0%, #0d0d0f 100%);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 2px 10px rgba(0,0,0,0.5);
  min-height: 52px;
  /* #wb-shell (the canvas) gets transform:translateZ(0) to trap fixed-position
     page content, which makes it its own stacking context at the implicit
     z-index 0. Without an explicit z-index here, .wc-toolbar is also a
     z-index:0 context, and #wb-shell — later in the DOM — paints on top,
     burying hover tooltips (and anything else the toolbar overlays) behind
     the canvas. */
  z-index: 40;
  /* Was flex-wrap:wrap, with .wc-tb-fold forcing nowrap below ~900px. That
     left a dead zone: once real content (longer labels, a renamed project,
     extra page tabs) needed more than ~900px but the toolbar's measured
     width hadn't dropped to 900px yet, the browser's own wrap kicked in
     uncontrolled — a half-folded, overlapping mess the fold styles below
     never anticap (reported as "900–940px breaks"). Nowrap always, and let
     wb_toolbarWidthSync's own overflow check (scrollWidth > clientWidth,
     not a fixed px number) decide when to fold — see the toolbar-width
     ResizeObserver IIFE in playground.html. */
  flex-wrap: nowrap;
}

/* Thin accent line across the very top edge — echoes the app's cyan accent
   without adding another loud element to an already-busy bar. */
.wc-toolbar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,234,255,0.35), transparent);
  pointer-events: none;
}

.wc-toolbar-left, .wc-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap; /* same reasoning as .wc-toolbar's own nowrap above */
  /* Unfolded, these must never shrink: their own buttons already refuse to
     (.wc-toolbar-btn is flex-shrink:0), so a shrinkable min-width:0 box
     around them can be squeezed thinner than what those buttons actually
     need — and since the buttons don't shrink, they overflow their own
     group's box and visually overlap whatever sits next to it (Save
     bleeding into the Tour "?" button, reported as the ~893px overlap).
     Controlled shrinking only ever happens once .wc-tb-fold is active,
     which explicitly re-sets flex/min-width below — this base rule should
     never be in a position to shrink at all, overflow-fold is what's
     supposed to catch it first. */
  flex-shrink: 0;
  min-width: auto;
}

.wc-toolbar-right {
  margin-left: auto;
}

/* Tablet: tighter spacing */
@media (max-width: 1024px) {
  .wc-toolbar {
    padding: 8px 12px;
    gap: 8px;
  }

  .wc-toolbar-left, .wc-toolbar-right {
    gap: 8px;
  }
}

/* Tablet */
@media (max-width: 768px) {
  .wc-toolbar {
    padding: 8px 14px;
    gap: 10px;
    min-height: 48px;
  }

  .wc-toolbar-left, .wc-toolbar-right {
    gap: 8px;
  }
}

/* Mobile: compact layout */
@media (max-width: 640px) {
  .wc-toolbar {
    padding: 8px 10px;
    gap: 8px;
    justify-content: flex-start;
    min-height: 46px;
  }

  .wc-toolbar-left {
    gap: 6px;
    flex: 0 1 auto;
    flex-basis: auto;
  }

  .wc-toolbar-right {
    margin-left: auto;
    gap: 6px;
    flex: 0 1 auto;
    flex-basis: auto;
  }
}

/* Segmented Preview/Edit mode switch */
.wc-toolbar-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px;
  padding: 4px;
  margin-right: 4px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

@media (max-width: 768px) {
  .wc-toolbar-seg {
    margin-right: 0px;
  }
}

.wc-resp-size-badge{
  font-size:12px;
  font-family: var(--mono, 'Courier New', monospace);
  color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
  padding: 6px 11px;
  letter-spacing: .02em;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.wc-resp-size-badge:hover{color:rgba(255,255,255,0.75);border-color:rgba(255,255,255,0.18);background:rgba(255,255,255,0.06)}
.wc-resp-size-badge.wc-is-sim{color:var(--accent);border-color:rgba(0,234,255,0.4);background:rgba(0,234,255,0.08)}

@media (max-width: 768px) {
  .wc-resp-size-badge {
    font-size:12px;
    padding: 4px 8px;
  }
}

@media (max-width: 640px) {
  .wc-resp-size-badge {
    display: none;
  }
}

/* Base button */
.wc-toolbar button {
  -webkit-appearance: none;
  appearance: none;
  padding: 0 15px;
  height: 34px;
  box-sizing: border-box;
  font-family: inherit;
  font-size:12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.75);
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}

.wc-toolbar button:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.95);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transform: translateY(-1px);
}
.wc-toolbar button:active { transform: translateY(1px); }

/* Mobile: smaller buttons */
@media (max-width: 768px) {
  .wc-toolbar button {
    padding: 0 12px;
    height: 32px;
    font-size:12px;
    border-radius: 7px;
  }
}

@media (max-width: 640px) {
  .wc-toolbar button {
    padding: 0 10px;
    height: 30px;
    font-size:12px;
    border-radius: 6px;
    line-height: 1;
  }
}

/* Preview/Edit sit inside the segmented control — flatten their own chrome */
.wc-toolbar-seg button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  height: 27px;
  padding: 0 14px;
  border-radius: 7px;
  color: rgba(255,255,255,0.6);
  transition: all 0.2s ease;
}
.wc-toolbar-seg button svg { flex-shrink: 0; opacity: 0.7; transition: opacity 0.2s ease, transform 0.2s ease; }
.wc-toolbar-seg button.wc-active svg { opacity: 1; }
.wc-toolbar-seg button:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.88); transform: none; }
.wc-toolbar-seg button:hover svg { opacity: 0.92; transform: scale(1.08); }
.wc-toolbar-seg button:active { transform: none; }

@media (max-width: 768px) {
  .wc-toolbar-seg button {
    height: 24px;
    padding: 0 11px;
    font-size:12px;
  }
}

@media (max-width: 640px) {
  .wc-toolbar-seg {
    padding: 3px;
    margin-right: 0px;
    gap: 1px;
  }

  .wc-toolbar-seg button {
    height: 22px;
    padding: 0 9px;
    font-size:12px;
    line-height: 1;
  }
}

/* Preview/Edit active — exactly one of Preview/Edit is active at all times
   (see the toggle handlers in playground.html). Same accent for both states
   (it's a toggle, not two different features) so the segmented control reads
   as one cohesive control rather than two competing hues. */
#wb-toggleBtn_0.wc-active,
#wb-toggleBtn.wc-active {
  background: linear-gradient(180deg, rgba(0,234,255,0.22), rgba(0,234,255,0.09));
  color: #7cefff;
  box-shadow: inset 0 0 0 1px rgba(0,234,255,0.5);
}
#wb-toggleBtn_0.wc-active:hover,
#wb-toggleBtn.wc-active:hover {
  background: linear-gradient(180deg, rgba(0,234,255,0.3), rgba(0,234,255,0.14));
  color: #a4f5ff;
}

/* Action buttons (Export / Save / Live View) — Export and Live View sit as
   quiet neutral (ghost) buttons using the same .wc-toolbar button base as
   everything else; Save is the one primary/solid action, since it's the
   button that matters most. One accent color total, not three. */
.wc-toolbar-btn { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; position: relative; }

@media (max-width: 640px) {
  .wc-toolbar-btn {
    gap: 4px;
  }
}

/* Icon-only variant (Refresh) — same base chrome, square instead of padded
   for text, and the icon spins briefly on click so a same-URL "reload"
   (which gives no other visual feedback) still reads as having done something. */
.wc-toolbar-btn-icon {
  width: 40px;
  padding: 0;
  justify-content: center;
}
.wc-toolbar-btn-icon svg { flex-shrink: 0; transition: transform 0.2s ease; }
.wc-toolbar-btn-icon:hover svg { transform: scale(1.14); }
.wc-toolbar-btn-icon:active svg { animation: wc-refresh-spin .4s ease; }
#wb-refreshBtn:hover svg { transform: rotate(25deg) scale(1.1); }
@keyframes wc-refresh-spin { from { transform: rotate(0); } to { transform: rotate(180deg); } }

@media (max-width: 768px) {
  .wc-toolbar-btn-icon { width: 36px; }
  .wc-toolbar-btn-icon svg { width: 17px; height: 17px; }
}
@media (max-width: 640px) {
  .wc-toolbar-btn-icon { width: 34px; }
  .wc-toolbar-btn-icon svg { width: 16px; height: 16px; }
}

button.wc-toolbar-btn-primary {
  background: linear-gradient(180deg, rgba(0,220,255,0.2), rgba(0,190,255,0.08));
  border-color: rgba(0,224,255,0.4);
  color: #7fe9ff;
  box-shadow: 0 2px 10px rgba(0,190,255,0.1);
}
button.wc-toolbar-btn-primary:hover {
  background: linear-gradient(180deg, rgba(0,220,255,0.3), rgba(0,190,255,0.14));
  border-color: rgba(0,224,255,0.55);
  color: #b5f2ff;
  box-shadow: 0 4px 16px rgba(0,190,255,0.18);
  transform: translateY(-1px);
}
button.wc-toolbar-btn-primary:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.2);
}

/* Unsaved-changes dot — small badge on the Save button, shown while
   window._wbDirty is true (see playground.html account-menu script). Ring
   matches the dark toolbar background it sits against. */
#wb-saveBtn { position: relative; }
.wc-save-dirty-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff7a1a;
  box-shadow: 0 0 0 2px #0d0d0f, 0 0 6px rgba(255,122,26,0.7);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
.wc-save-dirty-dot.wc-show {
  opacity: 1;
  transform: scale(1);
}

/* Save button + autosave-interval dropdown, split button layout: the main
   Save action stays one click, the caret opens the interval picker beside
   it rather than hiding it behind a separate menu. */
/* Scoped as `.wc-toolbar .wc-save-split-*` (two classes, not one) so these
   beat the blanket `.wc-toolbar button` base rule (class+type, same raw
   specificity weight as a single class) — a bare `.wc-save-split-main`
   selector here was silently losing that fight, which is why the two
   halves kept rendering as fully-rounded, fully-bordered separate pills
   instead of one joined control. */
.wc-save-split { position: relative; display: flex; align-items: stretch; flex-shrink: 0; }
.wc-toolbar .wc-save-split-main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.wc-toolbar .wc-save-split-caret {
  padding: 0 8px;
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  /* Thin divider between the two halves, drawn as an inset shadow instead
     of a real border so it doesn't fight the radius/width resets above. */
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.18);
}
.wc-toolbar .wc-save-split-caret:hover { box-shadow: inset 1px 0 0 rgba(255,255,255,0.28); }
.wc-toolbar .wc-save-split-caret.wc-open {
  background: linear-gradient(180deg, rgba(0,220,255,0.3), rgba(0,190,255,0.14));
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.28);
}
.wc-save-autosave-pop {
  position: absolute; top: calc(100% + 11px); right: 0; z-index: 99999;
  min-width: 240px; padding: 7px; box-sizing: border-box;
  background: #141416; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 13px; box-shadow: 0 18px 44px rgba(0,0,0,0.55);
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.wc-save-autosave-pop.wc-open { opacity: 1; transform: none; pointer-events: auto; }
/* Little notch pointing up at the caret button, so the panel reads as
   coming out of the Save split rather than floating disconnected beside it. */
.wc-save-autosave-pop::before {
  content: ''; position: absolute; top: -6px; right: 15px;
  width: 11px; height: 11px; background: #141416;
  border-left: 1px solid rgba(255,255,255,0.1);
  border-top: 1px solid rgba(255,255,255,0.1);
  border-radius: 2px 0 0 0; transform: rotate(45deg);
}
.wc-save-autosave-title {
  padding: 5px 9px 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,0.32);
}
.wc-autosave-opt { align-items: center; gap: 10px; border-radius: 9px; }
.wc-autosave-opt + .wc-autosave-opt { margin-top: 1px; }
.wc-autosave-opt.wc-active { background: rgba(0,234,255,0.1); }
.wc-autosave-opt.wc-active .wc-tbm-label { color: #7fe9ff; }
.wc-autosave-sep { height: 1px; background: rgba(255,255,255,0.07); margin: 5px 5px 4px; }
.wc-autosave-check { flex-shrink: 0; opacity: 0; color: #00eaff; margin-left: auto; }
.wc-autosave-opt.wc-active .wc-autosave-check { opacity: 1; }

/* Thin separator between toolbar clusters (seg | actions, badge | account) */
.wc-toolbar-divider {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,0.09);
  flex-shrink: 0;
  margin: 0 1px;
}
@media (max-width: 640px) {
  .wc-toolbar-divider { display: none; }
}

/* Phone: collapse Export/Live View to icon-only so the toolbar's left group
   (Preview/Edit + Export + status + Live View) has a real chance of fitting
   one row at 360-430px. font-size:0 hides the text run without touching the
   SVG (sized via width/height attrs, not em) or needing an HTML change. */
@media (max-width:480px){
  .wc-toolbar{ padding:6px 8px; gap:6px; }
  #wb-exportBtn, #wb-livePreviewBtn{ font-size:0; gap:0; padding:0 9px; }
}

/* Tooltip on hover. Opens downward (not upward) because this toolbar sits
   flush at the top of the page — an upward tooltip has no room above it and
   gets clipped by html/body's overflow:hidden. */
.wc-toolbar button[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-size:12px;
  font-weight: 400;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 30;
  max-width: 150px;
  word-wrap: break-word;
}
.wc-toolbar button[data-tooltip]:hover::after { opacity: 1; }
.wc-toolbar button[data-tooltip].wc-tt-forcehide::after { opacity: 0 !important; }

/* Mobile: hide tooltips to prevent overflow */
@media (max-width: 768px) {
  .wc-toolbar button[data-tooltip]::after {
    display: none;
  }
}

/* Account menu (avatar + dropdown): see consolidated ".wb-user-wrap" /
   ".wb-dropdown" rules near the Settings modal CSS further down this file —
   this used to be duplicated here (dead, shadowed by the later block since
   both matched with equal specificity); kept in one place now. */

/* Edit mode elements */
.wc-edit-mode-el {
  outline: 1.5px dashed #00eaff55 !important;
  margin-block: 6px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}
.wc-edit-mode-el:hover {
  outline: 1.5px solid #00eaffaa !important;
}
.wc-edit-mode-el.wc-selected {
  outline: 2px solid #00eaff !important;
}

/* Elements the page itself hides (visibility:hidden / display:none) are forced
   back to visible while editing so they stay selectable — the real hidden
   state still applies in preview. Dimmed + amber-dashed so it's obvious this
   isn't how the element actually looks on the live page. See
   _refreshEditModeHiddenTags() in playground.html. */
.wc-edit-mode-el.wc-edit-mode-hidden-display {
  display: block !important;
}
.wc-edit-mode-el.wc-edit-mode-hidden {
  visibility: visible !important;
  opacity: 0.45 !important;
  outline: 1.5px dashed #ffb02e99 !important;
  background-color: #ffb02e0d !important;
  position: relative;
}
.wc-edit-mode-el.wc-edit-mode-hidden::before {
  content: 'hidden';
  position: absolute;
  top: -1px;
  right: -1px;
  font-size:12px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 0 0 0 4px;
  background: #ffb02ee0;
  color: #1a1200;
  pointer-events: none;
  z-index: 2;
}

.wc-selected-hover{
  outline: 2px solid #00eaff !important;
  background-color: #00eaff26 !important;
}

/* ── Animate-on-Scroll motion blocks (scrollAnimate.js, sa_insertBlock) ──────
   A motion block is an ordinary <div>; everything that makes it one lives in
   the SCROLL_ANIMS entry bound to its .wb-sa-t* class, which draws nothing on
   the canvas. So while editing it names itself and, while still empty, says
   what to do with it. Keyed on .wc-edit-mode-el — that class is added on
   entering edit mode and stripped before preview, save and export — so none of
   this can reach the published page. */
#playground .wb-sa-block.wc-edit-mode-el {
  /* Anchors the label. Inline position (the sticky progress bar) still wins,
     and a sticky element anchors it just as well — hence no !important. */
  position: relative;
  outline: 1.5px dashed #7b5cffaa !important;
}
#playground .wb-sa-block.wc-edit-mode-el:hover { outline: 1.5px solid #7b5cffdd !important; }
#playground .wb-sa-block.wc-edit-mode-el.wc-selected { outline: 2px solid #00eaff !important; }
#playground .wb-sa-block.wc-edit-mode-el::after {
  content: attr(data-sa-block);
  position: absolute;
  top: 0; left: 0;
  transform: translateY(-100%);
  padding: 3px 7px;
  border-radius: 5px 5px 0 0;
  background: #7b5cff;
  color: #fff;
  font: 600 9px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
/* Only the blocks that animate themselves land empty — the ones that animate
   their children arrive with placeholder items, so this never doubles up. */
#playground .wb-sa-block.wc-edit-mode-el:not([data-sa-bare]):empty::before {
  content: 'drop your components inside';
  display: block;
  text-align: center;
  color: #7b5cffcc;
  font: 500 12px/1.4 system-ui, -apple-system, sans-serif;
  pointer-events: none;
}


/* #toggleBtn {
  padding: 6px 14px; font-size:13px; font-weight: 500; cursor: pointer;
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  background: var(--color-background-primary);
  color: var(--color-text-primary);
}
#toggleBtn.active { background: #00eaff22; border-color: #00eaff; color: #00838a; } */

#wb-log { font-size:12px; font-family: var(--font-mono); color: var(--color-text-secondary);font-style: italic; }
/* #playground { padding: 16px; } */

.wc-box {
  padding: 0.4em;
  border: 1.5px dashed transparent;
  border-radius: var(--border-radius-md);
  background: var(--color-background-primary);
  /* KEY: margin on children creates clickable gap on the parent */
  margin: 0.2em;
  cursor: default;
  z-index: 1001;
}
.wc-box-label { font-size:12px; color: var(--color-text-secondary); margin-bottom: 4px; pointer-events: none; user-select: none; }
.wc-edit-mode .wc-box { cursor: pointer; border-color: var(--color-border-secondary); }
.wc-edit-mode .wc-box:hover { border-color: #00eaff88; background: #00eaff06; }
.wc-box.wc-selected { border: 2px solid #00eaff !important; }


.wc-selected {
  outline: 2px solid #00eaff !important;
}


.wc-number-param{
  display:inline-flex;flex-direction:row;align-items:center;
  border:1.5px solid rgba(0,234,255,0.35);
  border-radius:999px;overflow:hidden;background:#161616;
  font-size:clamp(10px,2vw,14px);
}
.wc-numberParamUpdate{
  width:clamp(28px,5vw,36px);height:clamp(28px,5vw,36px);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(14px,3vw,20px);font-weight:300;color:rgba(255,255,255,0.45);
  cursor:pointer;user-select:none;transition:background .12s,color .12s;flex-shrink:0;
}
.wc-numberParamUpdate:hover{background:rgba(0,234,255,0.1);color:#00eaff;}
.wc-numberParamUpdate:active{background:rgba(0,234,255,0.2);}
.wc-numberParamUpdate.wc-inactive {
  pointer-events: none;   /* clicks don't fire */
  opacity: 0.4;           /* visual feedback */
  cursor: not-allowed;
}
.wc-number-param-val{
  min-width:clamp(28px,5vw,36px);text-align:center;
  font-size:clamp(10px,2vw,14px);font-weight:500;
  color:rgba(255,255,255,0.9);font-variant-numeric:tabular-nums;
  border-left:1px solid rgba(0,234,255,0.15);
  border-right:1px solid rgba(0,234,255,0.15);
  padding:0 0px;line-height:clamp(28px,5vw,36px);
  cursor:text;position:relative;
}

.wc-number-param-val.wc-inactive {
  pointer-events: none;
  opacity: 0.4;
  cursor: not-allowed;
}

.wc-number-param.wc-editing{border-color:#00eaff;}
.wc-number-param.wc-err{border-color:#ff453a;}

/* SLIDER PARAM (PARAMETER_INPUT family 13) — reusable range-slider widget,
   companion to .wc-number-param (family 1) and .wc-angle-param (family 11).
   Same drag+fill+thumb visual language the Transform panel introduced,
   promoted here so any panel can drop in a slider instead of a stepper
   wherever dragging reads better than clicking +/-. */
.wc-slider-param{
  display:inline-flex;align-items:center;gap:0;
  border:1.5px solid rgba(0,234,255,0.35);
  border-radius:999px;background:#161616;
  height:clamp(28px,5vw,36px);
  transition:border-color .15s;
}
.wc-slider-param.wc-editing{border-color:#00eaff;}
.wc-slider-param.wc-inactive{opacity:.4;pointer-events:none;cursor:not-allowed;}
.wc-slider-param-track{flex:1;position:relative;height:4px;margin:0 14px;border-radius:2px;background:rgba(255,255,255,0.1);cursor:pointer;min-width:50px;}
.wc-slider-param-fill{position:absolute;left:0;top:0;height:100%;border-radius:2px;background:#00eaff;pointer-events:none;}
.wc-slider-param-thumb{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid #00eaff;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 3px rgba(0,234,255,0.15);transition:box-shadow .15s;}
.wc-slider-param-track:hover .wc-slider-param-thumb{box-shadow:0 0 0 5px rgba(0,234,255,0.22);}
input[type=range].wc-slider-param-range{position:absolute;inset:-10px -6px;width:calc(100% + 12px);height:calc(100% + 20px);opacity:0;cursor:pointer;margin:0;}
.wc-slider-param-val{
  min-width:clamp(32px,6vw,48px);text-align:center;
  font-size:clamp(10px,2vw,13px);font-weight:500;
  color:rgba(255,255,255,0.9);font-variant-numeric:tabular-nums;
  border-left:1px solid rgba(0,234,255,0.15);
  padding:0 9px;line-height:clamp(28px,5vw,36px);
  cursor:text;position:relative;white-space:nowrap;flex-shrink:0;
}
.wc-slider-param-val.wc-inactive{opacity:.4;pointer-events:none;cursor:not-allowed;}
.wc-slider-param-unit{color:rgba(255,255,255,0.35);font-size:.85em;margin-left:2px;}


.wc-dimension_unit_select{
    cursor: pointer;
    /* padding: 2px; */
    margin: 2px;
    border:2px solid rgba(0,234,255,0.1);
    border-radius: 5px;
    padding:10px;
    text-align: center;
    background:#161616;
    color:#00eaff;
    display: flex;
    /* flex-direction: row; */
    justify-content: center;
    align-items: center;
    /* height: fit-content; */
    /* width: 50px; */
    height: 30px;
    /* color:white; */

}

.wc-dimension_unit_select.wc-inactive {
  pointer-events: none;
  opacity: 0.4;
  cursor: not-allowed;
}

.wc-popup-box {
  position: fixed;
  background: #1e1e1e;
  border: 1px solid rgba(0,234,255,0.3);
  border-radius: 8px;
  padding: 6px 12px;
  font-size:12px;
  color: rgba(255,255,255,0.85);
  pointer-events: none;
  white-space: nowrap;
  z-index: 9999;
  opacity: 0;
  transition: opacity .15s;
}
.wc-popup-box.wc-show { opacity: 1; }

.wc-parametersList_style{
    background:#161616;
    color:#00eaff;
}

.wc-parametersList_style_element{
    display: flex;
    flex-direction: column;
    /* gap:5px; */
    align-items: center;
    padding: 5px;
    justify-content: space-between;
}


.wc-parametersList_style_element.wc-inactive{
    display: flex;
    flex-direction: row;
    /* gap:5px; */
    align-items: center;
    padding: 5px;
    justify-content: space-between;
    opacity: 50%;
    border:1px dotted #808080;
    margin:2px;
    pointer-events: none;

}

/* .parametersList_style_input{
    display: flex;
    flex-direction: row;
    gap:5px;
    align-items: center;
    padding: 5px;
}


.parametersList_style_input.inactive{
    display: flex;
    flex-direction: row;
    gap:5px;
    align-items: center;
    padding: 5px;
    opacity: 50%;
    border:1px dotted #808080;
    margin:2px;
    pointer-events: none; 

}*/


.wc-parametersList_style_input {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  transition: opacity .15s;
}

.wc-parametersList_style_input.wc-inactive {
  opacity: 0.4;
  border: 1px dotted #808080;
  margin: 2px;
  pointer-events: none;
}

.wc-param-toggle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(0,234,255,0.35);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
  pointer-events: all !important; /* always clickable */
  position: relative;
  z-index: 1;
}

.wc-param-toggle.wc-active {
  background: rgba(0,234,255,0.15);
  border-color: rgba(0,234,255,0.7);
}

.wc-param-toggle.wc-active::after {
  content: '';
  display: block;
  width: 5px;
  height: 8px;
  border-right: 1.5px solid rgba(0,234,255,0.9);
  border-bottom: 1.5px solid rgba(0,234,255,0.9);
  transform: rotate(45deg) translate(-1px, -1px);
}

.wc-parametersList_style_input_name p {
  margin: 0;
  font-size:12px;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
}

.wc-parametersList_style_input_name {
  flex: 1;
}




        /* MakeElementChildProperty_1
        rowBachha.setAttribute('subpropname', subpropname); */

/* @media (max-width: 300px) {
    .parametersList_style_element {
        display: flex;
        flex-direction: column;
    }
} */
 
.wc-parametersList_style_element_name{
    flex:2;
    color:#00eaff;
    max-width: max-content;
}
.wc-parametersList_style_element > .wc-parametersList_style_element_name {
    font-size:12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-3);
    padding-left: 7px;
    border-left: 2px solid rgba(255,255,255,0.1);
    line-height: 1.2;
    margin-bottom: 6px;
}


.wc-parametersList_style_element_prop{
    flex:4
}

.wc-parametersList_style_input_name{
    flex:2;
    color:#00eaff;
    max-width: max-content;

}


.wc-parametersList_style_input_prop{
    flex:4
}
@container (max-width: 200px) {
    .wc-parametersList_style_element {
         display: flex;
        flex-direction: column;
        /* scale:0.5 */
        
    }
}

@container (max-width: 250px) {

    .wc-parametersList_style_element_name{
        scale: 0.85;

    }
    /* .parametersList_style_element {
        scale: 0.85;
    } */
}


/* GROUPED-CARD ROWS — border/borderTop../outline../width/height/position etc
   (any PROPERTY_DATA entry with >1 children_names). Reverted back to the
   older stacked layout per user request: each sub-property is its own full
   column block (visible name header, full +/- stepper, full-width dropdown/
   color swatch) instead of the narrow inline-row "compact" variant that used
   to hide the stepper buttons and dropdown/hex labels. */
.wc-grouped-compact-row{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.wc-grouped-compact-item > .wc-parametersList_style_element_name{
    margin-bottom:4px;
}


/*   DROPDOWN CSS */
.wc-style_prop_dd-wrap{position:relative;width:150px;user-select:none;}
.wc-style_prop_dd-wrap:not(.wc-active){opacity:0.5;pointer-events:none;}
.wc-style_prop_dd-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;background:#1a1a1a;border:1.5px solid rgba(255,255,255,0.1);border-radius:8px;padding:7px 12px;transition:border-color .15s;color:rgba(255,255,255,0.75);font-size:12px;font-family:system-ui,sans-serif;z-index:100;}
.wc-style_prop_dd-trigger:hover{background:#1d1d1d;border-color:rgba(0,234,255,0.3);}
.wc-style_prop_dd-trigger.wc-open{border-color:rgba(0,234,255,0.4);}
.wc-style_prop_dd-left{display:flex;align-items:center;gap:7px;flex:1;min-width:0;}
.wc-style_prop_dd-flag{font-size:14px;flex-shrink:0;line-height:1;}
.wc-style_prop_dd-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--accent);}
.wc-style_prop_dd-arrow{flex-shrink:0;transition:transform .18s;}
.wc-style_prop_dd-arrow svg{display:block;}
.wc-style_prop_dd-trigger.wc-open .wc-style_prop_dd-arrow{transform:rotate(180deg);}
.wc-style_prop_dd-panel{position:absolute;top:calc(100% + 5px);left:0;width:100%;background:#1a1a1a;border:1.5px solid rgba(0,234,255,0.25);border-radius:8px;display:none;z-index:200;}
.wc-style_prop_dd-panel.wc-open{display:block;}
.wc-style_prop_dd-search{display:flex;align-items:center;gap:6px;padding:7px 10px;border-bottom:1px solid rgba(255,255,255,0.07);box-sizing:border-box;}
.wc-style_prop_dd-search-icon{flex-shrink:0;opacity:0.3;}
.wc-style_prop_dd-search-in{flex:1;width:100%;min-width:0;background:transparent;border:none;outline:none;font-size:12px;color:rgba(255,255,255,0.7);font-family:system-ui,sans-serif;}
.wc-style_prop_dd-search-in::placeholder{color:rgba(255,255,255,0.2);}
.wc-style_prop_dd-list{max-height:180px;overflow-y:auto;z-index:101;}
.wc-style_prop_dd-list::-webkit-scrollbar{width:3px;}
.wc-style_prop_dd-list::-webkit-scrollbar-thumb{background:rgba(0,234,255,0.15);border-radius:2px;}
.wc-style_prop_dd-item{display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;font-size:12px;color:rgba(255,255,255,0.55);transition:background .1s,color .1s;font-family:system-ui,sans-serif;}
.wc-style_prop_dd-item:hover{background:rgba(0,234,255,0.05);color:rgba(255,255,255,0.85);}
.wc-style_prop_dd-item.wc-selected{color:#00eaff;background:rgba(0,234,255,0.07);}
.wc-style_prop_dd-item+.wc-style_prop_dd-item{border-top:1px solid rgba(255,255,255,0.04);}
.wc-style_prop_dd-item-flag{font-size:13px;flex-shrink:0;line-height:1;}
.wc-style_prop_dd-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wc-style_prop_dd-empty{padding:14px 12px;font-size:12px;color:rgba(255,255,255,0.2);text-align:center;}









/*   COLOR CSS */

.wc-style_prop_cp-wrap{max-width:220px;position:relative;}
.wc-style_prop_cp-trigger{display:flex;align-items:center;gap:8px;cursor:pointer;background:#1a1a1a;border:1.5px solid rgba(255,255,255,0.1);border-radius:999px;padding:4px 12px 4px 5px;transition:border-color .15s;width:fit-content;}
.wc-style_prop_cp-trigger:hover{border-color:rgba(255,255,255,0.28);}
.wc-style_prop_cp-swatch{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.15);flex-shrink:0;}
.wc-style_prop_cp-hex-label{font-size:12px;font-weight:500;color:rgba(255,255,255,0.75);font-family:monospace;}
.wc-style_prop_cp-panel{margin-top:6px;background:#1a1a1a;border:1.5px solid rgba(255,255,255,0.1);border-radius:12px;padding:12px;display:none;flex-direction:column;gap:10px;width:100%;}
.wc-style_prop_cp-panel.wc-open{display:flex;}
.wc-style_prop_cp-sv-wrap{position:relative;width:100%;height:130px;border-radius:7px;overflow:hidden;cursor:crosshair;flex-shrink:0;}
.wc-style_prop_cp-sv-wrap canvas{position:absolute;inset:0;width:100%;height:100%;}
.wc-style_prop_cp-dot{position:absolute;width:11px;height:11px;border-radius:50%;border:2px solid #fff;transform:translate(-50%,-50%);pointer-events:none;}
.wc-style_prop_cp-bar{position:relative;height:9px;border-radius:5px;cursor:pointer;}
.wc-style_prop_cp-hue{background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);}
.wc-style_prop_cp-bar-thumb{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,0.25);transform:translate(-50%,-50%);pointer-events:none;}
.wc-style_prop_cp-alpha-bg{position:relative;height:9px;border-radius:5px;overflow:hidden;cursor:pointer;}
.wc-style_prop_cp-checker{position:absolute;inset:0;background-image:repeating-conic-gradient(#555 0% 25%,#333 0% 50%);background-size:7px 7px;}
.wc-style_prop_cp-alpha-grad{position:absolute;inset:0;}
.wc-style_prop_cp-alpha-thumb{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,0.25);transform:translate(-50%,-50%);pointer-events:none;}
.wc-style_prop_cp-name-wrap{position:relative;width:100%;overflow:visible;}
.wc-style_prop_cp-name-in{width:100%;background:#111;border:1px solid rgba(255,255,255,0.1);border-radius:6px;color:rgba(255,255,255,0.85);font-size:12px;padding:5px 8px;outline:none;transition:border-color .15s;font-family:inherit;}
.wc-style_prop_cp-name-in:focus{border-color:rgba(0,234,255,0.5);}
.wc-style_prop_cp-dropdown{position:absolute;top:calc(100% + 3px);left:0;width:100%;background:#1e1e1e;border:1px solid rgba(255,255,255,0.12);border-radius:7px;max-height:140px;overflow-y:auto;z-index:999;display:none;}
.wc-style_prop_cp-dropdown.wc-open{display:block;}
.wc-style_prop_cp-dropdown::-webkit-scrollbar{width:3px;}
.wc-style_prop_cp-dropdown::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:2px;}
.wc-style_prop_cp-ditem{display:flex;align-items:center;gap:7px;padding:5px 8px;cursor:pointer;transition:background .1s;}
.wc-style_prop_cp-ditem:hover{background:rgba(255,255,255,0.06);}
.wc-style_prop_cp-ditem-sw{width:12px;height:12px;border-radius:3px;flex-shrink:0;border:1px solid rgba(255,255,255,0.1);}
.wc-style_prop_cp-ditem-name{font-size:12px;color:rgba(255,255,255,0.8);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wc-style_prop_cp-ditem-hex{font-size:12px;color:rgba(255,255,255,0.3);font-family:monospace;flex-shrink:0;}
.wc-style_prop_cp-bottom{display:flex;gap:6px;align-items:center;width:100%;}
.wc-style_prop_cp-hex-row{
  display:flex;align-items:center;gap:3px;flex:1;min-width:0;background:#111;border:1px solid rgba(255,255,255,0.1);border-radius:6px;padding:0 8px;transition:border-color .15s;

  /* container-type: inline-size;
  container-name: colorShowParent;  */
}
.wc-style_prop_cp-hex-row:focus-within{border-color:rgba(0,234,255,0.5);}
.wc-style_prop_cp-hash{font-size:12px;font-family:monospace;color:rgba(255,255,255,0.35);user-select:none;flex-shrink:0;}
.wc-style_prop_cp-hex-in{
  
  flex:1;min-width:0;
  background: #000;
  color: #00ffff;
  /* background:transparent;
  color:rgba(255,255,255,0.85); */
  border:none;
  font-size:12px;font-family:monospace;padding:5px 0;outline:none;
}
.wc-style_prop_cp-alpha-field{display:flex;align-items:center;gap:2px;background:#111;border:1px solid rgba(255,255,255,0.1);border-radius:6px;padding:0 6px;transition:border-color .15s;flex-shrink:0;}
.wc-style_prop_cp-alpha-field:focus-within{border-color:rgba(0,234,255,0.5);}
.wc-style_prop_cp-alpha-num{width:26px;background:transparent;border:none;outline:none;color:rgba(255,255,255,0.85);font-size:12px;font-family:monospace;padding:5px 0;text-align:right;}
.wc-style_prop_cp-alpha-pct{font-size:12px;color:rgba(255,255,255,0.3);}

.wc-style_prop_cp-select_btn {
  display: flex;
  align-items: center;
  color:rgba(255,255,255,0.85);

  margin-left: auto; /* pushes it to the right */
  width: fit-content;

  border: 1px solid rgba(0, 234, 255, 0.25);
  border-radius: 10px;
  padding: 8px 12px;


  background: transparent;

  transition: all 0.2s ease;
}

.wc-style_prop_cp-select_btn:hover {
  background: #1d1d1d;
  border-color: rgba(0, 234, 255, 0.3);
  color:#00eaff;
}

#wb-globalPopup {
    transition: opacity 0.25s ease;
    z-index:10001;
}


/* 
.acc-wrap{background:#161616;padding:2rem;border-radius:12px;font-family:var(--font-sans);max-width:640px;margin:0 auto}
.acc-item{border:1px solid #00eaff22;border-radius:8px;margin-bottom:10px;overflow:hidden;transition:border-color .25s}
.acc-item.open{border-color:#00eaff66}
.acc-btn{width:100%;background:none;border:none;padding:1rem 1.2rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#00eaff;font-size:15px;font-weight:500;font-family:inherit;text-align:left;gap:12px}
.acc-btn:hover{background:#00eaff0d}
.acc-icon{width:20px;height:20px;flex-shrink:0;position:relative;border:1.5px solid #00eaff;border-radius:50%;transition:transform .3s,background .25s}
.acc-icon::before,.acc-icon::after{content:'';position:absolute;background:#00eaff;border-radius:2px}
.acc-icon::before{width:8px;height:1.5px;top:50%;left:50%;transform:translate(-50%,-50%)}
.acc-icon::after{width:1.5px;height:8px;top:50%;left:50%;transform:translate(-50%,-50%);transition:opacity .3s,transform .3s}
.acc-item.open .acc-icon{background:#00eaff1a;transform:rotate(90deg)}
.acc-item.open .acc-icon::after{opacity:0}
.acc-body{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1)}
.acc-body-inner{padding:0 1.2rem 1.1rem;color:#a0f0ff;font-size:14px;line-height:1.7;border-top:1px solid #00eaff18}
.acc-body-inner p{padding-top:.85rem} */

    /* remove slider when width of parent  is less*/
/* @container colorSliderParent (min-width:30px) {
  
  .style_prop_cp-slider{
    display:none;
  }
}

@container colorShowParent (min-width:100px) {
  .style_prop_cp-hex-in{
    display:none;
  }
} */

/* Property list (paddingTop/Right/Bottom/Left, border sides, etc.): a plain
   auto-fit grid instead of a forced single column. At the default panel width
   each item is already >=minmax's floor away from fitting a second column, so
   nothing changes there; once the panel is resized wider (up to the new ~40%
   cap) items that fit start sitting side by side instead of one stretching
   full width with the actual control still centered in a tiny fraction of it. */
.wc-acc-wrap{background:#161616;padding:1.5rem;border-radius:12px;font-family:sans-serif;max-width:640px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:start;gap:10px}
/* Animation/Responsive property lists reuse the same .acc-item rows straight in
   these plain containers (no .acc-wrap chrome) — give them the same auto-fit
   grid so they get the same side-by-side reflow at wider panel widths. */
#wb-animationPropList,#wb-responsivePropList{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:start;gap:10px}
.wc-acc-item{border:1px solid #00eaff22;border-radius:8px;margin-bottom:0;overflow:hidden;transition:border-color .25s,opacity .25s,box-shadow .25s}
.wc-acc-item.wc-open{border-color:#00eaff66}
/* jumped-to from the animation timeline's keyframe box — a brief glow so the
   user can find the row the click landed on */
.wc-acc-item.wc-acc-flash{border-color:#00eaff;box-shadow:0 0 0 2px #00eaff33}

.wc-acc-item.wc-inactive-style{opacity:.4;border-color:#00eaff11}
.wc-acc-item.wc-inactive-style .wc-acc-body-inner{pointer-events:none}
.wc-acc-item.wc-inactive-style .wc-acc-body-inner input,
.wc-acc-item.wc-inactive-style .wc-acc-body-inner textarea,
.wc-acc-item.wc-inactive-style .wc-acc-body-inner select,
.wc-acc-item.wc-inactive-style .wc-acc-body-inner button{pointer-events:none;cursor:not-allowed}
/* .acc-item.inactive-style .acc-header{pointer-events:none} */
.wc-acc-item.wc-inactive-style .wc-acc-cb{pointer-events:all;cursor:pointer}

.wc-acc-header{display:flex;align-items:center;padding:.6rem .9rem;gap:0;min-height:48px;cursor:pointer;user-select:none}
.wc-acc-header:hover{background:#00eaff08}

/* eye-toggle button */
.wc-acc-cb{
  flex-shrink:0;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;background:none;border:none;border-radius:4px;padding:0;
  color:rgba(255,255,255,0.45);
  transition:color .14s,background .14s;
  margin-right:4px;
}
.wc-acc-cb:hover{color:rgba(255,255,255,0.85);background:rgba(255,255,255,.06)}
.wc-acc-eye-closed{display:none}
/* hidden state — amber so it reads as "disabled/off", not invisible */
.wc-acc-cb.wc-unchecked{color:rgba(255,165,40,0.7)}
.wc-acc-cb.wc-unchecked:hover{color:rgba(255,165,40,1);background:rgba(255,165,40,.08)}
.wc-acc-cb.wc-unchecked .wc-acc-eye-open{display:none}
.wc-acc-cb.wc-unchecked .wc-acc-eye-closed{display:block}

.wc-acc-svg-icon{flex-shrink:0;width:28px;height:28px}
.wc-acc-svg-icon svg{width:28px;height:28px;display:block}
.wc-acc-color-swatch{
  display:block;width:20px;height:20px;margin:4px;border-radius:5px;
  border:1px solid rgba(255,255,255,0.18);
  background-image:
    linear-gradient(45deg,rgba(255,255,255,0.09) 25%,transparent 25%),
    linear-gradient(-45deg,rgba(255,255,255,0.09) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,rgba(255,255,255,0.09) 75%),
    linear-gradient(-45deg,transparent 75%,rgba(255,255,255,0.09) 75%);
  background-size:8px 8px;
  background-position:0 0,0 4px,4px -4px,-4px 0px;
}
.wc-acc-sep{flex-shrink:0;width:1px;height:18px;background:#00eaff30;margin:0 9px}
.wc-acc-label{flex:1;color:var(--text);font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.wc-acc-delete{flex-shrink:0;width:26px;height:26px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:5px;color:#ff6b6b;opacity:.45;transition:opacity .18s,background .18s;margin-left:6px;padding:0}
.wc-acc-delete:hover{opacity:1;background:#ff6b6b1a}

.wc-acc-info{flex-shrink:0;width:26px;height:26px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:5px;color:#00eaff;opacity:.5;transition:opacity .18s,background .18s;margin-left:6px;padding:0}
.wc-acc-info:hover{opacity:1;background:#00eaff1a}
.wc-acc-wrap.wc-narrow .wc-acc-info{display:none}

/* "open full editor" trigger — same size/hover pattern as .acc-delete */
.wc-bg-popout-btn{flex-shrink:0;width:26px;height:26px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:5px;color:#00eaff;opacity:.45;transition:opacity .18s,background .18s;margin-left:6px;padding:0}
.wc-bg-popout-btn:hover{opacity:1;background:#00eaff1a}
.wc-bg-popout-btn.wc-active{opacity:1;background:#00eaff2a}

/* In the panel, Background Color is a normal visible row; the image-layer row
   (backgroundImage, relabeled "Background") opens the popup on click (.bg-popup-row).
   The 7 dependent rows (Repeat/Size/Position/Attachment/Origin/Clip/BlendMode) are real
   .acc-item nodes that are hidden here with .bg-pop-hidden-row while they sit in the panel.
   The moment one is reparented into .bg-pop-content the selector no longer matches and it
   displays normally — no JS toggling needed on open/close. */
#wb-stylePropList .wc-bg-pop-hidden-row,
#wb-animationPropList .wc-bg-pop-hidden-row,
#wb-responsivePropList .wc-bg-pop-hidden-row,
.wc-show-css-card .wc-bg-pop-hidden-row{display:none}

/* Background-image editor — same .overlay/.popupBig modal as every other popup.
   Layout: full-height section nav on the left; main column on the right with the
   active tab's controls on top and a live preview that flex-grows into whatever
   height the controls don't use (short tabs get a big preview, not dead space).
   Needs an explicit height (not just max-height) — the flex:1 chain below has
   nothing to distribute without a definite ancestor height. */
.wc-bg-image-popup{width:min(840px,94vw);height:min(660px,88vh);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;}
.wc-bg-image-popup-body{flex:1;display:flex;flex-direction:column;padding:0;min-height:0;overflow:hidden;}
.wc-bg-pop-row{flex:1;display:flex;min-height:0}

/* left section nav — flat list separated from the content by a hairline; the active
   item gets a tint + accent bar, so it reads as navigation instead of a button pile */
.wc-bg-pop-rail{flex-shrink:0;width:158px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;padding:14px 10px;border-right:1px solid rgba(255,255,255,0.07);background:rgba(255,255,255,0.015)}
.wc-bg-pop-rail-tab{position:relative;flex-shrink:0;display:flex;flex-direction:row;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;color:rgba(255,255,255,0.5);cursor:pointer;transition:background .15s,color .15s}
.wc-bg-pop-rail-tab:hover{color:rgba(255,255,255,0.85);background:rgba(0,234,255,0.06)}
.wc-bg-pop-rail-tab.wc-active{color:#00eaff;background:rgba(0,234,255,0.1)}
.wc-bg-pop-rail-tab.wc-active::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:2px;border-radius:2px;background:#00eaff}
.wc-bg-pop-rail-icon{width:20px;height:20px;flex-shrink:0;pointer-events:none}
.wc-bg-pop-rail-icon svg{display:block;width:100%;height:100%}
.wc-bg-pop-rail-label{font-size:12px;font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;flex:1}
.wc-bg-pop-rail-tab .wc-bg-pop-rail-info{width:20px;height:20px;flex-shrink:0;margin-left:auto;opacity:0;transition:opacity .15s,background .15s,color .15s}
.wc-bg-pop-rail-tab:hover .wc-bg-pop-rail-info,
.wc-bg-pop-rail-tab.wc-active .wc-bg-pop-rail-info{opacity:.6}
.wc-bg-pop-rail-tab .wc-bg-pop-rail-info:hover{opacity:1 !important}

/* main column: controls sized to their content (scroll when tall) + growing preview */
.wc-bg-pop-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;padding:14px 16px;min-height:0}
.wc-bg-pop-content{flex:0 1 auto;min-height:0;overflow-y:auto;width:100%}

/* live combined-background preview — checkerboard (transparency) under an overlay that
   gets the live property values copied onto it; flex-grows into leftover height */
.wc-bg-preview-swatch{
  position:relative;width:100%;flex:1 1 110px;min-height:110px;
  border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  background-image:repeating-conic-gradient(#333 0% 25%,#262626 0% 50%);
  background-size:14px 14px;
  box-shadow:0 2px 12px rgba(0,0,0,0.35);
}
.wc-bg-preview-overlay{position:absolute;inset:0}
.wc-bg-preview-tag{position:absolute;top:7px;left:9px;font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:rgba(255,255,255,0.75);background:rgba(0,0,0,0.45);padding:2px 7px;border-radius:99px;pointer-events:none}

/* tab header injected by _renderBgTabHead(): section title + plain-language hint +
   (on dependent tabs) a numbered thumbnail strip of the current image layers */
.wc-bg-pop-tab-head{margin-bottom:10px}
.wc-bg-pop-tab-title-row{display:flex;align-items:center;gap:4px}
.wc-bg-pop-tab-title{font-size:14px;font-weight:600;color:#e8faff;letter-spacing:.02em}
.wc-bg-pop-tab-title-row .wc-acc-info{width:22px;height:22px;opacity:.65}
.wc-bg-pop-tab-hint{font-size:12px;color:rgba(255,255,255,0.45);margin-top:2px;line-height:1.45}
.wc-bg-pop-layerstrip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding:8px 10px;border:1px solid rgba(255,255,255,0.06);border-radius:8px;background:rgba(255,255,255,0.02)}
.wc-bg-pop-layerstrip-empty{font-size:12px;color:rgba(255,255,255,0.5)}
.wc-bg-pop-tab-link{color:#00eaff;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.wc-bg-pop-tab-link:hover{color:#6ff2ff}
.wc-bg-pop-layerstrip-item{position:relative;display:flex;cursor:pointer;border-radius:5px;transition:box-shadow .12s,transform .12s}
.wc-bg-pop-layerstrip-item .wc-bg-layer-thumb{width:56px;height:40px;transition:opacity .12s,filter .12s}
.wc-bg-pop-layerstrip-item:hover{transform:translateY(-1px)}
.wc-bg-pop-layerstrip-item:hover .wc-bg-layer-thumb{outline:1.5px solid rgba(0,234,255,0.55);outline-offset:1px}
.wc-bg-pop-layerstrip-num{position:absolute;bottom:3px;right:3px;min-width:14px;height:14px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#00131a;background:#00eaff;border-radius:4px;pointer-events:none}
/* Per-layer preview hide (numbered-thumbnail toggle): dim + desaturate the layer and drop an
   eye-off glyph over it. Purely a preview scratch state (state.previewHiddenLayers) — never
   applied to the element, always reset on reopen. */
.wc-bg-pop-layerstrip-item .wc-bg-layer-eye{display:none}
.wc-bg-pop-layerstrip-item.wc-bg-layer-hidden .wc-bg-layer-thumb{opacity:.3;filter:grayscale(1)}
.wc-bg-pop-layerstrip-item.wc-bg-layer-hidden .wc-bg-layer-eye{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.8))}
.wc-bg-pop-layerstrip-item.wc-bg-layer-hidden .wc-bg-pop-layerstrip-num{background:rgba(255,255,255,0.35);color:#000}
/* "Blend Mode needs 2+ layers" warning banner — amber, distinct from the neutral hint */
.wc-bg-pop-need2{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding:8px 10px;font-size:12px;line-height:1.45;color:#ffd9a0;border:1px solid rgba(255,176,32,0.28);border-radius:8px;background:rgba(255,176,32,0.08)}
.wc-bg-pop-need2-icon{flex:0 0 auto;width:15px;height:15px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#1a1206;background:#ffb020;border-radius:50%;line-height:1}
/* "Normal does no blending" note — cyan/info tone (not a problem, just the reason nothing
   changed). Shares the banner shape but reads as guidance, and its <b> words echo the mode
   names in the dropdown so the fix is obvious. */
.wc-bg-blend-normal-note{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding:8px 10px;font-size:12px;line-height:1.45;color:#bfeeff;border:1px solid rgba(0,234,255,0.28);border-radius:8px;background:rgba(0,234,255,0.07)}
.wc-bg-blend-normal-note b{color:#eafcff;font-weight:700}
/* "one image layer → blends onto the background color" — reassuring/positive (this IS a
   working effect), green tone so it's clearly not an error. */
.wc-bg-pop-note-ok{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding:8px 10px;font-size:12px;line-height:1.45;color:#c7f6d7;border:1px solid rgba(52,211,131,0.28);border-radius:8px;background:rgba(52,211,131,0.07)}
.wc-bg-pop-note-ok b{color:#e6fff0;font-weight:700}
.wc-bg-blend-note-icon{flex:0 0 auto;width:15px;height:15px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#04121a;background:currentColor;border-radius:50%;line-height:1}
.wc-bg-blend-normal-note .wc-bg-blend-note-icon{color:#04121a;background:#00eaff}
.wc-bg-pop-note-ok .wc-bg-blend-note-icon{color:#04140a;background:#34d383}

/* layer thumbnail chip (strip + per-chip labels) — checkerboard behind so
   transparent images and gradients read correctly */
.wc-bg-layer-thumb{position:relative;display:inline-block;width:34px;height:24px;flex-shrink:0;border-radius:5px;overflow:hidden;border:1px solid rgba(255,255,255,0.14);background-image:repeating-conic-gradient(#333 0% 25%,#262626 0% 50%);background-size:8px 8px;background-position:center}
.wc-bg-layer-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.wc-bg-layer-thumb-empty{opacity:.4}

/* The rows inside the popup are the SAME .acc-item nodes from the side panel, just
   reparented. Strip their panel chrome here: the nav + tab head already say which
   property is being edited, so the accordion header, red-arrow sub-title and
   single-option radio tick are pure noise at popup scale. Everything snaps back
   the moment the row is reparented into the panel (these selectors stop matching). */
.wc-bg-pop-content .wc-acc-item{width:100%;border:none;border-radius:0;margin:0;overflow:visible}
.wc-bg-pop-content .wc-acc-header{display:none}
.wc-bg-pop-content .wc-acc-body{max-height:none !important;overflow:visible;transition:none}
.wc-bg-pop-content .wc-acc-body-inner{display:none}
.wc-bg-pop-content .wc-parametersList_style_element{padding:0;align-items:stretch}
.wc-bg-pop-content .wc-parametersList_style_element_name{display:none}
.wc-bg-pop-content .wc-radio-item{display:none}
/* the anonymous flex wrappers between the row and the actual control are built for a
   ~190px side panel (shrink-wrapped + centered); stretch them to the popup width */
.wc-bg-pop-content .wc-parametersList_style_element>div,
.wc-bg-pop-content .wc-parametersList_style_element>div>div,
.wc-bg-pop-content .wc-parametersList_style_element>div>div>div:last-child,
.wc-bg-pop-content .wc-parametersList_style_element>div>div>div:last-child>div,
.wc-bg-pop-content .wc-parametersList_style_element>div>div>div:last-child>div>div,
.wc-bg-pop-content .wc-parametersList_style_element>div>div>div:last-child>div>div>div{width:100%;box-sizing:border-box}
.wc-bg-pop-content .wc-parametersList_style_element>div>div{justify-content:flex-start !important}

/* SIDEBAR (non-popup) Layers control. The app-wide `.wc-SingleValueStyleElement`
   rule (flex + fit-content + row + center, playground.html) laid the Add-layer button and
   the layer-card stack side by side and non-responsive. Clear fit-content/center and make
   it a vertical column — flex:1 from the base rule now governs the width, so it fills the
   panel and reflows instead of shrink-wrapping. (The popup rule below is more specific and
   still wins inside .wc-bg-pop-content, so the popup is unchanged by this.) */
.wc-SingleValueStyleElement[id$="_backgroundImageUrl_4"]{
  flex-direction:column;align-items:stretch;justify-content:flex-start;width:auto;gap:10px;
}
/* Add-layer button sits BELOW the list of layers in BOTH the sidebar and the popup: the
   button is a DOM sibling before the layer region, so pull the region up with flex order
   rather than reordering the DOM (which callers index into). */
.wc-SingleValueStyleElement[id$="_backgroundImageUrl_4"]>[id$="_layerRegion"]{order:-1}
/* "+ Add layer" in the SIDEBAR: only had the faint base .wc-SingleValueStyleElement
   border (near-invisible on the dark panel), so it read as plain floating text. Give it
   the same clear dashed accent-button look the popup already uses. Specificity (0,2,0)
   beats the base rule; this sits BEFORE the popup's own (0,2,0) add-btn rule below, so
   the popup keeps its slightly larger sizing (later, equal-specificity rule wins). */
.wc-SingleValueStyleElement[id$="_backgroundImageUrl_4_addBtn"]{
  padding:11px 0;font-size:12px;font-weight:600;color:rgba(0,234,255,0.9);
  border:1.5px dashed rgba(0,234,255,0.3);border-radius:8px;
  background:rgba(0,234,255,0.04);transition:background .15s,border-color .15s;
}
.wc-SingleValueStyleElement[id$="_backgroundImageUrl_4_addBtn"]:hover{
  background:rgba(0,234,255,0.1);border-color:rgba(0,234,255,0.6);
}

/* Layers tab: the type-7 wrapper is a bordered box in the panel — flatten it here.
   It also picks up the app-wide `.SingleValueStyleElement{display:flex;width:fit-content;
   justify-content:center}` rule (playground.html) meant for one-line inputs — that rule
   shrink-wraps AND centers this wrapper's two block children (the Add-layer button row +
   the layer-card stack), which is why they used to render as a small floating pair side by
   side instead of the button sitting full-width above a full-width card stack. Reset the
   box model back to a plain stretched column here. */
.wc-bg-pop-content .wc-SingleValueStyleElement[id$="_backgroundImageUrl_4"]{
  border:none;padding:0;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  width:100%;flex:none;gap:10px;
}
.wc-bg-pop-content .wc-SingleValueStyleElement[id$="_backgroundImageUrl_4"]:hover{border:none}
/* big, obvious one-click "Add layer" */
.wc-bg-pop-content [id$="_backgroundImageUrl_4_addBtn"]{
  padding:13px 0;font-size:13px;font-weight:600;color:rgba(0,234,255,0.9);
  border:1.5px dashed rgba(0,234,255,0.3);border-radius:8px;
  background:rgba(0,234,255,0.04);transition:background .15s,border-color .15s;
}
.wc-bg-pop-content [id$="_backgroundImageUrl_4_addBtn"]:hover{
  background:rgba(0,234,255,0.1);border-color:rgba(0,234,255,0.6);
}
/* the small "+" that adds a per-layer value chip on dependent tabs */
.wc-bg-pop-content .wc-SingleValueStyleElement[id$="_addBtn"]:not([id$="_backgroundImageUrl_4_addBtn"]){
  min-width:32px;text-align:center;margin-left:6px;
  color:rgba(0,234,255,0.85);border:1px dashed rgba(0,234,255,0.28);border-radius:6px;
  background:rgba(0,234,255,0.04);transition:background .15s,border-color .15s;
}
.wc-bg-pop-content .wc-SingleValueStyleElement[id$="_addBtn"]:not([id$="_backgroundImageUrl_4_addBtn"]):hover{
  background:rgba(0,234,255,0.09);border-color:rgba(0,234,255,0.55);
}

/* layer cards get room to breathe at popup scale, with bigger thumbnails */
.wc-bg-pop-content .wc-region-item{margin:8px 0}
.wc-bg-pop-content .wc-region-item-head{padding:9px 12px;gap:10px}
.wc-bg-pop-content .wc-region-item-heading{font-size:12px}
.wc-bg-pop-content .wc-region-item-flag img,
.wc-bg-pop-content .wc-region-item-flag>div:not(:has(svg)){width:46px !important;height:32px !important;border-radius:5px !important;object-fit:cover}

/* Per-layer labels injected by _injectBgLayerLabels() — thumbnail + "Layer N — name".
   For the radio row (Layer 1, the always-present control) this is prepended INSIDE that
   row, sitting beside the control on the same line until it wraps. For a stacked chip
   (Layer 2+) it's inserted as a sibling BEFORE .wc-region-item-head instead — that head
   row already carries a live per-layer dropdown, so cramming the label in alongside it
   read as one crowded, unpredictably-wrapping row; as its own line above the control,
   inside the same rounded card, it reads the same way Layer 1's already does. */
.wc-bg-layer-chip-label{display:flex;align-items:center;gap:6px;flex-shrink:0;font-size:12px;font-weight:600;color:rgba(0,234,255,0.75);letter-spacing:0.2px;white-space:nowrap;padding-right:10px;margin-right:4px;border-right:1px solid rgba(0,234,255,0.14)}
.wc-bg-layer-chip-label span{white-space:normal}
/* Direct child of the card (the stacked-chip case) instead of nested inside
   .wc-region-item-head — the card itself has no padding of its own (only the head row
   does), so without this the label sits flush against the card's rounded edges.
   Excludes the BlendMode pair variant, which already has its own tuned spacing below. */
.wc-region-item > .wc-bg-layer-chip-label:not(.wc-bg-layer-chip-label-pair){padding:9px 12px 6px;margin:0}
/* Blend Mode's pair label — reads as a top-to-bottom LAYER STACK: the layer whose mode
   you're setting, a "mixes into" connector, then what sits beneath it. Framed as one small
   card with the two rows aligned in a column (thumbnails line up on the left) so the
   stacking is unmistakable — instead of the old inline "thumb → thumb name" run that read
   as two loose images and an arrow. A blend mode alone never says what it blends WITH, so
   both sides are always shown. */
.wc-bg-layer-chip-label-pair{width:100%;white-space:normal;margin:0;padding:9px 11px;display:flex;flex-direction:column;align-items:stretch;gap:2px;border:1px solid rgba(255,255,255,0.09);border-radius:9px;background:rgba(255,255,255,0.025)}
.wc-bg-pair-line{display:flex;align-items:center;gap:9px;min-width:0;padding:3px 0}
.wc-bg-pair-name{flex:1;font-size:12px;font-weight:600;color:rgba(220,244,255,0.92);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wc-bg-pair-name-dim{color:rgba(210,238,255,0.62)}
/* small right-aligned role tag ("this layer" / "layer below") so each row's part in the
   stack is labelled without another sentence */
.wc-bg-pair-role{flex-shrink:0;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(0,234,255,0.7);background:rgba(0,234,255,0.1);border-radius:4px;padding:2px 6px}
.wc-bg-pair-role-dim{color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.06)}
/* connector row between the two layers — arrow + "mixes into", indented so the arrow sits
   under the thumbnails' column and the eye follows the stack downward */
.wc-bg-pair-connector{display:flex;align-items:center;gap:7px;padding-left:9px}
.wc-bg-pair-onto-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,0.42)}
.wc-bg-pair-arrow{color:rgba(0,234,255,0.7);font-size:14px;font-weight:700;line-height:1;width:16px;text-align:center;flex-shrink:0}
.wc-bg-layer-thumb-base{display:flex;align-items:center;justify-content:center;background-image:none;background:repeating-conic-gradient(rgba(255,255,255,0.06) 0% 25%,transparent 0% 50%);background-size:8px 8px}
/* Dead blend layer: bottom-most layer with a transparent background beneath it — the mode
   can't composite onto anything, so its dropdown is disabled (grayed, non-interactive) with a
   short amber explanation. Re-enables automatically once a bg color / lower layer exists. */
.wc-bg-blend-dead-hint{width:100%;white-space:normal;margin-top:6px;padding:6px 9px;font-size:12px;line-height:1.42;color:#ffcda3;border:1px solid rgba(255,176,110,0.28);border-radius:7px;background:rgba(255,150,80,0.07)}
.wc-bg-pop-content .wc-bg-blend-card.wc-bg-blend-dead .wc-style_prop_dd-trigger,
.wc-bg-pop-content .wc-bg-blend-card.wc-bg-blend-dead .wc-style_prop_dd-wrap{pointer-events:none;opacity:.4;filter:grayscale(1)}

/* ── Per-image control hide (always-visible eye toggle beside each Layer 1/Layer 2 row) ──
   Hiding does NOT remove the control — it DIMS + LOCKS it in place (.wc-bg-ctl-off below), so
   the value stays visible but greyed and non-editable. Purely a working-view state — it never
   changes the element or the published output. */
.wc-bg-ctl-hide{flex-shrink:0;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03);color:rgba(255,255,255,0.5);cursor:pointer;border-radius:6px;opacity:1;transition:opacity .15s,color .15s,background .15s,border-color .15s}
.wc-bg-ctl-hide svg{display:block;width:14px;height:14px}
.wc-bg-ctl-hide:hover{color:#cfefff;background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.2)}
.wc-bg-ctl-collapsed .wc-bg-ctl-hide,
.wc-bg-ctl-hide.wc-active{color:#00eaff;border-color:rgba(0,234,255,0.5);background:rgba(0,234,255,0.1)}
/* blend pair card: pin the toggle to the card's top-right corner (clear of the role tag) */
.wc-bg-layer-chip-label-pair{position:relative}
.wc-bg-layer-chip-label-pair>.wc-bg-ctl-hide{position:absolute;top:6px;right:6px;z-index:1}
.wc-bg-layer-chip-label-pair .wc-bg-pair-this{padding-right:26px}
/* the hidden control: dimmed + non-interactive, but STILL VISIBLE (no display toggling).
   pointer-events:none also lets the hover fall through to the parent, whose title reads
   "Hidden — click the eye to edit" (set in _injectBgLayerLabels). */
.wc-bg-ctl-off{opacity:.4 !important;filter:grayscale(.4);pointer-events:none !important;user-select:none;cursor:default}
/* a collapsed row keeps its label fully readable (you still need to see which layer it is),
   with just a touch of dim so it reads as "parked". */
.wc-bg-ctl-collapsed .wc-bg-layer-chip-label{opacity:.9}

/* ── Dependent-tab layer layout (Repeat/Size/Position/Attachment/Origin/Clip + Blend) ──
   Structural reality (verified against the live DOM): the stacked-values control renders
   Layer 2+ INSIDE Layer 1's own control wrapper — they are DOM descendants of Layer 1's
   row, not siblings. So a per-layer *box* is impossible: any frame on Layer 1 swallows the
   others (that was the "Layer 2 nested inside Layer 1" bug). Instead each layer is a
   FRAMELESS block — thumbnail + "Layer N — name" header, then its control — stacked full
   width and split by hairline dividers, so every layer looks identical and nothing reads
   as nested. .wc-bg-layer-card / .wc-bg-blend-card are just per-layer hooks here, not boxes.

   Layer 1's host (div5) is an inline flex row/center from MakeParameterBlock, so the column
   + full-width + left-align must be !important to beat the inline styles; the now-defunct
   radio tick (an empty flex wrapper) is dropped so it doesn't reserve a gap slot. */
.wc-bg-pop-content .wc-bg-layer-card:not(.wc-region-item),
.wc-bg-pop-content .wc-bg-blend-card:not(.wc-region-item){
  display:flex !important;flex-direction:column !important;align-items:stretch !important;justify-content:flex-start !important;
  gap:8px;box-sizing:border-box;width:100%;margin:0;padding:12px 0;
}
.wc-bg-pop-content .wc-bg-layer-card:not(.wc-region-item)>div:has(>.wc-radio-item),
.wc-bg-pop-content .wc-bg-blend-card:not(.wc-region-item)>div:has(>.wc-radio-item){display:none}
/* the control (Layer 1's itemrow, the last child) and its dropdown fill the full width */
.wc-bg-pop-content .wc-bg-layer-card:not(.wc-region-item)>*:last-child,
.wc-bg-pop-content .wc-bg-blend-card:not(.wc-region-item)>*:last-child{width:100%;min-width:0}
.wc-bg-pop-content .wc-bg-layer-card .wc-style_prop_dd-wrap,
.wc-bg-pop-content .wc-bg-blend-card .wc-style_prop_dd-wrap{width:100%;box-sizing:border-box}

/* Layer 2+ live in .wc-region-item cards — strip the card chrome so they match Layer 1's
   frameless block, stack full width, and separate from the layer above with a hairline. */
.wc-bg-pop-content .wc-region-item.wc-bg-layer-card,
.wc-bg-pop-content .wc-region-item.wc-bg-blend-card{
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
  border:none;border-radius:0;background:none;overflow:visible;
  margin:0;padding:14px 0 2px;border-top:1px solid rgba(255,255,255,0.09);
}
.wc-bg-pop-content .wc-region-item.wc-bg-layer-card>.wc-region-item-head,
.wc-bg-pop-content .wc-region-item.wc-bg-blend-card>.wc-region-item-head{
  background:none;border-bottom:none;padding:0;flex-wrap:wrap;
}
/* the region container (holds Layer 2+) sits inside Layer 1's control wrapper — space it
   from Layer 1's own control above */
.wc-bg-pop-content [id$="_fontFamilyRegion"]{margin-top:8px}

/* label header (thumbnail + name) — one line, left-aligned, above the control, no divider.
   (Kept for the fallback where the label lands as a direct card child; the inline rules
   below take over on the normal path where it sits on the control's own row.) */
.wc-bg-pop-content .wc-bg-layer-card>.wc-bg-layer-chip-label{border-right:none;padding:0;margin:0;flex:0 0 auto;align-self:flex-start;max-width:100%}
.wc-bg-pop-content .wc-bg-layer-card>.wc-bg-layer-chip-label>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* INLINE label (non-blend tabs): the [thumbnail + name] label sits on the SAME row as the
   control — nicer than a full-width dropdown stacked under the name. Layer 1's label goes
   into the dropdown's own trigger row (which already flex-rows [trigger][+]); Layer 2+'s
   into the region-item head (which flex-rows the mini-dropdown). Name truncates so a long
   filename never shoves the control off the row (full name stays on hover). */
.wc-bg-pop-content .wc-bg-layer-inline-row{display:flex;align-items:center;gap:10px}
.wc-bg-pop-content .wc-region-item.wc-bg-layer-card>.wc-region-item-head.wc-bg-layer-inline-head{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;padding:0}
.wc-bg-pop-content .wc-bg-layer-inline-row>.wc-bg-layer-chip-label,
.wc-bg-pop-content .wc-bg-layer-inline-head>.wc-bg-layer-chip-label{flex:0 1 auto;min-width:0;max-width:54%;border-right:none;padding:0;margin:0;align-self:center}
.wc-bg-pop-content .wc-bg-layer-inline-row>.wc-bg-layer-chip-label>span,
.wc-bg-pop-content .wc-bg-layer-inline-head>.wc-bg-layer-chip-label>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Compact control: don't stretch full-width across the popup — a Repeat/Size/etc.
   dropdown only needs room for its value, so sit it at a fixed comfortable width and
   leave the rest of the row empty. The open panel follows this width (reposition() sizes
   it to max(trigger width, 220px)). Shrinks (not grows) so it never overflows a phone. */
.wc-bg-pop-content .wc-bg-layer-inline-row>.wc-style_prop_dd-trigger{flex:0 1 190px;min-width:0;max-width:100%}
.wc-bg-pop-content .wc-bg-layer-inline-head>.wc-region-item-heading{flex:0 1 190px;min-width:0;max-width:100%}

/* Background Size's W/H rows reuse the app-wide number-param/dimension-unit/radio-item
   classes (see _buildBgSizeCustomRow) so they look like every other numeric property
   instead of a bespoke one-off — but at their default clamp()'d size, two rows push the
   layer card past .wc-bg-pop-content's available height and the second (H) row scrolls
   out of view. Same "compact variant of the shared pill" pattern already used for
   #wb-animation-prop-list and .wc-cpe-pt-field elsewhere in this file. */
.wc-bgsize-custom-row .wc-numberParamUpdate{width:26px;height:26px;font-size:14px}
.wc-bgsize-custom-row .wc-number-param-val{min-width:40px;line-height:26px;font-size:12px}
/* Unit chip: was crammed to 9px/2px so it read as a stray afterthought next to the pill.
   Size it to match the stepper's own height so [– 100 +] [px] reads as one control. */
.wc-bgsize-custom-row .wc-dimension_unit_select{margin:0;padding:0 10px;min-width:40px;height:29px;font-size:12px;border-radius:7px;border-width:1.5px}
/* Each axis's Auto/Custom mode picker (_bgMiniDropdown). The generic
   `.wc-bg-layer-card .wc-style_prop_dd-wrap{width:100%}` rule above stretched this to the
   full half-column, so it read as an oversized bar floating over a much smaller stepper.
   Pin it to a compact, left-aligned width so the dropdown and the stepper below line up.
   (Needs the .wc-bg-pop-content prefix to out-specify that width:100% rule.) */
.wc-bg-pop-content .wc-bgsize-custom-row .wc-style_prop_dd-wrap{width:auto;align-self:flex-start;max-width:100%}
.wc-bgsize-custom-row .wc-style_prop_dd-trigger{padding:7px 12px;font-size:12px;min-width:132px}
/* Kill the browser's native number-input spinner: this row already has its own −/+
   steppers (wc-numberParamUpdate), so the OS up/down arrows are a redundant, off-theme
   second control crammed between the value and the "+". Same fix already applied to
   .wc-tfb-num-input and .wc-style_prop_cp-num-in elsewhere in this file. */
.wc-bgsize-custom-row input[type=number]{-moz-appearance:textfield;appearance:textfield}
.wc-bgsize-custom-row input[type=number]::-webkit-inner-spin-button,
.wc-bgsize-custom-row input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* W/H columns sit side by side (matches the popup's generous width) but fold back
   to stacked when the row lives in the narrow sidebar accordion — same
   containerType:inline-size ancestor (MakeParameterBlock's property div) the other
   unnamed @container rules above already key off. */
@container (max-width: 260px) {
    .wc-bgsize-custom-row{flex-direction:column !important;gap:6px !important;}
}

/* Blend Mode: the numbered layer strip is redundant (each layer already names its target) */
.wc-bg-pop-content[data-active-prop="backgroundBlendMode"] .wc-bg-pop-layerstrip:not(.wc-bg-pop-layerstrip-empty){display:none}

/* "Background" row in the panel — only the dedicated popout button opens the popup
   (see _injectBgPopoutTrigger). Hide the expand toggle (no accordion body to reveal)
   and keep the default cursor so the row doesn't look clickable outside that button. */
.wc-bg-popup-row>.wc-acc-header{cursor:default}
.wc-bg-popup-row>.wc-acc-header .wc-acc-toggle{display:none}

/* Real-image option previews (_bgOptionThumbHTML, stylePlayground.js) — replaces the
   abstract cyan-square SVG on Repeat/Size/Position/Origin/Clip/Blend Mode chips with a
   small box rendered from the actual selected image, once one exists. */
.wc-bg-opt-thumb{display:inline-block;width:28px;height:20px;border-radius:3px;overflow:hidden;background-color:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);vertical-align:middle;flex-shrink:0}
.wc-style_prop_dd-flag .wc-bg-opt-thumb{width:26px;height:18px}
/* Origin/Clip — a real border+padding box so border-box/padding-box/content-box
   genuinely shifts where the tiled image starts, instead of a diagram of one. */
.bg-opt-thumb-box{box-sizing:border-box;border:3px solid rgba(0,234,255,0.45);padding:2px;background-color:rgba(0,234,255,0.05);font-size:11px;line-height:12px;font-weight:700;text-align:center;color:rgba(255,255,255,0.8);font-family:sans-serif}
.bg-opt-thumb-box-text{background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* Blend Mode — two overlapping crops of the real image, top one carrying the actual
   mix-blend-mode, mirroring the old two-circle SVG but with the real photo. */
.wc-bg-opt-thumb-blend{position:relative}
.wc-bg-opt-thumb-blend-a,.wc-bg-opt-thumb-blend-b{position:absolute;top:0;width:68%;height:100%;background-size:cover;background-position:center}
.wc-bg-opt-thumb-blend-a{left:0}
.wc-bg-opt-thumb-blend-b{right:0}

/* narrow popup (small window / mobile) — nav switches from a vertical column to a
   horizontal scroll strip above the content instead of squeezing both side by side */
@media (max-width:560px){
  .wc-bg-pop-row{flex-direction:column}
  .wc-bg-pop-rail{width:100%;flex-direction:row;overflow-x:auto;overflow-y:visible;padding:8px 10px;border-right:none;border-bottom:1px solid rgba(255,255,255,0.07)}
  .wc-bg-pop-rail-tab{flex-shrink:0}
  .wc-bg-pop-rail-tab.wc-active::before{left:10%;right:10%;top:auto;bottom:0;width:auto;height:2px}
}

.wc-acc-toggle{flex-shrink:0;width:18px;height:18px;position:relative;border:1.5px solid #00eaff;border-radius:50%;margin-left:8px;transition:transform .3s,background .25s;pointer-events:none}
.wc-acc-toggle::before,.wc-acc-toggle::after{content:'';position:absolute;background:#00eaff;border-radius:2px}
.wc-acc-toggle::before{width:7px;height:1.5px;top:50%;left:50%;transform:translate(-50%,-50%)}
.wc-acc-toggle::after{width:1.5px;height:7px;top:50%;left:50%;transform:translate(-50%,-50%);transition:opacity .25s}
.wc-acc-item.wc-open .wc-acc-toggle{background:#00eaff18;transform:rotate(90deg)}
.wc-acc-item.wc-open .wc-acc-toggle::after{opacity:0}

/* .acc-body{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1)}*/
.wc-acc-body{max-height:600px;overflow-y:auto;transition:max-height .35s cubic-bezier(.4,0,.2,1)}
/* .acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(.4,0,.2,1);
  overflow: scroll;
}
.acc-body.open {
  grid-template-rows: 1fr; */
/* } */
/* .acc-body-inner {
  overflow: auto;
  min-height: 0;
} */

.wc-acc-body::-webkit-scrollbar{width:4px}
.wc-acc-body::-webkit-scrollbar-track{background:transparent}
.wc-acc-body::-webkit-scrollbar-thumb{background:#00eaff33;border-radius:99px}
.wc-acc-body::-webkit-scrollbar-thumb:hover{background:#00eaff77}

.wc-acc-body-inner{padding:.85rem 1rem 1rem;color:#a0f0ff;font-size:12px;line-height:1.7;border-top:1px solid #00eaff18;display:flex;flex-direction:row;justify-content:flex-start;}

.wc-acc-wrap.wc-narrow .wc-acc-label{display:none}
.wc-acc-wrap.wc-narrow .wc-acc-sep{display:none}
.wc-acc-wrap.wc-narrow .wc-acc-toggle{display:none}
.wc-acc-wrap.wc-narrow .wc-acc-delete{display:none}
.wc-acc-wrap.wc-narrow .wc-acc-header{justify-content:center}
.wc-acc-wrap.wc-narrow .wc-acc-body{display:none}


.wc-radio-item {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0 8px 0 0;
    font-size:12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,255,255,0.14);
    color: transparent;
    transition: border-color .14s, color .14s, background .14s;
    user-select: none;
}

.wc-radio-item:hover {
    border-color: rgba(255,255,255,0.28);
}

.wc-radio-item.wc-active {
    background: rgba(0,234,255,0.12);
    border-color: rgba(0,234,255,0.5);
    color: #00eaff;
}


.wc-style_prop_cp-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 7px;
    width: 190px;
    box-sizing: border-box;
}

.wc-style_prop_cp-wrap.wc-inactive {
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
}

.wc-style_prop_cp-swatch {
    width: 100%;
    height: 56px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.15);
    background: rgba(0,0,0,1); 
    box-sizing: border-box;
}

.wc-style_prop_cp-hex-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.wc-style_prop_cp-hex-dot {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
    flex-shrink: 0;
    background: rgba(0,0,0,1);
}

.wc-style_prop_cp-hex-dot-wrap {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.wc-style_prop_cp-hex-dot-wrap .wc-style_prop_cp-hex-dot {
    width: 100%;
    height: 100%;
}

.wc-style_prop_cp-native-color {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.wc-style_prop_cp-hex-in {
    flex: 1;
    height: 22px;
    padding: 0 6px;
    font-family: monospace;
    font-size:12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 4px;
    background: #000;
    color: #00ffff;
    /* background: #fff;
    color: #111; */
    box-sizing: border-box;
}

.wc-style_prop_cp-hex-in:focus {
    outline: none;
    border-color: rgba(0,0,0,0.4);
}

.wc-style_prop_cp-sliders {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wc-style_prop_cp-slider-row {
    display: flex;
    align-items: center;
    gap: 4px;
    /* style_prop_cp-slider-row style_prop_cp-slider-row--g */
/* #Selector-chain-rows{ */
  /* container-type: inline-size;
  container-name: colorSliderParent;  */
/* } */
}

.wc-style_prop_cp-slider-lbl {
    font-size:12px;
    font-weight: 600;
    width: 10px;
    text-align: center;
    flex-shrink: 0;
    color: #555;
}

.wc-style_prop_cp-slider-row--r .wc-style_prop_cp-slider-lbl { color: #c0392b; }
.wc-style_prop_cp-slider-row--g .wc-style_prop_cp-slider-lbl { color: #27ae60; }
.wc-style_prop_cp-slider-row--b .wc-style_prop_cp-slider-lbl { color: #2980b9; }

.wc-style_prop_cp-slider {
    flex: 1;
    height: 4px;
    cursor: pointer;
}

.wc-style_prop_cp-num-in {
    width: 34px;
    height: 20px;
    padding: 0 3px;
    text-align: center;
    font-size:12px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 4px;
    /* background: #fff;
    color: #111; */
    background: #000;
    color: #00ffff;
    box-sizing: border-box;
    -moz-appearance: textfield;
}

.wc-style_prop_cp-num-in::-webkit-outer-spin-button,
.wc-style_prop_cp-num-in::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.wc-style_prop_cp-num-in:focus {
    outline: none;
    border-color: rgba(0,0,0,0.4);
}



/* ── card ── */
/* ── CSS selector cards ──────────────────────────────────── */
.wc-show-css-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 8px;
  overflow: hidden;
  transition: border-color .18s;
}
.wc-show-css-card:hover { border-color: var(--border-h); }

/* header strip — replaces the old floating-on-border pattern */
.wc-show-css-card .wc-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 12px;
  height: 32px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* selector name — monospace, code-like, muted */
.wc-show-css-card .wc-card-heading {
  position: static;
  flex: 1;
  padding: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: monospace;
  font-size:12px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--text-2);
  height: auto;
  line-height: normal;
  border: none;
  border-radius: 0;
  max-width: none;
  top: auto;
  left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* asset-instance scope marker — sits between the heading and action buttons,
   only rendered for selectors carrying a [data-asset-inst] scope */
.wc-card-info-icon {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--border-h);
  color: var(--text-3);
  font-family: Georgia, serif;
  font-style: italic;
  font-size:12px;
  line-height: 11px;
  text-align: center;
  cursor: help;
  position: relative;
  margin-right: 4px;
}
.wc-card-info-icon[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  right: -6px;
  background: #1a1a1a;
  color: #fff;
  font-family: inherit;
  font-style: normal;
  font-size:12px;
  font-weight: 400;
  white-space: normal;
  width: 190px;
  text-align: left;
  line-height: 1.4;
  padding: 6px 8px;
  border-radius: 5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 20;
}
.wc-card-info-icon[data-tooltip]:hover::after { opacity: 1; }

/* action buttons — right side of header, ghosted by default */
.wc-show-css-card .wc-card-actions {
  position: static;
  display: flex;
  align-items: center;
  gap: 2px;
  background: none;
  padding: 0;
  top: auto;
  right: auto;
  flex-shrink: 0;
}
.wc-show-css-card .wc-card-actions button {
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  height: 22px;
  min-width: 26px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size:12px;
  color: var(--text-3);
  transition: background .14s, border-color .14s, color .14s, transform .1s;
}
.wc-show-css-card .wc-card-actions button:active { transform: scale(0.9); }

/* Select — only color on hover/active */
.wc-show-css-card .wc-card-actions .wc-select-btn {
  font-size:12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  border-color: var(--border);
}
.wc-show-css-card .wc-card-actions .wc-select-btn:hover {
  background: rgba(0,234,255,0.08);
  border-color: rgba(0,234,255,0.35);
  color: var(--accent);
}
.wc-show-css-card.wc-card-selected .wc-card-actions .wc-select-btn {
  background: rgba(0,234,255,0.1);
  border-color: rgba(0,234,255,0.5);
  color: var(--accent);
}

/* selected card — single clean accent border, no glow theatrics */
.wc-show-css-card.wc-card-selected {
  border-color: rgba(0,234,255,0.4);
}
.wc-show-css-card.wc-card-selected .wc-card-header {
  background: rgba(0,234,255,0.04);
  border-bottom-color: rgba(0,234,255,0.15);
}
.wc-show-css-card.wc-card-selected .wc-card-heading {
  color: var(--text);
}

/* Reset — neutral until hovered */
.wc-show-css-card .wc-card-actions .wc-cancel-btn:hover {
  background: rgba(255,212,38,0.08);
  border-color: rgba(255,212,38,0.3);
  color: var(--yellow);
}

/* Delete — neutral until hovered */
.wc-show-css-card .wc-card-actions .wc-delete-btn:hover {
  background: var(--r10);
  border-color: rgba(255,68,102,0.35);
  color: var(--red);
}

/* card body */
.wc-show-css-card .wc-card-content {
  font-size:13px;
  color: var(--text);
  line-height: 1.6;
}
/* strip the dark background + padding from acc-wrap when inside a card — the card itself is the container */
.wc-show-css-card .wc-acc-wrap {
  background: none;
  padding: 0;
  border-radius: 0;
  max-width: none;
  margin: 0;
}
.wc-show-css-card .wc-card-content-info { display: none; }
















.wc-boxer {
  position: relative;
  border: 2px solid #555;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
}

.wc-boxer-title {
  position: absolute;
  top: 0;
  left: 14px;

  transform: translateY(-50%);

  padding: 0 10px;
  background: white;

  font-size:14px;
  font-weight: 600;
  color: #333;
}





/* :root {
  --bg: #0d0d0d;
  --panel: #111;
  --border: rgba(0,234,255,0.15);
  --border-h: rgba(0,234,255,0.45);
  --text: rgba(255,255,255,0.38);
  --text-hi: rgba(255,255,255,0.88);
  --accent: #00eaff;
} */
/* 
.pages_container {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  padding:10px;
  margin:10px;
  font-family: sans-serif;
  width: fit-content;
  max-width: 100%;
}

.pages_header {
  padding: 7px 12px;
  font-size:12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  user-select: none;
}

.pages_scroll {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-h) transparent;
}

.pages_scroll::-webkit-scrollbar {
  height: 3px;
}
.pages_scroll::-webkit-scrollbar-thumb {
  background: var(--border-h);
  border-radius: 2px;
}

.pages_item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.pages_item:hover {
  border-color: var(--border-h);
  background: rgba(0,234,255,0.05);
}

.pages_item.pages_item_active {
  border-color: var(--accent);
  background: rgba(0,234,255,0.08);
}

.pages_label {
  font-size:12px;
  color: var(--text-hi);
  user-select: none;
}

.pages_item.pages_item_active .pages_label {
  color: var(--accent);
}

.pages_btn_delete {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size:12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.pages_btn_delete:hover {
  color: #ff5555;
  background: rgba(255,85,85,0.15);
}

.pages_btn_add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px dashed var(--border);
  background: none;
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.pages_btn_add:hover {
  color: var(--accent);
  border-color: var(--border-h);
  background: rgba(0,234,255,0.05);
}



#pages_list{
  padding:5px;
} */


#wb-SelectorIDrow{
  display: flex;
  flex-direction: row;
  gap:5px;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 600px){
  SelectorIDrow{
    display: flex;
    flex-direction: column;
  }
} 

/* 
#selectorName_ID{
  color:var(--accent);
} */


#wb-Selector-chain-step{
 overflow-x: hidden; 
}

.wc-Selector-chain-step{
  border:1px solid var(--yellow);
  padding:5px;
  border-radius: 5px;
}

@container Selectorchainrows (max-width: 170px) {
    
  .wc-Selector-chain-step{
    
    display: flex;
    flex-direction: column;
    align-items: start;
  }
}
#wb-Selector-chain-rows{
  container-type: inline-size;
  container-name: Selectorchainrows; 
}

#wb-baseSelectorParent{
  border:1px solid rgba(0,234,255,0.18);
  background:rgba(0,234,255,0.03);
  padding:9px 10px 8px;
  border-radius:8px;
}

#wb-baseAnimationSelectorParent{
  border:1px solid rgba(0,234,255,0.18);
  background:rgba(0,234,255,0.03);
  padding:9px 10px 8px;
  border-radius:8px;
}



.wc-animationFilter-btn {
  background: none;
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: 4px;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
}
.wc-animationFilter-btn:hover {
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
}
#wb-animationFilter-popup {
  position: fixed;   /* ← must be fixed */
  display: none;     /* ← hidden by default */
  z-index:1000;     
  background: var(--bg);
  border: 0.5px solid var(--panel);
  border-radius: 6px;
  padding: 4px;
  min-width: 100px;
}

#wb-animationFilter-popup.wc-animationFilter-open {
  display: block;    /* ← this makes it visible */
}

.wc-animationFilter-item {
  padding: 5px 10px;
  font-size:12px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-text-primary);
}
.wc-animationFilter-item:hover {
  background: var(--color-background-secondary);
}
.wc-animationFilter-item.wc-animationFilter-selected {
  color: var(--color-text-info);
  background: var(--color-background-info);
}

/* #Anim-search{
  width:min(40%,200px);
} */

#wb-AnimationShowFilter{ display: flex;flex-direction: row;
  flex-wrap: wrap;   /* tags wrap if too many */
  gap: 3px;
  flex: 0 1 auto;    /* takes space but yields to input */
  overflow: hidden;
  max-width: 60%; 
}

.wc-selector_element_data-wrap{
  display: flex;
  align-items:center;
  flex-direction: row;
  flex-wrap:wrap;
  gap:4px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:7px;
  padding:3px 6px;
  transition:background .15s,border-color .15s;
}
.wc-selector_element_data-wrap:hover{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.16);}
/* #wb-CurrentAnimationList already spaces rows via its own flex `gap` —
   this margin used to stack on top of that gap and double the row spacing. */
.wc-selector_element_data-wrap + .wc-selector_element_data-wrap{margin-top:0;}


#wb-CurrentAnimationList{
  border:1.5px dashed rgba(255,255,255,0.15);
  border-radius:5px;
  padding:5px 8px;
  margin:6px 10px;
  display:flex;
  min-height:32px;
  max-height:104px;
  overflow-y:auto;
  overscroll-behavior:contain;
  gap:3px;
}
#wb-CurrentAnimationList::-webkit-scrollbar{width:4px}
#wb-CurrentAnimationList::-webkit-scrollbar-track{background:transparent}
#wb-CurrentAnimationList::-webkit-scrollbar-thumb{background:rgba(0,234,255,0.18);border-radius:2px}
#wb-CurrentAnimationList::-webkit-scrollbar-thumb:hover{background:rgba(0,234,255,0.4)}
#wb-emptyCurrentAnimationList{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  font-size:12px;
  color:rgba(255,255,255,0.35);
  text-align:center;
  gap:4px;
}
#wb-emptyCurrentAnimationList button{
  background:none;border:none;color:rgba(0,234,255,0.7);cursor:pointer;font-size:12px;padding:0;text-decoration:underline;
}
#wb-emptyCurrentAnimationList button:hover{color:#00eaff;}
.wc-anim-kf-bar-add{font-size:12px;color:rgba(0,220,200,0.6);background:rgba(0,220,200,0.08);border:1px dashed rgba(0,220,200,0.3);border-radius:4px;padding:0 5px;cursor:pointer;transition:background .12s,color .12s;user-select:none;line-height:1.6;}
.wc-anim-kf-bar-add:hover{background:rgba(0,220,200,0.18);color:#00ddc8;}
.wc-anim-kf-bar-pct-input.wc-number-param{border-color:rgba(0,220,200,0.4);}
.wc-anim-kf-bar-confirm{cursor:pointer;color:#00ddc8;font-size:14px;padding:0 2px;}
/* ═══════════════════════════════════════════════════════════════
   DOM TREE PANEL
   One card: header · search · breadcrumb · viewport · legend · controls.
   The card owns the borders so the rows read as one component instead of
   a stack of loose strips.
═══════════════════════════════════════════════════════════════ */
.wc-dom-panel{
  display:flex;flex-direction:column;
  flex:1 1 auto;
  border:1px solid rgba(255,255,255,0.09);
  border-radius:10px;
  background:rgba(255,255,255,0.018);
  /* deliberately NOT overflow:hidden — that would make min-height:auto resolve
     to 0 and let a short sidebar crush the card instead of scrolling it.
     The first/last rows round their own corners instead. */
}
/* inside the float window the card fills the whole body */
#wb-dom_popup_body>.wc-dom-panel{border:none;border-radius:0;background:transparent;min-height:0;}

/* ── Controls ──────────────────────────────────────────────── */
#wb-dom_controls{
  display:flex;flex-direction:column;gap:8px;
  border-top:1px solid rgba(255,255,255,0.07);
  border-radius:0 0 9px 9px;
  background:rgba(0,0,0,0.22);
  padding:9px 10px 11px;
  flex-shrink:0;
}
#wb-dom_popup_body #wb-dom_controls{border-radius:0;}
.wc-dom-row{display:flex;align-items:flex-start;gap:6px;}
.wc-dom-row-primary{gap:6px;}
/* Move row: wide "Move to…" + two square ↑/↓ nudges, all the same height */
.wc-dom-row-move{align-items:stretch;}
.wc-dom-nudge{width:34px;height:auto;flex:0 0 34px;}
.wc-dom-nudge:active{transform:scale(0.92);}
/* Can't apply right now — dimmed but still clickable (the op toasts why) */
.wc-dom_btn.wc-dom-btn-off{opacity:.32;border-color:rgba(255,255,255,0.1);color:rgba(255,255,255,0.45);background:transparent;}
.wc-dom_btn.wc-dom-btn-off:hover{opacity:.55;background:transparent;}
.wc-dom-moveto-btn kbd{
  margin-left:4px;padding:1px 5px;border-radius:4px;
  font:600 10px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  border:1px solid rgba(0,234,255,0.3);color:rgba(0,234,255,0.7);background:rgba(0,234,255,0.06);
}

/* ── "Move to…" outline picker (_domMovePickerOpen) ─────────── */
.wc-dom-mv-ov{
  position:fixed;inset:0;z-index:9620;
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  background:rgba(6,8,12,0.38);
  /* appended to <body>, outside #wb-root, so it doesn't inherit the chrome font */
  font-family:var(--font-sans,sans-serif);
  user-select:none;
}
/* canvas outline of the hovered row's element (a box, never a class on the element) */
.wc-dom-mv-hl{
  position:absolute;pointer-events:none;
  border:2px solid #00eaff;border-radius:3px;
  background:rgba(0,234,255,0.08);
  box-shadow:0 0 0 3px rgba(0,234,255,0.18);
  transition:left .08s,top .08s,width .08s,height .08s;
}
.wc-dom-mv-box{
  position:relative;
  display:flex;flex-direction:column;
  width:min(440px,100%);max-height:min(640px,82vh);
  background:#16171d;color:rgba(255,255,255,0.82);
  border:1px solid rgba(0,234,255,0.22);border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,0.6);
  overflow:hidden;
}
.wc-dom-mv-hd{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 12px 10px 14px;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.wc-dom-mv-title{font-size:15px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wc-dom-mv-title b{color:#00eaff;font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;}
.wc-dom-mv-x{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:7px;cursor:pointer;
  border:1px solid transparent;background:transparent;color:rgba(255,255,255,0.55);
}
.wc-dom-mv-x:hover{background:rgba(255,255,255,0.08);color:#fff;}
.wc-dom-mv-search{
  display:flex;align-items:center;gap:7px;
  margin:10px 12px 6px;padding:0 9px;
  border:1px solid rgba(255,255,255,0.1);border-radius:8px;
  background:rgba(255,255,255,0.03);color:rgba(255,255,255,0.4);
}
.wc-dom-mv-search:focus-within{border-color:rgba(0,234,255,0.5);}
.wc-dom-mv-search input{
  flex:1;min-width:0;height:30px;border:none;outline:none;background:transparent;
  color:#fff;font-size:14px;
}
.wc-dom-mv-list{flex:1 1 auto;min-height:120px;overflow:auto;padding:4px 6px 8px;}
.wc-dom-mv-row{
  position:relative;
  display:flex;align-items:center;gap:6px;
  min-height:30px;padding:2px 6px 2px calc(4px + var(--d,0) * 14px);
  border-radius:6px;font-size:14px;
}
.wc-dom-mv-row:hover,.wc-dom-mv-row.is-active{background:rgba(255,255,255,0.05);}
.wc-dom-mv-row.is-root{color:rgba(255,255,255,0.6);}
.wc-dom-mv-row.is-moving{
  background:rgba(0,234,255,0.1);
  box-shadow:inset 0 0 0 1px rgba(0,234,255,0.35);
  cursor:grab;
}
.wc-dom-mv-row.is-moving:active{cursor:grabbing;}
.wc-dom-mv-tw{
  flex:0 0 16px;width:16px;height:16px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:rgba(255,255,255,0.4);cursor:pointer;border-radius:4px;
}
button.wc-dom-mv-tw:hover{background:rgba(255,255,255,0.1);color:#fff;}
.wc-dom-mv-tw svg{transition:transform .12s;}
.wc-dom-mv-tw.is-open svg{transform:rotate(90deg);}
.wc-dom-mv-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;}
.wc-dom-mv-dot.is-asset{border-radius:2px;}
.wc-dom-mv-lbl{
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;
  color:rgba(255,255,255,0.5);
}
.wc-dom-mv-lbl b{font-weight:600;color:rgba(255,255,255,0.88);}
.wc-dom-mv-row.is-moving .wc-dom-mv-lbl b{color:#00eaff;}
.wc-dom-mv-count{
  flex-shrink:0;padding:0 5px;border-radius:8px;
  font-size:13px;line-height:15px;color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.07);
}
.wc-dom-mv-snip{
  flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:14px;color:rgba(255,255,255,0.32);
}
.wc-dom-mv-acts{flex-shrink:0;display:flex;gap:3px;visibility:hidden;}
.wc-dom-mv-row:hover .wc-dom-mv-acts,
.wc-dom-mv-row.is-active .wc-dom-mv-acts,
.wc-dom-mv-row.is-moving .wc-dom-mv-acts{visibility:visible;}
.wc-dom-mv-list.is-dragging .wc-dom-mv-acts{visibility:hidden;}
.wc-dom-mv-acts button{
  height:22px;padding:0 7px;border-radius:5px;cursor:pointer;
  font-size:14px;font-weight:500;
  border:1px solid rgba(0,234,255,0.3);background:rgba(0,234,255,0.07);color:rgba(0,234,255,0.9);
}
.wc-dom-mv-acts button:hover{background:rgba(0,234,255,0.2);border-color:#00eaff;color:#fff;}
.wc-dom-mv-acts button:disabled{
  cursor:not-allowed;opacity:.35;
  border-color:rgba(255,255,255,0.12);background:transparent;color:rgba(255,255,255,0.5);
}
.wc-dom-mv-moving{
  display:inline-flex;align-items:center;gap:4px;
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(0,234,255,0.8);
}
/* drag-drop indicators */
.wc-dom-mv-row.drop-before::before,
.wc-dom-mv-row.drop-after::after{
  content:"";position:absolute;left:calc(4px + var(--d,0) * 14px);right:6px;height:2px;
  background:#00eaff;border-radius:2px;box-shadow:0 0 6px #00eaff;pointer-events:none;
}
.wc-dom-mv-row.drop-before::before{top:-1px;}
.wc-dom-mv-row.drop-after::after{bottom:-1px;}
.wc-dom-mv-row.drop-inside{background:rgba(0,234,255,0.14);box-shadow:inset 0 0 0 1.5px #00eaff;}
.wc-dom-mv-empty{padding:18px;text-align:center;color:rgba(255,255,255,0.4);font-size:14px;}
.wc-dom-mv-ft{
  flex-shrink:0;
  padding:9px 14px;border-top:1px solid rgba(255,255,255,0.07);
  background:rgba(0,0,0,0.2);
  font-size:14px;line-height:1.4;color:rgba(255,255,255,0.55);
  min-height:36px;
}
.wc-dom-mv-ft b{color:rgba(0,234,255,0.85);font-weight:600;}
.wc-dom-mv-ft span{color:rgba(255,255,255,0.3);margin-left:4px;}
@media (max-width:480px){
  .wc-dom-mv-ov{padding:10px;align-items:flex-end;}
  .wc-dom-mv-box{max-height:86vh;}
  .wc-dom-mv-snip{display:none;}
}

/* ── Drag & drop in the tree (_domDnDTrack) — all fixed, pointer-events:none
   so elementFromPoint always sees the node under the cursor ─────────────── */
.wc-dom-dnd-ghost{
  position:fixed;z-index:9650;pointer-events:none;
  max-width:320px;padding:6px 10px;border-radius:8px;
  background:#16171d;border:1px solid rgba(0,234,255,0.45);
  box-shadow:0 10px 28px rgba(0,0,0,0.55);
  font:500 11.5px/1.4 var(--font-sans,sans-serif);color:rgba(255,255,255,0.85);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wc-dom-dnd-ghost b{color:#00eaff;font:600 11px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.wc-dom-dnd-ghost small{display:block;font-size:13px;color:rgba(0,234,255,0.6);}
.wc-dom-dnd-ghost.is-bad{border-color:rgba(255,95,95,0.55);color:rgba(255,190,190,0.9);}
.wc-dom-dnd-ind{position:fixed;z-index:9649;pointer-events:none;}
.wc-dom-dnd-ind.is-bar{background:#00eaff;border-radius:3px;box-shadow:0 0 10px #00eaff;}
.wc-dom-dnd-ind.is-ring,
.wc-dom-dnd-ind.is-box{border:2px dashed #00eaff;background:rgba(0,234,255,0.12);box-shadow:0 0 14px rgba(0,234,255,0.35);}
.wc-dom-dnd-ind.is-ring{border-radius:50%;}
.wc-dom-dnd-ind.is-box{border-radius:8px;}
.wc-dom-dnd-hl{
  position:fixed;z-index:9648;pointer-events:none;
  border:2px solid #00eaff;border-radius:3px;
  background:rgba(0,234,255,0.08);box-shadow:0 0 0 3px rgba(0,234,255,0.18);
}
body.wc-dom-dnd-on,body.wc-dom-dnd-on *{cursor:grabbing !important;user-select:none !important;}
#wb-dom_svg .wc-dom_node.wc-dom-dnd-src{opacity:.3;stroke-dasharray:4 3;}

/* Base button */
.wc-dom_btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:6px 10px;
  font-size:12px;font-weight:500;
  border:1px solid rgba(255,255,255,0.13);
  border-radius:7px;
  background:rgba(255,255,255,0.03);
  color:rgba(255,255,255,0.6);
  cursor:pointer;
  position:relative;
  transition:background .14s,border-color .14s,color .14s;
  white-space:nowrap;
}
/* icon-only square: nav arrows + move arrows */
.wc-dom_ico{width:26px;height:25px;padding:0;flex-shrink:0;}
/* labelled buttons in the primary row split the width evenly */
.wc-dom_btn_grow{flex:1 1 0;min-width:0;}
.wc-dom_btn svg{flex-shrink:0;}
.wc-dom_btn:hover{background:rgba(255,255,255,0.08);color:#fff;border-color:rgba(255,255,255,0.3);}
.wc-dom_btn:active{transform:translateY(1px);}
.wc-dom_btn_act{border-color:rgba(0,234,255,0.28);color:rgba(0,234,255,0.85);background:rgba(0,234,255,0.06);}
.wc-dom_btn_act:hover{background:#00eaff1f;border-color:#00eaff;color:#00eaff;}
.wc-dom_btn_nav{border-color:rgba(140,180,255,0.2);color:rgba(140,180,255,0.75);background:rgba(140,180,255,0.05);}
.wc-dom_btn_nav:hover{background:rgba(140,180,255,0.14);border-color:rgba(140,180,255,0.7);color:#a0c8ff;}
.wc-ctx-delete{color:rgba(255,100,100,0.85);}
.wc-ctx-delete:hover{background:rgba(255,60,60,0.12);color:#ff6060;}

/* Custom tooltip, same look as the main .toolbar buttons.
   .wc-dom_btn opens upward (bottom controls); .wc-dom-tip opens downward
   (header + viewport overlay, where there is no room above). */
.wc-dom_btn[data-tooltip]::after,
.wc-dom-tip[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  background:#16161c;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 6px 20px rgba(0,0,0,0.55);
  color:#fff;
  font-size:12px;
  font-weight:400;
  line-height:1.35;
  white-space:normal;
  width:132px;
  text-align:center;
  padding:5px 8px;
  border-radius:6px;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s;
  z-index:30;
}
.wc-dom-tip{position:relative;}
.wc-dom-tip[data-tooltip]::after{bottom:auto;top:calc(100% + 6px);}
.wc-dom_btn[data-tooltip]:hover::after,
.wc-dom-tip[data-tooltip]:hover::after{opacity:1;}
.wc-dom-tip:disabled::after{display:none;}

/* ── Header ────────────────────────────────────────────────── */
.wc-dom-header{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  background:rgba(255,255,255,0.022);
  flex-shrink:0;
}
.wc-dom-panel>.wc-dom-header{border-radius:9px 9px 0 0;}
#wb-dom_popup_body .wc-dom-header{border-radius:0;}
.wc-dom-hd-title{display:flex;align-items:center;gap:6px;min-width:0;color:rgba(0,234,255,0.65);}
.wc-dom-hd-title svg{flex-shrink:0;}
.wc-dom-header .wc-right_heading{
  margin:0;font-size:14px;font-weight:600;
  color:rgba(255,255,255,0.62);
  letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;   /* "DOM Tree" used to wrap to two lines in the sidebar */
}
.wc-dom-hd-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.wc-dom-hd-sep{width:1px;height:14px;background:rgba(255,255,255,0.12);margin:0 2px;}
.wc-dom-hd-btn{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:6px;
  color:rgba(255,255,255,0.45);
  cursor:pointer;
  transition:background .14s,border-color .14s,color .14s;
  flex-shrink:0;
}
.wc-dom-hd-btn:hover:not(:disabled){background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.3);color:#fff;}
.wc-dom-hd-undo{border-color:rgba(255,200,80,0.2);color:rgba(255,200,80,0.6);}
.wc-dom-hd-undo:hover:not(:disabled){background:rgba(255,200,80,0.1);border-color:rgba(255,200,80,0.7);color:#ffc850;}
.wc-dom-hd-btn:disabled{cursor:default;}

/* ── Breadcrumb row (a real row now — it used to float over the tree) ── */
#wb-dom_info{
  display:flex;align-items:center;
  flex-shrink:0;
  font-size:12px;
  font-family:'Courier New',monospace;
  color:rgba(255,255,255,0.6);
  background:rgba(0,0,0,0.25);
  border-bottom:1px solid rgba(255,255,255,0.07);
  padding:5px 10px;
  white-space:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
}
#wb-dom_info::-webkit-scrollbar{display:none;}
#wb-dom_info:empty{display:none;}
.wc-dom-info-tag{color:#00eaff;}
/* Breadcrumb ancestor trail inside #dom_info */
.wc-dom-crumb{cursor:pointer;color:rgba(255,255,255,0.5);transition:color .12s;border-radius:3px;padding:1px 2px;}
.wc-dom-crumb:hover{color:#00eaff;background:rgba(0,234,255,0.1);}
.wc-dom-crumb-cur,.wc-dom-crumb-cur:hover{color:#00eaff;cursor:default;background:transparent;font-weight:700;}
.wc-dom-crumb-sep{color:rgba(255,255,255,0.22);margin:0 3px;}
.wc-dom-crumb-count{color:rgba(255,255,255,0.35);}

/* ── Search row ────────────────────────────────────────────── */
.wc-dom-search-row{
  display:flex;align-items:center;gap:6px;
  padding:7px 10px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  flex-shrink:0;
}
.wc-dom-search-row>svg{flex-shrink:0;color:rgba(255,255,255,0.35);}
#wb-dom_search{
  flex:1;min-width:0;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:6px;
  color:#fff;
  font-size:12px;
  font-family:'Courier New',monospace;
  padding:5px 8px;
  outline:none;
  transition:border-color .14s,background .14s;
}
#wb-dom_search:focus{border-color:rgba(0,234,255,0.45);background:rgba(0,234,255,0.05);}
#wb-dom_search::placeholder{color:rgba(255,255,255,0.28);}
#wb-dom_search_count{
  font-size:14px;font-weight:700;color:#00eaff;
  font-family:'Courier New',monospace;white-space:nowrap;flex-shrink:0;
  background:rgba(0,234,255,0.12);border-radius:999px;padding:2px 6px;
}
#wb-dom_search_count:empty{display:none;}

/* ── Viewport overlays: zoom cluster + hint ────────────────── */
#wb-dom_viewport:focus{outline:none;}
#wb-dom_viewport:focus-visible{outline:1px solid rgba(0,234,255,0.3);outline-offset:-1px;}
.wc-dom-vp-tools{
  position:absolute;top:8px;right:8px;
  display:flex;align-items:center;gap:2px;
  padding:2px;
  background:rgba(10,10,14,0.72);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:7px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:.45;
  transition:opacity .18s;
  z-index:4;
}
#wb-dom_viewport:hover .wc-dom-vp-tools,
.wc-dom-vp-tools:focus-within{opacity:1;}
.wc-dom-vp-btn,.wc-dom-vp-zoom{
  display:flex;align-items:center;justify-content:center;
  height:20px;
  background:transparent;border:none;border-radius:5px;
  color:rgba(255,255,255,0.6);
  cursor:pointer;
  transition:background .14s,color .14s;
}
.wc-dom-vp-btn{width:22px;}
.wc-dom-vp-zoom{
  min-width:38px;padding:0 4px;
  font-size:14px;font-weight:700;font-family:'Courier New',monospace;
  color:rgba(255,255,255,0.45);
  border-left:1px solid rgba(255,255,255,0.08);
  border-right:1px solid rgba(255,255,255,0.08);
}
.wc-dom-vp-btn:hover,.wc-dom-vp-zoom:hover{background:rgba(0,234,255,0.14);color:#00eaff;}
/* Hint strip: teaches the interactions once, then only on hover */
#wb-dom_hint{
  position:absolute;
  left:0;right:0;bottom:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;
  padding:5px 8px;
  font-size:14px;
  color:rgba(255,255,255,0.34);
  background:linear-gradient(to top,rgba(9,9,12,0.92),rgba(9,9,12,0));
  pointer-events:none;
  transition:opacity .25s;
  z-index:3;
}
#wb-dom_hint b{color:rgba(255,255,255,0.6);font-weight:600;}
#wb-dom_viewport.wc-dom-vp-used #wb-dom_hint{opacity:0;}
#wb-dom_viewport.wc-dom-vp-used:hover #wb-dom_hint{opacity:1;}

/* Floating DOM tree popup — translucent so canvas elements stay visible behind it */
#wb-dom_popup{
  position:fixed;
  display:none;
  flex-direction:column;
  width:520px;
  height:640px;
  min-width:300px;
  min-height:340px;
  max-width:94vw;
  max-height:90vh;
  background:rgba(13,13,18,0.82);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  border:1px solid rgba(0,234,255,0.25);
  border-radius:10px;
  box-shadow:0 18px 60px rgba(0,0,0,0.65),0 0 0 1px rgba(0,234,255,0.05);
  z-index:9000;
  resize:both;
  overflow:hidden;
}
.wc-dom-popup-hd{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;
  cursor:grab;
  user-select:none;
  touch-action:none;
  border-bottom:1px solid rgba(255,255,255,0.08);
  background:rgba(0,234,255,0.05);
  color:rgba(255,255,255,0.6);
  flex-shrink:0;
}
.wc-dom-popup-hd:active{cursor:grabbing;}
.wc-dom-popup-title{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(0,234,255,0.85);font-weight:600;}
.wc-dom-popup-hint{font-size:12px;color:rgba(255,255,255,0.3);margin-left:auto;white-space:nowrap;}
.wc-dom-popup-close{
  width:24px;height:24px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:6px;
  color:rgba(255,255,255,0.45);
  cursor:pointer;
  transition:background .14s,border-color .14s,color .14s;
}
.wc-dom-popup-close:hover{background:rgba(0,234,255,0.1);border-color:rgba(0,234,255,0.5);color:#00eaff;}
#wb-dom_popup_body{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;}
/* inside the popup the viewport fills whatever space the user resizes to */
#wb-dom_popup_body>.wc-dom-panel{flex:1;min-height:0;}
#wb-dom_popup_body #wb-dom_viewport{flex:1;height:auto;min-height:0;}
/* placeholder shown in the docked panel while the tree floats */
#wb-dom_panel_placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  margin:8px;padding:34px 12px;
  color:rgba(255,255,255,0.4);font-size:12px;text-align:center;
  border:1px dashed rgba(255,255,255,0.15);border-radius:8px;
}
#wb-dom_panel_placeholder button{
  background:rgba(0,234,255,0.08);
  border:1px solid rgba(0,234,255,0.35);
  border-radius:6px;
  color:#00eaff;
  font-size:12px;
  padding:6px 14px;
  cursor:pointer;
  transition:background .14s;
}
#wb-dom_panel_placeholder button:hover{background:rgba(0,234,255,0.18);}

/* ── Legend: collapsed by default (open it and it was a third of the panel) ── */
.wc-dom-legend-box{
  border-top:1px solid rgba(255,255,255,0.07);
  background:rgba(0,0,0,0.15);
  flex-shrink:0;
}
.wc-dom-legend-box>summary{
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;
  font-size:14px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(255,255,255,0.4);
  cursor:pointer;
  list-style:none;
  user-select:none;
  transition:color .14s,background .14s;
}
.wc-dom-legend-box>summary::-webkit-details-marker{display:none;}
.wc-dom-legend-box>summary:hover{color:rgba(255,255,255,0.75);background:rgba(255,255,255,0.03);}
.wc-dom-legend-chev{flex-shrink:0;opacity:.6;transition:transform .18s;}
.wc-dom-legend-box[open]>summary .wc-dom-legend-chev{transform:rotate(90deg);}
/* colour strip stands in for the full legend while it's collapsed */
.wc-dom-legend-peek{display:inline-flex;align-items:center;gap:3px;margin-left:auto;}
.wc-dom-legend-peek i{width:7px;height:7px;border-radius:50%;display:inline-block;opacity:.85;}
.wc-dom-legend-box[open] .wc-dom-legend-peek{display:none;}
.wc-dom-legend{
  display:flex;flex-wrap:wrap;gap:5px 10px;
  padding:2px 10px 9px;
  font-size:14px;color:rgba(255,255,255,0.65);
}
.wc-dom-legend-item{display:inline-flex;align-items:center;gap:4px;}
.wc-dom-legend-item i{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;}
/* Export button */
#wb-exportBtn{margin-left:4px;}
/* Selector active state for responsive panel */
.wc-adp-sel-clickable{cursor:pointer;transition:background .1s;}

/* ═══════════════════════════════════
   LAYOUT PANEL — context badge
═══════════════════════════════════ */
.wc-layout-ctx-row{
  display:flex;align-items:center;gap:5px;
  padding:2px 0 6px;font-size:12px;
  font-family:Courier New,monospace;
  overflow:hidden;
}
.wc-layout-ctx-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
  transition:background .2s,box-shadow .2s;
}
.wc-layout-ctx-label{
  font-size:12px;letter-spacing:.06em;opacity:.75;cursor:pointer;flex-shrink:0;
  transition:color .2s;
}
.wc-layout-ctx-label:hover{opacity:1;}
.wc-layout-ctx-sep{opacity:.18;margin:0 2px;}
#wb-layout-sel-lbl{
  flex:1;opacity:.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12px;font-family:Courier New,monospace;
}
/* context states */
.wc-layout-ctx-row.wc-lctx-design .wc-layout-ctx-dot{background:var(--neo1);box-shadow:0 0 5px var(--neo1);}
.wc-layout-ctx-row.wc-lctx-design .wc-layout-ctx-label{color:var(--neo1);}
.wc-layout-ctx-row.wc-lctx-anim .wc-layout-ctx-dot{background:var(--neo3);box-shadow:0 0 5px var(--neo3);}
.wc-layout-ctx-row.wc-lctx-anim .wc-layout-ctx-label{color:var(--neo3);}
.wc-layout-ctx-row.wc-lctx-resp .wc-layout-ctx-dot{background:var(--neo2);box-shadow:0 0 5px var(--neo2);}
.wc-layout-ctx-row.wc-lctx-resp .wc-layout-ctx-label{color:var(--neo2);}
.wc-layout-ctx-row.wc-lctx-sel .wc-layout-ctx-dot{background:#bf00ff;box-shadow:0 0 5px #bf00ff;}
.wc-layout-ctx-row.wc-lctx-sel .wc-layout-ctx-label{color:#bf00ff;}

/* ═══════════════════════════════════
   DESIGN PANEL — context / target bar
═══════════════════════════════════ */
#wb-ds-target-bar,#wb-ri-target-bar,#wb-tfb-target-bar,#wb-cp-target-bar{
  display:flex;flex-direction:column;gap:4px;
  padding:5px 6px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  margin-bottom:5px;
}
/* primary context tabs: what you're editing (base / motion / breakpoints) */
.wc-ctx-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;}
/* scope sub-row: where the edit lands — only shown in the Design context */
.wc-scope-row{display:flex;align-items:center;gap:5px;}
.wc-scope-row .wc-scope-lbl{
  font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(255,255,255,0.3);flex:none;
}
.wc-scope-row .wc-scope-btns{display:grid;grid-template-columns:1fr 1fr;gap:3px;flex:1;}
/* plain-language echo of the current target, so modes are never invisible */
.wc-ctx-echo{
  font-size:11px;line-height:1.35;color:rgba(255,255,255,0.42);
  padding:0 1px;
}
.wc-ctx-echo b{color:rgba(255,255,255,0.72);font-weight:600;}
.wc-ds-mode-btn{
  height:22px;background:transparent;
  border:1px solid rgba(255,255,255,0.08);border-radius:4px;
  color:rgba(255,255,255,0.38);font-size:12px;font-family:inherit;
  cursor:pointer;letter-spacing:.04em;text-transform:uppercase;
  transition:border-color .12s,color .12s,background .12s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wc-ds-mode-btn:hover{border-color:rgba(0,234,255,0.3);color:rgba(0,234,255,0.7);}
.wc-ds-mode-btn.wc-active{background:rgba(0,234,255,0.1);border-color:rgba(0,234,255,0.4);color:#00eaff;}
.wc-ds-mode-btn.wc-active-anim{background:rgba(255,45,120,0.1);border-color:rgba(255,45,120,0.4);color:#ff2d78;}
.wc-ds-mode-btn.wc-active-resp{background:rgba(0,255,136,0.08);border-color:rgba(0,255,136,0.35);color:#00ff88;}

#wb-rs .wc-Animation-Selector-dd-wrap,
#wb-ri .wc-Animation-Selector-dd-wrap.wc-ri-sel-dd,
#wb-layoutToolContext .wc-Animation-Selector-dd-wrap{
  margin:2px 0 5px;
}
#wb-ri-sel-dd,#wb-ds-sel-dd,#wb-tfb-sel-dd{padding:0;}

/* ═══════════════════════════════════
   TRANSFORM BUILDER — number input
═══════════════════════════════════ */
#wb-layoutToolContext .wc-tfb-num-input{
  width:54px;background:rgba(0,234,255,0.05);
  border:1px solid rgba(0,234,255,0.2);border-radius:5px;
  color:#00eaff;font-size:12px;font-family:var(--font-mono,monospace);
  padding:3px 5px;text-align:center;outline:none;
  -moz-appearance:textfield;appearance:textfield;
  transition:border-color .12s,background .12s;
}
#wb-layoutToolContext .wc-tfb-num-input::-webkit-inner-spin-button,
#wb-layoutToolContext .wc-tfb-num-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
#wb-layoutToolContext .wc-tfb-num-input:focus{border-color:rgba(0,234,255,0.5);background:rgba(0,234,255,0.08);}
#wb-layoutToolContext .wc-tfb-num-input:disabled{opacity:.35;pointer-events:none;}

/* create-anim button in transform */
#wb-tfb-create-anim{
  display:none;flex-direction:column;align-items:center;gap:6px;
  padding:8px;background:rgba(255,255,255,0.02);
  border:1px dashed rgba(255,255,255,0.1);border-radius:8px;
  margin-top:4px;
}
#wb-tfb-create-anim-btn{
  height:26px;padding:0 12px;
  background:rgba(255,45,120,0.12);border:1px solid rgba(255,45,120,0.4);
  border-radius:5px;color:#ff2d78;font-size:12px;font-family:inherit;
  cursor:pointer;transition:background .12s,border-color .12s;
}
#wb-tfb-create-anim-btn:hover{background:rgba(255,45,120,0.2);}
#wb-tfb-anim-sel-row{
  display:flex;align-items:center;gap:6px;margin-bottom:4px;
}
#wb-tfb-anim-select{
  flex:1;height:26px;background:#0f0f0f;
  border:1px solid rgba(255,45,120,0.3);border-radius:5px;
  color:rgba(255,255,255,0.75);font-size:12px;padding:0 6px;outline:none;
}

/* ═══════════════════════════════════
   TRANSFORM BUILDER — scoped to Context tab
═══════════════════════════════════ */
#wb-layoutToolContext{
  --surface:#111113;--surface2:#18181c;--surface3:#1e1e24;
  --border:rgba(255,255,255,0.06);--border-a:rgba(0,234,255,0.3);
  --tx:rgba(255,255,255,0.85);--tx-dim:rgba(255,255,255,0.35);--tx-dim2:rgba(255,255,255,0.18);
  --font-mono:'JetBrains Mono',monospace;
  --c1:var(--neo1);--c2:var(--neo2);--c3:var(--neo3);
  color:var(--tx);font-size:13px;
}
#wb-layoutToolContext .wc-tfb-app{display:flex;flex-direction:column;gap:12px;padding:8px 0 24px;}

/* topbar */
#wb-layoutToolContext .wc-topbar{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--border);}
#wb-layoutToolContext .wc-topbar-title{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--tx-dim);}
#wb-layoutToolContext .wc-topbar-right{display:flex;align-items:center;gap:8px;}
#wb-layoutToolContext .wc-topbar-count{font-size:12px;font-family:var(--font-mono);color:var(--c1);background:rgba(0,234,255,0.08);border:1px solid rgba(0,234,255,0.2);border-radius:20px;padding:2px 9px;display:none;}
#wb-layoutToolContext .wc-topbar-count.wc-on{display:block;}
#wb-layoutToolContext .wc-reset-all-btn{font-size:12px;font-weight:600;color:var(--tx-dim2);background:none;border:1px solid var(--border);border-radius:6px;padding:3px 9px;cursor:pointer;transition:color .15s,border-color .15s;}
#wb-layoutToolContext .wc-reset-all-btn:hover{color:var(--c3);border-color:rgba(255,45,120,0.35);}

/* backface row */
#wb-layoutToolContext .wc-backface-row{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 12px;}
#wb-layoutToolContext .wc-bf-label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-dim);white-space:nowrap;}
#wb-layoutToolContext .wc-bf-toggle{display:flex;gap:5px;flex:1;}
#wb-layoutToolContext .wc-bf-btn{flex:1;height:28px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--tx-dim);font-size:12px;font-weight:600;cursor:pointer;transition:border-color .12s,background .12s,color .12s;display:flex;align-items:center;justify-content:center;gap:4px;}
#wb-layoutToolContext .wc-bf-btn:hover{border-color:rgba(255,255,255,0.15);color:var(--tx);}
#wb-layoutToolContext .wc-bf-btn.wc-active-vis{border-color:var(--c1);background:rgba(0,234,255,0.1);color:var(--c1);}
#wb-layoutToolContext .wc-bf-btn.wc-active-hid{border-color:var(--c3);background:rgba(255,45,120,0.1);color:var(--c3);}

/* transform-origin */
#wb-layoutToolContext .wc-origin-block{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;}
#wb-layoutToolContext .wc-origin-head{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;user-select:none;transition:background .12s;}
#wb-layoutToolContext .wc-origin-head:hover{background:rgba(255,255,255,0.02);}
#wb-layoutToolContext .wc-origin-head-dot{width:6px;height:6px;border-radius:50%;background:#ffdc00;box-shadow:0 0 6px #ffdc00;flex-shrink:0;}
#wb-layoutToolContext .wc-origin-head-title{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-dim);flex:1;}
#wb-layoutToolContext .wc-origin-head-val{font-size:12px;font-family:var(--font-mono);color:#ffdc00;opacity:.8;margin-right:4px;}
#wb-layoutToolContext .wc-origin-reset-btn{font-size:12px;font-weight:600;color:var(--tx-dim2);background:none;border:1px solid var(--border);border-radius:5px;padding:2px 7px;cursor:pointer;transition:color .15s,border-color .15s;white-space:nowrap;}
#wb-layoutToolContext .wc-origin-reset-btn:hover{color:#ffdc00;border-color:rgba(255,220,0,0.3);}
#wb-layoutToolContext .wc-origin-head-chevron{font-size:12px;color:var(--tx-dim2);transition:transform .2s;flex-shrink:0;}
#wb-layoutToolContext .wc-origin-head-chevron.wc-open{transform:rotate(180deg);}
#wb-layoutToolContext .wc-origin-body{display:none;padding:12px;border-top:1px solid var(--border);flex-direction:column;gap:12px;}
#wb-layoutToolContext .wc-origin-body.wc-open{display:flex;}
#wb-layoutToolContext .wc-origin-picker-wrap{display:flex;gap:12px;align-items:flex-start;}
#wb-layoutToolContext .wc-origin-canvas-wrap{position:relative;flex-shrink:0;}
#wb-layoutToolContext .wc-origin-canvas{display:block;border-radius:8px;cursor:crosshair;border:1px solid var(--border);background:var(--surface2);}
#wb-layoutToolContext .wc-origin-canvas-label{font-size:11.5px;color:var(--tx-dim2);text-align:center;margin-top:4px;letter-spacing:.06em;}
#wb-layoutToolContext .wc-origin-sliders{flex:1;display:flex;flex-direction:column;gap:8px;}
#wb-layoutToolContext .wc-origin-slider-row{display:flex;align-items:center;gap:8px;}
#wb-layoutToolContext .wc-origin-axis-tag{width:16px;height:16px;border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
#wb-layoutToolContext .wc-origin-axis-tag.wc-x{background:rgba(255,45,120,0.15);color:#ff2d78;}
#wb-layoutToolContext .wc-origin-axis-tag.wc-y{background:rgba(0,234,255,0.15);color:#00eaff;}
#wb-layoutToolContext .wc-origin-axis-tag.wc-z{background:rgba(191,0,255,0.15);color:#bf00ff;}
#wb-layoutToolContext .wc-origin-slider-track{flex:1;position:relative;height:3px;border-radius:2px;background:var(--surface3);cursor:pointer;}
#wb-layoutToolContext .wc-origin-slider-fill{position:absolute;left:0;top:0;height:100%;border-radius:2px;pointer-events:none;}
#wb-layoutToolContext .wc-origin-slider-thumb{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);pointer-events:none;}
#wb-layoutToolContext input[type=range].wc-origin-range{position:absolute;inset:-8px -4px;width:calc(100% + 8px);height:calc(100% + 16px);opacity:0;cursor:pointer;margin:0;}
#wb-layoutToolContext .wc-origin-val{font-size:12px;font-family:var(--font-mono);min-width:36px;text-align:right;flex-shrink:0;font-weight:600;}

/* add row */
#wb-layoutToolContext .wc-add-row{display:flex;gap:8px;align-items:center;}
#wb-layoutToolContext .wc-add-select{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:9px;color:var(--tx);font-size:12px;padding:9px 32px 9px 12px;outline:none;appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .15s;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;}
#wb-layoutToolContext .wc-add-select:hover{border-color:rgba(255,255,255,0.15);}
#wb-layoutToolContext .wc-add-select:focus{border-color:var(--border-a);}
#wb-layoutToolContext .wc-add-select option{background:#1a1a1f;}
#wb-layoutToolContext .wc-add-btn{width:36px;height:36px;border-radius:9px;border:1px solid var(--border-a);background:rgba(0,234,255,0.07);color:var(--c1);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .1s;flex-shrink:0;}
#wb-layoutToolContext .wc-add-btn:hover{background:rgba(0,234,255,0.14);}
#wb-layoutToolContext .wc-add-btn:active{transform:scale(.9);}

/* transform card list */
#wb-layoutToolContext .wc-t-list{display:flex;flex-direction:column;gap:6px;}
#wb-layoutToolContext .wc-empty-state{border:1px dashed var(--border);border-radius:12px;padding:28px 16px;text-align:center;color:var(--tx-dim2);font-size:12px;line-height:1.8;}
#wb-layoutToolContext .wc-empty-state strong{display:block;font-size:13px;color:var(--tx-dim);margin-bottom:4px;}
#wb-layoutToolContext .wc-t-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .15s,opacity .2s;}
#wb-layoutToolContext .wc-t-card:hover{border-color:rgba(255,255,255,0.1);}
#wb-layoutToolContext .wc-t-card.wc-drag-over{border-color:var(--c1)!important;background:rgba(0,234,255,0.03);}
#wb-layoutToolContext .wc-t-card.wc-dragging{opacity:.3;}
#wb-layoutToolContext .wc-t-card.wc-hidden-item{opacity:.4;}
#wb-layoutToolContext .wc-t-card.wc-hidden-item .wc-t-card-body{display:none;}
#wb-layoutToolContext .wc-t-card.wc-hidden-item .wc-t-label{text-decoration:line-through;text-decoration-color:rgba(255,255,255,0.2);}
#wb-layoutToolContext .wc-t-card.wc-hidden-item .wc-t-card-head{border-bottom:none;}
#wb-layoutToolContext .wc-t-card-head{display:flex;align-items:center;gap:5px;padding:8px 10px 8px 8px;border-bottom:1px solid var(--border);}
#wb-layoutToolContext .wc-t-grip{color:var(--tx-dim2);font-size:14px;cursor:grab;padding:3px 4px;border-radius:4px;user-select:none;transition:color .15s,background .15s;flex-shrink:0;}
#wb-layoutToolContext .wc-t-grip:hover{color:var(--c1);background:rgba(0,234,255,0.08);}
#wb-layoutToolContext .wc-t-grip:active{cursor:grabbing;}
#wb-layoutToolContext .wc-t-label{flex:1;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:color .15s;min-width:0;}
#wb-layoutToolContext .wc-t-idx{font-size:12px;font-family:var(--font-mono);color:var(--tx-dim2);background:var(--surface3);border-radius:4px;padding:2px 5px;flex-shrink:0;}
#wb-layoutToolContext .wc-t-reset{background:none;border:1px solid transparent;color:var(--tx-dim2);cursor:pointer;font-size:12px;font-weight:600;padding:2px 6px;border-radius:4px;transition:color .15s,background .15s,border-color .15s;flex-shrink:0;}
#wb-layoutToolContext .wc-t-reset:hover{color:var(--c1);border-color:rgba(0,234,255,0.25);background:rgba(0,234,255,0.06);}
#wb-layoutToolContext .wc-t-eye{background:none;border:none;cursor:pointer;padding:2px 3px;border-radius:4px;font-size:12px;line-height:1;transition:opacity .15s;flex-shrink:0;opacity:.35;}
#wb-layoutToolContext .wc-t-eye:hover{opacity:1;background:rgba(255,255,255,0.06);}
#wb-layoutToolContext .wc-t-card.wc-hidden-item .wc-t-eye{opacity:.8;}
#wb-layoutToolContext .wc-t-remove{background:none;border:none;color:var(--tx-dim2);cursor:pointer;font-size:15px;line-height:1;padding:2px 3px;border-radius:4px;transition:color .15s,background .15s;flex-shrink:0;}
#wb-layoutToolContext .wc-t-remove:hover{color:var(--c3);background:rgba(255,45,120,0.08);}
#wb-layoutToolContext .wc-t-card-body{padding:12px 12px 8px;display:flex;flex-direction:column;gap:8px;}
#wb-layoutToolContext .wc-t-warn{display:none;align-items:center;gap:5px;font-size:12px;font-family:var(--font-mono);color:rgba(255,180,0,0.9);background:rgba(255,180,0,0.07);border:1px solid rgba(255,180,0,0.2);border-radius:6px;padding:4px 8px;line-height:1.4;}
#wb-layoutToolContext .wc-t-warn.wc-visible{display:flex;}

/* slider */
#wb-layoutToolContext .wc-ctrl-row{display:flex;align-items:center;gap:10px;}
#wb-layoutToolContext .wc-ctrl-track{flex:1;position:relative;height:4px;border-radius:2px;background:var(--surface3);cursor:pointer;}
#wb-layoutToolContext .wc-ctrl-fill{position:absolute;left:0;top:0;height:100%;border-radius:2px;background:var(--c1);pointer-events:none;}
#wb-layoutToolContext .wc-ctrl-thumb{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--c1);transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 3px rgba(0,234,255,0.15);transition:box-shadow .15s;}
#wb-layoutToolContext .wc-ctrl-track:hover .wc-ctrl-thumb{box-shadow:0 0 0 5px rgba(0,234,255,0.2);}
#wb-layoutToolContext input[type=range].wc-hidden-range{position:absolute;inset:-8px -4px;width:calc(100% + 8px);height:calc(100% + 16px);opacity:0;cursor:pointer;margin:0;}
#wb-layoutToolContext .wc-ctrl-val{font-size:12px;font-family:var(--font-mono);color:var(--c1);min-width:56px;text-align:right;flex-shrink:0;font-weight:600;}

/* wheel */
#wb-layoutToolContext .wc-wheel-wrap{display:flex;align-items:center;gap:16px;}
#wb-layoutToolContext .wc-wheel-canvas{display:block;cursor:grab;flex-shrink:0;border-radius:50%;}
#wb-layoutToolContext .wc-wheel-canvas:active{cursor:grabbing;}
#wb-layoutToolContext .wc-wheel-readout{display:flex;flex-direction:column;gap:2px;}
#wb-layoutToolContext .wc-wheel-num{font-family:var(--font-mono);font-size:28px;font-weight:600;color:#fff;line-height:1;letter-spacing:-.02em;}
#wb-layoutToolContext .wc-wheel-unit{font-size:12px;color:var(--tx-dim);letter-spacing:.06em;text-transform:uppercase;}

/* section blocks */
#wb-layoutToolContext .wc-sec-block{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;}
#wb-layoutToolContext .wc-sec-head{padding:8px 10px 8px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;}
#wb-layoutToolContext .wc-sec-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;animation:tfb-blink 2s ease-in-out infinite;}
@keyframes tfb-blink{0%,100%{opacity:1}50%{opacity:.3}}
#wb-layoutToolContext .wc-sec-dot.wc-cyan{background:var(--c1);box-shadow:0 0 6px var(--c1);}
#wb-layoutToolContext .wc-sec-dot.wc-cyan.wc-playing{animation:tfb-blink .5s ease-in-out infinite;}
#wb-layoutToolContext .wc-sec-dot.wc-pink{background:var(--c3);box-shadow:0 0 6px var(--c3);animation:none;}
#wb-layoutToolContext .wc-sec-dot.wc-pink.wc-playing{animation:tfb-blink .5s ease-in-out infinite;}
#wb-layoutToolContext .wc-sec-title{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-dim);}
#wb-layoutToolContext .wc-sec-right{margin-left:auto;}

/* 2D preview */
#wb-layoutToolContext .wc-preview-stage{height:140px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(0deg,transparent,transparent 19px,rgba(255,255,255,0.025) 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,rgba(255,255,255,0.025) 20px);}
#wb-layoutToolContext .wc-preview-stage::before,#wb-layoutToolContext .wc-preview-stage::after{content:'';position:absolute;background:rgba(0,234,255,0.07);pointer-events:none;z-index:0;}
#wb-layoutToolContext .wc-preview-stage::before{left:50%;top:0;width:1px;height:100%;}
#wb-layoutToolContext .wc-preview-stage::after{top:50%;left:0;height:1px;width:100%;}
#wb-layoutToolContext .wc-axis-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:3;}
#wb-layoutToolContext .wc-origin-dot-overlay{position:absolute;pointer-events:none;z-index:4;width:0;height:0;}
#wb-layoutToolContext .wc-origin-dot-inner{position:absolute;width:10px;height:10px;border-radius:50%;background:#ffdc00;box-shadow:0 0 8px #ffdc00,0 0 16px rgba(255,220,0,0.4);transform:translate(-50%,-50%);transition:left .1s,top .1s;}
#wb-layoutToolContext .wc-prev-wrap{position:relative;z-index:1;transform-origin:center center;}
#wb-layoutToolContext .wc-prev-obj{width:54px;height:54px;border-radius:8px;background:linear-gradient(135deg,rgba(0,234,255,0.15),rgba(191,0,255,0.15));border:1.5px solid rgba(0,234,255,0.4);box-shadow:0 0 14px rgba(0,234,255,0.1),inset 0 0 8px rgba(0,234,255,0.05);position:relative;}
#wb-layoutToolContext .wc-preview-hint{display:none;align-items:center;justify-content:center;gap:5px;padding:5px 10px;border-top:1px solid rgba(255,180,0,0.15);background:rgba(255,180,0,0.05);font-size:12px;font-family:var(--font-mono);color:rgba(255,180,0,0.8);letter-spacing:.04em;}
#wb-layoutToolContext .wc-preview-hint.wc-visible{display:flex;}

/* animation stage */
#wb-layoutToolContext .wc-anim-stage{height:140px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(0deg,transparent,transparent 19px,rgba(255,45,120,0.018) 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,rgba(255,45,120,0.018) 20px);}
#wb-layoutToolContext .wc-anim-stage::before,#wb-layoutToolContext .wc-anim-stage::after{content:'';position:absolute;background:rgba(255,45,120,0.07);pointer-events:none;z-index:0;}
#wb-layoutToolContext .wc-anim-stage::before{left:50%;top:0;width:1px;height:100%;}
#wb-layoutToolContext .wc-anim-stage::after{top:50%;left:0;height:1px;width:100%;}
#wb-layoutToolContext .wc-anim-wrap{position:relative;z-index:1;transform-origin:center center;}
#wb-layoutToolContext .wc-anim-obj{width:54px;height:54px;border-radius:8px;background:linear-gradient(135deg,rgba(255,45,120,0.18),rgba(191,0,255,0.18));border:1.5px solid rgba(255,45,120,0.4);box-shadow:0 0 14px rgba(255,45,120,0.12),inset 0 0 8px rgba(255,45,120,0.05);position:relative;}
#wb-layoutToolContext .wc-anim-obj.wc-animating{transition-property:transform;transition-timing-function:ease-in-out;}

/* speed row */
#wb-layoutToolContext .wc-speed-row{display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid var(--border);background:var(--surface2);}
#wb-layoutToolContext .wc-speed-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-dim);white-space:nowrap;}
#wb-layoutToolContext .wc-speed-val{font-size:12px;font-family:var(--font-mono);color:var(--c3);min-width:30px;text-align:right;font-weight:600;flex-shrink:0;}
#wb-layoutToolContext .wc-speed-track{flex:1;position:relative;height:3px;border-radius:2px;background:var(--surface3);cursor:pointer;}
#wb-layoutToolContext .wc-speed-fill{position:absolute;left:0;top:0;height:100%;border-radius:2px;background:var(--c3);pointer-events:none;}
#wb-layoutToolContext .wc-speed-thumb{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--c3);transform:translate(-50%,-50%);pointer-events:none;}
#wb-layoutToolContext input[type=range].wc-speed-range{position:absolute;inset:-8px -4px;width:calc(100% + 8px);height:calc(100% + 16px);opacity:0;cursor:pointer;margin:0;}
#wb-layoutToolContext .wc-play-btn{display:flex;align-items:center;gap:5px;background:rgba(255,45,120,0.08);border:1px solid rgba(255,45,120,0.3);border-radius:6px;color:var(--c3);font-size:12px;font-weight:600;letter-spacing:.06em;padding:4px 10px;cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap;}
#wb-layoutToolContext .wc-play-btn:hover{background:rgba(255,45,120,0.15);border-color:rgba(255,45,120,0.55);}
#wb-layoutToolContext .wc-play-btn.wc-playing{background:rgba(255,45,120,0.2);border-color:rgba(255,45,120,0.7);}

/* CSS output */
#wb-layoutToolContext .wc-output-block{background:#0d0d10;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
#wb-layoutToolContext .wc-output-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 8px 12px;border-bottom:1px solid var(--border);}
#wb-layoutToolContext .wc-output-head-label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-dim);}
#wb-layoutToolContext .wc-copy-btn{display:flex;align-items:center;gap:5px;background:rgba(0,234,255,0.08);border:1px solid rgba(0,234,255,0.25);border-radius:6px;color:var(--c1);font-size:12px;font-weight:600;letter-spacing:.06em;padding:4px 10px;cursor:pointer;transition:background .15s,border-color .15s;}
#wb-layoutToolContext .wc-copy-btn:hover{background:rgba(0,234,255,0.15);border-color:rgba(0,234,255,0.5);}
#wb-layoutToolContext .wc-copy-btn.wc-done{color:#4ade80;border-color:rgba(74,222,128,0.4);background:rgba(74,222,128,0.08);}
#wb-layoutToolContext .wc-output-code{padding:12px 14px;font-family:var(--font-mono);font-size:12px;line-height:1.9;word-break:break-all;min-height:46px;}
#wb-layoutToolContext .wc-syn-prop{color:rgba(255,255,255,0.4);}
#wb-layoutToolContext .wc-syn-colon{color:rgba(255,255,255,0.2);}
#wb-layoutToolContext .wc-syn-fn{color:var(--c2);}
#wb-layoutToolContext .wc-syn-paren{color:rgba(255,255,255,0.22);}
#wb-layoutToolContext .wc-syn-num{color:var(--c1);}
#wb-layoutToolContext .wc-syn-unit{color:rgba(0,234,255,0.5);}
#wb-layoutToolContext .wc-syn-semi{color:rgba(255,255,255,0.2);}
#wb-layoutToolContext .wc-syn-none{color:var(--tx-dim);}
.wc-adp-sel-clickable:hover{background:rgba(0,234,255,0.07);}
.wc-adp-sel-active{background:rgba(0,234,255,0.12)!important;outline:1px solid rgba(0,234,255,0.3);}

/* wizard launcher */
#wb-layoutToolContext .wc-tfw-launch-btn{display:flex;align-items:center;gap:10px;width:100%;background:linear-gradient(135deg,rgba(0,234,255,0.1),rgba(191,0,255,0.1));border:1px solid rgba(0,234,255,0.3);border-radius:11px;padding:10px 12px;cursor:pointer;text-align:left;transition:border-color .15s,background .15s,transform .1s;font-family:inherit;}
#wb-layoutToolContext .wc-tfw-launch-btn:hover{border-color:rgba(0,234,255,0.55);background:linear-gradient(135deg,rgba(0,234,255,0.16),rgba(191,0,255,0.16));}
#wb-layoutToolContext .wc-tfw-launch-btn:active{transform:scale(.99);}
#wb-layoutToolContext .wc-tfw-launch-icon{font-size:18px;flex-shrink:0;}
#wb-layoutToolContext .wc-tfw-launch-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
#wb-layoutToolContext .wc-tfw-launch-txt strong{font-size:12px;color:#fff;font-weight:600;}
#wb-layoutToolContext .wc-tfw-launch-txt small{font-size:12px;color:rgba(255,255,255,0.45);}
#wb-layoutToolContext .wc-tfw-launch-arrow{font-size:18px;color:rgba(0,234,255,0.6);flex-shrink:0;}
#wb-layoutToolContext .wc-tfw-or-row{display:flex;align-items:center;gap:8px;margin:1px 0;}
#wb-layoutToolContext .wc-tfw-or-row::before,#wb-layoutToolContext .wc-tfw-or-row::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.06);}
#wb-layoutToolContext .wc-tfw-or-row span{font-size:12px;color:rgba(255,255,255,0.3);white-space:nowrap;text-transform:uppercase;letter-spacing:.08em;}

/* ═══════════════════════════════════
   TRANSFORM WIZARD popup (tfw-) — lives as a sibling overlay
   inside #wb-root, not inside #wb-layoutToolContext, so it can't
   see that panel's local --c1/--tx-dim vars — same reason
   .wc-cpe-popup below sticks to #root-level vars only.
═══════════════════════════════════ */
.wc-tfw-popup{width:720px;max-width:94vw;}
.wc-tfw-body{padding:16px 20px 20px;}
.wc-tfw-reset-btn{background:none;border:1px solid rgba(255,255,255,0.14);color:rgba(255,255,255,0.55);padding:6px 12px;border-radius:7px;font-size:12px;cursor:pointer;transition:border-color .15s,color .15s;margin-right:2px;font-family:inherit;}
.wc-tfw-reset-btn:hover{border-color:rgba(0,234,255,0.4);color:var(--accent);}
.wc-tfw-main{display:grid;grid-template-columns:216px 1fr;gap:18px;align-items:start;}

.wc-tfw-compare{display:flex;flex-direction:column;gap:8px;}
.wc-tfw-stagebox{display:flex;flex-direction:column;gap:5px;}
.wc-tfw-stage-tag{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.wc-tfw-tag-before{color:rgba(255,255,255,0.4);}
.wc-tfw-tag-after{color:var(--accent);}
.wc-tfw-stage{height:112px;border-radius:10px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(0deg,transparent,transparent 15px,rgba(255,255,255,0.025) 16px),repeating-linear-gradient(90deg,transparent,transparent 15px,rgba(255,255,255,0.025) 16px);border:1px solid rgba(255,255,255,0.08);}
.wc-tfw-stage-after{border-color:rgba(0,234,255,0.28);}
.wc-tfw-wrap{position:relative;z-index:1;transform-origin:center center;}
.wc-tfw-obj{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,rgba(255,255,255,0.14),rgba(255,255,255,0.04));border:1.5px solid rgba(255,255,255,0.3);}
.wc-tfw-obj-after{background:linear-gradient(135deg,rgba(0,234,255,0.45),rgba(191,0,255,0.42));border-color:rgba(0,234,255,0.9);box-shadow:0 0 18px rgba(0,234,255,0.32),inset 0 0 12px rgba(255,255,255,0.12);}
.wc-tfw-vs{text-align:center;font-size:13px;color:rgba(0,234,255,0.5);}

.wc-tfw-diff{background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.07);border-radius:9px;padding:8px 10px;font-family:'JetBrains Mono',monospace;max-height:220px;overflow-y:auto;}
.wc-tfw-diff-empty{font-size:12px;color:rgba(255,255,255,0.35);line-height:1.5;}
.wc-tfw-diff-hd{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:5px;}
.wc-tfw-diff-row{display:flex;align-items:center;gap:6px;font-size:12px;padding:2px 0;color:rgba(255,255,255,0.6);}
.wc-tfw-diff-label{flex:1;color:rgba(255,255,255,0.4);}
.wc-tfw-diff-before{color:rgba(255,255,255,0.35);text-decoration:line-through;text-decoration-color:rgba(255,255,255,0.2);}
.wc-tfw-diff-arrow{color:rgba(0,234,255,0.5);}
.wc-tfw-diff-after{color:var(--accent);font-weight:600;}

.wc-tfw-form{display:flex;flex-direction:column;gap:14px;max-height:440px;overflow-y:auto;padding-right:6px;}
.wc-tfw-form::-webkit-scrollbar{width:5px;}
.wc-tfw-form::-webkit-scrollbar-thumb{background:rgba(0,234,255,0.2);border-radius:3px;}
.wc-tfw-group{display:flex;flex-direction:column;gap:7px;}
.wc-tfw-group-title{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,0.35);}
.wc-tfw-row{display:flex;align-items:center;gap:9px;transition:opacity .15s;}
.wc-tfw-row-off{opacity:.45;}
.wc-tfw-row-origin{padding-left:29px;}

.wc-tfw-switch{position:relative;width:30px;height:17px;flex-shrink:0;display:inline-block;cursor:pointer;}
.wc-tfw-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.wc-tfw-slider-ui{position:absolute;inset:0;background:rgba(255,255,255,0.12);border-radius:20px;transition:background .15s;pointer-events:none;}
.wc-tfw-slider-ui::before{content:'';position:absolute;width:13px;height:13px;left:2px;top:2px;background:#fff;border-radius:50%;transition:transform .15s;}
.wc-tfw-switch input:checked + .wc-tfw-slider-ui{background:var(--accent);}
.wc-tfw-switch input:checked + .wc-tfw-slider-ui::before{transform:translateX(13px);}

.wc-tfw-row-label{width:76px;flex-shrink:0;font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
.wc-tfw-axis-tag{width:18px;height:18px;border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;}
.wc-tfw-row .wc-slider-param{flex:1;min-width:0;}

.wc-tfw-bf-row{display:flex;gap:6px;}
.wc-tfw-bf-btn{flex:1;height:30px;border-radius:7px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03);color:rgba(255,255,255,0.55);font-size:12px;font-weight:600;cursor:pointer;transition:border-color .12s,background .12s,color .12s;font-family:inherit;}
.wc-tfw-bf-btn:hover{border-color:rgba(255,255,255,0.2);color:#fff;}
.wc-tfw-bf-btn.wc-active[data-bf="visible"]{border-color:var(--accent);background:rgba(0,234,255,0.12);color:var(--accent);}
.wc-tfw-bf-btn.wc-active[data-bf="hidden"]{border-color:var(--neo3);background:rgba(255,45,120,0.12);color:var(--neo3);}

@media (max-width:760px){
  .wc-tfw-popup{width:96vw;}
  .wc-tfw-main{grid-template-columns:1fr;}
  .wc-tfw-compare{flex-direction:row;flex-wrap:wrap;}
  .wc-tfw-stagebox{flex:1;min-width:140px;}
  .wc-tfw-diff{flex-basis:100%;}
}

/* ═══════════════════════════════════
   REGION / CLIP-PATH TOOL — right-panel library (clipPathTool)
   and popup shape editor (cpe-). Scoped to #root-level vars only —
   the popup lives as a sibling overlay inside #root, not inside
   #layoutToolContext, so it can't see that panel's local --c1/--tx-dim vars.
═══════════════════════════════════ */
#wb-clipPathTool{padding:8px 0 20px;}
.wc-cpb-app{display:flex;flex-direction:column;gap:6px;}

.wc-cpb-applied-row{display:flex;align-items:center;gap:8px;padding:7px 10px;margin:2px 6px 0;
  border:1px solid var(--border);border-radius:7px;background:rgba(255,255,255,.02);}
.wc-cpb-applied-label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.4);flex-shrink:0;width:46px;}
.wc-cpb-region-val{flex:1;font-size:12px;color:rgba(255,255,255,.3);font-family:'JetBrains Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wc-cpb-region-val.wc-cpb-region-set{color:var(--accent);}
.wc-cpb-region-clear{color:rgba(255,255,255,.25);background:none;border:none;cursor:pointer;font-size:13px;flex-shrink:0;padding:0;line-height:1;}
.wc-cpb-region-clear:hover{color:#ff4466;}
.wc-cpb-card-edit{position:absolute;top:1px;left:3px;color:rgba(255,255,255,.45);background:none;border:none;cursor:pointer;font-size:12px;line-height:1;padding:1px 2px;border-radius:3px;opacity:0;transition:opacity .12s;font-family:inherit;}
.wc-cpb-card:hover .wc-cpb-card-edit{opacity:1;}
.wc-cpb-card-edit:hover{color:var(--accent);}

.wc-cpb-lib-head{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 4px;}
.wc-cpb-lib-head span{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text);}
.wc-cpb-add-btn{font-size:12px;color:var(--accent);background:rgba(0,234,255,.08);border:1px solid rgba(0,234,255,.3);border-radius:5px;padding:4px 9px;cursor:pointer;transition:background .15s;font-family:inherit;}
.wc-cpb-add-btn:hover{background:rgba(0,234,255,.16);}

.wc-cpb-lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;padding:6px 10px 10px;}
.wc-cpb-lib-empty{grid-column:1/-1;font-size:12px;color:rgba(255,255,255,.25);text-align:center;padding:18px 6px;}
.wc-cpb-card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 6px;border:1px solid var(--border);border-radius:8px;cursor:pointer;background:rgba(255,255,255,.02);position:relative;transition:border-color .15s,background .15s;}
.wc-cpb-card:hover{border-color:var(--border-h);}
.wc-cpb-card.wc-cpb-card-active{border-color:var(--accent);background:rgba(0,234,255,.06);}
.wc-cpb-card-swatch{width:38px;height:38px;border:1px solid var(--border);background:rgba(255,255,255,.02);overflow:hidden;}
.wc-cpb-card-swatch svg{width:100%;height:100%;display:block;}
.wc-cpb-card-swatch svg circle,.wc-cpb-card-swatch svg ellipse,.wc-cpb-card-swatch svg rect,.wc-cpb-card-swatch svg path{fill:rgba(0,234,255,.35);stroke:var(--accent);stroke-width:1.5;}
.wc-cpb-card-name{font-size:12px;color:var(--text-hi);max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wc-cpb-card-del{position:absolute;top:1px;right:3px;color:rgba(255,255,255,.25);background:none;border:none;cursor:pointer;font-size:12px;line-height:1;}
.wc-cpb-card-del:hover{color:#ff4466;}

.wc-cpe-popup{width:860px;max-width:96vw;max-height:88vh;}
.wc-cpe-body{display:flex;flex-direction:column;}
.wc-cpe-field-row{display:flex;align-items:center;gap:12px;padding:14px 22px 10px;}
.wc-cpe-field-label{width:70px;flex-shrink:0;font-size:13px;color:rgba(255,255,255,.7);}
.wc-cpe-field-row .wc-pf-inp{height:32px;font-size:13px;}
.wc-cpe-main{display:flex;gap:22px;padding:6px 22px 6px;align-items:flex-start;}
.wc-cpe-preview-wrap{width:380px;height:380px;flex-shrink:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.02);box-shadow:0 0 0 1px rgba(0,234,255,.04) inset;}
.wc-cpe-grid{width:100%;height:100%;display:block;}
.wc-cpe-grid line{stroke:rgba(255,255,255,.06);stroke-width:0.3;}
.wc-cpe-grid line.wc-major{stroke:rgba(255,255,255,.14);}
.wc-cpe-shape-fill{fill:rgba(0,234,255,.2);stroke:var(--accent);stroke-width:0.6;}
.wc-cpe-shape-fill-dim{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.3);stroke-width:0.5;stroke-dasharray:2,1.2;}
.wc-cpe-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;}

.wc-cpe-layers{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.wc-cpe-layer-chip{position:relative;width:32px;height:32px;border:1px solid var(--border);border-radius:7px;background:rgba(255,255,255,.03);color:rgba(255,255,255,.5);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;}
.wc-cpe-layer-chip:hover{border-color:var(--border-h);color:rgba(255,255,255,.8);}
.wc-cpe-layer-chip.wc-active{border-color:var(--accent);background:rgba(0,234,255,.08);color:var(--accent);}
.wc-cpe-layer-del{position:absolute;top:-6px;right:-6px;width:15px;height:15px;border-radius:50%;background:#ff4466;color:#fff;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;}
.wc-cpe-layer-add{width:32px;height:32px;border:1px dashed var(--border-h);border-radius:7px;background:transparent;color:var(--accent);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;font-family:inherit;}
.wc-cpe-layer-add:hover{background:rgba(0,234,255,.08);}

.wc-cpe-shape-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.wc-cpe-shape-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 0;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.03);cursor:pointer;color:rgba(255,255,255,.5);transition:all .15s;}
.wc-cpe-shape-btn:hover{border-color:var(--border-h);color:rgba(255,255,255,.8);}
.wc-cpe-shape-btn.wc-active{border-color:var(--accent);background:rgba(0,234,255,.08);color:var(--accent);}
.wc-cpe-shape-btn svg{width:20px;height:20px;}
.wc-cpe-shape-btn-lbl{font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:inherit;opacity:.75;}

.wc-cpe-params{display:flex;flex-direction:column;gap:6px;min-width:0;max-height:380px;overflow-y:auto;padding-right:2px;}

/* shared field styling — used by circle/ellipse/xywh grid and by path point cards.
   Wraps the app-standard PARAMETER_INPUT_createNumberParam pill stepper, sized
   down from its default (28-36px) clamp so several fields fit per row. */
.wc-cpe-num-grid{display:flex;flex-wrap:wrap;gap:8px;}
.wc-cpe-pt-field{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;}
.wc-cpe-pt-field-lbl{font-size:14px;letter-spacing:.03em;text-transform:uppercase;color:rgba(255,255,255,.4);white-space:nowrap;}
.wc-cpe-pt-field .wc-number-param{font-size:14px;}
.wc-cpe-pt-field .wc-numberParamUpdate{width:16px;height:16px;font-size:14px;}
.wc-cpe-pt-field .wc-number-param-val{min-width:28px;line-height:16px;font-size:14px;}

.wc-cpe-point-card{border:1px solid var(--border);border-radius:9px;margin-bottom:8px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));transition:border-color .15s;overflow:hidden;}
.wc-cpe-point-card:hover{border-color:rgba(0,234,255,.3);}
.wc-cpe-point-card-head{display:flex;align-items:center;gap:7px;padding:6px 7px;background:rgba(0,234,255,.04);border-bottom:1px solid rgba(255,255,255,.06);}
.wc-cpe-point-num{font-size:14px;font-weight:700;color:var(--accent);width:18px;height:18px;flex-shrink:0;border-radius:50%;background:rgba(0,234,255,.14);display:flex;align-items:center;justify-content:center;}
.wc-cpe-point-start-lbl{font-size:14px;color:rgba(255,255,255,.45);flex:1;text-transform:uppercase;letter-spacing:.03em;}
.wc-cpe-point-card-head select{
  flex:1;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:6px;
  color:var(--text-hi);font-size:14px;padding:4px 22px 4px 8px;font-family:inherit;cursor:pointer;
  transition:border-color .15s,background .15s;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2300eaff' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;
}
.wc-cpe-point-card-head select:hover{border-color:rgba(0,234,255,.4);background-color:rgba(0,234,255,.06);}
.wc-cpe-point-card-head select:focus{outline:none;border-color:rgba(0,234,255,.55);box-shadow:0 0 0 2px rgba(0,234,255,.1);}
.wc-cpe-point-del{color:rgba(255,68,102,.7);cursor:pointer;font-size:14px;flex-shrink:0;width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
.wc-cpe-point-del:hover{color:#ff4466;background:rgba(255,68,102,.14);}
.wc-cpe-point-card-fields{display:flex;flex-wrap:wrap;gap:8px;padding:8px 7px;}

.wc-cpe-add-point{display:flex;align-items:center;justify-content:center;gap:5px;font-size:14px;color:var(--accent);background:transparent;border:1.5px dashed rgba(0,234,255,.35);border-radius:7px;padding:8px 10px;cursor:pointer;font-family:inherit;width:100%;font-weight:600;transition:all .15s;}
.wc-cpe-add-point:hover{background:rgba(0,234,255,.08);border-color:rgba(0,234,255,.55);}
.wc-cpe-hint{font-size:14px;line-height:1.5;color:rgba(255,255,255,.4);padding:2px 22px 10px;}
.wc-cpe-err{border-color:#ff4466 !important;}
.wc-cpe-name-err{font-size:12px;line-height:1.4;color:#ff4466;padding:0 22px 8px;}

.wc-cpe-popup .wc-output-block{margin:10px 22px 20px;background:#0d0d10;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.wc-cpe-popup .wc-output-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 8px 12px;border-bottom:1px solid var(--border);}
.wc-cpe-popup .wc-output-head-label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.35);}
.wc-cpe-popup .wc-copy-btn{display:flex;align-items:center;gap:5px;background:rgba(0,234,255,0.08);border:1px solid rgba(0,234,255,0.25);border-radius:6px;color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.06em;padding:4px 10px;cursor:pointer;font-family:inherit;}
.wc-cpe-popup .wc-copy-btn:hover{background:rgba(0,234,255,0.15);border-color:rgba(0,234,255,0.5);}
.wc-cpe-popup .wc-output-code{padding:12px 14px;font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.7;word-break:break-all;min-height:30px;}
.wc-cpe-popup .wc-syn-prop{color:rgba(255,255,255,0.4);}
.wc-cpe-popup .wc-syn-colon{color:rgba(255,255,255,0.2);}
.wc-cpe-popup .wc-syn-fn{color:var(--accent);}
.wc-cpe-popup .wc-syn-semi{color:rgba(255,255,255,0.2);}

.wc-cpe-screen-tabs{display:flex;gap:6px;padding:0 22px 10px;}
.wc-cpe-screen-tab{font-size:12px;font-weight:600;letter-spacing:.03em;color:rgba(255,255,255,.5);background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:7px;padding:6px 14px;cursor:pointer;font-family:inherit;transition:all .15s;}
.wc-cpe-screen-tab:hover{border-color:var(--border-h);color:rgba(255,255,255,.8);}
.wc-cpe-screen-tab.wc-active{border-color:var(--accent);background:rgba(0,234,255,.08);color:var(--accent);}

.wc-cpe-presets-screen,.wc-cpe-saved-screen{padding:6px 22px 6px;}
.wc-cpe-preset-hint{font-size:12px;line-height:1.5;color:rgba(255,255,255,.4);padding-bottom:10px;}
.wc-cpe-preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;max-height:420px;overflow-y:auto;padding-right:2px;}
.wc-cpe-preset-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.02);cursor:pointer;transition:border-color .15s,background .15s;font-family:inherit;}
.wc-cpe-preset-card:hover{border-color:var(--accent);background:rgba(0,234,255,.06);}
.wc-cpe-preset-svg{width:44px;height:44px;}
.wc-cpe-preset-svg path{fill:rgba(0,234,255,.2);stroke:var(--accent);stroke-width:1.4;}
.wc-cpe-preset-name{font-size:12px;color:rgba(255,255,255,.6);text-align:center;}

@media (max-width:720px){
  .wc-cpe-main{flex-direction:column;}
  .wc-cpe-preview-wrap{width:100%;height:auto;aspect-ratio:1;}
}

/* ═══════════════════════════════════════════════════════════════
   CALM LABEL PASS — right-side tool panels (Transform, Wizard, Clip)
   These panels shouted: bold-700 UPPERCASE with very wide .1–.15em
   tracking, so a dozen labels competed for attention at once. The
   Design/Layout/Animation panels already use weight ~500 + dim color,
   so this just brings the loud outliers down to that same calm level
   — uppercase and the semantic accent colors are kept on purpose, we
   only soften weight + letter-spacing. Placed last so it wins by
   source order (selectors mirror the originals' specificity).
   ═══════════════════════════════════════════════════════════════ */
#wb-layoutToolContext .wc-topbar-title,
#wb-layoutToolContext .wc-bf-label,
#wb-layoutToolContext .wc-origin-head-title,
#wb-layoutToolContext .wc-t-label,
#wb-layoutToolContext .wc-sec-title,
#wb-layoutToolContext .wc-output-head-label,
#wb-layoutToolContext .wc-speed-label,
#wb-layoutToolContext .wc-wheel-unit,
.wc-tfw-stage-tag,
.wc-tfw-diff-hd,
.wc-tfw-group-title,
.wc-tfw-row-label,
.wc-cpe-shape-btn-lbl,
.wc-cpe-pt-field-lbl,
.wc-cpe-point-start-lbl,
.wc-cpb-applied-label,
.wc-cpe-popup .wc-output-head-label{
  font-weight:500;
  letter-spacing:.05em;
}

/* flex/grid child hint — dashed outline drawn by the layout panel when display is flex or grid */
[data-wm-lh]{outline:1.5px dashed rgba(0,234,255,.85)!important;outline-offset:1px;}
/* ── Logs tab (bottom panel) — session change log + undo/redo ─────────────── */
#wb-hist-log-wrap{
  display:flex;flex-direction:column;height:100%;min-height:0;
  font-family:monospace;
}
#wb-hist-log-toolbar{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:7px 12px;border-bottom:1px solid rgba(255,255,255,0.07);
  position:sticky;top:0;z-index:2;
  background:rgba(0,10,12,0.92);backdrop-filter:blur(4px);
}
.wc-hist-btn{
  background:rgba(0,234,255,0.06);border:1px solid rgba(0,234,255,0.25);
  color:var(--neo1);font-family:monospace;font-size:12px;
  padding:3px 12px;border-radius:6px;cursor:pointer;white-space:nowrap;
  transition:background .15s,box-shadow .15s;
}
.wc-hist-btn:hover:not(:disabled){background:rgba(0,234,255,0.12);box-shadow:0 0 0 1px rgba(0,234,255,0.25);}
.wc-hist-btn:disabled{cursor:default;}
.wc-hist-btn-act{border-color:rgba(0,234,255,0.6);box-shadow:0 0 0 1px rgba(0,234,255,0.25);color:#00eaff;}
.wc-hist-btn-danger{
  border-color:rgba(255,90,90,0.3);color:#ff8484;background:rgba(40,8,8,0.35);
  margin-left:auto;
}
.wc-hist-btn-danger:hover{background:rgba(255,90,90,0.12);box-shadow:0 0 0 1px rgba(255,90,90,0.25);}
#wb-hist-log-hint{
  flex:1;min-width:0;font-size:12px;color:rgba(255,255,255,0.38);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#wb-hist-log-list{flex:1;min-height:0;overflow-y:auto;padding:4px 0 10px;}
.wc-hist-empty{
  padding:26px 16px;text-align:center;font-size:14px;line-height:1.7;
  color:rgba(255,255,255,0.3);
}

/* ── change rows ── time · category · what changed · which element · revert ─ */
.wc-hist-row{
  display:flex;align-items:center;gap:10px;
  padding:5px 12px 5px 10px;
  font-size:14px;color:rgba(255,255,255,0.82);
  border-left:2px solid transparent;
  border-bottom:1px solid rgba(255,255,255,0.03);
  cursor:pointer;transition:background .12s,border-left-color .12s;
}
.wc-hist-row:hover{background:rgba(255,255,255,0.045);}
.wc-hist-row-stale{opacity:.45;}
/* category tint on the left edge — lets a long log be scanned by colour band */
.wc-hist-row-dom       {border-left-color:rgba(143,208,255,0.22);}
.wc-hist-row-style     {border-left-color:rgba(255,212,121,0.22);}
.wc-hist-row-animation {border-left-color:rgba(201,155,255,0.22);}
.wc-hist-row-responsive{border-left-color:rgba(125,255,176,0.22);}
.wc-hist-row-binding   {border-left-color:rgba(255,158,203,0.22);}
.wc-hist-row-selector  {border-left-color:rgba(0,234,255,0.22);}
.wc-hist-row-history   {border-left-color:rgba(255,255,255,0.16);}
.wc-hist-row-edit      {border-left-color:rgba(255,255,255,0.16);}
.wc-hist-row:hover{border-left-color:var(--neo1);}

.wc-hist-row-time{
  flex:0 0 54px;font-size:14px;font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,0.34);letter-spacing:.02em;
}
/* continuation of a run (same second, category and element): the timestamp
   column becomes a thread line so the block reads as one action */
.wc-hist-row-cont{border-bottom-color:transparent;}
.wc-hist-row-cont .wc-hist-row-time{position:relative;}
.wc-hist-row-cont .wc-hist-row-time::before{
  content:'';position:absolute;left:19px;top:-7px;bottom:-7px;
  width:1px;background:rgba(255,255,255,0.10);
}

.wc-hist-chip{
  flex:0 0 auto;min-width:50px;text-align:center;
  font-size:14px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:2px 8px;border-radius:5px;border:1px solid;
}
.wc-hist-chip-dom       {color:#8fd0ff;border-color:rgba(143,208,255,0.35);background:rgba(143,208,255,0.07);}
.wc-hist-chip-style     {color:#ffd479;border-color:rgba(255,212,121,0.35);background:rgba(255,212,121,0.07);}
.wc-hist-chip-animation {color:#c99bff;border-color:rgba(201,155,255,0.35);background:rgba(201,155,255,0.07);}
.wc-hist-chip-responsive{color:#7dffb0;border-color:rgba(125,255,176,0.35);background:rgba(125,255,176,0.07);}
.wc-hist-chip-binding   {color:#ff9ecb;border-color:rgba(255,158,203,0.35);background:rgba(255,158,203,0.07);}
.wc-hist-chip-selector  {color:#00eaff;border-color:rgba(0,234,255,0.35);background:rgba(0,234,255,0.07);}
.wc-hist-chip-history   {color:rgba(255,255,255,0.5);border-color:rgba(255,255,255,0.2);background:rgba(255,255,255,0.04);}
.wc-hist-chip-edit      {color:rgba(255,255,255,0.6);border-color:rgba(255,255,255,0.22);background:rgba(255,255,255,0.04);}

.wc-hist-row-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wc-hist-prop {color:rgba(255,255,255,0.88);}
.wc-hist-arrow{color:rgba(255,255,255,0.28);margin:0 6px;}
.wc-hist-val  {color:var(--neo1);}

/* which element the change landed on — a button, because clicking it copies
   the selector (the row's own click opens the detail card instead) */
.wc-hist-el{
  flex:0 1 auto;min-width:0;max-width:36%;
  font-family:inherit;font-size:14px;color:rgba(255,255,255,0.5);
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.07);
  padding:2px 7px;border-radius:5px;cursor:pointer;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  transition:color .12s,border-color .12s,background .12s;
}
.wc-hist-row:hover .wc-hist-el{color:rgba(255,255,255,0.72);border-color:rgba(255,255,255,0.14);}
button.wc-hist-el:hover{
  color:var(--neo1);background:rgba(0,234,255,0.1);border-color:rgba(0,234,255,0.38);
}
button.wc-hist-el.wc-hist-copied{
  color:#7dffb0;background:rgba(125,255,176,0.12);border-color:rgba(125,255,176,0.4);
}
/* page/module rows have no element — they show where it happened instead */
.wc-hist-el-ctx{cursor:default;color:rgba(255,166,87,0.65);border-color:rgba(255,166,87,0.18);background:rgba(255,166,87,0.06);}
.wc-hist-row:hover .wc-hist-el-ctx{color:rgba(255,166,87,0.9);border-color:rgba(255,166,87,0.3);}

/* fixed-width slot so rows don't reflow when the revert button fades in */
.wc-hist-act{flex:0 0 66px;display:flex;justify-content:flex-end;}
.wc-hist-revert{
  background:none;border:1px solid rgba(0,234,255,0.22);
  color:rgba(0,234,255,0.75);font-family:monospace;font-size:12px;
  padding:2px 9px;border-radius:5px;cursor:pointer;opacity:0;
  transition:opacity .12s,background .15s;
}
.wc-hist-row:hover .wc-hist-revert{opacity:1;}
.wc-hist-revert:hover{background:rgba(0,234,255,0.14);color:var(--neo1);}

/* ── notes ── the builder talking about itself, not an edit to the page ───── */
.wc-hist-note{
  display:flex;align-items:flex-start;gap:9px;
  margin:6px 10px;padding:8px 11px;
  border:1px solid rgba(0,234,255,0.16);border-left:2px solid rgba(0,234,255,0.5);
  border-radius:7px;background:rgba(0,234,255,0.045);
  font-size:14px;line-height:1.55;color:rgba(255,255,255,0.72);
  cursor:pointer;transition:background .12s;
}
.wc-hist-note:hover{background:rgba(0,234,255,0.08);}
.wc-hist-note-ico{flex:0 0 auto;color:var(--neo1);font-size:14px;line-height:1.4;}
.wc-hist-note-body{flex:1;min-width:0;}
.wc-hist-note-time{
  margin-left:7px;font-size:14px;font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,0.32);white-space:nowrap;
}

/* ── page / module lifecycle rows ─────────────────────────────────────────── */
.wc-hist-row-page      {border-left-color:rgba(255,166,87,0.22);}
.wc-hist-row-module    {border-left-color:rgba(168,224,99,0.22);}
.wc-hist-chip-page     {color:#ffa657;border-color:rgba(255,166,87,0.35);background:rgba(255,166,87,0.07);}
.wc-hist-chip-module   {color:#a8e063;border-color:rgba(168,224,99,0.35);background:rgba(168,224,99,0.07);}

/* ── hover card ── one card for the whole row, replacing the old pile of
   nested title="" attributes that showed a different native tooltip depending
   on which span the pointer landed on ─────────────────────────────────────── */
.wc-histtip{
  /* --neo1 is declared on #wb-root, and these two live on <body>, so the
     accent has to be re-declared here or every var(--neo1) inside them
     (.wc-hist-val, the chips, the revert button) resolves to nothing. */
  --neo1:#00eaff;
  position:fixed;display:none;z-index:10050;
  min-width:210px;max-width:340px;
  padding:9px 11px 8px;border-radius:9px;
  background:#15151b;border:1px solid rgba(0,234,255,0.2);
  box-shadow:0 14px 44px rgba(0,0,0,0.72), 0 0 0 1px rgba(0,234,255,0.05);
  font-family:var(--mono,monospace);font-size:14px;line-height:1.45;
  color:rgba(255,255,255,0.8);pointer-events:none;
}
.wc-histtip-hd{display:flex;align-items:center;gap:7px;margin-bottom:6px;}
.wc-histtip-time{
  margin-left:auto;font-size:14px;color:rgba(255,255,255,0.35);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.wc-histtip-label{
  font-size:14px;color:rgba(255,255,255,0.92);
  word-break:break-word;line-height:1.4;
}
.wc-histtip-label .wc-hist-arrow{margin:0 5px;}
.wc-histtip-kind{
  margin-top:2px;font-size:14px;color:rgba(255,255,255,0.38);
  font-family:inherit;
}
.wc-histtip-row{display:flex;align-items:baseline;gap:7px;margin-top:5px;}
.wc-histtip-k{
  flex:0 0 46px;font-size:14px;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,0.32);
}
.wc-histtip-v{
  flex:1 1 auto;min-width:0;font-size:14px;color:rgba(0,234,255,0.85);
  word-break:break-all;
}
.wc-histtip-ft{
  margin-top:8px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.07);
  font-size:14px;color:rgba(255,255,255,0.34);line-height:1.5;
}

/* ── detail card ── opened by clicking a log row ──────────────────────────── */
.wc-hist-detail-modal{
  --neo1:#00eaff;
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,0.62);backdrop-filter:blur(3px);
  animation:histd-fade .13s ease;
}
@keyframes histd-fade{from{opacity:0}to{opacity:1}}
.wc-hist-detail-content{
  width:100%;max-width:420px;max-height:82vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#191922 0%,#131318 100%);
  border:1px solid rgba(0,234,255,0.22);border-radius:12px;
  box-shadow:0 24px 70px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,234,255,0.05);
  font-family:var(--mono,monospace);
  animation:histd-pop .16s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes histd-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

.wc-hist-detail-hd{
  display:flex;align-items:flex-start;gap:9px;flex:0 0 auto;
  padding:14px 14px 12px;border-bottom:1px solid rgba(255,255,255,0.07);
}
.wc-hist-detail-hd .wc-hist-chip{margin-top:2px;}
.wc-hist-detail-title{
  flex:1 1 auto;min-width:0;font-size:15px;line-height:1.45;
  color:rgba(255,255,255,0.95);word-break:break-word;
}
.wc-hist-detail-title .wc-hist-val{color:var(--neo1);}
.wc-hist-detail-close{
  flex:0 0 auto;width:24px;height:24px;line-height:1;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);
  border-radius:6px;color:rgba(255,255,255,0.5);font-size:14px;cursor:pointer;
  transition:color .13s,background .13s,border-color .13s;
}
.wc-hist-detail-close:hover{color:#fff;background:rgba(255,90,90,0.16);border-color:rgba(255,90,90,0.35);}

.wc-hist-detail-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:10px 14px 12px;}
.wc-hist-dsep{height:1px;background:rgba(255,255,255,0.07);margin:9px 0;}
.wc-hist-drow{display:flex;align-items:flex-start;gap:10px;padding:4px 0;}
.wc-hist-dlabel{
  flex:0 0 68px;padding-top:3px;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,0.33);
}
.wc-hist-dval{
  flex:1 1 auto;min-width:0;font-size:14px;color:rgba(255,255,255,0.8);
  display:flex;flex-wrap:wrap;align-items:center;gap:5px;
  word-break:break-word;
}
.wc-hist-dmuted{color:rgba(255,255,255,0.35);}
.wc-hist-dctx{color:#ffa657;}
.wc-hist-dtext{
  font-size:14px;color:rgba(255,255,255,0.5);line-height:1.5;
  word-break:break-word;
}
.wc-hist-element-badge{
  display:inline-block;padding:2px 7px;border-radius:5px;
  background:rgba(0,234,255,0.08);border:1px solid rgba(0,234,255,0.2);
  color:rgba(0,234,255,0.85);font-family:inherit;font-size:14px;
}

/* the selector is the one thing here people want to take away, so it reads as
   a control (copy affordance + accent border), not as another read-only field */
.wc-hist-copy{
  display:inline-flex;align-items:center;gap:7px;max-width:100%;
  padding:3px 8px;border-radius:6px;cursor:pointer;
  background:rgba(255,255,255,0.045);border:1px solid rgba(255,255,255,0.1);
  font-family:inherit;text-align:left;
  transition:background .13s,border-color .13s;
}
.wc-hist-copy code{
  /* a full path is the whole point of that row — let it wrap instead of
     ellipsing away the part that makes it unique */
  min-width:0;white-space:normal;word-break:break-word;line-height:1.45;
  font-family:inherit;font-size:14px;color:rgba(255,255,255,0.85);
}
.wc-hist-copy-ico{
  flex:0 0 auto;font-size:14px;letter-spacing:.04em;
  color:rgba(255,255,255,0.3);white-space:nowrap;
}
.wc-hist-copy:hover{background:rgba(0,234,255,0.09);border-color:rgba(0,234,255,0.4);}
.wc-hist-copy:hover code{color:#dffaff;}
.wc-hist-copy:hover .wc-hist-copy-ico{color:var(--neo1);}
.wc-hist-copy.wc-hist-copied{background:rgba(125,255,176,0.12);border-color:rgba(125,255,176,0.45);}
.wc-hist-copy.wc-hist-copied .wc-hist-copy-ico{color:#7dffb0;}
/* the main selector row — bigger, accent-tinted, obviously the thing to click */
.wc-hist-copy-big{
  padding:6px 10px;
  background:rgba(0,234,255,0.07);border-color:rgba(0,234,255,0.3);
  box-shadow:inset 2px 0 0 rgba(0,234,255,0.55);
}
.wc-hist-copy-big code{font-size:14px;color:#7fefff;}
.wc-hist-copy-big .wc-hist-copy-ico{color:rgba(0,234,255,0.6);}
.wc-hist-drow-sel .wc-hist-dval{width:100%;}
.wc-hist-drow-sel .wc-hist-copy-big{flex:1 1 auto;}

.wc-hist-detail-ft{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 14px;border-top:1px solid rgba(255,255,255,0.07);
  background:rgba(255,255,255,0.015);border-radius:0 0 12px 12px;
}
.wc-hist-dbtn{
  background:rgba(0,234,255,0.08);border:1px solid rgba(0,234,255,0.32);
  color:var(--neo1);font-family:inherit;font-size:14px;
  padding:5px 12px;border-radius:6px;cursor:pointer;
  transition:background .14s,box-shadow .14s;
}
.wc-hist-dbtn:hover{background:rgba(0,234,255,0.16);box-shadow:0 0 0 1px rgba(0,234,255,0.25);}
.wc-hist-dfoot-note{
  flex:1 1 120px;min-width:0;font-size:14px;line-height:1.5;
  color:rgba(255,255,255,0.32);
}

@media (max-width:640px){
  .wc-hist-detail-content{max-width:none;}
  .wc-hist-drow{flex-direction:column;gap:3px;}
  .wc-hist-dlabel{flex:0 0 auto;padding-top:0;}
  .wc-histtip{max-width:min(340px, calc(100vw - 20px));}
}

/* ── SELECTOR USAGE PANEL (#ru) ── */
#wb-ru{padding:8px 6px}
.wc-su-head{flex-shrink:0;padding:0 2px 6px}
.wc-su-title-row{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 8px}
.wc-su-title{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,0.55)}
.wc-su-count{font-size:12px;color:rgba(255,255,255,0.32);font-family:var(--mono)}
.wc-su-search-box{position:relative;display:flex;align-items:center;margin-bottom:6px}
.wc-su-search-icon{position:absolute;left:9px;color:rgba(255,255,255,0.3);pointer-events:none}
#wb-su-search{width:100%;border:1px solid var(--border);padding:7px 10px 7px 26px;border-radius:6px;font-size:12px;color:var(--text);background:rgba(255,255,255,0.02);transition:border-color .15s,background .15s}
#wb-su-search:focus{outline:none;border-color:var(--border-hover);background:var(--item-hover-bg)}
.wc-su-filters{display:flex;flex-wrap:wrap;gap:4px}
.wc-su-filter-chip{font-size:12px;letter-spacing:.02em;padding:3px 8px;border-radius:10px;border:1px solid rgba(255,255,255,0.09);color:rgba(255,255,255,0.45);background:rgba(255,255,255,0.03);cursor:pointer;transition:all .15s;user-select:none}
.wc-su-filter-chip:hover{border-color:rgba(255,255,255,0.2);color:rgba(255,255,255,0.75)}
.wc-su-filter-chip.wc-active{border-color:rgba(0,234,255,0.4);color:#00eaff;background:rgba(0,234,255,0.1)}

/* Flat scan-able list: hairline-separated rows, one selector per line, no
   nested chip boxes — the leading . / # / : plus the colour rail carry the
   type, so the name itself gets the full width. */
.wc-su-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:0;padding:2px 2px 10px;border-top:1px solid rgba(255,255,255,0.06)}
.wc-su-empty{padding:24px 10px;text-align:center;font-size:12px;color:rgba(255,255,255,0.28);line-height:1.5}

.wc-su-item{border-bottom:1px solid rgba(255,255,255,0.05);background:transparent;transition:background .12s}
.wc-su-item:hover{background:rgba(255,255,255,0.04)}
.wc-su-item.wc-su-active{background:rgba(0,234,255,0.07)}

.wc-su-item-main{display:flex;align-items:center;gap:6px;padding:6px 6px 6px 8px;cursor:pointer;border-left:2px solid transparent}
.wc-su-item[data-type="id"]      .wc-su-item-main{border-left-color:rgba(186,130,255,0.55)}
.wc-su-item[data-type="class"]   .wc-su-item-main{border-left-color:rgba(255,170,60,0.55)}
.wc-su-item[data-type="state"]   .wc-su-item-main{border-left-color:rgba(0,220,140,0.55)}
.wc-su-item[data-type="virtual"] .wc-su-item-main{border-left-color:rgba(0,234,255,0.55)}

.wc-su-sel-text{flex:1;min-width:0;font-family:var(--mono);font-size:12px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,0.72)}
.wc-su-item[data-type="id"]      .wc-su-sel-text{color:#caa3ff}
.wc-su-item[data-type="class"]   .wc-su-sel-text{color:#ffc56b}
.wc-su-item[data-type="state"]   .wc-su-sel-text{color:#3fe3ad}
.wc-su-item[data-type="virtual"] .wc-su-sel-text{color:#5fe9ff}
.wc-su-item.wc-su-active .wc-su-sel-text{color:#00eaff}
.wc-su-usage-count{flex-shrink:0;font-size:12px;font-family:var(--mono);color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.05);border-radius:8px;padding:1px 7px;min-width:14px;text-align:center}
.wc-su-item.wc-su-active .wc-su-usage-count{color:#00eaff;background:rgba(0,234,255,0.12)}
.wc-su-usage-count.wc-su-zero{color:rgba(255,120,120,0.6);background:rgba(255,90,90,0.08)}
.wc-su-chevron{flex-shrink:0;display:flex;color:rgba(255,255,255,0.25);transition:transform .2s}
.wc-su-item.wc-su-active .wc-su-chevron{transform:rotate(90deg);color:#00eaff}

.wc-su-detail{padding:0 10px 10px 12px;display:flex;flex-direction:column;gap:6px;animation:su-detail-in .15s ease}
.wc-su-detail-sel{font-family:var(--mono);color:rgba(255,255,255,0.85);word-break:break-all}
@keyframes su-detail-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
.wc-su-detail-row{display:flex;align-items:flex-start;gap:6px;font-size:12px}
.wc-su-detail-label{flex-shrink:0;width:78px;color:rgba(255,255,255,0.32);letter-spacing:.02em}
.wc-su-detail-value{flex:1;min-width:0;color:rgba(255,255,255,0.7);display:flex;flex-wrap:wrap;gap:4px}
.wc-su-detail-none{color:rgba(255,255,255,0.25);font-style:italic}
.wc-su-detail-chip{cursor:pointer;font-size:12px;padding:2px 7px;border-radius:9px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.7);transition:all .15s}
.wc-su-detail-chip:hover{border-color:rgba(0,234,255,0.4);color:#00eaff;background:rgba(0,234,255,0.08)}
.wc-su-detail-chip.wc-su-detail-chip-anim{border-color:rgba(201,155,255,0.3);color:#c99bff}
.wc-su-detail-chip.wc-su-detail-chip-anim:hover{border-color:rgba(201,155,255,0.55);background:rgba(201,155,255,0.1)}
.wc-su-detail-chip.wc-su-detail-chip-adp{border-color:rgba(125,255,176,0.3);color:#7dffb0}
.wc-su-detail-chip.wc-su-detail-chip-adp:hover{border-color:rgba(125,255,176,0.55);background:rgba(125,255,176,0.1)}
/* Custom CSS — amber, matching the "in Custom CSS" badge on the style cards
   (.wc-card-cc-badge) so the two places that surface it read as one thing. */
.wc-su-detail-chip.wc-su-detail-chip-cc{border-color:rgba(224,164,88,0.34);color:#e0a458}
.wc-su-detail-chip.wc-su-detail-chip-cc:hover{border-color:rgba(224,164,88,0.6);background:rgba(224,164,88,0.12);color:#ffcf7a}
.wc-su-detail-yes{color:#3fe3ad}
.wc-su-detail-no{color:rgba(255,255,255,0.35)}

/* live canvas highlight — visual only, never enters edit-mode / selection state */
.wc-selector-usage-highlight{
  outline:2px solid #ffb100 !important;
  outline-offset:1px;
  background-color:rgba(255,177,0,0.12) !important;
  animation:su-pulse 1.1s ease-in-out infinite;
}
@keyframes su-pulse{
  0%,100%{outline-color:#ffb100}
  50%{outline-color:#ffe08a}
}

/* ── Top-bar account menu (avatar + dropdown) ─────────────────────── */
.wc-user-wrap{position:relative}
.wc-user-btn{position:relative;display:flex;align-items:center;gap:6px;height:34px;padding:3px 10px 3px 3px;cursor:pointer;border-radius:20px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);transition:border-color .15s,background .15s;user-select:none;box-sizing:border-box}

@media (max-width: 640px) {
  .wc-user-btn {
    height: 28px;
    padding: 2px 3px;
    gap: 0;
    border-radius: 50%;
  }

  .wc-chevron {
    display: none;
  }
}
.wc-user-btn:hover,.wc-user-btn.wc-open{border-color:rgba(0,234,255,0.4);background:rgba(0,234,255,0.07)}
.wc-avatar{width:26px;height:26px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#00eaff,#0090c8);border:1px solid rgba(0,234,255,0.4);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#052129}
.wc-avatar-guest{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.16);color:rgba(255,255,255,0.55)}
.wc-chevron{width:9px;height:9px;color:rgba(255,255,255,0.4);margin-right:2px;flex-shrink:0;transition:transform .2s,color .2s}
.wc-user-btn.wc-open .wc-chevron{transform:rotate(180deg);color:#00eaff}
.wc-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:204px;background:#141416;border:1px solid rgba(255,255,255,0.1);border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,0.55);padding:6px;z-index:99999;text-align:left;opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;transition:opacity .15s,transform .15s}
.wc-user-btn.wc-open .wc-dropdown{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.wc-dd-head{padding:9px 11px 10px;border-bottom:1px solid rgba(255,255,255,0.07);margin-bottom:4px}
.wc-dd-uname{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-dd-plan-row{margin-top:5px}
.wc-plan-chip{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2.5px 7px;border-radius:999px;display:inline-block}
.wc-plan-free{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);color:rgba(255,255,255,0.45)}
.wc-plan-pro{background:rgba(191,0,255,0.12);border:1px solid rgba(191,0,255,0.35);color:#d370ff}
.wc-dd-link{display:block;width:100%;box-sizing:border-box;text-align:left;padding:9px 11px;border-radius:8px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,0.65);text-decoration:none;background:none;border:none;cursor:pointer;font-family:inherit;transition:background .12s,color .12s}
.wc-dd-link:hover{background:rgba(255,255,255,0.06);color:#fff}
.wc-dd-link-ico{display:flex;align-items:center;gap:8px}
.wc-dd-link-ico svg{flex-shrink:0;opacity:.75}
.wc-dd-sep{height:1px;background:rgba(255,255,255,0.07);margin:5px 4px}
.wc-dd-logout{display:block;width:100%;box-sizing:border-box;text-align:left;padding:9px 11px;border-radius:8px;font-size:12.5px;font-weight:600;color:rgba(255,80,110,0.8);text-decoration:none;background:none;border:none;cursor:pointer;font-family:inherit;transition:background .12s,color .12s}
.wc-dd-logout:hover{background:rgba(255,45,120,0.1);color:#ff5580}

/* ── Light-mode dropdown overrides ──────────────────────────────────── */
#wb-root.wc-light .wc-dropdown{background:#fff;border-color:rgba(0,0,0,0.12);box-shadow:0 12px 36px rgba(0,0,0,0.16)}
#wb-root.wc-light .wc-dd-head{border-bottom-color:rgba(0,0,0,0.08)}
#wb-root.wc-light .wc-dd-uname{color:#111}
#wb-root.wc-light .wc-dd-link{color:rgba(0,0,0,0.65)}
#wb-root.wc-light .wc-dd-link:hover{background:rgba(0,0,0,0.05);color:#000}
#wb-root.wc-light .wc-dd-sep{background:rgba(0,0,0,0.08)}
#wb-root.wc-light .wc-plan-free{background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.12);color:rgba(0,0,0,0.45)}
#wb-root.wc-light .wc-user-btn{background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.14)}
#wb-root.wc-light .wc-user-btn:hover,#wb-root.wc-light .wc-user-btn.wc-open{border-color:rgba(0,100,200,0.5);background:rgba(0,100,200,0.07)}
#wb-root.wc-light .wc-chevron{color:rgba(0,0,0,0.35)}
#wb-root.wc-light .wc-user-btn.wc-open .wc-chevron{color:#0078c8}

/* ── Settings modal ────────────────────────────────────────────────── */
.wc-qb-settings-block{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,0.06)}
.wc-qb-settings-block:last-child{border-bottom:none}
.wc-qb-settings-block-title{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:12px}
.wc-qb-settings-account-row{display:flex;align-items:center;gap:12px}
.wc-qb-settings-prefs-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wc-qb-settings-prefs-label{font-size:12.5px;color:rgba(255,255,255,0.75);display:flex;align-items:center;gap:8px;cursor:pointer}
.wc-qb-settings-saved{font-size:12px;color:#00eaff;margin-left:8px;display:none;flex-shrink:0}
.wc-qb-settings-guest-note{font-size:12px;color:rgba(255,255,255,0.4);margin:8px 0 0}
.wc-qb-settings-guest-note a{color:#00eaff;text-decoration:none}
.wc-qb-settings-close{background:none;border:none;color:rgba(255,255,255,0.4);cursor:pointer;font-size:15px;padding:4px 9px;border-radius:6px;transition:background .12s,color .12s;line-height:1}
.wc-qb-settings-close:hover{background:rgba(255,255,255,0.08);color:#fff}

/* ── Property info popup (the "i" button on each style property row) ── */
.wc-pinfo-overlay{position:fixed;inset:0;background:rgba(6,8,10,0.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:10050;opacity:0;pointer-events:none;transition:opacity .2s}
.wc-pinfo-overlay.wc-open{opacity:1;pointer-events:all}
.wc-pinfo-modal{
  --accent:#00eaff;--text:rgba(255,255,255,0.7);--text-hi:rgba(255,255,255,0.92);--muted:rgba(255,255,255,0.42);
  --border:rgba(0,234,255,0.2);--bg-panel:#17171a;--bg-panel-2:#1c1c20;
  display:flex;flex-direction:column;
  background:var(--bg-panel);color:var(--text-hi);border:1px solid var(--border);border-radius:14px;
  width:420px;max-width:92vw;max-height:min(640px,85vh);overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.85),0 0 0 1px rgba(0,234,255,.08);
  transform:translateY(14px) scale(.96);opacity:0;
  transition:transform .24s cubic-bezier(.34,1.46,.64,1),opacity .18s;
  font-family:inherit;
}
.wc-pinfo-overlay.wc-open .wc-pinfo-modal{transform:translateY(0) scale(1);opacity:1}
.wc-pinfo-scrollarea{overflow-y:auto;flex:1;min-height:0}
.wc-pinfo-head{
  display:flex;align-items:flex-start;gap:10px;padding:16px 18px;
  border-bottom:1px solid var(--border);background:var(--bg-panel);flex-shrink:0;
}
.wc-pinfo-head-icon{
  color:var(--accent);flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:9px;background:rgba(0,234,255,.1);margin-top:1px;
}
.wc-pinfo-head-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.wc-pinfo-head-title{font-size:16px;font-weight:600;color:var(--text-hi);line-height:1.25}
.wc-pinfo-head-kebab{font-family:'SFMono-Regular',Consolas,monospace;font-size:12.5px;color:var(--accent);background:rgba(0,234,255,.08);border:1px solid rgba(0,234,255,.18);border-radius:5px;padding:1px 6px;width:fit-content}
.wc-pinfo-close{flex-shrink:0;width:28px;height:28px;border:none;background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer;border-radius:7px;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s,color .15s}
.wc-pinfo-close:hover{color:var(--text-hi);background:rgba(255,255,255,.1)}
.wc-pinfo-close:focus-visible,.wc-pinfo-info-focusable:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.wc-pinfo-desc{padding:16px 18px 4px;font-size:14px;line-height:1.65;color:var(--text)}
.wc-pinfo-demo{margin:16px 18px 18px;padding:14px;border:1px solid var(--border);border-radius:10px;background:var(--bg-panel-2)}
.wc-pinfo-demo-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.wc-pinfo-demo-dot{width:6px;height:6px;border-radius:50%;background:#00ff88;box-shadow:0 0 0 0 rgba(0,255,136,.6);flex-shrink:0;animation:wc-pinfo-pulse 1.8s ease-out infinite}
@keyframes wc-pinfo-pulse{
  0%{box-shadow:0 0 0 0 rgba(0,255,136,.5)}
  70%{box-shadow:0 0 0 5px rgba(0,255,136,0)}
  100%{box-shadow:0 0 0 0 rgba(0,255,136,0)}
}
.wc-pinfo-stage{
  display:flex;align-items:center;justify-content:center;min-height:110px;
  /* The checker isn't decoration — several demos (backgroundColor's "transparent"
     toggle, background-clip, background-origin, background-size:auto) point at it
     by name to show real CSS transparency, so it has to stay. Kept calm/subtle
     (two close dark grays, no stark white) so it reads as "this is transparent"
     rather than as visual noise. */
  background-color:#121214;
  background-image:repeating-conic-gradient(#2a2a2e 0% 25%, transparent 0% 50%);
  background-size:14px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;margin-bottom:12px;padding:14px;position:relative;overflow:hidden;
  transform:translateZ(0); /* creates a containing block so a demoed position:fixed can't escape the popup */
}
.wc-pinfo-stage.wc-pinfo-scroll{overflow-y:auto;display:block}
.wc-pinfo-box{background:linear-gradient(135deg,#00eaff,#0084ff);color:#031018;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;box-sizing:border-box;transition:border-radius .1s,width .05s,height .05s}
.wc-pinfo-note{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:8px}

.wc-pinfo-caption{
  display:flex;align-items:flex-start;gap:7px;font-size:13px;line-height:1.55;color:var(--text-hi);
  background:rgba(0,234,255,.06);border:1px solid rgba(0,234,255,.16);border-radius:7px;
  padding:9px 10px;margin-bottom:10px;
}
.wc-pinfo-caption-mark{color:#00eaff;flex-shrink:0;font-size:13px;line-height:1.6}

.wc-pinfo-legend{display:flex;gap:14px;font-size:12.5px;color:var(--muted);margin-bottom:10px}
.wc-pinfo-legend span{display:flex;align-items:center;gap:5px}
.wc-pinfo-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;flex-shrink:0}
.wc-pinfo-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text)}
.wc-pinfo-row+.wc-pinfo-row{margin-top:9px}
.wc-pinfo-row-label{min-width:78px;flex-shrink:0}

.wc-pinfo-row input[type=range]{
  flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:99px;
  background:linear-gradient(90deg,#00eaff var(--wc-pinfo-fill,50%),rgba(255,255,255,.12) 0);
  outline:none;cursor:pointer;
}
.wc-pinfo-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
  background:#00eaff;border:2px solid #0a1114;box-shadow:0 1px 4px rgba(0,0,0,.5);
  cursor:pointer;transition:transform .12s;
}
.wc-pinfo-row input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
.wc-pinfo-row input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:#00eaff;border:2px solid #0a1114;
  box-shadow:0 1px 4px rgba(0,0,0,.5);cursor:pointer;
}
.wc-pinfo-row input[type=range]::-moz-range-track{height:4px;border-radius:99px;background:rgba(255,255,255,.12)}

.wc-pinfo-row select{
  flex:1;min-width:0;-webkit-appearance:none;appearance:none;
  background:#101013 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M1 1l4 4 4-4" fill="none" stroke="%2300eaff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 8px center;
  border:1px solid var(--border);color:var(--text-hi);border-radius:6px;padding:5px 24px 5px 8px;
  font-size:13px;font-family:inherit;cursor:pointer;transition:border-color .15s;
}
.wc-pinfo-row select:hover{border-color:rgba(0,234,255,.45)}
.wc-pinfo-row select:focus-visible{outline:none;border-color:#00eaff}

/* App-styled dropdown used in the info-popup demos (replaces the native <select>) */
.wc-pinfo-dd{position:relative;flex:1;min-width:0}
.wc-pinfo-dd-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#101013;border:1px solid var(--border);color:var(--text-hi);border-radius:6px;padding:5px 8px;font-size:13px;cursor:pointer;user-select:none;transition:border-color .15s}
.wc-pinfo-dd-trigger:hover{border-color:rgba(0,234,255,.45)}
.wc-pinfo-dd-trigger:focus-visible,.wc-pinfo-dd.wc-open .wc-pinfo-dd-trigger{outline:none;border-color:#00eaff}
.wc-pinfo-dd-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-pinfo-dd-arrow{flex:0 0 auto;display:flex;transition:transform .15s}
.wc-pinfo-dd.wc-open .wc-pinfo-dd-arrow{transform:rotate(180deg)}
.wc-pinfo-dd-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;display:none;flex-direction:column;max-height:180px;overflow-y:auto;background:#101013;border:1px solid rgba(0,234,255,.35);border-radius:6px;padding:4px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.wc-pinfo-dd.wc-pinfo-dd-up .wc-pinfo-dd-panel{top:auto;bottom:calc(100% + 4px)}
.wc-pinfo-dd.wc-open .wc-pinfo-dd-panel{display:flex}
.wc-pinfo-dd-item{padding:6px 8px;border-radius:4px;font-size:13px;color:var(--text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-pinfo-dd-item:hover{background:rgba(0,234,255,.12)}
.wc-pinfo-dd-item.wc-selected{background:rgba(0,234,255,.18);color:var(--text-hi);font-weight:600}

.wc-pinfo-row input[type=color]{width:30px;height:24px;border:1px solid var(--border);border-radius:4px;padding:0;background:none;cursor:pointer;flex-shrink:0}
.wc-pinfo-row input[type=color]:disabled{opacity:.35;cursor:not-allowed}
.wc-pinfo-val{min-width:46px;text-align:right;color:#00eaff;font-family:'SFMono-Regular',Consolas,monospace;font-size:13px;flex-shrink:0}

.wc-pinfo-check-label{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--text)}
.wc-pinfo-check{
  -webkit-appearance:none;appearance:none;width:15px;height:15px;flex-shrink:0;margin:0;
  border:1.5px solid var(--border);border-radius:4px;background:#101013;cursor:pointer;
  position:relative;transition:background .12s,border-color .12s;
}
.wc-pinfo-check:checked{background:#00eaff;border-color:#00eaff}
.wc-pinfo-check:checked::after{
  content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #031018;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.wc-pinfo-check:hover{border-color:rgba(0,234,255,.5)}

body.wc-pinfo-lock{overflow:hidden}

/* ── Custom tooltips (customTooltip.js) ───────────────────────────────
   On-brand replacement for native title="" bubbles: dark glass, cyan hairline,
   arrow pointer, quick fade+rise. Fixed-positioned on <body>, above everything. */
.wb-tip{
  position:fixed;top:0;left:0;z-index:2147483000;
  max-width:260px;
  padding:6px 10px;
  font-family:inherit;
  font-size:12px;line-height:1.45;letter-spacing:.01em;
  color:rgba(255,255,255,0.92);
  background:linear-gradient(180deg,#16212b,#0d151c);
  border:1px solid rgba(0,234,255,0.28);
  border-radius:7px;
  box-shadow:0 8px 26px rgba(0,0,0,0.55),0 0 0 1px rgba(0,234,255,0.06),
             inset 0 1px 0 rgba(255,255,255,0.05);
  white-space:pre-line;      /* honor newlines in the original title text */
  word-break:break-word;
  pointer-events:none;       /* never eat hover from what it describes */
  opacity:0;visibility:hidden;
  transform:translateY(4px);
  transition:opacity .13s ease,transform .13s cubic-bezier(.34,1.4,.64,1);
}
/* A thin cyan cap along the top edge to echo the panel accents. */
.wb-tip::before{
  content:"";position:absolute;left:8px;right:8px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,234,255,0.75),transparent);
}
.wb-tip-measure{visibility:hidden!important;opacity:0!important;}  /* laid out only to measure */
.wb-tip-show{opacity:1;visibility:visible;transform:translateY(0);}
.wb-tip-below.wb-tip-show{transform:translateY(0);}

/* Arrow — a rotated square that inherits the tip's fill + border for a seamless join. */
.wb-tip-arrow{
  position:absolute;left:var(--wb-arrow-x,50%);
  width:8px;height:8px;
  background:#0d151c;
  border:1px solid rgba(0,234,255,0.28);
  transform:translateX(-50%) rotate(45deg);
}
.wb-tip:not(.wb-tip-below) .wb-tip-arrow{
  bottom:-5px;border-top:none;border-left:none;   /* pointing down */
}
.wb-tip-below .wb-tip-arrow{
  top:-5px;border-bottom:none;border-right:none;   /* pointing up */
  background:#16212b;
}


/* ════════════════════════════════════════════════════════════════
   ANIMATE ON SCROLL  (scrollAnimate.js)
   Right-panel "Scroll" section + the full-screen editor popup.
   ════════════════════════════════════════════════════════════════ */

/* ── Right panel section (#wb-rsa) ── */
/* The panel's section-heading style is written as `#wb-ra .wc-ra-lbl`, so
   re-state it here rather than leaving this heading as plain body text. */
#wb-rsa .wc-ra-lbl{font-size:12px;color:rgba(255,255,255,.35);margin:0 0 10px;padding-left:1px;letter-spacing:.06em;text-transform:uppercase;}
#wb-rsa .wc-sa-target-row{display:flex;align-items:center;gap:6px;margin-bottom:9px;min-width:0;}
#wb-rsa .wc-sa-target-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0;box-shadow:0 0 5px rgba(0,234,255,.6);}
#wb-rsa .wc-sa-target-dot.wc-off{background:rgba(255,255,255,.18);box-shadow:none;}
#wb-rsa .wc-sa-target-sel{font-size:12px;font-family:var(--mono,monospace);color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.wc-sa-add-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:7px;
  background:linear-gradient(180deg,rgba(0,234,255,.16),rgba(0,234,255,.07));
  border:1px solid rgba(0,234,255,.34);border-radius:8px;
  color:#8ff4ff;font-family:inherit;font-size:12px;font-weight:500;letter-spacing:.02em;
  padding:9px 10px;cursor:pointer;transition:background .14s,border-color .14s,color .14s,transform .1s;
}
.wc-sa-add-btn:hover:not(:disabled){background:linear-gradient(180deg,rgba(0,234,255,.28),rgba(0,234,255,.12));border-color:rgba(0,234,255,.6);color:#fff;}
.wc-sa-add-btn:active:not(:disabled){transform:scale(.985);}
/* "＋" only appears once the element already has an animation — the main button
   then edits that one, and this is how a second gets added. */
.wc-sa-add-row{display:flex;align-items:stretch;gap:5px;}
.wc-sa-add-row .wc-sa-add-btn{flex:1;min-width:0;}
.wc-sa-add-new{
  flex:0 0 auto;width:34px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:8px;
  color:rgba(255,255,255,.6);font-family:inherit;font-size:15px;line-height:1;
  cursor:pointer;transition:background .14s,border-color .14s,color .14s;
}
.wc-sa-add-new:hover{background:rgba(0,234,255,.12);border-color:rgba(0,234,255,.45);color:#8ff4ff;}
.wc-sa-add-btn:disabled{opacity:.4;cursor:not-allowed;background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.53);}

#wb-rsa .wc-sa-lbl{display:flex;align-items:center;gap:6px;font-size:14px;color:rgba(255,255,255,.53);margin:13px 0 5px;letter-spacing:.06em;text-transform:uppercase;}
#wb-rsa .wc-sa-count{font-size:14px;color:#00eaff;background:rgba(0,234,255,.09);border:1px solid rgba(0,234,255,.16);border-radius:3px;padding:0 4px;letter-spacing:0;}
#wb-rsa .wc-sa-empty-line{font-size:14px;color:rgba(255,255,255,.4);padding:2px 1px 4px;line-height:1.5;}
#wb-rsa .wc-sa-hint{font-size:14px;color:rgba(255,255,255,.42);line-height:1.55;margin-top:14px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06);}
#wb-rsa .wc-sa-hint strong{color:rgba(255,255,255,.45);font-weight:500;}

.wc-sa-list{display:flex;flex-direction:column;gap:4px;}
.wc-sa-row{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:7px 9px;border-radius:7px;cursor:pointer;
  border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);
  transition:background .14s,border-color .14s;min-width:0;
}
.wc-sa-row:hover{background:rgba(0,234,255,.08);border-color:rgba(0,234,255,.28);}
.wc-sa-row-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.wc-sa-row-name{font-size:12px;color:rgba(255,255,255,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wc-sa-row-meta{font-size:12px;color:rgba(255,255,255,.48);font-family:var(--mono,monospace);letter-spacing:.02em;}
.wc-sa-row-sel{font-size:12px;color:rgba(0,234,255,.5);font-family:var(--mono,monospace);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wc-sa-row-warn{font-size:12px;color:#ffb347;}
.wc-sa-row-orphan{border-color:rgba(255,179,71,.25);}
.wc-sa-row-off{opacity:.45;}
.wc-sa-row-open{color:rgba(255,255,255,.38);opacity:0;transition:opacity .14s;flex-shrink:0;display:flex;}
.wc-sa-row:hover .wc-sa-row-open{opacity:1;color:#00eaff;}

.wc-sa-ctx{position:fixed;z-index:99999;background:#1e1e2e;border:1px solid rgba(0,234,255,.25);border-radius:6px;padding:4px 0;min-width:130px;box-shadow:0 6px 20px rgba(0,0,0,.55);}
.wc-sa-ctx-item{padding:7px 14px;font-size:13px;color:rgba(255,255,255,.82);cursor:pointer;white-space:nowrap;}
.wc-sa-ctx-item:hover{background:rgba(0,234,255,.1);color:#fff;}
.wc-sa-ctx-del{color:#ff6b6b;}
.wc-sa-ctx-del:hover{background:rgba(255,80,80,.12);color:#ff4040;}

/* the shortcut button that lives in the Animation tab */
.wc-sa-ra-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:6px;
  background:rgba(0,234,255,.06);border:1px solid rgba(0,234,255,.2);border-radius:6px;
  color:rgba(0,234,255,.75);font-family:inherit;font-size:12px;padding:7px 9px;
  cursor:pointer;margin-bottom:9px;transition:background .12s,border-color .12s,color .12s;
}
.wc-sa-ra-btn:hover{background:rgba(0,234,255,.14);border-color:rgba(0,234,255,.45);color:#fff;}
.wc-sa-ra-count{
  display:none;align-items:center;justify-content:center;min-width:15px;height:15px;
  border-radius:8px;background:rgba(0,234,255,.2);color:#bff8ff;font-size:12px;padding:0 4px;
}
/* .wc-icon-tab is already position:relative (see above), which is what this
   "the project has scroll animations" dot anchors to. */
#wb-rsa-tab-dot{
  position:absolute;top:7px;right:7px;width:5px;height:5px;border-radius:50%;
  background:var(--accent,#00eaff);box-shadow:0 0 5px rgba(0,234,255,.8);display:none;
}

/* ── The Scroll Studio ─────────────────────────────────────────────────────
   Nine regions in one dialog (see the map at the top of scrollAnimate.js):
   ① left rail = scroll features   ② top bar = name + selectors
   ③ frames    ④ properties        ⑤ presets
   ⑥ selector list  ⑦ property timelines  ⑧ keyframe ruler  ⑨ preview      */

.wc-sa-overlay{
  position:fixed;inset:0;z-index:9600;
  background:rgba(4,7,10,.74);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:10px;
  opacity:0;transition:opacity .18s;

  /* The palette the app's own property icons paint with.
     _sa_propIcon() reuses playground.html's ICON map wherever an entry exists,
     and those SVGs are authored against tokens declared on #wb-root — but this
     overlay is appended to document.body, a SIBLING of #wb-root, so none of
     them inherit here. An unresolved var() in `fill` is invalid at computed
     value time, and `fill` is an inherited SVG property whose initial value is
     black: every icon with an ICON entry (backgroundColor, opacity, boxShadow,
     fontSize, padding…) painted black on a near-black panel, while the ones
     falling back to _SA_ICONS looked right because those use currentColor.
     Same values as #wb-root so an icon reads identically in both places. */
  --neo1:#00eaff;--neo2:#bf00ff;--neo3:#ff2d78;--neo4:#E0E722;
  --tab-active:#00eaff;--border:rgba(0,234,255,0.18);--border-hover:#00eaff80;
  --dimension:#22c55e;--outline:#a78bfa;--margin:#f59e0b;--padding:#34d399;
  --bg-color:#141414;--bg-base:#0d0d0d;--bg-panel:#141414;
  --text-active:#fff;--text-tab:rgba(255,255,255,0.35);
}
.wc-sa-overlay.wc-open{opacity:1;}
.wc-sa-studio{
  --accent:#00eaff;--sa-line:rgba(255,255,255,.08);--sa-gut:100px;--sa-side:108px;
  /* The top of the dialog's own gradient — the ring that punches the unsaved
     dot out of the Save button has to match whatever is behind the button. */
  --sa-head-bg:#10161b;
  position:relative;
  /* Big enough to fill a laptop screen. ⑨ is the only region whose usefulness
     scales with its size — the rails are lists of controls and read the same at
     any width, but a page shown at 30% is a page nobody can judge — so every
     pixel the dialog gains is handed to the middle column. */
  /* A window, not a takeover. Edge-to-edge read as "the app is gone" rather than
     "a tool is open", so the backdrop stays visible on every side — but the
     margin is thin, because ⑨ is the one region whose usefulness scales with
     its size and every pixel not spent on chrome goes to it. */
  width:min(1800px,90vw);height:min(980px,90vh);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#10161b,#0b0f13);
  border:1px solid rgba(0,234,255,.24);border-radius:14px;
  box-shadow:0 30px 90px rgba(0,0,0,.85),0 0 0 1px rgba(0,234,255,.06);
  color:rgba(255,255,255,.85);font-family:inherit;
  transform:translateY(12px) scale(.985);transition:transform .2s cubic-bezier(.34,1.4,.64,1);
  overflow:hidden;
}
.wc-sa-overlay.wc-open .wc-sa-studio{transform:none;}

/* ── dialog chrome ──
   ONE band. It carries the identity of the thing being edited (its name, which
   is the title — there is no second one) and the single button that commits it.
   Everything reached once a session lives in the ⋯ menu. */
.wc-sa-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 12px;border-bottom:1px solid var(--sa-line);flex-shrink:0;}
.wc-sa-head-l{display:flex;align-items:center;gap:9px;min-width:0;flex:1;color:var(--accent);}
.wc-sa-head-l>svg{flex-shrink:0;}
.wc-sa-head-r{display:flex;align-items:center;gap:7px;flex-shrink:0;}
.wc-sa-head-hits{font-size:14px;color:rgba(255,255,255,.53);white-space:nowrap;flex-shrink:0;}
.wc-sa-head-hits.wc-sa-warn{color:#ffb347;}
.wc-sa-x{
  background:none;border:none;color:rgba(255,255,255,.58);font-size:16.5px;cursor:pointer;
  width:26px;height:26px;border-radius:6px;line-height:1;transition:background .12s,color .12s;
}
.wc-sa-x:hover{background:rgba(255,255,255,.08);color:#fff;}
.wc-sa-mini-btn{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.62);
  font-family:inherit;font-size:14px;padding:4px 9px;border-radius:5px;cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s;
}
.wc-sa-mini-btn:hover:not(:disabled){background:rgba(0,234,255,.14);border-color:rgba(0,234,255,.4);color:#fff;}
.wc-sa-mini-btn:disabled{opacity:.35;cursor:not-allowed;}
.wc-sa-mini-btn.wc-active{background:rgba(0,234,255,.18);border-color:rgba(0,234,255,.55);color:#fff;}

.wc-sa-grid{
  flex:1;min-height:0;
  /* 236px was set when every property was one line — a name and a text box.
     They are real controls now (a filter stack, four shadow sliders, a nine-
     point pad), and those were being folded into a column narrower than the
     Design panel they came from. The middle stays minmax(0,1fr), so the
     preview gives up the difference rather than anything overflowing. */
  display:grid;grid-template-columns:var(--sa-col-l,198px) minmax(0,1fr) var(--sa-col-r,306px);
}
.wc-sa-mid{display:flex;flex-direction:column;min-width:0;min-height:0;}

/* ── folding the rails away ──────────────────────────────────────────────
   ⑨ is the only region that is worth more the bigger it is, so each rail can
   be folded flat and handed to it. Folded means gone, not narrow: a 40px
   sliver of a settings rail helps nobody. */
.wc-sa-studio.wc-fold-l{--sa-col-l:0px;}
.wc-sa-studio.wc-fold-r{--sa-col-r:0px;}
.wc-sa-studio.wc-fold-l .wc-sa-side{display:none;}
.wc-sa-studio.wc-fold-r .wc-sa-right{display:none;}
.wc-sa-studio.wc-fold-b .wc-sa-tl{display:none;}
.wc-sa-fold-btn{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.55);font-family:inherit;font-size:15px;line-height:1;
  padding:4px 7px;border-radius:5px;cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
.wc-sa-fold-btn:hover{background:rgba(0,234,255,.14);border-color:rgba(0,234,255,.4);color:#fff;}
/* Lit when the rails ARE folded away. There is one button now rather than four,
   and it is a mode you are in ("nothing but the preview"), not a panel you are
   hiding — so lit means the mode is on, and pressing it again comes back. */
.wc-sa-fold-btn.wc-off{background:rgba(0,234,255,.16);color:#fff;border-color:rgba(0,234,255,.45);}

/* ── the ⋯ menu ──
   Code, the three panel switches and Delete. Each of those was its own button
   in the header; together they were more chrome than the dialog's actual
   subject. They are all once-a-session controls, so they wait to be asked for. */
.wc-sa-menu-wrap{position:relative;display:inline-flex;}
.wc-sa-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:210px;
  background:#111a20;border:1px solid rgba(0,234,255,.25);border-radius:9px;
  box-shadow:0 16px 40px rgba(0,0,0,.7);padding:5px;
}
.wc-sa-menu-i{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:none;border:none;border-radius:6px;cursor:pointer;
  font-family:inherit;font-size:14px;color:rgba(255,255,255,.75);padding:6px 8px;
  transition:background .12s,color .12s;
}
.wc-sa-menu-i:hover{background:rgba(0,234,255,.12);color:#fff;}
.wc-sa-menu-i b{flex-shrink:0;width:15px;font-weight:400;font-size:14px;color:rgba(255,255,255,.42);text-align:center;}
.wc-sa-menu-i:hover b{color:var(--accent);}
.wc-sa-menu-tick{color:var(--accent)!important;font-weight:700!important;}
.wc-sa-menu-i.wc-danger{color:rgba(255,120,120,.85);}
.wc-sa-menu-i.wc-danger:hover{background:rgba(255,107,107,.14);color:#ff8f8f;}
.wc-sa-menu-i.wc-danger b{color:rgba(255,120,120,.6);}
.wc-sa-menu-sep{height:1px;background:rgba(255,255,255,.08);margin:4px 2px;}
.wc-sa-menu-grp{font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.35);padding:3px 9px 2px;}

/* ── ⑨'s two modes ──
   Labelled, not two bare glyphs. "☞" and "◎" side by side are a puzzle; the
   whole studio hinges on knowing which of the two you are in, because in one a
   click uses the page and in the other it retargets the animation. */
.wc-sa-mode{display:flex;gap:2px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:2px;}
.wc-sa-mode-btn{
  background:none;border:none;border-radius:4px;cursor:pointer;font-family:inherit;
  color:rgba(255,255,255,.5);font-size:14px;padding:4px 9px;white-space:nowrap;
  transition:background .12s,color .12s;
}
.wc-sa-mode-btn:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);}
.wc-sa-mode-btn.wc-active{background:rgba(0,234,255,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(0,234,255,.45);}
.wc-sa-inline-go{color:var(--accent);cursor:pointer;border-bottom:1px dashed rgba(0,234,255,.5);}

/* ── "add a keyframe at…", inline in the chip row ──
   The same shape the bottom animation panel's KF bar uses, so adding a frame is
   one gesture in both places (see _sa_mountFrameStepper / renderAnimKFBar).
   .wc-number-param sizes itself off the VIEWPORT (clamp(28px,5vw,36px)), which
   is far too big for this rail — pinned here, the same way .wc-sa-pval pins the
   shared slider widget. */
.wc-sa-fadd{display:inline-flex;align-items:center;gap:4px;}
.wc-sa-fadd-np.wc-number-param{border-color:rgba(0,234,255,.5);background:#0e1418;font-size:14px;}
.wc-sa-fadd-np .wc-numberParamUpdate{width:20px;height:20px;font-size:15px;}
.wc-sa-fadd-np .wc-number-param-val{min-width:30px;line-height:20px;font-size:14px;}
.wc-sa-fadd-val{outline:none;min-width:26px;text-align:center;}
.wc-sa-fadd-ok{cursor:pointer;color:var(--accent);font-size:15px;line-height:1;padding:0 3px;}
.wc-sa-fadd-ok:hover{color:#fff;}
/* Frames take what they need; the other two share what is left. The presets
   used to get the smaller share, which showed one and a half rows of a gallery
   whose whole point is being browsed — so the split is now the other way up. */
.wc-sa-right{border-left:1px solid var(--sa-line);display:grid;grid-template-rows:auto minmax(0,1fr) minmax(0,1.25fr);min-height:0;}

/* ══ ① SCROLL FEATURES ══════════════════════════════════════════════════
   Four questions above the fold, the occasional ones behind "More options".
   There is no rail title any more: a heading that says "Scroll features" on the
   scroll-features rail of the scroll dialog is a line of text doing no work. */
.wc-sa-side{border-right:1px solid var(--sa-line);overflow-y:auto;padding:10px 9px 12px;}
.wc-sa-sd-sect{margin-bottom:13px;}
.wc-sa-sd-hd{display:flex;align-items:baseline;justify-content:space-between;gap:6px;font-size:14px;color:rgba(255,255,255,.5);margin-bottom:6px;}
.wc-sa-sd-hd em{font-style:normal;font-size:14px;color:var(--accent);opacity:.8;font-family:var(--mono,monospace);}
.wc-sa-sd-foot{font-size:14px;color:rgba(255,255,255,.42);line-height:1.55;border-top:1px solid rgba(255,255,255,.06);padding-top:9px;margin-top:12px;}
.wc-sa-sd-foot b{color:rgba(255,255,255,.45);font-weight:500;}

.wc-sa-note{
  font-size:14px;color:rgba(255,255,255,.52);line-height:1.45;margin-top:5px;padding-left:1px;
}
/* The explanation each section used to print permanently, now on demand. */
.wc-sa-info{
  font-style:normal;font-size:14px;color:rgba(255,255,255,.3);margin-left:4px;
  cursor:help;transition:color .12s;
}
.wc-sa-info:hover{color:var(--accent);}
.wc-sa-seg{display:flex;gap:3px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:7px;padding:3px;}
.wc-sa-seg-btn{
  flex:1;background:none;border:none;border-radius:5px;cursor:pointer;font-family:inherit;
  color:rgba(255,255,255,.5);font-size:14px;padding:5px 4px;transition:background .12s,color .12s;
  /* Two-word labels ("On scroll", "This element") wrap at the space in a narrow
     sidebar and make one row of the segmented control taller than its
     neighbours. flex:1 with auto min-width still gives every button its
     content width, so nowrap costs nothing here. */
  white-space:nowrap;
}
.wc-sa-seg-btn:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.8);}
.wc-sa-seg-btn.wc-active{background:rgba(0,234,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(0,234,255,.35);}


/* The range picker now lives on the preview itself — see the rail under ⑨.
   All this section keeps is the line telling you where to look. */
/* Body copy, not an accent. Four lines of half-transparent cyan is a colour
   nobody can read a sentence in — the accent belongs on the one word that
   points at the rail, which the markup marks up itself. */
.wc-sa-chips{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:7px;}
.wc-sa-chip{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.55);
  font-family:inherit;font-size:14px;padding:3px 7px;border-radius:20px;cursor:pointer;transition:all .12s;
}
.wc-sa-chip:hover{border-color:rgba(0,234,255,.4);color:#fff;}
.wc-sa-chip.wc-active{background:rgba(0,234,255,.16);border-color:rgba(0,234,255,.5);color:#fff;}
.wc-sa-num-pair{display:inline-flex;align-items:center;gap:3px;margin-left:auto;}
.wc-sa-num-pair span{font-size:14px;color:rgba(255,255,255,.48);}
.wc-sa-num-pair input{
  width:44px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.12);border-radius:5px;
  color:rgba(255,255,255,.85);font-family:var(--mono,monospace);font-size:14px;padding:2px 4px;text-align:center;
}
.wc-sa-num-pair input::-webkit-outer-spin-button,.wc-sa-num-pair input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

.wc-sa-sd-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.wc-sa-fld{display:flex;flex-direction:column;gap:3px;min-width:0;}
.wc-sa-fld>span{font-size:14px;color:rgba(255,255,255,.58);}
.wc-sa-fld-row{flex-direction:row;align-items:center;justify-content:space-between;gap:8px;margin-top:7px;}
.wc-sa-input{
  width:100%;min-width:0;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.12);border-radius:5px;
  color:rgba(255,255,255,.85);font-family:var(--mono,monospace);font-size:14px;padding:5px 6px;outline:none;
}
.wc-sa-input:focus{border-color:rgba(0,234,255,.5);}
.wc-sa-input:disabled{opacity:.4;}
select.wc-sa-input{cursor:pointer;}
select.wc-sa-input option{background:#0e1418;}
.wc-sa-unit{display:flex;align-items:center;gap:4px;}
.wc-sa-unit em{font-style:normal;font-size:14px;color:rgba(255,255,255,.48);}
.wc-sa-check{display:flex;align-items:center;gap:7px;font-size:14px;color:rgba(255,255,255,.5);cursor:pointer;margin-top:2px;}
.wc-sa-check input{accent-color:var(--accent);width:13px;height:13px;cursor:pointer;}
/* Scrub's timing section, which has no fields to show — better than two boxes
   greyed out, which read as something the user has broken. */
.wc-sa-sd-inert{font-size:14px;color:rgba(255,255,255,.42);font-style:italic;padding:3px 1px;}

/* ── "More options" ── */
.wc-sa-more{
  display:flex;align-items:center;gap:6px;width:100%;
  background:none;border:none;border-top:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.5);font-family:inherit;font-size:14px;
  padding:9px 2px 8px;margin-top:3px;cursor:pointer;transition:color .12s;
}
.wc-sa-more:hover{color:#fff;}
.wc-sa-more-caret{display:inline-block;transition:transform .15s;font-size:15px;line-height:1;color:rgba(255,255,255,.4);}
.wc-sa-more.wc-open .wc-sa-more-caret{transform:rotate(90deg);color:var(--accent);}
/* A setting changed in here must never be invisible just because the drawer
   was closed again. */
.wc-sa-more-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px rgba(0,234,255,.7);}
.wc-sa-more-body{padding-top:4px;}

/* ══ ② TARGETS + PLAYBACK, one band ═════════════════════════════════════
   Was two full-width rows stacked: the elements on one, the play controls on
   the next. Same question ("what runs, and show me it run") asked twice, at a
   cost of ~44px taken straight off the preview. */
.wc-sa-bar{
  display:flex;align-items:center;gap:14px;flex-shrink:0;min-height:38px;
  padding:4px 12px;border-bottom:1px solid var(--sa-line);background:rgba(255,255,255,.015);
}
.wc-sa-top{display:flex;align-items:center;gap:8px;min-width:0;flex:1;}
.wc-sa-play{display:flex;align-items:center;gap:7px;flex-shrink:0;}
.wc-sa-eyebrow{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.48);white-space:nowrap;flex-shrink:0;}
.wc-sa-eyebrow em{font-style:normal;color:var(--accent);}
/* The name looks like a field because it is one. It used to be borderless
   until hovered, on the reasoning that it is the dialog's title — but the
   result was a word floating in the chrome that nobody could tell was
   editable, and a title you are expected to fill in has to admit that. The
   pencil says which of the two it is without a label. */
.wc-sa-name-row{display:flex;align-items:center;gap:6px;min-width:0;flex:0 0 auto;}
.wc-sa-name-field{
  display:flex;align-items:center;gap:6px;min-width:0;
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.13);border-radius:7px;
  padding:0 8px;transition:border-color .12s,background .12s,box-shadow .12s;cursor:text;
}
.wc-sa-name-field:hover{border-color:rgba(255,255,255,.24);}
.wc-sa-name-field:focus-within{
  background:rgba(0,0,0,.4);border-color:rgba(0,234,255,.55);box-shadow:0 0 0 2px rgba(0,234,255,.1);
}
.wc-sa-name-ico{flex-shrink:0;color:rgba(255,255,255,.32);}
.wc-sa-name-field:focus-within .wc-sa-name-ico{color:var(--accent);}
.wc-sa-name{
  width:186px;min-width:0;background:transparent;border:none;border-radius:0;
  color:#fff;font-family:inherit;font-size:15px;font-weight:500;padding:6px 0;outline:none;
}
.wc-sa-name::placeholder{color:rgba(255,255,255,.3);font-weight:400;}
.wc-sa-icon-btn{
  display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.6);font-family:inherit;font-size:14px;padding:5px 7px;border-radius:6px;cursor:pointer;
  transition:all .12s;white-space:nowrap;
}
.wc-sa-icon-btn:hover{background:rgba(0,234,255,.14);border-color:rgba(0,234,255,.4);color:#fff;}
.wc-sa-icon-btn-n{font-size:14px;color:var(--accent);font-weight:600;}
/* "6" on its own was a number with nothing to count. */
.wc-sa-switch-t{font-size:14px;color:rgba(255,255,255,.45);}
.wc-sa-icon-btn:hover .wc-sa-switch-t{color:rgba(255,255,255,.75);}
.wc-sa-new{color:var(--accent);border-color:rgba(0,234,255,.3);}
/* Starting a scroll animation, offered inside the list of the ones that exist
   rather than as a second unlabelled ＋ in the header. */
.wc-sa-anew{
  display:block;width:100%;margin-top:9px;background:rgba(0,234,255,.09);
  border:1px dashed rgba(0,234,255,.4);color:var(--accent);font-family:inherit;
  font-size:14px;padding:9px;border-radius:7px;cursor:pointer;transition:all .12s;
}
.wc-sa-anew:hover{background:rgba(0,234,255,.16);border-style:solid;}
.wc-sa-from{font-size:14px;color:rgba(255,255,255,.46);font-style:italic;}

/* One line that scrolls sideways, not a block that wraps to three. The chips
   share their band with the play controls now, so a wrapping row would push the
   preview down every time another element was targeted. */
.wc-sa-chiprow{display:flex;align-items:center;gap:5px;min-width:0;flex:1;overflow-x:auto;overflow-y:hidden;padding-bottom:1px;scrollbar-width:none;}
.wc-sa-chiprow::-webkit-scrollbar{height:0;}
.wc-sa-selchip{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:5px;
  padding:3px 5px 3px 4px;font-family:var(--mono,monospace);font-size:14px;color:rgba(255,255,255,.7);
  max-width:280px;transition:all .12s;
}
.wc-sa-selchip:hover{border-color:rgba(0,234,255,.4);color:#fff;}
.wc-sa-selchip.wc-active{background:rgba(0,234,255,.13);border-color:rgba(0,234,255,.5);color:#fff;}
.wc-sa-selchip.wc-orphan{border-color:rgba(255,179,71,.35);}
.wc-sa-selchip b{
  font-weight:600;font-size:14px;background:rgba(0,234,255,.18);color:var(--accent);
  border-radius:3px;padding:1px 4px;flex-shrink:0;
}
.wc-sa-selchip em{font-style:normal;color:rgba(255,255,255,.46);font-size:14px;padding:0 1px;}
.wc-sa-selchip em:hover{color:#ff6b6b;}
/* How many elements this one chip really covers, on the chip itself. Amber
   whenever it is more than one, because "I edited one thing and four moved" is
   the single most common surprise this dialog produces. */
.wc-sa-selchip u{
  text-decoration:none;font-size:14px;flex-shrink:0;border-radius:3px;padding:1px 4px;
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.58);
}
.wc-sa-selchip u.wc-many{background:rgba(255,209,102,.14);color:#ffd166;}
.wc-sa-empty-inline{font-size:14px;color:rgba(255,255,255,.43);}
/* The one thing to do when nothing is targeted yet, as a button rather than as
   a sentence describing a button. */
.wc-sa-pickcta{
  background:rgba(0,234,255,.12);border:1px solid rgba(0,234,255,.42);color:var(--accent);
  font-family:inherit;font-size:14px;padding:4px 11px;border-radius:5px;cursor:pointer;
  white-space:nowrap;transition:all .12s;
}
.wc-sa-pickcta:hover{background:rgba(0,234,255,.22);color:#fff;}
.wc-sa-addsel{
  background:rgba(0,234,255,.1);border:1px solid rgba(0,234,255,.3);color:var(--accent);
  font-family:inherit;font-size:14px;padding:3px 9px;border-radius:5px;cursor:pointer;white-space:nowrap;transition:all .12s;
}
.wc-sa-addsel:hover{background:rgba(0,234,255,.2);color:#fff;}
.wc-sa-addsel.wc-ghost{background:none;border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.45);}
.wc-sa-addsel.wc-ghost:hover{border-color:rgba(0,234,255,.4);color:#fff;}

/* ══ ⑨ PREVIEW ══════════════════════════════════════════════════════════ */
.wc-sa-stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:6px 10px 4px;}
/* What is being animated, now under the page rather than in a header band of
   its own. Two voices: the selector in mono because it is literal text, the
   count beside it in prose because that is the part being explained. */
.wc-sa-prev-foot{display:flex;align-items:center;gap:12px;margin-top:4px;flex-shrink:0;min-width:0;}
.wc-sa-stage-what{
  display:flex;align-items:center;gap:7px;min-width:0;flex-shrink:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wc-sa-stage-what code{
  font-family:var(--mono,monospace);font-size:14px;color:#0a2830;font-weight:600;
  background:var(--accent);border-radius:4px;padding:1px 7px;
}
.wc-sa-stage-what i{font-style:normal;font-size:14px;color:rgba(255,255,255,.6);}
.wc-sa-stage-what i b{color:#ffd166;font-weight:700;}
.wc-sa-stage-what i.wc-sa-warn{color:#ffb347;}
.wc-sa-what-none{color:rgba(255,255,255,.53)!important;}
.wc-sa-stage-p{
  font-family:var(--mono,monospace);font-size:14px;color:var(--accent);
  background:rgba(0,234,255,.09);border:1px solid rgba(0,234,255,.2);border-radius:4px;padding:2px 7px;
}
.wc-sa-stage-p.wc-scrubbing{color:#ffd166;background:rgba(255,209,102,.1);border-color:rgba(255,209,102,.3);}
/* "How do I test this?" has to have an answer you can see without looking for
   it, so Play is the one solid, filled control in the dialog. */
.wc-sa-run{
  background:linear-gradient(180deg,#28f0ff,#00c8e0);border:1px solid rgba(0,234,255,.7);
  color:#04222a;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.02em;
  padding:6px 16px;border-radius:6px;cursor:pointer;transition:all .12s;
  box-shadow:0 2px 10px rgba(0,234,255,.28);
}
.wc-sa-run:hover{background:linear-gradient(180deg,#55f5ff,#12dbf2);box-shadow:0 3px 14px rgba(0,234,255,.42);}
.wc-sa-run:active{transform:scale(.97);}
/* Mid-run the same button stops it, and says so — a run now lasts as long as
   the page takes to scroll through, which is long enough to want out of. */
.wc-sa-run.wc-sa-run-stop{
  background:linear-gradient(180deg,#ffd98a,#ffb347);border-color:rgba(255,179,71,.7);
  color:#2a1a04;box-shadow:0 2px 10px rgba(255,179,71,.3);
}
.wc-sa-run.wc-sa-run-stop:hover{background:linear-gradient(180deg,#ffe4a8,#ffc266);box-shadow:0 3px 14px rgba(255,179,71,.45);}

.wc-sa-stage-body{flex:1;min-height:0;display:flex;}
/* The artboard: the studio's own dark surface, always. The cloned page paints
   its real background on top of it (see _sa_pageSurface), so this is only ever
   the runway above and below the page — which is why there is no light/dark
   switch any more. */
.wc-sa-prev-outer{
  /* 74px went on four lanes: a two-line caption, the numbers, the track, and
     START/END chips that did not fit and spilled out over the page. Now three
     lanes that do fit, and the two chips only appear while you are actually
     touching a handle — see .wc-sa-range-thumb i. */
  --sa-railw:50px;--sa-railh:44px;
  flex:1;min-width:0;position:relative;border:1px solid rgba(255,255,255,.1);border-radius:8px;
  overflow:hidden;background:#0d1217;transition:border-color .18s,box-shadow .18s;
}
/* scroll(): what the scale measures is the screen itself, so the frame is what
   lights up. view() marks the element instead, with the needle below. */
.wc-sa-prev-outer.wc-tie-screen{
  border-color:rgba(0,180,210,.3);box-shadow:0 0 0 1px rgba(0,180,210,.08),inset 0 0 16px rgba(0,180,210,.03);
}
/* Side breathing room for the cloned page — without it the artboard's white
   background runs flush into the rail on one side and the scrollbar on the
   other, which reads as a layout bug rather than a page. box-sizing:border-box
   so the padding comes out of the width the scale calc measures (fit.clientWidth
   in _sa_buildPreviewBody), not on top of it. */
.wc-sa-prev-scroll{position:absolute;inset:0;overflow:auto;box-sizing:border-box;padding:0 46px;scrollbar-width:thin;scrollbar-color:rgba(0,234,255,.35) transparent;}
.wc-sa-prev-scroll::-webkit-scrollbar{width:9px;height:9px;}
.wc-sa-prev-scroll::-webkit-scrollbar-track{background:transparent;}
.wc-sa-prev-scroll::-webkit-scrollbar-thumb{background:rgba(0,234,255,.3);border-radius:5px;border:2px solid #0d1217;background-clip:padding-box;}
.wc-sa-prev-scroll::-webkit-scrollbar-thumb:hover{background:rgba(0,234,255,.5);background-clip:padding-box;}
.wc-sa-prev-outer.wc-rail-v .wc-sa-prev-scroll{left:var(--sa-railw);}
.wc-sa-prev-outer.wc-rail-h .wc-sa-prev-scroll{bottom:var(--sa-railh);}
.wc-sa-prev-scroll::-webkit-scrollbar{width:7px;height:7px;}
.wc-sa-prev-scroll::-webkit-scrollbar-thumb{background:rgba(0,180,205,.35);border-radius:4px;}
/* A full viewport of runway at each end, not 78%: below that the element can
   never be pushed far enough for the pass to reach 0% or 100%, so dragging a
   handle to either extreme would quietly stop short of what it asked for. */
.wc-sa-prev-pad{
  min-height:100%;display:flex;align-items:center;justify-content:center;
  font-size:14px;color:rgba(255,255,255,.4);letter-spacing:.1em;
}
/* The page sits ON the artboard and has to look like it does. The sheet itself
   is painted here in JS (see _sa_buildPreviewBody) rather than on the cloned
   canvas root, because that root is height:0 and paints nothing.

   The bleed is the second half of that: a page draws plenty outside its content
   box — `list-style-position:outside` markers are the obvious one — and on a
   real site those land on the body's own background, which runs the full width
   of the window. Here the sheet is only as wide as the canvas, so without a
   bleed the `<ol>` numbers fell off it onto the dark runway and were cut in
   half. Spread on a box-shadow extends the paint without touching layout. */
.wc-sa-prev-fit{margin:0 auto;position:relative;--sa-bleed:44px;}
.wc-sa-prev-stage{position:relative;z-index:1;}
/* NOT dimmed. This used to fade the whole page to 40% whenever the animation
   had no keyframes yet — which, now that a new animation starts empty, is the
   state every animation opens in. A washed-out page reads as a broken preview,
   and the "nothing to play yet" line in ③ already says it in words. The class
   stays as a hook for anything that wants to know. */
.wc-sa-prev-stage.wc-sa-prev-nokf{opacity:1;}
.wc-sa-prev-stage.wc-sa-prev-generic{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:0 16px;width:auto!important;transform:none!important;}
/* The stand-in, restyled for a light surface — one block, so there is never a
   question of which one the rail is measuring. */
.wc-sa-prev-card{
  background:linear-gradient(135deg,#e4f7fc,#f5fbfd);border:1px solid rgba(0,150,178,.28);
  border-radius:8px;padding:12px;min-height:56px;box-shadow:0 1px 3px rgba(0,40,55,.08);
}
.wc-sa-prev-card-bar{height:7px;width:44%;border-radius:4px;background:rgba(0,158,188,.8);margin-bottom:8px;}
.wc-sa-prev-card-line{height:5px;border-radius:3px;background:rgba(0,30,45,.14);margin-bottom:5px;}
.wc-sa-prev-card-line.wc-short{width:62%;}
/* Sideways preview: the stage scrolls horizontally and the stand-in sits in a row */
.wc-sa-stage.wc-sa-axis-x .wc-sa-prev-scroll{display:flex;align-items:center;}
.wc-sa-stage.wc-sa-axis-x .wc-sa-prev-pad{min-height:auto;min-width:100%;flex-shrink:0;}
.wc-sa-stage.wc-sa-axis-x .wc-sa-prev-fit{margin:0;flex-shrink:0;}
.wc-sa-stage.wc-sa-axis-x .wc-sa-prev-stage.wc-sa-prev-generic{flex-direction:row;padding:16px 0;}

/* ── the cloned page, and picking an element out of it ─────────────────────
   ⑨ shows the whole canvas so the animation can be judged against the page it
   scrolls through, and so a target can be chosen by pointing at it.

   Every mark here is sized off --sa-k, the factor the stage is scaled down by
   (set alongside the transform in _sa_buildPreviewBody). Outlines scale with the
   transform, so a plain 2px ring on a page shown at 0.3 arrives as a 0.6px
   hairline — dividing by the factor keeps a mark the same weight on screen no
   matter how far the page is zoomed out. */
#wb-sa-prev-page{position:relative;min-height:100%;}
/* Only while PICKING is the clone scenery: no caret, no text drag, and a
   crosshair everywhere so it is obvious a click means "animate this". In Use
   mode the page keeps its own cursors and behaves like the page it is. */
.wc-sa-picking #wb-sa-prev-page{
  user-select:none;-webkit-user-select:none;cursor:crosshair;
}
.wc-sa-picking #wb-sa-prev-page *{cursor:crosshair;}
/* All three marks carry a DARK halo as well as a bright line. A cyan hairline
   is invisible on a pale card and washed out on a bright photo — the black ring
   underneath it is what makes the mark read on any page, and reading the mark is
   the whole job. */
/* Whatever the pointer is over, while picking */
#wb-sa-prev-page .wb-sa-prev-hot{
  outline:calc(2px / var(--sa-k,1)) dashed #ffb347;
  outline-offset:calc(2px / var(--sa-k,1));
  box-shadow:0 0 0 calc(4px / var(--sa-k,1)) rgba(0,0,0,.5);
}
/* Every element this animation actually runs on — the honest answer to "how
   many things does my selector hit", visible without reading a number. */
#wb-sa-prev-page .wb-sa-prev-el{
  outline:calc(2px / var(--sa-k,1)) dashed #00c8e6;
  outline-offset:calc(2px / var(--sa-k,1));
  box-shadow:0 0 0 calc(4px / var(--sa-k,1)) rgba(0,0,0,.55);
}
/* …and the single one the rail is measuring and Play comes to rest on. The one
   solid ring on the page, doubled with black so it survives any background. */
#wb-sa-prev-page .wb-sa-prev-focus{
  outline:calc(3px / var(--sa-k,1)) solid #00eaff;
  outline-offset:calc(2px / var(--sa-k,1));
  box-shadow:
    0 0 0 calc(6px / var(--sa-k,1)) rgba(0,0,0,.72),
    0 0 calc(22px / var(--sa-k,1)) rgba(0,234,255,.55);
}
/* The label pinned to that element. Counter-scaled in JS (see _sa_placeFocusTag)
   so it stays readable however far the page is zoomed out — it is the one thing
   on this surface that must never shrink with the page. */
.wb-sa-focus-tag{
  position:absolute;transform-origin:top left;pointer-events:none;z-index:4;
  background:#00eaff;color:#04222a;font-size:14px;font-weight:700;
  letter-spacing:.04em;padding:2px 7px;border-radius:4px 4px 4px 0;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.wb-sa-focus-tag.wc-inside{border-radius:0 0 4px 4px;}

/* ── ① the range rail, living on the preview ───────────────────────────────
   Drawn on the edge the page actually scrolls, with its numbers counting in the
   direction the measured thing travels: scroll() runs 0 at the top down to 100,
   view() runs 100 at the top down to 0, because the element climbs the screen.
   See _sa_railPct. */
.wc-sa-rail{
  position:absolute;z-index:6;user-select:none;cursor:pointer;
  background:linear-gradient(90deg,rgba(5,11,15,.95),rgba(5,11,15,.86));
}
.wc-sa-rail.wc-vert{left:0;top:0;bottom:0;width:var(--sa-railw);border-right:1px solid rgba(0,234,255,.2);}
.wc-sa-rail.wc-horz{
  left:0;right:0;bottom:0;height:var(--sa-railh);border-top:1px solid rgba(0,234,255,.2);
  background:linear-gradient(0deg,rgba(5,11,15,.95),rgba(5,11,15,.86));
}
.wc-sa-rail-cap{
  position:absolute;font-size:13px;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(0,234,255,.6);pointer-events:none;line-height:1.3;white-space:nowrap;
}
.wc-sa-rail.wc-vert .wc-sa-rail-cap{left:0;right:0;top:5px;text-align:center;padding:0 2px;}
.wc-sa-rail.wc-horz .wc-sa-rail-cap{left:10px;top:4px;}

.wc-sa-range-track{position:absolute;border-radius:3px;background:rgba(255,255,255,.12);}
.wc-sa-rail.wc-vert .wc-sa-range-track{right:11px;top:26px;bottom:18px;width:3px;}
/* Caption on top, track in the middle, numbers under it: three rows that never
   land on each other whichever way round the scale is counting. */
.wc-sa-rail.wc-horz .wc-sa-range-track{left:20px;right:20px;top:20px;height:3px;}

.wc-sa-range-fill{position:absolute;border-radius:3px;box-shadow:0 0 6px rgba(0,234,255,.25);}
.wc-sa-rail.wc-vert .wc-sa-range-fill{left:0;right:0;background:linear-gradient(180deg,rgba(0,234,255,.55),rgba(0,234,255,.22));}
.wc-sa-rail.wc-horz .wc-sa-range-fill{top:0;bottom:0;background:linear-gradient(90deg,rgba(0,234,255,.55),rgba(0,234,255,.22));}

.wc-sa-range-tick{position:absolute;background:rgba(255,255,255,.26);}
.wc-sa-range-tick i{
  position:absolute;font-style:normal;font-size:14px;font-family:var(--mono,monospace);
  color:rgba(255,255,255,.62);white-space:nowrap;
}
/* 0% and 100% are the whole point of the scale — the two numbers you read to
   know which way it counts. They get full contrast and weight; 50% stays quiet
   so the ends are what the eye lands on. */
.wc-sa-range-tick.wc-end{background:rgba(0,234,255,.5);}
.wc-sa-range-tick.wc-end i{color:#fff;font-weight:700;font-size:14px;}
.wc-sa-rail.wc-vert .wc-sa-range-tick{left:-5px;right:-5px;height:1px;}
.wc-sa-rail.wc-vert .wc-sa-range-tick i{right:11px;top:-6px;}
.wc-sa-rail.wc-horz .wc-sa-range-tick{top:-5px;bottom:-5px;width:1px;}
.wc-sa-rail.wc-horz .wc-sa-range-tick i{left:-9px;top:14px;}
/* 25 and 75 sit under the handles at the commonest ranges — a tick there is
   useful, a number nobody can read is not. */
.wc-sa-range-tick.wc-minor{opacity:.55;}
.wc-sa-range-tick.wc-minor i{display:none;}

.wc-sa-range-thumb{
  /* Above .wc-sa-rail-now, which carries a grab strip wider than its own line:
     where the two overlap the smaller, more precise target has to win. */
  position:absolute;width:15px;height:15px;border-radius:50%;z-index:5;
  background:#05141b;border:2px solid var(--accent);box-shadow:0 0 9px rgba(0,234,255,.6);cursor:grab;
}
.wc-sa-rail.wc-vert .wc-sa-range-thumb{left:1.5px;margin:-7.5px 0 0 -7.5px;}
.wc-sa-rail.wc-horz .wc-sa-range-thumb{top:1.5px;margin:-7.5px 0 0 -7.5px;}
.wc-sa-range-thumb.wc-b{background:#05141b;border-style:dashed;}
/* Once / Replay never look at the end point — showing it live would be a lie. */
.wc-sa-range-thumb.wc-inert{opacity:.42;border-style:dotted;box-shadow:none;}
.wc-sa-range-thumb.wc-inert i{background:rgba(255,255,255,.34);color:#0a1519;}
.wc-sa-range-thumb:hover{box-shadow:0 0 14px rgba(0,234,255,.9);}
.wc-sa-range-thumb:active{cursor:grabbing;transform:scale(1.14);}
/* The two labels used to be printed permanently, spilling out of the rail and
   across the page — two bright chips sitting on the content at all times to
   name handles you can see perfectly well. They come out on hover and while
   dragging, which is the only time the question "which one is this" is live,
   and the dashed band edges caption the rows the rest of the time. */
.wc-sa-range-thumb i{
  position:absolute;font-style:normal;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:#04222b;background:var(--accent);border-radius:3px;padding:1px 4px;
  white-space:nowrap;pointer-events:none;box-shadow:0 1px 4px rgba(0,25,35,.3);
  opacity:0;transition:opacity .12s;
}
.wc-sa-range-thumb:hover i,.wc-sa-range-thumb:active i,.wc-sa-range-thumb.wc-dragging i{opacity:1;}
.wc-sa-rail.wc-vert .wc-sa-range-thumb i{left:18px;top:-3px;}
.wc-sa-rail.wc-horz .wc-sa-range-thumb i{left:-7px;bottom:calc(100% + 20px);}

/* Three lanes across the rail, so nothing ever lands on anything else: the
   numbers on the left, the track, then the START/END chips on the right. The
   live readout shares the left lane with the numbers rather than getting a
   fourth one out over the preview — it is the number you actually watch, so it
   belongs in the column your eye is already reading, and being last in the
   markup (plus z-index) it simply covers a tick when it passes one. */

/* Where the measured thing is right now — and the rail's third handle.
   The rail carries three movable things: the two ends of the range, and the
   position being previewed. Dragging this one scrolls the preview, which is
   the same job the playhead under the timeline does. See _sa_wireRange. */
.wc-sa-rail-now{
  position:absolute;z-index:4;pointer-events:auto;cursor:grab;
  background:rgba(255,201,77,.8);box-shadow:0 0 6px rgba(255,201,77,.5);
  transition:background .12s,box-shadow .12s;
}
.wc-sa-rail-now:hover,.wc-sa-rail-now.wc-dragging{background:#ffc94d;box-shadow:0 0 11px rgba(255,201,77,.9);}
.wc-sa-rail-now.wc-dragging{cursor:grabbing;}
/* A 1.5px line is not a grabbable target. An invisible strip carries the
   pointer without thickening the mark itself. */
.wc-sa-rail-now::before{content:"";position:absolute;}
.wc-sa-rail.wc-vert .wc-sa-rail-now::before{left:0;right:0;top:-7px;bottom:-7px;}
.wc-sa-rail.wc-horz .wc-sa-rail-now::before{top:0;bottom:0;left:-7px;right:-7px;}
.wc-sa-rail.wc-vert .wc-sa-rail-now{left:-5px;right:-5px;height:1.5px;margin-top:-.75px;}
.wc-sa-rail.wc-horz .wc-sa-rail-now{top:-5px;bottom:-5px;width:1.5px;margin-left:-.75px;}
.wc-sa-rail-now i{
  position:absolute;font-style:normal;font-size:14px;font-weight:700;font-family:var(--mono,monospace);
  color:#ffd166;background:rgba(10,8,0,.94);border-radius:3px;padding:0 3px;white-space:nowrap;
  box-shadow:0 0 0 1px rgba(255,201,77,.35);
  /* No cursor of its own — the chip is the largest part of the handle, so it
     inherits `grab` from the marker rather than opting out of it. */
}
/* Right-aligned onto the same column as the 0/50/100 numbers — the chip is
   opaque so an overlap reads as the live value replacing that tick, not as two
   numbers printed through each other. */
.wc-sa-rail.wc-vert .wc-sa-rail-now i{right:12px;top:-6px;}
/* Centred on the line, so it stays legible at 0% and 100% instead of running
   off the end of the frame — and stacked a row above START/END, which sideways
   share its axis and would otherwise be printed straight through it. */
.wc-sa-rail.wc-horz .wc-sa-rail-now i{left:50%;margin-left:-13px;bottom:calc(100% + 34px);}

/* The chosen range, painted across the preview so it is a place and not a pair
   of numbers; and the needle, which ties the scale to the element in view()
   mode (in scroll() the frame lights up instead — the screen is the subject). */
.wc-sa-band,.wc-sa-needle{position:absolute;pointer-events:none;z-index:5;}
/* view() ONLY — see _sa_paintRange.
   The band is positioned as a percentage of the preview viewport, so it is a
   stripe across the SCREEN. Under view() that is exactly the truth: progress
   IS how far the element has crossed the screen, so "runs between these two
   lines" is a faithful picture of the range.
   Under scroll() it is a lie. Progress there is the scrollbar position and has
   nothing to do with where anything sits in the viewport, so a stripe at 41%
   and 81% of the frame reads as "it runs while the element is between these
   lines" — and the animation then appears to carry on well past its end,
   because what actually ended was the scrollbar reaching 81%, not the element
   crossing a line. In scroll() the range belongs on the rail, which IS the
   scrollbar; the frame reports being inside it instead (.wc-in-range below). */
.wc-sa-prev-outer.wc-tie-el.wc-rail-v .wc-sa-band{
  left:var(--sa-railw);right:0;background:rgba(0,180,210,.035);
  border-top:1px dashed rgba(0,180,210,.28);border-bottom:1px dashed rgba(0,180,210,.28);
}
.wc-sa-prev-outer.wc-tie-el.wc-rail-h .wc-sa-band{
  top:0;bottom:var(--sa-railh);background:rgba(0,180,210,.035);
  border-left:1px dashed rgba(0,180,210,.28);border-right:1px dashed rgba(0,180,210,.28);
}
.wc-sa-prev-outer.wc-tie-screen .wc-sa-band{display:none;}
/* scroll(): the subject is the whole screen, so the whole frame says whether
   the scrollbar is currently inside the range. */
.wc-sa-prev-outer.wc-tie-screen .wc-sa-prev-scroll{
  transition:box-shadow .16s;
}
.wc-sa-prev-outer.wc-tie-screen.wc-in-range .wc-sa-prev-scroll{
  box-shadow:inset 0 0 0 2px rgba(0,180,210,.45);
}
/* scroll()'s own region, drawn ON the page instead of the frame: top/height
   are a plain slice of the page's total height (see _sa_paintRange), so unlike
   .wc-sa-band it scrolls WITH the content it describes and stays correct
   wherever the preview has scrolled to. Hidden under view() — that one already
   has .wc-sa-band for the same job, frame-relative instead of page-relative. */
.wc-sa-page-band{
  display:none;position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;z-index:5;
  background:rgba(0,180,210,.035);
  border-top:1px dashed rgba(0,180,210,.28);border-bottom:1px dashed rgba(0,180,210,.28);
}
/* Sideways scroll(): the span runs left→right instead, so the dashed edges do too. */
.wc-sa-stage.wc-sa-axis-x .wc-sa-page-band{
  border-top:none;border-bottom:none;
  border-left:1px dashed rgba(0,180,210,.28);border-right:1px dashed rgba(0,180,210,.28);
}
.wc-sa-prev-outer.wc-tie-screen .wc-sa-page-band{display:block;}
/* In a trigger mode only the near edge of the band fires anything, so the far
   one fades out. Which edge is "near" depends on the direction the scale counts:
   view() starts at the bottom (right, sideways), scroll() at the top (left). */
.wc-sa-prev-outer.wc-trigger .wc-sa-band{background:rgba(0,180,210,.02);}
.wc-sa-prev-outer.wc-trigger.wc-tie-el.wc-rail-v .wc-sa-band{border-top-color:rgba(0,180,210,.15);}
.wc-sa-prev-outer.wc-trigger.wc-tie-screen.wc-rail-v .wc-sa-band{border-bottom-color:rgba(0,180,210,.15);}
.wc-sa-prev-outer.wc-trigger.wc-tie-el.wc-rail-h .wc-sa-band{border-left-color:rgba(0,180,210,.15);}
/* scroll()'s page-band always counts top-down, so its near edge is always the
   top one regardless of axis — the bottom one is just "rest of the page". */
.wc-sa-prev-outer.wc-trigger .wc-sa-page-band{background:rgba(0,180,210,.02);border-bottom-color:rgba(0,180,210,.15);}
.wc-sa-prev-outer.wc-trigger.wc-tie-screen.wc-rail-h .wc-sa-band{border-right-color:rgba(0,180,210,.15);}

/* ── "it is running right now" ──────────────────────────────────────────────
   The range was drawn the same whether the playhead was inside it or nowhere
   near it, so the moment the animation actually starts — the one moment the
   whole rail exists to show — passed with nothing changing but a number. Both
   the marked range on the rail AND the band across the page now light up while
   the marker is within them (.wc-in-range, set by _sa_paintRailNow), so the
   start is something you see rather than something you work out.

   In a trigger mode (Once / Replay) `end` fires nothing, so the lit state runs
   from the start marker to the bottom of the scale — which is the truth: past
   the trigger, it has started and stays started. */
.wc-sa-range-fill,.wc-sa-range-track,.wc-sa-band,.wc-sa-page-band{transition:background .16s,box-shadow .16s,border-color .16s;}
.wc-sa-prev-outer.wc-in-range .wc-sa-range-fill{
  box-shadow:0 0 16px rgba(0,234,255,.85),0 0 4px rgba(255,255,255,.5);
}
.wc-sa-prev-outer.wc-in-range .wc-sa-rail.wc-vert .wc-sa-range-fill{
  background:linear-gradient(180deg,#8df6ff,var(--accent));
}
.wc-sa-prev-outer.wc-in-range .wc-sa-rail.wc-horz .wc-sa-range-fill{
  background:linear-gradient(90deg,#8df6ff,var(--accent));
}
/* The track widens under the lit fill, so the change is legible even at a
   glance and even to someone who cannot separate the two blues. */
.wc-sa-prev-outer.wc-in-range .wc-sa-rail.wc-vert .wc-sa-range-track{width:5px;right:10px;}
.wc-sa-prev-outer.wc-in-range .wc-sa-rail.wc-horz .wc-sa-range-track{height:5px;}
/* The start marker is the thing that was crossed — it reports being crossed. */
.wc-sa-prev-outer.wc-in-range .wc-sa-range-thumb.wc-a{
  box-shadow:0 0 0 3px rgba(0,234,255,.3),0 0 12px rgba(0,234,255,.7);
}
/* view(): the band is a real stripe across the page, so it fills in. */
.wc-sa-prev-outer.wc-tie-el.wc-in-range .wc-sa-band{
  background:rgba(0,220,255,.1);
}
.wc-sa-prev-outer.wc-tie-el.wc-in-range.wc-rail-v .wc-sa-band{
  border-top:1px solid rgba(0,234,255,.75);border-bottom:1px solid rgba(0,234,255,.75);
}
.wc-sa-prev-outer.wc-tie-el.wc-in-range.wc-rail-h .wc-sa-band{
  border-left:1px solid rgba(0,234,255,.75);border-right:1px solid rgba(0,234,255,.75);
}
/* scroll(): there is no stripe to fill — the range is a span of scrollbar, not
   of screen — so the frame itself reports it. It already did, at an alpha that
   was easy to miss beside a bright page. */
.wc-sa-prev-outer.wc-tie-screen.wc-in-range .wc-sa-prev-scroll{
  box-shadow:inset 0 0 0 2px rgba(0,234,255,.75),inset 0 0 26px rgba(0,234,255,.14);
}
/* scroll()'s page-band fills in the same way view()'s does, and wins over the
   trigger-mode fade above since it comes later in the cascade. */
.wc-sa-prev-outer.wc-tie-screen.wc-in-range .wc-sa-page-band{
  background:rgba(0,220,255,.1);
  border-top:1px solid rgba(0,234,255,.75);border-bottom:1px solid rgba(0,234,255,.75);
}
.wc-sa-stage.wc-sa-axis-x .wc-sa-prev-outer.wc-tie-screen.wc-in-range .wc-sa-page-band{
  border-top:none;border-bottom:none;
  border-left:1px solid rgba(0,234,255,.75);border-right:1px solid rgba(0,234,255,.75);
}
/* A slow breath, so a range you are parked inside still reads as live rather
   than as a colour that happens to be brighter. */
@media (prefers-reduced-motion:no-preference){
  .wc-sa-prev-outer.wc-in-range .wc-sa-range-fill{animation:wc-sa-live 1.5s ease-in-out infinite;}
}
@keyframes wc-sa-live{
  0%,100%{box-shadow:0 0 16px rgba(0,234,255,.85),0 0 4px rgba(255,255,255,.5);}
  50%{box-shadow:0 0 26px rgba(0,234,255,1),0 0 7px rgba(255,255,255,.8);}
}

.wc-sa-needle{display:none;}
.wc-sa-prev-outer.wc-tie-el.wc-rail-v .wc-sa-needle{display:block;left:var(--sa-railw);right:0;height:0;border-top:1px dashed rgba(196,150,64,.4);}
.wc-sa-prev-outer.wc-tie-el.wc-rail-h .wc-sa-needle{display:block;top:0;bottom:var(--sa-railh);width:0;border-left:1px dashed rgba(196,150,64,.4);}

.wc-sa-prev-note{font-size:14px;color:rgba(255,255,255,.48);line-height:1.35;margin-top:3px;flex-shrink:0;}
.wc-sa-prev-note b{color:rgba(255,255,255,.5);font-weight:600;}
/* The next-step line. Three states, one at a time — pick an element, give it
   something to animate, play it — so the studio answers "what now?" at the
   moment it is asked instead of in a help panel nobody opens. */
.wc-sa-next{
  display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.62);
  background:rgba(0,234,255,.05);border:1px solid rgba(0,234,255,.16);
  border-radius:6px;padding:6px 11px;line-height:1.45;
}
.wc-sa-next em{
  flex-shrink:0;font-style:normal;font-weight:700;font-size:14px;
  width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#04222a;
}
.wc-sa-next b{color:#fff;font-weight:600;}

/* ══ ⑧ KEYFRAME RULER · ⑦ TIMELINES · ⑥ SELECTORS ══════════════════════ */
.wc-sa-tl{flex-shrink:0;border-top:1px solid var(--sa-line);background:rgba(0,0,0,.18);}
.wc-sa-kfbar,.wc-sa-trow,.wc-sa-selbar{display:grid;grid-template-columns:var(--sa-gut) minmax(0,1fr) var(--sa-side);align-items:center;}
.wc-sa-kfbar{padding:5px 12px 8px;border-bottom:1px solid rgba(255,255,255,.05);}
/* What this ruler's 0–100% actually maps to on the rail. Full width under the
   three columns, because the 100px label gutter has no room for a sentence and
   this is the one place the two scales can be told apart. */
.wc-sa-kfbar-map{
  grid-column:1/-1;font-size:14px;line-height:1.45;color:rgba(255,255,255,.42);
  padding:5px 20px 0;
}
.wc-sa-kfbar-map.wc-trigger{color:#c9a24a;}
.wc-sa-tl-lbl{
  display:flex;align-items:center;gap:5px;font-size:14px;color:rgba(255,255,255,.55);
  padding-right:9px;min-width:0;
}
.wc-sa-tl-lbl>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono,monospace);font-size:14px;}
.wc-sa-tl-lbl em{font-style:normal;font-size:14px;color:var(--accent);background:rgba(0,234,255,.1);border-radius:3px;padding:0 4px;}
.wc-sa-tl-lbl button{
  margin-left:auto;background:none;border:none;color:rgba(255,255,255,.36);font-size:14px;cursor:pointer;
  padding:2px 3px;border-radius:3px;flex-shrink:0;
}
.wc-sa-tl-lbl button:hover{color:#ff6b6b;background:rgba(255,107,107,.1);}
.wc-sa-tl-side{display:flex;align-items:center;justify-content:flex-end;gap:4px;padding-left:9px;min-width:0;position:relative;z-index:5;}

/* Everything here is dragged: the ruler scrubs, a diamond moves a keyframe, a
   track scrubs, the rail sets the range. They are pointerdown + window
   pointermove drags, so touch-action is load-bearing — left at auto the
   browser claims the gesture for scrolling the moment the finger moves and
   the drag never starts, which is why a keyframe could be tapped but not
   moved on a phone. No effect on a mouse. */
.wc-sa-tl-area,.wc-sa-kf,.wc-sa-ph,.wc-sa-ph-grip,.wc-sa-track,
.wc-sa-rail,.wc-sa-range-thumb,.wc-sa-rail-now{touch-action:none;user-select:none;-webkit-user-select:none;}
.wc-sa-tl-area{position:relative;height:22px;margin:0 20px;cursor:ew-resize;}
.wc-sa-ruler-line{position:absolute;left:0;right:0;top:11px;height:2px;background:rgba(255,255,255,.09);border-radius:2px;}
.wc-sa-ruler-tick{position:absolute;top:11px;width:1px;height:6px;background:rgba(255,255,255,.14);}
.wc-sa-ruler-tick i{position:absolute;top:7px;left:50%;transform:translateX(-50%);font-style:normal;font-size:14px;color:rgba(255,255,255,.38);font-family:var(--mono,monospace);}
.wc-sa-ruler-tick:first-of-type i{transform:none;left:0;}

/* The diamond is a rotated ::before, not a rotated marker: children of a
   rotated box inherit the rotation, which sent the % label and the delete ✕
   off diagonally instead of sitting above and below it. */
.wc-sa-kf{position:absolute;top:5px;width:13px;height:13px;margin-left:-6.5px;cursor:grab;z-index:3;}
.wc-sa-kf::before{
  content:'';position:absolute;inset:0;transform:rotate(45deg);
  background:#0b0f13;border:1.5px solid rgba(0,234,255,.55);border-radius:2px;
  transition:box-shadow .12s,border-color .12s,background .12s;
}
.wc-sa-kf:hover::before{border-color:var(--accent);box-shadow:0 0 9px rgba(0,234,255,.55);}
.wc-sa-kf.wc-active::before{background:var(--accent);border-color:#fff;box-shadow:0 0 11px rgba(0,234,255,.8);}
.wc-sa-kf.wc-off::before{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06);opacity:.55;}
.wc-sa-kf b{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  font-size:14px;font-weight:500;font-family:var(--mono,monospace);color:rgba(255,255,255,.45);white-space:nowrap;
}
.wc-sa-kf.wc-active b{color:var(--accent);}
.wc-sa-kf em{
  position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);
  font-style:normal;font-size:14px;color:rgba(255,255,255,.43);cursor:pointer;padding:2px 3px;
  opacity:0;transition:opacity .12s,color .12s;
}
.wc-sa-kf:hover em,.wc-sa-kf.wc-active em{opacity:1;}
.wc-sa-kf em:hover{color:#ff6b6b;}

.wc-sa-ph{position:absolute;top:-2px;bottom:-2px;width:1px;background:rgba(255,209,102,.85);pointer-events:none;z-index:4;box-shadow:0 0 6px rgba(255,209,102,.5);}
/* The grip is the only grabbable part: a 16px hit area around a 9px diamond, so
   it is catchable with a mouse without the 1px line stealing clicks meant for a
   keyframe sitting underneath it. */
.wc-sa-ph-grip{
  position:absolute;top:-8px;left:-8px;width:16px;height:16px;display:block;
  pointer-events:auto;cursor:grab;
}
.wc-sa-ph-grip::after{
  content:'';position:absolute;top:3.5px;left:3.5px;width:9px;height:9px;
  background:#ffd166;border-radius:2px;transform:rotate(45deg);
  box-shadow:0 0 5px rgba(255,209,102,.5);
  transition:transform .12s cubic-bezier(.34,1.4,.64,1),box-shadow .12s;
}
.wc-sa-ph-grip:hover::after{transform:rotate(45deg) scale(1.3);box-shadow:0 0 11px rgba(255,209,102,.95);}
.wc-sa-ph-grip:active{cursor:grabbing;}
/* Pinned for the whole drag — the pointer spends it over the tracks and the
   preview, not over the grip. */
.wc-sa-studio.wc-sa-grabbing,.wc-sa-studio.wc-sa-grabbing *{cursor:grabbing!important;}

.wc-sa-tracks{max-height:104px;overflow-y:auto;padding:4px 12px 5px;scrollbar-width:thin;}
.wc-sa-tracks::-webkit-scrollbar{width:7px;}
.wc-sa-tracks::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px;}
.wc-sa-trow{height:24px;}
.wc-sa-trow.wc-flatrow .wc-sa-tl-lbl>span{color:rgba(255,255,255,.48);}
.wc-sa-track{height:20px;border-radius:4px;background:rgba(255,255,255,.025);cursor:ew-resize;}
.wc-sa-tseg{
  position:absolute;top:6px;height:8px;border-radius:4px;
  background:linear-gradient(90deg,rgba(0,234,255,.5),rgba(0,234,255,.75));
}
.wc-sa-tseg.wc-flat{background:rgba(255,255,255,.12);}
.wc-sa-dot{
  position:absolute;top:5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:#0b0f13;border:1.5px solid rgba(0,234,255,.7);cursor:pointer;z-index:3;
}
.wc-sa-dot:hover{box-shadow:0 0 8px rgba(0,234,255,.6);}
.wc-sa-dot.wc-active{background:var(--accent);border-color:#fff;}
.wc-sa-tval{font-family:var(--mono,monospace);font-size:14px;color:rgba(255,255,255,.58);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wc-sa-tl-empty{font-size:14px;color:rgba(255,255,255,.43);padding:10px 2px;text-align:center;}

.wc-sa-selbar{
  grid-template-columns:auto auto auto 1fr auto;gap:7px;
  padding:6px 12px;border-top:1px solid rgba(255,255,255,.05);background:rgba(0,0,0,.2);
}
.wc-sa-selnav{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.6);
  width:20px;height:20px;border-radius:5px;cursor:pointer;font-size:15px;line-height:1;padding:0;font-family:inherit;
}
.wc-sa-selnav:hover:not(:disabled){background:rgba(0,234,255,.16);color:#fff;}
.wc-sa-selnav:disabled{opacity:.3;cursor:not-allowed;}
.wc-sa-selnums{display:flex;gap:4px;align-items:center;flex-wrap:wrap;}
.wc-sa-selnum{
  min-width:21px;height:20px;border-radius:5px;cursor:pointer;font-family:var(--mono,monospace);font-size:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.55);padding:0 5px;
  transition:all .12s;
}
.wc-sa-selnum:hover{border-color:rgba(0,234,255,.4);color:#fff;}
.wc-sa-selnum.wc-active{background:rgba(0,234,255,.18);border-color:rgba(0,234,255,.55);color:#fff;}
.wc-sa-selnum.wc-orphan{border-color:rgba(255,179,71,.4);color:#ffb347;}
.wc-sa-selnow{display:flex;align-items:center;gap:8px;min-width:0;}
.wc-sa-selnow code{font-family:var(--mono,monospace);font-size:14px;color:rgba(0,234,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wc-sa-selnow em{font-style:normal;font-size:14px;color:rgba(255,255,255,.48);white-space:nowrap;}
.wc-sa-selnow em.wc-sa-warn{color:#ffb347;}
.wc-sa-selhint{font-size:14px;color:rgba(255,255,255,.38);white-space:nowrap;}

/* ══ ③ FRAMES · ④ PROPERTIES · ⑤ PRESETS ═══════════════════════════════ */
.wc-sa-rbox{display:flex;flex-direction:column;min-height:0;padding:7px 8px 8px;border-bottom:1px solid var(--sa-line);}
.wc-sa-rbox:last-child{border-bottom:none;}
.wc-sa-rbox-props,.wc-sa-rbox-presets{overflow:hidden;}
/* Title, count badge, action button. The rail is only 236px wide (210px under
   1180px), and "Properties · at 0% · ＋ Animate a property" does not fit on one
   line there — so the row wraps instead of overflowing. Everything in it is
   nowrap and unshrinkable on purpose: without that, flexbox took the slack out
   of the one shrinkable item and squeezed the badge into a two-line "at/0%"
   sliver while the nowrap button still ran off the panel edge. */
.wc-sa-rbox-hd{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;margin-bottom:8px;flex-shrink:0;}
.wc-sa-rbox-hd>span{font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.58);white-space:nowrap;flex:0 0 auto;}
.wc-sa-rbox-hd em{font-style:normal;font-size:14px;color:var(--accent);background:rgba(0,234,255,.1);border:1px solid rgba(0,234,255,.16);border-radius:3px;padding:0 5px;white-space:nowrap;flex:0 0 auto;}
/* Grows into whatever is left of its line rather than being pushed to the right
   by an auto margin. Same rule covers both cases: sharing the title's line it
   still ends flush with the panel edge, and on the line it wrapped onto it fills
   the full width instead of being stranded in the corner with dead space beside
   it. (An `auto` margin would eat the free space before flex-grow ever saw it,
   which is why the margin is gone.) */
.wc-sa-rbox-hd button{flex:1 1 auto;}

.wc-sa-fprog{padding:0 5px;margin-bottom:9px;}
.wc-sa-fprog-track{position:relative;height:4px;border-radius:3px;background:rgba(255,255,255,.09);}
.wc-sa-fprog-tick{position:absolute;top:-3px;width:8px;height:10px;margin-left:-4px;border-radius:2px;background:rgba(0,234,255,.45);cursor:pointer;}
.wc-sa-fprog-tick:hover{background:var(--accent);}
.wc-sa-fprog-tick.wc-active{background:#fff;box-shadow:0 0 8px rgba(0,234,255,.8);}
.wc-sa-fprog-tick.wc-hidden{background:rgba(255,255,255,.18);}
.wc-sa-fprog-head{position:absolute;top:-5px;bottom:-5px;width:1px;background:#ffd166;box-shadow:0 0 6px rgba(255,209,102,.6);}
.wc-sa-fprog-ends{display:flex;justify-content:space-between;font-size:14px;color:rgba(255,255,255,.4);font-family:var(--mono,monospace);margin-top:6px;}

.wc-sa-fchips{display:flex;flex-wrap:wrap;gap:4px;overflow-y:auto;max-height:74px;}
.wc-sa-fchip{
  display:inline-flex;align-items:center;gap:4px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:5px;padding:2px 5px;
  font-size:14px;color:rgba(255,255,255,.65);transition:all .12s;
}
.wc-sa-fchip:hover{border-color:rgba(0,234,255,.42);color:#fff;}
.wc-sa-fchip.wc-active{background:rgba(0,234,255,.16);border-color:rgba(0,234,255,.55);color:#fff;}
.wc-sa-fchip.wc-off{opacity:.45;}
.wc-sa-fchip b{font-family:var(--mono,monospace);font-weight:500;font-size:14px;}
.wc-sa-fchip i{font-style:normal;font-size:14px;color:rgba(255,255,255,.48);background:rgba(255,255,255,.07);border-radius:3px;padding:0 3px;}
.wc-sa-fchip u,.wc-sa-fchip em{text-decoration:none;font-style:normal;font-size:14px;color:rgba(255,255,255,.43);cursor:pointer;padding:0 1px;}
.wc-sa-fchip u:hover{color:var(--accent);}
.wc-sa-fchip em:hover{color:#ff6b6b;}
.wc-sa-warnline{font-size:14px;color:#ffb347;line-height:1.5;margin-top:8px;}

.wc-sa-prows{overflow-y:auto;display:flex;flex-direction:column;gap:4px;min-height:0;flex:1;scrollbar-width:thin;}
.wc-sa-prows::-webkit-scrollbar{width:7px;}
.wc-sa-prows::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px;}
.wc-sa-prow{display:flex;align-items:center;gap:5px;}
.wc-sa-pname{
  display:flex;align-items:center;gap:6px;width:118px;flex-shrink:0;min-width:0;
  font-family:var(--mono,monospace);font-size:14px;color:rgba(255,255,255,.6);
}
.wc-sa-ptxt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wc-sa-pico{width:14px;height:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--accent);opacity:.75;}
.wc-sa-pico svg{width:14px;height:14px;display:block;}
/* The shared slider widget (family 13) has to sit inside a much narrower column
   here than in the right panel it was built for.

   Its own sizing is viewport-relative (6vw for the readout, a 50px minimum on
   the track, 14px margins either side) which adds up to ~147px before the name
   column is counted — wider than this rail, so the number was being clipped off
   the right edge. Every one of those is pinned to a fixed, smaller value here;
   the widget keeps its behaviour, only its proportions change. */
.wc-sa-pval .wc-slider-param{width:100%;min-width:0;height:26px;}
.wc-sa-pval .wc-slider-param-track{margin:0 9px;min-width:24px;}
.wc-sa-pval .wc-slider-param-val{min-width:34px;padding:0 5px;font-size:14px;line-height:26px;}
.wc-sa-pval .wc-slider-param-thumb{width:11px;height:11px;}
.wc-sa-prow{min-height:26px;}
.wc-sa-pval{flex:1;min-width:0;display:flex;align-items:center;gap:4px;}
.wc-sa-pinput{
  width:100%;min-width:0;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.12);border-radius:5px;
  color:rgba(255,255,255,.88);font-family:var(--mono,monospace);font-size:14px;padding:4px 6px;outline:none;
}
.wc-sa-pinput:focus{border-color:rgba(0,234,255,.55);background:rgba(0,234,255,.05);}
/* A value the property cannot take was refused and the box put back — say so,
   or the revert reads as the field having eaten the typing. */
.wc-sa-pinput.wc-bad{border-color:#ff6b6b;background:rgba(255,107,107,.1);animation:wc-sa-shake .3s;}
@keyframes wc-sa-shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-3px);}
  75%{transform:translateX(3px);}
}
/* Length editor — the Design panel's dimension widget, shrunk to this rail.
   The widgets themselves are the real ones (.wc-number-param from
   PARAMETER_INPUT_TAKER_1_1, .wc-dimension_unit_select, the .wc-style_prop_dd-*
   dropdown), so all that is needed here is size: their own rules are built for
   a full-width panel and are two to three times too big for a 200px column.
   The two rows are a radio pair rather than the Design panel's two checkboxes —
   they were always mutually exclusive, and there is no room for both labels. */
.wc-sa-dim{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
.wc-sa-dim-row{display:flex;align-items:center;gap:4px;min-width:0;cursor:pointer;}
.wc-sa-dim-row>input[type=radio]{
  flex-shrink:0;width:11px;height:11px;margin:0;accent-color:#00eaff;cursor:pointer;
}
/* The stepper, at rail scale. */
.wc-sa-dim .wc-number-param{
  flex:1;min-width:0;font-size:14px;border-width:1px;border-radius:6px;
}
.wc-sa-dim .wc-numberParamUpdate{width:20px;height:20px;font-size:15px;}
.wc-sa-dim .wc-number-param-val{min-width:26px;font-size:14px;}
/* The unit chip, at rail scale — its own rule is padding:10px/height:30px. */
.wc-sa-dim .wc-dimension_unit_select{
  margin:0;padding:0 5px;height:20px;min-width:26px;border-width:1px;border-radius:5px;
  font-size:14px;font-family:var(--mono,monospace);flex-shrink:0;
}
.wc-sa-dim .wc-dimension_unit_select:hover{border-color:rgba(0,234,255,.45);}
/* The keyword dropdown, at rail scale. */
/* Only reachable if stylePlayground.js failed to load — see _sa_dimEditor. */
.wc-sa-dim-plain{
  flex:1;min-width:0;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.12);
  border-radius:6px;color:rgba(255,255,255,.88);font-family:var(--mono,monospace);
  font-size:14px;padding:3px 5px;outline:none;
}
.wc-sa-dim-dd{flex:1;min-width:0;}
.wc-sa-dim-dd .wc-style_prop_dd-trigger{padding:2px 5px;min-height:20px;border-radius:5px;}
.wc-sa-dim-dd .wc-style_prop_dd-label{font-size:14px;}
.wc-sa-dim-dd .wc-style_prop_dd-flag{display:flex;align-items:center;transform:scale(.72);transform-origin:left center;}
.wc-sa-dim-dd .wc-style_prop_dd-flag svg{max-width:26px;}
/* Whichever row is not selected recedes, so which one is live is readable at a
   glance — the job the Design panel's checkboxes do with more room. */
.wc-sa-dim-row:has(input[type=radio]:not(:checked))>:not(input){opacity:.4;}
/* Legal CSS, but it will snap rather than tween — flagged where it was chosen. */
.wc-sa-pwarn{
  flex-shrink:0;width:14px;height:14px;border-radius:50%;
  background:rgba(255,209,102,.16);color:#ffd166;
  font-size:14px;font-weight:700;line-height:14px;text-align:center;cursor:help;
}
/* ── the rich value editors ──────────────────────────────────────────────
   Colour, filter, shadow, transform-origin and clip-path are all built from
   more than one control, so their rows stack: the property name on its own
   line with the editor full-width beneath it. Side by side, a 96px name column
   leaves ~110px for the value, which is not enough for a slider, let alone
   four of them. */
.wc-sa-prow-tall{
  flex-direction:column;align-items:stretch;gap:4px;
  background:rgba(255,255,255,.022);border:1px solid rgba(255,255,255,.06);
  border-radius:7px;padding:6px 7px;
}
.wc-sa-prow-tall .wc-sa-pname{width:auto;}
.wc-sa-prow-tall .wc-sa-pval{flex:none;flex-direction:column;align-items:stretch;gap:5px;}
/* The ✕ belongs beside the name once the row is a block, not stranded at the
   bottom of it. */
.wc-sa-prow-tall{position:relative;}
.wc-sa-prow-tall>.wc-sa-pdel{position:absolute;top:4px;right:4px;}
.wc-sa-prow-tall>.wc-sa-pwarn{position:absolute;top:6px;right:22px;}

/* One labelled slider inside an editor. The label is deliberately narrow —
   these sit inside a 236px rail that already spent 14px on the row's own
   padding. */
.wc-sa-frow{display:flex;align-items:center;gap:6px;min-width:0;}
.wc-sa-flabel{
  width:66px;flex-shrink:0;font-size:14px;color:rgba(255,255,255,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wc-sa-frow .wc-slider-param{flex:1;width:auto;min-width:0;height:24px;}
.wc-sa-frow .wc-slider-param-track{margin:0 8px;min-width:20px;}
.wc-sa-frow .wc-slider-param-val{min-width:32px;padding:0 4px;font-size:14px;line-height:24px;}
.wc-sa-frow .wc-slider-param-thumb{width:10px;height:10px;}
/* Only reachable if stylePlayground.js failed to load — see _sa_slider. */
.wc-sa-plain-range{flex:1;min-width:0;accent-color:#00eaff;}

/* The raw-CSS escape hatch every editor ends with. It is a real field, but a
   quiet one: the widgets above are the way in, and this is for the values none
   of them can express. */
.wc-sa-raw{display:flex;align-items:center;gap:5px;margin-top:2px;}
.wc-sa-raw-lbl{
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.32);flex-shrink:0;cursor:help;
}
.wc-sa-raw-in{font-size:14px;padding:4px 6px;}

/* ── colour ─────────────────────────────────────────────────────────────── */
.wc-sa-col{display:flex;flex-direction:column;gap:5px;min-width:0;}
.wc-sa-col-row{display:flex;align-items:center;gap:5px;min-width:0;}
/* Dot and native picker share one box so the browser opens its picker anchored
   under the dot — the same trick PARAMETER_INPUT_createColorPicker uses. */
.wc-sa-col-dotwrap{position:relative;width:22px;height:22px;flex-shrink:0;}
/* Two layers, not one: the checkerboard underneath and the colour over it, so a
   half-transparent colour reads as half-transparent instead of as a slightly
   different flat colour. The colour arrives as a custom property rather than as
   an inline `background`, which would reset the checkerboard image away. */
.wc-sa-col-dot{
  position:absolute;inset:0;border-radius:5px;border:1px solid rgba(255,255,255,.18);
  background-image:
    linear-gradient(45deg,rgba(255,255,255,.14) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.14) 75%),
    linear-gradient(45deg,rgba(255,255,255,.14) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.14) 75%);
  background-size:8px 8px;background-position:0 0,4px 4px;
}
.wc-sa-col-dot::after{content:"";position:absolute;inset:0;border-radius:4px;background:var(--sa-c,transparent);}
.wc-sa-col-native{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0;}
.wc-sa-col-hex{
  flex:1;min-width:0;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.12);
  border-radius:5px;color:rgba(255,255,255,.88);font-family:var(--mono,monospace);
  font-size:14px;padding:5px 7px;outline:none;
}
.wc-sa-col-hex:focus{border-color:rgba(0,234,255,.55);background:rgba(0,234,255,.05);}
.wc-sa-col-hex.wc-bad{border-color:#ff6b6b;background:rgba(255,107,107,.1);animation:wc-sa-shake .3s;}
/* Fully transparent, in one click — the thing the old bare <input type=color>
   had no way to say at all. */
.wc-sa-col-clear{
  width:22px;height:22px;flex-shrink:0;padding:0;cursor:pointer;border-radius:5px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;transition:all .12s;
}
.wc-sa-col-clear i{
  width:12px;height:12px;border-radius:3px;display:block;
  background-image:
    linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.2) 75%),
    linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.2) 75%);
  background-size:6px 6px;background-position:0 0,3px 3px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.wc-sa-col-clear:hover{border-color:rgba(0,234,255,.45);}
.wc-sa-col-clear.wc-on{background:rgba(0,234,255,.16);border-color:rgba(0,234,255,.5);}
/* The alpha track is painted with the colour it is fading, so the slider shows
   the actual result rather than an abstract 0–100. */
.wc-sa-col-arow .wc-slider-param-track{
  height:8px;border-radius:4px;
  background-image:
    linear-gradient(90deg,transparent,var(--sa-alpha-col,#00eaff)),
    linear-gradient(45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.12) 75%),
    linear-gradient(45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.12) 75%);
  background-size:100% 100%,6px 6px,6px 6px;
  background-position:0 0,0 0,3px 3px;
}
/* The track already shows the value — it IS the colour fading — so the fill bar
   on top of it would only obscure what it is meant to report. */
.wc-sa-col-arow .wc-slider-param-fill{display:none;}

/* ── filter stack ───────────────────────────────────────────────────────── */
.wc-sa-fx{display:flex;flex-direction:column;gap:5px;min-width:0;}
.wc-sa-fx-list{display:flex;flex-direction:column;gap:5px;min-width:0;}
.wc-sa-fx-item{
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);
  border-radius:6px;padding:4px 5px;display:flex;flex-direction:column;gap:4px;min-width:0;
}
.wc-sa-fx-hd{display:flex;align-items:center;gap:5px;min-width:0;}
.wc-sa-fx-flag{display:flex;align-items:center;flex-shrink:0;transform:scale(.7);transform-origin:left center;width:20px;}
.wc-sa-fx-flag svg{max-width:28px;}
.wc-sa-fx-name{
  flex:1;min-width:0;font-size:14px;color:rgba(255,255,255,.8);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wc-sa-fx-del{
  background:none;border:none;color:rgba(255,255,255,.35);font-size:14px;
  cursor:pointer;padding:2px 3px;border-radius:3px;flex-shrink:0;
}
.wc-sa-fx-del:hover{color:#ff6b6b;background:rgba(255,107,107,.1);}
.wc-sa-fx-item .wc-slider-param{width:100%;min-width:0;height:24px;}
.wc-sa-fx-item .wc-slider-param-track{margin:0 8px;min-width:20px;}
.wc-sa-fx-item .wc-slider-param-val{min-width:34px;padding:0 4px;font-size:14px;line-height:24px;}
.wc-sa-fx-item .wc-slider-param-thumb{width:10px;height:10px;}
.wc-sa-fx-empty{font-size:14px;color:rgba(255,255,255,.38);padding:2px 1px;}
.wc-sa-fx-add .wc-style_prop_dd-trigger{padding:3px 6px;min-height:22px;border-radius:5px;}
.wc-sa-fx-add .wc-style_prop_dd-label{font-size:14px;color:var(--accent);}

/* ── shadows ────────────────────────────────────────────────────────────── */
.wc-sa-shwrap,.wc-sa-sh{display:flex;flex-direction:column;gap:4px;min-width:0;}
.wc-sa-sh-inset{
  display:flex;align-items:center;gap:6px;font-size:14px;
  color:rgba(255,255,255,.55);cursor:pointer;user-select:none;
}
.wc-sa-sh-inset input{width:11px;height:11px;margin:0;accent-color:#00eaff;cursor:pointer;}

/* ── transform-origin ───────────────────────────────────────────────────── */
.wc-sa-org{display:flex;flex-direction:column;gap:6px;min-width:0;}
/* Nine squares in the shape the pivot actually has, so the value is pointed at
   rather than spelled. */
.wc-sa-org-pad{
  display:grid;grid-template-columns:repeat(3,1fr);gap:3px;width:96px;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:2px;
}
.wc-sa-org-cell{
  aspect-ratio:1;background:rgba(255,255,255,.03);border:1px solid transparent;border-radius:3px;
  cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:all .1s;
}
.wc-sa-org-cell i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.28);}
.wc-sa-org-cell:hover{background:rgba(0,234,255,.12);}
.wc-sa-org-cell:hover i{background:rgba(0,234,255,.7);}
.wc-sa-org-cell.wc-on{background:rgba(0,234,255,.2);border-color:rgba(0,234,255,.55);}
.wc-sa-org-cell.wc-on i{background:var(--accent);width:6px;height:6px;box-shadow:0 0 6px rgba(0,234,255,.7);}

/* ── clip-path ──────────────────────────────────────────────────────────── */
.wc-sa-clip{display:flex;flex-direction:column;gap:5px;min-width:0;}
.wc-sa-clip-fields{display:flex;flex-direction:column;gap:4px;min-width:0;}
.wc-sa-clip-pick .wc-style_prop_dd-trigger{padding:3px 6px;min-height:22px;border-radius:5px;}
.wc-sa-clip-pick .wc-style_prop_dd-label{font-size:14px;}
.wc-sa-pdel{background:none;border:none;color:rgba(255,255,255,.38);font-size:14px;cursor:pointer;padding:3px;border-radius:3px;flex-shrink:0;}
.wc-sa-pdel:hover{color:#ff6b6b;background:rgba(255,107,107,.1);}
.wc-sa-pempty{font-size:14px;color:rgba(255,255,255,.43);line-height:1.6;padding:6px 2px;}
/* The "nothing targeted yet" state. It is a prompt, not a warning — the panel
   below it still works — so it reads as the next step rather than as an error. */
.wc-sa-pnosel{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  background:rgba(0,234,255,.05);border:1px dashed rgba(0,234,255,.28);
  border-radius:8px;padding:11px 10px;
}
.wc-sa-pnosel b{font-size:14px;font-weight:600;color:rgba(255,255,255,.85);}
.wc-sa-pnosel span{font-size:14px;color:rgba(255,255,255,.5);line-height:1.55;}
.wc-sa-psub{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.43);margin:9px 0 5px;flex-shrink:0;}
.wc-sa-pghosts{display:flex;flex-wrap:wrap;gap:4px;flex-shrink:0;max-height:52px;overflow-y:auto;}
.wc-sa-pghost{
  background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.16);color:rgba(255,255,255,.58);
  font-family:var(--mono,monospace);font-size:14px;padding:2px 6px;border-radius:4px;cursor:pointer;transition:all .12s;
}
.wc-sa-pghost:hover{border-color:rgba(0,234,255,.45);border-style:solid;color:#fff;}

.wc-sa-ptabs{display:flex;gap:3px;background:rgba(255,255,255,.03);border-radius:6px;padding:3px;margin-bottom:8px;flex-shrink:0;}
.wc-sa-ptab i{font-style:normal;font-size:14px;opacity:.75;}
.wc-sa-ptab{
  flex:1;background:none;border:none;border-radius:4px;cursor:pointer;font-family:inherit;font-size:14px;
  color:rgba(255,255,255,.45);padding:4px 6px;white-space:nowrap;transition:all .12s;
}
.wc-sa-ptab:hover{color:rgba(255,255,255,.8);}
.wc-sa-ptab.wc-active{background:rgba(0,234,255,.15);color:#fff;}
/* The scroll region is the grid itself, and it has to be told so twice: a grid
   inside a height-constrained flex item squeezes its auto rows rather than
   overflowing (the #ap_grid trap), which clipped every card's caption and made
   the scrollbar look like it belonged to something else on the panel. */
.wc-sa-pgrid{
  display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:min-content;align-content:start;
  gap:6px;overflow-y:auto;overflow-x:hidden;min-height:0;flex:1 1 0;padding:1px 4px 1px 1px;
  scrollbar-width:thin;scrollbar-color:rgba(0,234,255,.28) transparent;overscroll-behavior:contain;
}
/* Matches the builder's own panels (#wb-bottom-wrap-body): a track that stays
   out of the way and a thumb inset from the edge, rather than the flat grey bar
   that read as a browser scrollbar sitting on top of the design. */
.wc-sa-pgrid::-webkit-scrollbar{width:9px;}
.wc-sa-pgrid::-webkit-scrollbar-track{background:transparent;}
.wc-sa-pgrid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:5px;border:2px solid transparent;background-clip:content-box;}
.wc-sa-pgrid::-webkit-scrollbar-thumb:hover{background:rgba(0,234,255,.45);border:2px solid transparent;background-clip:content-box;}
.wc-sa-pgrid-big{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px;flex:0 1 auto;}
.wc-sa-pcard{
  display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.09);border-radius:7px;padding:7px 5px;
  font-family:inherit;transition:all .12s;overflow:hidden;
}
.wc-sa-pcard:hover:not(:disabled){background:rgba(0,234,255,.08);border-color:rgba(0,234,255,.4);}
.wc-sa-pcard:disabled{opacity:.35;cursor:not-allowed;}
/* The swatch needs somewhere to travel: several presets translate by 20-30px
   and a stage the exact height of the box clipped the moving half of the very
   motion the card exists to show. */
.wc-sa-pcard-stage{display:flex;align-items:center;justify-content:center;height:34px;width:100%;overflow:hidden;}
.wc-sa-pcard.wc-big .wc-sa-pcard-stage{height:52px;}
.wc-sa-pcard-box{width:22px;height:14px;border-radius:3px;background:linear-gradient(135deg,var(--accent),rgba(0,234,255,.45));}
.wc-sa-pcard.wc-big .wc-sa-pcard-box{width:36px;height:22px;}
.wc-sa-pcard-name{font-size:14px;color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.wc-sa-pcard.wc-big .wc-sa-pcard-name{font-size:14px;}
.wc-sa-pcard-hint{font-size:14px;color:rgba(255,255,255,.46);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.wc-sa-link{background:none;border:none;color:var(--accent);font-family:inherit;font-size:14px;cursor:pointer;padding:5px 0;text-align:left;}
.wc-sa-link:hover{text-decoration:underline;}

/* ══ COMMIT ═════════════════════════════════════════════════════════════
   Save lives in the header now — the commit bar it used to sit in was a whole
   band carrying two buttons, one of which ("Done") did exactly what the ✕
   beside it already did. The unsaved-work note rides along beside it. */
.wc-sa-actbar-note{font-size:14px;color:rgba(255,255,255,.48);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px;}
.wc-sa-actbar-note.wc-sa-warn{color:#ffd166;}
.wc-sa-btn{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.7);
  font-family:inherit;font-size:14px;padding:6px 14px;border-radius:6px;cursor:pointer;transition:all .12s;
}
.wc-sa-btn:hover{background:rgba(255,255,255,.1);color:#fff;}
.wc-sa-btn-go{
  position:relative;background:linear-gradient(180deg,rgba(0,234,255,.28),rgba(0,234,255,.12));
  border-color:rgba(0,234,255,.5);color:#fff;
}
.wc-sa-btn-go:hover{background:linear-gradient(180deg,rgba(0,234,255,.4),rgba(0,234,255,.2));}
/* There is something to save. Amber rather than the studio's cyan, because
   cyan is the colour of everything already working — the dot has to be the one
   thing on the button that is not part of it. */
.wc-sa-dot{
  position:absolute;top:-4px;right:-4px;width:9px;height:9px;border-radius:50%;
  background:#ffb347;box-shadow:0 0 0 2px var(--sa-head-bg,#10161b),0 0 8px rgba(255,179,71,.85);
  opacity:0;transform:scale(.4);transition:opacity .15s,transform .15s;pointer-events:none;
}
.wc-sa-unsaved .wc-sa-dot{opacity:1;transform:scale(1);}
.wc-sa-unsaved{border-color:rgba(255,179,71,.55);}
@media (prefers-reduced-motion:no-preference){
  .wc-sa-unsaved .wc-sa-dot{animation:wc-sa-dot-pulse 1.8s ease-in-out infinite;}
}
@keyframes wc-sa-dot-pulse{
  0%,100%{box-shadow:0 0 0 2px var(--sa-head-bg,#10161b),0 0 8px rgba(255,179,71,.85);}
  50%{box-shadow:0 0 0 2px var(--sa-head-bg,#10161b),0 0 14px rgba(255,179,71,1);}
}
.wc-sa-btn-del{border-color:rgba(255,107,107,.25);color:rgba(255,107,107,.75);}
.wc-sa-btn-del:hover{background:rgba(255,107,107,.14);color:#ff8f8f;}

/* ══ SUB-PANELS (selector picker, property picker, presets, code) ═══════ */
.wc-sa-pop,.wc-sa-ask{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;background:rgba(4,7,10,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:24px;}
.wc-sa-pop-card{
  width:560px;max-width:100%;max-height:100%;display:flex;flex-direction:column;
  background:#0e1418;border:1px solid rgba(0,234,255,.3);border-radius:11px;
  box-shadow:0 22px 60px rgba(0,0,0,.7);overflow:hidden;
}
/* The effect gallery. Fixed, comfortable proportions whichever tab is showing:
   the old card sized itself to its contents, so "My animations" with three
   entries collapsed into a wide, near-empty box that read as a broken render
   rather than as a short list. */
/* Width is fixed so the grid keeps its columns; height is a ceiling, not a
   target, so three animations make a short card and seventeen presets make a
   tall one that scrolls. Pinning the height did the opposite and left the
   three-item tab as a wide empty box. */
.wc-sa-pop-gallery{width:min(880px,100%);max-height:min(640px,100%);}
.wc-sa-pop-gallery .wc-sa-pop-body{min-height:0;}
.wc-sa-pop-hd{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:9px 12px;border-bottom:1px solid var(--sa-line);font-size:15px;color:#fff;flex-shrink:0;}
.wc-sa-pop-body{padding:11px 12px 12px;overflow:hidden;display:flex;flex-direction:column;min-height:0;}
/* Tabs first, then the box that searches whichever tab is showing — the search
   field used to come first, which read as searching everything. */
.wc-sa-pop-search{display:flex;align-items:center;gap:9px;margin-bottom:11px;flex-shrink:0;}
.wc-sa-pop-search input{
  flex:1;min-width:0;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);border-radius:6px;
  color:#fff;font-family:inherit;font-size:14px;padding:6px 9px;outline:none;
}
.wc-sa-pop-search input:focus{border-color:rgba(0,234,255,.5);}
.wc-sa-pop-search .wc-sa-ptabs{margin-bottom:0;flex:0 0 auto;}
.wc-sa-pop-list{overflow-y:auto;display:flex;flex-direction:column;gap:3px;min-height:0;max-height:56vh;scrollbar-width:thin;}
.wc-sa-pop-list::-webkit-scrollbar{width:8px;}
.wc-sa-pop-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px;}
.wc-sa-pop-row{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);border-radius:6px;
  padding:6px 9px;font-family:inherit;transition:all .12s;
}
.wc-sa-pop-row:hover:not(:disabled){background:rgba(0,234,255,.09);border-color:rgba(0,234,255,.35);}
.wc-sa-pop-row:disabled{opacity:.45;cursor:not-allowed;}
.wc-sa-pop-row code{font-family:var(--mono,monospace);font-size:14px;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;max-width:52%;}
.wc-sa-pop-n{font-size:14px;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wc-sa-pop-n.wc-sa-warn{color:#ffb347;}
.wc-sa-pop-meta{margin-left:auto;font-family:var(--mono,monospace);font-size:14px;color:rgba(255,255,255,.43);white-space:nowrap;flex-shrink:0;}

/* ── the saved-animations list, shown as the elements themselves ──────────
   A row is a picture of the thing, what it says, and a ▶. The identifiers it
   used to lead with (name, selector, `view()`) are the part nobody recognises,
   so they are demoted to small tags underneath. */
.wc-sa-alist{
  overflow-y:auto;display:flex;flex-direction:column;gap:6px;min-height:0;max-height:60vh;
  /* A gutter the bar has to itself. It used to be 2px, so the scrollbar sat on
     top of the rows and the ▶ of every row was half under it. */
  padding-right:10px;
  scrollbar-width:thin;scrollbar-color:rgba(0,234,255,.32) rgba(255,255,255,.05);
}
.wc-sa-alist::-webkit-scrollbar{width:10px;}
.wc-sa-alist::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:5px;}
.wc-sa-alist::-webkit-scrollbar-thumb{
  background:rgba(0,234,255,.28);border-radius:5px;
  /* Inset by a transparent border so the thumb reads as narrower than the
     track it runs in, instead of filling it edge to edge. */
  border:2px solid transparent;background-clip:padding-box;
}
.wc-sa-alist::-webkit-scrollbar-thumb:hover{background:rgba(0,234,255,.55);background-clip:padding-box;}
/* The whole row is the button — see sa_openAnimList. It has to look like one
   everywhere, not only over the words. */
.wc-sa-arow{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);border-radius:8px;
  padding:7px 9px;transition:background .12s,border-color .12s;
}
.wc-sa-arow:hover{background:rgba(0,234,255,.07);border-color:rgba(0,234,255,.3);}
.wc-sa-arow:hover .wc-sa-aname{color:var(--accent);}
.wc-sa-arow:focus-visible{outline:2px solid rgba(0,234,255,.6);outline-offset:2px;}
.wc-sa-arow:active{background:rgba(0,234,255,.12);}
.wc-sa-arow.wc-orphan{border-color:rgba(255,179,71,.28);}

/* The live clone of the real element, scaled to fit. `contain` keeps a page-
   sized subtree from painting outside its box, and pointer-events:none stops
   the copy behaving like a control you could click. */
/* No background here on purpose — the page's real surface colour is painted on
   inline (see sa_openAnimList). Declaring a dark one here would win over an
   unset surface and put the page's dark text on a dark box, which is the
   blank-thumbnail bug. #0d1217 is only the fallback for the "nothing to show"
   states, which carry no cloned content. */
.wc-sa-athumb{
  position:relative;flex-shrink:0;width:132px;height:76px;border-radius:6px;overflow:hidden;
  background:#0d1217;border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
/* The clone paints its own backgrounds; the wrapper must stay clear so the
   surface behind it shows through wherever the element is transparent. */
.wc-sa-athumb-in{flex-shrink:0;background:transparent;}
.wc-sa-athumb-in video,.wc-sa-athumb-in img{max-width:none;}
.wc-sa-athumb-miss{
  font-size:14px;line-height:1.3;text-align:center;color:rgba(255,179,71,.75);letter-spacing:.02em;
}

.wc-sa-ameta{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  text-align:left;
}
.wc-sa-aname{
  font-size:15px;font-weight:500;color:#fff;max-width:100%;transition:color .12s;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* What the element actually says — the line that makes it recognisable. */
.wc-sa-adesc{
  font-size:14px;color:rgba(255,255,255,.55);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wc-sa-adesc:empty{display:none;}
.wc-sa-atags{display:flex;flex-wrap:wrap;gap:4px;}
.wc-sa-atags em{
  font-style:normal;font-size:14px;letter-spacing:.03em;text-transform:uppercase;
  color:rgba(255,255,255,.45);background:rgba(255,255,255,.06);border-radius:3px;padding:1px 5px;
}
.wc-sa-atags em.wc-many{color:#ffd166;background:rgba(255,209,102,.13);}
.wc-sa-atags em.wc-off{color:#ff8f8f;background:rgba(255,107,107,.13);}

.wc-sa-aplay{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;cursor:pointer;
  background:rgba(0,234,255,.12);border:1px solid rgba(0,234,255,.35);color:var(--accent);
  font-size:14px;line-height:1;padding-left:2px;transition:all .12s;
}
.wc-sa-aplay:hover:not(:disabled){background:rgba(0,234,255,.26);border-color:var(--accent);color:#fff;transform:scale(1.08);}
.wc-sa-aplay:active:not(:disabled){transform:scale(.94);}
.wc-sa-aplay:disabled{opacity:.28;cursor:not-allowed;}
.wc-sa-pop-on{font-size:14px;color:var(--accent);background:rgba(0,234,255,.12);border-radius:3px;padding:1px 5px;flex-shrink:0;}
.wc-sa-pop-grp{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.46);margin:8px 0 3px;}
.wc-sa-pop-grp:first-child{margin-top:0;}
/* The app's .wc-icon-wrap sizes its 56-viewBox icons at 42px; the studio's own
   24-viewBox line icons would blow straight out of the 32px icon column at that
   size, so they carry their own marker class. */
.wc-icon-wrap svg.wc-sa-ico24{width:20px;height:20px;}
#wb-sa-proplist .wc-rico{color:var(--accent,#00eaff);opacity:.85;display:flex;align-items:center;justify-content:center;}
#wb-sa-proplist .wc-row{padding:7px 12px;}
.wc-sa-pop-foot{font-size:14px;color:rgba(255,255,255,.48);margin-top:8px;text-align:center;flex-shrink:0;}
.wc-sa-pop-card .wc-sbox{margin-bottom:9px;}
.wc-sa-pop-card .wc-dd{max-height:52vh;overflow-y:auto;overscroll-behavior:contain;}
.wc-sa-pop-empty{font-size:14px;color:rgba(255,255,255,.48);padding:14px 4px;text-align:center;line-height:1.6;}
.wc-sa-code{
  margin:0;overflow:auto;max-height:52vh;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.08);
  border-radius:7px;padding:10px;font-family:var(--mono,ui-monospace,monospace);font-size:14px;line-height:1.6;
  color:rgba(255,255,255,.7);white-space:pre;
}

.wc-sa-ask-card{
  position:relative;
  width:400px;max-width:100%;background:#0e1418;border:1px solid rgba(255,209,102,.35);border-radius:11px;
  box-shadow:0 22px 60px rgba(0,0,0,.7);padding:16px;
}
.wc-sa-ask-msg{font-size:15px;color:rgba(255,255,255,.85);line-height:1.55;margin-bottom:14px;padding-right:22px;}
.wc-sa-ask-row{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap;}
.wc-sa-ask-cancel{margin-right:auto;opacity:.7;}
.wc-sa-ask-cancel:hover{opacity:1;}
.wc-sa-ask-x{
  position:absolute;top:9px;right:9px;background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,.45);font-size:15px;line-height:1;width:22px;height:22px;border-radius:5px;
  transition:background .12s,color .12s;
}
.wc-sa-ask-x:hover{background:rgba(255,255,255,.08);color:#fff;}

/* ── Narrower screens: the side rails stack under the middle column ── */
@media (max-width:1180px){
  .wc-sa-studio{--sa-gut:88px;--sa-side:98px;}
  /* Narrower rails, but still through the vars so folding keeps working. */
  .wc-sa-studio{--sa-col-l:176px;--sa-col-r:262px;}
  .wc-sa-studio.wc-fold-l{--sa-col-l:0px;}
  .wc-sa-studio.wc-fold-r{--sa-col-r:0px;}
  /* The bar keeps its single line; the name simply gives up some width. */
  .wc-sa-name{width:130px;}
  .wc-sa-actbar-note{display:none;}
}

/* ══ TOUCH / SMALL SCREENS ═══════════════════════════════════════════════
   The studio is four regions arranged around a preview, which is a desktop
   shape. Stacked down a small screen they become one scroll several viewports
   long, with the preview — the one region whose usefulness scales with its
   size — squeezed to a strip between two walls of controls.

   Here the preview stays put and exactly ONE panel shows beside or under it,
   chosen by the tab strip (see sa_setPhoneTab). Nothing is removed and no
   region is rebuilt: .wc-sa-mid goes display:contents so its three children
   join the same column as the two rails, and [data-sa-tab] picks which is up.

   It starts at 900px rather than the app's own 767px phone breakpoint because
   the trigger is the layout, not the device: below 900px the three columns and
   the preview no longer fit side by side, and a tablet held in portrait was
   getting the old stacked rules — two rails cropped to 210px and 340px with
   the preview wedged between them. A short landscape window (a phone on its
   side, a half-height laptop window) gets the same treatment for the same
   reason, and the block after this one turns it sideways to suit. */
.wc-sa-tabs{display:none;}

@media (max-width:900px), (max-height:540px) and (max-width:1200px){
  .wc-sa-overlay{padding:0;}
  .wc-sa-studio{
    border-radius:0;border:none;width:100%;height:100%;
    /* Under the notch and above the home bar on iOS. */
    padding-bottom:env(safe-area-inset-bottom,0px);
  }

  /* ── the tab strip ── */
  .wc-sa-tabs{
    display:flex;gap:3px;flex-shrink:0;padding:5px 8px;
    border-bottom:1px solid var(--sa-line);background:rgba(0,0,0,.25);
  }
  .wc-sa-tab{
    flex:1;min-width:0;background:rgba(255,255,255,.04);border:1px solid transparent;
    color:rgba(255,255,255,.55);font-family:inherit;font-size:14px;
    padding:8px 4px;border-radius:7px;cursor:pointer;transition:all .12s;
  }
  .wc-sa-tab.wc-active{background:rgba(0,234,255,.16);border-color:rgba(0,234,255,.45);color:#fff;}

  /* ── header: two lines, because eight controls will not share one ── */
  .wc-sa-head{flex-wrap:wrap;gap:7px;padding:7px 9px;}
  .wc-sa-head-l{width:100%;min-width:0;gap:7px;}
  .wc-sa-name-row{flex:1;min-width:0;}
  .wc-sa-name-field{flex:1;min-width:0;}
  .wc-sa-name{width:100%;font-size:15px;padding:8px 0;}
  .wc-sa-head-r{width:100%;justify-content:flex-end;gap:6px;}
  /* Fold buttons are meaningless once the tabs decide what is showing. */
  .wc-sa-fold-all{display:none;}
  .wc-sa-head-hits{font-size:14px;}
  /* The "not saved yet" note has nowhere to sit on one line — the amber dot on
     Save says the same thing in the space of a full stop. */
  .wc-sa-actbar-note{display:none;}
  .wc-sa-btn,.wc-sa-fold-btn,.wc-sa-x{min-height:36px;}
  .wc-sa-btn{padding:8px 16px;}

  /* ── one column: preview on top, chosen panel underneath ── */
  .wc-sa-grid{display:flex;flex-direction:column;min-height:0;overflow:hidden;}
  /* The three children of the middle column have to sit in the SAME column as
     the two rails for the order below to mean anything. */
  .wc-sa-mid{display:contents;}
  .wc-sa-bar{order:1;}
  .wc-sa-stage{order:2;}
  .wc-sa-side,.wc-sa-right,.wc-sa-tl{order:3;}

  /* The preview keeps a real share of the screen rather than whatever is left
     over — it is why the dialog is open. */
  .wc-sa-stage{flex:0 0 auto;height:38vh;min-height:210px;padding:5px 7px 3px;}
  .wc-sa-side,.wc-sa-right,.wc-sa-tl{
    flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    border:none;border-top:1px solid var(--sa-line);max-height:none;
  }
  .wc-sa-right{display:flex;flex-direction:column;}
  /* Each region is a full panel here, so it takes the height it needs and the
     column scrolls, rather than three boxes fighting over one screen. */
  .wc-sa-right>.wc-sa-rbox{flex:0 0 auto;min-height:0;}
  .wc-sa-rbox-props,.wc-sa-rbox-presets{overflow:visible;}
  /* Scoped to the rail on purpose. .wc-sa-prows and .wc-sa-pgrid are also the
     lists inside the pop-up sheets, where the card has a fixed ceiling and the
     list is the only thing that can scroll — unscoped, this turned every sheet
     into a fixed box with its contents hanging out of the bottom of it. */
  .wc-sa-right .wc-sa-prows,
  .wc-sa-right .wc-sa-pgrid{overflow:visible;max-height:none;flex:0 0 auto;}

  /* Folding is a desktop affordance — a rail folded away there must not leave
     a tab here that opens onto nothing. The tabs decide what shows. */
  .wc-sa-studio.wc-fold-l .wc-sa-side,
  .wc-sa-studio.wc-fold-b .wc-sa-tl{display:block;}
  .wc-sa-studio.wc-fold-r .wc-sa-right{display:flex;}

  /* Only the tab that is up. */
  .wc-sa-studio[data-sa-tab="props"] .wc-sa-side,
  .wc-sa-studio[data-sa-tab="props"] .wc-sa-tl,
  .wc-sa-studio[data-sa-tab="setup"] .wc-sa-right,
  .wc-sa-studio[data-sa-tab="setup"] .wc-sa-tl,
  .wc-sa-studio[data-sa-tab="time"] .wc-sa-side,
  .wc-sa-studio[data-sa-tab="time"] .wc-sa-right{display:none;}

  /* ── ② the bar wraps rather than scrolling sideways ── */
  .wc-sa-bar{flex-wrap:wrap;gap:6px;padding:6px 9px;}
  .wc-sa-top{flex:1 1 100%;}
  .wc-sa-play{flex:1 1 100%;justify-content:flex-end;}
  .wc-sa-run,.wc-sa-mini-btn,.wc-sa-mode-btn,.wc-sa-addsel,.wc-sa-pickcta{min-height:34px;}
  .wc-sa-run{padding:7px 18px;}

  /* ── ⑨ the rail, at thumb scale ── */
  .wc-sa-studio{--sa-railw:42px;--sa-railh:40px;}
  .wc-sa-range-thumb{width:19px;height:19px;}
  .wc-sa-rail.wc-vert .wc-sa-range-thumb,
  .wc-sa-rail.wc-horz .wc-sa-range-thumb{margin:-9.5px 0 0 -9.5px;}
  /* The thumbs' own labels and the rail's tick numbers do not both fit in a
     42px rail — the numbers stay, since they are the scale being read. */
  .wc-sa-range-thumb i{display:none;}
  .wc-sa-range-tick i{font-size:14px;}
  .wc-sa-rail-now i{font-size:14px;}
  .wc-sa-prev-foot{flex-wrap:wrap;gap:3px;}

  /* ── ⑥ ⑦ ⑧ the timeline ── */
  .wc-sa-studio{--sa-gut:76px;--sa-side:52px;}
  .wc-sa-tl{background:transparent;}
  /* The ruler's three columns do not survive here: ⊕ Add and ⊖ Remove need
     about 130px and --sa-side is 52, so the buttons sat on top of the ruler
     they belong to. Wrapped instead — label and buttons on one line, then the
     ruler with the full width to itself, which is also the width a finger
     needs to drag a keyframe accurately. */
  .wc-sa-kfbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
  .wc-sa-kfbar .wc-sa-tl-lbl{flex:0 0 auto;padding-right:0;}
  .wc-sa-kfbar .wc-sa-tl-side{flex:0 0 auto;margin-left:auto;padding-left:0;}
  .wc-sa-kfbar .wc-sa-tl-area{flex:1 1 100%;order:3;height:26px;}
  .wc-sa-kfbar .wc-sa-kfbar-map{flex:1 1 100%;order:4;padding:0 4px;}
  /* Same story one row down: five columns, the last of them a nowrap sentence,
     laid the caption and the hint on top of each other. The hint says what the
     caption beside it already shows, so it is the part that goes. */
  .wc-sa-selbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 7px;}
  .wc-sa-selnums{flex:1 1 auto;}
  .wc-sa-selnow{flex:1 1 100%;}
  .wc-sa-selhint{display:none;}
  .wc-sa-selnav,.wc-sa-selnum{min-height:26px;}
  .wc-sa-selnum{min-width:26px;}

  /* ── ③ ④ ⑤ the right rail ── */
  .wc-sa-pname{width:104px;}
  .wc-sa-pdel,.wc-sa-fx-del{padding:7px;min-width:30px;}
  /* Sliders are dragged with a finger here, not a mouse. */
  .wc-sa-frow .wc-slider-param,.wc-sa-fx-item .wc-slider-param,.wc-sa-pval .wc-slider-param{height:30px;}
  .wc-sa-frow .wc-slider-param-thumb,
  .wc-sa-fx-item .wc-slider-param-thumb,
  .wc-sa-pval .wc-slider-param-thumb{width:15px;height:15px;}
  .wc-sa-org-pad{width:132px;}
  .wc-sa-col-dotwrap,.wc-sa-col-clear{width:30px;height:30px;}
  .wc-sa-pgrid{grid-template-columns:1fr 1fr;gap:7px;}

  /* ── sub-panels: full-bleed sheets, not centred cards ── */
  .wc-sa-pop,.wc-sa-ask{padding:0;align-items:flex-end;}
  .wc-sa-pop-card,.wc-sa-pop-gallery,.wc-sa-ask-card{
    width:100%;max-width:100%;height:auto;max-height:92%;border-radius:13px 13px 0 0;
    border-left:none;border-right:none;border-bottom:none;
  }
  /* A sheet is a header, one scrolling region and a footer. Its lists carry
     their own ceilings for the centred desktop card; here the sheet itself is
     the ceiling, so they hand their height back and scroll inside it. */
  .wc-sa-pop-body{min-height:0;}
  .wc-sa-pop-card .wc-dd{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto;}
  .wc-sa-pop-card .wc-sa-pgrid{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;}
  .wc-sa-pop-list,.wc-sa-alist{max-height:none;flex:1 1 auto;min-height:0;}
  .wc-sa-code{max-height:60vh;font-size:14px;}
  .wc-sa-ask-row{flex-direction:column-reverse;}
  .wc-sa-ask-row button{width:100%;min-height:40px;}
  .wc-sa-ask-cancel{margin-right:0;}

  /* ── the saved-animations list ── */
  .wc-sa-alist{padding-right:6px;}
  .wc-sa-athumb{width:88px;height:56px;}
  .wc-sa-arow{gap:8px;padding:8px;}
  .wc-sa-aplay{width:38px;height:38px;}
  .wc-sa-anew{padding:12px;}
}

/* Very narrow (≤400px): the thumbnail is the first thing to go — the name and
   what the element says still identify the row, and 88px of picture beside them
   leaves no room for either. */
@media (max-width:400px){
  .wc-sa-athumb{display:none;}
  .wc-sa-name{font-size:15px;}
  .wc-sa-pname{width:92px;font-size:14px;}
  .wc-sa-studio{--sa-gut:62px;--sa-side:44px;}
  .wc-sa-tab{font-size:14px;padding:8px 2px;}
}

/* A tablet gets the same one-panel-at-a-time layout as a phone — it is the
   layout that fits, not a concession to a small screen — but none of the
   phone-scale trimming that goes with it. There is room here for the header
   on one line, a taller preview, a wider label gutter and the sheets as
   centred cards rather than things that slide up from the bottom edge. */
@media (min-width:600px) and (max-width:900px) and (min-height:541px){
  .wc-sa-head{flex-wrap:nowrap;padding:8px 12px;}
  .wc-sa-head-l{width:auto;flex:1;}
  .wc-sa-head-r{width:auto;}
  .wc-sa-name{width:auto;min-width:180px;}
  .wc-sa-head-hits{display:inline;}
  .wc-sa-bar{flex-wrap:nowrap;}
  .wc-sa-top{flex:1 1 auto;}
  .wc-sa-play{flex:0 0 auto;}
  .wc-sa-stage{height:46vh;}
  .wc-sa-studio{--sa-gut:100px;--sa-side:108px;--sa-railw:50px;}
  .wc-sa-pname{width:128px;}
  .wc-sa-pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
  .wc-sa-tabs{padding:6px 12px;}
  .wc-sa-tab{font-size:15px;}
  /* Sheets go back to being cards in the middle of the screen. */
  .wc-sa-pop,.wc-sa-ask{padding:24px;align-items:center;}
  .wc-sa-pop-card,.wc-sa-pop-gallery,.wc-sa-ask-card{
    width:min(680px,100%);max-height:100%;border-radius:11px;border:1px solid rgba(0,234,255,.3);
  }
  .wc-sa-ask-card{width:min(440px,100%);border-color:rgba(255,209,102,.35);}
  .wc-sa-ask-row{flex-direction:row;}
  .wc-sa-ask-row button{width:auto;}
  .wc-sa-ask-cancel{margin-right:auto;}
}

/* ── short and wide: a phone on its side, or a half-height window ──────────
   The column above assumes the screen is taller than it is wide. Here it is
   not, and stacking a preview on top of a panel leaves both of them a strip
   about 120px tall. The same two regions sit side by side instead — preview
   on the left, whichever tab is up on the right — which is the desktop shape
   minus the rail it has no room for. */
@media (min-width:601px) and (max-height:540px) and (max-width:1200px){
  .wc-sa-head{padding:4px 9px;}
  .wc-sa-head-l{width:auto;flex:1;}
  .wc-sa-head-r{width:auto;}
  .wc-sa-name{width:auto;min-width:120px;font-size:15px;padding:4px 0;}
  .wc-sa-btn,.wc-sa-fold-btn,.wc-sa-x{min-height:30px;}
  .wc-sa-tabs{padding:4px 8px;}
  .wc-sa-tab{padding:5px 4px;font-size:14px;}

  /* A two-column grid rather than a wrapping flex row: a flex line takes the
     height of its tallest item, and the panel's natural height is a thousand
     pixels, so wrapping gave both columns that height inside a 312px box and
     clipped everything below the fold. Grid rows can be told to be exactly as
     tall as what is left, which is the whole point here. Only one of the three
     panels is ever displayed (the tabs see to that), so all three claim the
     same cell. */
  .wc-sa-grid{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);
    grid-template-rows:auto minmax(0,1fr);
  }
  /* ② stays a full-width band above both of them: it is the one row that
     belongs to the preview and the panel equally. */
  .wc-sa-bar{grid-column:1/-1;grid-row:1;padding:4px 9px;}
  .wc-sa-top{flex:1 1 auto;}
  .wc-sa-play{flex:0 0 auto;}
  .wc-sa-stage{grid-column:1;grid-row:2;height:auto;min-height:0;padding:4px 6px 2px;}
  .wc-sa-side,.wc-sa-right,.wc-sa-tl{
    grid-column:2;grid-row:2;min-height:0;
    border:none;border-left:1px solid var(--sa-line);border-top:none;
  }
  .wc-sa-prev-note,.wc-sa-sd-foot{display:none;}
  .wc-sa-stage-what{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .wc-sa-studio{--sa-railw:38px;}
  /* Sheets keep a floor under them: at 390px tall a bottom sheet capped at
     92% is the whole screen anyway, so it may as well not round its corners
     off the top of the viewport. */
  .wc-sa-pop-card,.wc-sa-pop-gallery,.wc-sa-ask-card{max-height:100%;border-radius:0;}
  .wc-sa-pop-card .wc-dd,.wc-sa-code{max-height:none;}
}


/* Feature-local toast — _showCompToast() hardcodes "+ <label> added". */
/* Bottom of the screen, not the top. At top:72px it landed squarely on the
   element row it was reporting about — "Applied to .foo" covering the chip that
   had just appeared, hiding the confirmation it was giving. */
.wc-sa-toast{
  position:fixed;bottom:74px;left:50%;z-index:9700;
  transform:translateX(-50%) translateY(10px);
  background:rgba(0,20,22,.94);border:1px solid rgba(0,234,255,.35);color:#00eaff;
  font-family:var(--mono,ui-monospace,monospace);font-size:12px;
  padding:8px 18px;border-radius:8px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .2s,transform .2s;
  box-shadow:0 4px 20px rgba(0,0,0,.5);
}
.wc-sa-toast.wc-err{background:rgba(40,8,8,.95);border-color:rgba(255,90,90,.45);color:#ff7373;}
.wc-sa-toast.wc-show{opacity:1;transform:translateX(-50%) translateY(0);}
/* Has to sit AFTER the block above, not inside the small-screen media query
   further up the file: same specificity, and the base rule is later in source,
   so bottom:74px and nowrap won there — the toast landed on the bottom sheet
   it was reporting about and ran off the side of a 390px screen. */
@media (max-width:900px), (max-height:540px) and (max-width:1200px){
  .wc-sa-toast{bottom:18px;max-width:88vw;white-space:normal;text-align:center;line-height:1.4;}
}

/* ── Scroll-animation rows in the Bindings panel ─────────────────────────────
   sa_bindingsSection() in scrollAnimate.js. Deliberately built from the panel's
   own .wc-bnd-* rows so it reads as one more group of properties on the
   selected element rather than a second tool bolted underneath. */
.wc-bnd-header-sa{color:#8ff4ff;background:rgba(0,234,255,.06);}
.wc-bnd-header-sa em{font-style:normal;opacity:.65;}
.wc-sa-bnd{padding-top:8px;}
.wc-sa-bnd-top{display:flex;align-items:center;gap:8px;padding-bottom:7px;}
.wc-sa-bnd-name{
  font-size:14px;color:rgba(255,255,255,.88);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;
}
.wc-sa-bnd-studio{
  flex-shrink:0;background:rgba(0,234,255,.08);border:1px solid rgba(0,234,255,.25);
  border-radius:6px;color:#00eaff;font-size:14px;font-family:inherit;
  padding:3px 8px;cursor:pointer;transition:background .12s,border-color .12s;
}
.wc-sa-bnd-studio:hover{background:rgba(0,234,255,.18);border-color:rgba(0,234,255,.5);}
.wc-sa-bnd-seg{display:flex;gap:2px;background:rgba(255,255,255,.04);border-radius:6px;padding:2px;}
.wc-sa-bnd-seg button{
  flex:1;min-width:0;background:none;border:none;border-radius:4px;
  color:rgba(255,255,255,.5);font-family:inherit;font-size:14px;
  padding:4px 5px;cursor:pointer;transition:background .12s,color .12s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wc-sa-bnd-seg button:hover{color:rgba(255,255,255,.85);}
.wc-sa-bnd-seg button.wc-active{background:rgba(0,234,255,.16);color:#fff;}
.wc-sa-bnd-num{display:flex;align-items:center;gap:5px;}
.wc-sa-bnd-num .wc-pf-inp{flex:1;min-width:0;}
.wc-sa-bnd-suffix{font-size:14px;color:rgba(255,255,255,.35);flex-shrink:0;}
.wc-sa-bnd-range{display:flex;align-items:center;gap:6px;}
.wc-sa-bnd-range .wc-sa-bnd-num{flex:1;}
.wc-sa-bnd-dash{font-size:14px;color:rgba(255,255,255,.3);flex-shrink:0;}
.wc-sa-bnd-check{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:14px;color:rgba(255,255,255,.65);}
.wc-sa-bnd-check input{accent-color:#00eaff;cursor:pointer;}
.wc-sa-bnd select.wc-pf-inp:disabled{opacity:.4;cursor:not-allowed;}
.wc-sa-bnd-sep{height:1px;background:rgba(0,234,255,.12);margin:0 14px;}

/* ── Motion-block gallery ────────────────────────────────────────────────────
   The "Animate on Scroll" card in the Components panel. Its own overlay rather
   than the studio's #wb-sa-pop, which only exists while the studio is open —
   this opens with it closed. The card bodies reuse .wc-sa-pcard wholesale, so
   the two pickers stay the same picker. --accent and --sa-line are declared on
   .wc-sa-studio, which is not an ancestor here; without them the reused rules
   lose their border and their swatch gradient. */
.wc-mb-overlay{
  position:fixed;inset:0;z-index:9650;
  background:rgba(4,7,10,.74);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:18px;
  opacity:0;transition:opacity .16s;
}
.wc-mb-overlay.wc-open{opacity:1;}
.wc-mb-card{
  --accent:#00eaff;--sa-line:rgba(255,255,255,.08);
  width:760px;max-width:100%;max-height:100%;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#10161b,#0b0f13);
  border:1px solid rgba(0,234,255,.28);border-radius:12px;
  box-shadow:0 26px 70px rgba(0,0,0,.8);overflow:hidden;
  color:rgba(255,255,255,.85);font-family:inherit;
  transform:translateY(10px) scale(.99);transition:transform .18s cubic-bezier(.34,1.4,.64,1);
}
.wc-mb-overlay.wc-open .wc-mb-card{transform:none;}
.wc-mb-hd-l{display:flex;align-items:center;gap:8px;color:var(--accent);}
.wc-mb-hd-l>span{color:#fff;font-size:15px;}
.wc-mb-tabs{align-self:flex-start;}
.wc-mb-note{font-size:14px;color:rgba(255,255,255,.45);margin:0 0 9px;flex-shrink:0;}
/* flex MUST be reset off .wc-sa-pgrid's `flex:1 1 0`. That basis is right in
   the studio's right-hand panel, which has a definite height for the grid to
   grow into. This card does not: .wc-mb-card and .wc-sa-pop-body are both
   auto-height, so a 0 flex-basis gave the grid a 0 hypothetical main size and
   it laid out 2px tall with all 17 cards scrolled out of sight — a gallery
   that looked like it had no blocks in it. Same reason .wc-sa-pgrid-big does
   it. Height comes from the rows, capped by max-height, then it scrolls. */
.wc-mb-grid{grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:8px;
  flex:0 1 auto;max-height:58vh;}
.wc-mb-pcard{position:relative;padding-bottom:20px;overflow:hidden;}
/* The stage clips, so a card mid-hover cannot push its neighbours around: several
   of these travel well past their own box (parallax, drift, fade-across). */
.wc-mb-pcard .wc-sa-pcard-stage{overflow:hidden;}
.wc-mb-kids{display:flex;align-items:center;justify-content:center;gap:4px;height:100%;}
.wc-mb-kid{
  width:15px;height:22px;border-radius:3px;
  background:linear-gradient(135deg,var(--accent),rgba(0,234,255,.45));
}
.wc-mb-tags{position:absolute;left:0;right:0;bottom:5px;display:flex;justify-content:center;gap:4px;}
.wc-mb-tag{
  font-style:normal;font-size:13px;letter-spacing:.03em;text-transform:uppercase;
  color:rgba(255,255,255,.42);background:rgba(255,255,255,.05);
  border-radius:3px;padding:1px 5px;
}
.wc-mb-tag.wc-scrub{color:rgba(0,234,255,.72);background:rgba(0,234,255,.1);}
.wc-mb-tag.wc-kids{color:rgba(255,209,102,.8);background:rgba(255,209,102,.1);}
.wc-mb-foot{
  font-size:14px;color:rgba(255,255,255,.4);line-height:1.5;
  margin-top:10px;padding-top:9px;border-top:1px solid var(--sa-line);flex-shrink:0;
}
/* Same breakpoint as the studio itself — this gallery opens from it and has
   the same problem at the same width. */
@media (max-width:900px){
  .wc-mb-overlay{padding:0;}
  .wc-mb-card{border-radius:0;width:100%;height:100%;}
  /* max-height:none alone left the grid free to grow past the card, which is
     overflow:hidden — the last two rows of blocks were unreachable and the
     footer note painted over the ones above them. Full-height card, so the
     grid takes the space that is left and scrolls inside it. */
  .wc-mb-grid{
    grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
    max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto;
  }
}


/* ============================================================================
   DROPDOWN & ACCORDION  (interactiveComponents.js)
   ==========================================================================*/

/* ── Canvas base layer ──────────────────────────────────────────────────────
   The same rules interactiveComponents.js ships to published pages as
   WB_IC_BASE_CSS — kept byte-identical so what you build is what you get.
   Only what an inline [style] attribute cannot express lives here:
   ::marker removal and [open]-state icon rotation. Everything structural
   (position, absolute menu offsets, flex rows) is written inline by the
   builders, so a component still lays out correctly without this block.
   :where() keeps specificity at 0 so Design-panel rules always win. */
:where(.wb-dd,.wb-acc-item) > summary{list-style:none}
:where(.wb-dd,.wb-acc-item) > summary::-webkit-details-marker{display:none}
:where(.wb-dd,.wb-acc-item) > summary::marker{content:""}
:where(.wb-dd-caret,.wb-acc-icon){transition:transform .18s ease}
:where(.wb-dd[open]) > summary .wb-dd-caret{transform:rotate(180deg)}
:where(.wb-acc-item[open]) > summary .wb-acc-icon{transform:rotate(180deg)}
:where(.wb-acc-item[data-wb-icon="plus"][open]) > summary .wb-acc-icon{transform:rotate(45deg)}
:where(.wb-acc-item[data-wb-icon="none"]) > summary .wb-acc-icon{display:none}

/* ── Items editor (Add popup + Bindings panel) ───────────────────────────── */
.wc-ic-fullrow{display:block}
.wc-ic-fullrow > .wc-pf-label{margin-bottom:7px}
.wc-ic-items{width:100%;box-sizing:border-box}
.wc-ic-items-list{display:flex;flex-direction:column;gap:6px}
.wc-ic-item-row{
  display:flex;align-items:flex-start;gap:7px;
  padding:7px;border-radius:7px;
  background:rgba(255,255,255,.025);border:1px solid rgba(0,234,255,.1);
}
.wc-ic-item-row:hover{border-color:rgba(0,234,255,.22)}
.wc-ic-item-num{
  flex:0 0 auto;width:17px;height:17px;margin-top:5px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,234,255,.08);color:rgba(0,234,255,.6);
  font-size:12px;font-family:var(--mono,ui-monospace,monospace);
}
.wc-ic-item-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.wc-ic-item-inp{
  width:100%;box-sizing:border-box;
  background:#0a0a0a;border:1px solid rgba(0,234,255,.18);border-radius:5px;
  color:rgba(255,255,255,.85);font-size:12px;font-family:inherit;
  padding:5px 8px;outline:none;transition:border-color .13s;
}
.wc-ic-item-inp:focus{border-color:rgba(0,234,255,.45)}
.wc-ic-item-ta{resize:vertical;min-height:34px;line-height:1.45}
.wc-ic-item-acts{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:3px;width:46px;justify-content:flex-end}
.wc-ic-item-btn{
  width:20px;height:20px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:4px;color:rgba(255,255,255,.5);
  font-size:12px;font-family:inherit;line-height:1;cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
.wc-ic-item-btn:hover:not(:disabled){background:rgba(0,234,255,.12);border-color:rgba(0,234,255,.4);color:#00eaff}
.wc-ic-item-btn:disabled{opacity:.28;cursor:not-allowed}
.wc-ic-item-btn.wc-on{background:rgba(0,234,255,.16);border-color:rgba(0,234,255,.5);color:#00eaff}
.wc-ic-item-btn.wc-ic-del:hover:not(:disabled){background:rgba(255,60,60,.14);border-color:rgba(255,60,60,.45);color:#ff6b6b}
.wc-ic-add{
  width:100%;margin-top:7px;padding:7px;
  background:rgba(0,234,255,.08);border:1px solid rgba(0,234,255,.25);
  border-radius:6px;color:rgba(0,234,255,.85);
  font-size:12px;font-family:inherit;cursor:pointer;transition:background .12s;
}
.wc-ic-add:hover:not(:disabled){background:rgba(0,234,255,.16)}
.wc-ic-add:disabled{opacity:.35;cursor:not-allowed}
.wc-ic-sect{
  margin:16px 0 9px;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(0,234,255,.5);
}
.wc-ic-hint{
  margin-top:9px;padding:7px 9px;border-radius:6px;
  background:rgba(0,234,255,.04);border:1px solid rgba(0,234,255,.12);
  color:rgba(255,255,255,.42);font-size:14px;line-height:1.5;
}

/* Drag handle. touch-action:none is load-bearing — without it a touch drag is
   claimed by the panel's scroller and the row never moves. */
.wc-ic-grip{
  flex:0 0 auto;box-sizing:border-box;width:14px;padding:7px 2px 0;
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  cursor:grab;touch-action:none;opacity:.35;transition:opacity .12s;
}
.wc-ic-grip span{display:block;height:1.5px;border-radius:1px;background:rgba(255,255,255,.8)}
.wc-ic-item-row:hover .wc-ic-grip{opacity:.75}
.wc-ic-grip:hover{opacity:1}
.wc-ic-grip:active{cursor:grabbing}
.wc-ic-item-row.wc-ic-dragging{
  border-color:rgba(0,234,255,.5);background:rgba(0,234,255,.07);
  box-shadow:0 6px 18px rgba(0,0,0,.45);opacity:.94;
}
.wc-ic-item-row.wc-ic-dragging .wc-ic-grip{opacity:1;cursor:grabbing}
/* While a row is in flight, the pointer is not aiming at any of the fields. */
.wc-ic-items-list.wc-ic-sorting{user-select:none}
.wc-ic-items-list.wc-ic-sorting .wc-ic-item-inp,
.wc-ic-items-list.wc-ic-sorting .wc-ic-item-btn{pointer-events:none}

/* Colour field: swatch + free-text box + reset. */
.wc-ic-color{display:flex;align-items:center;gap:7px;width:100%}
.wc-ic-color-dot-wrap{
  position:relative;flex:0 0 auto;width:28px;height:28px;border-radius:6px;
  border:1px solid rgba(0,234,255,.28);overflow:hidden;cursor:pointer;
  /* Checkerboard shows through wherever the swatch is unset or translucent. */
  background-color:#151515;
  background-image:linear-gradient(45deg,rgba(255,255,255,.13) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.13) 75%),
                   linear-gradient(45deg,rgba(255,255,255,.13) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.13) 75%);
  background-size:8px 8px;background-position:0 0,4px 4px;
  transition:border-color .13s,box-shadow .13s;
}
.wc-ic-color-dot-wrap:hover{border-color:rgba(0,234,255,.6);box-shadow:0 0 8px rgba(0,234,255,.22)}
.wc-ic-color-dot{position:absolute;inset:0}
.wc-ic-color-unset .wc-ic-color-dot{background:none !important}
/* Transparent, but really there: the OS picker anchors to this element's rect,
   which a display:none input would not have. */
.wc-ic-color-native{
  position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);
  padding:0;border:0;opacity:0;cursor:pointer;background:transparent;
}
.wc-ic-color-hex{flex:1;min-width:0;font-family:var(--mono,ui-monospace,monospace);letter-spacing:.02em}
.wc-ic-color-clear{
  flex:0 0 auto;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:5px;color:rgba(255,255,255,.5);
  font-size:14px;font-family:inherit;line-height:1;cursor:pointer;
  transition:background .12s,border-color .12s,color .12s,opacity .12s;
}
.wc-ic-color-clear:hover:not(:disabled){background:rgba(0,234,255,.12);border-color:rgba(0,234,255,.4);color:#00eaff}
.wc-ic-color-clear:disabled{opacity:.22;cursor:default}

/* Segmented picker — one pill, every choice visible with its own example. */
.wc-ic-seg{
  display:flex;width:100%;gap:4px;padding:3px;box-sizing:border-box;
  background:rgba(255,255,255,.035);border:1px solid rgba(0,234,255,.15);border-radius:8px;
}
.wc-ic-seg-btn{
  flex:1 1 0;min-width:0;padding:5px 7px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:transparent;border:1px solid transparent;border-radius:6px;
  color:rgba(255,255,255,.55);font-family:inherit;cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
.wc-ic-seg-btn:hover{background:rgba(0,234,255,.07);color:rgba(255,255,255,.85)}
.wc-ic-seg-btn.wc-on{
  background:rgba(0,234,255,.14);border-color:rgba(0,234,255,.45);color:#00eaff;
}
.wc-ic-seg-label{font-size:14px;line-height:1.2}
.wc-ic-seg-hint{
  font-size:14px;line-height:1.2;opacity:.62;
  font-family:var(--mono,ui-monospace,monospace);font-variant-numeric:tabular-nums;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── List base layer (interactiveComponents.js WB_LIST_BASE_CSS) ────────────
   Byte-identical to what ships with a published page. Lists need no runtime at
   all — numbering, start, reversed and per-item value are native HTML — so this
   is the entire cost of the feature on a live page. It exists only because
   ::marker is a pseudo-element (no way to write "red bullets" inline) and
   because `gap` does not apply to a plain block list. The panel writes custom
   properties into the list's own [style], which is what makes every setting
   survive save/reload/undo/Export with nothing else to persist. */
:where(.wb-list) > li::marker{
  color:var(--wb-mk-color,currentColor);
  font-size:var(--wb-mk-size,inherit);
  font-weight:var(--wb-mk-weight,inherit);
}
:where(.wb-list) > li{margin-bottom:var(--wb-li-gap,0px)}
:where(.wb-list) > li:last-child{margin-bottom:0}
:where(.wb-list[data-wb-dir="row"]){display:flex;flex-wrap:wrap;align-items:center;gap:var(--wb-li-gap,10px)}
:where(.wb-list[data-wb-dir="row"]) > li{margin-bottom:0}

/* Ordered-list row labels in the Bindings items editor carry a real counter
   (III, 07, c) rather than a position, so they need room to breathe and a
   monospace-ish tabular feel. */
.wc-ic-item-num.wc-ic-item-counter{
  width:auto;min-width:22px;padding:0 4px;
  background:rgba(0,234,255,.14);color:rgba(0,234,255,.85);
  font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;
}

/* ── Guided tour (tutorialTour.js) ───────────────────────────────────────
   One popup, moved between steps — never re-created. The "spotlight" is a
   single fixed box whose oversized box-shadow doubles as the dimmed
   backdrop, so there's no separate cutout/mask element to keep in sync. */
#wb-tour-root{display:none}
#wb-tour-root.wc-open{display:block}

.wc-tour-blocker{
  position:fixed;inset:0;z-index:1000000;background:transparent;cursor:default;
}
.wc-tour-spot{
  position:fixed;z-index:1000001;border-radius:12px;pointer-events:none;opacity:0;
  box-shadow:0 0 0 6000px rgba(5,6,10,0.74),0 0 0 2px rgba(0,234,255,0.55),0 0 30px 4px rgba(0,234,255,0.22);
  transition:left .32s cubic-bezier(.4,0,.2,1),top .32s cubic-bezier(.4,0,.2,1),
             width .32s cubic-bezier(.4,0,.2,1),height .32s cubic-bezier(.4,0,.2,1),opacity .2s ease;
}
.wc-tour-pop{
  position:fixed;z-index:1000002;width:330px;max-width:90vw;
  background:#131417;border:1px solid rgba(0,234,255,0.28);border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,0.65);
  padding:15px 17px 14px;color:rgba(255,255,255,0.85);
  transition:top .32s cubic-bezier(.4,0,.2,1),left .32s cubic-bezier(.4,0,.2,1),opacity .15s ease;
}
.wc-tour-pop-head{display:flex;align-items:center;gap:8px;}
.wc-tour-step{
  font-size:14px;font-weight:700;letter-spacing:.07em;color:#00eaff;opacity:.85;
  white-space:nowrap;flex-shrink:0;
}
.wc-tour-title{flex:1;font-size:15px;font-weight:700;color:#fff;line-height:1.3;}
.wc-tour-close{
  flex-shrink:0;width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.55);font-size:14px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.wc-tour-close:hover{background:rgba(255,255,255,0.1);color:#fff;}
.wc-tour-progress{height:3px;border-radius:3px;background:rgba(255,255,255,0.08);margin:10px 0 12px;overflow:hidden;}
.wc-tour-progress-bar{height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#00b8d9,#00eaff);transition:width .25s ease;}
.wc-tour-body{font-size:14px;line-height:1.6;}
.wc-tour-lead{margin:0 0 8px;color:rgba(255,255,255,0.75);}
.wc-tour-lead:last-child{margin-bottom:0;}
.wc-tour-list{list-style:none;margin:0;padding:0;}
.wc-tour-list li{position:relative;padding-left:15px;margin-bottom:7px;color:rgba(255,255,255,0.7);}
.wc-tour-list li:last-child{margin-bottom:0;}
.wc-tour-list li::before{
  content:'';position:absolute;left:0;top:6px;width:5px;height:5px;border-radius:50%;
  background:#00eaff;box-shadow:0 0 6px rgba(0,234,255,0.6);
}
.wc-tour-list li b{color:#fff;font-weight:600;}
.wc-tour-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.08);
}
.wc-tour-nav{display:flex;gap:8px;}
.wc-tour-btn{
  padding:7px 14px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;
  border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.8);transition:all .15s;font-family:inherit;
}
.wc-tour-btn:hover{background:rgba(255,255,255,0.09);}
.wc-tour-btn:disabled{opacity:.35;cursor:default;pointer-events:none;}
.wc-tour-skip{
  border-color:transparent;background:transparent;color:rgba(255,255,255,0.4);padding-left:0;padding-right:0;
}
.wc-tour-skip:hover{color:rgba(255,255,255,0.7);background:transparent;text-decoration:underline;}
.wc-tour-btn-primary{
  background:linear-gradient(180deg,rgba(0,220,255,0.28),rgba(0,190,255,0.14));
  border-color:rgba(0,224,255,0.55);color:#eafdff;
  box-shadow:0 2px 10px rgba(0,190,255,0.14);
}
.wc-tour-btn-primary:hover{
  background:linear-gradient(180deg,rgba(0,220,255,0.38),rgba(0,190,255,0.2));
  box-shadow:0 4px 16px rgba(0,190,255,0.22);transform:translateY(-1px);
}

@media (max-width:640px){
  .wc-tour-pop{width:290px;padding:13px 15px 12px;}
  .wc-tour-title{font-size:15px;}
}

/* ═══════════════════════════════════════════════════════════════════════
   NARROW-SCREEN CHROME — tablet (≤900px) and phone (≤767px)
   ───────────────────────────────────────────────────────────────────────
   Two things made the editor look unfinished on a small screen:

   1. The top bar carried eight separate controls. .wc-toolbar is
      flex-wrap:wrap, so below ~700px it silently broke onto a second row,
      and the ≤480px rule shrank Export and Live View to bare unlabelled
      icons to postpone that. Below 900px those five secondary actions now
      collapse into one ⋯ menu (markup + wiring in playground.html), leaving
      a single row of exactly what a phone needs: mode switch, Save, ⋯,
      account.
   2. A full-screen panel overlay was closed by a floating ✕ circle over the
      canvas corner, which read as "close the editor" and named no panel. It
      is a sheet header now (title + Done), with the panel pushed below it.

   This block is deliberately the last thing in the file: several of the
   rules below restate a property an earlier, equal-specificity rule already
   set (the phone-mode wrap sizing, the nav bar, the More popover), and
   later-wins is what makes that work.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Toolbar overflow (⋯) menu ─────────────────────────────────────────
   Hidden by default — it only exists below 900px. Every .wc-tbm-* rule is
   prefixed with .wc-toolbar because the popover lives inside the toolbar,
   where the blanket `.wc-toolbar button` rule (34px tall, bordered, padded
   for a label) would otherwise out-specify a bare .wc-tbm-item. */
.wc-toolbar-more-wrap{ position:relative; display:none; flex-shrink:0; }
.wc-toolbar .wc-toolbar-more-btn.wc-open{
  background:rgba(0,234,255,0.12); border-color:rgba(0,234,255,0.4); color:#7cefff;
  transform:none;
}
.wc-toolbar-more-pop{
  position:absolute; top:calc(100% + 9px); right:0; z-index:99999;
  min-width:246px; padding:6px; box-sizing:border-box;
  background:#141416; border:1px solid rgba(255,255,255,0.1);
  border-radius:12px; box-shadow:0 18px 44px rgba(0,0,0,0.55);
  opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none;
  transition:opacity .15s, transform .15s;
}
.wc-toolbar-more-pop.wc-open{ opacity:1; transform:none; pointer-events:auto; }
.wc-toolbar .wc-tbm-item{
  display:flex; align-items:center; gap:11px;
  width:100%; box-sizing:border-box; min-height:44px; height:auto;
  padding:8px 10px; margin:0;
  border:none; border-radius:8px; background:none; box-shadow:none;
  font-family:inherit; font-weight:600; text-align:left; white-space:normal;
  color:rgba(255,255,255,0.72); cursor:pointer;
  transition:background .12s, color .12s;
}
.wc-toolbar .wc-tbm-item:hover:not(:disabled){
  background:rgba(255,255,255,0.06); color:#fff;
  border-color:transparent; box-shadow:none; transform:none;
}
.wc-toolbar .wc-tbm-item:active{ transform:none; background:rgba(0,234,255,0.1); }
.wc-toolbar .wc-tbm-item:disabled{ opacity:.38; cursor:default; pointer-events:none; }
.wc-toolbar .wc-tbm-item svg{ flex-shrink:0; color:rgba(255,255,255,0.45); transition:color .12s; }
.wc-toolbar .wc-tbm-item:hover:not(:disabled) svg{ color:#00eaff; }
.wc-tbm-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.wc-tbm-label{ font-size:14px; font-weight:600; line-height:1.15; }
.wc-tbm-hint{ font-size:14px; font-weight:400; line-height:1.25; color:rgba(255,255,255,0.38); }
.wc-tbm-sep{ height:1px; background:rgba(255,255,255,0.07); margin:5px 4px; }
/* The trigger has a data-tooltip like its neighbours, but its own popover
   opens in the same place — the tooltip would sit behind it. */
.wc-toolbar .wc-toolbar-more-btn.wc-open[data-tooltip]::after{ opacity:0; }

/* Busy: a hidden Export/Live View is running (see initToolbarMore). */
.wc-toolbar .wc-toolbar-more-btn.wc-busy{
  color:#7cefff; border-color:rgba(0,234,255,0.4);
}
.wc-toolbar .wc-toolbar-more-btn.wc-busy svg{ animation:wc-tbm-busy 1.1s ease-in-out infinite; }
@keyframes wc-tbm-busy{ 0%,100%{opacity:.35} 50%{opacity:1} }

/* ── One-row toolbar (fold point) ────────────────────────────────────
   Driven by a class, not @media(max-width:900px): the toolbar only spans
   the center column, not the full window, so with side panels open it can
   be narrower than 900px while the viewport is still wide (and vice versa).
   A ResizeObserver on #wb-main measures the toolbar's own rendered width and
   toggles .wc-tb-fold / .wc-tb-xs to match — see wb_toolbarWidthSync. */
.wc-toolbar.wc-tb-fold{
  flex-wrap:nowrap;          /* the whole point: never a second row */
  gap:8px; padding:8px 10px; min-height:52px;
}
.wc-tb-fold .wc-toolbar-left{ flex:0 1 auto; flex-wrap:nowrap; gap:8px; min-width:0; }
/* Must also be allowed to shrink (and give up its own content-min-width) —
   otherwise, since .wc-toolbar is nowrap, every px this group is too wide by
   gets taken from .wc-toolbar-left's shrunk box without reserving space for
   it, and Save ends up visually overlapping the size badge instead of either
   side actually getting smaller. */
.wc-tb-fold .wc-toolbar-right{ flex:0 1 auto; flex-wrap:nowrap; gap:6px; min-width:0; }

/* Folded into the ⋯ menu. They stay in the DOM and keep working: the menu
   items click these very buttons, so exportProject()/previewLink_generate()
   still find their own element to put a busy label on. */
.wc-tb-fold #wb-exportBtn, .wc-tb-fold #wb-customCodeBtn, .wc-tb-fold #wb-livePreviewBtn,
.wc-tb-fold #wb-tourBtn, .wc-tb-fold #wb-refreshBtn{ display:none; }
.wc-tb-fold .wc-toolbar-left .wc-toolbar-divider{ display:none; }
.wc-tb-fold .wc-toolbar-more-wrap{ display:block; }

/* Left group no longer stretches to fill the bar (that's what left the dead
   gap before Save), so Save just sits at its natural spot right after the
   Preview/Edit switch; .wc-toolbar-right's own margin-left:auto pulls the
   ⋯/badge/avatar cluster to the far edge instead. */

/* Source order in .wc-toolbar-right is ⋯, badge, divider, account; the bar
   reads better with the canvas-size readout first and the two round
   controls together at the edge. */
.wc-tb-fold .wc-toolbar-right #wb-resp-size-badge{ order:1; }
.wc-tb-fold .wc-toolbar-right .wc-toolbar-more-wrap{ order:2; }
.wc-tb-fold .wc-toolbar-right .wc-toolbar-divider{ order:3; }
.wc-tb-fold .wc-toolbar-right .wc-user-wrap{ order:4; }

/* 34px is the smallest comfortable touch target; the old ≤640px rule took
   buttons down to 30px to buy horizontal room that the ⋯ menu now frees. */
.wc-tb-fold.wc-toolbar button{ height:34px; }
.wc-tb-fold.wc-toolbar .wc-toolbar-btn-icon{ width:38px; }
.wc-tb-fold .wc-toolbar-seg{ padding:3px; margin-right:0; }
.wc-tb-fold .wc-toolbar-seg button{ height:28px; padding:0 12px; font-size:14px; }
.wc-tb-fold .wc-user-btn{ height:34px; }

/* Narrower still: label only the active half of the mode switch. Both icons
   stay (they are sized by SVG width/height attributes, so font-size:0 hides
   the label text run without touching them) and the control still reads as
   "you are in Preview" at the smallest widths. */
.wc-toolbar.wc-tb-xs{ padding:8px; gap:6px; }
.wc-tb-xs .wc-toolbar-seg button{ font-size:0; gap:0; padding:0 11px; }
.wc-tb-xs .wc-toolbar-seg button.wc-active{ font-size:14px; gap:6px; padding:0 12px; }
.wc-tb-xs .wc-toolbar-more-pop{ min-width:0; width:calc(100vw - 20px); max-width:280px; }

/* Same icon-only trick as the seg switch, applied to Save: "Save" is a bare
   text node before the SVG (not a span), so font-size:0 drops the label
   while the SVG — sized by its own width/height attributes — stays put. This
   is what actually buys back the room the badge+Save collision needed. */
.wc-tb-xs .wc-save-split-main{ font-size:0; gap:0; padding:0 10px; }

/* The canvas-size readout moves into the ⋯ menu instead of disappearing —
   nothing the toolbar can do gets removed at the narrowest width, it just
   relocates. #wb-tbm-sizeItem mirrors #wb-resp-size-badge's text (see
   resp_updateSizeBadge) and both open the same Responsive panel. */
.wc-tbm-size-item{ display:none; }
.wc-tb-xs .wc-toolbar-right #wb-resp-size-badge{ display:none; }
.wc-tb-xs .wc-toolbar-more-pop button.wc-tbm-size-item{ display:flex; }
.wc-tb-xs .wc-toolbar-more-pop div.wc-tbm-size-item{ display:block; }

/* ── Deeper fold: Preview/Edit + a single ⋯ button ───────────────────
   Same rule as every tier above: a control is never just removed, it moves
   into the ⋯ menu (see the wc-tbm-save-item / wc-tbm-mode-item rows added
   next to the others above). Save and the avatar are the least-used controls
   at this width, so they're the first to fold; the mode switch stays because
   it's the one thing someone touches constantly. */
.wc-tbm-save-item{ display:none; }
.wc-tb-xxs .wc-toolbar-left #wb-save-split,
.wc-tb-xxs .wc-toolbar-right .wc-toolbar-divider{ display:none; }
/* The avatar can't just be display:none like the rest: its dropdown
   (.wc-dropdown) is a CHILD of .wc-user-btn, position:absolute — a
   display:none ancestor would un-render it too, so the Account menu row's
   forwarded click (data-tb-more="wb-wbTopUserBtn") would toggle .wc-open
   on an element nothing ever paints. Collapse it to zero width instead and
   hide its own face with visibility:hidden, which — unlike display/opacity —
   a descendant can reset: .wc-dropdown opts back into visibility:visible
   and still obeys its normal opacity/pointer-events open/closed transition. */
.wc-tb-xxs .wc-toolbar-right .wc-user-wrap{ width:0; min-width:0; margin:0; overflow:visible; }
.wc-tb-xxs .wc-toolbar-right .wc-user-wrap .wc-user-btn{ visibility:hidden; width:0; min-width:0; padding:0; gap:0; }
.wc-tb-xxs .wc-toolbar-right .wc-user-wrap .wc-dropdown{ visibility:visible; }
.wc-tb-xxs .wc-toolbar-more-pop button.wc-tbm-save-item{ display:flex; }
.wc-tb-xxs .wc-toolbar-more-pop div.wc-tbm-save-item{ display:block; }

/* ── Absurdly small: just the ⋯ button ───────────────────────────────
   Even the Preview/Edit switch folds in, leaving one single control on the
   bar. Preview/Edit become their own menu rows (wc-tbm-mode-item, already
   first in the list) instead of the segmented control. */
.wc-tbm-mode-item{ display:none; }
.wc-tb-xxxs .wc-toolbar-left .wc-toolbar-seg{ display:none; }
.wc-tb-xxxs .wc-toolbar-more-pop button.wc-tbm-mode-item{ display:flex; }
.wc-tb-xxxs .wc-toolbar-more-pop div.wc-tbm-mode-item{ display:block; }

/* ── Phone panel overlays: sheet header instead of a floating ✕ ─────── */
/* Base rule lives OUTSIDE the phone query on purpose: the header only ever
   opens in phone mode, so above 767px it has no styling at all and would
   otherwise render as a stray block with a bare "Done" button in the top-left
   corner of every tablet and desktop layout. .wc-show is a class more, so it
   still wins inside the query below regardless of source order. */
.wc-wm-sheet-head{ display:none; }

@media (max-width:767px){
  .wc-wm-sheet-head{
    position:fixed; top:0; left:0; right:0; z-index:940;
    box-sizing:border-box;
    height:calc(48px + env(safe-area-inset-top, 0px));
    padding:env(safe-area-inset-top, 0px) 8px 0 16px;
    align-items:center; justify-content:space-between; gap:10px;
    background:linear-gradient(180deg,#141416 0%,#0d0d0f 100%);
    border-bottom:1px solid rgba(255,255,255,0.1);
    box-shadow:0 2px 14px rgba(0,0,0,0.5);
  }
  .wc-wm-sheet-head.wc-show{ display:flex; }
  .wc-wm-sheet-title{
    font-size:15px; font-weight:700; color:#fff; letter-spacing:.01em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
  }
  .wc-wm-sheet-done{
    flex-shrink:0; height:34px; padding:0 15px;
    font-family:inherit; font-size:14px; font-weight:700; letter-spacing:.01em;
    color:#7cefff; cursor:pointer;
    background:linear-gradient(180deg,rgba(0,220,255,0.2),rgba(0,190,255,0.08));
    border:1px solid rgba(0,224,255,0.4); border-radius:9px;
  }
  .wc-wm-sheet-done:active{ background:rgba(0,220,255,0.3); }

  /* Offset the open panel below the header. Scoped with :not(.wc-collapsed)
     so it can never resurrect a closed, click-blocking full-screen wrap —
     and keyed off the <body> class so the offset appears and disappears with
     the header itself, never on its own. */
  body.wc-wm-sheet-open #wb-left-wrap:not(.wc-collapsed),
  body.wc-wm-sheet-open #wb-right-wrap:not(.wc-collapsed),
  body.wc-wm-sheet-open #wb-bottom-wrap:not(.wc-collapsed){
    top:calc(48px + env(safe-area-inset-top, 0px)) !important;
    height:calc(100vh - 48px - env(safe-area-inset-top, 0px)) !important;
    height:calc(100dvh - 48px - env(safe-area-inset-top, 0px)) !important;
  }

  /* ── Bottom nav ── */
  .wc-wm-mobile-nav{
    height:auto; min-height:56px;
    padding-bottom:env(safe-area-inset-bottom, 0px);
    background:rgba(16,16,18,0.94);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-top:1px solid rgba(255,255,255,0.09);
    box-shadow:0 -4px 22px rgba(0,0,0,0.45);
  }
  .wc-wm-mobile-nav-btn{
    position:relative; min-height:56px; gap:4px;
    font-size:14px; font-weight:600; letter-spacing:.015em;
    color:rgba(255,255,255,0.42);
    -webkit-tap-highlight-color:transparent;
  }
  .wc-wm-mobile-nav-btn svg{ width:20px; height:20px; }
  /* A 2px accent cap on the top edge: at this size a colour change alone is
     easy to miss, and the labels are too small to carry the state. */
  .wc-wm-mobile-nav-btn.wc-active::before{
    content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:24px; height:2px; border-radius:0 0 3px 3px; background:var(--accent,#00eaff);
  }

  /* ── "More panels" popover ── */
  .wc-wm-mobile-more-pop{
    right:8px; bottom:calc(64px + env(safe-area-inset-bottom, 0px));
    min-width:206px; padding:6px;
    background:#141416; border:1px solid rgba(255,255,255,0.1); border-radius:14px;
    box-shadow:0 18px 44px rgba(0,0,0,0.6);
    max-height:min(62vh, 430px); overflow:auto; -webkit-overflow-scrolling:touch;
  }
  .wc-wm-mobile-more-head{
    padding:7px 12px; font-size:11px; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,0.33);
    margin-top:6px; border-top:1px solid rgba(255,255,255,0.06);
  }
  .wc-wm-mobile-more-head:first-child{ margin-top:0; border-top:none; }
  .wc-wm-mobile-more-item{
    display:flex; align-items:center; min-height:44px;
    padding:0 12px; border-radius:9px;
    font-size:15px; font-weight:600; color:rgba(255,255,255,0.78);
  }

  /* Canvas must clear the nav bar, home indicator included. */
  #wb-canvas-viewport{ padding-bottom:calc(66px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ── Floating bottom panels (Animation / Responsive / Binding / Logs) ────────
   Generalisation of the DOM-tree / Logs floats: any bottom tab can be popped
   out into its own draggable, resizable window over the canvas. The panel
   element is MOVED into the window, so these rules have to undo the tab-deck
   positioning it carries with it (see .wc-bp-popup-body > .wc-bottom-panel). */

/* Float button at the right end of the bottom tab bar — acts on the active tab */
#wb-bottom-heading .wc-bp-float-btn{
  margin:auto 0 auto auto;
  display:flex;align-items:center;gap:5px;flex-shrink:0;
  background:rgba(0,234,255,0.06);border:1px solid rgba(0,234,255,0.25);
  color:var(--neo1);font-family:inherit;font-size:14px;letter-spacing:.04em;
  padding:3px 10px;border-radius:6px;cursor:pointer;white-space:nowrap;
  transition:background .15s,box-shadow .15s,color .15s;
}
#wb-bottom-heading .wc-bp-float-btn:hover{background:rgba(0,234,255,0.13);box-shadow:0 0 0 1px rgba(0,234,255,0.25);}
#wb-bottom-heading .wc-bp-float-btn.wc-bp-float-btn-act{border-color:rgba(0,234,255,0.6);box-shadow:0 0 0 1px rgba(0,234,255,0.25);color:#00eaff;}
/* a tab whose panel is currently floating */
.wc-bottom-heading-style.wc-bp-out::before{content:'\29C9\00a0';font-size:14px;opacity:.75;}

.wc-bp-popup{
  position:fixed;
  display:none;
  flex-direction:column;
  min-width:320px;
  min-height:220px;
  max-width:96vw;
  max-height:92vh;
  background:rgba(13,13,18,0.94);
  /* deliberately NO backdrop-filter (the DOM/Logs floats have one): it would
     make this window a containing block for position:fixed descendants, and
     the Responsive panel's full-screen "Add adapter" modal is exactly that —
     it would end up trapped inside the little window instead of covering the
     screen. overflow:hidden alone does not clip fixed descendants. */
  border:1px solid rgba(0,234,255,0.25);
  border-radius:10px;
  box-shadow:0 18px 60px rgba(0,0,0,0.65),0 0 0 1px rgba(0,234,255,0.05);
  z-index:9000;
  resize:both;
  overflow:hidden;
}
.wc-bp-popup-hd{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;
  cursor:grab;
  user-select:none;
  touch-action:none;
  border-bottom:1px solid rgba(255,255,255,0.08);
  background:rgba(0,234,255,0.05);
  color:rgba(255,255,255,0.6);
  flex-shrink:0;
}
.wc-bp-popup-hd:active{cursor:grabbing;}
.wc-bp-popup-title{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:rgba(0,234,255,0.85);font-weight:600;}
.wc-bp-popup-hint{font-size:14px;color:rgba(255,255,255,0.3);margin-left:auto;white-space:nowrap;}
.wc-bp-popup-close{
  width:24px;height:24px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:6px;
  color:rgba(255,255,255,0.45);
  cursor:pointer;
  transition:background .14s,border-color .14s,color .14s;
}
.wc-bp-popup-close:hover{background:rgba(0,234,255,0.1);border-color:rgba(0,234,255,0.5);color:#00eaff;}
.wc-bp-popup-body{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;background:var(--bg,#0d0d0d);}
/* The moved panel still wears .wc-bottom-panel (hidden tab-deck member:
   position:absolute, opacity:0, pointer-events:none) AND the inline
   position BottomswitchTab writes — !important is what beats the inline one. */
.wc-bp-popup-body > .wc-bottom-panel{
  position:static !important;
  inset:auto !important;
  opacity:1 !important;
  transform:none !important;
  pointer-events:auto !important;
  flex:1 1 0;min-height:0;
}
/* Logs has no id-level layout of its own — give it the flex column its
   inner #wb-hist-log-wrap (height:100%) needs, minus the deck's padding */
.wc-bp-popup-body > #wb-bottom-panel-bottom-set4{padding:0;display:flex;flex-direction:column;overflow:hidden;}
/* placeholder left in the tab deck while the panel floats */
.wc-bp-ph{
  display:flex;align-items:center;justify-content:center;
  padding:10px !important;
}
.wc-bp-ph-box{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:150px;padding:34px 12px;
  color:rgba(255,255,255,0.4);font-size:14px;text-align:center;
  border:1px dashed rgba(255,255,255,0.15);border-radius:8px;
}
.wc-bp-ph-box button{
  background:rgba(0,234,255,0.08);
  border:1px solid rgba(0,234,255,0.35);
  border-radius:6px;
  color:#00eaff;
  font-size:14px;
  padding:6px 14px;
  cursor:pointer;
  transition:background .14s;
}
.wc-bp-ph-box button:hover{background:rgba(0,234,255,0.18);}

@media (max-width:900px){
  /* the tab bar already scrolls/wraps at this width — keep the button compact */
  #wb-bottom-heading .wc-bp-float-btn span{display:none;}
  #wb-bottom-heading .wc-bp-float-btn{padding:3px 8px;}
}
@media (max-width:767px){
  /* phone: the windows are the full width of the screen, stacked from the top */
  .wc-bp-popup{width:96vw !important;height:72vh !important;left:2vw !important;}
}

/* ── Floated panels react to the WINDOW's width, not the viewport's ─────────
   Everything in the bottom bar was laid out for a bar as wide as the screen,
   so inside a float window it needs its own breakpoints. The buckets
   (.wc-bpw-sm / .wc-bpw-xs) are stamped on the window by a ResizeObserver in
   _bpPopupBuild — deliberately NOT container queries, because container-type
   implies layout containment, which would make the window a containing block
   for position:fixed and trap the Responsive panel's Add-adapter modal (the
   same reason backdrop-filter is off up there). */

/* Animation tab: Properties is width:30% of the edit panel — generous under a
   full-width bar, far too narrow in a window, so its rows overflowed and got
   clipped. Floor it, and take the animation list down a notch to pay for it. */
.wc-bp-popup #wb-animation-left-panel{min-width:210px;}
.wc-bp-popup #wb-animation-right-panel{width:24%;min-width:140px;}

/* Same overflow problem hits the MAIN (non-popup) Animation Panel on a real
   phone — #wb-animation-edit-panel has min-width:300px and the list/properties
   columns carry fixed %/px widths, none of which shrink for a ~360-400px
   viewport, so rows blew out past the screen edge (duration/timing-fn/delay
   controls spilling off-screen instead of staying inside their own box).
   Stack everything vertically below 767px — list, then timeline, then
   properties — same pattern as .wc-bpw-sm/.wc-bpw-xs above, but driven by
   the real viewport instead of the float-window ResizeObserver. Everything
   stays overflow:visible so it keeps contributing to the single scroll on
   #wb-animation-app rather than growing its own nested scrollbar. */
@media (max-width:767px){
  #wb-animation-body{flex-direction:column;}
  #wb-animation-right-panel{width:auto;flex:0 0 auto;border-right:none;border-bottom:0.5px solid var(--border);}
  #wb-animation-lresize{display:none;}
  #wb-animation-edit-panel{flex-direction:column;min-width:0;}
  #wb-animation-center-panel{min-width:0;}
  #wb-animation-left-panel{width:auto;min-width:0;border-left:none;border-top:0.5px solid var(--border);}
  #wb-animation-rresize{display:none;}
}

/* < 760px — Properties drops BELOW the timeline instead of beside it */
.wc-bpw-sm #wb-animation-edit-panel{flex-direction:column;min-width:0;}
.wc-bpw-sm #wb-animation-center-panel{flex:1.3 1 0;min-width:0;min-height:110px;}
.wc-bpw-sm #wb-animation-left-panel{
  width:auto;min-width:0;flex:1 1 0;min-height:0;
  border-left:none;border-top:0.5px solid var(--border);
}
.wc-bpw-sm #wb-animation-rresize{display:none;}
.wc-bpw-sm .wc-adp-sidebar{width:230px;}

/* < 540px — everything stacks: the animation list moves on top, and the
   Responsive panel's detail sidebar drops under its list */
.wc-bpw-xs #wb-animation-body{flex-direction:column;}
.wc-bpw-xs #wb-animation-right-panel{
  width:auto;flex:0 0 auto;max-height:148px;overflow-y:auto;
  border-right:none;border-bottom:0.5px solid var(--border);
}
.wc-bpw-xs #wb-animation-lresize{display:none;}
.wc-bpw-xs .wc-animation-prop-label-group{width:88px;}
.wc-bpw-xs .wc-adp-body{flex-direction:column;}
.wc-bpw-xs .wc-adp-sidebar{
  width:auto;flex:0 0 auto;max-height:52%;
  border-left:none;border-top:1px solid var(--border);
}

/* ── Quick Actions bottom panel (bottom-set5) ─────────────────────────────────
   A searchable list of one-click common styling jobs for the selected element.
   Writes route through applyLayoutProp; see quickActions.js. */
#wb-bottom-panel-bottom-set5{padding:0;display:flex;flex-direction:column;height:100%;min-height:0;background:var(--bg);}
#wb-qa-wrap{display:flex;flex-direction:column;height:100%;min-height:0;}
#wb-qa-toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 16px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(0,234,255,0.06),transparent 70%),var(--bar);flex-shrink:0;
}
#wb-qa-target-chip{
  display:flex;align-items:center;gap:6px;
  font-family:monospace;font-size:14px;font-weight:600;color:var(--accent);
  background:rgba(0,234,255,0.1);border:1px solid rgba(0,234,255,0.28);
  padding:5px 11px;border-radius:999px;white-space:nowrap;max-width:44%;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 1px 0 rgba(0,0,0,.15) inset;
}
#wb-qa-target-chip::before{
  content:'';flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(0,234,255,0.18);
}
#wb-qa-wrap:has(#wb-qa-list.wc-qa-list-disabled) #wb-qa-target-chip{
  color:var(--text-3);background:rgba(255,255,255,0.04);border-color:var(--border);
}
#wb-qa-wrap:has(#wb-qa-list.wc-qa-list-disabled) #wb-qa-target-chip::before{
  background:var(--text-3);box-shadow:none;
}
#wb-qa-search-field{
  display:flex;align-items:center;gap:7px;flex:1;min-width:170px;
  background:var(--panel);border:1px solid var(--border);border-radius:999px;
  padding:7px 13px;transition:border-color .15s,box-shadow .15s,background .15s;
}
#wb-qa-search-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,234,255,0.12);background:var(--bar);}
#wb-qa-search-field svg{color:var(--text-3);flex-shrink:0;}
#wb-qa-search-field:focus-within svg{color:var(--accent);}
#wb-qa-search{
  flex:1;background:none;border:none;outline:none;color:var(--text-hi);
  font-size:15px;font-family:inherit;min-width:0;
}
#wb-qa-search::placeholder{color:var(--text-3);}
#wb-qa-empty-hint{
  margin:16px 16px 0;padding:18px 16px;font-size:14px;line-height:1.65;color:var(--text);
  text-align:center;background:rgba(0,234,255,0.035);
  border:1px dashed rgba(0,234,255,0.25);border-radius:12px;
}
#wb-qa-empty-hint::before{
  content:'';display:block;width:30px;height:30px;margin:0 auto 10px;
  background:rgba(0,234,255,0.12);border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300eaff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E") center/16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300eaff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E") center/16px no-repeat;
  background-color:var(--accent);
}
/* Groups lay out as a fixed-count grid (3 cards/row, falling back to 2 then
   1 as the panel narrows) instead of one long vertical stack — and instead
   of auto-fit's "4 columns, then a half-empty trailing row", which read as
   random mismatched blocks. Cards in the same row share the row's height
   (grid's default item stretch — only #wb-qa-wrap's own width drives the
   column count via a container query, since this can live in a narrow
   floated window regardless of the browser's own viewport width).
   (CSS multicol was tried first but Chrome mis-sizes column height when
   the container's own height comes from a flex ancestor, orphaning a
   group's header in one column and its buttons in the next — grid doesn't
   have that failure mode.) */
#wb-qa-wrap{container-type:inline-size;}
#wb-qa-list{
  flex:1;min-height:0;overflow-y:auto;padding:14px 16px 22px;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:10px 14px;align-content:start;
  scrollbar-color:rgba(0,234,255,0.35) transparent;scrollbar-width:thin;
}
#wb-qa-list::-webkit-scrollbar{width:9px;}
#wb-qa-list::-webkit-scrollbar-track{background:transparent;}
#wb-qa-list::-webkit-scrollbar-thumb{background:rgba(0,234,255,0.3);border-radius:5px;border:2px solid transparent;background-clip:content-box;}
#wb-qa-list::-webkit-scrollbar-thumb:hover{background:rgba(0,234,255,0.55);border:2px solid transparent;background-clip:content-box;}
@container (max-width:620px){ #wb-qa-list{grid-template-columns:repeat(2,1fr);} }
@container (max-width:380px){ #wb-qa-list{grid-template-columns:1fr;} }
#wb-qa-list.wc-qa-list-disabled{opacity:.4;pointer-events:none;filter:grayscale(.5);}
#wb-qa-noresult{padding:28px 4px;font-size:15px;color:var(--text-3);text-align:center;grid-column:1/-1;}
.wc-qa-group{
  margin:0;padding:10px 12px 12px;
  background:rgba(255,255,255,0.015);border:1px solid var(--border);border-radius:10px;
  display:flex;flex-direction:column;
}
.wc-qa-group-title{
  display:flex;align-items:center;gap:7px;
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 9px;
}
.wc-qa-group-icon{color:var(--accent);flex-shrink:0;opacity:.85;}

/* ── Segmented controls (mutually-exclusive choices: display, position,
   align, text-align, direction, …) — one compact connected pill row each,
   icon- or short-text-driven, with a clear lit-up active option. ── */
.wc-qa-segs{display:flex;flex-direction:column;gap:7px;margin-bottom:8px;}
.wc-qa-segs:last-child{margin-bottom:0;}
.wc-qa-seg-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.wc-qa-seg-label{
  flex:0 0 auto;font-size:12px;font-weight:600;color:var(--text-3);
  min-width:58px;letter-spacing:.02em;
}
.wc-qa-seg{
  display:inline-flex;flex-wrap:wrap;align-items:stretch;background:var(--panel);
  border:1px solid var(--border);border-radius:8px;overflow:hidden;flex:0 0 auto;
  max-width:100%;
}
.wc-qa-seg-btn{
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:none;border:none;border-right:1px solid var(--border);
  color:var(--text-2);padding:6px 10px;min-width:32px;min-height:28px;
  transition:background .13s,color .13s;
}
.wc-qa-seg-btn:last-child{border-right:none;}
.wc-qa-seg-btn:hover{background:rgba(0,234,255,0.09);color:var(--accent);}
.wc-qa-seg-btn:active{background:rgba(0,234,255,0.16);}
.wc-qa-seg-btn-active{background:var(--accent);color:#04181b;}
.wc-qa-seg-btn-active:hover{background:var(--accent);color:#04181b;}
.wc-qa-seg-btn svg{display:block;}
.wc-qa-seg-text{font-size:13px;font-weight:600;white-space:nowrap;}
.wc-qa-flip-x{display:inline-flex;transform:scaleX(-1);}
.wc-qa-flip-y{display:inline-flex;transform:scaleY(-1);}

/* ── One-off action buttons: compact icon tiles when an icon is defined,
   small text pills otherwise. Active = currently matches computed style. ── */
.wc-qa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px;}
.wc-qa-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;background:var(--panel);border:1px solid var(--border);border-radius:8px;
  color:var(--text-2);font-size:11.5px;font-weight:600;font-family:inherit;
  padding:8px 4px 7px;text-align:center;line-height:1.2;
  transition:border-color .13s,background .13s,color .13s,transform .08s;
}
.wc-qa-btn:not(.wc-qa-btn-icon){
  flex-direction:row;justify-content:flex-start;text-align:left;
  grid-column:span 2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:13px;padding:8px 11px;
}
.wc-qa-btn:hover{border-color:rgba(0,234,255,0.45);background:rgba(0,234,255,0.09);color:var(--accent);}
.wc-qa-btn:active{transform:translateY(1px) scale(.98);background:rgba(0,234,255,0.14);}
.wc-qa-btn-active{border-color:var(--accent);background:rgba(0,234,255,0.16);color:var(--accent);}
.wc-qa-btn-icon-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}

/* Sliders & colour pickers laid out 2–3 per row (compact cells, label above). */
.wc-qa-ctrls{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:7px 9px;margin-bottom:8px;
}
.wc-qa-ctrl{
  display:flex;flex-direction:column;gap:5px;min-width:0;
  background:var(--panel);border:1px solid var(--border);border-radius:8px;
  padding:7px 11px;
}
.wc-qa-ctrl-label{font-size:13px;font-weight:600;color:var(--text-2);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* slot that hosts the shared pill slider (PARAMETER_INPUT_createSliderParam) */
.wc-qa-slot{display:flex;min-width:0;}
.wc-qa-slot .wc-slider-param{flex:1;min-width:0;width:auto;height:28px;}
.wc-qa-slot .wc-slider-param-track{margin:0 10px;min-width:30px;}
.wc-qa-colorrow{display:flex;align-items:center;gap:9px;}
.wc-qa-color{
  flex:0 0 36px;height:26px;padding:0;border:1px solid var(--border);border-radius:6px;
  background:none;cursor:pointer;
}
.wc-qa-color::-webkit-color-swatch-wrapper{padding:2px;}
.wc-qa-color::-webkit-color-swatch{border:none;border-radius:4px;}
.wc-qa-sw{font-family:monospace;font-size:13px;color:var(--text-3);}