/* Floating Ribbon navigation ------------------------------------------------
   The product switcher is deliberately extensible: product entries live in a
   menu while the persistent ribbon is reserved for the active workflow. */
:root {
  --ribbon-cyan: #57e0e9;
  --ribbon-violet: #9b6cff;
  --ribbon-line: rgba(255,255,255,.105);
  --ribbon-line-strong: rgba(255,255,255,.17);
  --ribbon-surface: rgba(13,14,18,.97);
  --ribbon-raised: rgba(23,24,30,.98);
  --ribbon-glow: 0 0 0 1px rgba(80,220,233,.48), 0 0 18px rgba(80,220,233,.10), 0 0 24px rgba(151,94,255,.08);
}

#topbar {
  position: relative;
  z-index: 100;
  box-sizing: border-box;
  width: calc(100% - 20px);
  height: 58px;
  min-height: 58px;
  margin: 8px 10px 6px;
  padding: 0 12px;
  gap: 12px;
  overflow: visible;
  flex-wrap: nowrap;
  border: 1px solid var(--ribbon-line);
  border-radius: 14px;
  background:
    radial-gradient(420px 100px at 28% -60%, rgba(67,214,225,.055), transparent 72%),
    radial-gradient(440px 120px at 72% -70%, rgba(143,91,239,.07), transparent 72%),
    linear-gradient(105deg, rgba(18,20,24,.985), rgba(9,10,13,.99) 58%, rgba(15,13,20,.985));
  box-shadow: 0 15px 44px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.035);
}

#topbar::after { display: none; }
#brand { flex: none; min-width: 136px; }

/* Scalable product menu. */
#workspace-product-switcher {
  position: relative;
  display: block;
  flex: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#workspace-product-trigger {
  position: relative;
  display: flex;
  box-sizing: border-box;
  min-width: 122px;
  height: 38px;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  list-style: none;
  border: 1px solid var(--ribbon-line);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
  color: #e7e8ed;
  font-size: 12px;
  font-weight: 690;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .18s ease, transform .16s ease;
}

#workspace-product-trigger::-webkit-details-marker { display: none; }
#workspace-product-trigger::marker { content: ""; }
#workspace-product-trigger:hover,
#workspace-product-trigger:focus-visible,
#workspace-product-switcher[open] > #workspace-product-trigger {
  outline: 0;
  border-color: rgba(126,151,255,.50);
  background: linear-gradient(135deg, rgba(64,214,224,.075), rgba(140,87,231,.095));
  box-shadow: var(--ribbon-glow);
  color: #fff;
}
#workspace-product-trigger:active { transform: translateY(1px); }

.workspace-product-grid {
  display: grid;
  grid-template-columns: repeat(2,5px);
  grid-template-rows: repeat(2,5px);
  gap: 2px;
  flex: none;
}
.workspace-product-grid i {
  display: block;
  border-radius: 1.5px;
  background: #aeb2bc;
  transition: background .16s ease, box-shadow .16s ease;
}
#workspace-product-trigger:is(:hover,:focus-visible) .workspace-product-grid i,
#workspace-product-switcher[open] .workspace-product-grid i {
  background: linear-gradient(135deg,var(--ribbon-cyan),var(--ribbon-violet));
  box-shadow: 0 0 8px rgba(87,224,233,.20);
}
.workspace-product-chevron {
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .16s ease;
  opacity: .72;
}
#workspace-product-switcher[open] .workspace-product-chevron { transform: rotate(225deg) translate(-1px,-1px); }

#workspace-product-menu {
  position: absolute;
  z-index: 260;
  top: calc(100% + 10px);
  left: 0;
  display: grid;
  box-sizing: border-box;
  width: 326px;
  gap: 4px;
  padding: 9px;
  border: 1px solid rgba(140,143,158,.27);
  border-radius: 14px;
  background:
    radial-gradient(300px 180px at 100% 0, rgba(139,83,225,.13), transparent 72%),
    linear-gradient(145deg, rgba(25,27,32,.995), rgba(11,12,16,.995));
  box-shadow: 0 28px 70px rgba(0,0,0,.62), 0 0 28px rgba(119,79,222,.075), inset 0 1px rgba(255,255,255,.045);
  transform-origin: top left;
  animation: ribbon-menu-in .16s ease-out;
}

@keyframes ribbon-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.workspace-product-menu-label {
  padding: 5px 8px 7px;
  color: #858a96;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .11em;
  text-transform: uppercase;
}

#workspace-product-menu button {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) 18px;
  width: 100%;
  height: auto;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #c7c9d0;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .18s ease, transform .16s ease;
}

#workspace-product-menu button:hover,
#workspace-product-menu button:focus-visible {
  outline: 0;
  border-color: rgba(128,121,229,.37);
  background: linear-gradient(105deg, rgba(71,213,222,.075), rgba(137,82,225,.12));
  box-shadow: 0 0 18px rgba(111,89,225,.09), inset 0 1px rgba(255,255,255,.035);
  transform: translateX(1px);
}
body #workspace-product-switcher #workspace-product-menu button[aria-checked="true"] {
  border-color: rgba(112,169,237,.31)!important;
  background: linear-gradient(105deg, rgba(63,196,209,.10), rgba(125,83,218,.13))!important;
  color: #f6f7fb!important;
  box-shadow: 0 0 18px rgba(92,184,226,.07), inset 0 1px rgba(255,255,255,.035)!important;
}
html body details#workspace-product-switcher nav#workspace-product-menu :is(
  button#workspace-product-charts,
  button#workspace-product-quant,
  button#workspace-product-discover
)[aria-checked="true"] {
  border-color: rgba(112,169,237,.31)!important;
  background-color: rgba(29,35,47,.98)!important;
  background-image: linear-gradient(105deg, rgba(63,196,209,.10), rgba(125,83,218,.13))!important;
  color: #f6f7fb!important;
  box-shadow: 0 0 18px rgba(92,184,226,.07), inset 0 1px rgba(255,255,255,.035)!important;
}

.workspace-product-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  background: rgba(255,255,255,.03);
  color: #b9bec9;
  font-size: 17px;
  font-weight: 650;
}
.workspace-product-icon.charts { color: #64dce4; }
.workspace-product-icon.quant { color: #b092ff; }
.workspace-product-icon.discover { color: #75d8ba; }
.workspace-product-copy { display: grid; min-width: 0; gap: 3px; }
.workspace-product-copy strong { color: inherit!important; font-size: 12px; font-weight: 720; }
.workspace-product-copy small { overflow: hidden; color: #858a95; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.workspace-product-check { color: #70e0dc; opacity: 0; font-size: 13px; }
#workspace-product-menu button[aria-checked="true"] .workspace-product-check { opacity: 1; }
.workspace-product-future {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  padding: 10px 9px 5px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #898d97;
}
.workspace-product-future > span:first-child { display:grid;width:34px;height:30px;place-items:center;font-size:18px; }
.workspace-product-future > span:last-child { display:grid;gap:2px; }
.workspace-product-future strong { color:#aeb1b9;font-size:11px; }
.workspace-product-future small { color:#686c76;font-size:9.5px; }

/* The workflow reads as one quiet control surface inside the ribbon. */
#workspace-mode-tabs {
  display: flex;
  height: 38px;
  min-height: 38px;
  align-self: center;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 11px;
  background: rgba(255,255,255,.018);
}
#workspace-mode-tabs button {
  height: 30px;
  min-height: 30px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #858995;
  font-size: 11px;
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .18s ease;
}
#workspace-mode-tabs button:hover,
#workspace-mode-tabs button:focus-visible {
  outline: 0;
  border-color: rgba(144,119,239,.22);
  background: linear-gradient(135deg, rgba(62,205,217,.055), rgba(139,87,229,.075));
  color: #e9eaf0;
  box-shadow: 0 0 16px rgba(117,89,229,.07);
}
#workspace-mode-tabs button[aria-selected="true"] {
  border-color: rgba(123,144,242,.36);
  background: linear-gradient(135deg, rgba(57,195,207,.105), rgba(128,78,219,.13));
  color: #fafbff;
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 0 18px rgba(84,207,222,.08), 0 0 20px rgba(131,78,221,.07);
}
#workspace-mode-tabs button[aria-selected="true"]::after { display: none; }

#workspace-controls { margin-left: auto; gap: 7px; }
#workspace-controls :is(#workspace-select,#workspace-name) {
  height: 38px;
  border: 1px solid var(--ribbon-line);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
  transition: border-color .16s ease, background .16s ease, box-shadow .18s ease;
}
#workspace-controls :is(#workspace-select,#workspace-name):hover,
#workspace-controls :is(#workspace-select,#workspace-name):focus {
  outline: 0;
  border-color: rgba(126,144,236,.38);
  background: linear-gradient(135deg, rgba(61,203,215,.045), rgba(133,82,224,.065));
  box-shadow: 0 0 16px rgba(103,91,225,.065);
}
#workspace-controls .icon-btn,
#workspace-manage > summary,
#topbar-actions .icon-btn {
  box-sizing: border-box;
  height: 38px;
  min-height: 38px;
  border: 1px solid var(--ribbon-line);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .18s ease, transform .16s ease;
}
#workspace-controls .icon-btn:hover,
#workspace-controls .icon-btn:focus-visible,
#workspace-manage > summary:hover,
#workspace-manage[open] > summary,
#topbar-actions .icon-btn:hover,
#topbar-actions .icon-btn:focus-visible {
  outline: 0;
  border-color: rgba(131,126,235,.42);
  background: linear-gradient(135deg, rgba(65,207,219,.06), rgba(137,83,227,.09));
  color: #fff;
  box-shadow: 0 0 18px rgba(108,88,226,.075);
}
#workspace-new { padding-inline: 12px; white-space: nowrap; }
#workspace-rename { width: 38px; min-width: 38px; }
#workspace-manage > summary { display:grid;min-width:38px;padding:0;place-items:center; }
#workspace-status { max-width: 150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#topbar-actions { gap: 0; }
#topbar-actions .icon-btn { width: 38px; min-width: 38px; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  #workspace-product-menu { animation: none; }
  #workspace-product-trigger,
  #workspace-product-menu button,
  #workspace-mode-tabs button { transition: none; }
}

@media (max-width: 1360px) {
  #topbar { gap: 9px; }
  #brand { min-width: 124px; }
  #workspace-product-trigger { min-width: 108px; }
  #workspace-mode-tabs button { padding-inline: 9px; }
  #workspace-controls #workspace-select { width: 150px; }
  #workspace-status { display: none; }
}

@media (max-width: 1080px) {
  #topbar { height: auto; min-height: 106px; flex-wrap: wrap; align-content: center; padding-block: 8px; }
  #brand { order: 1; }
  #workspace-product-switcher { order: 2; }
  #workspace-controls { order: 3; }
  #topbar-actions { order: 4; }
  #workspace-mode-tabs { order: 5; width: 100%; justify-content: center; }
}

@media (max-width: 760px) {
  #topbar {
    display: flex;
    width: calc(100% - 12px);
    min-height: 146px;
    margin: 6px;
    padding: 8px;
    border-radius: 12px;
    column-gap: 7px;
    row-gap: 7px;
  }
  #brand { min-width: 24px; }
  #brand-logo { display:none; }
  #workspace-product-switcher { margin:0; }
  #workspace-product-trigger { min-width: 104px; height: 34px; }
  #workspace-product-menu { position:fixed;top:54px;left:8px;width:min(326px,calc(100vw - 16px)); }
  #workspace-controls { order: 3; flex: 1 1 100%; margin: 0; }
  #workspace-controls #workspace-select { flex:1 1 140px;width:auto; }
  #workspace-new { font-size:0; width:36px; min-width:36px; padding:0; }
  #workspace-new::before { content:"＋";font-size:16px; }
  #workspace-mode-tabs { order: 5; width: 100%; min-height: 36px; height:36px; justify-content:flex-start; overflow-x:auto; }
  #workspace-mode-tabs button { flex:none;min-height:28px;height:28px; }
  #topbar-actions { order: 4; }
}

[data-theme="light"] #topbar {
  border-color: rgba(20,27,42,.14);
  background: linear-gradient(105deg,rgba(251,252,254,.98),rgba(242,244,249,.98));
  box-shadow: 0 14px 38px rgba(28,35,50,.12), inset 0 1px #fff;
}
[data-theme="light"] #workspace-product-trigger,
[data-theme="light"] #workspace-mode-tabs,
[data-theme="light"] #workspace-controls :is(#workspace-select,#workspace-name),
[data-theme="light"] #workspace-controls .icon-btn,
[data-theme="light"] #workspace-manage > summary,
[data-theme="light"] #topbar-actions .icon-btn { border-color:rgba(20,27,42,.13);background:rgba(20,27,42,.025);color:#252936; }
[data-theme="light"] #workspace-product-menu { background:linear-gradient(145deg,#fff,#f3f4f8);color:#252936;box-shadow:0 24px 60px rgba(23,29,43,.2); }
[data-theme="light"] #workspace-product-menu button { color:#353947; }
[data-theme="light"] body #workspace-product-switcher #workspace-product-menu button[aria-checked="true"] {
  border-color:rgba(77,104,187,.24)!important;
  background:linear-gradient(105deg,rgba(70,196,207,.10),rgba(126,90,213,.11))!important;
  color:#202431!important;
}
[data-theme="light"] .workspace-product-copy small { color:#747987; }

/* Complete Floating Ribbon architecture ------------------------------------
   Product, workflow, and workspace controls are three distinct navigation
   islands. This section intentionally outranks the older product-specific
   header rules so LumeQuant does not fall back to the legacy flat tab strip. */
body #topbar {
  display: grid;
  grid-template-columns: max-content max-content minmax(300px,1fr) max-content;
  grid-template-rows: 56px;
  height: 68px;
  min-height: 68px;
  padding: 5px 9px;
  gap: 10px;
  align-items: center;
  isolation: isolate;
  border-radius: 17px;
  background:
    radial-gradient(520px 130px at 43% -65%,rgba(82,218,229,.08),transparent 70%),
    radial-gradient(460px 150px at 92% -80%,rgba(145,87,240,.12),transparent 72%),
    linear-gradient(110deg,rgba(19,21,25,.99),rgba(8,9,12,.995) 55%,rgba(17,13,23,.99));
  box-shadow:0 18px 54px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.045);
}
body #topbar::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-1px 17% auto;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(91,222,232,.30),rgba(153,105,255,.30),transparent);
  filter:drop-shadow(0 0 7px rgba(103,199,236,.18));
  pointer-events:none;
}
body #brand {
  grid-column:1;
  display:flex;
  min-width:134px;
  height:46px;
  align-items:center;
  padding:0 7px 0 4px;
  border-right:1px solid rgba(255,255,255,.065);
}
body #brand-logo-mark {width:25px;height:25px;flex-basis:25px;}
body #brand-logo {width:96px;height:25px;}
body #workspace-product-switcher {grid-column:2;align-self:center;}
body #workspace-product-trigger {
  min-width:128px;
  height:42px;
  padding-inline:12px;
  border-radius:12px;
  background:linear-gradient(145deg,rgba(255,255,255,.038),rgba(255,255,255,.012));
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}

body #workspace-mode-tabs,
body.product-quant #workspace-mode-tabs {
  position:relative;
  grid-column:3;
  display:flex!important;
  justify-self:center;
  width:auto;
  max-width:100%;
  height:46px;
  min-height:46px;
  align-items:center;
  justify-content:center;
  gap:4px;
  margin:0;
  padding:4px;
  overflow:visible;
  border:1px solid rgba(255,255,255,.085);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 10px 30px rgba(0,0,0,.20);
  transform:none;
}
@media(min-width:1051px) {
  body #workspace-mode-tabs {
    position:absolute;
    top:50%;
    left:50%;
    right:auto;
    grid-column:auto;
    justify-self:auto;
    transform:translate(-50%,-50%);
  }
}

/* Charts already has its active product in the product switcher, while Alerts
   and Code remain available from the chart-side rail. Keep the workflow island
   for Quant and Discover only so chart workspaces gain the full center gutter. */
html body.product-charts #workspace-mode-tabs {display:none!important;}

/* The compact backtester and full viewer use Vela's single-row review chrome.
   Ordinary charting keeps the richer Lume workspace ribbon; the condensed
   state is entered only by explicitly expanding the backtest surface. */
@media(min-width:1051px) {
  html body.product-charts:is(.chart-backtest-expanded,.pine-results-focus) #topbar {
    grid-template-columns:max-content max-content minmax(0,1fr) max-content!important;
    grid-template-rows:42px!important;
    height:46px!important;min-height:46px!important;max-height:46px!important;
    padding:2px 9px!important;
  }
  html body.product-charts:is(.chart-backtest-expanded,.pine-results-focus) #workspace-mode-tabs {
    display:none!important;
  }
}

/* One parent-to-child contract for every product. Older product sheets assign
   their own header dimensions, positioning and even hide the Charts workflow
   island. The ribbon must resolve to the same structure in every product. */
@media(min-width:1051px) {
  html body #topbar {
    display:grid!important;
    box-sizing:border-box!important;
    grid-template-columns:max-content max-content minmax(300px,1fr) max-content!important;
    grid-template-rows:56px!important;
    column-gap:12px!important;
    row-gap:0!important;
    height:68px!important;
    min-height:68px!important;
    max-height:68px!important;
    padding:5px 9px!important;
    align-items:center!important;
    align-content:center!important;
  }
  html body #topbar > #brand,
  html body #topbar > #workspace-product-switcher,
  html body #topbar > #workspace-mode-tabs,
  html body #topbar > #workspace-controls,
  html body #topbar > #topbar-actions {
    align-self:center!important;
    margin-top:auto!important;
    margin-bottom:auto!important;
  }
  html body:is(.product-charts,.product-quant,.product-discover) #workspace-mode-tabs {
    display:flex!important;
  }
  html body #workspace-mode-tabs,
  html body #workspace-controls {
    align-items:center!important;
    align-content:center!important;
  }
  html body #workspace-mode-tabs > button,
  html body #workspace-controls > * {
    align-self:center!important;
    margin-top:auto!important;
    margin-bottom:auto!important;
  }
}

/* Every visible top-level container shares the same physical box. This keeps
   the brand divider and product capsule aligned edge-for-edge, rather than
   merely giving them approximately the same mathematical center. */
@media(min-width:1051px) {
  body #brand,
  body #workspace-product-switcher,
  body #workspace-product-trigger,
  body #workspace-mode-tabs,
  body #workspace-controls {
    box-sizing:border-box!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    align-self:center!important;
    margin-block:0!important;
  }
  body #brand {
    width:136px!important;
    min-width:136px!important;
    max-width:136px!important;
  }
  body #workspace-product-switcher {
    display:flex!important;
    width:128px!important;
    min-width:128px!important;
    max-width:128px!important;
    align-items:center!important;
  }
  body #workspace-product-trigger {
    width:128px!important;
    min-width:128px!important;
    max-width:128px!important;
  }
  body #workspace-controls {padding:3px;}
  .workspace-picker-shell {height:38px;}
  body #workspace-controls .workspace-picker-shell #workspace-select {height:38px;padding-top:14px;padding-bottom:2px;}
  .workspace-picker-kicker {top:4px;}
  .workspace-picker-status {top:16px;}
  body #workspace-controls .icon-btn,
  body #workspace-manage>summary {height:38px;min-height:38px;}
}
.workspace-mode-rail {
  position:absolute;
  z-index:0;
  inset:4px;
  border-radius:10px;
  background:linear-gradient(90deg,rgba(47,208,220,.015),transparent 38%,rgba(139,83,230,.025));
  pointer-events:none;
}
body #workspace-mode-tabs button,
body.product-quant #workspace-mode-tabs button {
  position:relative;
  z-index:1;
  display:flex!important;
  width:auto;
  min-width:104px;
  height:36px;
  min-height:36px;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  border:1px solid transparent;
  border-radius:10px;
  color:#818692;
  background:transparent;
  box-shadow:none;
  font-size:10.5px;
  font-weight:680;
  letter-spacing:.005em;
}
body #workspace-mode-tabs button[hidden],
body.product-quant #workspace-mode-tabs button[hidden] {display:none!important;}
body #workspace-mode-tabs button:hover,
body #workspace-mode-tabs button:focus-visible,
body.product-quant #workspace-mode-tabs button:hover,
body.product-quant #workspace-mode-tabs button:focus-visible {
  outline:0;
  border-color:rgba(132,119,229,.27);
  color:#e9ebf1;
  background:linear-gradient(135deg,rgba(66,207,219,.065),rgba(133,82,224,.085));
  box-shadow:0 0 17px rgba(106,103,231,.08),inset 0 1px rgba(255,255,255,.025);
}
body #workspace-mode-tabs button[aria-selected="true"],
body.product-quant #workspace-mode-tabs button[aria-selected="true"] {
  color:#fbfcff;
  border-color:rgba(126,151,245,.38);
  background:
    radial-gradient(90px 36px at 12% 10%,rgba(67,220,229,.14),transparent 78%),
    linear-gradient(135deg,rgba(47,57,70,.90),rgba(36,28,54,.90));
  box-shadow:0 0 0 1px rgba(255,255,255,.018),0 0 19px rgba(75,208,225,.09),0 0 24px rgba(137,82,229,.09),inset 0 1px rgba(255,255,255,.06);
}
body #workspace-mode-tabs button[aria-selected="true"]::after,
body.product-quant #workspace-mode-tabs button[aria-selected="true"]::after {display:none;}

.workspace-mode-icon {
  position:relative;
  display:grid;
  width:16px;
  height:16px;
  flex:none;
  place-items:center;
  color:#777e8c;
  font:650 13px/1 ui-sans-serif,system-ui,sans-serif;
  transition:color .16s ease,filter .16s ease;
}
#workspace-mode-tabs button:is(:hover,:focus-visible,[aria-selected="true"]) .workspace-mode-icon {
  color:#80dce7;
  filter:drop-shadow(0 0 5px rgba(88,213,229,.28));
}
.workspace-icon-grid::before {content:"";width:11px;height:11px;border:1.5px solid currentColor;border-radius:3px;box-shadow:inset 5px 0 transparent;}
.workspace-icon-grid::after {content:"";position:absolute;width:1px;height:9px;background:currentColor;box-shadow:4px 0 currentColor;transform:translateX(-2px);opacity:.75;}
.workspace-icon-spark::before {content:"✦";font-size:15px;}
.workspace-icon-analysis::before {content:"";width:12px;height:11px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;border-radius:0 0 0 2px;background:linear-gradient(to top right,transparent 44%,currentColor 46% 54%,transparent 56%);}
.workspace-icon-alert::before {content:"◌";font-size:16px;}
.workspace-icon-code::before {content:"{ }";font-size:11px;letter-spacing:-2px;}
.workspace-icon-library::before {content:"▤";font-size:15px;}
.workspace-icon-tools::before {content:"◇";font-size:16px;}
.workspace-icon-ideas::before {content:"✧";font-size:16px;}

body #workspace-controls,
body.product-quant #workspace-controls {
  grid-column:4;
  display:flex;
  justify-self:end;
  align-items:center;
  gap:5px;
  margin:0;
  padding:3px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012));
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.workspace-picker-shell {
  position:relative;
  width:205px;
  height:44px;
  flex:none;
}
.workspace-picker-kicker {
  position:absolute;
  z-index:2;
  top:6px;
  left:29px;
  color:#646a77;
  font-size:7.5px;
  font-weight:780;
  letter-spacing:.105em;
  line-height:1;
  text-transform:uppercase;
  pointer-events:none;
}
.workspace-picker-status {
  position:absolute;
  z-index:2;
  top:20px;
  left:12px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--ribbon-cyan),#78efbe);
  box-shadow:0 0 8px rgba(87,224,233,.42);
  pointer-events:none;
}
body #workspace-controls .workspace-picker-shell #workspace-select {
  width:100%;
  height:44px;
  margin:0;
  padding:16px 30px 3px 28px;
  border-color:transparent;
  border-radius:11px;
  color:#e7e9ef;
  background:rgba(255,255,255,.014);
  font-size:10.5px;
  font-weight:640;
  text-overflow:ellipsis;
}
body #workspace-controls .workspace-picker-shell #workspace-select:hover,
body #workspace-controls .workspace-picker-shell #workspace-select:focus {
  border-color:rgba(128,139,232,.30);
  background:linear-gradient(135deg,rgba(59,201,213,.045),rgba(132,80,222,.065));
}
body #workspace-controls .icon-btn,
body #workspace-manage>summary {
  display:flex;
  width:40px;
  min-width:40px;
  height:40px;
  min-height:40px;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:0;
  padding:0;
  border-color:transparent;
  border-radius:10px;
  color:#8b909b;
  background:transparent;
}
body #workspace-controls #workspace-new {
  width:auto;
  min-width:116px;
  padding:0 12px;
  border-color:rgba(255,255,255,.07);
  background:rgba(255,255,255,.018);
  color:#c8cad1;
  font-size:10px;
  font-weight:680;
}
.workspace-control-icon {position:relative;display:block;width:15px;height:15px;flex:none;color:currentColor;}
.workspace-rename-icon::before {content:"";position:absolute;left:3px;top:1px;width:4px;height:12px;border:1.5px solid currentColor;border-radius:2px;transform:rotate(42deg);}
.workspace-rename-icon::after {content:"";position:absolute;left:1px;bottom:0;width:6px;height:1.5px;background:currentColor;transform:rotate(-7deg);}
.workspace-new-icon::before,.workspace-new-icon::after {content:"";position:absolute;left:7px;top:2px;width:1.5px;height:12px;border-radius:2px;background:currentColor;}
.workspace-new-icon::after {transform:rotate(90deg);}
.workspace-more-icon::before {content:"";position:absolute;top:6px;left:1px;width:3px;height:3px;border-radius:50%;background:currentColor;box-shadow:5px 0 currentColor,10px 0 currentColor;}
body #workspace-status {
  position:absolute;
  right:12px;
  bottom:-18px;
  display:block;
  max-width:220px;
  padding:3px 8px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.065);
  border-radius:7px;
  color:#777d89;
  background:rgba(9,10,13,.92);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  font-size:8px;
  text-overflow:ellipsis;
  white-space:nowrap;
  pointer-events:none;
}
body #workspace-status:empty {display:none;}
body #workspace-manage-menu #workspace-recovery {
  position:static;
  display:grid;
  gap:6px;
  width:100%;
  margin:12px 0 4px;
  padding:10px;
  border:1px solid rgba(241,197,120,.18);
  border-radius:9px;
  background:rgba(87,62,18,.12);
}
body #workspace-manage-menu #workspace-recovery[hidden] {display:none;}
body #workspace-manage-menu #workspace-recovery>strong {
  margin:0 0 2px;
  color:#efca82;
  font-size:10px;
  letter-spacing:.05em;
  text-transform:uppercase;
}
body #workspace-controls #workspace-manage-menu #workspace-recovery>button,
body #workspace-controls #workspace-manage-menu #workspace-recovery-more>summary {
  width:100%;
  min-width:0;
  height:auto;
  min-height:32px;
  justify-content:flex-start;
  padding:7px 9px;
  text-align:left;
}
body #workspace-manage-menu #workspace-recovery-more {width:100%;}
body #workspace-manage-menu #workspace-recovery-menu {
  position:static;
  width:100%;
  margin-top:5px;
  box-shadow:none;
}
body #workspace-manage:has(#workspace-recovery:not([hidden]))>summary {
  color:#efca82;
  background:rgba(87,62,18,.22);
}

@media(max-width:1320px) {
  body #topbar {grid-template-columns:max-content max-content minmax(270px,1fr) max-content;gap:7px;}
  body #brand {min-width:125px;}
  body #workspace-product-trigger {min-width:112px;}
  body #workspace-mode-tabs button,body.product-quant #workspace-mode-tabs button {min-width:88px;padding-inline:10px;gap:6px;}
  .workspace-picker-shell {width:170px;}
  body #workspace-controls #workspace-new {min-width:40px;width:40px;padding:0;}
  body #workspace-controls #workspace-new>span:last-child {display:none;}
  body #workspace-status {display:none;}
}

@media(max-width:1050px) {
  body #topbar {
    grid-template-columns:max-content max-content 1fr max-content;
    grid-template-rows:48px 46px;
    height:108px;
    min-height:108px;
    align-content:center;
  }
  body #brand {grid-column:1;grid-row:1;height:42px;}
  body #workspace-product-switcher {grid-column:2;grid-row:1;}
  body #workspace-controls,body.product-quant #workspace-controls {grid-column:4;grid-row:1;}
  body #workspace-mode-tabs,body.product-quant #workspace-mode-tabs {grid-column:1/-1;grid-row:2;width:100%;justify-self:stretch;}
}

@media(max-width:720px) {
  body #topbar {
    display:grid;
    grid-template-columns:max-content 1fr;
    grid-template-rows:42px 44px 44px;
    width:calc(100% - 12px);
    height:142px;
    min-height:142px;
    margin:6px;
    padding:5px 7px;
    border-radius:14px;
  }
  body #brand {grid-column:1;grid-row:1;min-width:27px;height:36px;padding-left:2px;}
  body #brand-logo {display:none;}
  body #workspace-product-switcher {grid-column:2;grid-row:1;justify-self:start;}
  body #workspace-product-trigger {height:36px;min-width:112px;}
  body #workspace-controls,body.product-quant #workspace-controls {grid-column:1/-1;grid-row:2;width:100%;justify-self:stretch;}
  .workspace-picker-shell {width:auto;flex:1;}
  body #workspace-mode-tabs,body.product-quant #workspace-mode-tabs {grid-column:1/-1;grid-row:3;height:40px;min-height:40px;justify-content:flex-start;overflow-x:auto;}
  body #workspace-mode-tabs button,body.product-quant #workspace-mode-tabs button {min-width:max-content;height:32px;min-height:32px;padding-inline:11px;}
  #workspace-product-menu {top:50px;}
}

[data-theme="light"] .workspace-picker-kicker {color:#777d89;}
[data-theme="light"] body #workspace-controls .workspace-picker-shell #workspace-select {color:#222630;background:rgba(20,27,42,.02);}

/* Final rendered geometry. These declarations are intentionally important:
   older product styles assign their own fixed tab heights and otherwise make
   the middle and right islands touch the ribbon edges. */
@media(min-width:1051px) {
  body #workspace-product-trigger,
  body #workspace-mode-tabs,
  body #workspace-controls {
    box-sizing:border-box!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    align-self:center!important;
    margin-block:0!important;
  }
  body #workspace-mode-tabs {padding:3px!important;}
  body #workspace-mode-tabs button {
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
  }
  body #workspace-controls {padding:3px!important;}
  .workspace-picker-shell {height:34px!important;}
  body #workspace-controls .workspace-picker-shell #workspace-select {
    height:34px!important;
    min-height:34px!important;
    padding-top:12px!important;
    padding-bottom:1px!important;
  }
  .workspace-picker-kicker {top:3px;}
  .workspace-picker-status {top:14px;}
  body #workspace-controls .icon-btn,
  body #workspace-manage>summary {
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
  }
}

/* Optical horizontal centering: center the workflow island in the real gap
   between the product cluster and workspace dock. Viewport centering leaves
   visibly unequal gutters because the workspace dock is wider. */
@media(min-width:1051px) {
  body #workspace-mode-tabs {
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    grid-column:3!important;
    justify-self:center!important;
    transform:none!important;
  }
}

/* Remove the now-empty workflow row after the general responsive ribbon
   rules above have expanded it for products that still use mode tabs. */
@media(max-width:1050px) {
  html body.product-charts #topbar {
    grid-template-rows:56px;
    height:68px;
    min-height:68px;
  }
}

@media(max-width:720px) {
  html body.product-charts #topbar {
    grid-template-rows:42px 44px;
    height:98px;
    min-height:98px;
  }
}