/* Local library: a photo and video timeline (pill sidebar, search, day-grouped list rows or
   square thumbnails) and a QuickTime-style player. Colours are tokens on .local-library so
   dialogs rendered inside it inherit the theme. */
.local-library, .cloud-connect-dialog {
  --ll-bg: #ffffff; --ll-label: #1f1f1f; --ll-secondary: #5f6368; --ll-tertiary: #9aa0a6;
  --ll-separator: rgba(0, 0, 0, .08); --ll-hover: rgba(0, 0, 0, .05);
  --ll-selected: #d3e3fd; --ll-selected-ink: #041e49; --ll-accent: #0b57d0; --ll-fill: #f0f4f9;
  --ll-danger: #d70015; --ll-thumb: #e9ecf1; --ll-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 40px -12px rgba(0, 0, 0, .12);
  --ll-smoke: rgba(255, 255, 255, .95); --ll-smoke-cool: rgba(128, 154, 206, .7); --ll-smoke-warm: rgba(186, 160, 226, .62);
  --ll-frost: rgba(255, 255, 255, .3); --ll-grain: .5; --ll-haze: #d9dee7;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  color: var(--ll-label); -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] :is(.local-library, .cloud-connect-dialog) {
  --ll-bg: #1b1b1b; --ll-label: #e3e3e3; --ll-secondary: #a8abaf; --ll-tertiary: #74777c;
  --ll-separator: rgba(255, 255, 255, .09); --ll-hover: rgba(255, 255, 255, .06);
  --ll-selected: #004a77; --ll-selected-ink: #c2e7ff; --ll-accent: #a8c7fa; --ll-fill: #282a2c;
  --ll-danger: #ff8a80; --ll-thumb: #2a2b2d; --ll-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 50px -16px rgba(0, 0, 0, .7);
  --ll-smoke: rgba(255, 255, 255, .26); --ll-smoke-cool: rgba(104, 138, 206, .42); --ll-smoke-warm: rgba(158, 116, 214, .34);
  --ll-frost: rgba(255, 255, 255, .06); --ll-grain: .2; --ll-haze: #222326;
}
/* On the dashboard the library spans the page edge to edge below the link box: no visible
   heading, card edges or shadow; the page fades into it and it fills the screen once reached. */
body.cloud-page:has(.cloud-workspace-card > .local-library) { overflow-x: clip; }
/* The library runs to the bottom of the page: no strip of page colour below it. */
.cloud-page .cloud-dashboard-shell:has(#downloads-panel:not([hidden]) .cloud-workspace-card > .local-library) { padding-bottom: 0; }
.cloud-page .cloud-workspace-card > .local-library { --ll-fade: 96px; width: 100vw; margin: 12px 0 0 calc(50% - 50vw); }
.cloud-page .cloud-workspace-card > .local-library .local-library__heading { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cloud-page .cloud-workspace-card > .local-library::before { content: ""; display: block; height: var(--ll-fade); background: linear-gradient(var(--paper), transparent), var(--ll-bg); }
.cloud-page .cloud-workspace-card > .local-library .local-library__window { height: auto; min-height: 100dvh; overflow: clip; border: 0; border-radius: 0; box-shadow: none; }
/* One continuous page scroll from the link box into the photos: the grid does not scroll on its
   own, and the search bar and rail stay pinned while browsing. */
.cloud-page .cloud-workspace-card > .local-library .local-library__table { overflow: visible; overscroll-behavior: auto; }
.cloud-page .cloud-workspace-card > .local-library .local-library__toolbar { position: sticky; top: 0; z-index: 4; background: var(--ll-bg); }
.cloud-page .cloud-workspace-card > .local-library .local-library__sidebar { position: sticky; top: 0; align-self: start; }
.cloud-page .cloud-workspace-card > .local-library.is-dragging .local-library__window { box-shadow: inset 0 0 0 2px var(--ll-accent); }
.local-library__heading { margin: 0 0 14px; font-size: 22px; font-weight: 650; letter-spacing: -.025em; color: var(--ll-label); }
.cloud-page .local-library h2.local-library__heading { font-size: 22px; font-weight: 650; letter-spacing: -.025em; }
.local-library button, .local-library input, .local-library select { font-family: inherit; }
.local-library :is(button, a, input, select, [tabindex]):focus-visible { outline: 3px solid color-mix(in srgb, var(--ll-accent) 45%, transparent); outline-offset: 1px; }

/* Window */
.local-library__window { display: grid; grid-template-columns: 72px minmax(0, 1fr); height: clamp(520px, 78vh, 900px); border: 1px solid var(--ll-separator); border-radius: 20px; background: var(--ll-bg); box-shadow: var(--ll-shadow); overflow: hidden; }
.local-library.is-dragging .local-library__window { border-color: var(--ll-accent); }

/* Sidebar: a narrow rail of icons; the current one sits in a tinted pill */
.local-library__sidebar { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 0; padding: 14px 8px; background: var(--ll-bg); }
.local-library__sidebar ul { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.local-library__nav-item { display: grid; place-items: center; width: 52px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ll-secondary); cursor: pointer; }
.local-library__nav-item span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.local-library__nav-item:hover { background: var(--ll-hover); color: var(--ll-label); }
.local-library__nav-item[aria-current="page"] { background: var(--ll-selected); color: var(--ll-selected-ink); }
.local-library__nav-logo { width: 20px; height: 20px; border-radius: 5px; object-fit: contain; }
/* Hovering a rail icon plays a small one-off motion inside it: the back photo of the stack slides
   out, the photo's sun rises, the play triangle pushes forward, the download arrow drops and
   provider logos pop. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .local-library__nav-item [data-part] { transform-box: fill-box; transform-origin: center; }
  .local-library__nav-item:is(:hover, :focus-visible) > img { animation: local-library-nav-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
  .local-library__nav-item[data-icon="gallery"]:is(:hover, :focus-visible) [data-part="back"] { animation: local-library-nav-deal .55s cubic-bezier(.34, 1.56, .64, 1); }
  .local-library__nav-item[data-icon="gallery"]:is(:hover, :focus-visible) [data-part="front"] { animation: local-library-nav-lean .55s cubic-bezier(.34, 1.56, .64, 1); }
  .local-library__nav-item[data-icon="image"]:is(:hover, :focus-visible) [data-part="sun"] { animation: local-library-nav-sun .6s cubic-bezier(.34, 1.56, .64, 1); }
  .local-library__nav-item[data-icon="image"]:is(:hover, :focus-visible) [data-part="frame"] { animation: local-library-nav-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
  .local-library__nav-item[data-icon="video"]:is(:hover, :focus-visible) [data-part="play"] { animation: local-library-nav-play .55s cubic-bezier(.34, 1.56, .64, 1); }
  .local-library__nav-item[data-icon="active"]:is(:hover, :focus-visible) [data-part="arrow"] { animation: local-library-nav-drop .7s ease-in-out; }
}
@keyframes local-library-nav-pop { 50% { transform: scale(1.12) rotate(-5deg); } }
@keyframes local-library-nav-deal { 45% { transform: translate(2px, -2px) rotate(6deg); } }
@keyframes local-library-nav-lean { 45% { transform: rotate(-4deg) translate(-.5px, .5px); } }
@keyframes local-library-nav-sun { 45% { transform: translate(-1px, -2.5px) scale(1.6); } }
@keyframes local-library-nav-play { 40% { transform: translateX(1.5px) scale(1.3); } 70% { transform: translateX(-.5px) scale(.95); } }
@keyframes local-library-nav-drop { 35% { transform: translateY(3px); opacity: 0; } 36% { transform: translateY(-4px); opacity: 0; } 70% { transform: translateY(.5px); opacity: 1; } }
.local-library__menu-note { margin: 4px 10px 6px; color: var(--ll-secondary); font-size: 12px; }

/* Main: search and tools, then the timeline */
.local-library__main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; container: library / inline-size; }
.local-library__toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 16px 6px 0; }
.local-library__search { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 10px; background: var(--ll-fill); color: var(--ll-secondary); }
.local-library__search:focus-within { background: var(--ll-bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 4px 12px -4px rgba(0, 0, 0, .18); }
.local-library__search svg { flex-shrink: 0; }
.local-library__search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ll-label); font-size: 15px; text-align: left; }
.local-library__search input::-webkit-search-cancel-button,
.local-library__search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.local-library__search-clear { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ll-secondary); cursor: pointer; }
.local-library__search-clear:hover { background: var(--ll-hover); color: var(--ll-label); }
.local-library__search input::placeholder { color: var(--ll-secondary); }
.local-library .local-library__search input:focus-visible { outline: 0; }
.local-library__tools { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-left: auto; }
.local-library__folder-control { display: inline-flex; flex: 0 0 40px; height: 40px; }
.local-library__control { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ll-secondary); cursor: pointer; }
.local-library__control:hover:not(:disabled) { background: var(--ll-hover); color: var(--ll-label); }
/* Size slider: the site's cat rides a candy-coloured track, springing up and tilting while dragged. */
.local-library__zoom { --zoom-fill: 50%; display: flex; align-items: center; gap: 8px; margin: 0 10px 0 2px; color: var(--ll-secondary); cursor: pointer; }
.local-library__zoom input { width: 128px; height: 22px; margin: 0; padding: 0; border: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.local-library__zoom input::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #7aa7ff, #b48cff 55%, #ff8fb1) 0 0 / var(--zoom-fill) 100% no-repeat, var(--ll-fill); }
.local-library__zoom input::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #7aa7ff, #b48cff 55%, #ff8fb1) 0 0 / var(--zoom-fill) 100% no-repeat, var(--ll-fill); }
.local-library__zoom input::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -9px; border: 2px solid #fff; border-radius: 7px; background: #f3e9e6 url("assets/slider-cat.png") center / cover; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(0, 0, 0, .15); -webkit-appearance: none; appearance: none; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.local-library__zoom input::-moz-range-thumb { box-sizing: border-box; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 7px; background: #f3e9e6 url("assets/slider-cat.png") center / cover; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(0, 0, 0, .15); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.local-library__zoom:hover input::-webkit-slider-thumb, .local-library__zoom input:focus-visible::-webkit-slider-thumb { transform: scale(1.15) rotate(-6deg); }
.local-library__zoom:hover input::-moz-range-thumb, .local-library__zoom input:focus-visible::-moz-range-thumb { transform: scale(1.15) rotate(-6deg); }
.local-library__zoom input:active::-webkit-slider-thumb { transform: scale(1.35) rotate(8deg); }
.local-library__zoom input:active::-moz-range-thumb { transform: scale(1.35) rotate(8deg); }
.local-library .local-library__zoom input:focus-visible { outline: 0; }
.local-library__zoom input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ll-accent) 55%, transparent), 0 1px 4px rgba(0, 0, 0, .3); }
.local-library__zoom input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ll-accent) 55%, transparent), 0 1px 4px rgba(0, 0, 0, .3); }
.local-library__zoom:focus-within { color: var(--ll-label); }
@media (prefers-reduced-motion: reduce) { .local-library__zoom input::-webkit-slider-thumb, .local-library__zoom input::-moz-range-thumb { transition: none; } }
.local-library__control:disabled { opacity: .35; cursor: default; }
.local-library__error { display: flex; align-items: flex-start; gap: 8px; margin: 8px 16px 0 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ll-danger) 10%, transparent); color: var(--ll-danger); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.local-library__error svg { flex-shrink: 0; margin-top: 1px; }

/* Timeline: square tiles sized by the zoom level, grouped by day */
.local-library__table { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 24px 0; }
.local-library__day h4 { margin: 18px 2px 10px; color: var(--ll-label); font-size: 14px; font-weight: 500; }
.local-library__files { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--ll-tile, 96px), 100%), 1fr)); gap: 4px; list-style: none; margin: 0; padding: 0; }
.local-library__files.is-dense { gap: 2px; }
/* Tiles stay rendered offscreen (no content-visibility) so thumbnails never
   blank out and repaint while scrolling back; the library is at most 1,000 files. */
.local-library__tile { position: relative; aspect-ratio: 1; min-width: 0; }
.local-library__tile.is-expanded { z-index: 6; }
.local-library__selection { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 0 16px 0 2px; color: var(--ll-secondary); font-size: 12px; }
.local-library__selection > span { flex: 1; }
.local-library__selection button { padding: 4px; border: 0; background: transparent; color: var(--ll-accent); cursor: pointer; font-size: inherit; }
.local-library__selection button:disabled { opacity: .4; cursor: default; }
.local-library__selection-touch { display: none; }
.local-library__selection-box { position: fixed; z-index: 20; box-sizing: border-box; border: 1px solid #2383f6; background: rgb(35 131 246 / 18%); pointer-events: none; }
.local-library__window.is-selecting, .local-library__window.is-selecting * { cursor: crosshair !important; user-select: none; -webkit-user-select: none; }
/* The pane receives focus for selection shortcuts; its controls show keyboard focus. */
.local-library .local-library__table:focus { outline: none; }
.local-library__tile.is-selected::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 2px #2383f6; background: rgb(35 131 246 / 12%); pointer-events: none; }
.local-library__select { position: absolute; top: 6px; left: 6px; z-index: 3; width: 18px; height: 18px; margin: 0; accent-color: #0b57d0; opacity: 0; cursor: pointer; }
.local-library__files.is-dense .local-library__select { top: 3px; left: 3px; }
.local-library__tile:is(:hover, :focus-within, .is-selected) > .local-library__select { opacity: 1; }
.local-library__files.is-list .local-library__select { position: static; flex-shrink: 0; margin-left: 10px; opacity: 1; }
.local-library__files.is-tiny .local-library__select { width: 1px; height: 1px; top: 0; left: 0; opacity: 0; }
.local-library__files.is-tiny .local-library__tile:focus-within { outline: 2px solid var(--ll-accent); outline-offset: 1px; }
@media (hover: none) and (pointer: coarse) {
  .local-library__select { opacity: 1; }
  .local-library__selection-hint { display: none; }
  .local-library__selection-touch { display: inline; }
}
/* Tiny squares: a dense mosaic of static thumbnails. */
.local-library__files.is-tiny { gap: 3px; }
.local-library__files.is-tiny .local-library__thumbnail { border-radius: 3px; }
.local-library__files.is-tiny .local-library__tile[data-status="failed"] .local-library__thumbnail { outline: 2px solid var(--ll-danger); outline-offset: -2px; }
.local-library__files.is-tiny :is(.local-library__thumbnail > svg, .local-library__more, .local-library__caption) { display: none; }
.local-library__files.is-tiny .local-library__actions { top: calc(100% + 4px); left: 0; }
.local-library__files.is-tiny .is-menu-right .local-library__actions { left: auto; right: 0; }
.local-library__files.is-tiny .is-menu-up .local-library__actions { top: auto; bottom: calc(100% + 4px); }
.local-library__open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: zoom-in; }
.local-library .local-library__open:disabled { cursor: default; color: inherit; opacity: 1; pointer-events: none; }
.local-library__tile[draggable="true"], .local-library__tile[draggable="true"] .local-library__open:not(:disabled) { cursor: grab; }
.local-library__tile[draggable="true"]:active, .local-library__tile[draggable="true"]:active .local-library__open:not(:disabled),
.local-library:has(.local-library__tile[data-dragging="true"]), .local-library:has(.local-library__tile[data-dragging="true"]) * { cursor: grabbing; }
.local-library .local-library__open:focus-visible { outline: 0; }
.local-library__open:focus-visible .local-library__thumbnail { outline: 3px solid var(--ll-accent); outline-offset: -3px; }
.local-library__thumbnail { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; background: var(--ll-haze, var(--ll-thumb)); color: var(--ll-secondary); }
.local-library__thumbnail img, .local-library__thumbnail video, .local-library__thumbnail canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.local-library__thumbnail > svg { position: relative; z-index: 2; width: min(44px, 30%); height: min(44px, 30%); stroke-width: 1.3; opacity: .8; }
/* Every grid card carries its filename, type and available size. */
.local-library__thumbnail { container: file-thumbnail / inline-size; }
.local-library__thumbnail:has(.local-library__file-details) > svg { align-self: start; margin-top: 18%; }
.local-library__file-details { position: absolute; inset: auto 0 0; z-index: 3; display: flex; flex-direction: column; gap: 3px; padding: 26px 12px 12px; background: linear-gradient(transparent, var(--ll-bg) 30%); color: var(--ll-label); text-align: left; pointer-events: none; }
.local-library__file-details strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: 12px; font-weight: 550; line-height: 1.3; }
.local-library__file-type, .local-library__file-size { color: var(--ll-secondary); font-size: 10px; line-height: 1.3; }
.local-library__file-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.local-library__files.is-tiny .local-library__file-details { display: none; }
.local-library__open:has(.local-library__file-details) > .local-library__caption { inset: 0 0 auto; z-index: 4; padding: 8px; background: linear-gradient(rgba(0, 0, 0, .55), transparent); }
/* A failed card names its failure in red below the filename instead of a red
   bar across the top, which covered the select and menu buttons. The caption
   stays for screen readers. */
.local-library__tile[data-status="failed"] .local-library__open:has(.local-library__file-details) > .local-library__caption { inset: auto; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.local-library__tile[data-status="failed"] .local-library__thumbnail { outline: 1.5px solid color-mix(in srgb, var(--ll-danger) 55%, transparent); outline-offset: -1.5px; }
.local-library__file-type.is-failed { color: var(--ll-danger); font-weight: 550; }
@container file-thumbnail (max-width: 110px) {
  .local-library__file-details { gap: 2px; padding: 15px 6px 6px; }
  .local-library__file-details strong { -webkit-line-clamp: 1; font-size: 10px; }
  .local-library__file-type { font-size: 9px; }
  .local-library__file-size { display: none; }
}
@container file-thumbnail (max-width: 72px) {
  .local-library__file-details { padding: 12px 4px 4px; }
  .local-library__file-details strong { display: none; }
}
/* Keep the placeholder in the same square until a decoded frame is ready. */
.local-library__thumbnail::before, .local-library__thumbnail::after { content: ""; position: absolute; pointer-events: none; }
.local-library__thumbnail::before {
  inset: -30%; filter: blur(6px);
  background: radial-gradient(closest-side, var(--ll-smoke), transparent), radial-gradient(closest-side, var(--ll-smoke-cool), transparent),
    radial-gradient(closest-side, var(--ll-smoke-warm), transparent), radial-gradient(closest-side, var(--ll-smoke), transparent),
    radial-gradient(closest-side, var(--ll-smoke-cool), transparent);
  background-size: 62% 48%, 58% 62%, 64% 50%, 40% 34%, 44% 40%; background-repeat: no-repeat;
  background-position: 22% 26%, 82% 72%, 26% 86%, 80% 18%, 52% 50%;
}
.local-library__thumbnail::after {
  inset: 0; border-radius: inherit; opacity: var(--ll-grain);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 96px 96px,
    linear-gradient(140deg, var(--ll-frost), transparent 45%, var(--ll-frost));
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .35);
}
.local-library__thumbnail > :is(img, video, canvas) { opacity: 0; transition: opacity 160ms ease-out; }
.local-library__thumbnail[data-ready="true"] > :is(img, canvas), .local-library__thumbnail > video[data-decoded="true"] { opacity: 1; }
.local-library__thumbnail[data-ready="true"] > svg { opacity: 0; }
.local-library__thumbnail[data-ready="true"]::before, .local-library__thumbnail[data-ready="true"]::after { visibility: hidden; }
/* Once cached, returning to a still does not replay a reveal animation. */
.local-library__thumbnail > canvas { transition: none; }
html:has(.local-library) { scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) { .local-library__thumbnail > :is(img, video, canvas) { transition: none; } }
.local-library__spin { animation: local-library-spin 1s linear infinite; }
@keyframes local-library-spin { to { transform: rotate(360deg); } }
.local-library__caption { position: absolute; inset: auto 0 0; z-index: 1; padding: 18px 8px 6px; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); color: #fff; font-size: 11.5px; font-weight: 500; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.local-library__tile[data-status="failed"] .local-library__caption { background: linear-gradient(transparent, rgba(160, 0, 20, .7)); }
.local-library__more { position: absolute; top: 6px; right: 6px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(32, 33, 36, .45); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; }
.local-library__more:hover, .local-library__more[aria-expanded="true"] { background: rgba(32, 33, 36, .7); }
.local-library__files .local-library__cancel { display: grid; opacity: 1; }
.local-library__cancel:disabled { cursor: wait; }
/* A failed save that TinyFish can retry offers it directly on the tile: a
   compact tonal pill centred over the empty preview in the grid, and an
   inline button beside the time in list rows. Tonal colours keep contrast in
   both themes (the dark accent is too light for white text). */
.local-library__tinyfish { position: absolute; top: 50%; left: 50%; z-index: 5; display: inline-flex; align-items: center; justify-content: center; gap: 6px; max-width: calc(100% - 16px); height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--ll-selected); color: var(--ll-selected-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .12); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transform: translate(-50%, -50%); transition: filter .12s, box-shadow .12s; }
.local-library__tinyfish > span { overflow: hidden; text-overflow: ellipsis; }
.local-library__tinyfish-short { display: none; }
.local-library__tinyfish > svg { flex-shrink: 0; }
.local-library__tinyfish:hover:not(:disabled) { filter: brightness(.96); box-shadow: 0 1px 3px rgba(0, 0, 0, .22), 0 4px 12px rgba(0, 0, 0, .14); }
.local-library__tinyfish:focus-visible { outline: 2px solid var(--ll-accent); outline-offset: 2px; }
.local-library__tinyfish:disabled { cursor: wait; opacity: .75; }
.local-library__files.is-tiny .local-library__tinyfish { display: none; }
/* Narrow tiles shorten the label; dense tiles show only the retry icon (the
   button keeps its full accessible name). */
.local-library__files.is-medium .local-library__tinyfish { padding: 0 12px; }
.local-library__files.is-medium .local-library__tinyfish .local-library__tinyfish-label { display: none; }
.local-library__files.is-medium .local-library__tinyfish .local-library__tinyfish-short { display: inline; }
.local-library__files.is-dense .local-library__tinyfish { width: 32px; height: 32px; padding: 0; }
.local-library__files.is-dense .local-library__tinyfish > span { display: none; }
.local-library__files.is-dense .local-library__tinyfish { top: 44%; }
.local-library__files.is-dense .local-library__tile:has(> .local-library__tinyfish) .local-library__thumbnail > svg { visibility: hidden; }
.local-library__files.is-list .local-library__tinyfish { position: static; flex-shrink: 0; height: 32px; margin-left: 8px; padding: 0 12px; box-shadow: none; font-size: 12.5px; transform: none; }
@media (pointer: coarse) { .local-library__tinyfish { height: 44px; } .local-library__files.is-dense .local-library__tinyfish { width: 44px; } .local-library__files.is-list .local-library__tinyfish { height: 40px; } }
@media (max-width: 560px) { .local-library__files.is-list .local-library__tinyfish { padding: 0 10px; } .local-library__files.is-list .local-library__tinyfish .local-library__tinyfish-label { display: none; } .local-library__files.is-list .local-library__tinyfish .local-library__tinyfish-short { display: inline; } }
@media (pointer: coarse) { .local-library__files:not(.is-tiny) .local-library__cancel { width: 44px; height: 44px; } }
.local-library__files.is-dense .local-library__more { top: 3px; right: 3px; width: 24px; height: 24px; }
@media (hover: hover) {
  .local-library__more { opacity: 0; transition: opacity .12s; }
  .local-library__tile:is(:hover, :focus-within, .is-expanded, [aria-busy="true"]) .local-library__more { opacity: 1; }
}
/* The actions open as a context menu beside the More button. */
.local-library__actions { position: absolute; top: 40px; left: 6px; z-index: 6; display: none; flex-direction: column; width: max-content; min-width: 210px; max-width: 280px; max-height: var(--ll-menu-height, none); overflow-y: auto; translate: var(--ll-menu-x, 0px) var(--ll-menu-y, 0px); padding: 6px; border-radius: 14px; background: color-mix(in srgb, var(--ll-bg) 92%, transparent); box-shadow: 0 14px 40px -10px rgba(0, 0, 0, .32), 0 0 0 .5px var(--ll-separator); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); }
.local-library__tile.is-expanded .local-library__actions { display: flex; }
.local-library__actions > * { flex-shrink: 0; }
.local-library__tile.is-menu-right .local-library__actions { left: auto; right: 6px; }
.local-library__tile.is-menu-up .local-library__actions { top: auto; bottom: calc(100% - 36px); }
.local-library__menu-info { display: grid; gap: 2px; margin: 0 0 4px; padding: 6px 10px 9px; border-bottom: 1px solid var(--ll-separator); text-align: left; }
.local-library__menu-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ll-label); font-size: 13px; font-weight: 600; }
.local-library__menu-info span { color: var(--ll-secondary); font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; }
.local-library__action { display: flex; align-items: center; gap: 12px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ll-label); font-size: 13.5px; text-align: left; text-decoration: none; cursor: pointer; }
.local-library__action svg { flex-shrink: 0; color: var(--ll-secondary); }
.local-library__action:hover:not(:disabled), .local-library__action:focus-visible { background: var(--ll-hover); }
.local-library__action.is-danger, .local-library__action.is-danger svg { color: var(--ll-danger); }
.local-library__action.is-ready, .local-library__action.is-ready svg { color: var(--ll-accent); font-weight: 600; }
.local-library__action:disabled { opacity: .4; cursor: default; }

/* Layout switch: list rows (the default) or the grid of squares; the current one sits in a pill. */
.local-library__layout { display: flex; gap: 2px; margin-right: 8px; padding: 3px; border-radius: 999px; background: var(--ll-fill); }
.local-library__layout-option { display: grid; place-items: center; width: 34px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ll-secondary); cursor: pointer; }
.local-library__layout-option:hover { color: var(--ll-label); }
.local-library__layout-option[aria-pressed="true"] { background: var(--ll-selected); color: var(--ll-selected-ink); }
/* List: one row per file with a small thumbnail, name, kind and size, then the time or progress;
   the More button stays visible at the end of the row and its menu opens beneath it. */
.local-library__files.is-list { display: flex; flex-direction: column; gap: 2px; }
.local-library__files.is-list .local-library__tile { display: flex; align-items: center; aspect-ratio: auto; border-radius: 12px; contain-intrinsic-size: auto 60px; }
.local-library__files.is-list .local-library__tile:is(:hover, .is-expanded) { background: var(--ll-hover); }
.local-library__files.is-list .local-library__open { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "thumb text date"; align-items: center; column-gap: 14px; flex: 1; min-width: 0; height: auto; padding: 8px 4px 8px 8px; border-radius: 12px; text-align: left; }
.local-library__files.is-list .local-library__open:focus-visible { box-shadow: inset 0 0 0 2px var(--ll-accent); }
.local-library__files.is-list .local-library__open:focus-visible .local-library__thumbnail { outline: 0; }
.local-library__files.is-list .local-library__thumbnail { grid-area: thumb; width: 44px; height: 44px; border-radius: 8px; }
.local-library__files.is-list .local-library__thumbnail > svg { width: 20px; height: 20px; }
.local-library__row-text { grid-area: text; display: grid; gap: 2px; min-width: 0; }
.local-library__row-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.local-library__row-text strong { color: var(--ll-label); font-size: 14px; font-weight: 500; }
.local-library__row-text span, .local-library__row-date { color: var(--ll-secondary); font-size: 12.5px; }
.local-library__row-date { grid-area: date; white-space: nowrap; font-variant-numeric: tabular-nums; }
.local-library__tile[data-status="failed"] .local-library__row-date { color: var(--ll-danger); }
.local-library__files.is-list .local-library__more { position: static; flex-shrink: 0; width: 36px; height: 36px; margin-right: 4px; background: transparent; color: var(--ll-secondary); opacity: 1; backdrop-filter: none; -webkit-backdrop-filter: none; }
.local-library__files.is-list .local-library__more:is(:hover, [aria-expanded="true"]) { background: var(--ll-hover); color: var(--ll-label); }
.local-library__files.is-list .local-library__more svg { stroke-width: 2.8; }
.local-library__files.is-list .local-library__actions { top: calc(100% - 6px); right: 8px; left: auto; }
.local-library__files.is-list .is-menu-up .local-library__actions { top: auto; bottom: calc(100% - 6px); }
.local-library__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 40px 20px; text-align: center; color: var(--ll-secondary); }
.local-library__empty-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; background: var(--ll-fill); color: var(--ll-secondary); }
.local-library__empty p { margin: 0; color: var(--ll-label); font-size: 16px; font-weight: 500; }
.local-library__empty span:not(.local-library__empty-icon) { font-size: 13px; }
.local-library__thumbnail-upload { position: absolute; inset: auto 6px 6px; z-index: 4; display: block; width: calc(100% - 12px); height: 3px; margin: 0; padding: 0; border: 0; border-radius: 3px; overflow: hidden; appearance: none; -webkit-appearance: none; background: var(--ll-fill); color: var(--ll-accent); }
.local-library__open:has(.local-library__thumbnail-upload) .local-library__caption { padding-bottom: 15px; }
.local-library__thumbnail-upload::-webkit-progress-bar { background: var(--ll-fill); border-radius: 3px; }
.local-library__thumbnail-upload::-webkit-progress-value { background: var(--ll-accent); border-radius: 3px; }
.local-library__thumbnail-upload::-moz-progress-bar { background: var(--ll-accent); border-radius: 3px; }
.local-library__files.is-tiny .local-library__thumbnail-upload { inset: auto 2px 2px; width: calc(100% - 4px); height: 2px; }
.local-library__dropzone { position: fixed; inset: 16px; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 2px dashed var(--ll-accent); border-radius: 16px; background: color-mix(in srgb, var(--ll-bg) 82%, transparent); color: var(--ll-accent); font-size: 15px; font-weight: 600; pointer-events: none; backdrop-filter: blur(4px); }

/* Narrow pane: smaller rows so phones show several photos across. */
@container library (max-width: 600px) {
  .local-library__toolbar { padding: 10px 10px 4px; }
  .local-library__search { height: 42px; gap: 8px; padding: 0 14px; }
  /* The search bar takes its own row so its centred text has room; tools sit underneath. */
  .local-library__toolbar { flex-wrap: wrap; gap: 6px 4px; }
  .local-library__search { flex-basis: 100%; }
  .local-library__tools { max-width: 100%; margin-left: auto; }
  .local-library__layout { flex-shrink: 0; }
  .local-library__control { width: 36px; height: 36px; }
  .local-library__zoom { min-width: 0; gap: 5px; margin: 0 4px 0 0; }
  .local-library__zoom svg { flex-shrink: 0; }
  .local-library__zoom input { min-width: 0; width: 120px; }
  .local-library__table { padding: 0 10px 18px; }
  /* Rows stack the time under the kind and size so the name keeps the width. */
  .local-library__files.is-list .local-library__open { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "thumb text" "thumb date"; column-gap: 12px; padding-left: 6px; }
  .local-library__files.is-list .local-library__row-date { overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 720px) {
  .cloud-page .cloud-workspace-card > .local-library { --ll-fade: 24px; margin-top: 8px; }
  .cloud-page .cloud-workspace-card > .local-library .local-library__sidebar { position: sticky; top: auto; bottom: 0; align-self: stretch; }
  .local-library__window { display: flex; flex-direction: column; height: auto; min-height: 480px; }
  /* The rail becomes a bottom tab bar that stays in reach while browsing photos. */
  .local-library__sidebar { order: 2; position: sticky; bottom: 0; z-index: 5; flex-direction: row; justify-content: center; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ll-separator); background: color-mix(in srgb, var(--ll-bg) 86%, transparent); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); }
  .local-library__sidebar ul { display: flex; justify-content: center; gap: 2px; width: 100%; min-width: 0; }
  .local-library__sidebar li { flex: 0 1 54px; min-width: 0; }
  .local-library__nav-item { width: 100%; max-width: 54px; height: 40px; }
  .local-library__main { flex: 1; }
  .local-library__table { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { .local-library__spin { animation: none; } }

/* Touch screens: long-press opens the action sheet without the system image callout, and a
   two-finger pinch on the grid resizes thumbnails while vertical scrolling stays native. */
@media (hover: none) and (pointer: coarse) {
  .local-library__tile { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .local-library__table { touch-action: pan-y; }
}
/* Action sheet (touch only): the tile's actions slide up from the bottom of the screen. */
.local-library__dialog.local-library__sheet { width: min(520px, 100%); max-width: none; margin: auto auto 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: local-library-sheet .28s cubic-bezier(.2, .9, .3, 1); }
.local-library__dialog.local-library__sheet::backdrop { background: rgba(0, 0, 0, .35); backdrop-filter: none; }
.local-library__sheet .local-library__actions.is-sheet { position: static; display: flex; width: auto; min-width: 0; max-width: none; padding: 6px; border-radius: 16px; background: var(--ll-bg); box-shadow: 0 8px 30px rgba(0, 0, 0, .25); }
.local-library__sheet .local-library__menu-info { padding: 10px 12px 12px; }
.local-library__sheet .local-library__menu-info strong { font-size: 15px; }
.local-library__sheet .local-library__menu-info span { font-size: 13px; }
.local-library__sheet .local-library__action { height: 50px; gap: 14px; padding: 0 12px; border-radius: 11px; font-size: 16px; }
.local-library__sheet .local-library__action svg { width: 20px; height: 20px; }
.local-library__sheet-cancel { width: 100%; height: 54px; margin-top: 8px; border: 0; border-radius: 16px; background: var(--ll-bg); color: var(--ll-accent); font-size: 17px; font-weight: 600; box-shadow: 0 8px 30px rgba(0, 0, 0, .25); }
@keyframes local-library-sheet { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .local-library__dialog.local-library__sheet { animation: none; } }

/* Sheets (rename, delete) */
.local-library__dialog { width: min(420px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--ll-separator); border-radius: 14px; background: var(--ll-bg); color: var(--ll-label); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .35); }
.local-library__dialog::backdrop { background: rgba(0, 0, 0, .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
:root[data-theme="dark"] .local-library__dialog::backdrop { background: rgba(0, 0, 0, .55); }
.local-library__dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.local-library__dialog h3 { margin: 0; font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.local-library__dialog-heading > button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--ll-fill); color: var(--ll-secondary); }
.local-library__dialog :is(input, select) { box-sizing: border-box; width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--ll-separator); border-radius: 8px; background: var(--ll-fill); color: var(--ll-label); font-size: 13px; }
.local-library__dialog :is(input, select):focus { outline: 0; border-color: var(--ll-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ll-accent) 35%, transparent); }
.local-library__dialog p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ll-secondary); }
.local-library__dialog .local-library__dialog-error { margin-bottom: 12px; color: var(--ll-danger); }
.local-library__dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.local-library__dialog-actions button { min-width: 76px; height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--ll-fill); color: var(--ll-label); font-size: 13px; font-weight: 500; }
.local-library__dialog-actions .is-primary { background: var(--ll-accent); color: #fff; }
:root[data-theme="dark"] .local-library__dialog-actions .is-primary { color: #062e6f; }
.local-library__dialog-actions .is-danger { background: var(--ll-danger); color: #fff; }
.local-library__dialog-actions button:disabled { opacity: .5; }

/* Player */
.local-library__player { --ll-glass: rgba(28, 28, 30, .62); width: min(1100px, calc(100vw - 48px)); max-width: none; padding: 0; border: 0; border-radius: 14px; background: #000; color: #fff; overflow: hidden; box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .7); }
.local-library__player::backdrop { background: rgba(0, 0, 0, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.local-library__stage { position: relative; display: grid; place-items: center; min-height: min(360px, 60vh); background: #000; outline: 0; }
.local-library__media { display: block; width: 100%; max-height: 82vh; object-fit: contain; }
.local-library__player.is-idle .local-library__stage { cursor: none; }
.local-library__player-bar { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 14px 36px 18px; background: linear-gradient(rgba(0, 0, 0, .55), transparent); transition: opacity .25s; }
.local-library__player-title { display: grid; flex: 1; gap: 2px; min-width: 0; padding-top: 5px; }
.media-preview-navigation { display: flex; flex: none; gap: 4px; }
.media-preview-navigation button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: rgba(28, 28, 30, .72); color: #fff; cursor: pointer; }
.media-preview-navigation button:disabled { opacity: .35; cursor: default; }
.media-preview-navigation button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.media-preview-navigation__previous { transform: rotate(180deg); }
.local-library__player-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.local-library__player-title span { color: rgba(255, 255, 255, .7); font-size: 11.5px; }
.local-library__glass-button { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--ll-glass); color: #fff; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }
.local-library__glass-button:hover { background: rgba(60, 60, 64, .75); }
.local-library__controls { position: absolute; left: 50%; bottom: 16px; z-index: 2; width: min(620px, calc(100% - 32px)); transform: translateX(-50%); padding: 10px 14px 8px; border-radius: 16px; background: var(--ll-glass); box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 .5px rgba(255, 255, 255, .14); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); transition: opacity .25s, transform .25s; }
.local-library__player.is-idle :is(.local-library__controls, .local-library__player-bar) { opacity: 0; pointer-events: none; }
.local-library__player.is-idle .local-library__controls { transform: translate(-50%, 6px); }
.local-library__timeline { display: flex; align-items: center; gap: 10px; }
.local-library__time { min-width: 38px; color: rgba(255, 255, 255, .78); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.local-library__time:last-child { text-align: right; }
.local-library__player input:is(.local-library__scrubber, .local-library__volume) { box-sizing: border-box; min-height: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; outline-offset: 4px; }
.local-library__scrubber, .local-library__volume { flex: 1; min-width: 0; height: 16px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.local-library__scrubber::-webkit-slider-runnable-track, .local-library__volume::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: linear-gradient(to right, #fff 0 var(--played), rgba(255, 255, 255, .45) var(--played) var(--loaded), rgba(255, 255, 255, .2) var(--loaded) 100%); }
.local-library__scrubber::-moz-range-track, .local-library__volume::-moz-range-track { height: 5px; border-radius: 3px; background: linear-gradient(to right, #fff 0 var(--played), rgba(255, 255, 255, .45) var(--played) var(--loaded), rgba(255, 255, 255, .2) var(--loaded) 100%); }
.local-library__scrubber::-webkit-slider-thumb, .local-library__volume::-webkit-slider-thumb { width: 13px; height: 13px; margin-top: -4px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); -webkit-appearance: none; appearance: none; transform: scale(0); transition: transform .12s; }
.local-library__scrubber::-moz-range-thumb, .local-library__volume::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .12s; }
:is(.local-library__scrubber, .local-library__volume):is(:hover, :focus-visible, :active)::-webkit-slider-thumb { transform: scale(1); }
:is(.local-library__scrubber, .local-library__volume):is(:hover, :focus-visible, :active)::-moz-range-thumb { transform: scale(1); }
.local-library__scrubber:disabled { cursor: default; opacity: .5; }
.local-library__transport { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 2px; }
.local-library__transport-side, .local-library__transport-main { display: flex; align-items: center; gap: 2px; }
.local-library__transport-main { gap: 14px; }
.local-library__transport-side.is-end { justify-content: flex-end; }
.local-library__transport button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .92); cursor: pointer; }
.local-library__transport button:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.local-library__transport .local-library__play { width: 46px; height: 46px; }
.local-library__volume { flex: 0 1 80px; }
.local-library__skip-icon { position: relative; display: grid; place-items: center; }
.local-library__skip-icon > span { position: absolute; font-size: 7.5px; font-weight: 700; letter-spacing: -.02em; padding-top: 2px; }
.local-library__speed { position: relative; display: grid; place-items: center; min-width: 38px; height: 26px; margin-right: 2px; padding: 0 7px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .92); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.local-library__speed:hover { background: rgba(255, 255, 255, .12); }
.local-library__speed:focus-within { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.local-library__speed select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.local-library__player :is(button, input):focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 2px; }
.local-library__buffering { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; color: rgba(255, 255, 255, .85); }
.local-library__buffering svg { padding: 14px; box-sizing: content-box; border-radius: 50%; background: rgba(28, 28, 30, .5); animation: local-library-spin 1s linear infinite; }
.local-library__preview-message { display: grid; justify-items: center; gap: 14px; padding: 90px 24px; text-align: center; color: rgba(255, 255, 255, .85); font-size: 13px; }
.local-library__preview-message p { margin: 0; max-width: 360px; line-height: 1.6; }
.local-library__preview-message button { height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 13px; }
.local-library__player.is-audio .local-library__stage { min-height: min(420px, calc(100dvh - 48px)); background: radial-gradient(circle at 50% 35%, #3a2a4f, #121214 70%); }
.local-library__artwork { display: grid; place-items: center; padding-bottom: 90px; }
.local-library__artwork > span { display: grid; place-items: center; width: 168px; height: 168px; border-radius: 24px; background: linear-gradient(145deg, #bf5af2, #5e5ce6); box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .6); }
.local-library__player.is-audio .local-library__player-bar { background: none; }
.local-library__player.is-image .local-library__stage { min-height: 240px; }
.local-library__stage:fullscreen { width: 100vw; height: 100vh; }
.local-library__stage:fullscreen .local-library__media { width: 100%; height: 100%; max-height: none; }
@media (hover: none) { .local-library__volume { display: none; } }
@media (hover: none), (pointer: coarse) {
  .local-library__player-bar { padding-top: max(14px, env(safe-area-inset-top)); padding-right: max(14px, env(safe-area-inset-right)); padding-left: max(18px, env(safe-area-inset-left)); }
  .local-library__player.is-idle .local-library__player-bar { opacity: 1; pointer-events: auto; }
  .local-library__glass-button, .media-preview-navigation button { width: 44px; height: 44px; }
}
@media (max-width: 640px) {
  .local-library__player { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
  .local-library__stage { height: 100%; }
  .local-library__media { max-height: 100dvh; }
  .local-library__controls { bottom: max(16px, env(safe-area-inset-bottom)); width: calc(100% - 20px); padding: 8px 10px 6px; }
  .local-library__transport-main { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .local-library__controls, .local-library__player-bar { transition: none; } .local-library__buffering svg { animation: none; } }

/* Account popover. Keep narrow-panel layout independent of full-page cards. */
.cloud-page #dashboard-account-menu { width: min(352px, calc(100vw - 32px)); min-width: 0; max-width: none; top: calc(100% + 10px); max-height: calc(100dvh - 104px); overflow-y: auto; padding: 8px; border-radius: 16px; overscroll-behavior: contain; box-shadow: 0 16px 48px -12px #0003, 0 4px 12px -4px #0001; }
#dashboard-account-menu :is(button, a, summary):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.account-menu__identity { display: flex; align-items: center; gap: 12px; padding: 12px 12px 18px; }
.account-menu__avatar { position: relative; display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; overflow: hidden; border: 1px solid var(--line); border-radius: 50%; background: var(--soft); color: var(--ink); font-size: 17px; font-weight: 600; }
.account-menu__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.account-menu__avatar img[hidden] { display: none; }
.account-menu__who { display: grid; gap: 3px; min-width: 0; }
.account-menu__who strong, .account-menu__email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__who strong { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.4; }
.account-menu__email { color: var(--muted); font-size: 12px; line-height: 1.4; }
.account-menu__plan { justify-self: start; margin-top: 3px; padding: 3px 8px; border-radius: 6px; background: var(--soft); color: var(--muted); font-size: 10px; font-weight: 550; line-height: 1.3; }
.account-menu__plan.is-paid { background: color-mix(in srgb, var(--warm) 12%, var(--paper)); color: var(--ink); }
.account-menu__meter { display: grid; gap: 8px; margin: 0 4px 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.account-menu__meter-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.account-menu__meter-row strong { flex-shrink: 0; color: var(--ink); font-size: 12px; font-weight: 550; font-variant-numeric: tabular-nums; }
.account-menu__credit-packs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.account-menu__credit-packs button { flex: 1 1 0; min-width: 0; min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink); font: inherit; font-size: 12px; font-weight: 550; font-variant-numeric: tabular-nums; cursor: pointer; -webkit-appearance: none; appearance: none; }
.account-menu__credit-packs button:hover:not(:disabled) { background: var(--soft); }
.account-menu__credit-packs button:disabled { cursor: default; opacity: .6; }
.account-menu__credit-error { color: var(--danger, #b42318); }
.account-menu__meter progress { display: block; width: 100%; height: 4px; border: 0; border-radius: 999px; background: var(--line); overflow: hidden; -webkit-appearance: none; appearance: none; }
.account-menu__meter progress::-webkit-progress-bar { background: var(--line); border-radius: 999px; }
.account-menu__meter progress::-webkit-progress-value { background: var(--ink); border-radius: 999px; }
.account-menu__meter progress::-moz-progress-bar { background: var(--ink); border-radius: 999px; }
.account-menu__meter small { color: var(--muted); font-size: 11px; line-height: 1.4; }
#dashboard-account-menu .cloud-entitlement { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 10px; min-height: 0; margin: 0; padding: 14px 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.account-menu__section-label { color: var(--muted); font-size: 11px; font-weight: 550; line-height: 1.5; }
.account-menu__offer { display: grid; gap: 4px; }
.account-menu__offer strong { color: var(--ink); font-size: 13px; font-weight: 550; line-height: 1.5; }
.account-menu__offer span { color: var(--muted); font-size: 12px; }
#dashboard-account-menu .cloud-entitlement__actions { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; gap: 4px 14px; margin: 0; }
#dashboard-account-menu .cloud-entitlement__actions .button { flex: 1 0 100%; justify-content: center; width: 100%; min-height: 40px; height: auto; padding: 9px 12px; border-radius: 8px; font-size: 12px; font-weight: 550; line-height: 1.5; white-space: normal; }
#dashboard-account-menu .cloud-entitlement__actions .account-menu__manage { justify-content: space-between; background: transparent; border: 1px solid var(--line); color: var(--ink); box-shadow: none; }
#dashboard-account-menu .account-menu__manage svg { flex-shrink: 0; color: var(--muted); }
#dashboard-account-menu .account-menu__manage:hover:not(:disabled) { background: var(--soft); }
#dashboard-account-menu .cloud-entitlement__actions .cloud-text-button { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
#dashboard-account-menu .cloud-text-button:hover:not(:disabled) { color: var(--ink); }
#dashboard-account-menu .cloud-entitlement__actions p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
#dashboard-account-menu .cloud-entitlement > .web-downloader__status { margin: 0; font-size: 12px; }
#dashboard-account-menu .cloud-entitlement__loading { position: static; flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 36px; margin: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 400; }
#dashboard-account-menu .cloud-entitlement.is-updating:not(.is-loading) .cloud-entitlement__loading { position: absolute; inset: 0; padding: 12px; background: var(--paper); }
#dashboard-account-menu .cloud-entitlement__spinner { flex: 0 0 16px; width: 16px; height: 16px; border-width: 2px; border-color: var(--line); border-top-color: var(--ink); }
#dashboard-account-menu .extension-links { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; overflow: visible; }
#dashboard-account-menu .extension-links__header { gap: 8px; padding: 14px 12px 4px; }
#dashboard-account-menu .extension-links__header h2 { font-size: 11px; font-weight: 550; color: var(--muted); }
#dashboard-account-menu .extension-links__icon { display: none; }
#dashboard-account-menu .extension-links__manage { font-size: 11px; text-decoration: none; }
#dashboard-account-menu .extension-links__manage:hover { text-decoration: underline; }
#dashboard-account-menu .extension-links__body { min-width: 0; padding: 0 12px 8px; border: 0; }
#dashboard-account-menu .extension-links__row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; min-height: 62px; padding: 12px 0; }
#dashboard-account-menu .extension-links__dot { display: none; }
#dashboard-account-menu .extension-links__glyph { position: relative; display: grid; grid-column: 1; grid-row: 1 / span 2; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--soft); color: var(--muted); }
#dashboard-account-menu .extension-links__dot.is-on + .extension-links__glyph { color: var(--ink); }
#dashboard-account-menu .extension-links__dot.is-on + .extension-links__glyph::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 7px; height: 7px; border: 2px solid var(--paper); border-radius: 50%; background: #438457; }
#dashboard-account-menu .extension-links__name { grid-column: 2; grid-row: 1; min-width: 0; font-size: 12px; font-weight: 550; line-height: 1.4; overflow-wrap: anywhere; }
#dashboard-account-menu .extension-links__meta { grid-column: 2; grid-row: 2; font-size: 11px; line-height: 1.5; }
#dashboard-account-menu .extension-links__row > .extension-links__button { grid-column: 3; grid-row: 1 / span 2; min-height: 36px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--muted); font-size: 10px; line-height: 1.4; }
#dashboard-account-menu .extension-links__row > .extension-links__button:hover:not(:disabled) { color: var(--ink); background: var(--soft); }
#dashboard-account-menu .extension-links__confirmation { padding: 4px 0 12px; }
#dashboard-account-menu .extension-links__shared > summary { flex-wrap: wrap; gap: 6px; font-size: 11px; }
#dashboard-account-menu .extension-links__shared > summary > span:first-child { flex: 1; min-width: 0; }
#dashboard-account-menu .extension-links__shared .extension-links__row { grid-template-columns: 30px minmax(0, 1fr); }
#dashboard-account-menu .extension-links__shared .extension-links__row > .extension-links__button { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 4px; }
#dashboard-account-menu .extension-links__approve { min-width: 0; padding: 12px; }
#dashboard-account-menu .dashboard-account__logout { width: calc(100% - 8px); min-height: 40px; margin: 4px; padding: 10px 12px; border-radius: 8px; color: var(--muted); font-size: 12px; font-weight: 500; text-align: center; }
#dashboard-account-menu .dashboard-account__logout:hover { background: var(--soft); color: var(--ink); }
@media (max-width: 600px) {
  .cloud-page #dashboard-account-menu { right: -4px; max-height: calc(100dvh - 100px); }
  #dashboard-account-menu .cloud-entitlement__actions .cloud-text-button, #dashboard-account-menu .extension-links__row > .extension-links__button { min-height: 40px; }
}

.extension-links__connect { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; margin: 4px 12px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: 12px; font-weight: 550; text-decoration: none; }
.extension-links__connect:hover { background: var(--soft); }

.local-library__notice { display:flex; align-items:center; gap:12px; margin:0; padding:10px 16px; font-size:12px; border-bottom:1px solid var(--ll-separator); }
.local-library__notice span { flex:1; }
.local-library__notice button { display:inline-flex; align-items:center; padding:4px; border:0; background:transparent; color:inherit; cursor:pointer; }
.local-library__notice button:disabled { opacity:.5; cursor:wait; }

.local-library__storage { padding: 12px 20px; border-bottom: 1px solid var(--ll-separator); font-size: 12px; }
.local-library__storage > div { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.local-library__storage meter { display: block; width: 100%; height: 10px; margin-top: 7px; }
.local-library__storage meter::-webkit-meter-bar { background: #8882; border: 0; }
.local-library__storage meter::-webkit-meter-optimum-value { background: #648aef; }
.local-library__storage.is-warning meter::-webkit-meter-optimum-value { background: #d89128; }
.local-library__storage small { display: block; margin-top: 5px; opacity: .75; }
.cloud-connect-dialog { box-sizing: border-box; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; text-align: center; padding: 24px; border-radius: 20px; }
.cloud-connect-dialog .local-library__dialog-heading { text-align: left; margin: 0; }
.cloud-connect-dialog .local-library__dialog-heading > button { flex: 0 0 28px; width: 28px; height: 28px; }
.cloud-connect-dialog__manage { display: block; width: fit-content; margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--ll-accent); text-align: left; }
.cloud-connect-dialog__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: #648aef1a; color: #648aef; margin: 24px auto 16px; }
.cloud-connect-dialog h4 { font-size: 24px; line-height: 1.25; letter-spacing: -.6px; margin: 0; overflow-wrap: anywhere; }
.cloud-connect-dialog p { margin: 0; font-size: 14px; line-height: 1.6; }
.cloud-connect-dialog__account { display: block; margin: 8px 0 20px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.cloud-connect-dialog__body { display: grid; gap: 16px; min-width: 0; }
.cloud-connect-dialog code { display: block; min-width: 0; padding: 16px; margin: 0; border-radius: 12px; background: #8881; font: 600 28px/1.25 ui-monospace, monospace; letter-spacing: 4px; overflow-wrap: anywhere; }
.cloud-connect-dialog .button { box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 12px 16px; justify-content: center; }
.cloud-connect-dialog > [role="alert"] { margin-top: 16px; color: var(--ll-danger); }
.cloud-connect-dialog__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 8px; margin-top: 20px; font-size: 11px; line-height: 1.5; color: var(--ll-secondary); }
.cloud-connect-dialog__steps [aria-current] { color: var(--ll-label); font-weight: 700; }
@media (max-width: 480px) {
  .cloud-connect-dialog { padding: 20px; }
  .cloud-connect-dialog h4 { font-size: 22px; }
  .cloud-connect-dialog code { font-size: 24px; letter-spacing: 3px; }
}

/* Cloud folders and compact account storage meter. */
.tma-folder-location-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 22px 17px;border-bottom:1px solid var(--ll-separator)}
.tma-folder-breadcrumbs{display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;width:auto;gap:7px;min-width:0;overflow:auto;white-space:nowrap;color:var(--ll-tertiary);scrollbar-width:none;font-size:12px}
.tma-folder-breadcrumbs button{display:inline-flex;align-items:center;gap:7px;padding:5px 3px;border:0;background:transparent;color:var(--ll-secondary);font-size:12px;white-space:nowrap;border-radius:5px;cursor:pointer}
.tma-folder-breadcrumbs button:hover{background:var(--ll-hover);color:var(--ll-label)}
.tma-folder-breadcrumbs button[aria-current=page]{color:var(--ll-label);font-weight:500}
.tma-folder-breadcrumbs svg{flex-shrink:0}
.tma-folder-storage{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex-shrink:0;font-size:10px;line-height:1.5;color:var(--ll-secondary)}
.tma-folder-storage strong{font-weight:500;color:var(--ll-label)}
.tma-folder-storage>meter{display:block;appearance:none;-webkit-appearance:none;width:150px;height:3px;border:0;border-radius:9px;overflow:hidden;background:var(--ll-separator)}
.tma-folder-storage>meter::-webkit-meter-bar{background:var(--ll-separator);border:0;border-radius:9px;height:3px}
.tma-folder-storage>meter::-webkit-meter-optimum-value{background:var(--ll-secondary);border-radius:9px}
.tma-folder-storage>meter::-moz-meter-bar{background:var(--ll-secondary);border-radius:9px}
.tma-folder-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:12px;padding:0 0 20px;margin:0 0 20px;list-style:none;border-bottom:1px solid var(--ll-separator)}
.tma-folder-items .tma-folder-row{overflow:visible;content-visibility:visible;contain:none;aspect-ratio:auto;min-width:0;position:relative;border-radius:10px}
.tma-folder-open{display:flex;flex-direction:column;align-items:center;width:100%;min-width:0;border:0;background:transparent;border-radius:10px;padding:7px 8px 13px;color:var(--ll-label);cursor:pointer}
.tma-folder-open:hover,.tma-folder-row.is-expanded{background:var(--ll-hover)}
.tma-folder-items .folder-art{width:86px;height:72px;filter:drop-shadow(0 2px 2px #14223a14)}
.tma-folder-label{display:grid;gap:3px;margin-top:7px;text-align:center;min-width:0;max-width:100%}
.tma-folder-label strong{font-weight:500;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tma-folder-label>span{font-size:11px;color:var(--ll-secondary)}
.tma-folder-items .local-library__more{color:var(--ll-secondary);background:var(--ll-bg)}
.tma-folder-items .tma-folder-row:hover>.local-library__more{opacity:1}
.tma-folder-items.is-list{display:flex;flex-direction:column;gap:2px}
.tma-folder-items.is-list .tma-folder-row{display:flex;align-items:center;border-radius:12px}
.tma-folder-items.is-list .tma-folder-open{flex:1;flex-direction:row;padding:8px;gap:14px;height:60px;text-align:left}
.tma-folder-items.is-list .folder-art{width:44px;height:40px;filter:none}
.tma-folder-items.is-list .tma-folder-label{text-align:left;margin:0;gap:2px}
.tma-folder-items.is-list .tma-folder-label strong{font-size:14px}
.tma-folder-items.is-list .tma-folder-label>span{font-size:12.5px}
.tma-folder-items.is-list .local-library__more{position:static;opacity:1;flex-shrink:0;width:36px;height:36px;margin-right:4px;background:transparent;backdrop-filter:none}
.tma-folder-items.is-list .local-library__more:hover{background:var(--ll-hover)}
.tma-folder-items.is-list .local-library__actions{top:calc(100% - 6px);right:8px;left:auto}
.tma-folder-row.is-drop-target{outline:2px solid var(--ll-accent);background:var(--ll-hover)}
.tma-folder-actions .palette,.tma-folder-dialog .palette{display:flex;gap:7px;align-items:center}
.tma-folder-actions .palette{padding:2px 8px 13px}
:is(.tma-folder-actions,.tma-folder-dialog) .swatch{width:18px;height:18px;border-radius:50%;padding:0;border:0;background:var(--swatch);color:#fff;display:grid;place-items:center;flex-shrink:0;cursor:pointer}
:is(.tma-folder-actions,.tma-folder-dialog) .swatch[aria-pressed=true]{outline:1px solid var(--swatch);outline-offset:2px}
:is(.tma-folder-actions,.tma-folder-dialog) .custom-colour{position:relative;width:20px;height:22px;display:grid;place-items:center;overflow:hidden;color:var(--ll-secondary);flex-shrink:0;cursor:pointer}
:is(.tma-folder-actions,.tma-folder-dialog) .custom-colour input{position:absolute;inset:0;opacity:0;width:100%;height:100%;padding:0;cursor:pointer}
.tma-folder-actions .custom-colour:focus-within,.tma-folder-dialog .custom-colour:focus-within{outline:2px solid var(--ll-accent);outline-offset:2px}
.tma-folder-large{display:flex;justify-content:center;margin:4px 0 20px}
.tma-folder-large .folder-art{width:105px;height:87px;filter:drop-shadow(0 3px 2px #14223a14)}
.tma-folder-field{display:grid;gap:7px;font-size:12px;color:var(--ll-secondary)}
.tma-folder-colour-field{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0;font-size:12px;color:var(--ll-secondary)}
.tma-folder-dialog .tma-folder-save-location{font-size:11px}
.tma-folder-move-path{margin:16px 0 7px;padding:8px 0;border-block:1px solid var(--ll-separator)}
.tma-folder-move-list{min-height:130px;max-height:260px;overflow:auto}
.tma-folder-move-list button{display:flex;align-items:center;gap:9px;width:100%;padding:9px;background:transparent;border:0;border-radius:7px;color:var(--ll-label);font-size:12px;cursor:pointer}
.tma-folder-move-list button:hover{background:var(--ll-hover)}
.tma-folder-move-list .folder-art{width:28px;height:25px}
.tma-folder-move-list button>svg:last-child{margin-left:auto;color:var(--ll-secondary)}
.tma-folder-move-list>p{padding:22px;text-align:center;font-size:12px}
@media(max-width:650px){.tma-folder-location-bar{align-items:flex-start;gap:12px;padding:12px 13px;flex-wrap:wrap}.tma-folder-breadcrumbs{flex:1;min-width:160px}.tma-folder-storage{font-size:9px;margin-left:auto}.tma-folder-storage>meter{width:108px}.tma-folder-storage>span>span{display:none}.tma-folder-items{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:9px}.tma-folder-items .local-library__more{opacity:1}.tma-folder-colour-field{gap:8px}.tma-folder-dialog .palette{gap:5px}.tma-folder-dialog .swatch{width:17px;height:17px}}
@media(max-width:650px){.local-library .tma-folder-items .tma-folder-row .tma-folder-actions{position:fixed;inset:auto 12px 16px;z-index:30;width:auto;max-width:none;transform:none;padding:10px;border-radius:16px;box-shadow:0 8px 50px #0004}.tma-folder-actions .palette{justify-content:space-between;gap:8px;padding-bottom:15px}.tma-folder-actions .swatch{width:23px;height:23px}.tma-folder-actions .custom-colour{width:23px;height:23px}}
@media(max-width:650px){.local-library .tma-folder-items .tma-folder-row .tma-folder-actions{bottom:calc(78px + env(safe-area-inset-bottom))}}

.local-library__move-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-block: 14px;
  overflow-wrap: anywhere;
  font-size: 13px;
}
.local-library__dialog .local-library__move-choice input { flex: 0 0 18px; width: 18px; height: 18px; padding: 0; margin: 3px 0 0; }
.local-library__move-choice > span { flex: 1; min-width: 0; }

/* Provider identity stays centered inside the folder at every tile size. */
.tma-folder-field select{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--ll-separator);border-radius:9px;background:var(--ll-bg);color:var(--ll-label);font:inherit}
.tma-folder-field select:disabled{opacity:.65}
.tma-folder-field + .tma-folder-field{margin-top:16px}
.tma-folder-provider-name{display:block;margin-top:3px;color:var(--ll-secondary);font-size:11px}
.tma-folder-breadcrumbs .folder-art.small{width:24px;height:20px;margin-right:5px}

/* Reading files open in the same library preview dialog. */
.local-library__dialog.local-library__reader{width:min(1000px,calc(100vw - 32px));max-width:none;height:min(850px,calc(100dvh - 32px));max-height:none;display:flex;flex-direction:column;padding:0;overflow:hidden}
.local-library__reader .local-library__dialog-heading{padding:12px 20px;margin:0;border-bottom:1px solid var(--cloud-line,#e5e5e5);flex-shrink:0}
.local-library__reader .local-library__dialog-heading h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.local-library__reader iframe{border:0;flex:1;min-height:0;width:100%;background:#fff}
.local-library__reader>p,.local-library__reader>[role="alert"]{padding:12px 20px}
@media(max-width:600px){.local-library__dialog.local-library__reader{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0;border:0;border-radius:0}}

/* Owner "view as" preview: a banner while previewing and a picker in the account menu. */
.owner-preview-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; padding: 10px 14px; border: 1px dashed var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink); font-size: 13px; }
.owner-preview-banner > span:first-child { flex: 1 1 260px; }
.owner-preview-picker { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
/* In the account menu the picker lines up with the meter cards around it. */
.dashboard-account__menu .owner-preview-picker { justify-content: space-between; margin: 0 4px 12px; padding: 6px 6px 6px 12px; border-radius: 10px; background: var(--soft); }
.owner-preview-picker select { min-width: 0; max-width: 100%; min-height: 30px; padding: 5px 28px 5px 10px; border: 1px solid var(--line); border-radius: 7px; background-color: var(--paper); background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; color: var(--ink); font: inherit; font-weight: 550; cursor: pointer; -webkit-appearance: none; appearance: none; }
.owner-preview-picker select:hover:not(:disabled) { border-color: var(--muted); }
.owner-preview-picker select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.owner-preview-picker select:disabled { cursor: default; opacity: .6; }