/* v133 desktop grid unification and mobile alignment corrections. */
@media (min-width: 720px) {
  html body .topbar {
    padding-inline: max(28px, calc((100vw - 1460px) / 2)) !important;
  }

  html body .hero,
  html body .library,
  html body #profileDialog.desktop-profile-page .insights-body {
    width: min(1460px, calc(100% - 56px)) !important;
    max-width: 1460px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  html body #showGrid.show-grid,
  html body.view-home #showGrid.show-grid,
  html body.view-database #showGrid.show-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 20px 18px !important;
  }

  /* Desktop profile editor uses the same explicit label/input stack as mobile. */
  html body #profileEditDialog {
    width: min(600px, calc(100vw - 48px)) !important;
  }

  html body #profileEditDialog .profile-edit-fields {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 0 0 22px !important;
    padding: 20px !important;
  }

  html body #profileEditDialog #profileAvatarPreview {
    width: 96px !important;
    height: 96px !important;
    margin: 0 !important;
  }

  html body #profileEditDialog .profile-name-field {
    position: static !important;
    display: grid !important;
    grid-template-rows: auto 48px !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body #profileEditDialog .profile-name-field::before,
  html body #profileEditDialog .profile-name-field::after {
    display: none !important;
    content: none !important;
  }

  html body #profileEditDialog .profile-name-field > label {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--share-muted) !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 520 !important;
    line-height: 1.2 !important;
    transform: none !important;
  }

  html body #profileEditDialog .profile-name-field > #profileNameInput {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--share-line) !important;
    border-radius: 12px !important;
    color: var(--share-text) !important;
    background: var(--share-group) !important;
    font-size: 17px !important;
    font-weight: 520 !important;
    transform: none !important;
  }

  /* Keep the desktop theme dialog structurally identical to the phone page. */
  html body #personalizeDialog {
    width: min(620px, calc(100vw - 48px)) !important;
    max-height: calc(100dvh - 48px) !important;
    padding: 0 24px 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body #personalizeDialog .personalize-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
    margin: 0 -24px !important;
    padding: 20px 24px 16px !important;
  }

  html body #personalizeDialog .share-appearance-section,
  html body #personalizeDialog .headline-personalization {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--share-line) !important;
  }

  html body #personalizeDialog .share-mode-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html body #personalizeDialog .share-mode-options button,
  html body #personalizeDialog .share-mode-options button + button {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 10px !important;
    min-height: 68px !important;
    padding: 10px !important;
    border: 1px solid var(--share-line) !important;
    border-radius: 13px !important;
    text-align: left !important;
  }

  html body #personalizeDialog .headline-section-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
  }

  html body #personalizeDialog .headline-section-heading > h3,
  html body #personalizeDialog .headline-section-heading > .random-title-state {
    position: static !important;
    margin: 0 !important;
  }

  html body #personalizeDialog .headline-section-heading > .random-title-state {
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--share-muted) !important;
    background: transparent !important;
    font-size: 11px !important;
  }

  html body #personalizeDialog .headline-editor {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 14px 0 12px !important;
    padding: 0 !important;
  }

  html body #personalizeDialog .headline-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  html body #personalizeDialog .headline-actions > button {
    width: 100% !important;
  }

  html body #personalizeDialog .random-title-controls {
    display: block !important;
    width: 100% !important;
  }

  html body #personalizeDialog .random-title-toggle-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
}

@media (max-width: 719px) {
  /* Equal outer gutters and a centered icon/title group remove the left-heavy list. */
  html body #profileDialog.mobile-tab-page .insights-scroll {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  html body #profileDialog.mobile-tab-page .profile-summary,
  html body #profileDialog.mobile-tab-page .profile-overview,
  html body #profileDialog.mobile-tab-page .mobile-profile-hub,
  html body #profileDialog.mobile-tab-page .profile-activity-section {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  html body #profileDialog.mobile-tab-page .mobile-profile-account,
  html body #profileDialog.mobile-tab-page .mobile-profile-actions {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  html body #profileDialog.mobile-tab-page .mobile-profile-account,
  html body #profileDialog.mobile-tab-page .mobile-profile-actions > button {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 180px) !important;
    justify-content: center !important;
    align-items: center !important;
    column-gap: 16px !important;
  }

  html body #profileDialog.mobile-tab-page .mobile-profile-account > span:nth-child(2),
  html body #profileDialog.mobile-tab-page .mobile-profile-actions > button > span:nth-child(2) {
    display: block !important;
    align-self: center !important;
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    text-align: left !important;
  }

  html body #profileDialog.mobile-tab-page .mobile-profile-hub small {
    display: none !important;
  }

  html body #profileDialog.mobile-tab-page .mobile-profile-account > .material-symbols-rounded:last-child,
  html body #profileDialog.mobile-tab-page .mobile-profile-actions > button > .material-symbols-rounded:last-child {
    display: none !important;
  }

  html body #profileDialog.mobile-tab-page .profile-activity-section {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    padding: 12px 0 2px !important;
  }

  html body #profileDialog.mobile-tab-page .profile-activity-frame {
    padding: 6px 0 0 !important;
  }

  html body #profileDialog.mobile-tab-page .profile-activity-grid {
    grid-template-rows: repeat(7, 8px) !important;
    grid-auto-columns: 8px !important;
    gap: 2px !important;
  }

  html body #profileDialog.mobile-tab-page .activity-cell {
    width: 8px !important;
    min-width: 8px !important;
    height: 8px !important;
    min-height: 8px !important;
  }

  html body #profileDialog.mobile-tab-page .profile-activity-legend i {
    width: 8px !important;
    min-width: 8px !important;
    height: 8px !important;
    min-height: 8px !important;
  }

  html body #searchDialog .search-status {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  html[data-mode="dark"] body #showDialog .episode .check:not(.watched),
  html[data-mode="dark"] body .show-grid:not(.view-database) .card-quick-watch {
    opacity: 1 !important;
    border: 2px solid color-mix(in srgb, var(--share-text) 30%, transparent) !important;
    background: transparent !important;
  }
}