page-layout.app-page-layout, [data-page-layout="shared"] { inline-size: 100%; min-block-size: 0; }
app-footer[data-page-chrome="shared"] { display: block; }

.cloud-page {
  --cloud-ink: var(--color-text-primary);
  --cloud-muted: var(--color-text-secondary);
  --cloud-faint: var(--color-text-muted);
  --cloud-base: var(--color-surface-page);
  --cloud-raised: var(--color-surface-soft);
  --cloud-panel: var(--color-surface-elevated);
  --cloud-panel-hover: var(--color-surface-hover);
  --cloud-line: var(--color-border);
  --cloud-line-strong: var(--color-border-strong);
  --cloud-signal: var(--color-brand-primary);
  --cloud-signal-strong: var(--color-brand-primary-700);
  --cloud-positive: var(--color-success);
  --cloud-radius: var(--radius-xl);
  --cloud-radius-sm: var(--radius-lg);
  --cloud-control: var(--touch-target-min);
  --cloud-gap: var(--space-3);
  --cloud-pad: var(--space-3);
  --cloud-icon-box: 2.375rem;
  --cloud-row-min: 2.125rem;
  --cloud-micro: 0.4375rem;
  --cloud-actions-pad: 2.625rem;
  box-sizing: border-box;
  color: var(--cloud-ink);
  container-type: inline-size;
  inline-size: 100%;
}
.cloud-page *, .cloud-page *::before, .cloud-page *::after { box-sizing: border-box; }
.cloud-page :is(button, input, select) { font: inherit; }
.cloud-page .btn { align-items: center; border-radius: var(--cloud-radius-sm); box-shadow: none; display: inline-flex; font-size: var(--font-size-sm); font-weight: 700; gap: var(--space-1); justify-content: center; min-block-size: var(--cloud-control); }
.cloud-page .btn:focus-visible, .cloud-page :is(input, select, summary):focus-visible { outline: var(--focus-ring-width-tight) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset-tight); }
.cloud-page .btn:disabled { cursor: not-allowed; opacity: .5; }

.cloud-workspace { background: var(--cloud-panel); border: var(--border-width) solid var(--cloud-line); border-radius: var(--cloud-radius); box-shadow: var(--shadow-md); inline-size: 100%; min-inline-size: 0; overflow: clip; }
.cloud-workspace__frame { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(6, auto); min-block-size: 0; min-inline-size: 0; }
.cloud-workspace__context { align-items: center; background: var(--cloud-panel); border-block-end: var(--border-width) solid var(--cloud-line); display: flex; flex-wrap: wrap; gap: var(--cloud-gap); justify-content: space-between; min-inline-size: 0; padding: var(--space-2) var(--cloud-pad); }
.cloud-workspace__identity { align-items: center; display: flex; gap: var(--space-2); min-inline-size: 0; }
.cloud-workspace__identity > div { min-inline-size: 0; }
.cloud-workspace__provider-icon { align-items: center; background: var(--color-surface-active); border: var(--border-width) solid var(--color-border-teal-subtle); border-radius: var(--cloud-radius-sm); color: var(--cloud-signal); display: inline-flex; flex: 0 0 var(--cloud-icon-box); font-size: var(--font-size-xl); justify-content: center; min-block-size: var(--cloud-icon-box); }
.cloud-workspace__eyebrow { color: var(--cloud-signal); display: block; font-size: var(--font-size-xs); font-weight: 800; letter-spacing: .07em; line-height: 1.2; text-transform: uppercase; }
.cloud-workspace h2 { color: var(--cloud-ink); font-size: var(--font-size-lg); font-weight: 700; line-height: 1.15; margin: calc(var(--space-1) / 2) 0; }
.cloud-workspace__identity p { color: var(--cloud-muted); font-size: var(--font-size-sm); line-height: 1.2; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-workspace__context-tools, .cloud-workspace__commands, .cloud-workspace__utilities { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cloud-workspace__context-tools { justify-content: flex-end; }
.cloud-workspace__count { background: var(--color-surface-muted); border: var(--border-width) solid var(--cloud-line); border-radius: var(--radius-pill); color: var(--cloud-muted); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; font-weight: 700; padding: var(--space-1-5) var(--space-2-5); white-space: nowrap; }
.cloud-root-picker select { background: var(--color-surface-elevated); border-color: var(--cloud-line); color: var(--cloud-ink); min-block-size: var(--cloud-control); min-inline-size: 12rem; }
.cloud-view-toggle { background: var(--color-surface-muted); border: var(--border-width) solid var(--cloud-line); border-radius: var(--cloud-radius-sm); display: inline-flex; overflow: hidden; }
.cloud-view-toggle__button { align-items: center; background: transparent; border: 0; color: var(--cloud-muted); display: inline-flex; font-size: var(--font-size-xs); font-weight: 700; gap: var(--space-1-5); justify-content: center; min-block-size: var(--cloud-control); padding-inline: var(--space-2-5); }
.cloud-view-toggle__button.active { background: var(--cloud-signal); color: var(--on-primary); }
.cloud-view-toggle__button:not(.active):is(:hover, :focus-visible) { background: var(--color-surface-hover); color: var(--cloud-ink); }

.cloud-workspace__pathbar { align-items: center; background: var(--color-surface-soft); border-block-end: var(--border-width) solid var(--cloud-line); display: flex; gap: var(--space-2); min-block-size: var(--cloud-row-min); min-inline-size: 0; padding-inline: var(--cloud-pad); }
.cloud-workspace__path-label { color: var(--cloud-faint); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.cloud-workspace__breadcrumb-wrap { min-inline-size: 0; overflow: auto hidden; }
.cloud-breadcrumb ol { align-items: center; display: flex; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.cloud-breadcrumb__item:not(:last-child)::after { color: var(--cloud-faint); content: '/'; margin-inline: var(--space-1-5); }
.cloud-breadcrumb__link { background: transparent; border: 0; color: var(--color-text-link); font-size: var(--font-size-sm); min-block-size: var(--icon-size-md); padding: 0; }
.cloud-breadcrumb__item[aria-current="page"] .cloud-breadcrumb__link { color: var(--cloud-ink); font-weight: 700; }
.cloud-breadcrumb__link:not(:disabled) { cursor: pointer; }

.cloud-workspace__commandbar { align-items: center; background: var(--color-surface-soft); border-block-end: var(--border-width) solid var(--cloud-line); display: flex; gap: var(--space-2); justify-content: space-between; padding: var(--space-1-5) var(--cloud-pad); }
.cloud-command { padding-inline: var(--space-2-5); }
.cloud-command--primary { min-inline-size: 8.5rem; }
.cloud-command--quiet { color: var(--cloud-muted); }
.cloud-filter-field { display: grid; gap: var(--space-1); }

.cloud-workspace__collection { background: var(--cloud-base); min-block-size: 0; padding: var(--cloud-pad); }
.cloud-table-region { block-size: 100%; border: var(--border-width) solid var(--cloud-line); border-radius: var(--cloud-radius); max-block-size: none; overflow: auto; }
.cloud-table { background: var(--cloud-panel); border-collapse: collapse; color: var(--cloud-ink); font-size: var(--font-size-sm); inline-size: 100%; min-inline-size: 43rem; }
.cloud-table :is(th, td) { border-block-end: var(--border-width) solid var(--color-border-ink-faint); padding: var(--space-2) var(--space-2-5); vertical-align: middle; }
.cloud-table th { background: var(--color-surface-muted); color: var(--cloud-muted); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: .06em; position: sticky; text-align: start; text-transform: uppercase; top: 0; z-index: var(--z-sticky); }
.cloud-table tbody tr:hover { background: var(--color-surface-hover); }
.cloud-sort { align-items: center; background: transparent; border: 0; color: inherit; display: inline-flex; font: inherit; gap: var(--space-1-5); letter-spacing: inherit; padding: 0; text-transform: inherit; }
.cloud-name { align-items: center; color: var(--cloud-ink); display: inline-flex; gap: var(--space-2); max-inline-size: 100%; min-inline-size: 0; }
.cloud-name--drill { background: transparent; border: 0; cursor: pointer; font: inherit; min-block-size: var(--status-label-min-height); min-inline-size: var(--touch-target-min-aa); padding: 0; text-align: start; }
.cloud-name--drill:hover .cloud-name__text { color: var(--color-text-link); }
.cloud-name__icon { color: var(--cloud-signal); flex: 0 0 auto; }
.cloud-name__text { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-cell--type, .cloud-cell--size, .cloud-cell--modified { color: var(--cloud-muted); font-size: var(--font-size-xs); white-space: nowrap; }
.cloud-cell--actions { text-align: end; white-space: nowrap; }
.cloud-action-menu { display: inline-flex; }
.cloud-page .cloud-action-toggle { background: transparent; border-color: transparent; color: var(--cloud-muted); min-block-size: var(--cloud-control); min-inline-size: var(--cloud-control); padding: 0; }
.cloud-action-toggle:is(:hover, :focus-visible) { background: var(--color-surface-active); border-color: var(--color-border-teal-subtle); color: var(--cloud-ink); }
.cloud-action-menu__list { background: var(--color-surface-elevated); border: var(--border-width) solid var(--cloud-line); border-radius: var(--cloud-radius-sm); box-shadow: var(--shadow-md); list-style: none; margin: 0; min-inline-size: 12rem; padding: var(--space-1); z-index: var(--z-dropdown-portal); }
.cloud-action-menu__list .dropdown-item { background: transparent; border-radius: var(--radius-sm); color: var(--cloud-ink); font-size: var(--font-size-sm); min-block-size: var(--cloud-row-min); }
.cloud-action-menu__list .dropdown-item:is(:hover, :focus-visible) { background: var(--color-surface-hover); color: var(--cloud-ink); }
.cloud-action-menu__list .disabled { color: var(--cloud-faint); cursor: not-allowed; opacity: .75; }
.cloud-empty-cell { color: var(--cloud-muted); padding: 4rem 1rem; text-align: center; }
.cloud-empty-state { display: grid; gap: var(--space-1); justify-items: center; }
.cloud-empty-state i { color: var(--cloud-signal); font-size: 1.4rem; }
.cloud-empty-state strong { color: var(--cloud-ink); }
.cloud-loading-state { align-items: center; color: var(--cloud-muted); display: flex; gap: var(--space-2); justify-content: center; min-block-size: 10rem; }
.cloud-loading-state .spin { animation: cloud-workspace-spin .75s linear infinite; color: var(--cloud-signal); }

.cloud-grid { display: grid; gap: var(--space-2); grid-auto-rows: min-content; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.cloud-page[data-cloud-provider="synologyphotos"] .cloud-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.cloud-page[data-cloud-provider="synologyphotos"] .cloud-tile__mediawrap { block-size: 8rem; flex-basis: 8rem; inline-size: 100%; }
.cloud-page[data-cloud-provider="synologyphotos"] .cloud-tile__head { flex-direction: column; }
.cloud-page[data-cloud-provider="synologyphotos"] .cloud-tile__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cloud-grid-empty { color: var(--cloud-muted); grid-column: 1 / -1; padding: 4rem 1rem; text-align: center; }
.cloud-tile { background: var(--cloud-panel); border: var(--border-width) solid var(--cloud-line); border-radius: var(--cloud-radius); display: flex; flex-direction: column; gap: var(--space-2); min-block-size: 10rem; min-inline-size: 0; padding: var(--space-2-5); transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.cloud-tile:hover { background: var(--color-surface-hover); border-color: var(--color-border-hover); }
.cloud-tile__head { align-items: flex-start; display: flex; gap: var(--space-2); min-inline-size: 0; }
.cloud-tile__mediawrap { align-items: center; background: var(--color-surface-active); block-size: var(--cloud-row-min); border-radius: var(--radius-md); color: var(--cloud-signal); display: inline-flex; flex: 0 0 var(--cloud-row-min); justify-content: center; overflow: hidden; position: relative; }
.cloud-tile__thumb { block-size: 100%; inline-size: 100%; inset: 0; object-fit: cover; position: absolute; }
.cloud-tile__thumb--failed { visibility: hidden; }
.cloud-tile__name { color: var(--cloud-ink); font-size: var(--font-size-sm); font-weight: 700; max-inline-size: 100%; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-tile__name--drill { background: transparent; border: 0; cursor: pointer; padding: 0; text-align: start; }
.cloud-tile__meta { display: grid; font-size: var(--font-size-xs); gap: var(--space-1-5) var(--space-2-5); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.cloud-tile__meta dt { color: var(--cloud-faint); font-size: var(--font-size-4xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cloud-tile__meta dd { color: var(--cloud-muted); margin: calc(var(--space-1) / 2) 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-tile__actions { display: flex; justify-content: end; margin-block-start: auto; }

.cloud-workspace__utility-rail { align-items: center; background: var(--color-surface-soft); border-block-start: var(--border-width) solid var(--cloud-line); display: flex; justify-content: space-between; min-block-size: var(--touch-target-min); padding: var(--space-1) var(--cloud-pad); }
.cloud-pagination, .cloud-pagination__meta, .cloud-pagination__buttons { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.cloud-pagination { inline-size: 100%; justify-content: space-between; }
.cloud-pagination__meta { color: var(--cloud-muted); font-size: var(--font-size-xs); }
.cloud-pagination__meta .form-select { background: var(--cloud-panel); border-color: var(--cloud-line); color: var(--cloud-ink); min-block-size: var(--touch-target-min); padding-block: calc(var(--space-1) * .75); }
.cloud-pagination__buttons .btn { min-block-size: var(--touch-target-min); min-inline-size: var(--touch-target-min); padding-inline: var(--space-2); }
.cloud-page-gap { color: var(--cloud-faint); padding-inline: calc(var(--space-1) / 2); }

.cloud-connection-banner { background: var(--color-surface-elevated); border: var(--border-width) solid var(--color-warning); border-radius: var(--cloud-radius); color: var(--color-text-primary); margin-block-end: var(--space-2); padding: var(--space-2-5) var(--cloud-pad); }
.cloud-connection-banner.alert-danger { border-color: var(--color-danger); }
.cloud-connection-banner h2 { color: inherit; font-size: var(--font-size-sm); }
.cloud-connection-banner p { color: var(--cloud-muted); font-size: var(--font-size-sm); margin: var(--space-1) 0 var(--space-2); }
.cloud-connection-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.cloud-workspace__frame--audit { grid-template-rows: auto minmax(0, 1fr); }
.cloud-workspace__audit-shell { background: var(--cloud-base); min-block-size: 0; padding: var(--cloud-pad); }
.cloud-page .audit-shell, .cloud-page .audit-main-card { background: transparent; color: var(--cloud-ink); }
.cloud-page .audit-main-card { border: var(--border-width) solid var(--cloud-line); border-radius: var(--cloud-radius); }
.cloud-page .audit-toolbar-shell, .cloud-page .audit-controls-container, .cloud-page .audit-ssot-scroll { background: var(--cloud-panel); border-color: var(--cloud-line); }
.cloud-page .audit-human-table { color: var(--cloud-ink); }
.cloud-page .audit-human-table :is(th, td) { border-color: var(--color-border-ink-faint); }
.cloud-page .audit-human-table th { background: var(--color-surface-muted); color: var(--cloud-muted); }
.cloud-page .audit-human-table tbody tr:hover { background: var(--color-surface-hover); }

.cloud-action-modal-backdrop { align-items: center; background: var(--color-surface-overlay); display: flex; inset: 0; justify-content: center; padding: var(--space-3); position: fixed; z-index: var(--z-modal); }
.cloud-action-modal { background: var(--color-surface-elevated); border: var(--border-width) solid var(--cloud-line); border-radius: var(--cloud-radius); color: var(--cloud-ink); inline-size: min(100%, 40rem); max-block-size: calc(100dvh - (var(--space-3) * 2)); max-inline-size: 40rem; overflow: auto; }
.cloud-action-modal--preview { block-size: min(48rem, calc(100dvh - (var(--space-3) * 2))); display: flex; flex-direction: column; inline-size: min(100%, 60rem); max-inline-size: 60rem; }
.cloud-action-modal :is(.cloud-action-modal__head, .cloud-action-modal__footer) { align-items: center; border-color: var(--cloud-line); display: flex; gap: var(--space-2); justify-content: space-between; padding: var(--cloud-pad); }
.cloud-action-modal__head { border-block-end: var(--border-width) solid var(--cloud-line); }
.cloud-action-modal__footer { border-block-start: var(--border-width) solid var(--cloud-line); flex-wrap: wrap; }
.cloud-action-modal__body { padding: var(--cloud-pad); }
.cloud-action-modal--preview .cloud-action-modal__body { display: grid; flex: 1 1 auto; grid-template-rows: minmax(0, 1fr) auto; min-block-size: 0; overflow: hidden; }
.cloud-action-modal :is(.form-control, .form-select) { background: var(--cloud-panel); border-color: var(--cloud-line); color: var(--cloud-ink); }
.cloud-dropzone { align-items: center; background: var(--color-surface-muted); border: var(--border-width) dashed var(--color-border-hover); border-radius: var(--cloud-radius); color: var(--cloud-muted); display: grid; min-block-size: 10rem; padding: var(--space-3); place-content: center; text-align: center; }
.cloud-dropzone:is(:hover, :focus-visible, .is-dragover) { background: var(--color-surface-hover); border-color: var(--cloud-signal); }
.cloud-dropzone__link { color: var(--color-text-link); }
.cloud-upload-item, .cloud-version, .cloud-preview-frame { background: var(--cloud-panel); border: var(--border-width) solid var(--cloud-line); border-radius: var(--cloud-radius-sm); }
.cloud-preview-frame { align-items: center; block-size: 100%; display: flex; justify-content: center; min-block-size: 0; overflow: hidden; }
.cloud-preview-iframe { background: var(--color-white); block-size: 100%; border: 0; inline-size: 100%; }
.cloud-preview-image, .cloud-preview-media { block-size: auto; inline-size: auto; max-block-size: 100%; max-inline-size: 100%; object-fit: contain; }
.cloud-preview-audio { inline-size: min(100%, 42rem); margin: var(--space-3); }
.cloud-preview-unavailable { color: var(--cloud-muted); margin: var(--space-4); text-align: center; }
.cloud-preview-document-shell { align-self: stretch; background: var(--color-white); block-size: min(58dvh, 44rem); inline-size: 100%; overflow: auto; padding: clamp(var(--space-3), 3vw, var(--space-6)); }
.cloud-preview-document { color: var(--cloud-ink); margin-inline: auto; max-inline-size: 72rem; }
.cloud-preview-document p { line-height: 1.55; margin-block: 0 var(--space-3); white-space: pre-wrap; }
.cloud-preview-document__code { color: var(--cloud-ink); font-family: var(--font-family-monospace); font-size: var(--font-size-sm); margin: 0; white-space: pre-wrap; word-break: break-word; }
.cloud-preview-document__notice { background: var(--color-info-soft); border-radius: var(--radius-sm); color: var(--color-info-700); font-size: var(--font-size-sm); margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); }
.cloud-preview-document__table-wrap { max-inline-size: 100%; overflow: auto; }
.cloud-preview-document__table { border-collapse: collapse; inline-size: 100%; }
.cloud-preview-document__table td { border: var(--border-width) solid var(--cloud-line); min-inline-size: 6rem; padding: var(--space-2); vertical-align: top; }
.cloud-preview-document--slides section { border-block-end: var(--border-width) solid var(--cloud-line); padding-block: var(--space-3); }
.cloud-preview-meta { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: var(--space-3) 0; }
.cloud-preview-meta :is(dt, dd) { font-size: var(--font-size-sm); margin: 0; }
.cloud-preview-meta dt { color: var(--cloud-faint); font-weight: 700; }
.cloud-preview-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; padding: var(--space-3); }
.cloud-export-menu-portal { background: var(--color-surface-elevated); border: var(--border-width) solid var(--cloud-line); border-radius: var(--cloud-radius-sm); box-shadow: var(--shadow-md); padding: var(--space-1); }
.cloud-export-menu-item { border-radius: var(--radius-sm); color: var(--cloud-ink); }
.cloud-export-menu-item:is(:hover, :focus-visible) { background: var(--color-surface-hover); color: var(--cloud-ink); }

.cloud-page--loading { min-block-size: 32rem; padding: var(--cloud-pad); }
.cloud-workspace__status { align-items: center; color: var(--cloud-muted); display: flex; font-size: var(--font-size-xs); font-weight: 700; gap: var(--space-2); letter-spacing: .04em; text-transform: uppercase; }
.cloud-workspace__pulse { background: var(--cloud-positive); border-radius: 50%; box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--cloud-positive) 16%, transparent); block-size: var(--cloud-micro); inline-size: var(--cloud-micro); }
.cloud-workspace__loading { display: grid; gap: var(--space-3); margin-block-start: var(--space-5); }

@media (width < 768px) {
  .cloud-page { --cloud-control: var(--touch-target-min); --cloud-pad: var(--space-3); }
  .cloud-workspace { border-radius: var(--radius-lg); }
  .cloud-workspace__context { align-items: flex-start; flex-direction: column; }
  .cloud-workspace__context-tools { inline-size: 100%; justify-content: stretch; }
  .cloud-workspace__count { margin-inline-end: auto; }
  .cloud-root-picker { flex: 1 0 100%; }
  .cloud-root-picker select { inline-size: 100%; }
  .cloud-view-toggle { display: grid; flex: 1; grid-template-columns: 1fr 1fr; }
  .cloud-view-toggle__button { min-block-size: var(--cloud-control); }
  .cloud-workspace__commandbar { align-items: stretch; flex-direction: column; }
  .cloud-workspace__commands, .cloud-workspace__utilities { display: grid; grid-template-columns: 1fr 1fr; }
  .cloud-workspace__utilities { grid-template-columns: 1fr; }
  .cloud-command { inline-size: 100%; }
  .cloud-workspace__collection { padding: var(--space-2); }
  .cloud-table-region { border: 0; border-radius: 0; max-block-size: none; overflow: auto; }
  .cloud-table { min-inline-size: 0; }
  .cloud-table thead, .cloud-table :is(.cloud-cell--type, .cloud-cell--size, .cloud-cell--modified) { display: none; }
  .cloud-table, .cloud-table tbody, .cloud-table tr, .cloud-table td { display: block; inline-size: 100%; }
  .cloud-table tbody { display: grid; gap: var(--space-2); }
  .cloud-table tr { background: var(--cloud-panel); border: var(--border-width) solid var(--cloud-line); border-radius: var(--cloud-radius-sm); padding: var(--space-2); position: relative; }
  .cloud-table :is(th, td) { border: 0; padding: 0; }
  .cloud-table .cloud-cell--name { padding-inline-end: var(--cloud-actions-pad); }
  .cloud-table .responsive-record__meta { color: var(--cloud-muted); display: flex; font-size: var(--font-size-xs); gap: var(--space-1-5); margin-block-start: var(--space-1); }
  .cloud-table .cloud-cell--actions { inset-block-start: var(--cloud-micro); inset-inline-end: var(--cloud-micro); inline-size: auto; position: absolute; }
  .cloud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cloud-page[data-cloud-provider="synologyphotos"] .cloud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cloud-page[data-cloud-provider="synologyphotos"] .cloud-tile__mediawrap { block-size: 7rem; flex-basis: 7rem; }
  .cloud-tile { min-block-size: 9rem; padding: var(--space-2); }
  .cloud-tile__meta { grid-template-columns: 1fr; }
  .cloud-workspace__utility-rail { align-items: stretch; min-block-size: auto; }
  .cloud-pagination { align-items: stretch; flex-direction: column; }
  .cloud-pagination__meta, .cloud-pagination__buttons { justify-content: space-between; }
  .cloud-pagination__buttons .btn:first-child, .cloud-pagination__buttons .btn:last-child { font-size: 0; min-inline-size: var(--touch-target-min); }
  .cloud-pagination__buttons .btn:first-child::after { content: '‹'; font-size: var(--font-size-xl); }
  .cloud-pagination__buttons .btn:last-child::after { content: '›'; font-size: var(--font-size-xl); }
  .cloud-action-modal-backdrop { align-items: end; padding: 0; }
  .cloud-action-modal { border-radius: var(--radius-xl) var(--radius-xl) 0 0; inline-size: 100%; max-block-size: min(88dvh, 48rem); }
  .cloud-preview-meta { grid-template-columns: 1fr; }
  .cloud-preview-iframe, .cloud-preview-image, .cloud-preview-media, .cloud-preview-document-shell { block-size: 36dvh; }
}
@media (width >= 768px) { .cloud-workspace__context, .cloud-workspace__collection { padding: var(--space-3) var(--space-4); } .cloud-grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); } .cloud-page[data-cloud-provider="synologyphotos"] .cloud-grid { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } }
@media (width >= 1366px) { .cloud-table { table-layout: fixed; } .cloud-table th:first-child { inline-size: 44%; } .cloud-table th:nth-child(2) { inline-size: 12%; } .cloud-table th:nth-child(3) { inline-size: 10%; } .cloud-table th:nth-child(4) { inline-size: 20%; } .cloud-table th:last-child { inline-size: 14%; } .cloud-grid { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } .cloud-page[data-cloud-provider="synologyphotos"] .cloud-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } }
@media (width >= 1920px) { .cloud-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } .cloud-page[data-cloud-provider="synologyphotos"] .cloud-grid { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .cloud-page * { animation-duration: .01ms; transition-duration: .01ms; } }
@keyframes cloud-workspace-spin { to { transform: rotate(360deg); } }