/* BioStudio AI — shared structure for the minimalist BioStudioAI shells
   (Mono / theme-bs3, Carbon / theme-bs4, Air / theme-bs5).
   Everything here is token-driven: each theme file defines the --bsx-* set
   (surface, border, accent, radius, shadow, blur) on #os.theme-bsN and
   body.theme-bsN, then adds only its own identity flourishes. Layout variants
   come from the dashboard's data-layout attribute (editorial | grid | hero).
   Loaded before the three theme CSS files so they can override anything. */

/* ---------------------------------------------------------------------- */
/* Dashboard home                                                          */
/* ---------------------------------------------------------------------- */
.bsx-home {
  position: absolute;
  /* The parent desktop surface already represents the live taskbar work area. */
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
}

/* Keep legacy app aliases (--surface/--text) in sync with shell tokens */
body.theme-bs3, #os.theme-bs3,
body.theme-bs4, #os.theme-bs4,
body.theme-bs5, #os.theme-bs5 {
  --surface: var(--bsx-surface);
  --text: var(--ink);
  --muted: var(--ink-soft);
  --border: var(--bsx-border);
}

/* top word-nav */
.bsx-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px clamp(20px, 4vw, 56px);
}
.bsx-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.bsx-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bsx-accent);
}
.bsx-nav-links { flex: 1; display: flex; align-items: center; gap: 2px; }
.bsx-nav-link {
  padding: 7px 12px;
  border: none;
  border-radius: calc(var(--bsx-radius) - 2px);
  background: none;
  color: var(--ink-soft);
  font: 550 13px var(--font);
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}
.bsx-nav-link:hover { color: var(--ink); background: var(--bsx-accent-soft); }
.bsx-nav-link.active { color: var(--ink); background: var(--bsx-accent-soft); }
.bsx-brand { border: none; background: none; cursor: pointer; font: inherit; color: var(--ink); }
.bsx-nav-edit {
  margin-left: 4px;
  padding: 6px 10px;
  border: 1px dashed var(--bsx-border);
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  font: 600 12px var(--font);
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.bsx-nav-edit:hover, .bsx-nav-edit.on { color: var(--ink); border-color: var(--bsx-accent); border-style: solid; }

/* Wraps .bsx-nav-user so its account flyout (js/core/user-flyout.js) can
   anchor to the button instead of opening the Profile app as a window. */
.bsx-user-wrap { position: relative; display: inline-flex; }
.bsx-user-wrap .user-flyout { position: absolute; top: calc(100% + 8px); right: 0; }

/* top-bar customizer (shown under the nav while editing) */
.bsx-navedit {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 clamp(20px, 4vw, 56px) 4px;
  padding: 10px 14px;
  border: 1px dashed var(--bsx-border);
  border-radius: var(--bsx-radius);
  background: var(--bsx-surface-2);
}
.bsx-navedit-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.bsx-navedit-list { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bsx-navedit-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px 5px 11px;
  border: 1px solid var(--bsx-border);
  border-radius: 999px;
  background: var(--bsx-surface);
  color: var(--ink);
  font: 600 11.5px var(--font);
}
.bsx-navedit-tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border: none; border-radius: 50%;
  background: none; color: var(--ink-soft); font-size: 12px; cursor: pointer;
}
.bsx-navedit-tool:hover:not([disabled]) { background: var(--bsx-accent-soft); color: var(--ink); }
.bsx-navedit-tool.danger:hover:not([disabled]) { color: #ef4444; }
.bsx-navedit-tool[disabled] { opacity: 0.3; cursor: default; }
.bsx-navedit-add {
  padding: 6px 12px;
  border: 1px dashed var(--bsx-border);
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  font: 600 11.5px var(--font);
  cursor: pointer;
}
.bsx-navedit-add:hover { color: var(--ink); border-color: var(--bsx-accent); background: var(--bsx-accent-soft); }
.bsx-nav-user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--bsx-border);
  border-radius: 50%;
  background: var(--bsx-surface);
  color: var(--ink);
  font: 700 11px var(--font);
  cursor: pointer;
}
.bsx-nav-user:hover { border-color: var(--bsx-accent); }

/* stage = center column + widget panel */
.bsx-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(8px, 2vh, 24px) clamp(20px, 4vw, 56px) 0;
  overflow: hidden;
}
.bsx-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 3.2vh, 34px);
  overflow-y: auto;
  padding-bottom: 28px;
}
.bsx-greeting h1 {
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.bsx-greeting p { margin-top: 6px; font-size: 14px; color: var(--ink-soft); }

/* inline live search bar */
.bsx-cmd-row { display: flex; }
.bsx-cmd {
  display: flex;
  align-items: center;
  gap: 11px;
  width: min(560px, 100%);
  padding: 12px 16px;
  border: 1px solid var(--bsx-border);
  border-radius: var(--bsx-radius);
  background: var(--bsx-surface);
  color: var(--ink-soft);
  font-size: 14px;
  box-shadow: var(--bsx-shadow);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.bsx-cmd:hover, .bsx-cmd:focus-within { border-color: var(--bsx-accent); }
.bsx-cmd-glyph { display: inline-flex; color: var(--bsx-accent); }

/* projects */
.bsx-sec-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.bsx-proj {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  border: 1px solid var(--bsx-border);
  border-radius: var(--bsx-radius);
  background: var(--bsx-surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  box-shadow: var(--bsx-shadow);
  transition: border-color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
.bsx-proj:hover { border-color: var(--bsx-accent); }
.bsx-proj-mark {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bsx-accent);
}
.bsx-proj-mark.new {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1;
}
.bsx-proj-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bsx-proj-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsx-proj-sub { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsx-proj-go { flex: none; display: inline-flex; color: var(--ink-soft); opacity: 0; transition: opacity 0.12s ease, transform 0.12s ease; }
.bsx-proj:hover .bsx-proj-go { opacity: 1; transform: translateX(2px); color: var(--bsx-accent); }
.bsx-proj-new { border-style: dashed; box-shadow: none; background: none; }

/* quick actions strip */
.bsx-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bsx-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--bsx-border);
  border-radius: 999px;
  background: var(--bsx-surface);
  color: var(--ink);
  font: 550 12.5px var(--font);
  cursor: pointer;
  transition: border-color 0.13s ease, background 0.13s ease, color 0.13s ease;
}
.bsx-action:hover { border-color: var(--bsx-accent); background: var(--bsx-accent-soft); }
.bsx-action-icon { display: inline-flex; color: var(--bsx-accent); }

/* ---- Category / all-apps views (in-place desktop views) ---------------- */
.bsx-view { display: flex; flex-direction: column; gap: 18px; }
.bsx-view-head h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.bsx-view-head p { margin-top: 4px; font-size: 13px; color: var(--ink-soft); }
.bsx-view-empty { font-size: 13px; color: var(--ink-soft); }
.bsx-apps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
}
.bsx-app {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  padding: 14px;
  border: 1px solid var(--bsx-border);
  border-radius: var(--bsx-radius);
  background: var(--bsx-surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  box-shadow: var(--bsx-shadow);
  transition: border-color 0.13s ease, transform 0.13s ease, background 0.13s ease;
}
.bsx-app:hover { border-color: var(--bsx-accent); transform: translateY(-2px); }
.bsx-app-icon { display: inline-flex; }
.bsx-app-name { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.bsx-app-sub {
  font-size: 11px;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bsx-allapps-group { display: flex; flex-direction: column; margin-top: 6px; }

/* ---- Layout variants --------------------------------------------------- */
/* editorial (Mono): single column of hairline rows */
.bsx-home[data-layout="editorial"] .bsx-proj-list { display: flex; flex-direction: column; }
/* grid (Carbon): dense flat tiles */
.bsx-home[data-layout="grid"] .bsx-proj-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.bsx-home[data-layout="grid"] .bsx-proj { flex-direction: column; align-items: flex-start; gap: 10px; padding: 15px; }
.bsx-home[data-layout="grid"] .bsx-proj-go { display: none; }
/* hero (Air): centered column, floating cards */
.bsx-home[data-layout="hero"] .bsx-center { align-items: center; text-align: center; }
.bsx-home[data-layout="hero"] .bsx-greeting p { text-align: center; }
.bsx-home[data-layout="hero"] .bsx-cmd-row,
.bsx-home[data-layout="hero"] .bsx-actions { justify-content: center; }
.bsx-home[data-layout="hero"] .bsx-projects { width: min(680px, 100%); text-align: left; }
.bsx-home[data-layout="hero"] .bsx-proj-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* ---------------------------------------------------------------------- */
/* Widget panel (bs-widgets.js) inside the bsx home                        */
/* ---------------------------------------------------------------------- */
.bsx-home .bsw-panel {
  flex: none;
  width: clamp(250px, 23vw, 310px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
  overflow-y: auto;
}
.bsx-home .bsw-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bsx-home .bsw-head-title { font-size: 15px; font-weight: 650; letter-spacing: -0.02em; }
.bsx-home .bsw-edit-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--bsx-border); background: var(--bsx-surface);
  color: var(--ink-soft); font: 600 11px var(--font); cursor: pointer;
  transition: border-color 0.13s ease, color 0.13s ease, background 0.13s ease;
}
.bsx-home .bsw-edit-btn:hover { color: var(--ink); border-color: var(--bsx-accent); }
.bsx-home .bsw-edit-btn.on { color: var(--bsx-accent-ink); border-color: transparent; background: var(--bsx-accent); }

.bsx-home .bsw-widget {
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px;
  border: 1px solid var(--bsx-border);
  border-radius: var(--bsx-radius-lg);
  background: var(--bsx-surface);
  box-shadow: var(--bsx-shadow);
}
.bsx-home .bsw-widget.editing { border-style: dashed; border-color: var(--bsx-accent); }
.bsx-home .bsw-widget-head { display: flex; align-items: center; gap: 6px; }
.bsx-home .bsw-widget-glyph { display: inline-flex; color: var(--bsx-accent); }
.bsx-home .bsw-widget-title {
  flex: 1;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--ink-soft);
}
.bsx-home .bsw-widget-tools { display: inline-flex; gap: 3px; }
.bsx-home .bsw-tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 8px;
  border: 1px solid var(--bsx-border); background: none;
  color: var(--ink-soft); cursor: pointer;
}
.bsx-home .bsw-tool:hover:not([disabled]) { color: var(--ink); border-color: var(--bsx-accent); }
.bsx-home .bsw-tool.danger:hover:not([disabled]) { color: #ef4444; border-color: rgba(239, 68, 68, 0.5); }
.bsx-home .bsw-tool[disabled] { opacity: 0.35; cursor: default; }

.bsx-home .bsw-list { display: flex; flex-direction: column; gap: 2px; }
.bsx-home .bsw-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; padding: 8px 7px; border: none;
  border-radius: calc(var(--bsx-radius) - 3px);
  background: none; color: var(--ink); font: inherit; cursor: pointer;
  transition: background 0.12s ease;
}
.bsx-home .bsw-row:hover { background: var(--bsx-accent-soft); }
.bsx-home .bsw-row-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 28px; height: 28px;
  border-radius: calc(var(--bsx-radius) - 4px);
  color: var(--bsx-accent); background: var(--bsx-accent-soft);
}
.bsx-home .bsw-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bsx-home .bsw-row-title { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsx-home .bsw-row-sub { font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsx-home .bsw-row-caret { flex: none; display: inline-flex; color: var(--ink-soft); opacity: 0.55; }
.bsx-home .bsw-empty { font-size: 12px; color: var(--ink-soft); padding: 2px 4px; }
.bsx-home .bsw-empty.center { text-align: center; padding: 8px; }

.bsx-home .bsw-clock-time { font-size: 32px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.bsx-home .bsw-clock-date { font-size: 12px; color: var(--ink-soft); }

.bsx-home .bsw-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bsx-home .bsw-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 11px;
  border: 1px solid var(--bsx-border);
  border-radius: calc(var(--bsx-radius) - 2px);
  background: var(--bsx-surface-2);
}
.bsx-home .bsw-stat-value { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--bsx-accent); }
.bsx-home .bsw-stat-label { font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }

.bsx-home .bsw-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bsx-home .bsw-quick-app {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 4px; border: none;
  border-radius: calc(var(--bsx-radius) - 2px);
  background: var(--bsx-surface-2); color: var(--ink); font: inherit; cursor: pointer;
  transition: background 0.12s ease;
}
.bsx-home .bsw-quick-app:hover { background: var(--bsx-accent-soft); }
.bsx-home .bsw-quick-name { font-size: 10px; font-weight: 600; color: var(--ink-soft); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bsx-home .bsw-add {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  border: 1px dashed var(--bsx-border);
  border-radius: var(--bsx-radius-lg);
}
.bsx-home .bsw-add-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.bsx-home .bsw-add-list { display: flex; flex-wrap: wrap; gap: 6px; }
.bsx-home .bsw-add-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 999px;
  border: 1px solid var(--bsx-border); background: var(--bsx-surface);
  color: var(--ink); font: 600 11px var(--font); cursor: pointer;
  transition: border-color 0.13s ease, background 0.13s ease;
}
.bsx-home .bsw-add-chip:hover { border-color: var(--bsx-accent); background: var(--bsx-accent-soft); }

/* ---------------------------------------------------------------------- */
/* Shell chrome shared by the three minimalist profiles                    */
/* ---------------------------------------------------------------------- */
#os.theme-bs3 .desktop-icons, #os.theme-bs3 .desktop-widgets,
#os.theme-bs4 .desktop-icons, #os.theme-bs4 .desktop-widgets,
#os.theme-bs5 .desktop-icons, #os.theme-bs5 .desktop-widgets { display: none; }

/* floating dock taskbar (taskbar.js adds .bs-dock) */
#os.theme-bs3 .taskbar.bs-dock,
#os.theme-bs4 .taskbar.bs-dock,
#os.theme-bs5 .taskbar.bs-dock {
  left: 50%;
  right: auto;
  bottom: 10px;
  translate: -50% 0;
  width: max-content;
  max-width: calc(100vw - 24px);
  height: 52px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--bsx-border);
  border-radius: var(--bsx-radius-lg);
  background: var(--taskbar-bg);
  backdrop-filter: var(--bsx-blur);
  -webkit-backdrop-filter: var(--bsx-blur);
  box-shadow: var(--bsx-shadow-lg);
}
#os.theme-bs3 .taskbar.bs-dock .taskbar-left, #os.theme-bs3 .taskbar.bs-dock .tb-show-desktop, #os.theme-bs3 .taskbar.bs-dock .tray-chevron,
#os.theme-bs4 .taskbar.bs-dock .taskbar-left, #os.theme-bs4 .taskbar.bs-dock .tb-show-desktop, #os.theme-bs4 .taskbar.bs-dock .tray-chevron,
#os.theme-bs5 .taskbar.bs-dock .taskbar-left, #os.theme-bs5 .taskbar.bs-dock .tb-show-desktop, #os.theme-bs5 .taskbar.bs-dock .tray-chevron { display: none; }

#os.theme-bs3 .taskbar.bs-dock .taskbar-right,
#os.theme-bs4 .taskbar.bs-dock .taskbar-right,
#os.theme-bs5 .taskbar.bs-dock .taskbar-right {
  margin-left: 4px;
  padding-left: 11px;
  border-left: 1px solid var(--bsx-border);
}
#os.theme-bs3 .taskbar.bs-dock .tb-icon-btn, #os.theme-bs3 .taskbar.bs-dock .task-btn,
#os.theme-bs4 .taskbar.bs-dock .tb-icon-btn, #os.theme-bs4 .taskbar.bs-dock .task-btn,
#os.theme-bs5 .taskbar.bs-dock .tb-icon-btn, #os.theme-bs5 .taskbar.bs-dock .task-btn {
  height: 40px;
  min-width: 40px;
  border-radius: calc(var(--bsx-radius) - 1px);
}
#os.theme-bs3 .taskbar.bs-dock .taskbar-start,
#os.theme-bs4 .taskbar.bs-dock .taskbar-start,
#os.theme-bs5 .taskbar.bs-dock .taskbar-start { background: var(--bsx-accent); }
#os.theme-bs3 .taskbar.bs-dock .taskbar-start .icon,
#os.theme-bs4 .taskbar.bs-dock .taskbar-start .icon,
#os.theme-bs5 .taskbar.bs-dock .taskbar-start .icon { color: var(--bsx-accent-ink); }

#os.theme-bs3 .task-btn.running .task-btn-indicator,
#os.theme-bs4 .task-btn.running .task-btn-indicator,
#os.theme-bs5 .task-btn.running .task-btn-indicator {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--bsx-accent); opacity: 1;
}
#os.theme-bs3 .task-btn.active, #os.theme-bs4 .task-btn.active, #os.theme-bs5 .task-btn.active {
  background: var(--bsx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--bsx-accent);
}
#os.theme-bs3 .task-btn.active .task-btn-indicator,
#os.theme-bs4 .task-btn.active .task-btn-indicator,
#os.theme-bs5 .task-btn.active .task-btn-indicator {
  width: 15px; height: 3px; border-radius: 3px; background: var(--bsx-accent);
}
#os.theme-bs3 .tb-desktop-pill, #os.theme-bs4 .tb-desktop-pill, #os.theme-bs5 .tb-desktop-pill {
  border: 1px solid var(--bsx-border);
  background: var(--bsx-surface-2);
}
#os.theme-bs3 .tb-desktop-pill .tb-desktop-dot,
#os.theme-bs4 .tb-desktop-pill .tb-desktop-dot,
#os.theme-bs5 .tb-desktop-pill .tb-desktop-dot { background: var(--bsx-accent); }
#os.theme-bs3 .tb-style-toggle, #os.theme-bs4 .tb-style-toggle, #os.theme-bs5 .tb-style-toggle {
  border: 1px solid var(--bsx-border);
  border-radius: 999px;
  background: var(--bsx-accent-soft);
  color: var(--ink-soft);
}
#os.theme-bs3 .tb-style-toggle:hover, #os.theme-bs4 .tb-style-toggle:hover, #os.theme-bs5 .tb-style-toggle:hover {
  color: var(--ink);
  border-color: var(--bsx-accent);
}

/* windows */
#os.theme-bs3 .window, #os.theme-bs4 .window, #os.theme-bs5 .window {
  border-radius: var(--bsx-radius-lg);
  border: 1px solid var(--bsx-border);
  box-shadow: var(--bsx-shadow-lg);
  backdrop-filter: var(--bsx-blur);
  -webkit-backdrop-filter: var(--bsx-blur);
}
#os.theme-bs3 .window.focused, #os.theme-bs4 .window.focused, #os.theme-bs5 .window.focused {
  box-shadow: var(--bsx-shadow-lg), 0 0 0 1px var(--bsx-accent);
}
#os.theme-bs3 .window.maximized, #os.theme-bs4 .window.maximized, #os.theme-bs5 .window.maximized { border-radius: 0; }
#os.theme-bs3 .win-btn:hover, #os.theme-bs4 .win-btn:hover, #os.theme-bs5 .win-btn:hover { background: var(--bsx-accent-soft); }
#os.theme-bs3 .win-btn.close:hover, #os.theme-bs4 .win-btn.close:hover, #os.theme-bs5 .win-btn.close:hover { background: #ef4444; color: #fff; }

/* start menu + flyouts */
#os.theme-bs3 .start-menu, #os.theme-bs3 .flyout,
#os.theme-bs4 .start-menu, #os.theme-bs4 .flyout,
#os.theme-bs5 .start-menu, #os.theme-bs5 .flyout {
  border-radius: var(--bsx-radius-lg);
  border: 1px solid var(--bsx-border);
  background: var(--flyout-bg);
  box-shadow: var(--bsx-shadow-lg);
  backdrop-filter: var(--bsx-blur);
  -webkit-backdrop-filter: var(--bsx-blur);
}
#os.theme-bs3 .start-search, #os.theme-bs4 .start-search, #os.theme-bs5 .start-search {
  border-radius: calc(var(--bsx-radius) - 2px);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--ink);
}
#os.theme-bs3 .start-search:focus, #os.theme-bs4 .start-search:focus, #os.theme-bs5 .start-search:focus { border-color: var(--bsx-accent); }
#os.theme-bs3 .start-tile:hover, #os.theme-bs3 .start-all-row:hover, #os.theme-bs3 .start-rec:hover,
#os.theme-bs4 .start-tile:hover, #os.theme-bs4 .start-all-row:hover, #os.theme-bs4 .start-rec:hover,
#os.theme-bs5 .start-tile:hover, #os.theme-bs5 .start-all-row:hover, #os.theme-bs5 .start-rec:hover { background: var(--bsx-accent-soft); }
#os.theme-bs3 .start-section-title, #os.theme-bs3 .start-allapps, #os.theme-bs3 .start-back,
#os.theme-bs4 .start-section-title, #os.theme-bs4 .start-allapps, #os.theme-bs4 .start-back,
#os.theme-bs5 .start-section-title, #os.theme-bs5 .start-allapps, #os.theme-bs5 .start-back { color: var(--bsx-accent-strong, var(--bsx-accent)); }
#os.theme-bs3 .qs-tile.on, #os.theme-bs4 .qs-tile.on, #os.theme-bs5 .qs-tile.on { background: var(--bsx-accent); color: var(--bsx-accent-ink); }
#os.theme-bs3 .cal-cell.today, #os.theme-bs4 .cal-cell.today, #os.theme-bs5 .cal-cell.today { background: var(--bsx-accent); color: var(--bsx-accent-ink); }

/* task view */
#os.theme-bs3 .tv-window, #os.theme-bs4 .tv-window, #os.theme-bs5 .tv-window {
  border-radius: var(--bsx-radius-lg);
  border: 1px solid var(--bsx-border);
  background: var(--bsx-surface);
  box-shadow: var(--bsx-shadow);
}
#os.theme-bs3 .tv-window:hover, #os.theme-bs4 .tv-window:hover, #os.theme-bs5 .tv-window:hover { border-color: var(--bsx-accent); }
#os.theme-bs3 .tv-desktop.active, #os.theme-bs4 .tv-desktop.active, #os.theme-bs5 .tv-desktop.active { border-color: var(--bsx-accent); }

/* context menus, previews, snap, dialogs (rendered on <body>) */
body.theme-bs3 .ctx-menu, body.theme-bs3 .tb-preview-popover, body.theme-bs3 .snap-flyout,
body.theme-bs4 .ctx-menu, body.theme-bs4 .tb-preview-popover, body.theme-bs4 .snap-flyout,
body.theme-bs5 .ctx-menu, body.theme-bs5 .tb-preview-popover, body.theme-bs5 .snap-flyout {
  --menu-bg: var(--flyout-bg);
  --menu-border: var(--bsx-border);
  --menu-hover: var(--bsx-accent-soft);
  color: var(--ink);
  border-radius: var(--bsx-radius);
  box-shadow: var(--bsx-shadow-lg);
}
body.theme-bs3 .platform-dialog, body.theme-bs4 .platform-dialog, body.theme-bs5 .platform-dialog {
  border-radius: var(--bsx-radius-lg);
  border: 1px solid var(--bsx-border);
  background: var(--flyout-bg);
  color: var(--ink);
  box-shadow: var(--bsx-shadow-lg);
}

/* global search palette (Shift+Ctrl/⌘+Space overlay) */
body.theme-bs3 .bs-search-box, body.theme-bs4 .bs-search-box, body.theme-bs5 .bs-search-box {
  background: var(--flyout-bg);
  color: var(--ink);
  border: 1px solid var(--bsx-border);
  border-radius: var(--bsx-radius-lg);
  box-shadow: var(--bsx-shadow-lg);
  backdrop-filter: var(--bsx-blur);
  -webkit-backdrop-filter: var(--bsx-blur);
}
body.theme-bs3 .bs-search-head, body.theme-bs4 .bs-search-head, body.theme-bs5 .bs-search-head { border-bottom-color: var(--bsx-border); }
body.theme-bs3 .bs-search-row.active, body.theme-bs4 .bs-search-row.active, body.theme-bs5 .bs-search-row.active { background: var(--bsx-accent-soft); }
body.theme-bs3 .bs-search-group, body.theme-bs4 .bs-search-group, body.theme-bs5 .bs-search-group { color: var(--bsx-accent-strong, var(--bsx-accent)); }
body.theme-bs3 .bs-search-sub, body.theme-bs3 .bs-search-hint,
body.theme-bs4 .bs-search-sub, body.theme-bs4 .bs-search-hint,
body.theme-bs5 .bs-search-sub, body.theme-bs5 .bs-search-hint { color: var(--ink-soft); }

/* Studio design system — Mono / Carbon / Air pick up shell identity
   (tone themes already remap .studio; these three did not). */
#os.theme-bs3 .studio {
  --st-accent: var(--bsx-accent);
  --st-ai: #404040;
  --st-bg: var(--bsx-bg, #fafaf9);
  --st-panel: var(--bsx-surface, #fff);
  --st-line: var(--bsx-border, #e7e5e4);
  --st-line-soft: rgba(23, 23, 23, 0.06);
  --st-ink: var(--ink);
  --st-ink-soft: var(--ink-soft);
}
#os.theme-bs3 .st-nav-item.active {
  background: var(--bsx-accent-soft);
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--bsx-accent);
}
#os.theme-bs4 .studio {
  --st-accent: var(--bsx-accent);
  --st-ai: #bef264;
  --st-bg: var(--bsx-bg, #0f1013);
  --st-panel: var(--bsx-surface, #16181d);
  --st-line: var(--bsx-border, #262931);
  --st-line-soft: rgba(163, 230, 53, 0.08);
  --st-ink: var(--ink);
  --st-ink-soft: var(--ink-soft);
}
#os.theme-bs4 .st-nav-item.active {
  background: var(--bsx-accent-soft);
  color: var(--bsx-accent-strong);
  box-shadow: inset 2px 0 0 var(--bsx-accent);
}
#os.theme-bs4 .st-toolbar,
#os.theme-bs4 .st-sidebar,
#os.theme-bs4 .st-inspector { border-radius: var(--bsx-radius); }
#os.theme-bs5 .studio {
  --st-accent: var(--bsx-accent);
  --st-ai: #b189e8;
  --st-bg: rgba(255, 255, 255, 0.42);
  --st-panel: rgba(255, 255, 255, 0.62);
  --st-line: var(--bsx-border);
  --st-line-soft: rgba(109, 141, 255, 0.1);
  --st-ink: var(--ink);
  --st-ink-soft: var(--ink-soft);
}
#os.theme-bs5 .st-toolbar,
#os.theme-bs5 .st-sidebar,
#os.theme-bs5 .st-inspector,
#os.theme-bs5 .st-card {
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border-radius: calc(var(--bsx-radius) + 2px);
}
#os.theme-bs5 .st-nav-item.active {
  background: rgba(109, 141, 255, 0.14);
  color: var(--bsx-accent-strong, #4a5fd4);
}

/* shared app chrome basics */
#os.theme-bs3 .btn.primary, body.theme-bs3 .btn.primary,
#os.theme-bs4 .btn.primary, body.theme-bs4 .btn.primary,
#os.theme-bs5 .btn.primary, body.theme-bs5 .btn.primary {
  background: var(--bsx-accent);
  border-color: transparent;
  color: var(--bsx-accent-ink);
}
#os.theme-bs3 .btn, body.theme-bs3 .btn,
#os.theme-bs4 .btn, body.theme-bs4 .btn,
#os.theme-bs5 .btn, body.theme-bs5 .btn {
  border-radius: calc(var(--bsx-radius) - 2px);
  border: 1px solid var(--input-border);
  background: var(--bsx-surface);
  color: var(--ink);
}
#os.theme-bs3 input:focus-visible, #os.theme-bs3 textarea:focus-visible, #os.theme-bs3 select:focus-visible,
#os.theme-bs4 input:focus-visible, #os.theme-bs4 textarea:focus-visible, #os.theme-bs4 select:focus-visible,
#os.theme-bs5 input:focus-visible, #os.theme-bs5 textarea:focus-visible, #os.theme-bs5 select:focus-visible {
  outline: none;
  border-color: var(--bsx-accent);
}

/* responsive: fold widget panel under the center column */
@media (max-width: 1180px) {
  .bsx-stage { flex-direction: column; overflow-y: auto; }
  .bsx-home .bsw-panel { width: auto; justify-content: flex-start; }
  .bsx-center { overflow: visible; justify-content: flex-start; }
  .bsx-home[data-layout="grid"] .bsx-proj-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .bsx-nav-links { display: none; }
  .bsx-home[data-layout="grid"] .bsx-proj-list,
  .bsx-home[data-layout="hero"] .bsx-proj-list { grid-template-columns: 1fr; }
}