@layer imago.application {
:root {
  --imu-touch: 44px;
  --imu-control: 48px;
  --imu-gutter: 14px;
  --imu-gap: 10px;
  --imu-radius: 8px;
  --imu-sheet-radius: 14px;
  --imu-safe-top: env(safe-area-inset-top, 0px);
  --imu-safe-right: env(safe-area-inset-right, 0px);
  --imu-safe-bottom: env(safe-area-inset-bottom, 0px);
  --imu-safe-left: env(safe-area-inset-left, 0px);
  --imu-visual-height: var(--imago-visual-height, 100dvh);
  --imu-keyboard-gap: var(--imago-keyboard-gap, 0px);
}

@media (max-width: 820px) {
  html {
    min-width: 0;
    min-height: 100%;
    overflow-x: clip;
    scroll-behavior: auto;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  :where(
    body.page-gallery,
    body.page-admin,
    body.page-share,
    body.page-login,
    body.page-share-review
  ) {
    min-width: 0;
    min-height: 100svh;
    min-height: var(--imu-visual-height);
    overflow-x: clip;
    overscroll-behavior-x: none;
    -webkit-tap-highlight-color: transparent;
  }

  :where(
    body.page-gallery,
    body.page-admin,
    body.page-share,
    body.page-login,
    body.page-share-review
  ) :where(
    button,
    [role="button"],
    a[href],
    input,
    textarea,
    select,
    summary
  ) {
    touch-action: manipulation;
  }

  :where(
    body.page-gallery,
    body.page-admin,
    body.page-share,
    body.page-login,
    body.page-share-review
  ) :where(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
  ) {
    max-width: 100%;
    min-width: 0;
    font-size: 16px !important;
  }

  :where(
    body.page-gallery,
    body.page-admin,
    body.page-share,
    body.page-login,
    body.page-share-review
  ) :where(
    button,
    .btn,
    .small-btn,
    [role="button"]
  ) {
    min-height: var(--imu-touch);
  }

  :where(
    body.page-gallery,
    body.page-admin,
    body.page-share,
    body.page-login,
    body.page-share-review
  ) :where(
    h1,
    h2,
    h3,
    h4,
    p,
    label,
    .title,
    .subtitle,
    .muted
  ) {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }

  :where(
    body.page-gallery,
    body.page-admin,
    body.page-share,
    body.page-login,
    body.page-share-review
  ) :where(
    code,
    pre,
    .audit-details,
    [data-breakable="true"]
  ) {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  :where(
    body.page-gallery,
    body.page-admin,
    body.page-share,
    body.page-login,
    body.page-share-review
  ) :where(
    [data-mobile-scrollable="true"],
    .table-wrap,
    .admin-nav,
    .media-subtabs,
    .share-folder-tabs-wrap,
    .share-photo-sort-switch
  ) {
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  :where(
    body.page-gallery,
    body.page-admin,
    body.page-share,
    body.page-login,
    body.page-share-review
  ) :where(
    [data-mobile-scrollable="true"],
    .table-wrap,
    .admin-nav,
    .media-subtabs,
    .share-folder-tabs-wrap,
    .share-photo-sort-switch
  )::-webkit-scrollbar {
    display: none;
  }

  :where(
    body.page-gallery,
    body.page-admin,
    body.page-share,
    body.page-login,
    body.page-share-review
  ) :where(
    [hidden],
    [inert]
  ) {
    pointer-events: none;
  }

  body.imago-keyboard-open :where(
    .mobile-bottom-nav,
    .gallery-bottom-nav,
    .share-scroll-top,
    .back-fab
  ) {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.imago-mobile-dialog-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  /* Shared bottom-sheet treatment for form and status dialogs. */
  body.page-gallery .modal-mask:not(#share-mask-modal),
  body.page-admin .modal-mask,
  body.page-admin .ai-modal-mask {
    width: 100vw !important;
    height: var(--imu-visual-height) !important;
    min-height: var(--imu-visual-height) !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding:
      max(8px, var(--imu-safe-top))
      0
      0 !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
  }

  body.page-gallery .modal-mask:not(#share-mask-modal) > .modal-card,
  body.page-admin .modal-mask > .modal-card,
  body.page-admin .ai-modal-card {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(var(--imu-visual-height) - max(8px, var(--imu-safe-top))) !important;
    margin: 0 !important;
    padding:
      0
      var(--imu-gutter)
      calc(var(--imu-gutter) + var(--imu-safe-bottom)) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: var(--imu-sheet-radius) var(--imu-sheet-radius) 0 0 !important;
    scrollbar-gutter: auto !important;
  }

  body.page-gallery .modal-mask > .im-dialog,
  body.page-admin .modal-mask > .im-dialog,
  body.page-admin .ai-modal-card.im-dialog {
    height: auto !important;
    max-height: calc(var(--imu-visual-height) - max(8px, var(--imu-safe-top))) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.page-gallery .modal-mask:not(#share-mask-modal) .modal-head,
  body.page-admin .modal-mask .modal-head,
  body.page-admin .ai-modal-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 6 !important;
    min-height: 60px !important;
    margin: 0 calc(-1 * var(--imu-gutter)) var(--imu-gap) !important;
    padding: 8px var(--imu-gutter) !important;
    border-bottom: 1px solid var(--im3-line) !important;
    background: color-mix(in srgb, var(--im3-surface) 96%, transparent) !important;
    backdrop-filter: blur(12px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(110%) !important;
  }

  body.page-gallery .modal-mask .im-dialog__header,
  body.page-admin .modal-mask .im-dialog__header,
  body.page-admin .ai-modal-card.im-dialog .im-dialog__header {
    position: static !important;
    margin: 0 !important;
  }

  body.page-gallery .im-dialog__body,
  body.page-admin .im-dialog__body,
  body.page-admin .ai-modal-card.im-dialog .im-dialog__body {
    min-height: 0 !important;
    padding:
      var(--imu-gutter)
      max(var(--imu-gutter), var(--imu-safe-right))
      var(--imu-gutter)
      max(var(--imu-gutter), var(--imu-safe-left)) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: auto !important;
  }

  body.page-gallery .im-dialog__body--flush,
  body.page-admin .im-dialog__body--flush {
    padding: 0 !important;
  }

  body.page-gallery .modal-mask:not(#share-mask-modal) .modal-title,
  body.page-admin .modal-mask .modal-title,
  body.page-admin .ai-modal-title {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  body.page-gallery .modal-mask:not(#share-mask-modal) .modal-head :is(button, .btn),
  body.page-admin .modal-mask .modal-head :is(button, .btn),
  body.page-admin .ai-modal-close-btn {
    min-width: var(--imu-touch) !important;
    min-height: var(--imu-touch) !important;
  }

  body.page-gallery :is(
    .entry-name-modal-actions,
    .upload-modal-actions,
    .tag-filter-actions
  ),
  body.page-admin .confirm-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding:
      10px
      var(--imu-gutter)
      calc(10px + var(--imu-safe-bottom)) !important;
    border-top: 1px solid var(--im3-line) !important;
    background: color-mix(in srgb, var(--im3-surface) 96%, transparent) !important;
    backdrop-filter: blur(12px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(110%) !important;
  }

  body.page-gallery .im-dialog__footer,
  body.page-admin .im-dialog__footer {
    position: static !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding:
      10px
      max(var(--imu-gutter), var(--imu-safe-right))
      calc(10px + var(--imu-safe-bottom))
      max(var(--imu-gutter), var(--imu-safe-left)) !important;
  }

  body.page-gallery :is(
    .entry-name-modal-actions,
    .upload-modal-actions,
    .tag-filter-actions
  ) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.page-gallery :is(
    .entry-name-modal-actions,
    .upload-modal-actions,
    .tag-filter-actions
  ) > :is(button, .btn),
  body.page-admin .confirm-actions > :is(button, .btn) {
    width: 100% !important;
    justify-content: center !important;
  }

  body.page-gallery .upload-modal-actions > :first-child {
    grid-column: 1 / -1;
  }

  body.page-gallery #upload-modal .upload-modal-actions.im-dialog__footer {
    position: static !important;
    inset: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.page-gallery #upload-modal .upload-modal-layout.im-dialog__body {
    gap: 12px !important;
  }

  body.page-gallery #upload-modal .upload-modal-block + .upload-modal-block {
    padding-top: 12px !important;
  }
}

/* Admin: single-row route rail, compact command hierarchy, and resilient forms. */
@media (max-width: 820px) {
  body.page-admin .admin-app-v2 {
    min-height: var(--imu-visual-height) !important;
  }

  body.page-admin .admin-sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 70 !important;
    padding:
      calc(8px + var(--imu-safe-top))
      max(var(--imu-gutter), var(--imu-safe-right))
      8px
      max(var(--imu-gutter), var(--imu-safe-left)) !important;
    background: color-mix(in srgb, var(--im3-surface) 97%, transparent) !important;
    backdrop-filter: blur(14px) saturate(112%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(112%) !important;
  }

  body.page-admin .admin-sidebar-head {
    min-height: 40px !important;
    padding: 0 0 8px !important;
  }

  body.page-admin .admin-brand {
    min-width: 0 !important;
  }

  body.page-admin .admin-brand__logo {
    width: 36px !important;
    height: 36px !important;
  }

  body.page-admin .admin-brand__copy strong {
    font-size: 15px !important;
  }

  body.page-admin .admin-brand__copy span,
  body.page-admin .admin-operator-card {
    display: none !important;
  }

  body.page-admin .admin-nav {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
    padding: 0 0 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-padding-inline: 6px !important;
    scroll-snap-type: x proximity !important;
  }

  body.page-admin .admin-nav-group {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(82px, max-content) !important;
    grid-template-rows: 14px var(--imu-touch) !important;
    gap: 5px 6px !important;
    padding-right: 12px !important;
    border-right: 1px solid var(--im3-line) !important;
  }

  body.page-admin .admin-nav-group h2 {
    grid-column: 1 / -1 !important;
    display: block !important;
    margin: 0 !important;
    color: var(--im3-muted) !important;
    font-size: 10px !important;
    line-height: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
  }

  body.page-admin .admin-nav-item {
    width: auto !important;
    min-width: 82px !important;
    height: var(--imu-touch) !important;
    min-height: var(--imu-touch) !important;
    justify-content: center !important;
    padding: 0 13px !important;
    border-radius: var(--imu-radius) !important;
    scroll-snap-align: start !important;
  }

  body.page-admin .admin-nav-item[aria-current="page"] {
    color: var(--im3-accent) !important;
    border-color: color-mix(in srgb, var(--im3-accent) 32%, var(--im3-line)) !important;
    background: var(--im3-accent-soft) !important;
  }

  body.page-admin .admin-main-v2.container {
    min-width: 0 !important;
    padding:
      0
      max(var(--imu-gutter), var(--imu-safe-right))
      calc(42px + var(--imu-safe-bottom))
      max(var(--imu-gutter), var(--imu-safe-left)) !important;
  }

  body.page-admin .admin-header-v2 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    padding: 14px 0 12px !important;
  }

  body.page-admin .admin-route-heading {
    min-width: 0 !important;
  }

  body.page-admin .im-page-title {
    font-size: 23px !important;
    line-height: 1.16 !important;
  }

  body.page-admin .admin-route-desc {
    display: -webkit-box !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body.page-admin .admin-header-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: start !important;
    justify-content: flex-end !important;
    width: auto !important;
    gap: 6px !important;
  }

  body.page-admin .admin-header-actions .badge {
    display: none !important;
  }

  body.page-admin .admin-header-actions .btn {
    width: auto !important;
    min-width: 84px !important;
    height: var(--imu-touch) !important;
    min-height: var(--imu-touch) !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  body.page-admin .admin-command-strip {
    display: none !important;
  }

  body.page-admin .admin-command-copy {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  body.page-admin .admin-command-actions {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(116px, 1fr) !important;
    grid-template-columns: none !important;
    gap: 7px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity !important;
  }

  body.page-admin .admin-command-actions .btn {
    width: 100% !important;
    scroll-snap-align: start !important;
  }

  body.page-admin .admin-main-v2 > .tab-panel {
    min-width: 0 !important;
  }

  body.page-admin .admin-main-v2 > .tab-panel > h3,
  body.page-admin .admin-panel-head h3 {
    margin: 0 !important;
    font-size: 19px !important;
    line-height: 1.25 !important;
  }

  body.page-admin .admin-panel-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
  }

  body.page-admin :is(
    .admin-panel-actions,
    .settings-mount-actions,
    .media-actions,
    .share-filter-actions,
    .share-bulk-actions,
    .upload-bulk-actions,
    .upload-bulk-actions__review,
    .upload-row-actions,
    .ai-page-actions
  ) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
  }

  body.page-admin #settings-card #panel-update-btn {
    width: 100% !important;
    min-width: 0 !important;
    margin-inline-start: 0 !important;
  }

  body.page-admin :is(
    .admin-panel-actions,
    .settings-mount-actions,
    .media-actions,
    .share-filter-actions,
    .share-bulk-actions,
    .upload-bulk-actions,
    .upload-bulk-actions__review,
    .upload-row-actions,
    .ai-page-actions
  ) > :is(
    button,
    .btn,
    .small-btn,
    select,
    input:not([type]),
    input[type="text"],
    input[type="search"],
    input[type="password"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="time"]
  ) {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  body.page-admin :is(.row, .row3, .row4) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body.page-admin :is(
    .overview-summary-grid,
    .tag-summary-grid,
    .share-summary-grid,
    .media-summary-grid,
    .ai-summary-grid
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.page-admin #overview-card .overview-summary-grid {
    gap: 0 !important;
  }

  body.page-admin #overview-card .overview-summary-grid .overview-item {
    border-right: 1px solid var(--im3-line) !important;
    border-bottom: 1px solid var(--im3-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body.page-admin #overview-card .overview-summary-grid .overview-item:nth-child(2n) {
    border-right: 0 !important;
  }

  body.page-admin #overview-card .overview-summary-grid .overview-item:nth-child(n + 3) {
    border-bottom: 0 !important;
  }

  body.page-admin :is(
    .media-agent-grid,
    .media-grid,
    .ai-panel-grid,
    .ai-dashboard-grid,
    .ai-config-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.page-admin .overview-item {
    min-height: 96px !important;
    padding: 12px !important;
  }

  body.page-admin .overview-item .value {
    font-size: 24px !important;
  }

  body.page-admin .admin-maintenance-pipeline {
    margin-top: 16px !important;
    padding-top: 14px !important;
  }

  body.page-admin .admin-flow-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.page-admin .admin-flow-list li {
    padding: 11px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--im3-line) !important;
  }

  body.page-admin .admin-flow-list li:last-child {
    border-bottom: 0 !important;
  }

  body.page-admin :is(
    textarea,
    select,
    input:not([type]),
    input[type="text"],
    input[type="search"],
    input[type="password"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="time"]
  ) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--imu-control) !important;
  }

  body.page-admin textarea {
    min-height: 112px !important;
  }

  body.page-admin .table-wrap {
    max-width: calc(100vw - max(var(--imu-gutter), var(--imu-safe-left)) - max(var(--imu-gutter), var(--imu-safe-right))) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    scroll-padding-inline: 12px !important;
  }

  body.page-admin :is(
    #users-card,
    #albums-card,
    #acl-card,
    #uploads-card,
    #tags-card,
    #share-card,
    #media-card,
    #audit-card
  ) > .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
  }

  body.page-admin table.admin-table:not(.share-table) :is(tr, td),
  body.page-admin table.admin-table:not(.share-table) td > :is(
    button,
    .btn,
    .small-btn,
    input,
    select,
    textarea
  ) {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.page-admin .media-subtabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 8 !important;
    display: flex !important;
    width: 100% !important;
    padding: 4px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity !important;
    background: var(--im3-surface) !important;
  }

  body.page-admin .media-subtab {
    flex: 0 0 auto !important;
    min-width: 112px !important;
    scroll-snap-align: start !important;
  }

  body.page-admin .settings-bottom-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-top: 18px !important;
  }

  body.page-admin .ai-modal-card {
    min-height: min(74dvh, 640px) !important;
  }

  body.page-admin .credential-confirm-card {
    display: grid !important;
    gap: 12px !important;
  }

  body.page-admin .credential-confirm-copy {
    color: var(--im3-ink-soft) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  body.page-admin .credential-confirm-target {
    min-height: var(--imu-touch) !important;
    display: flex !important;
    align-items: center !important;
    padding: 9px 11px !important;
    border: 1px solid var(--im3-line) !important;
    border-radius: var(--imu-radius) !important;
    background: var(--im3-surface-subtle) !important;
    color: var(--im3-ink) !important;
    font-weight: 650 !important;
  }

  body.page-admin .credential-confirm-status {
    min-height: 20px !important;
    color: var(--im3-danger) !important;
    font-size: 12px !important;
  }

  body.page-admin .credential-confirm-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.page-admin .share-qr-popover {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 12000 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(82dvh, calc(var(--imu-visual-height) - max(18px, var(--imu-safe-top)))) !important;
    margin: 0 !important;
    padding:
      14px
      var(--imu-gutter)
      calc(14px + var(--imu-safe-bottom)) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: var(--imu-sheet-radius) var(--imu-sheet-radius) 0 0 !important;
  }

  body.page-admin .share-qr-head {
    position: sticky !important;
    top: -14px !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: -14px calc(-1 * var(--imu-gutter)) 10px !important;
    padding: 8px var(--imu-gutter) !important;
    border-bottom: 1px solid var(--im3-line) !important;
    background: color-mix(in srgb, var(--im3-surface) 96%, transparent) !important;
    backdrop-filter: blur(12px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(110%) !important;
  }

  body.page-admin .share-qr-close {
    min-width: var(--imu-touch) !important;
    min-height: var(--imu-touch) !important;
  }

  body.page-admin .toast-root,
  body.page-admin #toast-root {
    top: calc(10px + var(--imu-safe-top)) !important;
    right: max(10px, var(--imu-safe-right)) !important;
    left: max(10px, var(--imu-safe-left)) !important;
    bottom: auto !important;
    width: auto !important;
  }

  body.page-admin .ai-modal-body {
    min-width: 0 !important;
    padding-bottom: var(--imu-safe-bottom) !important;
  }

  body.page-admin :is(
    .ai-table-scroll,
    .ai-table-scroll--compact,
    .ai-modal-pre
  ) {
    max-width: 100% !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
  }
}

/* Gallery: stable two-column media, prioritized dock, and full-height tools. */
@media (max-width: 820px) {
  body.page-gallery {
    --imu-gallery-dock: calc(64px + var(--imu-safe-bottom));
  }

  body.page-gallery .gallery-v2 .main-content {
    width: 100% !important;
    height: var(--imu-visual-height) !important;
    min-height: var(--imu-visual-height) !important;
    scroll-padding-bottom: calc(var(--imu-gallery-dock) + 16px) !important;
  }

  body.page-gallery .gallery-v2 .gallery-topbar {
    min-height: calc(56px + var(--imu-safe-top)) !important;
    padding:
      calc(6px + var(--imu-safe-top))
      max(10px, var(--imu-safe-right))
      6px
      max(10px, var(--imu-safe-left)) !important;
  }

  body.page-gallery .gallery-v2 .gallery-topbar__inner,
  body.page-gallery .gallery-v2 .gallery-topbar__left {
    min-width: 0 !important;
  }

  body.page-gallery .gallery-v2 .breadcrumb {
    min-width: 0 !important;
    font-size: 12px !important;
  }

  body.page-gallery .gallery-rail-close {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 var(--imu-touch) !important;
    width: var(--imu-touch) !important;
    min-width: var(--imu-touch) !important;
    height: var(--imu-touch) !important;
    min-height: var(--imu-touch) !important;
    margin-left: auto !important;
    padding: 0 !important;
    border: 1px solid var(--im3-line) !important;
    border-radius: var(--imu-radius) !important;
    background: var(--im3-control) !important;
    color: var(--im3-ink-soft) !important;
  }

  body.page-gallery .gallery-v2 .gallery-workbench {
    width: 100% !important;
    padding:
      14px
      max(10px, var(--imu-safe-right))
      calc(var(--imu-gallery-dock) + 18px)
      max(10px, var(--imu-safe-left)) !important;
  }

  body.page-gallery .gallery-v2 .gallery-view-heading {
    margin-bottom: 14px !important;
  }

  body.page-gallery .gallery-v2 .gallery-view-heading .title {
    font-size: 23px !important;
    line-height: 1.18 !important;
  }

  body.page-gallery .gallery-v2 .gallery-view-heading .subtitle {
    margin-top: 6px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  body.page-gallery .grid.albums.album-grid.album-grid--poster {
    gap: 10px !important;
  }

  body.page-gallery .album-card--poster {
    min-height: 108px !important;
    grid-template-columns: minmax(0, 1fr) 104px !important;
  }

  body.page-gallery .album-card--poster .album-main {
    min-height: 108px !important;
    padding: 13px 12px !important;
  }

  body.page-gallery .album-card--poster .album-cover {
    width: 104px !important;
    height: 108px !important;
  }

  body.page-gallery .album-card--poster .album-title {
    font-size: 16px !important;
    line-height: 1.28 !important;
  }

  body.page-gallery #photo-grid.photo-masonry {
    grid-template-columns: repeat(var(--mobile-photo-column-count, 2), minmax(0, 1fr)) !important;
    gap: var(--mobile-photo-gap, 5px) !important;
  }

  body.page-gallery #photo-grid.photo-masonry > .photo-tile,
  body.page-gallery #photo-grid .photo-masonry-col {
    min-width: 0 !important;
    gap: var(--mobile-photo-gap, 5px) !important;
  }

  body.page-gallery .photo-tile,
  body.page-gallery .photo-frame {
    border-radius: 6px !important;
  }

  body.page-gallery .photo-overlay-meta {
    min-height: 38px !important;
    padding: 17px 6px 6px !important;
  }

  body.page-gallery .photo-overlay-name {
    font-size: 10.5px !important;
  }

  body.page-gallery .gallery-v2 .gallery-bottom-nav,
  body.page-gallery .mobile-bottom-nav {
    height: var(--imu-gallery-dock) !important;
    min-height: var(--imu-gallery-dock) !important;
    padding:
      4px
      max(6px, var(--imu-safe-right))
      calc(4px + var(--imu-safe-bottom))
      max(6px, var(--imu-safe-left)) !important;
  }

  body.page-gallery #mobile-nav-back:not(.is-available) {
    display: none !important;
  }

  body.page-gallery #mobile-nav-back.is-available + #mobile-nav-home {
    display: none !important;
  }

  body.page-gallery .mobile-nav-item,
  body.page-gallery .gallery-v2 .mobile-nav-item {
    min-width: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 3px 2px !important;
    gap: 2px !important;
    border-radius: var(--imu-radius) !important;
  }

  body.page-gallery .mobile-nav-item svg {
    width: 21px !important;
    height: 21px !important;
  }

  body.page-gallery .mobile-nav-item span {
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.page-gallery .mobile-bottom-sheet {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(78dvh, calc(var(--imu-visual-height) - max(24px, var(--imu-safe-top)))) !important;
    padding-bottom: var(--imu-safe-bottom) !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: var(--imu-sheet-radius) var(--imu-sheet-radius) 0 0 !important;
  }

  body.page-gallery .mobile-sheet-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
    min-height: 58px !important;
    padding:
      7px
      max(var(--imu-gutter), var(--imu-safe-right))
      7px
      max(var(--imu-gutter), var(--imu-safe-left)) !important;
    border-bottom: 1px solid var(--im3-line) !important;
    background: color-mix(in srgb, var(--im3-surface) 96%, transparent) !important;
  }

  body.page-gallery .mobile-sheet-title {
    font-size: 18px !important;
  }

  body.page-gallery .mobile-sheet-close {
    width: var(--imu-touch) !important;
    min-width: var(--imu-touch) !important;
    height: var(--imu-touch) !important;
    min-height: var(--imu-touch) !important;
  }

  body.page-gallery .mobile-sheet-body {
    min-height: 0 !important;
    max-height: calc(78dvh - 66px - var(--imu-safe-bottom)) !important;
    padding:
      12px
      max(var(--imu-gutter), var(--imu-safe-right))
      calc(14px + var(--imu-safe-bottom))
      max(var(--imu-gutter), var(--imu-safe-left)) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
  }

  body.page-gallery .mobile-sheet-handle {
    pointer-events: none !important;
  }

  body.page-gallery #mobile-filter-sheet .mobile-sheet-body {
    max-height: calc(78dvh - 124px - var(--imu-safe-bottom)) !important;
    padding-bottom: 12px !important;
  }

  body.page-gallery .mobile-sheet-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 4 !important;
    display: grid !important;
    padding:
      10px
      max(var(--imu-gutter), var(--imu-safe-right))
      calc(10px + var(--imu-safe-bottom)) !important;
    padding-left: max(var(--imu-gutter), var(--imu-safe-left)) !important;
    border-top: 1px solid var(--im3-line) !important;
    background: color-mix(in srgb, var(--im3-surface) 96%, transparent) !important;
    backdrop-filter: blur(12px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(110%) !important;
  }

  body.page-gallery .mobile-sheet-footer > :is(button, .btn) {
    width: 100% !important;
    min-height: var(--imu-control) !important;
    justify-content: center !important;
  }

  body.page-gallery .mobile-sheet-pills {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.page-gallery .mobile-sheet-pills .picker-pill {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: var(--imu-touch) !important;
    overflow: hidden !important;
    justify-content: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.page-gallery .mobile-more-actions {
    gap: 8px !important;
  }

  body.page-gallery .mobile-more-btn {
    width: 100% !important;
    min-height: var(--imu-control) !important;
  }

  body.page-gallery .gsearch-backdrop {
    width: 100vw !important;
    height: var(--imu-visual-height) !important;
    padding: 0 !important;
    align-items: stretch !important;
  }

  body.page-gallery .gsearch-modal {
    width: 100% !important;
    height: var(--imu-visual-height) !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  body.page-gallery .gsearch-input-row {
    min-height: calc(58px + var(--imu-safe-top)) !important;
    padding:
      calc(7px + var(--imu-safe-top))
      max(10px, var(--imu-safe-right))
      7px
      max(10px, var(--imu-safe-left)) !important;
  }

  body.page-gallery .gsearch-input {
    min-height: var(--imu-control) !important;
  }

  body.page-gallery .gsearch-close {
    width: var(--imu-touch) !important;
    min-width: var(--imu-touch) !important;
    height: var(--imu-touch) !important;
    min-height: var(--imu-touch) !important;
  }

  body.page-gallery .gsearch-content-area,
  body.page-gallery .gsearch-body {
    min-height: 0 !important;
  }

  body.page-gallery .gsearch-body {
    padding-bottom: calc(18px + var(--imu-safe-bottom)) !important;
    overscroll-behavior: contain !important;
  }

  body.page-gallery .upload-modal-layout,
  body.page-gallery .share-modal-layout,
  body.page-gallery .tag-modal-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body.page-gallery .upload-modal-block,
  body.page-gallery .share-modal-block {
    min-width: 0 !important;
    padding: 12px !important;
  }

  body.page-gallery .upload-dropzone {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  body.page-gallery .upload-picker-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
  }

  body.page-gallery .upload-picker-actions .btn {
    width: 100% !important;
  }

  body.page-gallery #share-modal.modal-mask > .share-modal-card {
    height: var(--imu-visual-height) !important;
    max-height: var(--imu-visual-height) !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  body.page-gallery #share-modal.modal-mask .share-modal-head {
    position: static !important;
    margin: 0 !important;
    padding:
      max(10px, var(--imu-safe-top))
      max(14px, var(--imu-safe-right))
      10px
      max(16px, var(--imu-safe-left)) !important;
  }

  body.page-gallery #share-modal .share-modal-tabs {
    position: static !important;
    top: auto !important;
    z-index: 5 !important;
    margin: 0 !important;
    padding:
      8px
      max(16px, var(--imu-safe-right))
      8px
      max(16px, var(--imu-safe-left)) !important;
    border-bottom: 1px solid var(--im3-line) !important;
    background: var(--im3-surface) !important;
  }

  body.page-gallery #share-modal .share-modal-tab {
    min-height: var(--imu-touch) !important;
  }

  body.page-gallery #share-modal :is(
    #share-tab-album,
    #share-tab-all
  ):not([hidden]) {
    min-height: 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    padding-bottom: calc(12px + var(--imu-safe-bottom)) !important;
  }

  body.page-gallery #share-modal #share-tab-album:not([hidden]) {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    grid-template-areas: none !important;
  }

  body.page-gallery #share-modal #share-tab-album :is(
    .share-create-section,
    .share-modal-block-result,
    .share-modal-block-list
  ) {
    min-height: 0 !important;
    overflow: visible !important;
    border-right: 0 !important;
  }

  body.page-gallery .share-modal-card :is(
    .row,
    .row3,
    .row4,
    .share-created-row,
    .share-all-toolbar
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.page-gallery .share-link-card__primary-actions,
  body.page-gallery .share-link-card__footer {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.page-gallery .share-link-card__primary-actions > *,
  body.page-gallery .share-link-card__footer > * {
    width: 100% !important;
  }

  body.page-gallery #share-modal :is(
    .share-link-card .small-btn,
    .share-link-manage summary,
    .share-link-manage__menu .small-btn
  ) {
    min-height: var(--imu-touch) !important;
    height: var(--imu-touch) !important;
  }

  body.page-gallery #share-modal .share-link-manage__trigger {
    width: var(--imu-touch) !important;
    min-width: var(--imu-touch) !important;
    padding: 0 !important;
  }

  body.page-gallery #share-mask-modal {
    width: 100vw !important;
    height: var(--imu-visual-height) !important;
    min-height: var(--imu-visual-height) !important;
    align-items: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.page-gallery #share-mask-modal > .share-mask-card {
    width: 100% !important;
    height: var(--imu-visual-height) !important;
    max-width: none !important;
    max-height: var(--imu-visual-height) !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  body.page-gallery .share-mask-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.page-gallery .share-mask-controls {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: 8px !important;
  }

  body.page-gallery .share-mask-control-row {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  body.page-gallery .share-mask-filter {
    flex: 1 1 210px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.page-gallery #share-mask-modal :is(
    .share-mask-filter-btn,
    .share-review-link-actions .btn
  ) {
    min-height: var(--imu-touch) !important;
    height: var(--imu-touch) !important;
  }

  body.page-gallery #share-mask-modal .share-review-link-url input {
    min-height: var(--imu-touch) !important;
    height: var(--imu-touch) !important;
  }

  body.page-gallery #share-mask-modal .share-mask-footer {
    min-height: 76px !important;
    grid-template-areas:
      "switch save"
      "status status" !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 4px 8px !important;
    padding:
      6px
      max(10px, var(--imu-safe-right))
      calc(6px + var(--imu-safe-bottom))
      max(10px, var(--imu-safe-left)) !important;
  }

  body.page-gallery #share-mask-modal .share-mask-switch {
    grid-area: switch !important;
    min-width: 0 !important;
  }

  body.page-gallery #share-mask-modal .share-mask-status {
    grid-area: status !important;
    overflow: visible !important;
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  body.page-gallery #share-mask-modal #share-mask-save {
    grid-area: save !important;
    min-width: 68px !important;
    min-height: var(--imu-touch) !important;
    height: var(--imu-touch) !important;
  }

  body.page-gallery .gallery-lightbox-v2 .lb-main {
    width: 100% !important;
    height: var(--imu-visual-height) !important;
    min-height: var(--imu-visual-height) !important;
  }

  body.page-gallery .gallery-lightbox-v2 .lb-head-primary {
    min-height: calc(54px + var(--imu-safe-top)) !important;
    padding:
      calc(7px + var(--imu-safe-top))
      max(9px, var(--imu-safe-right))
      7px
      max(9px, var(--imu-safe-left)) !important;
  }

  body.page-gallery .gallery-lightbox-v2 .lb-title {
    font-size: 13px !important;
  }

  body.page-gallery .gallery-lightbox-v2 .lb-icon-btn-close {
    width: var(--imu-touch) !important;
    min-width: var(--imu-touch) !important;
    height: var(--imu-touch) !important;
    min-height: var(--imu-touch) !important;
  }

  body.page-gallery .gallery-lightbox-v2 .lb-bottom-bar {
    min-height: calc(60px + var(--imu-safe-bottom)) !important;
    padding:
      5px
      max(8px, var(--imu-safe-right))
      calc(5px + var(--imu-safe-bottom))
      max(8px, var(--imu-safe-left)) !important;
  }

  body.page-gallery .gallery-lightbox-v2 .lb-bottom-btn {
    min-height: 50px !important;
  }

  body.page-gallery .gallery-lightbox-v2 .lb-side-panel {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(76dvh, calc(var(--imu-visual-height) - 44px)) !important;
    padding-bottom: var(--imu-safe-bottom) !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: var(--imu-sheet-radius) var(--imu-sheet-radius) 0 0 !important;
  }

  body.page-gallery .gallery-lightbox-v2 .lb-side-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
    min-height: 54px !important;
    padding:
      5px
      max(8px, var(--imu-safe-right))
      5px
      max(8px, var(--imu-safe-left)) !important;
    background: color-mix(in srgb, #151a22 96%, transparent) !important;
  }

  body.page-gallery .gallery-lightbox-v2 :is(
    .lb-side-tab,
    .lb-side-close
  ) {
    min-height: var(--imu-touch) !important;
  }

  body.page-gallery .gallery-lightbox-v2 .lb-side-close {
    width: var(--imu-touch) !important;
    min-width: var(--imu-touch) !important;
    height: var(--imu-touch) !important;
    display: inline-grid !important;
    place-items: center !important;
    margin-left: auto !important;
  }

  body.page-gallery .gallery-lightbox-v2 .lb-side-scroll {
    padding-bottom: calc(12px + var(--imu-safe-bottom)) !important;
    overscroll-behavior: contain !important;
  }
}

@media (max-width: 640px) {
  body.page-gallery .share-mask-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 380px) {
  body.page-gallery {
    --mobile-photo-column-count: 1;
  }

  body.page-gallery .album-card--poster {
    grid-template-columns: minmax(0, 1fr) 94px !important;
  }

  body.page-gallery .album-card--poster .album-cover {
    width: 94px !important;
  }

  body.page-gallery .mobile-nav-item span {
    font-size: 9px !important;
  }

  body.page-gallery .mobile-sheet-pills {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Public share: shorter first viewport, legible controls, and viewer-safe chrome. */
@media (max-width: 720px) {
  body.page-share:not(.page-share-gate) .share-page-v2 .share-hero-v2__frame {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  body.page-share:not(.page-share-gate) .share-page-v2 .share-hero-v2__content {
    position: relative !important;
    inset: auto !important;
    min-height: min(58svh, 340px) !important;
    height: auto !important;
    padding:
      clamp(72px, 16svh, 104px)
      max(var(--imu-gutter), var(--imu-safe-right))
      20px
      max(var(--imu-gutter), var(--imu-safe-left)) !important;
  }

  body.page-share:not(.page-share-gate) .share-page-v2 .share-hero-name {
    max-width: min(16ch, 100%) !important;
    font-size: clamp(26px, 8vw, 32px) !important;
    line-height: 1.12 !important;
  }

  body.page-share:not(.page-share-gate) .share-page-v2 .share-content-sub {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  body.page-share:not(.page-share-gate) .share-page-v2 .share-photo-sort-switch {
    width: min(100%, 300px) !important;
    min-height: 50px !important;
    padding: 3px !important;
  }

  body.page-share:not(.page-share-gate) .share-page-v2 .share-photo-sort-btn,
  body.page-share:not(.page-share-gate) .share-page-v2 .share-folder-tab,
  body.page-share:not(.page-share-gate) .share-page-v2 .share-toolbar-btn {
    min-height: var(--imu-touch) !important;
    height: var(--imu-touch) !important;
  }

  body.page-share:not(.page-share-gate) .share-page-v2 .share-toolbar-v2 {
    min-height: 54px !important;
    padding:
      5px
      max(8px, var(--imu-safe-right))
      5px
      max(8px, var(--imu-safe-left)) !important;
    overflow: hidden !important;
  }

  body.page-share:not(.page-share-gate) .share-page-v2 .share-folder-tabs-wrap {
    min-width: 0 !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity !important;
  }

  body.page-share:not(.page-share-gate) .share-page-v2 .share-folder-tab {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
  }

  body.page-share:not(.page-share-gate) .share-page-v2 .share-breadcrumb {
    min-height: var(--imu-touch) !important;
    padding:
      8px
      max(10px, var(--imu-safe-right))
      0
      max(10px, var(--imu-safe-left)) !important;
  }

  body.page-share:not(.page-share-gate) .share-page-v2 .share-main {
    padding:
      14px
      max(6px, var(--imu-safe-right))
      calc(42px + var(--imu-safe-bottom))
      max(6px, var(--imu-safe-left)) !important;
  }

  body.page-share:not(.page-share-gate) .share-page-v2 .share-section + .share-section {
    margin-top: 16px !important;
  }

  body.page-share:not(.page-share-gate) .share-page-v2 .share-folder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.page-share:not(.page-share-gate) .share-page-v2 :is(
    .share-photo-grid,
    .share-photo-grid.is-compact,
    .share-photo-column,
    .share-photo-grid.is-compact .share-photo-column
  ) {
    gap: 5px !important;
  }

  body.page-share:not(.page-share-gate) .share-page-v2 .share-folder-card,
  body.page-share:not(.page-share-gate) .share-page-v2 .share-photo-card {
    min-width: 0 !important;
  }

  body.page-share:not(.page-share-gate) .share-page-v2 .share-folder-name {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  body.page-share:not(.page-share-gate) .share-page-v2 .share-page-load-state,
  body.page-share:not(.page-share-gate) .share-page-v2 .share-empty {
    min-height: 160px !important;
    padding: 24px 16px !important;
  }

  body.page-share .share-scroll-top {
    right: max(10px, var(--imu-safe-right)) !important;
    bottom: calc(10px + var(--imu-safe-bottom)) !important;
    width: var(--imu-touch) !important;
    min-width: var(--imu-touch) !important;
    height: var(--imu-touch) !important;
    min-height: var(--imu-touch) !important;
  }

  body.page-share .share-lightbox {
    width: 100vw !important;
    height: var(--imu-visual-height) !important;
    min-height: var(--imu-visual-height) !important;
  }

  body.page-share .share-lightbox-main,
  body.page-share .share-lightbox-stage {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  body.page-share .share-lightbox-head {
    min-height: calc(56px + var(--imu-safe-top)) !important;
    padding:
      calc(8px + var(--imu-safe-top))
      max(10px, var(--imu-safe-right))
      8px
      max(10px, var(--imu-safe-left)) !important;
  }

  body.page-share .share-lightbox-meta {
    max-width: calc(100vw - 72px - var(--imu-safe-right) - var(--imu-safe-left)) !important;
    min-height: var(--imu-touch) !important;
  }

  body.page-share #share-lightbox-close-btn,
  body.page-share.share-lightbox-downloads-disabled #share-lightbox-close-btn {
    top: calc(8px + var(--imu-safe-top)) !important;
    right: max(10px, var(--imu-safe-right)) !important;
    width: var(--imu-touch) !important;
    min-width: var(--imu-touch) !important;
    height: var(--imu-touch) !important;
    min-height: var(--imu-touch) !important;
  }

  body.page-share .share-lightbox-caption-sheet {
    right: max(10px, var(--imu-safe-right)) !important;
    bottom: calc(76px + var(--imu-safe-bottom)) !important;
    left: max(10px, var(--imu-safe-left)) !important;
    width: auto !important;
    max-height: min(42dvh, 320px) !important;
    transform: none !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    border-radius: 10px !important;
  }

  body.page-share .share-lightbox-mobile-hint {
    max-width: calc(100vw - 28px) !important;
    font-size: 11px !important;
  }

  body.page-share:not(.share-lightbox-downloads-disabled) .share-lightbox-mobile-hint {
    bottom: calc(82px + var(--imu-safe-bottom)) !important;
  }

  body.page-share.share-lightbox-downloads-disabled .share-lightbox-mobile-hint {
    bottom: calc(14px + var(--imu-safe-bottom)) !important;
  }
}

/* Login, password gate, and expired gate share one keyboard-safe rhythm. */
@media (max-width: 560px) {
  body.page-login,
  body.page-share-gate {
    min-height: var(--imu-visual-height) !important;
  }

  body.page-login {
    justify-content: flex-start !important;
    padding:
      calc(20px + var(--imu-safe-top))
      max(var(--imu-gutter), var(--imu-safe-right))
      calc(20px + var(--imu-safe-bottom))
      max(var(--imu-gutter), var(--imu-safe-left)) !important;
  }

  body.page-login .panel {
    width: 100% !important;
    max-width: 440px !important;
    margin: auto !important;
    padding: 24px 18px !important;
    border-radius: 12px !important;
  }

  body.page-login .brand {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    column-gap: 11px !important;
    margin-bottom: 18px !important;
  }

  body.page-login .logo {
    width: 50px !important;
    height: 50px !important;
    border-radius: 10px !important;
  }

  body.page-login .brand h1 {
    font-size: 23px !important;
  }

  body.page-login .sub {
    margin-bottom: 18px !important;
    font-size: 13px !important;
  }

  body.page-login :is(
    input,
    .password-wrap,
    .password-toggle,
    button[type="submit"]
  ) {
    min-height: var(--imu-control) !important;
  }

  body.page-login button[type="submit"] {
    width: 100% !important;
  }

  body.page-login .login-watermark {
    margin: 14px auto 0 !important;
  }

  body.page-share-gate .share-gate-shell {
    min-height: var(--imu-visual-height) !important;
    align-items: center !important;
    padding:
      calc(18px + var(--imu-safe-top))
      max(var(--imu-gutter), var(--imu-safe-right))
      calc(18px + var(--imu-safe-bottom))
      max(var(--imu-gutter), var(--imu-safe-left)) !important;
  }

  body.page-share-gate .share-gate-card {
    width: 100% !important;
    max-width: 440px !important;
    max-height: calc(var(--imu-visual-height) - 36px - var(--imu-safe-top) - var(--imu-safe-bottom)) !important;
    padding: 24px 18px !important;
    overflow: auto !important;
    border-radius: 12px !important;
    overscroll-behavior: contain !important;
  }

  body.page-share-gate .share-gate-logo {
    width: 48px !important;
    height: 48px !important;
    border-radius: 10px !important;
  }

  body.page-share-gate .share-gate-title {
    font-size: 23px !important;
    line-height: 1.2 !important;
  }

  body.page-share-gate .share-gate-desc {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  body.page-share-gate :is(
    .share-gate-password-wrap,
    .share-gate-input,
    .share-gate-password-toggle,
    .share-gate-submit,
    .share-gate-submit-ghost
  ) {
    min-height: var(--imu-control) !important;
  }

  body.page-share-gate .share-gate-submit,
  body.page-share-gate .share-gate-submit-ghost {
    width: 100% !important;
  }

  body.imago-keyboard-open.page-login,
  body.imago-keyboard-open.page-share-gate .share-gate-shell {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  body.imago-keyboard-open.page-login .panel,
  body.imago-keyboard-open.page-share-gate .share-gate-card {
    margin-top: 0 !important;
    margin-bottom: var(--imu-keyboard-gap) !important;
  }
}

@media (max-width: 360px) {
  :root {
    --imu-gutter: 12px;
  }

  body.page-admin :is(
    .overview-summary-grid,
    .tag-summary-grid,
    .share-summary-grid,
    .media-summary-grid,
    .ai-summary-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.page-admin #overview-card .overview-summary-grid .overview-item {
    border-right: 0 !important;
    border-bottom: 1px solid var(--im3-line) !important;
  }

  body.page-admin #overview-card .overview-summary-grid .overview-item:last-child {
    border-bottom: 0 !important;
  }

  body.page-admin :is(
    .admin-panel-actions,
    .settings-mount-actions,
    .media-actions,
    .share-filter-actions,
    .share-bulk-actions,
    .upload-bulk-actions,
    .upload-bulk-actions__review,
    .upload-row-actions,
    .ai-page-actions
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.page-gallery .share-link-card__primary-actions,
  body.page-gallery .share-link-card__footer {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (min-width: 821px) and (max-width: 900px) {
  body.page-admin .admin-app-v2 {
    display: block !important;
    min-height: var(--imu-visual-height) !important;
  }

  body.page-admin .admin-sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 70 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 10px 18px 8px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--im3-line) !important;
    background: color-mix(in srgb, var(--im3-surface) 97%, transparent) !important;
    backdrop-filter: blur(14px) saturate(112%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(112%) !important;
  }

  body.page-admin .admin-sidebar-head {
    min-height: 40px !important;
    padding: 0 0 8px !important;
  }

  body.page-admin .admin-operator-card,
  body.page-admin .admin-nav-group h2 {
    display: none !important;
  }

  body.page-admin .admin-nav,
  body.page-admin .admin-nav-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
  }

  body.page-admin .admin-nav {
    width: 100% !important;
    padding: 0 0 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body.page-admin .admin-nav-group {
    flex: 0 0 auto !important;
  }

  body.page-admin .admin-nav-item {
    width: auto !important;
    min-width: max-content !important;
    min-height: var(--imu-touch) !important;
    padding: 0 14px !important;
    border-radius: var(--imu-radius) !important;
  }

  body.page-admin .admin-main-v2.container {
    max-width: none !important;
    padding: 0 18px 48px !important;
  }

  body.page-admin .admin-header-v2 {
    position: static !important;
    min-height: 0 !important;
    padding: 16px 0 14px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (min-width: 821px) {
  body.page-gallery .gallery-rail-close {
    display: none !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  :root {
    --imu-gutter: 10px;
  }

  body.page-gallery .modal-mask:not(#share-mask-modal),
  body.page-admin .modal-mask,
  body.page-admin .ai-modal-mask {
    width: 100vw !important;
    height: var(--imu-visual-height) !important;
    min-height: var(--imu-visual-height) !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: max(4px, var(--imu-safe-top)) 0 0 !important;
    overflow: hidden !important;
  }

  body.page-gallery .mobile-bottom-sheet,
  body.page-gallery .modal-mask:not(#share-mask-modal) > .modal-card,
  body.page-admin .modal-mask > .modal-card,
  body.page-admin .ai-modal-card {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(var(--imu-visual-height) - max(4px, var(--imu-safe-top))) !important;
    margin: 0 !important;
    padding:
      0
      max(var(--imu-gutter), var(--imu-safe-right))
      calc(var(--imu-gutter) + var(--imu-safe-bottom))
      max(var(--imu-gutter), var(--imu-safe-left)) !important;
    overflow: auto !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: var(--imu-sheet-radius) var(--imu-sheet-radius) 0 0 !important;
  }

  body.page-gallery .modal-mask:not(#share-mask-modal) .modal-head,
  body.page-admin .modal-mask .modal-head,
  body.page-admin .ai-modal-head,
  body.page-gallery .mobile-sheet-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 6 !important;
    margin: 0 !important;
    padding:
      5px
      max(var(--imu-gutter), var(--imu-safe-right))
      5px
      max(var(--imu-gutter), var(--imu-safe-left)) !important;
  }

  body.page-gallery .mobile-bottom-sheet {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
  }

  body.page-gallery .mobile-sheet-body,
  body.page-gallery .mobile-sheet-footer {
    padding-right: max(var(--imu-gutter), var(--imu-safe-right)) !important;
    padding-left: max(var(--imu-gutter), var(--imu-safe-left)) !important;
  }

  body.page-gallery #share-modal.modal-mask > .share-modal-card {
    height: var(--imu-visual-height) !important;
    max-height: var(--imu-visual-height) !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  body.page-gallery #share-modal.modal-mask .share-modal-head,
  body.page-gallery #share-modal .share-modal-tabs {
    position: static !important;
    margin: 0 !important;
    padding-right: max(var(--imu-gutter), var(--imu-safe-right)) !important;
    padding-left: max(var(--imu-gutter), var(--imu-safe-left)) !important;
  }

  body.page-gallery #share-modal :is(
    #share-tab-album,
    #share-tab-all
  ):not([hidden]) {
    min-height: 0 !important;
    overflow: auto !important;
  }

  body.page-gallery .upload-modal-card {
    overflow: hidden !important;
  }

  body.page-gallery .upload-modal-layout {
    overflow: auto !important;
  }

  body.page-gallery .upload-file-list {
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    scrollbar-gutter: auto !important;
  }

  body.page-share .share-lightbox-head {
    padding-right: max(8px, var(--imu-safe-right)) !important;
    padding-left: max(10px, var(--imu-safe-left)) !important;
  }

  body.page-share .share-lightbox-meta {
    max-width: calc(100vw - 76px - var(--imu-safe-right) - var(--imu-safe-left)) !important;
    min-height: var(--imu-touch) !important;
  }

  body.page-share #share-lightbox-close-btn,
  body.page-share.share-lightbox-downloads-disabled #share-lightbox-close-btn {
    top: calc(6px + var(--imu-safe-top)) !important;
    right: max(8px, var(--imu-safe-right)) !important;
    width: var(--imu-touch) !important;
    min-width: var(--imu-touch) !important;
    height: var(--imu-touch) !important;
    min-height: var(--imu-touch) !important;
  }

  body.page-share .share-lightbox-caption-sheet {
    right: max(10px, var(--imu-safe-right)) !important;
    bottom: calc(76px + var(--imu-safe-bottom)) !important;
    left: max(10px, var(--imu-safe-left)) !important;
    width: auto !important;
    max-height: min(52dvh, 220px) !important;
    transform: none !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
  }

  body.page-share .share-lightbox-mobile-hint {
    max-width: calc(100vw - 28px - var(--imu-safe-right) - var(--imu-safe-left)) !important;
  }

  body.page-share:not(.page-share-gate) .share-page-v2 .share-hero-v2__frame {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  body.page-share:not(.page-share-gate) .share-page-v2 .share-hero-v2__content {
    position: relative !important;
    inset: auto !important;
    min-height: min(76svh, 300px) !important;
    height: auto !important;
    padding:
      max(56px, var(--imu-safe-top))
      max(var(--imu-gutter), var(--imu-safe-right))
      18px
      max(var(--imu-gutter), var(--imu-safe-left)) !important;
  }

  body.page-login,
  body.page-share-gate .share-gate-shell {
    align-items: flex-start !important;
  }
}

@media (hover: none), (pointer: coarse) {
  :where(
    body.page-gallery,
    body.page-admin,
    body.page-share,
    body.page-login,
    body.page-share-review
  ) :where(
    button,
    [role="button"],
    .card,
    .photo-card,
    .album-card
  ):hover {
    transform: none !important;
  }
}

@media (max-width: 820px) {
  body.page-admin #share-card .share-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin-bottom: 14px !important;
  }

  body.page-admin #share-card .share-summary-grid .share-summary-item {
    min-height: 62px !important;
    padding: 10px 12px !important;
    border-right: 1px solid var(--im3-line) !important;
    border-bottom: 1px solid var(--im3-line) !important;
  }

  body.page-admin #share-card .share-summary-grid .share-summary-item:nth-child(2n) {
    border-right: 0 !important;
  }

  body.page-admin #share-card .share-summary-grid .share-summary-item:nth-child(n + 3) {
    border-bottom: 0 !important;
  }

  body.page-admin #share-card .share-summary-grid .share-summary-item .value {
    font-size: 22px !important;
  }

  body.page-admin #share-card .share-filter-panel {
    padding-top: 12px !important;
  }

  body.page-admin #share-card .share-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.page-admin #share-card .share-filter-field--query {
    grid-column: 1 / -1 !important;
  }

  body.page-admin #share-card .share-filter-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--imu-touch) !important;
    gap: 7px !important;
    margin-bottom: 12px !important;
  }

  body.page-admin #share-card .share-filter-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--imu-touch) !important;
    height: var(--imu-touch) !important;
  }

  body.page-admin #share-card .share-filter-icon-btn {
    width: var(--imu-touch) !important;
    min-width: var(--imu-touch) !important;
  }

  body.page-admin #share-card .share-bulk-actions {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px 0 !important;
  }

  body.page-admin #share-card .share-bulk-actions[data-has-selection="true"] {
    padding: 8px !important;
  }

  body.page-admin #share-card .share-bulk-actions .admin-bulk-bar__selection {
    display: flex !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
  }

  body.page-admin #share-card .share-bulk-actions .admin-bulk-bar__selection .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: var(--imu-touch) !important;
    height: var(--imu-touch) !important;
  }

  body.page-admin #share-card #share-selection-hint {
    flex: 1 1 150px !important;
    align-self: center !important;
    text-align: right !important;
  }

  body.page-admin #share-card .share-bulk-actions .admin-bulk-bar__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 7px !important;
  }

  body.page-admin #share-card .share-bulk-actions[data-has-selection="false"] .admin-bulk-bar__actions {
    display: none !important;
  }

  body.page-admin #share-card .share-bulk-actions .admin-bulk-bar__actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--imu-touch) !important;
    height: var(--imu-touch) !important;
    justify-content: center !important;
  }

  body.page-admin #share-card .admin-share-card {
    grid-template-areas:
      "main"
      "link"
      "prewarm"
      "side" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  body.page-admin #share-card table.share-table .share-card-select {
    flex-basis: var(--imu-touch) !important;
    width: var(--imu-touch) !important;
    min-width: var(--imu-touch) !important;
    height: var(--imu-touch) !important;
    min-height: var(--imu-touch) !important;
  }

  body.page-admin #share-card table.share-table .share-card-select input[type="checkbox"] {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
  }

  body.page-admin #share-card .share-card-link {
    grid-template-areas:
      "label"
      "actions"
      "url" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--im3-line) !important;
  }

  body.page-admin #share-card .share-card-link .share-card-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 7px !important;
  }

  body.page-admin #share-card .share-card-link .share-card-actions .small-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--imu-touch) !important;
    height: var(--imu-touch) !important;
    justify-content: center !important;
  }

  body.page-admin #share-card .share-card-link .share-card-actions .primary:first-child {
    grid-column: 1 / -1 !important;
  }

  body.page-admin #share-card .share-card-prewarm {
    padding-top: 10px !important;
    border-top: 1px solid var(--im3-line) !important;
  }

  body.page-admin #share-card .share-card-side {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid var(--im3-line) !important;
    border-left: 0 !important;
  }

  body.page-admin #share-card .share-metric :is(strong, small) {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  body.page-admin #share-card .admin-pagination {
    gap: 10px !important;
  }

  body.page-admin #share-card .admin-pagination__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 7px !important;
  }

  body.page-admin #share-card .admin-pagination__actions .btn {
    width: 100% !important;
    min-height: var(--imu-touch) !important;
  }
}

@media (max-width: 520px) {
  body.page-admin #share-card .share-filter-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.page-admin #share-card .share-filter-field--query {
    grid-column: 1 !important;
  }

  body.page-admin #share-card .share-filter-panel .admin-subsection__head p {
    display: none !important;
  }

  body.page-admin #share-card .share-card-prewarm .share-prewarm-row {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
  }

  body.page-admin #share-card .share-card-prewarm .share-prewarm-detail {
    grid-column: 2 / -1 !important;
  }
}

@media (max-width: 820px) {
  body.page-gallery #share-watermark-modal {
    align-items: stretch !important;
    padding: 0 !important;
  }

  body.page-gallery #share-watermark-modal > .share-watermark-card {
    width: 100% !important;
    height: var(--imu-visual-height) !important;
    max-width: none !important;
    max-height: var(--imu-visual-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  body.page-gallery #share-watermark-modal .share-watermark-head {
    position: relative !important;
    top: auto !important;
    z-index: 7 !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding:
      max(7px, var(--imu-safe-top))
      max(9px, var(--imu-safe-right))
      7px
      max(12px, var(--imu-safe-left)) !important;
    border-bottom: 1px solid var(--im3-line) !important;
    background: var(--im3-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.page-gallery #share-watermark-modal .share-watermark-layout {
    min-height: 0 !important;
    overflow: auto !important;
    display: block !important;
    overscroll-behavior: contain !important;
  }

  body.page-gallery #share-watermark-modal .share-watermark-preview-pane {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    height: clamp(220px, 36dvh, 300px) !important;
    min-height: 220px !important;
  }

  body.page-gallery #share-watermark-modal .share-watermark-controls {
    overflow: visible !important;
  }

  body.page-gallery #share-watermark-modal :is(
    .share-watermark-icon-btn,
    .share-watermark-head .share-modal-close,
    .share-watermark-preset-picker .btn,
    .share-watermark-template-save .btn,
    .share-watermark-delete-preset,
    .share-watermark-segmented button,
    .share-watermark-footer .btn
  ) {
    min-width: var(--imu-touch) !important;
    min-height: var(--imu-touch) !important;
    height: var(--imu-touch) !important;
  }

  body.page-gallery #share-watermark-modal :is(
    .share-watermark-icon-btn,
    .share-watermark-head .share-modal-close,
    .share-watermark-delete-preset
  ) {
    width: var(--imu-touch) !important;
  }

  body.page-gallery #share-watermark-modal .share-watermark-range input[type="range"] {
    height: var(--imu-touch) !important;
  }

  body.page-gallery #share-watermark-modal .share-watermark-position-layout {
    grid-template-columns: 132px minmax(0, 1fr) !important;
  }

  body.page-gallery #share-watermark-modal .share-watermark-position-pad {
    width: 132px !important;
    height: 132px !important;
  }

  body.page-gallery #share-watermark-modal .share-watermark-position-pad button {
    min-width: var(--imu-touch) !important;
    min-height: var(--imu-touch) !important;
  }

  body.page-gallery #share-watermark-modal .share-watermark-footer {
    position: relative !important;
    z-index: 7 !important;
    margin: 0 !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  body.page-gallery #share-watermark-modal > .share-watermark-card {
    height: var(--imu-visual-height) !important;
    max-height: var(--imu-visual-height) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  body.page-gallery #share-watermark-modal .share-watermark-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr) !important;
    overflow: hidden !important;
  }

  body.page-gallery #share-watermark-modal .share-watermark-preview-pane {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body.page-gallery #share-watermark-modal .share-watermark-controls {
    overflow: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  :where(
    body.page-gallery,
    body.page-admin,
    body.page-share,
    body.page-login,
    body.page-share-review
  ) :where(
    .mobile-bottom-sheet,
    .modal-card,
    .ai-modal-card,
    .admin-nav,
    .media-subtabs,
    .share-folder-tabs-wrap
  ) {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
}