/* Liquid glass (owner, 2026-09-29: "I want that effect as a liquid glass look
   to all panels as themes too, so dark mode, light mode and transparent mode
   (clear glass that has that particle diffusion flowing through it)").

   The look is AI Chat Vault's. Since 2026-10-01 it is the Mac app's Pro+
   skins exactly: Noir Platinum (Serenity) for Dark, Aurora on the Translucent glass for
   Light (see the palette below).

   liquid-glass.js sets two attributes on <html> from the choices the SaryOS
   menu already keeps:
     data-glass      = "dark" | "light"    (the theme the SaryOS menu chose)
     data-glass-mode = "solid" | "clear"   (Panels: Solid / Transparent)
   Surfaces, lines, rims, shadows, accents and the main buttons change here.
   Wallpapers, clips, the galaxy, the field and every tool's own layout are
   left alone.

   Other panels follow the skin by reading these variables with a fallback:
   --lg-panel --lg-card --lg-raised --lg-line --lg-line2 --lg-text --lg-muted
   --lg-accent --lg-a1 --lg-a2 --lg-a3 --lg-ink.

   Loaded after portal.css and portal-backdrops.css. Those use
   :root:root:root:root and !important against the themes, so the rules here
   carry one more weight ([data-glass]) on the same element. */

@property --lg-spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --lg-x { syntax: '<percentage>'; inherits: false; initial-value: 18%; }
@property --lg-y { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

/* ---- The palette ----
   AI Chat Vault's Pro / Pro+ looks, exactly (owner, 2026-10-01: "copy these skins
   exactly how they are for light and dark mode"), from the Mac app's
   main.swift (Tier.palette, WidgetTheme, ThemeBackground, AuroraBackdrop,
   DustField, ThemedProminentStyle, TierBadge):
     Dark  = Noir Platinum, the Serenity theme as Pro shows it (owner,
             2026-10-01: "change the black/gold one to the serenity theme
             one instead", over Noir Gold): Serenity Black (#050505 to #000),
             the platinum aurora (#E5E4E2, #8E9196, #FFFFFF) at 0.3 across
             the top, white dust.
     Light = Aurora: the Translucent glass (black 0.42 and a white sheen over
             what is behind), white letters, the aurora (#8B5CF6, #EC4899,
             #F59E0B) at 0.6 across the top. The owner chose screenshot 2 as
             it is, white letters included, so Light no longer uses
             html.light-mode's black letters (liquid-glass.js keeps the class
             off while the skin is on).
   --lg-ink is the letters on the tier gradient: black on platinum, white on
   the colourful look. --lg-aurora-strength is the shader's own strength. */
:root[data-glass="dark"] {
  --lg-bg: #000000; --lg-bg2: #050505;
  --lg-panel: rgba(17, 17, 17, .82); --lg-card: #111111; --lg-raised: rgba(255, 255, 255, .045);
  --lg-line: rgba(255, 255, 255, .10); --lg-line2: #303030;
  --lg-text: #f5f5f5; --lg-muted: #a3a3a3; --lg-dim: #737373;
  --lg-a1: #e5e4e2; --lg-a2: #8e9196; --lg-a3: #ffffff; --lg-accent: #e5e4e2; --lg-ink: #0a0a0a;
  --lg-edge: rgba(255, 255, 255, .08);
  --lg-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  --lg-aurora: 1; --lg-aurora-strength: .3; --lg-dust: 1;
  /* Opaque equivalents, for the solid shells and the one Portal line. */
  --lg-solid: #050505; --lg-solid-deep: #000000; --lg-solid-side: #0a0a0a; --lg-solid-stage: #000000;
  --lg-solid-line: #303030;
  --lg-bar: rgba(5, 5, 5, .94); --lg-menu: #0a0a0a; --lg-modal: rgba(10, 10, 10, .94);
  --lg-frame: linear-gradient(#050505, #000000);
  --lg-spec: rgba(255, 255, 255, .14); --lg-spec-soft: rgba(255, 255, 255, .04); --lg-spec-glow: rgba(255, 255, 255, .06); --lg-spec-sweep: rgba(255, 255, 255, .04);
  --lg-ctl: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03)); --lg-ctl-hover: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
  --lg-ctl-line: rgba(255, 255, 255, .12);
  --lg-ctl-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .4);
  --lg-bubble: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  --lg-bubble-user: linear-gradient(160deg, color-mix(in srgb, var(--lg-a1) 20%, transparent), color-mix(in srgb, var(--lg-a2) 14%, transparent));
  --lg-blur: blur(18px) saturate(1.4);
  --lg-tile-top: rgba(255, 255, 255, .05); --lg-tile-bottom: rgba(255, 255, 255, .01);
  color-scheme: dark;
}
:root[data-glass="light"] {
  --lg-bg: #4e5566; --lg-bg2: #67626d;
  --lg-panel: rgba(0, 0, 0, .42); --lg-card: rgba(0, 0, 0, .4); --lg-raised: rgba(255, 255, 255, .08);
  --lg-line: rgba(255, 255, 255, .22); --lg-line2: rgba(255, 255, 255, .3);
  --lg-text: #ffffff; --lg-muted: rgba(255, 255, 255, .55); --lg-dim: rgba(255, 255, 255, .35);
  --lg-a1: #8b5cf6; --lg-a2: #ec4899; --lg-a3: #f59e0b; --lg-accent: #8b5cf6; --lg-ink: #ffffff;
  --lg-edge: rgba(255, 255, 255, .22);
  --lg-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  --lg-aurora: 1; --lg-aurora-strength: .6; --lg-dust: 0;
  /* Solid: the Translucent glass as it shows over Sary-OS, made opaque
     (sampled from the owner's screenshot). */
  --lg-solid: #625e6b; --lg-solid-deep: #4e5566; --lg-solid-side: #5a5868; --lg-solid-stage: #4f5566;
  --lg-solid-line: rgba(255, 255, 255, .22);
  --lg-bar: rgba(70, 68, 82, .9); --lg-menu: #4f4c5c; --lg-modal: rgba(78, 76, 92, .94);
  --lg-frame: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02)), linear-gradient(#67626d, #4e5566);
  --lg-spec: rgba(255, 255, 255, .3); --lg-spec-soft: rgba(255, 255, 255, .08); --lg-spec-glow: rgba(255, 255, 255, .08); --lg-spec-sweep: rgba(255, 255, 255, .08);
  --lg-ctl: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); --lg-ctl-hover: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .1));
  --lg-ctl-line: rgba(255, 255, 255, .22);
  --lg-ctl-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 22px rgba(0, 0, 0, .2);
  --lg-bubble: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
  --lg-bubble-user: linear-gradient(160deg, color-mix(in srgb, var(--lg-a1) 30%, transparent), color-mix(in srgb, var(--lg-a2) 18%, transparent));
  --lg-blur: blur(18px) saturate(1.5);
  --lg-tile-top: rgba(255, 255, 255, .1); --lg-tile-bottom: rgba(255, 255, 255, .03);
  color-scheme: dark;
}
/* Transparent: the same two looks with the frame let go. Light is the Mac
   app's Translucent theme over the wallpaper (black 0.42 and a white sheen
   from the top left); Dark keeps Noir's black, see-through. No blur on the
   frame (owner, 2026-09-27: no glass blur). */
:root[data-glass="dark"][data-glass-mode="clear"] {
  --lg-panel: rgba(0, 0, 0, .55); --lg-card: rgba(255, 255, 255, .04);
  --lg-bar: rgba(0, 0, 0, .5); --lg-menu: rgba(10, 10, 10, .96); --lg-modal: rgba(10, 10, 10, .88);
  --lg-frame: linear-gradient(rgba(5, 5, 5, .62), rgba(0, 0, 0, .62));
}
:root[data-glass="light"][data-glass-mode="clear"] {
  --lg-bar: rgba(0, 0, 0, .32); --lg-menu: rgba(60, 58, 72, .97); --lg-modal: rgba(40, 38, 52, .86);
  --lg-frame: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02)), linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42));
}

/* The tier colour runs through Sary-OS's own accents (.tint(palette[0]) in
   the app: the toggle, the checks, the highlights). Stylesheet !important
   beats the theme picker's inline values while the skin is on. */
:root:root[data-glass] { accent-color: var(--lg-accent); }
:root:root[data-glass="dark"] {
  /* A deeper platinum than the skin's own #E5E4E2 (owner, 2026-10-01: "fix
     white text on white button"): about a hundred surfaces paint a fill in
     these with white letters (Rename, Download Image, Animate, Send to
     StudioLab...), so they must carry white text. */
  --theme-primary: #6e7177 !important; --theme-primary-rgb: 110, 113, 119 !important; --theme-hover: #8e9196 !important;
  --theme-panel-color: #6e7177 !important; --theme-panel-rgb: 110, 113, 119 !important;
  --panel-accent: #6e7177 !important; --panel-accent-rgb: 110, 113, 119 !important;
  --bubble-accent-color: #6e7177 !important; --bubble-accent-color-rgb: 110, 113, 119 !important;
}
:root:root[data-glass="light"] {
  --theme-primary: #8b5cf6 !important; --theme-primary-rgb: 139, 92, 246 !important; --theme-hover: #a78bfa !important;
  --theme-panel-color: #8b5cf6 !important; --theme-panel-rgb: 139, 92, 246 !important;
  --panel-accent: #8b5cf6 !important; --panel-accent-rgb: 139, 92, 246 !important;
  --bubble-accent-color: #8b5cf6 !important; --bubble-accent-color-rgb: 139, 92, 246 !important;
}

/* The one Portal line takes the glass line (still 1px, still solid). */
:root:root[data-glass] { --portal-line: var(--lg-solid-line); }

/* ---- Solid shells: the same variables every solid panel already reads ---- */
:root:root:root[data-glass] body.portal-solid {
  --ps-bg: var(--lg-solid); --ps-deep: var(--lg-solid-deep); --ps-side: var(--lg-solid-side); --ps-stage: var(--lg-solid-stage);
}
:root:root:root:root[data-glass="dark"] body.portal-solid #asksary-studio {
  --ast-bg: #050505; --ast-surface: #0a0a0a; --ast-surface-2: #111111; --ast-field: #111111; --ast-hover: #181818;
  background: #050505 !important; box-shadow: 0 0 0 100vmax #000000, 0 34px 90px rgb(0, 0, 0) !important;
}
:root:root:root:root[data-glass="light"] body.portal-solid #asksary-studio {
  --ast-bg: #625e6b; --ast-surface: #67626d; --ast-surface-2: #5a5868; --ast-field: #4f4c5c; --ast-hover: #6e6a7a;
  background: #625e6b !important; box-shadow: 0 0 0 100vmax #4e5566, 0 34px 90px rgba(0, 0, 0, .35) !important;
}

/* ---- The frame every tool docks into: the Vault window ----
   ThemeBackground under everything, the aurora band and the dust over it
   (liquid-glass.js), the docked tool on top. */
:root:root:root:root[data-glass] #portal-dashboard {
  background: var(--lg-frame) !important;
  border-color: transparent !important;
  box-shadow: var(--lg-shadow), inset 0 1px 0 var(--lg-edge) !important;
}
:root:root:root:root[data-glass] body.portal-solid #portal-dashboard-scrim { background: color-mix(in srgb, var(--lg-solid-deep) 60%, transparent) !important; }

/* The aurora, the dust and the rim are this file's own elements
   (liquid-glass.js), laid on the frame's geometry: aurora and dust under the
   docked tool, the rim over it, so none needs a pseudo-element of any tool.
   None catches a click. */
#lg-aurora, #lg-dust, #lg-rim, #lg-sheen {
  position: fixed; top: var(--dash-top); left: var(--dash-left); width: var(--dash-w); height: var(--dash-h);
  box-sizing: border-box; border-radius: 28px; pointer-events: none; opacity: 0; transition: opacity .9s ease;
}
/* AuroraBackdrop(...).frame(height: 170).mask(black, black 0.6, clear): the
   band is the top of the window (170 of the Mac window's ~365 points, so 46%
   of the frame), fading out downwards, premultiplied over the background. */
#lg-aurora {
  z-index: 1; display: block; height: calc(var(--dash-h) * .46); border-radius: 28px 28px 0 0;
  -webkit-mask-image: linear-gradient(#000, rgba(0, 0, 0, .6) 50%, transparent); mask-image: linear-gradient(#000, rgba(0, 0, 0, .6) 50%, transparent);
}
:root[data-glass][data-glass-frame="on"] #lg-aurora { opacity: 1; }
/* DustField: fine white dust drifting up and twinkling, the Noir look only. */
#lg-dust { z-index: 1; display: block; }
:root[data-glass="dark"][data-glass-frame="on"] #lg-dust { opacity: 1; }
/* The Mac window has no extra sheen over its content. */
#lg-sheen { display: none; }
/* GlowBorder: a slowly circling line of the tier's colours, with a gap. */
#lg-rim {
  z-index: 19600; padding: 1.4px;
  background: conic-gradient(from var(--lg-spin), var(--lg-a1), var(--lg-a2), transparent, var(--lg-a3), var(--lg-a1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: lg-spin 12s linear infinite;
}
@keyframes lg-spin { to { --lg-spin: 360deg; } }
:root[data-glass][data-glass-frame="on"] #lg-rim { opacity: 1; }
/* The aurora under the nav and the right-hand column: an L along the top and
   the right edge, just beneath them, so it flows through every tile and
   square. */
#lg-aurora-bar {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 100499; pointer-events: none; display: block; opacity: 0; transition: opacity .9s ease;
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--portal-side-w, 58px)) 100%, calc(100% - var(--portal-side-w, 58px)) var(--portal-bar-h, 92px), 0 var(--portal-bar-h, 92px));
}
:root[data-glass] body.portal-ready #lg-aurora-bar { opacity: var(--lg-aurora); }
/* LiveLoop lands full screen with no frame and draws its own field. */
:root[data-glass] body[data-portal-panel="liveloop"] #lg-rim, :root[data-glass] body[data-portal-panel="liveloop"] #lg-aurora, :root[data-glass] body[data-portal-panel="liveloop"] #lg-dust { display: none; }
:root[data-glass] #lg-aurora.no-gpu, :root[data-glass] #lg-aurora-bar.no-gpu {
  background: radial-gradient(50% 60% at var(--lg-x) var(--lg-y), color-mix(in srgb, var(--lg-a1) 45%, transparent), transparent 70%),
    radial-gradient(45% 55% at calc(100% - var(--lg-x)) 100%, color-mix(in srgb, var(--lg-a3) 40%, transparent), transparent 70%);
  animation: lg-drift 26s ease-in-out infinite alternate;
}
@keyframes lg-drift { to { --lg-x: 82%; --lg-y: 40%; } }
@media (max-width: 900px) { #lg-aurora, #lg-dust, #lg-rim, #lg-sheen { border-radius: 0; } }

/* ---- The nav, the right-hand column and the SaryOS menu ---- */
:root:root:root:root[data-glass] #portal-bar, :root:root:root:root[data-glass] #portal-side {
  background: var(--lg-bar) !important; color: var(--lg-text);
}
:root:root:root:root[data-glass] #portal-bar { box-shadow: 0 4px 32px color-mix(in srgb, var(--lg-bg) 60%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--lg-accent) 22%, transparent) !important; }
:root:root:root:root[data-glass] #portal-brand-menu {
  background: linear-gradient(var(--lg-menu), var(--lg-menu)) padding-box,
    linear-gradient(160deg, color-mix(in srgb, var(--lg-accent) 40%, transparent), var(--lg-solid-line) 40%, color-mix(in srgb, var(--lg-accent) 22%, transparent)) border-box !important;
  border-color: transparent !important; box-shadow: var(--lg-shadow) !important;
}
:root:root:root:root[data-glass] #portal-bar #portal-brand-menu button:hover { background: color-mix(in srgb, var(--lg-accent) 10%, transparent) !important; }
:root:root:root:root[data-glass] #portal-bar #portal-brand-menu button[aria-checked="true"]:not([role="switch"]) {
  background: color-mix(in srgb, var(--lg-accent) 14%, transparent) !important; border-color: color-mix(in srgb, var(--lg-accent) 40%, transparent) !important; color: var(--lg-accent) !important;
}

/* ---- Pages and Appearance (the overlay frames) ---- */
:root:root:root:root[data-glass] .portal-overlay.is-open .po-frame {
  background: linear-gradient(var(--lg-solid), var(--lg-solid)) padding-box,
    conic-gradient(from var(--lg-spin), var(--lg-a1), var(--lg-a2), var(--lg-a3), var(--lg-a1)) border-box !important;
  border-color: transparent !important; box-shadow: var(--lg-shadow), 0 0 40px color-mix(in srgb, var(--lg-accent) 10%, transparent) !important;
  animation: lg-spin 14s linear infinite;
}

/* ---- Tools docked in the frame (portal.js TOOL_ROOTS) ---- */
:root:root:root:root[data-glass] body.portal-solid .portal-tool-docked { background: var(--lg-tool) !important; }

/* ---- Every floating panel: builders, libraries, dialogs, sheets ----
   A glass card with the turning rim and a slow diffusion of the accent
   through it. The gallery's shell (.visual-modal) and docked tools are
   shells, not cards, and keep the rules above. */
:root:root:root:root[data-glass] :is(.custom-modal, #img-flow-box, .cmd-card, .prompt-modal, .folder-modal, .speech-modal, .universal-sheet, .tracker-modal, .dg-modal, .modeler-modal, .podcast-card, .voice-card, .notepad-modal, #notepad-tts-card, .ntts-translate-box, .org-modal, #ob-modal, #tw-modal, .confirm-modal):not(.portal-tool-docked):not(.portal-tool-docked *),
:root:root:root:root[data-glass] #agents-overlay > div:not(.portal-tool-docked) {
  background:
    radial-gradient(70% 60% at var(--lg-x) var(--lg-y), color-mix(in srgb, var(--lg-a1) 13%, transparent), transparent 70%) padding-box,
    radial-gradient(60% 55% at calc(100% - var(--lg-x)) calc(100% - var(--lg-y)), color-mix(in srgb, var(--lg-a3) 10%, transparent), transparent 70%) padding-box,
    linear-gradient(var(--lg-modal), var(--lg-modal)) padding-box,
    conic-gradient(from var(--lg-spin), var(--lg-a1), var(--lg-a2), var(--lg-a3), var(--lg-a1)) border-box !important;
  border: 1px solid transparent !important;
  box-shadow: var(--lg-shadow), 0 0 40px color-mix(in srgb, var(--lg-accent) 10%, transparent), inset 0 1px 0 var(--lg-edge) !important;
  animation: lg-spin 14s linear infinite, lg-drift 26s ease-in-out infinite alternate;
}
/* Web Architect is the global modal docked in the frame: a shell. */
:root:root:root:root[data-glass] body.portal-ready #global-modal-overlay[data-variant="web-architect"] .custom-modal { animation: none; border-color: transparent !important; }

/* Their headers and toolbars sit on the card instead of painting over it. */
:root:root:root:root[data-glass] :is(.prompt-header, .folder-header, .speech-header, .us-header, .modeler-header, .dg-header, .org-modal-header, .notepad-header, #ntts-header, .cmd-header, .cmd-tabs, .dg-toolbar) {
  background: var(--lg-raised) !important; border-color: var(--lg-line) !important;
}

/* The scrim behind a floating panel: the wallpaper stays on view. */
:root:root:root:root[data-glass] :is(#global-modal-overlay:not([data-variant="web-architect"]), #cmd-overlay, #prompt-library-overlay, #folder-manager-overlay, #speech-onboarding-overlay, #universal-model-overlay, #tracker-overlay, #dg-overlay, #modeler-overlay, #agents-overlay, #podcast-overlay, #voice-overlay, #notepad-overlay, #notepad-tts-overlay, #org-modal-overlay, #ob-overlay, #tw-overlay, #custom-confirm-overlay):not(.portal-tool-docked) {
  background: radial-gradient(60rem 36rem at 80% -10%, color-mix(in srgb, var(--lg-accent) 10%, transparent), transparent 70%), color-mix(in srgb, var(--lg-bg) 38%, transparent) !important;
}

/* ---- Glass controls: the nav's buttons, the column's squares, Chat's header ---- */
:root:root:root:root[data-glass] #portal-bar .portal-btn, :root:root:root:root[data-glass] #portal-side .portal-square:not([aria-current="true"]):not(.is-over),
:root:root:root:root[data-glass] body #hamburger, :root:root:root:root[data-glass] body .header-icon-btn, :root:root:root:root[data-glass] body #header-credit-balance,
:root:root:root:root[data-glass] body #composer-attach-toggle, :root:root:root:root[data-glass] body #quick-actions-toggle {
  background: var(--lg-ctl) !important; border: 1px solid var(--lg-ctl-line) !important; box-shadow: var(--lg-ctl-shadow) !important;
  backdrop-filter: var(--lg-blur) !important; -webkit-backdrop-filter: var(--lg-blur) !important;
}
:root:root:root:root[data-glass] #portal-bar .portal-btn:hover, :root:root:root:root[data-glass] #portal-side .portal-square:not([aria-current="true"]):not(.is-over):hover,
:root:root:root:root[data-glass] body #hamburger:hover, :root:root:root:root[data-glass] body .header-icon-btn:hover, :root:root:root:root[data-glass] body #header-credit-balance:hover,
:root:root:root:root[data-glass] body #composer-attach-toggle:hover, :root:root:root:root[data-glass] body #quick-actions-toggle:hover { background: var(--lg-ctl-hover) !important; }

/* The square on screen and the one being dropped on: glass lit by its accent. */
:root:root:root:root[data-glass] #portal-side .portal-square[aria-current="true"], :root:root:root:root[data-glass] #portal-side .portal-square.is-over {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 12%, transparent)) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent) !important;
  backdrop-filter: var(--lg-blur) !important; -webkit-backdrop-filter: var(--lg-blur) !important;
}
/* The nav's tiles: each a pane of glass, the one on screen lit by its accent. */
:root:root:root:root[data-glass] #portal-bar .portal-tab {
  background: linear-gradient(180deg, var(--lg-tile-top), var(--lg-tile-bottom)) !important; border-left-color: var(--lg-ctl-line) !important;
  box-shadow: inset 0 1px 0 var(--lg-spec-soft), inset 1px 0 0 var(--lg-spec-soft) !important;
}
:root:root:root:root[data-glass] #portal-bar .portal-tab:hover { background: var(--lg-ctl) !important; }
:root:root:root:root[data-glass] #portal-bar .portal-tab[aria-current="true"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 var(--accent), 0 0 24px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}
:root:root:root:root[data-glass] #portal-bar .portal-brand { background: linear-gradient(180deg, var(--lg-tile-top), var(--lg-tile-bottom)); border-right-color: var(--lg-ctl-line) !important; }

/* ---- Chat: the header strip, the bubbles, the composer ---- */
:root:root:root:root[data-glass] .main-container .top-header, :root:root:root:root[data-glass] .main-container .controls-header { background: transparent !important; border-color: var(--lg-ctl-line) !important; }
:root:root:root:root[data-glass] .message-container .message {
  background: var(--lg-bubble) !important; border: 1px solid var(--lg-ctl-line) !important; box-shadow: var(--lg-ctl-shadow) !important;
  backdrop-filter: var(--lg-blur) !important; -webkit-backdrop-filter: var(--lg-blur) !important;
}
:root:root:root:root[data-glass] .message-container.user .message { background: var(--lg-bubble-user) !important; }
:root:root:root:root[data-glass] #input-area {
  background: var(--lg-ctl) !important; border: 1px solid var(--lg-ctl-line) !important; border-bottom: 0 !important;
  box-shadow: var(--lg-ctl-shadow), 0 -8px 40px color-mix(in srgb, var(--lg-a1) 12%, transparent) !important;
  backdrop-filter: var(--lg-blur) !important; -webkit-backdrop-filter: var(--lg-blur) !important;
}
:root:root:root:root[data-glass] #input-area .input-wrapper, :root:root:root:root[data-glass] #input-area #message-input { background: transparent !important; box-shadow: none !important; }
/* Chat flicker (owner, 2026-10-01: "its fine on solid", the composer's buttons
   kept going and coming back on glass). The composer and every bubble blurred
   what is behind them while the aurora canvas under them repaints thirty times
   a second, and the composer's own buttons blurred again inside the composer's
   blur. Chrome drops such nested backdrop layers frame to frame. Chat keeps its
   translucent glass fills and edges; only the blur is off, and never nested. */
:root:root:root:root[data-glass] .message-container .message,
:root:root:root:root[data-glass] #input-area,
:root:root:root:root[data-glass] #input-area * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* Chat flicker on a tablet (owner, 2026-10-03: "the auto attachment and white
   outer line are having a proper rave"). Serenity greys every button with
   filter: grayscale(1); each composer control became its own filtered layer
   over the aurora and dust canvases repainting under it, and Android's
   compositor dropped them frame to frame. Serenity's composer controls are
   already painted in greys, so the filter changes nothing on screen. On
   perf-lite (Android) the canvases also hold one still frame
   (liquid-glass.js), as they do in Solid. */
:root:root:root:root[data-glass] #input-area :is(button, [role="button"]) { filter: none !important; }

/* ---- The composer, on every surface that has one ---- */
:root:root:root:root[data-glass] body:is(*, #lg-boost) .asksary-composer:is(*, #lg-boost) { --composer-border: var(--lg-solid-line); }

@media (prefers-reduced-motion: reduce) {
  #lg-rim, #lg-sheen::after, :root[data-glass] .portal-overlay .po-frame, :root[data-glass] #lg-aurora.no-gpu { animation: none !important; }
}

/* ==== Tool interiors (owner, 2026-09-29: "yes", every tool) ====
   Three layers inside every tool: shells go clear so the frame's glass and
   aurora show through, cards become panes of glass, controls become glass
   buttons. Stages and previews (the picture itself) are left alone. No blur
   here: a tool can hold hundreds of controls. Edges are inset shadows, not
   borders, so nothing changes size. */

/* ---- Shells: the full-width layers a tool paints over the frame ---- */
:root:root:root:root[data-glass] body:is(*, #lg-boost) :is(.portal-tool-docked, #code-canvas-container, #code-lab-overlay, #asksary-studio, #asksary-video-editor, #visual-lib-overlay, #liveloop-container)
  :is(#img-flow-box, .vc2, .vc2-head, .vc2-board, .vc2-controls,
      .music-studio-modal, .music-studio-shell, .music-studio-header, .music-studio-footer-pills,
      .mp-header, .mp-library, .mp-player, .mp-controls,
      .it-card, .it-steps,
      #pod-card-container, .pod-source-pane, .pod-options-pane,
      #notepad-tts-card, #notepad-tts-counter,
      .ave-top, .ave-panel, .ave-stage-wrap, .ave-transport, .ave-timeline, .ave-head,
      .fas-top, .fas-formatbar, .fas-panel, .fas-generation-rail,
      .custom-modal, .wa-builder, .wa-builder-header, .wa-progress, .wa-summary,
      #cl-tabbar, #cl-saved-projects, #lib-filter-row, .live-chat-output, #coding-lab-chat) {
  background: transparent !important; background-image: none !important; box-shadow: none !important; animation: none !important;
  border-color: var(--lg-ctl-line) !important;
}
:root:root:root:root[data-glass] :is(#img-flow-wrap, [id^="ind-tool-"], #podcast-overlay, #notepad-tts-overlay, #asksary-music-player, #flux-assisted-studio, #global-modal-overlay).portal-tool-docked > * { border-color: transparent !important; }

/* ---- Cards: panes of glass inside a tool ---- */
:root:root:root:root[data-glass] body:is(*, #lg-boost) :is(.portal-tool-docked, #code-canvas-container, #code-lab-overlay, #asksary-studio, #asksary-video-editor, #visual-lib-overlay, #liveloop-container)
  :is(.music-studio-card, .music-studio-footer-pill, .cl-mode-card, .it-row, .it-aside, .it-mark, .it-badge, .vc2-note, .vc2-capability,
      .fas-inspector-card, .fas-badge, .fas-zoom, .wa-summary-list, .wa-understanding, .wa-model-badge, .mp-now, .mp-track.is-current,
      .ast-track-label, .ast-ruler, .ast-zoombar, .ave-track-label, .ave-preview-controls, .ntts-limit-badge, .pod-source-icon,
      .liveloop-mode, #liveloop-context, .gallery-zoom, #coding-lab-search, .ss-card) {
  background: var(--lg-raised) !important;
  box-shadow: inset 0 0 0 1px var(--lg-line) !important;
  border-color: transparent !important;
}

/* ---- The standard composer, on every surface ---- */
:root:root:root:root[data-glass] body:is(*, #lg-boost) .asksary-composer:is(*, #lg-boost) {
  background: var(--lg-ctl) !important; border-color: var(--lg-ctl-line) !important;
  box-shadow: var(--lg-ctl-shadow) !important;
  backdrop-filter: var(--lg-blur) !important; -webkit-backdrop-filter: var(--lg-blur) !important;
}
:root:root:root:root[data-glass] body:is(*, #lg-boost) .asksary-composer:is(*, #lg-boost) .asksary-composer-input { background: transparent !important; box-shadow: none !important; }

/* ---- Controls: every button, field and menu inside a tool ----
   Left alone: anything that carries its own colour inline, swatches, clips
   and thumbnails, sliders and ticks.
   Less blocky (owner, 2026-10-01: "eveythings too blocky", then "Same pass
   everywhere"): a button has no box until it is hovered, only a faint fill;
   fields keep a soft outline so they read as fields; a chosen button is an
   accent tint, not a lit block; cards are a faint pane with a hairline. */
:root:root:root:root[data-glass] body:is(*, #lg-boost) :is(.portal-tool-docked, #code-canvas-container, #code-lab-overlay, #asksary-studio, #asksary-video-editor, #visual-lib-overlay, #liveloop-container, #doclab-overlay, #universal-model-overlay, .asksary-composer)
  :is(select, textarea, input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"])):not([style*="background"]):not([class*="swatch"]):not([class*="color"]):not([class*="colour"]):not([class*="clip"]):not([class*="thumb"]):not([class*="tile"]):not([class*="item"]):not([class*="handle"]):not([class*="key"]):not(.asksary-composer-input):not(.CodeMirror *) {
  background: var(--lg-raised) !important;
  box-shadow: inset 0 0 0 1px var(--lg-line) !important;
  border-color: transparent !important;
}
:root:root:root:root[data-glass] body:is(*, #lg-boost) :is(.portal-tool-docked, #code-canvas-container, #code-lab-overlay, #asksary-studio, #asksary-video-editor, #visual-lib-overlay, #liveloop-container, #doclab-overlay, #universal-model-overlay, .asksary-composer)
  button:not([style*="background"]):not([class*="swatch"]):not([class*="color"]):not([class*="colour"]):not([class*="clip"]):not([class*="thumb"]):not([class*="tile"]):not([class*="item"]):not([class*="handle"]):not([class*="key"]):not(.CodeMirror *) {
  background: var(--lg-raised) !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
:root:root:root:root[data-glass] body:is(*, #lg-boost) :is(.portal-tool-docked, #code-canvas-container, #code-lab-overlay, #asksary-studio, #asksary-video-editor, #visual-lib-overlay, #liveloop-container, #doclab-overlay, #universal-model-overlay, .asksary-composer)
  :is(button, select):not(.v-tab):not(.gallery-folder-row):not([class*="ll-files"]):not([style*="background"]):not([class*="swatch"]):not([class*="color"]):not([class*="colour"]):not([class*="clip"]):not([class*="thumb"]):not([class*="tile"]):not([class*="item"]):not([class*="handle"]):not([class*="key"]):not(:disabled):hover {
  background: var(--lg-ctl-hover) !important;
  box-shadow: inset 0 0 0 1px var(--lg-ctl-line) !important;
}
/* On, chosen, current: glass lit by the accent. */
:root:root:root:root[data-glass] body:is(*, #lg-boost) :is(.portal-tool-docked, #code-canvas-container, #code-lab-overlay, #asksary-studio, #asksary-video-editor, #visual-lib-overlay, #liveloop-container, #doclab-overlay, #universal-model-overlay, .asksary-composer)
  button:is(.active, .is-active, .selected, .is-selected, .is-on, .on, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], [aria-current="true"]):not([style*="background"]):not([class*="swatch"]):not([class*="color"]):not([class*="colour"]):not([class*="clip"]):not([class*="thumb"]):not([class*="tile"]):not([class*="item"]):not([class*="handle"]):not([class*="key"]) {
  background: color-mix(in srgb, var(--lg-a1) 16%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lg-a1) 35%, transparent) !important;
}
/* The main action: ThemedProminentStyle, the Vault's Back Up All (owner,
   2026-10-01: "yes add the gradient to main buttons", then the Pro+ skins
   exactly). The tier gradient left to right, a band of light sweeping across
   every 3.6 s, a 0.6 white hairline and a glow in the middle colour; letters
   in the tier's ink (black on platinum, white on Aurora). :not(#lg-main) adds one
   id so it wins over the control rules above, hover and chosen. */
:root:root:root:root[data-glass] body:is(*, #lg-boost) :is(.portal-tool-docked, #code-canvas-container, #code-lab-overlay, #asksary-studio, #asksary-video-editor, #visual-lib-overlay, #liveloop-container, .asksary-composer)
  button:is(.primary, .is-primary, .asksary-composer-send, .live-chat-send, [class*="generate"], [class*="-primary"]):not([style*="background"]):not(:disabled):not(#lg-main) {
  background: linear-gradient(108deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%) no-repeat, linear-gradient(90deg, var(--lg-a1), var(--lg-a2), var(--lg-a3)) !important;
  background-size: 280% 100%, 100% 100% !important;
  animation: lg-button-sheen 3.6s linear infinite !important;
  box-shadow: inset 0 0 0 .6px rgba(255, 255, 255, .25), 0 3px 10px color-mix(in srgb, var(--lg-a2) 45%, transparent) !important;
  color: var(--lg-ink) !important; -webkit-text-fill-color: var(--lg-ink) !important;
}
:root:root:root:root[data-glass] body:is(*, #lg-boost) :is(.portal-tool-docked, #code-canvas-container, #code-lab-overlay, #asksary-studio, #asksary-video-editor, #visual-lib-overlay, #liveloop-container, .asksary-composer)
  button:is(.primary, .is-primary, .asksary-composer-send, .live-chat-send, [class*="generate"], [class*="-primary"]):not([style*="background"]):not(:disabled):not(#lg-main) :is(span, i, svg, b, strong, small, em) {
  color: var(--lg-ink) !important; -webkit-text-fill-color: var(--lg-ink) !important;
}
:root:root:root:root[data-glass] body:is(*, #lg-boost) :is(.portal-tool-docked, #code-canvas-container, #code-lab-overlay, #asksary-studio, #asksary-video-editor, #visual-lib-overlay, #liveloop-container, .asksary-composer)
  button:is(.primary, .is-primary, .asksary-composer-send, .live-chat-send, [class*="generate"], [class*="-primary"]):not([style*="background"]):not(:disabled):not(#lg-main):hover {
  filter: brightness(1.06);
}
:root:root:root:root[data-glass] body:is(*, #lg-boost) :is(.portal-tool-docked, #code-canvas-container, #code-lab-overlay, #asksary-studio, #asksary-video-editor, #visual-lib-overlay, #liveloop-container, .asksary-composer)
  button:is(.primary, .is-primary, .asksary-composer-send, .live-chat-send, [class*="generate"], [class*="-primary"]):not([style*="background"]):not(:disabled):not(#lg-main):active { opacity: .85; transform: scale(.985); }
/* Sheen(period: 3.6): crosses in the first ~60% of the period, then rests. */
@keyframes lg-button-sheen { 0% { background-position: 130% 0, 0 0; } 60%, 100% { background-position: -40% 0, 0 0; } }
:root:root:root:root[data-glass] body:is(*, #lg-boost) :is(.portal-tool-docked, #code-canvas-container, #code-lab-overlay, #asksary-studio, #asksary-video-editor, #visual-lib-overlay, #liveloop-container, .asksary-composer) :is(button, select, textarea, input):focus-visible {
  outline: 2px solid var(--lg-accent) !important; outline-offset: 2px;
}

/* A docked tool's own root: the tools paint it with an id and four :not()s,
   so this carries two ids' weight (:is(*, #lg-boost) matches anything).
   Clear in both modes: the frame under it is the Vault window (its
   background, aurora band and dust), as the app draws them behind content. */
:root:root:root:root[data-glass] body:is(*, #lg-boost) .portal-tool-docked:is(*, #lg-boost) { background: var(--lg-tool) !important; background-image: none !important; }
:root[data-glass] { --lg-tool: transparent; }

/* ---- DocLab (owner, 2026-09-29: "yes clear DocLab too") ----
   Shells clear; the Assistant, menus and dialogs are glass with a blur so they
   read over the document; the page, the sheet's cells, slides and the
   presenter stay as they are. */
:root:root:root:root[data-glass] body:is(*, #lg-boost) #doclab-overlay :is(.dl-shell, .dl-head, .dl-ribbon, .dl-stage, .dl-status, .dl-write-scroll, .dl-findbar, .dl-imgbar, .dl-grid, .dl-deck, .dl-rail) {
  background: transparent !important; background-image: none !important; border-color: var(--lg-ctl-line) !important;
}
:root:root:root:root[data-glass] body:is(*, #lg-boost) #doclab-overlay :is(.dl-ai, .dl-menu, .dl-modal) {
  background: var(--lg-modal) !important; border-color: var(--lg-ctl-line) !important;
  box-shadow: var(--lg-ctl-shadow) !important;
  backdrop-filter: var(--lg-blur) !important; -webkit-backdrop-filter: var(--lg-blur) !important;
}
:root:root:root:root[data-glass] body:is(*, #lg-boost) #doclab-overlay :is(.dl-chip, .dl-ai-result, .dl-chart, .dl-sheet th, .dl-sheet td:first-child) {
  background: var(--lg-ctl) !important; box-shadow: inset 0 0 0 1px var(--lg-ctl-line) !important;
}
/* The sheet's cells: dark glass, so the field's stars no longer show through
   the grid as noise (owner, 2026-10-01, with the blending pass). */
:root:root:root:root[data-glass] body:is(*, #lg-boost) #doclab-overlay .dl-sheet td:not(:first-child):not(.is-selected) { background: rgba(0, 0, 0, .42) !important; }
:root:root:root:root[data-glass] body:is(*, #lg-boost) #doclab-overlay .dl-sheet :is(th, td) { border-color: rgba(255, 255, 255, .08) !important; }

/* Light used to force black letters on DocLab, every tool control and
   LiveLoop's dock (owner, 2026-09-29). The Aurora skin is white letters on
   frosted glass (owner, 2026-10-01: screenshot 2 exactly), so those rules are
   gone: Light now draws every tool in its own white-letter styling. */
:root:root:root:root[data-glass] body:is(*, #lg-boost) :is(.portal-tool-docked, #code-canvas-container, #code-lab-overlay, #asksary-studio, #asksary-video-editor, #visual-lib-overlay, #liveloop-container, #doclab-overlay, .asksary-composer) :is(input, textarea)::placeholder { color: var(--lg-muted) !important; -webkit-text-fill-color: var(--lg-muted) !important; opacity: 1; }

/* Canvas Solo: the shell clears like every other tool's. */
:root:root:root:root[data-glass] body:is(*, #lg-boost) #ind-tool-canvas-solo-overlay .cs-head { border-color: var(--lg-ctl-line) !important; }

/* Vault: on black, letters stay light in Light mode too. */
:root:root:root:root[data-glass="light"] body:is(*, #lg-boost) #ind-tool-vault-overlay[data-bg="black"] :is(button, input, span, b, small, i) { color: #f4f6ff !important; -webkit-text-fill-color: currentColor !important; }

/* ---- Sary-OS Code, lighter (owner, 2026-10-01: "text is overwriting, and
   eveythings too blocky") ----
   The open file's tab was drawn over the editor's first lines. The tab bar
   now keeps its 36 px in the column, sits above the editor on its own glass,
   and the editor cannot paint outside its box. The header's buttons, the file
   rows' rename and delete, and the filter field drop their glass boxes and
   show it only on hover; the open file is a tint with an accent edge, not a
   solid block. Three ids, so this beats the control rules above. */
:root:root:root:root[data-glass] body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay .cl-main { display: flex !important; flex-direction: column !important; overflow: hidden !important; }
:root:root:root:root[data-glass] body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay #cl-tabbar {
  position: relative !important; z-index: 4 !important; flex: 0 0 36px !important; height: 36px !important; min-height: 36px !important; box-sizing: border-box !important;
  background: var(--lg-panel) !important; border-bottom: 1px solid var(--lg-line) !important;
}
:root:root:root:root[data-glass] body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay #cl-editor-host { position: relative !important; flex: 1 1 0 !important; min-height: 0 !important; overflow: hidden !important; contain: paint; }
:root:root:root:root[data-glass] body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay .cl-tab {
  background: transparent !important; border-right: 0 !important; box-shadow: inset 0 -2px 0 var(--lg-accent) !important; color: var(--lg-text) !important; padding: 0 14px !important;
}
:root:root:root:root[data-glass] body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay .cl-tab i { color: var(--lg-accent) !important; }
:root:root:root:root[data-glass] body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay .cl-header :is(.cl-btn, .cl-icon-btn, .cl-close):not(.primary) {
  background: transparent !important; box-shadow: none !important; border-color: transparent !important; border-radius: 8px !important;
}
:root:root:root:root[data-glass] body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay .cl-header :is(.cl-btn, .cl-icon-btn, .cl-close):not(.primary):not(:disabled):hover {
  background: var(--lg-raised) !important; box-shadow: inset 0 0 0 1px var(--lg-line) !important;
}
:root:root:root:root[data-glass] body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay .cl-header .cl-sep { opacity: .5; }
:root:root:root:root[data-glass] body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay .cl-file-tool {
  background: transparent !important; box-shadow: none !important; border: 0 !important; width: 22px !important; height: 22px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border-radius: 6px !important; opacity: .6;
}
:root:root:root:root[data-glass] body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay .cl-file-tool:hover { background: var(--lg-raised) !important; opacity: 1; }
:root:root:root:root[data-glass] body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay .cl-file { border-radius: 8px !important; color: var(--lg-text) !important; }
:root:root:root:root[data-glass] body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay .cl-file i { color: var(--lg-muted) !important; }
:root:root:root:root[data-glass] body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay .cl-file:hover { background: var(--lg-raised) !important; }
:root:root:root:root[data-glass] body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay .cl-file.active {
  background: color-mix(in srgb, var(--lg-a1) 13%, transparent) !important; box-shadow: inset 2px 0 0 var(--lg-accent) !important; color: var(--lg-text) !important;
}
:root:root:root:root[data-glass] body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay .cl-file.active > i { color: var(--lg-accent) !important; }
:root:root:root:root[data-glass] body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay .cl-file .cl-dot { color: var(--lg-accent) !important; }
:root:root:root:root[data-glass] body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay .cl-search { border-bottom: 1px solid var(--lg-line) !important; }
:root:root:root:root[data-glass] body:is(*, #lg-boost) #code-lab-overlay#code-lab-overlay #cl-filter { background: transparent !important; box-shadow: none !important; border: 0 !important; }

/* ==== Gloss black, Dark (owner, 2026-10-01: "can we make the buttons gloss
   black with white font, and make them stand out a bit and the same with the
   tool bars. all look too flat", then "on every page") ====
   Noir Platinum only; Light (Aurora) is unchanged. This replaces, in Dark,
   the "less blocky" pass of request 279 (buttons without a box until
   hovered): every button and select on every page is a raised gloss-black
   key with white letters, and every tool's header bar is a gloss-black
   strip. The main action is gloss black too, set apart by a bright platinum
   edge and the sweeping sheen. Left alone: anything coloured inline,
   swatches, clips, thumbnails, tiles, handles, switches, the code editor,
   DocLab's page and LiveLoop's Single file / Project (its chosen one stays
   purple). Four :is(*, #lg-boost) so this outweighs every tool's own rules
   and the skin's control rules above. */
:root[data-glass="dark"] {
  --lg-gloss: linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .05) 47%, rgba(255, 255, 255, 0) 53%), linear-gradient(180deg, #202022 0%, #0b0b0c 58%, #040404 100%);
  --lg-gloss-hover: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .08) 47%, rgba(255, 255, 255, 0) 53%), linear-gradient(180deg, #2c2c2f 0%, #121214 58%, #070707 100%);
  /* Seated, not stuck on (owner, 2026-10-01: "the black buttons etc look
     tacky against the background"): a soft contact shadow, no hard drop. */
  --lg-gloss-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .35);
  --lg-gloss-on: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 0 0 1px rgba(229, 228, 226, .5), 0 0 12px rgba(255, 255, 255, .1), 0 1px 3px rgba(0, 0, 0, .35);
  --lg-gloss-bar: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #19191b 0%, #0a0a0b 60%, #050505 100%);
  --lg-gloss-bar-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 8px 22px rgba(0, 0, 0, .55);
  /* A tool's own toolbar: black glass the panel shows through at the edges,
     so its black keys sit in it rather than on the grey. */
  --lg-tool-strip: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 55%), rgba(0, 0, 0, .5);
}

/* Keys: every button and select. */
:root:root:root:root[data-glass="dark"] body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost)
  :is(button, select, .portal-btn, .portal-square, #hamburger, .header-icon-btn, #header-credit-balance):not(.v-tab):not(.gallery-folder-row):not([class*="ll-files"]):not([style*="background"]):not([class*="swatch"]):not([class*="color"]):not([class*="colour"]):not([class*="clip"]):not([class*="thumb"]):not([class*="tile"]):not([class*="item"]):not([class*="handle"]):not([class*="key"]):not([role="switch"]):not(.portal-tab):not(.pbm-light):not(.CodeMirror *):not(.dl-page *):not(.liveloop-mode *):not(#portal-brand-menu *):not(:disabled) {
  background: var(--lg-gloss) !important; background-color: #0b0b0c !important;
  box-shadow: var(--lg-gloss-shadow) !important; border-color: transparent !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:root:root:root:root[data-glass="dark"] body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost)
  :is(button, select, .portal-btn, .portal-square, #hamburger, .header-icon-btn, #header-credit-balance):not(.v-tab):not(.gallery-folder-row):not([class*="ll-files"]):not([style*="background"]):not([class*="swatch"]):not([class*="color"]):not([class*="colour"]):not([class*="clip"]):not([class*="thumb"]):not([class*="tile"]):not([class*="item"]):not([class*="handle"]):not([class*="key"]):not([role="switch"]):not(.portal-tab):not(.pbm-light):not(.CodeMirror *):not(.dl-page *):not(.liveloop-mode *):not(#portal-brand-menu *):not(:disabled) :is(span, b, strong, small, em, i) {
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}
:root:root:root:root[data-glass="dark"] body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost)
  :is(button, select, .portal-btn, .portal-square, #hamburger, .header-icon-btn, #header-credit-balance):not(.v-tab):not(.gallery-folder-row):not([class*="ll-files"]):not([style*="background"]):not([class*="swatch"]):not([class*="color"]):not([class*="colour"]):not([class*="clip"]):not([class*="thumb"]):not([class*="tile"]):not([class*="item"]):not([class*="handle"]):not([class*="key"]):not([role="switch"]):not(.portal-tab):not(.pbm-light):not(.CodeMirror *):not(.dl-page *):not(.liveloop-mode *):not(#portal-brand-menu *):not(:disabled):hover {
  background: var(--lg-gloss-hover) !important; filter: none;
}
/* Pressed in. The keys rule above counts six ids (four boosts, #hamburger in
   its :is() and #portal-brand-menu in a :not()), so with four boosts this and
   the chosen rule below never applied (owner, 2026-10-03: "i cant see what im
   selecting on any button on my entire site"). Pressed carries eight, chosen
   seven, the main action seven. */
:root:root:root:root[data-glass="dark"] body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost)
  :is(button, .portal-btn, .portal-square):not(.v-tab):not(.gallery-folder-row):not([class*="ll-files"]):not([style*="background"]):not([class*="swatch"]):not([class*="color"]):not([class*="colour"]):not([class*="clip"]):not([class*="thumb"]):not([class*="tile"]):not([class*="item"]):not([class*="handle"]):not([class*="key"]):not([role="switch"]):not(.portal-tab):not(.CodeMirror *):not(.dl-page *):not(.liveloop-mode *):not(#portal-brand-menu *):not(:disabled):active {
  background: linear-gradient(180deg, #050505, #141416) !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .1) !important;
}
/* The Finder-style lists (the Drive's categories and folders, LiveLoop's
   project rows) are rows, not keys (owner, 2026-10-06: "not buttons. buttons
   look tacky"), so every key rule here passes them by: :not(.v-tab),
   :not(.gallery-folder-row), :not([class*="ll-files"]). public/finder-list.css
   and the Drive's own block in public/portal.css style them. */
/* On, chosen, current: the key lit by the accent, as the right-hand
   column's open square is: tinted, ringed and glowing, so the chosen one reads
   at a glance. */
:root:root:root:root[data-glass="dark"] body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost)
  :is(button, .portal-btn, .portal-square):not(.v-tab):not(.gallery-folder-row):not([class*="ll-files"]):is(.active, .is-active, .selected, .is-selected, .is-on, .on, .is-over, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], [aria-current="true"]):not([style*="background"]):not([class*="swatch"]):not([class*="color"]):not([class*="colour"]):not([class*="clip"]):not([class*="thumb"]):not([class*="tile"]):not([class*="item"]):not([class*="handle"]):not([class*="key"]):not([role="switch"]):not(.portal-tab):not(.CodeMirror *):not(.dl-page *):not(.liveloop-mode *):not(#portal-brand-menu *) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 50%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, color-mix(in srgb, var(--accent) 45%, #3a3a3e), color-mix(in srgb, var(--accent) 25%, #1a1a1c)) !important; background-color: #1a1a1c !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 50%, #fff), 0 0 14px color-mix(in srgb, var(--accent) 45%, rgba(255, 255, 255, .35)) !important;
}
/* Light (Aurora): chosen is a deep purple key with a white ring, so it reads
   on the pale glass (owner, 2026-10-03: "the selections you hardly make out.
   make it a deeper purple"). */
:root:root:root:root[data-glass="light"] body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost)
  :is(button, .portal-btn, .portal-square):not(.v-tab):not(.gallery-folder-row):not([class*="ll-files"]):is(.active, .is-active, .selected, .is-selected, .is-on, .on, .is-over, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], [aria-current="true"]):not([style*="background"]):not([class*="swatch"]):not([class*="color"]):not([class*="colour"]):not([class*="clip"]):not([class*="thumb"]):not([class*="tile"]):not([class*="item"]):not([class*="handle"]):not([class*="key"]):not([role="switch"]):not(.portal-tab):not(.CodeMirror *):not(.dl-page *):not(.liveloop-mode *):not(#portal-brand-menu *) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #7c3aed, #4c1d95) !important; background-color: #5b21b6 !important;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6), 0 0 14px rgba(124, 58, 237, .5) !important;
  border-color: transparent !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
}
:root:root:root:root[data-glass="light"] body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost)
  :is(button, .portal-btn, .portal-square):not(.v-tab):not(.gallery-folder-row):not([class*="ll-files"]):is(.active, .is-active, .selected, .is-selected, .is-on, .on, .is-over, [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], [aria-current="true"]):not([style*="background"]):not([class*="swatch"]):not([class*="color"]):not([class*="colour"]):not([class*="clip"]):not([class*="thumb"]):not([class*="tile"]):not([class*="item"]):not([class*="handle"]):not([class*="key"]):not([role="switch"]):not(.portal-tab):not(.CodeMirror *):not(.dl-page *):not(.liveloop-mode *):not(#portal-brand-menu *) :is(span, b, strong, small, em, i) {
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}
/* The main action: gloss black with a bright platinum edge, the glow and
   the sheen sweeping across, white letters. */
:root:root:root:root[data-glass="dark"] body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost)
  button:is(.primary, .is-primary, .asksary-composer-send, .live-chat-send, [class*="generate"], [class*="-primary"]):not([style*="background"]):not(:disabled):not(.liveloop-mode *) {
  background: linear-gradient(108deg, transparent 38%, rgba(255, 255, 255, .3) 50%, transparent 62%) no-repeat, var(--lg-gloss) !important;
  background-size: 280% 100%, 100% 100% !important;
  animation: lg-button-sheen 3.6s linear infinite !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(229, 228, 226, .7), 0 0 16px rgba(229, 228, 226, .18), 0 4px 12px rgba(0, 0, 0, .6) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}
:root:root:root:root[data-glass="dark"] body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost)
  button:is(.primary, .is-primary, .asksary-composer-send, .live-chat-send, [class*="generate"], [class*="-primary"]):not([style*="background"]):not(:disabled):not(.liveloop-mode *) :is(span, i, svg, b, strong, small, em) {
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}

/* Tool bars (owner, 2026-10-01: "fix all these, the purple one looks really
   good for reference and its all blended in ... if it will look better black
   toolbar do it black"). Request 289's rule had a space before its :not()s,
   so it painted the black strip behind every element INSIDE a header: each
   title, "by Sary-OS", label, the credit count and the search field sat in
   its own black box. Headers now blend into the panel as Light's Image
   creator does (no strip, the skin's own line under them); only a tool's
   real toolbars (tab strips, ribbons, format bars, transports) are black
   glass, so their black keys sit in black. */
:root:root:root:root[data-glass="dark"] body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost)
  :is(#cl-tabbar, .dl-ribbon, [class$="-toolbar"], [class*="-toolbar "], [class$="-tabbar"], [class*="-tabbar "],
      .cmd-tabs, .fas-formatbar, .ave-transport, .mp-controls):not(.message *):not(.message-container *):not(.dl-page *):not(.CodeMirror *):not(#portal-dashboard > *) {
  background: var(--lg-tool-strip) !important; background-color: transparent !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .07) !important;
}
:root:root:root:root[data-glass="dark"] body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) :is(#portal-bar, #portal-side) {
  background: var(--lg-gloss-bar) !important; box-shadow: var(--lg-gloss-bar-shadow) !important;
}
/* The nav's tiles: glossy panes, the one on screen lit. */
:root:root:root:root[data-glass="dark"] body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #portal-bar .portal-tab {
  background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .03) 46%, rgba(255, 255, 255, 0) 54%), linear-gradient(180deg, #161618, #070707) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 1px 0 0 rgba(255, 255, 255, .06), inset -1px 0 0 rgba(0, 0, 0, .7) !important;
}
:root:root:root:root[data-glass="dark"] body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #portal-bar .portal-tab:hover { background: var(--lg-gloss-hover) !important; }
:root:root:root:root[data-glass="dark"] body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #portal-bar .portal-tab[aria-current="true"] {
  background: var(--lg-gloss-hover) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 var(--accent), 0 0 24px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}
:root:root:root:root[data-glass="dark"] body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #portal-bar .portal-tab :is(.portal-tab-label, .portal-tab-icon) { color: #fff !important; -webkit-text-fill-color: #fff !important; }
/* The right-hand column's square for the tool on screen (owner, 2026-10-01: "tool bar on the right
   has no indication to when its open"): the keys rule above painted it like every other square and
   the platinum edge was too faint to read. It is lit by the accent, as the bar's tile is: tinted,
   ringed, a bar down its left edge and a glow. The keys rule counts six ids (four boosts, #hamburger in
   its :is() and #portal-brand-menu in a :not()) and twenty-odd classes, so this carries seven boosts. */
:root:root:root:root[data-glass] body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #portal-side .portal-square:is([aria-current="true"], .is-over) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 38%, #0b0b0c), color-mix(in srgb, var(--accent) 16%, #0b0b0c)) !important; background-color: #0b0b0c !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px color-mix(in srgb, var(--accent) 80%, transparent), inset 3px 0 0 var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent) !important;
}
:root:root:root:root[data-glass="light"] body:is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost):is(*, #lg-boost) #portal-side .portal-square:is([aria-current="true"], .is-over) {
  /* Deep purple, not the accent on white (owner, 2026-10-03: "the tool bar is
     white on white text/background ... make it a deeper purple"). */
  background: linear-gradient(180deg, #7c3aed, #4c1d95) !important; background-color: #5b21b6 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 2px rgba(255, 255, 255, .7), 0 0 18px rgba(124, 58, 237, .55) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}

/* Music Studio's Duration slider showed as a tall white bar in Dark (owner,
   2026-10-01, with the blending pass): a thin glass track, the platinum fill
   up to the value, a dark thumb with a platinum ring. */
:root:root:root:root[data-glass="dark"] body:is(*, #lg-boost):is(*, #lg-boost) input.music-studio-slider[type="range"] {
  -webkit-appearance: none !important; appearance: none !important; height: 6px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important;
  background: linear-gradient(90deg, #8e9196, #e5e4e2) 0 / var(--music-slider-fill, 0%) 100% no-repeat, rgba(255, 255, 255, .14) !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .4) !important;
}
:root:root:root:root[data-glass="dark"] body:is(*, #lg-boost):is(*, #lg-boost) input.music-studio-slider[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important; width: 16px !important; height: 16px !important; border-radius: 50% !important; border: 2px solid #e5e4e2 !important; background: #0b0b0c !important;
}
:root:root:root:root[data-glass="dark"] body:is(*, #lg-boost):is(*, #lg-boost) input.music-studio-slider[type="range"]::-moz-range-thumb {
  width: 16px !important; height: 16px !important; border-radius: 50% !important; border: 2px solid #e5e4e2 !important; background: #0b0b0c !important;
}