/* BioStudio AI — BioStudioAI 1 theme.
   Activated when #os carries the `theme-bs1` marker class (and <body> for
   popups rendered outside #os). A science-first premium workspace: deep navy
   glassmorphism, violet/teal neon accents, soft glow depth, and an adaptive
   dashboard home (js/core/bs1-dashboard.js) instead of desktop icon clutter.
   Scoped entirely under .theme-bs1 so the Windows and macOS themes are
   untouched. Customization (accent strength, glass alpha, mood, density,
   icons, motion) arrives as --bs1-* vars + bs1-* classes from bs1-prefs.js. */

/* ---- Design tokens ---- */
body.theme-bs1,
#os.theme-bs1 {
  /* customization knobs (JS overrides these; defaults keep CSS standalone) */
  --bs1-accent-strength: 0.8;
  --bs1-glass-alpha: 0.72;

  /* palette */
  --bs1-navy: #0a0f1e;
  --bs1-indigo: #121b33;
  --bs1-violet: #8b5cf6;
  --bs1-teal: #00e6c3;
  --bs1-cyan: #38bdf8;
  --bs1-glass: rgba(22, 27, 43, var(--bs1-glass-alpha));
  --bs1-border: rgba(148, 163, 184, 0.18);
  --bs1-border-active: rgba(139, 92, 246, calc(0.65 * var(--bs1-accent-strength)));
  --bs1-glow:
    0 0 24px rgba(139, 92, 246, calc(0.25 * var(--bs1-accent-strength))),
    0 0 48px rgba(0, 230, 195, calc(0.08 * var(--bs1-accent-strength)));
  --bs1-grad-primary: linear-gradient(135deg, #8b5cf6 0%, #6d5dfb 55%, #00b8d9 100%);

  /* base token overrides — BS1 is a dark premium surface (white appearance flips these) */
  --accent: #8b5cf6;
  --accent-soft: rgba(139, 92, 246, 0.18);
  --accent-ink: #ffffff;
  --accent-color: #8b5cf6;
  --ink: #e6ecf7;
  --ink-soft: #a3aec7;
  --ink-faint: #7b86a3;
  --radius: 14px;
  --radius-sm: 10px;
  color-scheme: dark;

  /* taller band so the floating dock taskbar has air around it */
  --taskbar-h: 74px;
  --taskbar-clearance: calc(var(--taskbar-h) + 10px);

  /* window + flyout chrome consumed by window.css / flyouts.css */
  --win-bg: rgba(18, 27, 51, 0.86);
  --win-body-bg: rgba(13, 19, 38, 0.8);
  --win-border: var(--bs1-border);
  --win-border-focus: var(--bs1-border-active);
  --win-hover-bg: rgba(255, 255, 255, 0.1);
  --win-shadow: 0 24px 70px rgba(2, 6, 18, 0.55), 0 0 0 1px rgba(148, 163, 184, 0.1);
  --win-shadow-focus: 0 28px 80px rgba(2, 6, 18, 0.6), var(--bs1-glow);
  --titlebar-bg: rgba(16, 23, 42, 0.78);
  --flyout-bg: rgba(18, 27, 51, 0.88);
  --flyout-border: var(--bs1-border);
  --tile-bg: rgba(255, 255, 255, 0.06);
  --tile-hover: rgba(139, 92, 246, 0.16);
  --input-bg: rgba(10, 15, 30, 0.6);
  --input-border: rgba(148, 163, 184, 0.24);
  --menu-bg: var(--flyout-bg);
  --menu-border: var(--bs1-border);
  --menu-hover: rgba(139, 92, 246, 0.16);

  /* shared semantic + app chrome (apps.css, app-color-themes.css, studios) */
  --bg: #0d1326;
  --surface: var(--win-body-bg);
  --surface-2: #161e36;
  --surface-3: #1c2744;
  --text: var(--ink);
  --muted: var(--ink-soft);
  --faint: #7b86a3;
  --border: var(--bs1-border);
  --line: var(--bs1-border);
  --hover: rgba(139, 92, 246, 0.14);
  --primary: #8b5cf6;
  --primary-strong: #a78bfa;
  --primary-soft: rgba(139, 92, 246, 0.2);
  --on-primary: #ffffff;
  --warning: #f3c664;
  --warning-soft: rgba(243, 198, 100, 0.16);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.16);
  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.16);
  --tech-cyan: #00e6c3;
  --tech-blue: #38bdf8;
  --tech-violet: #8b5cf6;
  --control-bg: var(--input-bg);
  --control-line: var(--input-border);
  --glass-bg: var(--bs1-glass);
  --panel: var(--win-bg);
  --panel-2: var(--surface-2);
  --panel-3: var(--surface-3);
  --sel: rgba(139, 92, 246, 0.18);
  --sel-line: var(--bs1-violet);
  --good: var(--success);
  --warn: var(--warning);
  --bad: var(--danger);
  --overlay: rgba(4, 7, 16, 0.58);
  --scrollbar-thumb: rgba(139, 92, 246, 0.42);
  --scrollbar-thumb-hover: rgba(139, 92, 246, 0.58);

  /* taskbar */
  --taskbar-bg: rgba(10, 15, 30, 0.78);
  --taskbar-border: rgba(148, 163, 184, 0.14);
  --tb-hover: rgba(139, 92, 246, 0.18);
  --tb-active: rgba(139, 92, 246, 0.12);

  /* shared app chrome */
  --app-bar: rgba(16, 23, 42, 0.72);
  --app-line: rgba(148, 163, 184, 0.14);
  --app-btn: rgba(255, 255, 255, 0.06);
  --app-btn-hover: rgba(255, 255, 255, 0.1);
  --app-input: var(--input-bg);
  --app-bg: var(--win-body-bg);

  /* Studio suite + nested scientific apps */
  --st-accent: var(--bs1-violet);
  --st-ai: var(--bs1-cyan);
  --st-bg: var(--win-body-bg);
  --st-panel: var(--win-bg);
  --st-line: var(--bs1-border);
  --st-line-soft: rgba(148, 163, 184, 0.1);
  --st-ink: var(--ink);
  --st-ink-soft: var(--ink-soft);
  --st-accent-soft: var(--accent-soft);
  --pr-blue: var(--bs1-violet);
  --pr-blue-dk: #6d5dfb;
  --pr-teal: var(--bs1-teal);
  --pr-bg: var(--win-body-bg);
  --pr-surface: var(--win-bg);
  --pr-nav-bg: var(--titlebar-bg);
  --pr-line: var(--bs1-border);
  --pr-ink: var(--ink);
  --pr-ink-soft: var(--ink-soft);
  --pr-hover: rgba(139, 92, 246, 0.12);
  --pr-active: rgba(139, 92, 246, 0.2);
  --ps-ink: var(--ink);
  --ps-muted: var(--ink-soft);
  --ps-line: var(--bs1-border);
  --ps-panel: var(--win-bg);
  --ps-soft: var(--win-body-bg);
  --ps-blue: var(--bs1-violet);
  --ps-teal: var(--bs1-teal);
  --ps-navy: var(--bs1-indigo);
  --eln-canvas: var(--win-body-bg);
  --eln-surface: var(--win-bg);
  --eln-surface-subtle: var(--surface-2);
  --eln-line: var(--bs1-border);
  --eln-line-strong: var(--input-border);
  --eln-text: var(--ink);
  --eln-muted: var(--ink-soft);
  --eln-faint: var(--faint);
  --eln-blue: var(--bs1-violet);
  --eln-blue-dark: #6d5dfb;
  --eln-blue-soft: var(--accent-soft);
  --cl-bg: var(--win-body-bg);
  --cl-panel: var(--win-bg);
  --cl-panel-2: var(--surface-2);
  --cl-line: var(--bs1-border);
  --cl-line-soft: var(--st-line-soft);
  --cl-ink: var(--ink);
  --cl-soft: var(--ink-soft);
  --cl-accent: var(--bs1-violet);
  --cl-accent-soft: var(--accent-soft);
  --org-surface: rgba(18, 27, 51, 0.72);
  --org-surface-elevated: rgba(22, 32, 58, 0.9);
  --org-border: var(--bs1-border);
  --org-border-strong: var(--bs1-border-active);
  --org-nav-active: rgba(139, 92, 246, 0.16);
  --org-nav-active-border: var(--bs1-violet);
  --pm-ink: var(--ink);
  --pm-ink-soft: var(--ink-soft);
  --pm-panel: var(--win-bg);
  --pm-line: var(--bs1-border);
  --pm-accent: var(--bs1-violet);
  --office-rb-accent: var(--bs1-violet);
  --office-rb-accent-dark: #6d5dfb;
  --office-rb-hover: var(--surface-2);
  --ctx-accent: var(--bs1-violet);
  --ctx-accent-soft: var(--accent-soft);
  --ctx-hover: var(--menu-hover);
  --settings-card: var(--win-bg);
  --settings-line: var(--bs1-border);
  --settings-soft: var(--surface-2);
  --settings-blue: var(--bs1-cyan);
  --settings-violet: var(--bs1-violet);

  color: var(--ink);
}

/* ---- Wallpaper moods ---- */
#os.wp-bs1,
#os.wp-bs1.dark {
  background:
    radial-gradient(circle at top center, rgba(139, 92, 246, 0.22), transparent 35%),
    radial-gradient(circle at bottom right, rgba(0, 230, 195, 0.12), transparent 35%),
    linear-gradient(135deg, #0a0f1e 0%, #10172a 50%, #121b33 100%);
}
#os.wp-bs1.bs1-mood-aurora {
  background:
    radial-gradient(900px 640px at 22% 12%, rgba(0, 230, 195, 0.2), transparent 55%),
    radial-gradient(1000px 720px at 78% 30%, rgba(139, 92, 246, 0.26), transparent 58%),
    linear-gradient(150deg, #071120 0%, #0c1a2e 52%, #14213f 100%);
}
#os.wp-bs1.bs1-mood-oceanic {
  background:
    radial-gradient(1000px 700px at 70% 15%, rgba(56, 189, 248, 0.24), transparent 58%),
    radial-gradient(800px 640px at 20% 88%, rgba(0, 230, 195, 0.16), transparent 60%),
    linear-gradient(140deg, #051020 0%, #0a1c33 55%, #0d2742 100%);
}
#os.wp-bs1.bs1-mood-minimal {
  background:
    radial-gradient(circle at top center, rgba(139, 92, 246, 0.08), transparent 40%),
    linear-gradient(135deg, #0a0f1e 0%, #0e1526 60%, #101a2e 100%);
}

/* ---- White appearance ------------------------------------------------- */
/* bs1-prefs.js drops the `dark` class when appearance = white; the same
   violet/teal identity on bright glass surfaces. */
body.theme-bs1:not(.dark),
#os.theme-bs1:not(.dark) {
  --bs1-navy: #f4f6fc;
  --bs1-indigo: #e8ecf8;
  --bs1-glass: rgba(255, 255, 255, calc(var(--bs1-glass-alpha) * 0.9 + 0.1));
  --bs1-border: rgba(71, 85, 120, 0.16);
  --bs1-border-active: rgba(109, 66, 234, calc(0.55 * var(--bs1-accent-strength)));
  --bs1-glow:
    0 0 24px rgba(139, 92, 246, calc(0.16 * var(--bs1-accent-strength))),
    0 10px 30px rgba(15, 23, 42, 0.08);

  --ink: #17203a;
  --ink-soft: #5a668a;
  --ink-faint: #7a86a6;
  color-scheme: light;

  --win-bg: rgba(255, 255, 255, 0.92);
  --win-body-bg: rgba(250, 251, 255, 0.9);
  --win-hover-bg: rgba(15, 23, 42, 0.07);
  --win-shadow: 0 18px 50px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(71, 85, 120, 0.1);
  --win-shadow-focus: 0 22px 60px rgba(15, 23, 42, 0.14), var(--bs1-glow);
  --titlebar-bg: rgba(244, 246, 252, 0.88);
  --flyout-bg: rgba(255, 255, 255, 0.94);
  --flyout-border: var(--bs1-border);
  --tile-bg: rgba(15, 23, 42, 0.05);
  --tile-hover: rgba(139, 92, 246, 0.12);
  --input-bg: rgba(255, 255, 255, 0.85);
  --input-border: rgba(71, 85, 120, 0.24);
  --menu-bg: var(--flyout-bg);
  --menu-border: var(--bs1-border);
  --menu-hover: rgba(139, 92, 246, 0.12);

  --bg: #eef1fa;
  --surface: var(--win-body-bg);
  --surface-2: #e8ecf8;
  --surface-3: #dde3f4;
  --faint: #7a86a6;
  --hover: rgba(139, 92, 246, 0.1);
  --accent-soft: rgba(139, 92, 246, 0.14);
  --primary-soft: rgba(139, 92, 246, 0.14);
  --on-primary: #ffffff;
  --control-bg: var(--input-bg);
  --control-line: var(--input-border);
  --glass-bg: var(--bs1-glass);
  --panel: var(--win-bg);
  --panel-2: var(--surface-2);
  --overlay: rgba(15, 23, 42, 0.28);
  --scrollbar-thumb: rgba(109, 66, 234, 0.35);
  --scrollbar-thumb-hover: rgba(109, 66, 234, 0.5);

  --taskbar-bg: rgba(255, 255, 255, 0.82);
  --taskbar-border: rgba(71, 85, 120, 0.14);
  --tb-hover: rgba(139, 92, 246, 0.14);
  --tb-active: rgba(139, 92, 246, 0.1);

  --app-bar: rgba(244, 246, 252, 0.88);
  --app-line: rgba(71, 85, 120, 0.16);
  --app-btn: rgba(255, 255, 255, 0.9);
  --app-btn-hover: rgba(15, 23, 42, 0.07);
  --app-input: var(--input-bg);
  --app-bg: var(--win-body-bg);

  --st-bg: var(--win-body-bg);
  --st-panel: var(--win-bg);
  --st-line: var(--bs1-border);
  --st-line-soft: rgba(71, 85, 120, 0.1);
  --st-ink: var(--ink);
  --st-ink-soft: var(--ink-soft);
  --pr-bg: var(--win-body-bg);
  --pr-surface: var(--win-bg);
  --pr-nav-bg: var(--titlebar-bg);
  --pr-line: var(--bs1-border);
  --pr-ink: var(--ink);
  --pr-ink-soft: var(--ink-soft);
  --pr-hover: rgba(139, 92, 246, 0.1);
  --pr-active: rgba(139, 92, 246, 0.16);
  --ps-ink: var(--ink);
  --ps-muted: var(--ink-soft);
  --ps-line: var(--bs1-border);
  --ps-panel: var(--win-bg);
  --ps-soft: var(--win-body-bg);
  --eln-canvas: var(--win-body-bg);
  --eln-surface: var(--win-bg);
  --eln-surface-subtle: var(--surface-2);
  --eln-line: var(--bs1-border);
  --eln-text: var(--ink);
  --eln-muted: var(--ink-soft);
  --cl-bg: var(--win-body-bg);
  --cl-panel: var(--win-bg);
  --cl-panel-2: var(--surface-2);
  --cl-line: var(--bs1-border);
  --cl-ink: var(--ink);
  --cl-soft: var(--ink-soft);
  --org-surface: rgba(255, 255, 255, 0.72);
  --org-surface-elevated: #ffffff;
  --org-border: var(--bs1-border);
  --pm-ink: var(--ink);
  --pm-ink-soft: var(--ink-soft);
  --pm-panel: var(--win-bg);
  --pm-line: var(--bs1-border);
}
#os.wp-bs1:not(.dark) {
  background:
    radial-gradient(circle at top center, rgba(139, 92, 246, 0.14), transparent 38%),
    radial-gradient(circle at bottom right, rgba(0, 200, 170, 0.1), transparent 38%),
    linear-gradient(135deg, #eef1fa 0%, #e7ebf7 50%, #dfe6f5 100%);
}
#os.wp-bs1.bs1-mood-aurora:not(.dark) {
  background:
    radial-gradient(900px 640px at 22% 12%, rgba(0, 200, 170, 0.16), transparent 55%),
    radial-gradient(1000px 720px at 78% 30%, rgba(139, 92, 246, 0.18), transparent 58%),
    linear-gradient(150deg, #eef4fb 0%, #e6eefa 52%, #e2e7fa 100%);
}
#os.wp-bs1.bs1-mood-oceanic:not(.dark) {
  background:
    radial-gradient(1000px 700px at 70% 15%, rgba(56, 189, 248, 0.2), transparent 58%),
    radial-gradient(800px 640px at 20% 88%, rgba(0, 200, 170, 0.12), transparent 60%),
    linear-gradient(140deg, #ecf4fb 0%, #e3eefa 55%, #dcebf9 100%);
}
#os.wp-bs1.bs1-mood-minimal:not(.dark) {
  background:
    radial-gradient(circle at top center, rgba(139, 92, 246, 0.06), transparent 40%),
    linear-gradient(135deg, #f2f4fa 0%, #edf0f8 60%, #e9edf7 100%);
}
/* surfaces tuned for dark glass need brighter fills on the white appearance */
#os.theme-bs1:not(.dark) .bs1-rail { background: rgba(255, 255, 255, 0.66); }
#os.theme-bs1:not(.dark) .bs1-rail-item:hover,
#os.theme-bs1:not(.dark) .bs1-panel-row:hover,
#os.theme-bs1:not(.dark) .bs1-flyout-item:hover { background: rgba(139, 92, 246, 0.1); }
#os.theme-bs1:not(.dark) .bs1-panel-row,
#os.theme-bs1:not(.dark) .bs1-flyout-item { background: rgba(15, 23, 42, 0.03); }
#os.theme-bs1:not(.dark) .bs1-cmd-keys kbd { color: var(--ink-soft); background: rgba(15, 23, 42, 0.06); }
#os.theme-bs1:not(.dark) .bs1-greeting h1 {
  background: linear-gradient(120deg, #1d2a4d, #4c3d9e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#os.theme-bs1:not(.dark) .bs1-dock { background: rgba(255, 255, 255, 0.82); }
#os.theme-bs1:not(.dark) .start-footer { background: rgba(244, 246, 252, 0.72); }

/* ====================================================================== */
/* Dashboard home — replaces the icon desktop                              */
/* A three-zone workspace: left category rail, centered stage (command bar */
/* + project overview + action dock) and a right "Today's Workflow" panel. */
/* ====================================================================== */
#os.theme-bs1 .desktop-icons,
#os.theme-bs1 .desktop-widgets { display: none; }

.bs1-home {
  position: absolute;
  /* The parent desktop surface already represents the live taskbar work area. */
  inset: 0;
  /* Own a stacking context below windows. Child z-index (rail/flyout/dock)
     must not compete with window z-order or steal clicks. */
  z-index: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

/* ---- Left category rail ------------------------------------------------ */
.bs1-rail {
  flex: none;
  width: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 8px;
  border-right: 1px solid var(--bs1-border);
  background: rgba(10, 15, 30, 0.55);
  backdrop-filter: blur(min(22px, var(--bs-max-blur, 22px))) saturate(1.2);
  -webkit-backdrop-filter: blur(min(22px, var(--bs-max-blur, 22px))) saturate(1.2);
  z-index: 3;
}
.bs1-rail-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  border-radius: 13px;
  color: #fff;
  background: var(--bs1-grad-primary);
  box-shadow: var(--bs1-glow);
}
.bs1-rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 10px 4px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  cursor: pointer;
  transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease;
}
.bs1-rail-item:hover { background: rgba(139, 92, 246, 0.12); color: var(--ink); }
.bs1-rail-item.open {
  background: rgba(139, 92, 246, 0.16);
  border-color: var(--bs1-border-active);
  color: var(--ink);
  box-shadow: var(--bs1-glow);
}
.bs1-rail-glyph { display: inline-flex; }
.bs1-rail-label { font-size: 10.5px; font-weight: 600; letter-spacing: -0.01em; }

/* ---- Rail fly-out (app list for a category) --------------------------- */
.bs1-flyout {
  position: absolute;
  top: 82px;
  left: 96px;
  z-index: 4;
  width: min(300px, 42vw);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--bs1-border);
  background: var(--flyout-bg);
  backdrop-filter: blur(min(28px, var(--bs-max-blur, 28px))) saturate(1.3);
  -webkit-backdrop-filter: blur(min(28px, var(--bs-max-blur, 28px))) saturate(1.3);
  box-shadow: 0 30px 80px rgba(2, 6, 18, 0.6), var(--bs1-glow);
  animation: bs1-flyin 0.16s ease;
}
@keyframes bs1-flyin { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.bs1-flyout-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 4px; }
.bs1-flyout-head h3 { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.bs1-flyout-close {
  border: none; background: none; cursor: pointer;
  color: var(--ink-soft); font-size: 13px; line-height: 1;
  width: 26px; height: 26px; border-radius: 8px;
}
.bs1-flyout-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.bs1-flyout-list { display: flex; flex-direction: column; gap: 3px; }
.bs1-flyout-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  text-align: left; padding: 9px 10px; border-radius: 12px;
  border: 1px solid transparent; background: rgba(255, 255, 255, 0.03);
  color: var(--ink); font: inherit; cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.bs1-flyout-item:hover { background: rgba(139, 92, 246, 0.14); border-color: rgba(139, 92, 246, 0.3); }
.bs1-flyout-icon { display: inline-flex; flex: none; }
.bs1-flyout-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bs1-flyout-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs1-flyout-sub { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs1-flyout-all {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px; padding: 10px 12px; border-radius: 12px;
  border: none; cursor: pointer; font: 600 12.5px var(--font);
  color: var(--bs1-cyan); background: rgba(56, 189, 248, 0.08);
}
.bs1-flyout-all:hover { background: rgba(56, 189, 248, 0.16); }
.bs1-flyout-all-caret { font-size: 15px; }

/* ---- Center stage ------------------------------------------------------ */
.bs1-stage {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: clamp(14px, 2.4vh, 26px) clamp(16px, 3vw, 40px) 0;
  overflow: hidden;
}
.bs1-topbar { display: flex; justify-content: center; margin-bottom: clamp(14px, 3vh, 32px); }
.bs1-cmd {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(640px, 100%);
  padding: 13px 18px;
  border-radius: 14px;
  border: 1px solid var(--bs1-border);
  background: var(--bs1-glass);
  backdrop-filter: blur(min(18px, var(--bs-max-blur, 18px)));
  -webkit-backdrop-filter: blur(min(18px, var(--bs-max-blur, 18px)));
  color: var(--ink-soft);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bs1-cmd:hover, .bs1-cmd:focus-visible, .bs1-cmd:focus-within { border-color: var(--bs1-border-active); box-shadow: var(--bs1-glow); }
.bs1-cmd-glyph { display: inline-flex; color: var(--bs1-cyan); }
.bs1-cmd-ph { flex: 1; text-align: left; }
.bs1-cmd-keys { display: inline-flex; gap: 4px; }
.bs1-cmd-keys kbd {
  font: 600 11px/1 var(--font);
  color: var(--ink-soft);
  border: 1px solid var(--bs1-border);
  border-radius: 6px;
  padding: 4px 7px;
  background: rgba(255, 255, 255, 0.05);
}

/* main = center content + right panel */
.bs1-main {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: clamp(18px, 2.5vw, 40px);
  overflow: hidden;
}
.bs1-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 3vh, 30px);
  overflow-y: auto;
  padding-bottom: 96px;
}
.bs1-greeting h1 {
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.bs1-greeting p { color: var(--ink-soft); font-size: 14.5px; margin-top: 6px; }

/* project overview gallery */
.bs1-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1500px) { .bs1-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bs1-proj {
  display: flex;
  flex-direction: column;
  text-align: left;
  border-radius: 18px;
  border: 1px solid var(--bs1-border);
  background: var(--bs1-glass);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.bs1-proj:hover { transform: translateY(-3px); border-color: var(--bs1-border-active); box-shadow: var(--bs1-glow); }
.bs1-proj-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 118px;
  color: #fff;
  background: var(--bs1-grad-primary);
}
.bs1-proj.bs1-t0 .bs1-proj-thumb { background: linear-gradient(135deg, #8b5cf6, #6d28d9 55%, #4c1d95); }
.bs1-proj.bs1-t1 .bs1-proj-thumb { background: linear-gradient(135deg, #0ea5e9, #0369a1 55%, #075985); }
.bs1-proj.bs1-t2 .bs1-proj-thumb { background: linear-gradient(135deg, #14b8a6, #0d9488 55%, #115e59); }
.bs1-proj.bs1-t3 .bs1-proj-thumb { background: linear-gradient(135deg, #6366f1, #4f46e5 55%, #7c3aed); }
.bs1-proj-thumb.new { background: rgba(255, 255, 255, 0.05); color: var(--ink-soft); font-size: 34px; font-weight: 300; }
.bs1-proj-body { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px 14px; }
.bs1-proj-title { font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs1-proj-sub { font-size: 12px; color: var(--ink-soft); }
.bs1-proj-foot { display: flex; align-items: center; margin-top: 6px; }
.bs1-proj-people { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.bs1-proj-people .icon { color: var(--bs1-cyan); }
.bs1-proj-new {
  display: flex; flex-direction: column; text-align: left; cursor: pointer;
  border-radius: 18px; border: 1px dashed rgba(148, 163, 184, 0.4);
  background: rgba(255, 255, 255, 0.02); color: var(--ink); font: inherit; overflow: hidden;
}
.bs1-proj-new:hover { border-color: var(--bs1-border-active); }

/* ---- Right "Today's Workflow" panel ----------------------------------- */
.bs1-panel {
  flex: none;
  width: clamp(260px, 24vw, 320px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  margin-bottom: 20px;
  border-radius: 20px;
  border: 1px solid var(--bs1-border);
  background: var(--bs1-glass);
  backdrop-filter: blur(min(20px, var(--bs-max-blur, 20px))) saturate(1.2);
  -webkit-backdrop-filter: blur(min(20px, var(--bs-max-blur, 20px))) saturate(1.2);
  box-shadow: 0 20px 60px rgba(2, 6, 18, 0.4);
  overflow-y: auto;
}
.bs1-panel-head { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.bs1-panel-sec { display: flex; flex-direction: column; gap: 8px; }
.bs1-panel-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-soft);
}
.bs1-panel-title.ai .icon { color: var(--bs1-violet); }
.bs1-panel-list { display: flex; flex-direction: column; gap: 4px; }
.bs1-panel-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; padding: 9px 8px; border-radius: 12px;
  border: 1px solid transparent; background: rgba(255, 255, 255, 0.03);
  color: var(--ink); font: inherit; cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.bs1-panel-row:hover { background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.3); }
.bs1-panel-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  color: var(--bs1-cyan); background: rgba(139, 92, 246, 0.14);
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.22);
}
.bs1-panel-icon.check { color: var(--bs1-violet); font-size: 16px; background: none; box-shadow: none; }
.bs1-panel-row.unread .bs1-panel-icon { color: var(--bs1-teal); }
.bs1-panel-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bs1-panel-row-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs1-panel-row-sub { font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs1-panel-caret { flex: none; color: var(--ink-soft); font-size: 15px; opacity: 0.6; }
.bs1-panel-empty { font-size: 12px; color: var(--ink-soft); padding: 4px 8px; }

/* ---- Floating action dock --------------------------------------------- */
.bs1-dock {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid var(--bs1-border);
  background: rgba(10, 15, 30, 0.7);
  backdrop-filter: blur(min(26px, var(--bs-max-blur, 26px))) saturate(1.3);
  -webkit-backdrop-filter: blur(min(26px, var(--bs-max-blur, 26px))) saturate(1.3);
  box-shadow: 0 24px 70px rgba(2, 6, 18, 0.55), var(--bs1-glow);
  z-index: 5;
}
.bs1-dock-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: none;
  border-radius: 12px;
  background: none;
  color: var(--ink);
  font: 600 13px var(--font);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.bs1-dock-btn:hover { background: rgba(139, 92, 246, 0.16); }
.bs1-dock-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--bs1-cyan); }
.bs1-dock-more { padding: 9px 12px; color: var(--ink-soft); }
.bs1-dock-more .bs1-dock-icon { color: var(--ink-soft); font-size: 16px; letter-spacing: 1px; }

/* icon style preference */
#os.theme-bs1.bs1-icons-outlined .bs1-flyout-icon .icon { filter: saturate(0.35) brightness(1.1); }
#os.theme-bs1.bs1-icons-duotone .bs1-flyout-icon .icon { filter: hue-rotate(12deg) saturate(0.7); }
#os.theme-bs1.bs1-icons-gradient .bs1-flyout-icon .icon { filter: saturate(1.25) drop-shadow(0 2px 6px rgba(139, 92, 246, 0.45)); }

/* density preference */
#os.theme-bs1.bs1-density-compact .bs1-gallery { gap: 12px; }
#os.theme-bs1.bs1-density-compact .bs1-proj-thumb { height: 96px; }
#os.theme-bs1.bs1-density-compact .bs1-panel { padding: 14px; gap: 14px; }
#os.theme-bs1.bs1-density-compact .bs1-panel-row { padding: 7px 8px; }

/* ---- Narrow desktops: fold the workflow panel below ------------------- */
@media (max-width: 1180px) {
  .bs1-main { flex-direction: column; overflow-y: auto; }
  .bs1-panel { width: auto; }
  #os.theme-bs1 .bsw-panel { justify-content: flex-start; }
  .bs1-center { overflow: visible; padding-bottom: 0; justify-content: flex-start; }
}
@media (max-width: 760px) {
  .bs1-rail { width: 68px; }
  .bs1-rail-label { display: none; }
  .bs1-gallery { grid-template-columns: 1fr; }
  .bs1-dock-label { display: none; }
}

/* ====================================================================== */
/* Window chrome — glass panels with violet focus glow                     */
/* ====================================================================== */
#os.theme-bs1 .window {
  border-radius: 16px;
  backdrop-filter: blur(min(28px, var(--bs-max-blur, 28px))) saturate(1.25);
  -webkit-backdrop-filter: blur(min(28px, var(--bs-max-blur, 28px))) saturate(1.25);
  box-shadow: 0 24px 70px rgba(2, 6, 18, 0.55), 0 0 0 1px rgba(148, 163, 184, 0.1);
}
#os.theme-bs1 .window.focused {
  box-shadow: 0 28px 80px rgba(2, 6, 18, 0.6), var(--bs1-glow), 0 0 0 1px var(--bs1-border-active);
}
#os.theme-bs1 .window.maximized { border-radius: 0; }
#os.theme-bs1 .window.snapped { border-radius: 16px; }
#os.theme-bs1 .window-titlebar { border-bottom-color: rgba(148, 163, 184, 0.12); }
#os.theme-bs1 .window-title-text { font-weight: 600; letter-spacing: -0.01em; }
#os.theme-bs1 .win-btn { border-radius: 10px; }
#os.theme-bs1 .win-btn:hover { background: var(--win-hover-bg, rgba(255, 255, 255, 0.1)); }
#os.theme-bs1 .win-btn.close:hover { background: #ef4444; color: #fff; }
#os.theme-bs1 .window.drop-target { outline-color: var(--bs1-teal); }
#os.theme-bs1 .window.drop-target::after { background: var(--bs1-violet); }

/* ====================================================================== */
/* Taskbar — a true floating glass dock, not the conventional bar          */
/* taskbar.js adds .bs-dock to .taskbar while a BioStudioAI profile is     */
/* active; everything below reshapes the Win11 bar into a centered,        */
/* detached neon-glass dock. `translate` (not transform) centers it so the */
/* auto-hide translateY transform still composes.                          */
/* ====================================================================== */
#os.theme-bs1 .taskbar.bs-dock {
  left: 50%;
  right: auto;
  bottom: 10px;
  translate: -50% 0;
  width: max-content;
  max-width: calc(100vw - 24px);
  height: 56px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--bs1-border);
  border-radius: 20px;
  background: var(--taskbar-bg);
  backdrop-filter: blur(min(30px, var(--bs-max-blur, 30px))) saturate(1.35);
  -webkit-backdrop-filter: blur(min(30px, var(--bs-max-blur, 30px))) saturate(1.35);
  box-shadow: 0 22px 60px rgba(2, 6, 18, 0.55), var(--bs1-glow);
}
/* conventional-bar furniture that has no place on a floating dock */
#os.theme-bs1 .taskbar.bs-dock .taskbar-left,
#os.theme-bs1 .taskbar.bs-dock .tb-show-desktop,
#os.theme-bs1 .taskbar.bs-dock .tray-chevron { display: none; }

#os.theme-bs1 .taskbar.bs-dock .taskbar-center { gap: 6px; }
#os.theme-bs1 .taskbar.bs-dock .taskbar-right {
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--bs1-border);
}
#os.theme-bs1 .taskbar.bs-dock .tb-icon-btn,
#os.theme-bs1 .taskbar.bs-dock .task-btn {
  height: 42px;
  min-width: 42px;
  border-radius: 13px;
}
/* Start = gradient identity tile */
#os.theme-bs1 .taskbar.bs-dock .taskbar-start {
  background: var(--bs1-grad-primary);
  box-shadow: var(--bs1-glow);
}
#os.theme-bs1 .taskbar.bs-dock .taskbar-start .icon { color: #fff; }
#os.theme-bs1 .taskbar.bs-dock .taskbar-start:hover { filter: brightness(1.1); }

/* running/active app states — glowing dot + violet pill */
#os.theme-bs1 .task-btn-indicator { bottom: 4px; }
#os.theme-bs1 .task-btn.running .task-btn-indicator {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bs1-teal);
  box-shadow: 0 0 8px var(--bs1-teal);
}
#os.theme-bs1 .task-btn.active {
  background: rgba(139, 92, 246, 0.16);
  box-shadow: inset 0 0 0 1px var(--bs1-border-active);
}
#os.theme-bs1 .task-btn.active .task-btn-indicator {
  width: 16px;
  height: 3px;
  border-radius: 3px;
  background: var(--bs1-teal);
  box-shadow: 0 0 10px var(--bs1-teal);
}
#os.theme-bs1 .task-btn.multi.running .task-btn-indicator { box-shadow: 6px 0 0 -1px var(--bs1-teal), 0 0 8px var(--bs1-teal); }

/* virtual-desktop pill + tray + clock as quiet glass capsules */
#os.theme-bs1 .tb-desktop-pill {
  border: 1px solid var(--bs1-border);
  background: rgba(255, 255, 255, 0.04);
}
#os.theme-bs1 .tb-desktop-pill:hover { border-color: var(--bs1-border-active); background: var(--tb-hover); }
#os.theme-bs1 .tb-desktop-pill .tb-desktop-dot { background: var(--bs1-teal); box-shadow: 0 0 8px var(--bs1-teal); }
#os.theme-bs1 .taskbar.bs-dock .tray-cluster,
#os.theme-bs1 .taskbar.bs-dock .tray-notif-btn,
#os.theme-bs1 .taskbar.bs-dock .tray-clock { border-radius: 12px; }

/* style toggle opens the OS-style chooser; skin it like a BS1 pill */
#os.theme-bs1 .tb-style-toggle {
  border: 1px solid var(--bs1-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bs1-violet) calc(12% * var(--bs1-accent-strength, 0.8)), transparent);
  color: var(--ink-soft);
}
#os.theme-bs1 .tb-style-toggle:hover { color: var(--ink); border-color: var(--bs1-violet); }

/* ====================================================================== */
/* Start menu + flyouts + notifications                                    */
/* ====================================================================== */
#os.theme-bs1 .start-menu,
#os.theme-bs1 .flyout {
  border-radius: 20px;
  border: 1px solid var(--bs1-border);
  box-shadow: 0 30px 80px rgba(2, 6, 18, 0.6), var(--bs1-glow);
}
#os.theme-bs1 .qs-tile { border-radius: 14px; }
#os.theme-bs1 .qs-tile.on { background: var(--bs1-grad-primary); }
#os.theme-bs1 .cal-cell.today { background: var(--bs1-violet); }
#os.theme-bs1 .toast,
body.theme-bs1 .toast {
  border-radius: 16px;
  border: 1px solid var(--bs1-border);
  background: var(--flyout-bg);
  color: var(--ink);
  backdrop-filter: blur(min(24px, var(--bs-max-blur, 24px)));
  -webkit-backdrop-filter: blur(min(24px, var(--bs-max-blur, 24px)));
  box-shadow: 0 18px 50px rgba(2, 6, 18, 0.55), var(--bs1-glow);
}

/* ====================================================================== */
/* Context menus, taskbar previews, snap flyout (rendered on <body>)       */
/* ====================================================================== */
body.theme-bs1 .ctx-menu,
body.theme-bs1 .tb-preview-popover,
body.theme-bs1 .snap-flyout,
html body.theme-bs1 .ctx-menu[role="menu"]:not([data-app-color-theme]) {
  --menu-bg: var(--flyout-bg);
  --menu-border: var(--bs1-border);
  --menu-hover: var(--tile-hover);
  color: var(--ink);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(2, 6, 18, 0.45), var(--bs1-glow);
}
html body.theme-bs1 .ctx-menu[role="menu"]:not([data-app-color-theme]) {
  background: var(--flyout-bg) !important;
  color: var(--ink) !important;
  border-color: var(--bs1-border) !important;
  color-scheme: inherit;
}
body.theme-bs1 .ctx-menu {
  background: var(--flyout-bg);
  backdrop-filter: blur(min(28px, var(--bs-max-blur, 28px))) saturate(1.3);
  -webkit-backdrop-filter: blur(min(28px, var(--bs-max-blur, 28px))) saturate(1.3);
}
body.theme-bs1 .ctx-item { border-radius: 9px; color: var(--ink); }
body.theme-bs1 .ctx-item:hover:not([disabled]) { background: var(--menu-hover); }
body.theme-bs1 .ctx-item.danger:hover:not([disabled]) { background: rgba(239, 68, 68, 0.18); color: #f87171; }
body.theme-bs1 .snap-preview { background: rgba(139, 92, 246, 0.2); border-color: var(--bs1-border-active); }
body.theme-bs1 .snap-cell { background: var(--bs1-violet); }

/* ====================================================================== */
/* Shared app chrome — buttons, fields, toolbars, tables, dialogs          */
/* ====================================================================== */
#os.theme-bs1 .app-toolbar,
#os.theme-bs1 .files-toolbar {
  background: var(--app-bar);
  border-bottom-color: var(--app-line);
  backdrop-filter: blur(min(16px, var(--bs-max-blur, 16px)));
  -webkit-backdrop-filter: blur(min(16px, var(--bs-max-blur, 16px)));
}

/* File Explorer ships a Win11 Fluent pack (--fe-accent #005fb8, 8px radii,
   mica frost). Remap the tokens and kill the white command-bar wash. */
#os.theme-bs1 .fe-explorer-root {
  --fe-accent: var(--bs1-violet);
  --fe-accent-hover: var(--bs1-cyan);
  --fe-accent-soft: var(--accent-soft);
  --fe-accent-strong: rgba(139, 92, 246, 0.22);
  --fe-surface: var(--win-body-bg);
  --fe-elevated: var(--win-bg);
  --fe-sidebar: var(--titlebar-bg);
  --fe-line: var(--bs1-border);
  --fe-line-strong: var(--input-border);
  --fe-ink: var(--ink);
  --fe-ink-soft: var(--ink-soft);
  --fe-radius: 10px;
  --fe-radius-lg: 12px;
  --fe-shadow: none;
  color: var(--fe-ink);
  background: var(--fe-surface);
}
#os.theme-bs1 .fe-explorer-root .fe-command-bar {
  background: var(--app-bar);
  border-bottom-color: var(--fe-line);
}
#os.theme-bs1 .fe-explorer-root .files-main {
  background: var(--fe-elevated);
  box-shadow: none;
}
#os.theme-bs1 .fe-explorer-root .fe-nav-item.active,
#os.theme-bs1 .fe-explorer-root .files-side-item.active {
  background: var(--accent-soft);
  color: var(--bs1-cyan);
}
#os.theme-bs1 .app-statusbar {
  background: var(--surface-2);
  border-top-color: var(--app-line);
}

#os.theme-bs1 .btn,
body.theme-bs1 .btn {
  border-radius: 11px;
  border: 1px solid var(--input-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font-weight: 550;
}
#os.theme-bs1 .btn:hover,
body.theme-bs1 .btn:hover { background: rgba(255, 255, 255, 0.1); }
#os.theme-bs1 .btn.primary,
body.theme-bs1 .btn.primary {
  background: var(--bs1-grad-primary);
  border-color: transparent;
  color: #fff;
}
#os.theme-bs1 .btn.primary:hover,
body.theme-bs1 .btn.primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 18px rgba(139, 92, 246, calc(0.45 * var(--bs1-accent-strength)));
}
#os.theme-bs1 .btn.ghost,
body.theme-bs1 .btn.ghost { background: transparent; border-color: transparent; }
#os.theme-bs1 .btn.ghost:hover,
body.theme-bs1 .btn.ghost:hover { background: rgba(255, 255, 255, 0.06); }

#os.theme-bs1 .field,
#os.theme-bs1 input[type="text"],
#os.theme-bs1 input[type="search"],
#os.theme-bs1 input[type="number"],
#os.theme-bs1 input[type="email"],
#os.theme-bs1 input[type="password"],
#os.theme-bs1 textarea,
#os.theme-bs1 select,
#os.theme-bs1 .bs-select {
  border-radius: 10px;
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--ink);
  color-scheme: inherit;
}
#os.theme-bs1 .field:focus,
#os.theme-bs1 input:focus-visible,
#os.theme-bs1 textarea:focus-visible,
#os.theme-bs1 select:focus-visible {
  outline: none;
  border-color: var(--bs1-border-active);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, calc(0.3 * var(--bs1-accent-strength)));
}

/* tables — dark glass container, soft dividers, hover highlight */
#os.theme-bs1 table { border-color: var(--bs1-border); }
#os.theme-bs1 th {
  background: rgba(16, 23, 42, 0.85);
  color: var(--ink-soft);
  border-color: rgba(148, 163, 184, 0.14);
}
#os.theme-bs1 td { border-color: rgba(148, 163, 184, 0.1); }
#os.theme-bs1 tbody tr:hover td { background: rgba(139, 92, 246, 0.07); }

/* settings option cards reuse the BS1 card language */
#os.theme-bs1 .theme-card,
#os.theme-bs1 .settings-section {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--bs1-border);
}
#os.theme-bs1 .theme-card.active {
  border-color: var(--bs1-border-active);
  box-shadow: var(--bs1-glow);
}

/* dialogs / modals (rendered on <body>) */
body.theme-bs1 .platform-dialog-overlay {
  background: rgba(4, 7, 16, 0.55);
  backdrop-filter: blur(min(6px, var(--bs-max-blur, 6px)));
  -webkit-backdrop-filter: blur(min(6px, var(--bs-max-blur, 6px)));
}
body.theme-bs1 .platform-dialog {
  border-radius: 18px;
  border: 1px solid var(--bs1-border);
  background: var(--flyout-bg);
  color: var(--ink);
  box-shadow: 0 30px 90px rgba(2, 6, 18, 0.65), var(--bs1-glow);
}
body.theme-bs1 .platform-dialog-title,
body.theme-bs1 .platform-dialog-message { color: var(--ink); }
body.theme-bs1 .platform-dialog-x:hover { background: var(--tile-hover); }
body.theme-bs1 .platform-dialog-input {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--ink);
}

/* ====================================================================== */
/* Motion preferences                                                      */
/* ====================================================================== */
#os.theme-bs1.bs1-motion-dynamic .bs1-card:hover { transform: translateY(-2px); box-shadow: var(--bs1-glow); }
#os.theme-bs1.bs1-motion-reduced *,
#os.theme-bs1.bs1-motion-reduced *::before,
#os.theme-bs1.bs1-motion-reduced *::after {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
}
@media (prefers-reduced-motion: reduce) {
  #os.theme-bs1 *,
  #os.theme-bs1 *::before,
  #os.theme-bs1 *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ====================================================================== */
/* Responsive                                                              */
/* ====================================================================== */
@media (max-width: 980px) {
  .bs1-hero { flex-direction: column; align-items: stretch; }
  .bs1-search { min-width: 0; }
  .bs1-grid { grid-template-columns: 1fr; }
}

/* Accessible focus ring everywhere in BS1 */
#os.theme-bs1 :focus-visible,
body.theme-bs1 :focus-visible {
  outline: 2px solid var(--bs1-cyan);
  outline-offset: 2px;
}

/* ====================================================================== */
/* Global search palette — matches the dashboard command bar               */
/* (overrides the generic styles palette.js injects at runtime)            */
/* ====================================================================== */
body.theme-bs1 .bs-search-overlay {
  background: rgba(4, 7, 16, 0.55);
  backdrop-filter: blur(min(8px, var(--bs-max-blur, 8px))) saturate(1.1);
  -webkit-backdrop-filter: blur(min(8px, var(--bs-max-blur, 8px))) saturate(1.1);
}
body.theme-bs1 .bs-search-box {
  background: var(--flyout-bg, rgba(18, 27, 51, 0.92));
  color: var(--ink, #e6ecf7);
  border: 1px solid var(--bs1-border, rgba(148, 163, 184, 0.18));
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(2, 6, 18, 0.65), var(--bs1-glow, 0 0 24px rgba(139, 92, 246, 0.2));
  backdrop-filter: blur(min(30px, var(--bs-max-blur, 30px))) saturate(1.3);
  -webkit-backdrop-filter: blur(min(30px, var(--bs-max-blur, 30px))) saturate(1.3);
}
body.theme-bs1 .bs-search-head { border-bottom-color: var(--bs1-border, rgba(148, 163, 184, 0.18)); padding: 14px 16px; }
body.theme-bs1 .bs-search-mag { color: var(--bs1-cyan, #38bdf8); opacity: 1; }
body.theme-bs1 .bs-search-esc {
  color: var(--ink-soft);
  border-color: var(--bs1-border);
  background: rgba(255, 255, 255, 0.05);
  opacity: 1;
}
body.theme-bs1 .bs-search-group { color: var(--bs1-cyan, #38bdf8); opacity: 0.85; }
body.theme-bs1 .bs-search-row { border-radius: 12px; border: 1px solid transparent; }
body.theme-bs1 .bs-search-row.active {
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: 0 0 16px rgba(139, 92, 246, calc(0.25 * var(--bs1-accent-strength, 0.8)));
}
body.theme-bs1 .bs-search-sub,
body.theme-bs1 .bs-search-hint { color: var(--ink-soft, #a3aec7); }
body.theme-bs1 .bs-search-app { color: var(--ink-soft); border-color: var(--bs1-border); opacity: 1; }

/* ====================================================================== */
/* Start menu internals — dark glass, violet tiles                         */
/* ====================================================================== */
#os.theme-bs1 .start-menu {
  background: var(--start-mica), var(--flyout-bg);
  backdrop-filter: blur(min(30px, var(--bs-max-blur, 30px))) saturate(1.3);
  -webkit-backdrop-filter: blur(min(30px, var(--bs-max-blur, 30px))) saturate(1.3);
  color: var(--ink);
}
#os.theme-bs1 .start-searchbar {
  border-radius: 12px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--ink);
}
#os.theme-bs1 .start-searchbar:focus-within {
  border-color: var(--bs1-border-active);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, calc(0.3 * var(--bs1-accent-strength)));
}
#os.theme-bs1 .start-section-title { color: var(--bs1-cyan); }
#os.theme-bs1 .start-tile { border-radius: 14px; }
#os.theme-bs1 .start-tile:hover,
#os.theme-bs1 .start-all-row:hover,
#os.theme-bs1 .start-rec:hover,
#os.theme-bs1 .start-best:hover { background: rgba(139, 92, 246, 0.14); }
#os.theme-bs1 .start-allapps,
#os.theme-bs1 .start-back { color: var(--bs1-cyan); }
#os.theme-bs1 .start-footer {
  background: rgba(10, 15, 30, 0.5);
  border-top: 1px solid var(--bs1-border);
}

/* ====================================================================== */
/* Task view — glass cards over a deep-navy scrim                          */
/* ====================================================================== */
#os.theme-bs1 .tv-scrim {
  background: rgba(4, 7, 16, 0.6);
  backdrop-filter: blur(min(14px, var(--bs-max-blur, 14px))) saturate(1.2);
  -webkit-backdrop-filter: blur(min(14px, var(--bs-max-blur, 14px))) saturate(1.2);
}
#os.theme-bs1 .tv-window {
  border-radius: 16px;
  border: 1px solid var(--bs1-border);
  background: rgba(18, 27, 51, 0.8);
  box-shadow: 0 20px 60px rgba(2, 6, 18, 0.5);
}
#os.theme-bs1 .tv-window:hover {
  border-color: var(--bs1-border-active);
  box-shadow: 0 24px 70px rgba(2, 6, 18, 0.6), var(--bs1-glow);
}
#os.theme-bs1 .tv-desktop { border-radius: 14px; border: 1px solid var(--bs1-border); }
#os.theme-bs1 .tv-desktop.active { border-color: var(--bs1-border-active); box-shadow: var(--bs1-glow); }
#os.theme-bs1 .tv-add { border: 1px dashed rgba(148, 163, 184, 0.4); border-radius: 14px; }
#os.theme-bs1 .tv-add:hover { border-color: var(--bs1-border-active); }

/* ====================================================================== */
/* Customizable widget panel (js/core/bs-widgets.js) — neon glass stack    */
/* ====================================================================== */
#os.theme-bs1 .bsw-panel {
  flex: none;
  width: clamp(260px, 24vw, 320px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 18px;
  margin-bottom: 20px;
  border-radius: 20px;
  border: 1px solid var(--bs1-border);
  background: var(--bs1-glass);
  backdrop-filter: blur(min(20px, var(--bs-max-blur, 20px))) saturate(1.2);
  -webkit-backdrop-filter: blur(min(20px, var(--bs-max-blur, 20px))) saturate(1.2);
  box-shadow: 0 20px 60px rgba(2, 6, 18, 0.4);
  overflow-y: auto;
}
#os.theme-bs1 .bsw-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#os.theme-bs1 .bsw-head-title { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
#os.theme-bs1 .bsw-edit-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--bs1-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-soft); font: 600 11.5px var(--font); cursor: pointer;
  transition: border-color 0.13s ease, color 0.13s ease, box-shadow 0.13s ease;
}
#os.theme-bs1 .bsw-edit-btn:hover { color: var(--ink); border-color: var(--bs1-border-active); }
#os.theme-bs1 .bsw-edit-btn.on {
  color: #fff;
  border-color: transparent;
  background: var(--bs1-grad-primary);
  box-shadow: var(--bs1-glow);
}

#os.theme-bs1 .bsw-widget { display: flex; flex-direction: column; gap: 8px; }
#os.theme-bs1 .bsw-widget.editing {
  padding: 10px;
  border-radius: 14px;
  border: 1px dashed rgba(139, 92, 246, 0.45);
  background: rgba(139, 92, 246, 0.05);
}
#os.theme-bs1 .bsw-widget-head { display: flex; align-items: center; gap: 6px; }
#os.theme-bs1 .bsw-widget-glyph { display: inline-flex; color: var(--bs1-violet); }
#os.theme-bs1 .bsw-widget-title {
  flex: 1;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-soft);
}
#os.theme-bs1 .bsw-widget-tools { display: inline-flex; gap: 3px; }
#os.theme-bs1 .bsw-tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 8px;
  border: 1px solid var(--bs1-border); background: rgba(255, 255, 255, 0.04);
  color: var(--ink-soft); cursor: pointer;
}
#os.theme-bs1 .bsw-tool:hover:not([disabled]) { color: var(--ink); border-color: var(--bs1-border-active); }
#os.theme-bs1 .bsw-tool.danger:hover:not([disabled]) { color: #f87171; border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.12); }
#os.theme-bs1 .bsw-tool[disabled] { opacity: 0.35; cursor: default; }

#os.theme-bs1 .bsw-list { display: flex; flex-direction: column; gap: 4px; }
#os.theme-bs1 .bsw-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; padding: 9px 8px; border-radius: 12px;
  border: 1px solid transparent; background: rgba(255, 255, 255, 0.03);
  color: var(--ink); font: inherit; cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
#os.theme-bs1 .bsw-row:hover { background: rgba(139, 92, 246, 0.12); border-color: rgba(139, 92, 246, 0.3); }
#os.theme-bs1 .bsw-row-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  color: var(--bs1-cyan); background: rgba(139, 92, 246, 0.14);
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.22);
}
#os.theme-bs1 .bsw-row.unread .bsw-row-icon { color: var(--bs1-teal); }
#os.theme-bs1 .bsw-row.check .bsw-row-icon { color: var(--bs1-violet); background: none; box-shadow: none; }
#os.theme-bs1 .bsw-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#os.theme-bs1 .bsw-row-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#os.theme-bs1 .bsw-row-sub { font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#os.theme-bs1 .bsw-row-caret { flex: none; color: var(--ink-soft); opacity: 0.6; display: inline-flex; }
#os.theme-bs1 .bsw-empty { font-size: 12px; color: var(--ink-soft); padding: 2px 4px; }
#os.theme-bs1 .bsw-empty.center { text-align: center; padding: 8px; }

/* clock */
#os.theme-bs1 .bsw-clock { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px; }
#os.theme-bs1 .bsw-clock-time {
  font-size: 34px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1;
  background: linear-gradient(120deg, #e6ecf7, #b7a8f5 60%, #7fe7d6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#os.theme-bs1 .bsw-clock-date { font-size: 12.5px; color: var(--ink-soft); }

/* lab stats */
#os.theme-bs1 .bsw-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#os.theme-bs1 .bsw-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 11px; border-radius: 12px;
  border: 1px solid var(--bs1-border); background: rgba(255, 255, 255, 0.03);
}
#os.theme-bs1 .bsw-stat-value { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--bs1-cyan); }
#os.theme-bs1 .bsw-stat-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }

/* quick launch */
#os.theme-bs1 .bsw-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#os.theme-bs1 .bsw-quick-app {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 4px; border-radius: 12px;
  border: 1px solid transparent; background: rgba(255, 255, 255, 0.03);
  color: var(--ink); font: inherit; cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
#os.theme-bs1 .bsw-quick-app:hover { background: rgba(139, 92, 246, 0.14); border-color: rgba(139, 92, 246, 0.3); }
#os.theme-bs1 .bsw-quick-name { font-size: 10px; font-weight: 600; color: var(--ink-soft); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* add-widget picker (edit mode) */
#os.theme-bs1 .bsw-add {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border-radius: 14px;
  border: 1px dashed rgba(148, 163, 184, 0.4);
  background: rgba(255, 255, 255, 0.02);
}
#os.theme-bs1 .bsw-add-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
#os.theme-bs1 .bsw-add-list { display: flex; flex-wrap: wrap; gap: 6px; }
#os.theme-bs1 .bsw-add-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 999px;
  border: 1px solid var(--bs1-border); background: rgba(255, 255, 255, 0.04);
  color: var(--ink); font: 600 11.5px var(--font); cursor: pointer;
  transition: border-color 0.13s ease, background 0.13s ease, box-shadow 0.13s ease;
}
#os.theme-bs1 .bsw-add-chip:hover {
  border-color: var(--bs1-border-active);
  background: rgba(139, 92, 246, 0.14);
  box-shadow: var(--bs1-glow);
}

/* white appearance: brighter fills for the widget stack */
#os.theme-bs1:not(.dark) .bsw-row,
#os.theme-bs1:not(.dark) .bsw-quick-app,
#os.theme-bs1:not(.dark) .bsw-stat { background: rgba(15, 23, 42, 0.03); }
#os.theme-bs1:not(.dark) .bsw-row:hover,
#os.theme-bs1:not(.dark) .bsw-quick-app:hover { background: rgba(139, 92, 246, 0.1); }
#os.theme-bs1:not(.dark) .bsw-clock-time {
  background: linear-gradient(120deg, #1d2a4d, #4c3d9e 60%, #0d7f6f);
  -webkit-background-clip: text; background-clip: text;
}
/* compact density applies to widgets too */
#os.theme-bs1.bs1-density-compact .bsw-panel { padding: 14px; gap: 11px; }
#os.theme-bs1.bs1-density-compact .bsw-row { padding: 7px 8px; }

/* ====================================================================== */
/* Scrollbars, tabs, sidebars, menubars, nested app shells                 */
/* ====================================================================== */
#os.theme-bs1,
body.theme-bs1 {
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
#os.theme-bs1 ::-webkit-scrollbar,
body.theme-bs1 ::-webkit-scrollbar { width: 10px; height: 10px; }
#os.theme-bs1 ::-webkit-scrollbar-thumb,
body.theme-bs1 ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;
}
#os.theme-bs1 ::-webkit-scrollbar-thumb:hover,
body.theme-bs1 ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--bs1-violet) 55%, transparent);
  background-clip: padding-box;
}

#os.theme-bs1 .start-menu,
#os.theme-bs1.dark .start-menu {
  --start-mica: linear-gradient(
    165deg,
    rgba(139, 92, 246, 0.14) 0%,
    rgba(18, 27, 51, 0.08) 48%,
    rgba(0, 230, 195, 0.06) 100%
  );
  --start-search-bg: var(--input-bg);
  --start-search-border: var(--input-border);
  --start-hover: rgba(139, 92, 246, 0.14);
}
#os.theme-bs1:not(.dark) .start-menu {
  --start-mica: linear-gradient(
    165deg,
    rgba(139, 92, 246, 0.1) 0%,
    rgba(255, 255, 255, 0.55) 52%,
    rgba(0, 200, 170, 0.08) 100%
  );
}

body.theme-bs1 .user-flyout {
  background: var(--flyout-bg);
  border-color: var(--bs1-border);
  color: var(--ink);
  box-shadow: 0 20px 60px rgba(2, 6, 18, 0.45), var(--bs1-glow);
  border-radius: 16px;
}

#os.theme-bs1 .st-sidebar,
#os.theme-bs1 .st-inspector,
#os.theme-bs1 .st-ai,
#os.theme-bs1 .files-sidebar,
#os.theme-bs1 .ad-formpane,
#os.theme-bs1 .ad-tabs {
  background: var(--st-panel);
  border-color: var(--st-line);
  color: var(--st-ink);
}
#os.theme-bs1 .st-nav-item.active,
#os.theme-bs1 .files-side-item.active,
#os.theme-bs1 .ad-tab.active,
#os.theme-bs1 .theme-card.active {
  background: var(--accent-soft);
  color: var(--bs1-cyan);
  border-color: var(--bs1-border-active);
}
#os.theme-bs1 .st-toolbar,
#os.theme-bs1 .st-card,
#os.theme-bs1 .st-input,
#os.theme-bs1 .st-btn,
#os.theme-bs1 .st-tbtn,
#os.theme-bs1 .st-table-wrap,
#os.theme-bs1 .st-project {
  border-radius: 11px;
}
#os.theme-bs1 .st-toolbar,
#os.theme-bs1 .st-sidebar,
#os.theme-bs1 .st-inspector,
#os.theme-bs1 .st-ai { border-radius: 0; }

#os.theme-bs1 .studio {
  --st-accent: var(--bs1-violet);
  --st-ai: var(--bs1-cyan);
  --st-info: var(--bs1-cyan);
  --st-bg: var(--win-body-bg);
  --st-panel: var(--win-bg);
  --st-line: var(--bs1-border);
  --st-line-soft: rgba(148, 163, 184, 0.1);
  --st-ink: var(--ink);
  --st-ink-soft: var(--ink-soft);
  background: var(--st-bg);
  color: var(--st-ink);
}
#os.theme-bs1 .st-workspace { background: var(--st-bg); }

#os.theme-bs1 .clib {
  --cl-accent: var(--bs1-violet);
  --cl-bg: var(--win-body-bg);
  --cl-panel: var(--win-bg);
  --cl-panel-2: var(--surface-2);
  --cl-line: var(--bs1-border);
  --cl-ink: var(--ink);
  --cl-soft: var(--ink-soft);
}
#os.theme-bs1 :is(
  .graph-studio-app,
  .lims-studio-app,
  .scs-studio-root,
  .spatial-studio-app,
  .spatial-studio-root,
  .seahorse-studio-root,
  .ms-studio-root,
  .ms-studio-app,
  .tox-studio-app,
  .qms-lite-app,
  .qms-lite-root,
  .ss-studio-root,
  .pkpd-studio-root,
  .pathology-studio-root,
  .pathology-studio-app,
  .pcr-studio-app,
  .pcrs-graph-shell,
  .method-validation-root,
  .omics-studio-app,
  .molecular-design-root,
  .design-studio-root,
  .las-root,
  .compound-studio-app,
  .assay-designer-app
) {
  --pr-blue: var(--bs1-violet);
  --pr-blue-dk: #6d5dfb;
  --pr-teal: var(--bs1-teal);
  --pr-bg: var(--win-body-bg);
  --pr-surface: var(--win-bg);
  --pr-nav-bg: var(--titlebar-bg);
  --pr-line: var(--bs1-border);
  --pr-ink: var(--ink);
  --pr-ink-soft: var(--ink-soft);
  --pr-hover: rgba(139, 92, 246, 0.12);
  --pr-active: rgba(139, 92, 246, 0.2);
  --st-accent: var(--bs1-violet);
  --st-ai: var(--bs1-cyan);
  --st-bg: var(--win-body-bg);
  --st-panel: var(--win-bg);
  --st-line: var(--bs1-border);
  --st-ink: var(--ink);
  --st-ink-soft: var(--ink-soft);
}
#os.theme-bs1 .plasmid-studio-root,
#os.theme-bs1 .ps-app {
  --ps-ink: var(--ink);
  --ps-muted: var(--ink-soft);
  --ps-line: var(--bs1-border);
  --ps-panel: var(--win-bg);
  --ps-soft: var(--win-body-bg);
  --ps-blue: var(--bs1-violet);
  --ps-teal: var(--bs1-teal);
  --ps-navy: var(--bs1-indigo);
  color: var(--ps-ink);
  background: var(--ps-soft);
}
#os.theme-bs1 .ps-document-bar {
  background: var(--titlebar-bg);
  border-bottom-color: var(--ps-line);
}
#os.theme-bs1 .ps-document-tab {
  background: color-mix(in srgb, var(--ps-soft) 84%, transparent);
  border-color: var(--ps-line);
  color: var(--ps-muted);
}
#os.theme-bs1 .ps-document-tab.active {
  background: var(--ps-panel);
  color: var(--ps-ink);
}
#os.theme-bs1 .ps-document-new {
  background: var(--ps-panel);
  border-color: var(--ps-line);
  color: var(--ps-blue);
}
#os.theme-bs1 .app-maps-root {
  --am-glow: color-mix(in srgb, var(--bs1-violet) 35%, transparent);
}

#os.theme-bs1 .calc-display,
#os.theme-bs1 .calc-key,
#os.theme-bs1 .files-path,
#os.theme-bs1 .files-preview,
#os.theme-bs1 .files-home-card,
#os.theme-bs1 .seq-input,
#os.theme-bs1 .seq-stat {
  background: var(--tile-bg);
  border-color: var(--bs1-border);
  color: var(--ink);
}
#os.theme-bs1 .files-home-card:hover,
#os.theme-bs1 .file-item:hover,
#os.theme-bs1 .files-side-item:hover {
  background: var(--tile-hover);
}
#os.theme-bs1 .file-item.selected {
  background: var(--accent-soft);
  outline-color: var(--bs1-border-active);
}

#os.theme-bs1 .org-platform-app,
#os.theme-bs1 .org-platform-header {
  color: var(--ink);
  border-color: var(--org-border);
}
#os.theme-bs1 .pm-app,
#os.theme-bs1 .pm-frame {
  color: var(--pm-ink);
  background: var(--app-bg);
}
#os.theme-bs1 .pm-topbar {
  color: var(--ink);
  background: var(--titlebar-bg);
  border-bottom-color: var(--bs1-border);
}
#os.theme-bs1 .notification-center-app .nc-app-nav.active {
  background: var(--accent-soft);
  color: var(--bs1-violet);
}
#os.theme-bs1 .notification-center-app .nc-app-nav:hover { background: var(--tile-hover); }
#os.theme-bs1 .notification-center-app .nc-nav-badge {
  background: var(--bs1-violet);
}

#os.theme-bs1 .tox-ribbon-app {
  --tox-blue: var(--bs1-violet);
  --tox-blue-deep: #5b3fd4;
  --tox-teal: var(--bs1-teal);
  --st-accent: var(--bs1-violet);
}
#os.theme-bs1 .tox-ribbon-app .ss-titlebar {
  background: var(--bs1-grad-primary);
}
#os.theme-bs1 .tox-ribbon-app .ss-ribbon-tabs { background: color-mix(in srgb, var(--bs1-indigo) 88%, var(--bs1-violet)); }
#os.theme-bs1 .tox-ribbon-app .ss-ribbon-panel {
  background: var(--st-panel);
}

#os.theme-bs1 .studio-ai-fab,
body.theme-bs1 .os-ai-fab,
body.theme-bs1 .os-ai-fab-float,
#os.theme-bs1 .ops-support-fab,
body.theme-bs1 .ops-support-fab {
  background: var(--bs1-grad-primary);
  box-shadow: 0 8px 28px rgba(139, 92, 246, 0.4);
}
#os.theme-bs1 .ops-support-fab:hover,
body.theme-bs1 .ops-support-fab:hover {
  box-shadow: 0 12px 32px rgba(139, 92, 246, 0.5);
}
#os.theme-bs1 .studio-ai-panel {
  background: var(--flyout-bg);
  border-color: var(--bs1-border);
  color: var(--ink);
}
#os.theme-bs1 .studio-ai-badge {
  background: var(--bs1-grad-primary);
}
#os.theme-bs1 .studio-ai-msg.user { background: var(--accent-soft); }
body.theme-bs1 .os-ai-send,
body.theme-bs1 .os-ai-open,
#os.theme-bs1 .studio-ai-send {
  background: var(--bs1-grad-primary);
  color: #fff;
}

#os.theme-bs1 [class*="menubar"],
#os.theme-bs1 .ps-menubar,
#os.theme-bs1 .graph-studio-menubar,
#os.theme-bs1 .path-menubar {
  background: var(--titlebar-bg);
  color: var(--ink);
  border-color: var(--bs1-border);
}
#os.theme-bs1 .graph-studio-ribbon-strip {
  background: var(--bs1-grad-primary);
}
#os.theme-bs1 .graph-studio-ribbon-mark { color: #ddd6fe; }
#os.theme-bs1 .graph-studio-ribbon-group { border-radius: 11px; }
#os.theme-bs1 .graph-studio-menu-drop {
  border-radius: 0 0 12px 12px;
  background: var(--pr-surface);
  border-color: var(--bs1-border);
  box-shadow: 0 16px 40px rgba(2, 6, 18, 0.45), var(--bs1-glow);
}
#os.theme-bs1 .office-rb {
  --office-rb-accent: var(--bs1-violet);
  --office-rb-accent-dark: #6d5dfb;
  --office-rb-hover: rgba(139, 92, 246, 0.12);
  --office-rb-hover-border: rgba(139, 92, 246, 0.35);
}
#os.theme-bs1 .app-maps-root .st-workspace {
  background:
    radial-gradient(1200px 520px at 12% -10%, color-mix(in srgb, var(--bs1-violet) 22%, transparent), transparent 60%),
    radial-gradient(900px 480px at 110% 8%, color-mix(in srgb, var(--bs1-teal) 14%, transparent), transparent 55%),
    var(--st-bg);
}

#os.theme-bs1 .fullscreen-message {
  border-color: var(--bs1-border);
  background: var(--flyout-bg);
  color: var(--ink);
  box-shadow: 0 18px 50px rgba(2, 6, 18, 0.45), var(--bs1-glow);
}
#os.theme-bs1 .fullscreen-message button {
  background: rgba(139, 92, 246, 0.22);
  color: var(--ink);
}
#os.theme-bs1 .fullscreen-message button:hover {
  background: rgba(139, 92, 246, 0.32);
}
#os.theme-bs1 .fullscreen-message button:not(.fullscreen-message-close) {
  background: var(--bs1-grad-primary);
  color: #fff;
}

#os.theme-bs1 .btn,
body.theme-bs1 .btn { background: var(--app-btn); }
#os.theme-bs1:not(.dark) .btn,
body.theme-bs1:not(.dark) .btn { background: var(--app-btn); color: var(--ink); }
#os.theme-bs1:not(.dark) .toast { background: var(--flyout-bg); color: var(--ink); }

/* Shipped default window color ("white") is a teal lab palette that fights
   BS1. Remap it to the navy/violet system so apps follow the OS theme unless
   the user picks a different swatch. Explicit khaki/navy/midnight still win. */
#os.theme-bs1.dark .window[data-app-color-theme="white"],
#os.theme-bs1.dark .window[data-app-color-theme="white"] *,
body.theme-bs1.dark [data-app-color-theme="white"],
body.theme-bs1.dark [data-app-color-theme="white"] * {
  --accent: #8b5cf6 !important;
  --accent-soft: rgba(139, 92, 246, 0.18) !important;
  --accent-color: #8b5cf6 !important;
  --primary: #8b5cf6 !important;
  --primary-strong: #a78bfa !important;
  --primary-soft: rgba(139, 92, 246, 0.2) !important;
  --on-primary: #ffffff !important;
  --ink: #e6ecf7 !important;
  --ink-soft: #a3aec7 !important;
  --ink-faint: #7b86a3 !important;
  --text: #e6ecf7 !important;
  --muted: #a3aec7 !important;
  --faint: #7b86a3 !important;
  --bg: #0d1326 !important;
  --surface: rgba(18, 27, 51, 0.92) !important;
  --surface-2: #161e36 !important;
  --surface-3: #1c2744 !important;
  --win-bg: rgba(18, 27, 51, 0.92) !important;
  --win-body-bg: rgba(13, 19, 38, 0.92) !important;
  --win-border: rgba(148, 163, 184, 0.18) !important;
  --win-border-focus: rgba(139, 92, 246, 0.5) !important;
  --win-hover-bg: rgba(255, 255, 255, 0.1) !important;
  --titlebar-bg: rgba(16, 23, 42, 0.9) !important;
  --flyout-bg: rgba(18, 27, 51, 0.94) !important;
  --menu-bg: rgba(18, 27, 51, 0.94) !important;
  --menu-border: rgba(148, 163, 184, 0.18) !important;
  --menu-hover: rgba(139, 92, 246, 0.16) !important;
  --app-bar: #161e36 !important;
  --app-line: rgba(148, 163, 184, 0.14) !important;
  --line: rgba(148, 163, 184, 0.18) !important;
  --border: rgba(148, 163, 184, 0.18) !important;
  --office-rb-accent: #8b5cf6 !important;
  --office-rb-accent-dark: #6d5dfb !important;
  --fe-accent: #8b5cf6 !important;
  --fe-line: rgba(148, 163, 184, 0.18) !important;
  --fe-ink: #e6ecf7 !important;
  --fe-surface: rgba(13, 19, 38, 0.92) !important;
  --fe-elevated: rgba(18, 27, 51, 0.92) !important;
  --fe-sidebar: rgba(16, 23, 42, 0.9) !important;
  --app-btn: rgba(255, 255, 255, 0.06) !important;
  --app-btn-hover: rgba(255, 255, 255, 0.1) !important;
  --app-input: rgba(10, 15, 30, 0.65) !important;
  --app-bg: #0d1326 !important;
  --input-bg: rgba(10, 15, 30, 0.65) !important;
  --input-border: rgba(148, 163, 184, 0.24) !important;
  --st-accent: #8b5cf6 !important;
  --st-bg: #0d1326 !important;
  --st-panel: rgba(18, 27, 51, 0.92) !important;
  --st-line: rgba(148, 163, 184, 0.18) !important;
  --st-ink: #e6ecf7 !important;
  --st-ink-soft: #a3aec7 !important;
  --pr-blue: #8b5cf6 !important;
  --pr-teal: #00e6c3 !important;
  --pr-bg: #0d1326 !important;
  --pr-surface: rgba(18, 27, 51, 0.92) !important;
  --pr-nav-bg: #161e36 !important;
  --pr-line: rgba(148, 163, 184, 0.18) !important;
  --pr-ink: #e6ecf7 !important;
  --pr-ink-soft: #a3aec7 !important;
  --ps-ink: #e6ecf7 !important;
  --ps-muted: #a3aec7 !important;
  --ps-line: rgba(148, 163, 184, 0.18) !important;
  --ps-panel: rgba(18, 27, 51, 0.92) !important;
  --ps-soft: #0d1326 !important;
  --ps-blue: #8b5cf6 !important;
  --ps-teal: #00e6c3 !important;
  --eln-canvas: #0d1326 !important;
  --eln-surface: rgba(18, 27, 51, 0.92) !important;
  --eln-text: #e6ecf7 !important;
  --eln-muted: #a3aec7 !important;
  --eln-blue: #8b5cf6 !important;
  --cl-bg: #0d1326 !important;
  --cl-panel: rgba(18, 27, 51, 0.92) !important;
  --cl-ink: #e6ecf7 !important;
  --cl-accent: #8b5cf6 !important;
  --tech-cyan: #00e6c3 !important;
  --tech-violet: #8b5cf6 !important;
  --control-bg: rgba(10, 15, 30, 0.65) !important;
  --control-line: rgba(148, 163, 184, 0.24) !important;
  color-scheme: dark;
}

#os.theme-bs1:not(.dark) .window[data-app-color-theme="white"],
#os.theme-bs1:not(.dark) .window[data-app-color-theme="white"] *,
body.theme-bs1:not(.dark) [data-app-color-theme="white"],
body.theme-bs1:not(.dark) [data-app-color-theme="white"] * {
  --accent: #8b5cf6 !important;
  --accent-color: #8b5cf6 !important;
  --accent-soft: rgba(139, 92, 246, 0.14) !important;
  --primary: #8b5cf6 !important;
  --primary-strong: #6d5dfb !important;
  --primary-soft: rgba(139, 92, 246, 0.14) !important;
  --st-accent: #8b5cf6 !important;
  --pr-blue: #8b5cf6 !important;
  --pr-teal: #00b8d9 !important;
  --ps-blue: #8b5cf6 !important;
  --ps-teal: #00b8a8 !important;
  --eln-blue: #8b5cf6 !important;
  --cl-accent: #8b5cf6 !important;
  --office-rb-accent: #8b5cf6 !important;
  --office-rb-accent-dark: #6d5dfb !important;
  --tech-violet: #8b5cf6 !important;
  --tech-cyan: #00b8a8 !important;
  --fe-accent: #8b5cf6 !important;
}