/* Sary-OS's file manager: one layout for every place that manages files (owner, 2026-10-30: "use the same file manager
   layout across the whole site where it has a file manager such as in files, code lab, liveloop project assets etc";
   chose a new one in the new Chat template's style, used everywhere including Files). Request 644.

   Chat's folder browser (public/chat-layout.css, .chl-folder-browser) is the model: flat, no gloss, gradients or
   shadows on controls, 1px lines, round pills and round 34px icon buttons, small Arial text, two panes (places and
   folders with counts on the left, the items on the right), muted sizes and dates, colours from the --ss-* tokens of
   public/saryos-standard.css (Dark by default, Light under html.light-mode only, thin surfaces under
   Translucent).

   The shared vocabulary, for any file manager built from now on:
     .sf-manager          the whole manager (a grid: .sf-toolbar on top, .sf-body below)
     .sf-toolbar          the row of tools: .sf-title, .sf-search, .sf-views (two .ss-pill or .ss-icon-btn), then
                          New folder (.ss-secondary) and Upload (.ss-primary)
     .sf-body             the two panes: .sf-side (places and folders) and .sf-main (path and items)
     .sf-side-title       a small heading in the left pane; .sf-place a place or folder row; .sf-count its count
     .sf-path             where you are: links (button) and › separators, the current folder in <b>
     .sf-list / .sf-grid  the items as rows or tiles; .sf-row and .sf-tile, each with .sf-icon, .sf-name, .sf-meta
     .is-on               the open place or the chosen view; .is-selected a ticked item; .sf-drop a drop target
     .sf-empty            what an empty folder says

   The managers that were already on the site keep their own markup, ids, classes and handlers (open, rename, delete,
   move, upload, download, drag, quotas, the Drive's LiveLoop-row filter): the sections below put each one in this
   look by its existing selectors, so nothing a person uses is removed or rebound.
     1. the vocabulary          5. LiveLoop: a project's files (Project mode)
     2. Files (Sary-OS Drive)   6. LiveLoop: Assets
     3. LiveLoop: Projects      7. Code Lab: the file tree and Cloud projects
     4. LiveLoop: the expanded  8. StudioLab, CreativeLab and DocLab: Drive projects
        file manager

   Selectors carry three id weights and !important: the themes, the glass skin (liquid-glass.css, two ids) and the
   tools' own runtime style tags paint these surfaces with forced rules. Headers and title bars are left to
   public/saryos-headers.css. */

/* The finder rows (finder-list.css) take the same colours. */
:root:root { --finder-hover: var(--ss-card); --finder-active: var(--ss-card); --finder-accent: var(--ss-text); --finder-text: var(--ss-text); --finder-muted: var(--ss-muted); --finder-heading: var(--ss-muted); }
:root:root.light-mode { --finder-hover: var(--ss-card); --finder-active: var(--ss-card); --finder-accent: var(--ss-text); --finder-text: var(--ss-text); --finder-muted: var(--ss-muted); --finder-heading: var(--ss-muted); }

/* =========================================================== 1. the vocabulary */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sf-manager {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--ss-surface-bg) !important; color: var(--ss-text) !important;
  border: 1px solid var(--ss-border) !important; border-radius: 12px !important; font: 13px/1.4 var(--ss-font) !important; box-shadow: none !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sf-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px 10px 16px; flex-shrink: 0;
  background: var(--ss-surface-top) !important; border-bottom: 1px solid var(--ss-border) !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sf-title { margin: 0 auto 0 0; color: var(--ss-text) !important; font: 500 15px/1.3 var(--ss-font) !important; white-space: nowrap; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sf-views { display: inline-flex; gap: 4px; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sf-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sf-side { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 12px; background: var(--ss-surface-side) !important; border-right: 1px solid var(--ss-border) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sf-main { min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sf-list { display: flex; flex-direction: column; gap: 1px; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; align-content: start; }

/* Search fields and sort menus: one round field. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(
  .sf-search, #visual-lib-overlay #lib-search-input, #visual-lib-overlay #lib-date-sort, .llfm .llfm-search, .llfm .llfm-sort,
  #code-lab-overlay .cl-search
) {
  height: var(--ss-pill-h) !important; min-height: 0 !important; box-sizing: border-box; padding: 0 14px !important; border: 1px solid var(--ss-border) !important; border-radius: 999px !important;
  background: transparent !important; background-image: none !important; color: var(--ss-text) !important; -webkit-text-fill-color: currentColor !important;
  font: 12px var(--ss-font) !important; box-shadow: none !important; outline: 0; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(.sf-search, #visual-lib-overlay #lib-search-input, .llfm .llfm-search, #code-lab-overlay #cl-filter)::placeholder { color: var(--ss-faint) !important; -webkit-text-fill-color: var(--ss-faint) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(.sf-search, #visual-lib-overlay #lib-search-input, .llfm .llfm-search):focus { border-color: var(--ss-muted) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(#visual-lib-overlay #lib-date-sort, .llfm .llfm-sort) { padding-right: 28px !important; cursor: pointer; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(#visual-lib-overlay #lib-date-sort, .llfm .llfm-sort) option { background: var(--ss-side); color: var(--ss-text); }

/* A place or folder in the left pane, and an item row on the right: Chat's browser rows. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(
  .sf-place, .sf-row,
  #visual-lib-overlay .gallery-sidebar .v-tab, #visual-lib-overlay .gallery-sidebar .gallery-folder-row,
  .llfm .llfm-place, .llfm .llfm-node-name,
  #liveloop-files-manager .liveloop-workspace-row,
  #liveloop-project-files-view .ll-files-list :is(.ll-files-file, .ll-files-folder),
  #code-lab-overlay #cl-tree :is(.cl-file, .cl-dir-row)
) {
  display: flex !important; align-items: center !important; gap: 8px !important; width: 100% !important; min-height: 0 !important; box-sizing: border-box;
  margin: 0 !important; padding-top: 7px !important; padding-bottom: 7px !important; padding-right: 8px !important; border: 0 !important; border-radius: var(--ss-radius-row) !important;
  background: transparent !important; background-image: none !important; box-shadow: none !important; transform: none !important; filter: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: var(--ss-muted) !important; -webkit-text-fill-color: currentColor !important;
  font: 12px/1.3 var(--ss-font) !important; letter-spacing: 0 !important; text-transform: none !important; text-align: left !important; justify-content: flex-start !important;
  text-shadow: none !important; cursor: pointer; transition: none;
}
/* Rows that indent by depth carry their own padding-left inline (the Drive's nested folders, a project's tree). */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(
  .sf-place, .sf-row,
  #visual-lib-overlay .gallery-sidebar .v-tab, #visual-lib-overlay .gallery-sidebar .gallery-folder-row,
  .llfm .llfm-place, .llfm .llfm-node-name,
  #liveloop-files-manager .liveloop-workspace-row,
  #liveloop-project-files-view .ll-files-list :is(.ll-files-file, .ll-files-folder),
  #code-lab-overlay #cl-tree :is(.cl-file, .cl-dir-row)
):not([style*="padding-left"]) { padding-left: 8px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(
  .sf-place, .sf-row,
  #visual-lib-overlay .gallery-sidebar .v-tab, #visual-lib-overlay .gallery-sidebar .gallery-folder-row,
  .llfm .llfm-place, .llfm .llfm-node-name,
  #liveloop-files-manager .liveloop-workspace-row,
  #liveloop-project-files-view .ll-files-list :is(.ll-files-file, .ll-files-folder),
  #code-lab-overlay #cl-tree :is(.cl-file, .cl-dir-row)
) :is(span, b, strong) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit !important; -webkit-text-fill-color: currentColor !important; font-weight: 400 !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(
  .sf-place, .sf-row,
  #visual-lib-overlay .gallery-sidebar .v-tab, #visual-lib-overlay .gallery-sidebar .gallery-folder-row,
  .llfm .llfm-place, .llfm .llfm-node-name,
  #liveloop-files-manager .liveloop-workspace-row,
  #liveloop-project-files-view .ll-files-list :is(.ll-files-file, .ll-files-folder),
  #code-lab-overlay #cl-tree :is(.cl-file, .cl-dir-row)
) > i:not(.cl-caret) { width: 16px !important; flex: 0 0 16px !important; text-align: center; font-size: 13px !important; color: currentColor !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(
  .sf-place, .sf-row,
  #visual-lib-overlay .gallery-sidebar .v-tab, #visual-lib-overlay .gallery-sidebar .gallery-folder-row,
  .llfm .llfm-place, .llfm .llfm-node-name,
  #liveloop-files-manager .liveloop-workspace-row,
  #liveloop-project-files-view .ll-files-list :is(.ll-files-file, .ll-files-folder),
  #code-lab-overlay #cl-tree :is(.cl-file, .cl-dir-row)
):is(:hover, .is-on, .active, .is-selected, [aria-pressed="true"], [aria-expanded="true"]),
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-node.is-on .llfm-node-name {
  background: var(--ss-card) !important; color: var(--ss-text) !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(
  .sf-place, #visual-lib-overlay .gallery-sidebar :is(.v-tab, .gallery-folder-row), .llfm .llfm-place, .llfm .llfm-node-name
):is(.is-on, .active), :root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-node.is-on .llfm-node-name { font-weight: 600 !important; }
/* Counts and sizes beside a row: muted, never a badge. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(
  .sf-count, #visual-lib-overlay .gallery-sidebar :is(.v-tab-count, .folder-count), .llfm :is(.llfm-place, .llfm-node-name) small,
  #liveloop-project-files-view .ll-files-list :is(.ll-files-file, .ll-files-folder) small, #liveloop-files-manager .liveloop-workspace-row small
) {
  margin-left: auto !important; flex: 0 0 auto; min-width: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; color: var(--ss-faint) !important; -webkit-text-fill-color: currentColor !important; font: 11px var(--ss-font) !important; box-shadow: none !important;
}
/* Small headings inside a pane. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(
  .sf-side-title, #visual-lib-overlay .gallery-folder-head, .llfm .llfm-side-head, #liveloop-files-manager .liveloop-files-section
) {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 4px 6px 8px !important; color: var(--ss-muted) !important;
  -webkit-text-fill-color: currentColor !important; font: 12px/1.3 var(--ss-font) !important; text-transform: none !important; letter-spacing: 0 !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(.sf-side-title, .llfm .llfm-side-head) b { font-weight: 400; color: inherit !important; }
/* Round, quiet icon buttons in the panes (New folder, folder actions, a row's ⋯). */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(
  #visual-lib-overlay button.gallery-folder-add, #visual-lib-overlay button.gallery-folder-action, .llfm .llfm-icon,
  #liveloop-files-manager .liveloop-workspace-state-actions button, #code-lab-overlay .cl-saved-project-action
) {
  width: 28px !important; min-width: 28px !important; max-width: 28px !important; height: 28px !important; min-height: 0 !important; max-height: 28px !important; flex: 0 0 28px !important;
  display: inline-grid !important; place-items: center !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important;
  background: transparent !important; background-image: none !important; color: var(--ss-muted) !important; -webkit-text-fill-color: currentColor !important;
  box-shadow: none !important; outline: 0; filter: none !important; font-size: 12px !important; cursor: pointer;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(
  #visual-lib-overlay button.gallery-folder-add, #visual-lib-overlay button.gallery-folder-action, .llfm .llfm-icon,
  #liveloop-files-manager .liveloop-workspace-state-actions button, #code-lab-overlay .cl-saved-project-action
):is(:hover, :focus-visible) { background: var(--ss-card) !important; color: var(--ss-text) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(
  #visual-lib-overlay button.gallery-folder-action, #liveloop-files-manager .liveloop-workspace-state-actions button, #code-lab-overlay .cl-saved-project-action
):is(.delete, .danger):hover { color: var(--ss-danger) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(
  #visual-lib-overlay button.gallery-folder-add, #visual-lib-overlay button.gallery-folder-action, .llfm .llfm-icon,
  #liveloop-files-manager .liveloop-workspace-state-actions button, #code-lab-overlay .cl-saved-project-action
) i { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
/* Pills: actions in a toolbar that are not the main one. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(
  #visual-lib-overlay :is(#lib-selection-bar .bar-btn, .gallery-signed-out-actions .bar-btn), #visual-lib-overlay #gallery-drive-cancel, #visual-lib-overlay #flux-pick-cancel,
  .llfm .llfm-btn, #liveloop-files-manager :is(.llfm-expand, .liveloop-files-actions button, footer button, .liveloop-zip-bar button, .liveloop-bulk-all),
  #liveloop-project-files-view .ll-files-tool, #ll-assets :is(.lla-btn:not(.lla-primary), .lla-quiet)
) {
  display: inline-flex !important; align-items: center !important; justify-content: center; gap: 6px !important; width: auto !important; height: 30px !important; min-height: 0 !important;
  padding: 0 12px !important; margin: 0 !important; border: 1px solid var(--ss-border) !important; border-radius: 999px !important; background: transparent !important; background-image: none !important;
  color: var(--ss-text) !important; -webkit-text-fill-color: currentColor !important; font: 12px/1 var(--ss-font) !important; letter-spacing: 0 !important; text-transform: none !important;
  box-shadow: none !important; filter: none !important; text-shadow: none !important; white-space: nowrap; cursor: pointer; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(
  #visual-lib-overlay :is(#lib-selection-bar .bar-btn, .gallery-signed-out-actions .bar-btn), #visual-lib-overlay #gallery-drive-cancel, #visual-lib-overlay #flux-pick-cancel,
  .llfm .llfm-btn, #liveloop-files-manager :is(.llfm-expand, .liveloop-files-actions button, footer button, .liveloop-zip-bar button, .liveloop-bulk-all),
  #liveloop-project-files-view .ll-files-tool, #ll-assets :is(.lla-btn:not(.lla-primary), .lla-quiet)
):not(:disabled):hover,
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager :is(.llfm-expand, #liveloop-files-select)[aria-pressed="true"] { background: var(--ss-card) !important; border-color: var(--ss-text) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(
  #visual-lib-overlay #lib-selection-bar .bar-btn, .llfm .llfm-btn, #liveloop-files-manager :is(.liveloop-files-actions button, footer button, .liveloop-zip-bar button), #liveloop-project-files-view .ll-files-tool, #ll-assets .lla-btn
) i { color: inherit !important; -webkit-text-fill-color: currentColor !important; font-size: 12px; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(
  #visual-lib-overlay #lib-selection-bar .bar-btn.delete, #visual-lib-overlay #gallery-drive-cancel, .llfm .llfm-danger, #liveloop-files-manager footer button.danger,
  #liveloop-project-files-view .ll-files-tool.danger, #ll-assets .lla-danger
) { color: var(--ss-danger) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(
  #visual-lib-overlay #lib-selection-bar .bar-btn, .llfm .llfm-btn, #liveloop-files-manager :is(.liveloop-files-actions button, footer button, .liveloop-zip-bar button), #liveloop-project-files-view .ll-files-tool, #ll-assets .lla-btn
):disabled { opacity: .4; cursor: default; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay #lib-selection-bar .bar-btn.icon-only { width: 30px !important; padding: 0 !important; border-radius: 50% !important; }
/* The main action: filled, white in Dark and black in Light. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(#visual-lib-overlay :is(#gallery-drive-upload, .gallery-signed-out-actions .gallery-drive-upload), #ll-assets .lla-primary, .sdp-scrim .sdp-btn.primary) {
  display: inline-flex !important; align-items: center !important; justify-content: center; gap: 8px !important; height: auto !important; min-height: 0 !important; padding: 9px 16px !important;
  border: 0 !important; border-radius: 999px !important; background: var(--ss-button) !important; background-image: none !important; color: var(--ss-button-text) !important;
  -webkit-text-fill-color: currentColor !important; font: 500 13px/1.2 var(--ss-font) !important; box-shadow: none !important; filter: none !important; text-shadow: none !important; cursor: pointer;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(#visual-lib-overlay :is(#gallery-drive-upload, .gallery-signed-out-actions .gallery-drive-upload), #ll-assets .lla-primary, .sdp-scrim .sdp-btn.primary):not(:disabled):hover { opacity: .88; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(#visual-lib-overlay :is(#gallery-drive-upload, .gallery-signed-out-actions .gallery-drive-upload), #ll-assets .lla-primary, .sdp-scrim .sdp-btn.primary) i { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
/* View toggles (list / grid): two round buttons, the chosen one outlined. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(#visual-lib-overlay .gallery-view-toggle, .llfm .llfm-seg) { display: inline-flex !important; gap: 4px; border: 0 !important; border-radius: 0 !important; overflow: visible !important; background: none !important; box-shadow: none !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(#visual-lib-overlay .gallery-view-toggle, .llfm .llfm-seg) button {
  width: var(--ss-pill-h) !important; height: var(--ss-pill-h) !important; min-height: 0 !important; padding: 0 !important; display: inline-grid !important; place-items: center;
  border: 1px solid transparent !important; border-radius: 50% !important; background: transparent !important; background-image: none !important; color: var(--ss-muted) !important;
  -webkit-text-fill-color: currentColor !important; box-shadow: none !important; filter: none !important; cursor: pointer;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(#visual-lib-overlay .gallery-view-toggle, .llfm .llfm-seg) button:hover { background: var(--ss-card) !important; color: var(--ss-text) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(#visual-lib-overlay .gallery-view-toggle button.active, .llfm .llfm-seg button[aria-pressed="true"]) { border-color: var(--ss-text) !important; background: var(--ss-card) !important; color: var(--ss-text) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(#visual-lib-overlay .gallery-view-toggle, .llfm .llfm-seg) button i { color: inherit !important; -webkit-text-fill-color: currentColor !important; font-size: 13px; }
/* Empty folders and quiet notes. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(
  .sf-empty, #visual-lib-overlay .gallery-folder-empty, .llfm :is(.llfm-empty, .llfm-muted, .llfm-hint), #liveloop-files-manager .liveloop-files-empty,
  #liveloop-project-files-view .ll-files-hint, #ll-assets .lla-empty, #code-lab-overlay .cl-saved-project-empty, .sdp-scrim .sdp-empty
) { color: var(--ss-muted) !important; -webkit-text-fill-color: currentColor !important; font: 12px/1.5 var(--ss-font) !important; background: none !important; border-color: var(--ss-border) !important; }
/* A drop target while something is dragged over it. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(
  .sf-drop, #visual-lib-overlay .gallery-folder-entry.drop-target, .llfm .is-over :is(.llfm-node-name), .llfm .llfm-place.is-over, .llfm .llfm-card.is-over,
  #liveloop-project-files-view .ll-files-list .drop, #ll-assets .lla-drop.is-over, #visual-lib-overlay .visual-modal.gallery-drive-drag-over
) { outline: 1px dashed var(--ss-muted) !important; outline-offset: -1px; background: var(--ss-card) !important; border-color: var(--ss-border) !important; box-shadow: none !important; }
/* Storage meters: a thin bar in the text colour. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(#visual-lib-overlay .gallery-drive-meter, #visual-lib-overlay .gallery-drive-progress-track, #liveloop-files-manager .liveloop-files-storage-track, #ll-assets .lla-bar) {
  height: 4px !important; border-radius: 999px !important; background: var(--ss-card) !important; box-shadow: none !important; overflow: hidden;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(#visual-lib-overlay .gallery-drive-meter span, #visual-lib-overlay .gallery-drive-progress-track span, #liveloop-files-manager .liveloop-files-storage-track i, #ll-assets .lla-bar i:not(.low):not(.out)) { background: var(--ss-text) !important; background-image: none !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) :is(#visual-lib-overlay .gallery-drive-summary.is-near-capacity .gallery-drive-meter span, #ll-assets .lla-bar i.out) { background: var(--ss-danger) !important; }

/* ===================================================== 2. Files (Sary-OS Drive)
   #visual-lib-overlay (script.js openVisualLibrary): Library and Folders & projects on the left, the toolbar and the
   items on the right. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .visual-modal {
  background: var(--ss-surface-bg) !important; background-image: none !important; border: 1px solid var(--ss-border) !important; box-shadow: none !important;
  color: var(--ss-text) !important; font-family: var(--ss-font) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay :is(.gallery-workspace, .gallery-content, .visual-grid) { background: transparent !important; background-image: none !important; box-shadow: none !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-workspace { grid-template-columns: 220px minmax(0, 1fr) !important; border-top: 1px solid var(--ss-border) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-sidebar {
  padding: 12px !important; background: var(--ss-surface-side) !important; background-image: none !important; border: 0 !important; border-right: 1px solid var(--ss-border) !important;
  box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-sidebar .visual-tabs {
  gap: 2px !important; padding: 0 0 8px !important; margin: 0 !important; background: transparent !important; background-image: none !important; border: 0 !important;
  border-bottom: 1px solid var(--ss-border) !important; border-radius: 0 !important; box-shadow: none !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-sidebar .visual-tabs::before { color: var(--ss-muted) !important; -webkit-text-fill-color: currentColor !important; font: 12px var(--ss-font) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 4px 6px 8px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-sidebar-resizer::after { background: var(--ss-border) !important; height: 2px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-sidebar-resizer:is(:hover, .is-dragging)::after { background: var(--ss-muted) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-folder-head > span { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-folder-entry { gap: 2px; border: 0 !important; border-radius: var(--ss-radius-row) !important; background: transparent !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-folder-actions { gap: 0 !important; padding-right: 2px !important; }
/* The toolbar row. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay #lib-filter-row {
  align-items: center !important; gap: 8px !important; padding: 10px 12px 10px 16px !important; background: var(--ss-surface-top) !important; background-image: none !important;
  border: 0 !important; border-bottom: 1px solid var(--ss-border) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay #lib-search-input { flex: 1 1 200px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay #lib-filter-row :is(#gallery-drive-upload, #gallery-drive-cancel) { height: var(--ss-pill-h) !important; padding: 0 16px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-drive-summary { color: var(--ss-muted) !important; font: 11px/1.3 var(--ss-font) !important; min-width: 170px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-drive-summary :is(.gallery-drive-usage, .gallery-drive-available) { color: inherit !important; -webkit-text-fill-color: currentColor !important; font: inherit !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-drive-summary .gallery-drive-usage { color: var(--ss-text) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-drive-progress { color: var(--ss-muted) !important; font: 11px var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-zoom {
  height: var(--ss-pill-h) !important; min-height: 0 !important; box-sizing: border-box; padding: 0 12px !important; border: 1px solid var(--ss-border) !important; border-radius: 999px !important;
  background: transparent !important; background-image: none !important; color: var(--ss-muted) !important; box-shadow: none !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-zoom i { color: inherit !important; -webkit-text-fill-color: currentColor !important; font-size: 11px; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-zoom input[type="range"] { accent-color: var(--ss-text); }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay :is(#gallery-search-index-status, #flux-pick-banner) {
  border: 1px solid var(--ss-border) !important; border-radius: 10px !important; background: var(--ss-card) !important; background-image: none !important; color: var(--ss-text) !important;
  font: 12px/1.4 var(--ss-font) !important; box-shadow: none !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay :is(#gallery-search-index-status, #flux-pick-banner) i { color: var(--ss-muted) !important; }
/* The selection bar: what is ticked, and what can be done with it. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay #lib-selection-bar {
  padding: 8px 12px 8px 16px !important; background: var(--ss-surface-top) !important; background-image: none !important; border: 0 !important; border-bottom: 1px solid var(--ss-border) !important;
  box-shadow: none !important; animation: none !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay #lib-selection-bar .info { color: var(--ss-text) !important; font: 12px var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay #lib-selection-bar .info i { color: var(--ss-text) !important; }
/* The items: tiles in the grid, rows in the list. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .visual-grid { padding: 16px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .visual-item {
  border: 1px solid var(--ss-border) !important; border-radius: 10px !important; background: var(--ss-card) !important; background-image: none !important;
  box-shadow: none !important; transform: none !important; transition: border-color .12s ease !important; color: var(--ss-text) !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .visual-item:hover { border-color: var(--ss-muted) !important; transform: none !important; box-shadow: none !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .visual-item.selected-item { border-color: var(--ss-text) !important; outline: 1px solid var(--ss-text); outline-offset: 0; transform: none !important; box-shadow: none !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .visual-selected-check { background: var(--ss-button) !important; color: var(--ss-button-text) !important; box-shadow: none !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .visual-selected-check i { color: var(--ss-button-text) !important; -webkit-text-fill-color: currentColor !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .visual-item :is(.doc-name) { color: var(--ss-text) !important; -webkit-text-fill-color: currentColor !important; font-family: var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .visual-item :is(.visual-date, .gallery-item-meta, .gallery-item-size) { color: var(--ss-muted) !important; -webkit-text-fill-color: currentColor !important; font-family: var(--ss-font) !important; font-weight: 400 !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .visual-item .doc-card-body > i { color: var(--ss-muted) !important; -webkit-text-fill-color: currentColor !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-number-badge { background: var(--ss-bg) !important; color: var(--ss-muted) !important; border-color: var(--ss-border) !important; backdrop-filter: none !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay :is(.visual-item:hover .gallery-number-badge, #visual-lib-grid.gallery-numbers-lit .gallery-number-badge) { background: var(--ss-button) !important; color: var(--ss-button-text) !important; border-color: var(--ss-button) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-audio-play { border: 1px solid var(--ss-border) !important; background: transparent !important; color: var(--ss-text) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-audio-play:hover { background: var(--ss-bg) !important; }
/* List view: Chat's browser rows, a small thumbnail, the name, then size and date in muted text. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .visual-grid.gallery-list { padding: 8px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .visual-grid.gallery-list .visual-item {
  height: 56px !important; min-height: 56px !important; margin: 0 0 1px !important; grid-template-columns: 56px minmax(0, 1fr) auto !important;
  border: 0 !important; outline: 0; border-radius: 8px !important; background: transparent !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .visual-grid.gallery-list .visual-item:hover { background: var(--ss-card) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .visual-grid.gallery-list .visual-item.selected-item { background: var(--ss-card) !important; box-shadow: inset 0 0 0 1px var(--ss-text) !important; outline: 0 !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .visual-grid.gallery-list .visual-item :is(img, video) { width: 44px !important; height: 44px !important; margin: 6px !important; border-radius: 6px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .visual-grid.gallery-list .visual-item .doc-card-body i { font-size: 18px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .visual-grid.gallery-list .visual-item :is(.doc-name, .gallery-thumb-caption) { color: var(--ss-text) !important; font: 13px/1.3 var(--ss-font) !important; text-shadow: none !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .visual-grid.gallery-list .visual-item .visual-heart-btn { top: 11px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .visual-grid.gallery-list .gallery-video-play { left: 28px !important; top: 28px !important; width: 30px !important; height: 30px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-signed-out > i { color: var(--ss-text) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-signed-out :is(strong) { color: var(--ss-text) !important; font-family: var(--ss-font) !important; font-weight: 500 !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-signed-out :is(p) { color: var(--ss-muted) !important; font-family: var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-knowledge-section { background: var(--ss-card) !important; border-color: var(--ss-border) !important; color: var(--ss-text) !important; box-shadow: none !important; }
/* Kept from the Drive's earlier skin in portal.css (2026-10-01), which this replaces: a hidden tab or upload button
   stays hidden, Knowledge Base shows only when unlocked, a folder's rename and delete come up on hover so its name
   keeps one line, and a narrow toolbar wraps instead of squeezing search. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay:is(*, #sf#sf#sf) :is(.v-tab, .gallery-drive-upload, .bar-btn)[hidden],
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay:is(*, #sf#sf#sf) .v-tab.kb-subscription-only:not(body.knowledge-base-unlocked *) { display: none !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-folder-entry { position: relative !important; display: flex !important; align-items: center !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-folder-entry > .gallery-folder-row { flex: 1 1 auto !important; min-width: 0 !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-folder-row > span:not(.folder-count) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-folder-actions {
  position: absolute !important; right: 4px; top: 50%; transform: translateY(-50%); display: flex !important; border-radius: 999px; background: var(--ss-card) !important;
  opacity: 0; pointer-events: none;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-folder-entry:is(:hover, :focus-within) .gallery-folder-actions { opacity: 1; pointer-events: auto; }
@media (max-width: 1180px) {
  :root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay #lib-filter-row { flex-wrap: wrap !important; overflow-x: visible !important; row-gap: 8px !important; }
  :root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay #lib-filter-row #lib-search-input { flex: 1 1 240px !important; min-width: 200px !important; }
  :root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay #lib-filter-row #lib-date-sort { min-width: 140px !important; flex: 0 0 auto !important; }
}
@media (max-width: 860px) {
  :root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #visual-lib-overlay .gallery-workspace { grid-template-columns: 180px minmax(0, 1fr) !important; }
}

/* ======================================================= 3. LiveLoop: Projects
   #liveloop-files-manager (app.html; script.js renders the list): storage, actions, the list of projects with their
   states, and the delete footer. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager {
  --fm-bg: var(--ss-side); --fm-soft: transparent; --fm-line: var(--ss-border); --fm-ink: var(--ss-text); --fm-dim: var(--ss-muted); --fm-accent: var(--ss-text); --fm-pick: var(--ss-card);
  background: var(--ss-side) !important; background-image: none !important; border: 1px solid var(--ss-border) !important; border-radius: 12px !important;
  box-shadow: 0 8px 40px #0006 !important; color: var(--ss-text) !important; font: 13px/1.4 var(--ss-font) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager .liveloop-files-storage { padding: 10px 16px !important; border-bottom: 1px solid var(--ss-border) !important; color: var(--ss-muted) !important; font: 12px var(--ss-font) !important; background: none !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager .liveloop-files-storage > i { color: var(--ss-muted) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager .liveloop-files-storage strong { color: var(--ss-text) !important; font-weight: 400 !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager .liveloop-files-actions { gap: 6px !important; padding: 10px 16px !important; border-bottom: 1px solid var(--ss-border) !important; background: var(--ss-top) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager .liveloop-files-note { padding: 10px 16px !important; background: none !important; color: var(--ss-muted) !important; font: 12px/1.5 var(--ss-font) !important; border-bottom: 1px solid var(--ss-border); }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager .liveloop-files-note i { color: inherit !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager .liveloop-files-list { padding: 8px 10px 12px !important; background: none !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager#liveloop-files-manager .liveloop-workspace-row { display: grid !important; grid-template-columns: auto 16px minmax(0, 1fr) auto; padding: 9px 10px !important; margin: 1px 0 !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager#liveloop-files-manager .liveloop-workspace-row:not(:has(.liveloop-bulk-check)) { grid-template-columns: 16px minmax(0, 1fr) auto; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager#liveloop-files-manager .liveloop-workspace-row span { color: var(--ss-text) !important; font-size: 13px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager .liveloop-workspace-states { margin: 0 0 6px 18px !important; padding-left: 10px !important; border-left: 1px solid var(--ss-border) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager .liveloop-workspace-state { border-bottom: 0 !important; padding: 0 !important; gap: 2px !important; border-radius: var(--ss-radius-row); }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager .liveloop-workspace-state:hover { background: var(--ss-card); }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager .liveloop-workspace-state-open {
  padding: 7px 8px !important; border: 0 !important; border-radius: var(--ss-radius-row) !important; background: transparent !important; background-image: none !important; box-shadow: none !important;
  color: var(--ss-muted) !important; -webkit-text-fill-color: currentColor !important; font: 12px var(--ss-font) !important; min-height: 0 !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager .liveloop-workspace-state-open:hover { color: var(--ss-text) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager .liveloop-workspace-state-open span { font: inherit !important; color: inherit !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager .liveloop-workspace-state-open small { color: var(--ss-faint) !important; font: 11px var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager .liveloop-bulk-check { accent-color: var(--ss-text) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager footer { gap: 8px !important; padding: 10px 16px !important; border-top: 1px solid var(--ss-border) !important; background: var(--ss-top) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager footer small, :root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager .liveloop-zip-bar small { color: var(--ss-faint) !important; font: 11px/1.4 var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager :is(footer button, .liveloop-files-actions button)[hidden] { display: none !important; }

/* ============================================ 4. LiveLoop: the expanded file manager
   .llfm (liveloop-file-manager.js): the folder tree on the left, the path, tools and projects on the right. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager .llfm { grid-template-columns: 220px minmax(0, 1fr) !important; border-top: 1px solid var(--ss-border) !important; color: var(--ss-text) !important; font: 13px/1.4 var(--ss-font) !important; background: var(--ss-surface-bg) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm i { color: currentColor !important; -webkit-text-fill-color: currentColor !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-side { padding: 12px !important; background: var(--ss-surface-side) !important; border-right: 1px solid var(--ss-border) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-caret { width: 20px !important; height: 20px !important; color: var(--ss-faint) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-main { padding: 0 !important; gap: 0 !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-top { gap: 8px !important; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--ss-border); background: var(--ss-surface-top); }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-tools { gap: 6px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-search { width: 200px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-crumbs { gap: 6px !important; font: 12px var(--ss-font) !important; color: var(--ss-muted) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-crumbs button { padding: 0 !important; color: var(--ss-muted) !important; font: inherit !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-crumbs button:hover { color: var(--ss-text) !important; text-decoration: underline; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-crumbs b { color: var(--ss-text) !important; font: 600 15px var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-picked { margin: 10px 16px 0; padding: 6px 8px 6px 14px !important; border: 1px solid var(--ss-border); border-radius: 999px !important; background: var(--ss-card) !important; font: 12px var(--ss-font); }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-picked b { font-weight: 400; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-items { padding: 12px 16px; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-items.llfm-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; gap: 10px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-hint { margin: 0 !important; padding: 8px 16px 14px !important; color: var(--ss-faint) !important; font-size: 11px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-card {
  gap: 4px !important; padding: 12px !important; border: 1px solid var(--ss-border) !important; border-radius: 10px !important; background: transparent !important; background-image: none !important;
  box-shadow: none !important; color: var(--ss-text) !important; font: 12px var(--ss-font) !important; min-height: 0 !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-card:hover { border-color: var(--ss-muted) !important; background: var(--ss-card) !important; box-shadow: none !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-card.is-picked { border-color: var(--ss-text) !important; background: var(--ss-card) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-card-icon { width: 30px !important; height: 30px !important; border-radius: 50% !important; background: var(--ss-card) !important; color: var(--ss-muted) !important; font-size: 13px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-card:hover .llfm-card-icon { background: var(--ss-bg) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-card-name { font: 600 13px var(--ss-font) !important; color: var(--ss-text) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-card small { color: var(--ss-muted) !important; font: 11px/1.4 var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-pick { accent-color: var(--ss-text) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-list { gap: 1px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-list .llfm-card { padding: 7px 10px !important; border: 0 !important; border-radius: var(--ss-radius-row) !important; gap: 10px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-list .llfm-card.is-picked { box-shadow: inset 0 0 0 1px var(--ss-text) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-list .llfm-card-icon { width: 24px !important; height: 24px !important; background: none !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-menu, :root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm-menu {
  padding: 6px !important; border: 1px solid var(--ss-border) !important; border-radius: var(--ss-radius-pop) !important; background: var(--ss-side) !important; background-image: none !important;
  box-shadow: 0 8px 25px #0003 !important; color: var(--ss-text) !important; font: 12px var(--ss-font) !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm-menu p { margin: 4px 6px 8px !important; color: var(--ss-muted) !important; font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm-menu button {
  gap: 10px !important; padding: 9px 10px !important; border: 0 !important; border-radius: var(--ss-radius-row) !important; background: none !important; background-image: none !important; box-shadow: none !important;
  color: var(--ss-text) !important; font: 13px/1.3 var(--ss-font) !important; min-height: 0 !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm-menu button:hover { background: var(--ss-card) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm-menu button i { color: var(--ss-muted) !important; width: 16px; text-align: center; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm-menu .llfm-danger, :root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm-menu .llfm-danger i { color: var(--ss-danger) !important; -webkit-text-fill-color: currentColor !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm-menu .llfm-menu-new { border-top: 1px solid var(--ss-border) !important; border-radius: 0 0 var(--ss-radius-row) var(--ss-radius-row) !important; }
@media (max-width: 760px) {
  :root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-files-manager .llfm { grid-template-columns: 1fr !important; }
  :root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .llfm .llfm-side { max-height: 160px; border-right: 0 !important; border-bottom: 1px solid var(--ss-border) !important; }
}

/* =========================================== 5. LiveLoop: a project's files (Project mode)
   #liveloop-project-files-view (script.js renderLiveLoopProjectFileManager): the tree on the left with its tools,
   the chosen file on the right. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-project-files-view { background: var(--ss-surface-bg) !important; color: var(--ss-text) !important; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-project-files-view .ll-files-list { padding: 12px !important; background: var(--ss-surface-side) !important; border-right: 1px solid var(--ss-border) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-project-files-view .ll-files-bar { gap: 6px !important; margin: 0 0 8px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-project-files-view#liveloop-project-files-view .ll-files-list :is(.ll-files-file, .ll-files-folder) span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-project-files-view#liveloop-project-files-view .ll-files-list .ll-files-folder.root span { font-family: var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #liveloop-project-files-view .ll-files-code { color: var(--ss-text) !important; background: transparent !important; padding: 16px !important; }

/* ================================================================ 6. LiveLoop: Assets
   #ll-assets (liveloop-asset-reports.js): a narrow side panel, so one column: the drop zone, then a row per asset
   with its thumbnail, name, size and state, then its actions. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets {
  background: var(--ss-side) !important; background-image: none !important; color: var(--ss-text) !important; border: 1px solid var(--ss-border) !important; border-radius: 12px !important;
  box-shadow: 0 8px 40px #0006 !important; font: 13px/1.4 var(--ss-font) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets .lla-meter-row { color: var(--ss-muted) !important; font-size: 12px; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets .lla-meter-row b { color: var(--ss-text) !important; font-weight: 400 !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets .lla-meter small { color: var(--ss-faint) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets .lla-body { padding: 12px !important; gap: 8px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets .lla-drop { border: 1px dashed var(--ss-border) !important; border-radius: 10px !important; background: transparent !important; color: var(--ss-muted) !important; font-size: 12px; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets .lla-drop strong { color: var(--ss-text) !important; font-weight: 500; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets .lla-card { border: 1px solid var(--ss-border) !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets .lla-card:hover { background: var(--ss-card) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets .lla-row { padding: 8px 10px !important; grid-template-columns: 36px minmax(0, 1fr) auto !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets .lla-thumb { width: 36px !important; height: 36px !important; border-radius: 6px !important; background-color: var(--ss-card) !important; color: var(--ss-muted) !important; font-size: 14px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets .lla-name { color: var(--ss-text) !important; font: 600 13px var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets .lla-sub { color: var(--ss-muted) !important; font-size: 11px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets .lla-chip { border: 1px solid var(--ss-border) !important; background: transparent !important; color: var(--ss-muted) !important; font: 11px var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets .lla-chip.c-ready { color: var(--ss-text) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets .lla-chip.c-fail { color: var(--ss-danger) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets .lla-actions { gap: 6px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets#ll-assets .lla-quiet { border-color: transparent !important; color: var(--ss-muted) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets#ll-assets .lla-primary { padding: 0 14px !important; height: 30px !important; font-size: 12px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets :is(.lla-section, details.lla-group > summary, details.lla-report summary, label.lla-inc) { color: var(--ss-muted) !important; font: 12px var(--ss-font) !important; text-transform: none !important; letter-spacing: 0 !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets details.lla-group > summary { color: var(--ss-text) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets details.lla-group > summary span { color: var(--ss-faint) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets details.lla-report { border-color: var(--ss-border) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets label.lla-inc input { accent-color: var(--ss-text) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets :is(textarea, .lla-rename) { background: var(--ss-bg) !important; color: var(--ss-text) !important; border-color: var(--ss-border) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets .lla-err { color: var(--ss-danger) !important; }

/* ============================================ 7. Code Lab: the file tree and Cloud projects
   tools/code-lab.js: the left column (filter, tree, meta) and the Cloud projects list on its welcome page. The title
   bar and the agent column are not file managers and are left alone. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay .cl-sidebar { padding: 12px 10px 0 !important; gap: 8px; background: var(--ss-surface-side) !important; background-image: none !important; border-right: 1px solid var(--ss-border) !important; box-shadow: none !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay#code-lab-overlay .cl-search { display: flex !important; align-items: center !important; gap: 8px !important; flex: 0 0 auto; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay .cl-search i { color: var(--ss-faint) !important; font-size: 11px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay #cl-filter { background: transparent !important; border: 0 !important; height: 100% !important; padding: 0 !important; color: var(--ss-text) !important; -webkit-text-fill-color: var(--ss-text) !important; caret-color: var(--ss-text) !important; font: 12px var(--ss-font) !important; box-shadow: none !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay#code-lab-overlay .cl-search:focus-within { border-color: var(--ss-muted) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay #cl-tree { padding: 0 !important; font: 12px var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay #cl-tree :is(.cl-file, .cl-dir-row) { padding: 5px 8px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay #cl-tree .cl-dir-row { color: var(--ss-text) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay #cl-tree .cl-file.active { font-weight: 600 !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay #cl-tree .cl-caret { color: var(--ss-faint) !important; width: 10px; flex: 0 0 10px; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay #cl-tree .cl-dot { color: var(--ss-text) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay #cl-tree .cl-file-tool { border-radius: 50% !important; color: inherit !important; background: transparent !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay #cl-tree .cl-file-tool:hover { background: var(--ss-bg) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay #cl-tree .cl-file-tool.danger:hover { color: var(--ss-danger) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay .cl-meta { margin: 0 -10px; padding: 8px 14px !important; border-top: 1px solid var(--ss-border) !important; color: var(--ss-faint) !important; font: 11px var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay .cl-saved-projects { padding: 12px !important; border: 1px solid var(--ss-border) !important; border-radius: 12px !important; background: var(--ss-surface-side) !important; box-shadow: none !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay .cl-saved-projects-head { color: var(--ss-text) !important; font: 500 13px var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay .cl-saved-projects-head b { font-weight: 500; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay .cl-saved-projects-head span { color: var(--ss-faint) !important; font: 11px var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay .cl-saved-project-list { gap: 1px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay .cl-saved-project { gap: 2px !important; border-radius: var(--ss-radius-row); padding-right: 4px; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay .cl-saved-project:hover { background: var(--ss-card); }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay .cl-saved-project-open {
  min-height: 0 !important; padding: 8px 10px !important; border: 0 !important; border-radius: var(--ss-radius-row) !important; background: transparent !important; background-image: none !important;
  box-shadow: none !important; color: var(--ss-text) !important; font: 12px var(--ss-font) !important; text-align: left;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay .cl-saved-project-open b { color: var(--ss-text) !important; font: 600 13px var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay .cl-saved-project-open small { color: var(--ss-muted) !important; font: 11px var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #code-lab-overlay .cl-saved-project-kind { color: var(--ss-muted) !important; }

/* ======================================== 8. StudioLab, CreativeLab and DocLab: Drive projects
   tools/drive-projects.js: the Open list (this app's folder, then elsewhere in Drive) and the name and choice
   dialogs. A short picker, so one column of rows with the same toolbar colours. */
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sdp-scrim { background: rgba(0, 0, 0, .5) !important; font: 13px/1.4 var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sdp-scrim .sdp-card {
  border: 1px solid var(--ss-border) !important; border-radius: 12px !important; background: var(--ss-side) !important; color: var(--ss-text) !important; box-shadow: 0 8px 40px #0006 !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sdp-scrim :is(.sdp-head, .sdp-foot) { border-color: var(--ss-border) !important; padding: 12px 12px 12px 16px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sdp-scrim .sdp-head strong { font: 600 15px var(--ss-font); color: var(--ss-text); }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sdp-scrim .sdp-sub { color: var(--ss-muted) !important; font-size: 12px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sdp-scrim .sdp-x {
  width: var(--ss-pill-h) !important; height: var(--ss-pill-h) !important; padding: 0 !important; display: inline-grid !important; place-items: center; border-radius: 50% !important;
  color: var(--ss-muted) !important; font-size: 20px !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sdp-scrim .sdp-x:hover { background: var(--ss-card) !important; color: var(--ss-text) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sdp-scrim .sdp-body { padding: 8px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sdp-scrim .sdp-section { margin: 10px 8px 6px !important; color: var(--ss-muted) !important; font: 12px var(--ss-font) !important; text-transform: none !important; letter-spacing: 0 !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sdp-scrim .sdp-row { padding: 8px 8px 8px 10px !important; border: 0 !important; border-radius: 8px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sdp-scrim .sdp-row:hover { background: var(--ss-card) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sdp-scrim .sdp-name { color: var(--ss-text) !important; font: 600 13px var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sdp-scrim .sdp-meta { color: var(--ss-muted) !important; font: 12px var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sdp-scrim .sdp-btn:not(.primary) {
  height: 30px !important; padding: 0 12px !important; border: 1px solid var(--ss-border) !important; border-radius: 999px !important; background: transparent !important;
  color: var(--ss-text) !important; font: 12px var(--ss-font) !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sdp-scrim .sdp-btn:not(.primary):hover { background: var(--ss-card) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sdp-scrim .sdp-btn.danger { color: var(--ss-danger) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sdp-scrim .sdp-acts:is(*, #sf#sf) .sdp-btn.primary { height: 30px !important; padding: 0 14px !important; font-size: 12px !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sdp-scrim .sdp-input { height: var(--ss-pill-h); padding: 0 14px !important; border: 1px solid var(--ss-border) !important; border-radius: 999px !important; background: transparent !important; color: var(--ss-text) !important; font: 13px var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) .sdp-scrim .sdp-input:focus { border-color: var(--ss-muted) !important; outline: 0; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets .lla-mode { border: 1px solid var(--ss-border) !important; background: transparent !important; color: var(--ss-muted) !important; font: 11px var(--ss-font) !important; }
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets .lla-x {
  width: var(--ss-pill-h) !important; height: var(--ss-pill-h) !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; color: var(--ss-muted) !important;
}
:root:root:root body:is(*, #sf):is(*, #sf):is(*, #sf) #ll-assets .lla-x:hover { background: var(--ss-card) !important; color: var(--ss-text) !important; }