/* Every tool's title bar in Chat's (owner, 2026-10-30: "the tool bar in chat needs to be consisetent across the entire
   site"; Chat's header and composer are the standard). Request 644.

   Chat's header (public/chat-layout.js buildHeader, chat-layout.css): a 63 px bar on the top surface with a hairline
   under it; on the left an icon, the title (16 px, weight 500) and a muted meta line under it (12 px); on the right
   34 px round buttons (the close ✕, an outlined ⋯) and flat pills. No gloss, no gradients, no shadows; every colour is a
   token from public/saryos-standard.css (--ss-*, Dark by default, Light under html.light-mode only, the plain white page).

   Looks and arrangement only: every button, id, class and listener is the tool's own and stays where its code expects
   it. Nothing here sets a button's display, so whatever a tool hides (by class, attribute or mode) stays hidden.
   The prefix carries five id weights and !important: the tools paint their bars with id-weighted rules and the Create
   interface (portal-create.css) and the Portal (portal.css) outrank those again. */

/* ======================================================================= the bar */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) :is(
  #liveloop-container .liveloop-header,
  #code-canvas-container .canvas-header,
  .cl-header,
  .bs-head,
  #saryos-dashboard .sd-head,
  .it-card > .it-head,
  .music-studio-header,
  .mp-header,
  #ntts-header,
  .pod-setup-header,
  .wa-builder-header,
  .dl-head,
  .ast-top,
  .cs-head,
  #ind-tool-social-overlay .ss-head,
  .vc2-head
) {
  min-height: 63px !important; box-sizing: border-box !important; align-items: center !important;
  padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 15px !important; padding-right: 15px !important;
  margin: 0 !important; column-gap: 8px !important;
  background: var(--ss-surface-top) !important; background-image: none !important; background-color: var(--ss-surface-top) !important;
  border: 0 !important; border-bottom: 1px solid var(--ss-border) !important; border-radius: 0 !important;
  box-shadow: none !important; color: var(--ss-text) !important; font-family: var(--ss-font) !important;
  backdrop-filter: var(--ss-surface-blur, none) !important; -webkit-backdrop-filter: var(--ss-surface-blur, none) !important;
}

/* ===================================================================== titles */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) :is(
  #liveloop-container .liveloop-title strong,
  .cl-header .cl-project-name,
  .bs-head .bs-title,
  #saryos-dashboard .sd-head .sd-title,
  .it-card > .it-head .it-title h2,
  .music-studio-header-copy h3,
  .mp-header .mp-brand h2,
  #ntts-header h2,
  .pod-setup-header .pod-setup-title,
  .wa-builder-header > div:not([class]) > strong,
  .dl-head .dl-brand-name,
  .cs-head .cs-title,
  #ind-tool-social-overlay .ss-head .ss-brand-name,
  .vc2-head .vc2-title
) {
  margin: 0 !important; font: 500 16px/1.3 var(--ss-font) !important; letter-spacing: -.3px !important; text-transform: none !important;
  color: var(--ss-text) !important; -webkit-text-fill-color: currentColor !important; background: none !important; text-shadow: none !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
}

/* ================================================================== meta lines */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) :is(
  #liveloop-container .liveloop-title small,
  .cl-header .cl-title-status,
  .bs-head .bs-by,
  .bs-head .bs-status,
  .it-card > .it-head .it-title p,
  .music-studio-header-copy p,
  .mp-header .mp-brand p,
  .pod-setup-header .pod-powered,
  #ntts-header .ntts-limit-badge,
  .wa-builder-header > div:not([class]) > span,
  .dl-head .dl-brand-by,
  .ast-top .ast-status,
  .cs-head .cs-by,
  #ind-tool-social-overlay .ss-head .ss-brand-by,
  .vc2-head .vc2-kicker
) {
  margin: 0 !important; padding: 0 !important; font: 400 12px/1.3 var(--ss-font) !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--ss-muted) !important; -webkit-text-fill-color: currentColor !important; background: none !important; border: 0 !important; opacity: 1 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
}

/* ============================================ the mark on the left (Chat's panel button's place) */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) :is(
  .it-card > .it-head .it-mark,
  .mp-header .mp-brand-mark,
  .wa-builder-header .wa-brand-mark
) {
  width: 34px !important; height: 34px !important; min-width: 34px !important; flex: 0 0 34px !important; padding: 0 !important; margin: 0 !important;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50% !important;
  background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important;
  color: var(--ss-muted) !important; font-size: 15px !important;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) :is(
  .it-card > .it-head .it-mark i,
  .mp-header .mp-brand-mark i,
  .wa-builder-header .wa-brand-mark i,
  #liveloop-container .liveloop-title > i,
  .cl-header .cl-title > i,
  .bs-head .bs-mark i,
  .ast-top > i,
  .music-studio-header-copy h3 > i,
  #ntts-header h2 > i,
  #ind-tool-social-overlay .ss-head .ss-brand-name > i
) {
  color: var(--ss-muted) !important; -webkit-text-fill-color: currentColor !important; background: none !important; font-size: 15px !important;
  text-shadow: none !important; filter: none !important;
}

/* ===================================================================== pills
   Text buttons: Chat's .ss-pill (34 px, 1 px border, transparent, muted 12 px). */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) :is(
  #liveloop-container .liveloop-header :is(.liveloop-tools > button, #liveloop-project-tools > button, .liveloop-report-anchor > button, .liveloop-more-wrap > button, #liveloop-project-name, #liveloop-save, #liveloop-close-btn, .liveloop-quick-btn, #liveloop-report-btn),
  #code-canvas-container .canvas-header :is(.canvas-tool-btn, .toggle-btn, .diagram-download-btn),
  .cl-header .cl-btn,
  .coding-lab-ai-head #coding-lab-cost-mode,
  .bs-head .bs-btn,
  .mp-header .mp-button,
  .dl-head :is(.dl-btn, .dl-app-btn),
  .ast-top :is(.ast-btn:not(.icon), .ast-field select),
  .cs-head .cs-btn,
  .it-card > .it-head .it-badge,
  .wa-builder-header .wa-model-badge
) {
  height: 34px !important; min-height: 0 !important; max-height: none !important; min-width: 0 !important; padding: 0 12px !important; margin: 0 !important; gap: 6px !important;
  align-items: center; justify-content: center; box-sizing: border-box !important;
  border: 1px solid var(--ss-border) !important; border-radius: 999px !important;
  background: transparent !important; background-image: none !important; background-color: transparent !important;
  color: var(--ss-muted) !important; -webkit-text-fill-color: currentColor !important; font: 400 12px/1 var(--ss-font) !important; letter-spacing: 0 !important; text-transform: none !important;
  box-shadow: none !important; text-shadow: none !important; filter: none !important; animation: none !important; transform: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; white-space: nowrap;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) :is(
  #liveloop-container .liveloop-header :is(.liveloop-tools > button, #liveloop-project-tools > button, .liveloop-report-anchor > button, .liveloop-more-wrap > button, #liveloop-project-name, #liveloop-save, #liveloop-close-btn, .liveloop-quick-btn, #liveloop-report-btn),
  #code-canvas-container .canvas-header :is(.canvas-tool-btn, .toggle-btn, .diagram-download-btn),
  .cl-header .cl-btn,
  .coding-lab-ai-head #coding-lab-cost-mode,
  .bs-head .bs-btn,
  .mp-header .mp-button,
  .dl-head :is(.dl-btn, .dl-app-btn),
  .ast-top :is(.ast-btn:not(.icon), .ast-field select),
  .cs-head .cs-btn
):not(:disabled):hover {
  background: var(--ss-card) !important; background-color: var(--ss-card) !important; color: var(--ss-text) !important; border-color: var(--ss-border) !important;
}
/* Chosen: a mode, a toggle that is on. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh2):is(*, #sh2) :is(
  #liveloop-container .liveloop-header :is(.liveloop-tools > button, .liveloop-report-anchor > button),
  #code-canvas-container .canvas-header :is(.canvas-tool-btn, .toggle-btn),
  .cl-header .cl-btn,
  .bs-head .bs-btn,
  .dl-head :is(.dl-btn, .dl-app-btn),
  .ast-top .ast-btn,
  .cs-head .cs-btn
):is([aria-pressed="true"], [aria-expanded="true"], [aria-selected="true"], .active, .is-on, .is-active, .on) {
  border-color: var(--ss-text) !important; background: var(--ss-card) !important; background-color: var(--ss-card) !important; color: var(--ss-text) !important;
}
/* The one filled action a bar may have (Run in Code Lab, Save in Sary-OS Code, Export in StudioLab, Add audio): Chat's
   .ss-primary, white on Dark and black on Light. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh2):is(*, #sh2) :is(
  #code-canvas-container .canvas-header .canvas-tool-btn.primary,
  .cl-header .cl-btn.primary,
  .ast-top .ast-btn.primary,
  .mp-header .mp-button.mp-button-primary
) {
  background: var(--ss-button) !important; background-color: var(--ss-button) !important; color: var(--ss-button-text) !important; border-color: transparent !important; font-weight: 500 !important;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh2):is(*, #sh2) :is(
  #code-canvas-container .canvas-header .canvas-tool-btn.primary,
  .cl-header .cl-btn.primary,
  .ast-top .ast-btn.primary,
  .mp-header .mp-button.mp-button-primary
):not(:disabled):hover { background: var(--ss-button) !important; color: var(--ss-button-text) !important; opacity: .88; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh2):is(*, #sh2) :is(
  #liveloop-container .liveloop-header button,
  #code-canvas-container .canvas-header button,
  .cl-header button, .bs-head button, .mp-header button, .dl-head button, .ast-top :is(button, .ast-btn), .cs-head button,
  #saryos-dashboard .sd-head button, .it-card > .it-head button, #ntts-header button, #ind-tool-social-overlay .ss-head button
) :is(i, svg, span, strong, b) {
  color: inherit !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; filter: none !important;
}

/* ================================================================ icon buttons
   Icon-only: Chat's .ss-icon-btn, a 34 px circle, no border; the close ✕ is one of these. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh2):is(*, #sh2) :is(
  #liveloop-container .liveloop-header #liveloop-mic-btn,
  #code-canvas-container .canvas-header :is(#close-canvas-btn, .diagram-download-btn),
  .cl-header :is(.cl-icon-btn, .cl-close),
  .coding-lab-ai-head #coding-lab-detach,
  .bs-head .bs-btn[data-close],
  #saryos-dashboard .sd-head .sd-close,
  .it-card > .it-head .it-close,
  .mp-header .mp-icon-button,
  #ntts-header #notepad-tts-close,
  .dl-head .dl-close,
  .ast-top .ast-btn.icon,
  .cs-head .cs-btn:has(> .fa-xmark):not(:has(> span)),
  #ind-tool-social-overlay .ss-head .ss-close,
  .music-studio-shell > .music-studio-close
) {
  width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 0 !important; max-width: 34px !important; padding: 0 !important; margin: 0 !important;
  align-items: center; justify-content: center; flex: 0 0 34px !important; box-sizing: border-box !important;
  border: 0 !important; border-radius: 50% !important; background: transparent !important; background-image: none !important; background-color: transparent !important;
  color: var(--ss-muted) !important; -webkit-text-fill-color: currentColor !important; font: 400 14px/1 var(--ss-font) !important;
  box-shadow: none !important; text-shadow: none !important; filter: none !important; animation: none !important; transform: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh2):is(*, #sh2) :is(
  #liveloop-container .liveloop-header #liveloop-mic-btn,
  #code-canvas-container .canvas-header :is(#close-canvas-btn, .diagram-download-btn),
  .cl-header :is(.cl-icon-btn, .cl-close),
  .coding-lab-ai-head #coding-lab-detach,
  .bs-head .bs-btn[data-close],
  #saryos-dashboard .sd-head .sd-close,
  .it-card > .it-head .it-close,
  .mp-header .mp-icon-button,
  #ntts-header #notepad-tts-close,
  .dl-head .dl-close,
  .ast-top .ast-btn.icon,
  .cs-head .cs-btn:has(> .fa-xmark):not(:has(> span)),
  #ind-tool-social-overlay .ss-head .ss-close,
  .music-studio-shell > .music-studio-close
):not(:disabled):hover { background: var(--ss-card) !important; color: var(--ss-text) !important; }
/* The close sits last on the right, after a ring-less row, as Chat's does. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh2):is(*, #sh2) :is(#close-canvas-btn, .cl-header .cl-close, .bs-head .bs-btn[data-close], .dl-head .dl-close) { margin-left: 2px !important; }

/* ============================================================ per tool: layout
   Title over meta, as Chat's: where a tool's name and its line ("by Sary-OS", the status) are siblings, the block that
   holds them becomes a two-row grid; the tool's own icon stands where Chat's panel button does. */
/* ---- LiveLoop (both modes: Project mode's tools live in the same header). The header holds two rows (a test pins
   that); each keeps its own wrap, only the bar around them changes. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #liveloop-container .liveloop-header {
  padding-top: 12px !important; padding-bottom: 10px !important; row-gap: 8px !important;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #liveloop-container .liveloop-header :is(.liveloop-header-row1, .liveloop-header-row2) { column-gap: 6px !important; row-gap: 8px !important; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #liveloop-container .liveloop-title {
  display: inline-grid !important; grid-template-columns: 34px auto; grid-template-rows: auto auto; column-gap: 6px; row-gap: 1px; align-items: center;
  font: 500 16px/1.3 var(--ss-font) !important; color: var(--ss-text) !important; margin-right: 6px;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #liveloop-container .liveloop-title > i { grid-row: 1 / span 2; grid-column: 1; justify-self: center; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #liveloop-container .liveloop-title > strong { grid-row: 1; grid-column: 2; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #liveloop-container .liveloop-title > small { grid-row: 2; grid-column: 2; margin-left: 0 !important; }
/* The mode switch: one outlined pill holding two; the chosen mode is filled (owner, 2026-10-16: "make it different
   colour when selected"), in the standard's filled colour. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #liveloop-container .liveloop-mode {
  height: 34px !important; padding: 2px !important; gap: 2px !important; box-sizing: border-box !important; align-items: center;
  border: 1px solid var(--ss-border) !important; border-radius: 999px !important; background: transparent !important; background-image: none !important; box-shadow: none !important;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #liveloop-container .liveloop-mode > button {
  height: 28px !important; min-height: 0 !important; padding: 0 12px !important; border: 0 !important; border-radius: 999px !important;
  background: transparent !important; background-image: none !important; color: var(--ss-muted) !important; -webkit-text-fill-color: currentColor !important;
  font: 400 12px/1 var(--ss-font) !important; box-shadow: none !important; text-shadow: none !important; filter: none !important;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #liveloop-container .liveloop-mode > button:hover { color: var(--ss-text) !important; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #liveloop-container .liveloop-mode > button[aria-pressed="true"] {
  background: var(--ss-button) !important; color: var(--ss-button-text) !important; font-weight: 500 !important;
}
/* Status chips (context, plan, recording clock, proof): quiet outlined pills. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #liveloop-container .liveloop-header :is(#liveloop-context, #liveloop-plan, #liveloop-proof, #liveloop-rec, #liveloop-effort) {
  min-height: 0 !important; height: 34px !important; box-sizing: border-box !important; padding: 0 12px !important; border: 1px solid var(--ss-border) !important; border-radius: 999px !important;
  background: transparent !important; background-image: none !important; box-shadow: none !important; color: var(--ss-muted) !important; font: 400 12px/1 var(--ss-font) !important;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #liveloop-container .liveloop-header #liveloop-project-name { color: var(--ss-text) !important; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #liveloop-container .liveloop-header #liveloop-project-name i { font-size: 10px !important; color: var(--ss-faint) !important; }

/* The stage zoom (inserted at run time by ensureLiveLoopZoomControl): one outlined pill, − and + as small circles. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #liveloop-container .liveloop-header #liveloop-zoom {
  height: 34px !important; min-height: 0 !important; box-sizing: border-box !important; padding: 0 4px !important; gap: 4px !important; align-items: center !important;
  border: 1px solid var(--ss-border) !important; border-radius: 999px !important; background: transparent !important; background-image: none !important; box-shadow: none !important;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #liveloop-container .liveloop-header #liveloop-zoom > button {
  height: 26px !important; min-height: 0 !important; min-width: 26px !important; padding: 0 8px !important; border: 0 !important; border-radius: 999px !important;
  background: transparent !important; background-image: none !important; box-shadow: none !important; color: var(--ss-muted) !important; -webkit-text-fill-color: currentColor !important;
  font: 400 12px/1 var(--ss-font) !important; text-transform: none !important; letter-spacing: 0 !important; filter: none !important;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #liveloop-container .liveloop-header #liveloop-zoom > button:hover { background: var(--ss-card) !important; color: var(--ss-text) !important; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #liveloop-container .liveloop-header #liveloop-zoom .zoom-value { color: var(--ss-muted) !important; font: 400 12px/1 var(--ss-font) !important; }

/* ---- Code Lab and Canvas (#code-canvas-container): the name and "by Sary-OS" are the label's ::before and ::after
   (portal.css); stacked, they are the title and the meta line. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #code-canvas-container .canvas-header #canvas-title-label {
  flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 1px !important; padding-left: 6px !important;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #code-canvas-container .canvas-header #canvas-title-label::before {
  font: 500 16px/1.3 var(--ss-font) !important; letter-spacing: -.3px !important; text-transform: none !important; color: var(--ss-text) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #code-canvas-container .canvas-header #canvas-title-label::after {
  font: 400 12px/1.3 var(--ss-font) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ss-muted) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #code-canvas-container .canvas-header .canvas-header-actions { gap: 6px !important; align-items: center !important; }
/* The code search: one outlined pill with its buttons as small circles. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #code-canvas-container .canvas-header #coding-lab-search {
  height: 34px !important; min-height: 0 !important; box-sizing: border-box !important; padding: 0 4px 0 12px !important; gap: 4px !important;
  border: 1px solid var(--ss-border) !important; border-radius: 999px !important; background: transparent !important; background-image: none !important; box-shadow: none !important; color: var(--ss-muted) !important;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #code-canvas-container .canvas-header #coding-lab-search input {
  height: 30px !important; min-height: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--ss-text) !important; font: 400 12px var(--ss-font) !important; padding: 0 4px !important;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #code-canvas-container .canvas-header #coding-lab-search :is(#coding-lab-search-count) { color: var(--ss-faint) !important; font: 400 11px var(--ss-font) !important; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #code-canvas-container .canvas-header #coding-lab-search button {
  width: 26px !important; height: 26px !important; min-height: 0 !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
  background: transparent !important; background-image: none !important; box-shadow: none !important; color: var(--ss-muted) !important; font-size: 12px !important;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #code-canvas-container .canvas-header #coding-lab-search button:hover { background: var(--ss-card) !important; color: var(--ss-text) !important; }

/* ---- Sary-OS Code (Project Lab, .cl-header): icon, the project's name over its status and "by Sary-OS". */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .cl-header .cl-title {
  display: grid !important; grid-template-columns: 34px auto auto; grid-template-rows: auto auto; column-gap: 6px !important; row-gap: 1px !important; align-items: center !important; justify-content: start;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .cl-header .cl-title > i {
  grid-row: 1 / span 2; grid-column: 1; justify-self: center; width: auto !important; height: auto !important; padding: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .cl-header .cl-title > .cl-project-name { grid-row: 1; grid-column: 2; padding: 0 !important; border: 0 !important; height: auto !important; min-height: 0 !important; box-shadow: none !important; cursor: pointer; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .cl-header .cl-title > .cl-project-rename { grid-row: 1; grid-column: 3; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .cl-header .cl-title > .cl-title-status { grid-row: 2; grid-column: 2 / span 2; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .cl-header .cl-title > .cl-title-status::after { content: ' · by Sary-OS'; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .cl-header .cl-title::after { content: none !important; display: none !important; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .cl-header .cl-actions { gap: 6px !important; align-items: center !important; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .cl-header .cl-sep { width: 1px !important; height: 20px !important; background: var(--ss-border) !important; margin: 0 4px !important; }

/* ---- Dashboard: the section's name is the title. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #saryos-dashboard .sd-head { padding-left: 21px !important; }

/* ---- The tool briefs (.it-head: Game Engine, Presentations, Cover letter and every other brief built on it). */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .it-card > .it-head .it-title { min-width: 0; flex: 1 1 auto; padding-left: 0; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .it-card > .it-head .it-title p { margin-top: 1px !important; }

/* ---- Music Player, Web Architect's brief: a brand block of mark and two lines. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .mp-header .mp-brand { gap: 6px !important; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .mp-header .mp-header-actions { gap: 6px !important; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .wa-builder-header > div:not([class]) { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }

/* ---- Voiceover: the name and its credit badge share the h2. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #ntts-header { display: flex; justify-content: space-between; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #ntts-header h2 {
  display: inline-grid !important; grid-template-columns: 34px auto; grid-template-rows: auto auto; column-gap: 6px; row-gap: 1px; align-items: center; overflow: visible;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #ntts-header h2 > i { grid-row: 1 / span 2; grid-column: 1; justify-self: center; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #ntts-header h2 > .ntts-limit-badge { grid-row: 2; grid-column: 2; }

/* ---- DocLab: name over "by Sary-OS"; the four apps a row of pills; the document's title and save state left as
   they are (an input the person types in). */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .dl-head .dl-brand { display: inline-flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 1px !important; padding-left: 6px; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .dl-head :is(.dl-apps, .dl-head-actions) { gap: 6px !important; align-items: center !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .dl-head .dl-savestate { color: var(--ss-muted) !important; font: 400 12px var(--ss-font) !important; }

/* ---- StudioLab: name and project over its status line. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .ast-top { gap: 6px !important; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .ast-top .ast-projname { color: var(--ss-text) !important; font: 400 13px/1.3 var(--ss-font) !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 4px !important; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .ast-top .ast-free-render { color: var(--ss-muted) !important; font: 400 12px var(--ss-font) !important; background: none !important; border: 0 !important; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .ast-top .ast-field { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }

/* ---- Image and Video Generation: the kicker ("Make a video") under the title, as the meta line. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .vc2-head > div:first-child { display: flex !important; flex-direction: column-reverse !important; gap: 1px !important; min-width: 0; padding-left: 6px; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .vc2-head .vc2-model-picker > span { color: var(--ss-muted) !important; font: 400 12px var(--ss-font) !important; text-transform: none !important; letter-spacing: 0 !important; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .vc2-head .vc2-model {
  height: 34px !important; min-height: 0 !important; padding: 0 30px 0 12px !important; border: 1px solid var(--ss-border) !important; border-radius: 999px !important;
  background-color: transparent !important; box-shadow: none !important; color: var(--ss-text) !important; font: 400 12px var(--ss-font) !important;
}

/* ---- Vision, Social: name over "by Sary-OS" (Vision's sit side by side as siblings, so the bar wraps them). */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #ind-tool-social-overlay .ss-head .ss-brand { display: inline-flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 1px !important; padding-left: 6px; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .cs-head { gap: 6px !important; }

/* ---- Podcast: the setup's title over its line. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .pod-setup-header > div { display: flex; flex-direction: column; gap: 1px; padding-left: 6px; }

/* ---- Music Studio */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .music-studio-header { justify-content: flex-start !important; text-align: left !important; padding-right: 64px !important; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .music-studio-header-copy { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 1px !important; padding-left: 6px; text-align: left !important; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .music-studio-header-copy h3 { display: inline-flex !important; align-items: center; gap: 10px; }

/* ---- Phone and narrow: the bar keeps 63 px and its 34 px controls; text pills that cannot fit wrap to a second line
   inside the bar rather than shrink below the standard. */
@media (max-width: 900px) {
  :root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) :is(.cl-header, .bs-head, .dl-head, .ast-top, .cs-head) { flex-wrap: wrap; padding-top: 8px !important; padding-bottom: 8px !important; row-gap: 6px !important; }
}

/* Badges are text, not buttons: centred in their pill. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh2) :is(.it-card > .it-head .it-badge, .wa-builder-header .wa-model-badge):not([hidden]) {
  display: inline-flex !important; align-items: center !important; flex: 0 0 auto;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .cl-header .cl-title > .cl-project-name:not(:focus-visible) { outline: 0 !important; }

/* The Portal's own close for a docked tool that has none (#portal-tool-close, portal.js): Chat's round ✕, flat, on the
   tool's top surface. Its place and when it shows stay the Portal's. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #portal-tool-close {
  width: 34px !important; height: 34px !important; padding: 0 !important; border: 1px solid var(--ss-border) !important; border-radius: 50% !important;
  background: var(--ss-surface-top) !important; background-image: none !important; color: var(--ss-muted) !important; -webkit-text-fill-color: currentColor !important;
  font: 400 18px/1 var(--ss-font) !important; box-shadow: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #portal-tool-close:hover { background: var(--ss-card) !important; color: var(--ss-text) !important; }

/* DocLab: each app is one pill (icon beside its name), and the document's name an outlined field. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .dl-head .dl-app-btn { flex-direction: row !important; text-decoration: none !important; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .dl-head .dl-app-btn * { text-decoration: none !important; font-size: 12px !important; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .dl-head input.dl-title {
  height: 34px !important; min-height: 0 !important; box-sizing: border-box !important; padding: 0 14px !important; border: 1px solid var(--ss-border) !important; border-radius: 999px !important;
  background: transparent !important; background-image: none !important; box-shadow: none !important; color: var(--ss-text) !important; font: 400 13px var(--ss-font) !important;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .dl-head input.dl-title:focus { border-color: var(--ss-muted) !important; outline: 0 !important; }

/* StudioLab's name is its label's ::before (portal.css, the element's own text at size 0); "by Sary-OS" under it. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #asksary-studio .ast-top .ast-brand { flex-direction: column !important; align-items: flex-start !important; gap: 1px !important; padding-left: 4px; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #asksary-studio .ast-top .ast-brand::before {
  font: 500 16px/1.3 var(--ss-font) !important; letter-spacing: -.3px !important; color: var(--ss-text) !important; -webkit-text-fill-color: currentColor !important;
}
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) #asksary-studio .ast-top .ast-brand::after {
  content: 'by Sary-OS' !important; display: block !important; font: 400 12px/1.3 var(--ss-font) !important; letter-spacing: 0 !important; color: var(--ss-muted) !important; -webkit-text-fill-color: currentColor !important;
}

/* Image and Video Generation: the model picker's label beside its select; room on the right for the Portal's ✕. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .vc2-head { padding-right: 64px !important; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) .vc2-head .vc2-model-picker:not([hidden]) { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; margin: 0 !important; }
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh2):is(*, #sh2) #ind-tool-social-overlay .ss-head .ss-close { margin-left: auto !important; }
/* Bars under the Portal's own ✕ keep its corner free. */
:root:root:root:root:root:root body:is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh):is(*, #sh) :is(.wa-builder-header, .pod-setup-header) { padding-right: 64px !important; }