/* Native-input adaptation of 21st Switch (shadcn) and Slider (jshguo).
   Keep native checked/value state and all existing project event handlers. */
:root { --control-track:#555; --control-thumb:#fff; }
:root[data-theme="light"] { --control-track:#b5b5b5; }
body.reworkUi input.check[type="checkbox"] {
  appearance:none; box-sizing:border-box; flex:0 0 44px;
  width:44px; min-width:44px; height:24px; padding:0; margin:0;
  border:0; border-radius:999px; background:var(--control-track);
  box-shadow:none; vertical-align:middle;
  transition:background-color 180ms ease,filter 180ms ease;
}
body.reworkUi input.check[type="checkbox"]::after {
  content:""; position:absolute; top:2px; left:2px;
  width:20px; height:20px; border:0; border-radius:50%;
  background:var(--control-thumb); box-shadow:0 1px 2px #0003;
  transform:translateX(0); transition:transform 180ms ease;
}
body.reworkUi input.check[type="checkbox"]:checked { background:var(--accent); }
body.reworkUi input.check[type="checkbox"]:checked::after {
  background:var(--control-thumb); transform:translateX(20px);
}
/* A single contrasting contour inside the track makes keyboard focus visible. */
body.reworkUi input.check.check[type="checkbox"]:focus-visible {
  outline:2px solid var(--text-main); outline-offset:-2px; box-shadow:none;
}
body.reworkUi input.check[type="checkbox"]:disabled { opacity:.45; cursor:not-allowed; }
body.reworkUi input[type="range"] {
  box-sizing:border-box; min-width:0; height:32px; padding:0;
  background:transparent; border:0; cursor:pointer; border-radius:999px;
}
body.reworkUi input[type="range"]::-webkit-slider-runnable-track {
  height:6px; border:0; border-radius:999px;
  background:linear-gradient(to right,var(--accent) 0 var(--range-progress),var(--control-track) var(--range-progress) 100%);
}
body.reworkUi input[type="range"]::-webkit-slider-thumb {
  appearance:none; box-sizing:border-box; width:20px; height:20px; margin-top:-7px;
  background:var(--control-thumb); border:2px solid var(--accent); border-radius:50%;
  box-shadow:none; transition:transform 150ms ease,background-color 150ms ease;
}
body.reworkUi input[type="range"]::-moz-range-track {
  height:6px; border:0; border-radius:999px; background:var(--control-track);
}
body.reworkUi input[type="range"]::-moz-range-progress {
  height:6px; border-radius:999px; background:var(--accent);
}
body.reworkUi input[type="range"]::-moz-range-thumb {
  box-sizing:border-box; width:20px; height:20px;
  background:var(--control-thumb); border:2px solid var(--accent); border-radius:50%;
  box-shadow:none; transition:transform 150ms ease,background-color 150ms ease;
}
/* Focus belongs to the thumb, not a second rectangle around the entire track. */
body.reworkUi input[type="range"]:focus-visible { outline:none!important; }
body.reworkUi input[type="range"]:focus-visible::-webkit-slider-thumb { border-width:3px; background:#dbeafe; box-shadow:none; }
body.reworkUi input[type="range"]:focus-visible::-moz-range-thumb { border-width:3px; background:#dbeafe; box-shadow:none; }
body.reworkUi input[type="range"]:disabled { opacity:.45; cursor:not-allowed; }
@media (hover:hover) and (pointer:fine) {
  body.reworkUi input[type="range"]:hover:not(:disabled)::-webkit-slider-thumb { transform:scale(1.1); }
  body.reworkUi input[type="range"]:hover:not(:disabled)::-moz-range-thumb { transform:scale(1.1); }
}
@media (prefers-reduced-motion:reduce) {
  body.reworkUi input.check[type="checkbox"],body.reworkUi input.check[type="checkbox"]::after { transition:none; }
  body.reworkUi input[type="range"]::-webkit-slider-thumb { transition:none; transform:none!important; }
  body.reworkUi input[type="range"]::-moz-range-thumb { transition:none; transform:none!important; }
}

/* Single-section tabs use the sidebar shell as their only container. */
body.reworkUi .sidebar > .singlePanelContent {
  margin:0 0 12px; padding:0; border:0; background:transparent; box-shadow:none;
}
body.reworkUi .sidebar > .singlePanelContent[hidden] { display:none!important; }
body.reworkUi .singlePanelContent > .subtle { margin:12px 0; }
body.reworkUi .singlePanelContent > .subtle:first-child { margin-top:0; }
body.reworkUi .singlePanelContent > .subtle:last-child { margin-bottom:0; }

/* Original file buttons form one compact row in the existing toolbar. */
body.reworkUi .appToolbar .toolbarProjectGroup :is(#newProjectBtn,#loadProjectBtn,#saveProjectBtn,#openExportDialogBtn) {
  display:inline-flex!important; flex:0 0 36px; width:36px; min-width:36px;
  height:36px; min-height:36px; padding:0; align-items:center; justify-content:center;
}
body.reworkUi .appToolbar .projectFileAction > span { display:none!important; }
body.reworkUi .projectNotesSection { margin-top:16px; padding-top:12px; border-top:1px solid var(--border-soft); }
body.reworkUi .inspectorHeader h2 { display:none; }
body.reworkUi .inspectorHeader { min-height:44px; padding-block:4px; }

body.reworkUi .appToolbar .toolbarServerGroup {
  flex:0 0 auto; gap:6px; padding-left:8px; border-left:1px solid var(--border-main);
}
body.reworkUi .toolbarServerGroup #cloudProjectsBtn {
  width:36px; min-width:36px; height:36px; min-height:36px; padding:0;
}
body.reworkUi .toolbarServerGroup #cloudProjectsBtn > span { display:none; }

/* Keep server actions immediately after common marks; only the theme floats right. */
body.reworkUi .taskBar { flex:0 1 auto; }
body.reworkUi .appToolbar > .themePicker { margin-left:auto; }

/* One icon-button family for file, history, image, home and server actions. */
body.reworkUi .appToolbar .btn.toolbarAction {
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 36px; width:36px; min-width:36px; height:36px; min-height:36px;
  padding:0; border:1px solid transparent; border-radius:8px;
  background:transparent; color:var(--text-secondary); box-shadow:none; opacity:1;
}
body.reworkUi .appToolbar .toolbarAction > span { display:none!important; }
body.reworkUi .appToolbar :is(.uiIcon,.markerIcon) { width:20px; height:20px; flex:0 0 20px; }
body.reworkUi .appToolbar .btn.toolbarAction:hover:not(:disabled) {
  border-color:transparent; background-color:var(--bg-elevated); color:var(--text-main);
}
body.reworkUi .appToolbar :is(.btn.toolbarAction,.taskButton,.colorBtn):disabled {
  background:transparent; border-color:transparent; color:var(--text-disabled);
  opacity:1; box-shadow:none; filter:none; cursor:not-allowed;
}
body.reworkUi .appToolbar .themePicker {
  border-color:transparent; background:transparent; color:var(--text-secondary); border-radius:8px;
}
body.reworkUi .appToolbar .themePicker:hover { background-color:var(--bg-elevated); color:var(--text-main); }
body.reworkUi .appToolbar .cloudEditorBar {
  min-width:0; max-width:none; height:36px; flex:0 0 auto; padding:0;
  border:0; background:transparent; box-shadow:none;
}
body.reworkUi .appToolbar .cloudEditorIdentity { display:none; }

body.reworkUi .appToolbar .toolbarAction[hidden] { display:none!important; }