#client-updates-page {
    background: var(--ui-gradient-brand-soft), var(--ui-color-background);
    color: var(--ui-color-text-primary);
}
body.dark-mode #client-updates-page {
    background: var(--ui-color-background);
}
#client-updates-page[hidden], #client-updates-entry-section[hidden],
#client-updates-page [hidden], #client-updates-entry-section [hidden] { display: none !important; }
#client-updates-page .page-content { padding: 20px 20px calc(28px + var(--native-safe-bottom, env(safe-area-inset-bottom, 0px))); }
#client-updates-page .client-updates-content { width: 100%; max-width: 520px; margin: 0 auto; }
#client-updates-page .page-title { overflow: visible; white-space: normal; text-align: center; font-size: var(--ui-type-page-title); }
.client-updates-header-action { border: 0; background: transparent; color: var(--ui-color-action-secondary-text); font-size: var(--ui-type-body); font-weight: var(--ui-weight-semibold); min-width: 64px; min-height: 44px; padding: 8px; }
.client-updates-header-action:disabled { color: var(--ui-color-text-secondary); }
.client-updates-installed { padding: 12px 0 22px; text-align: center; }
.client-updates-icon-wrap { width: 60px; height: 60px; margin: 0 auto 14px; border: 1px solid var(--ui-color-border); border-radius: 50%; background: var(--ui-gradient-brand-soft); color: var(--ui-color-action-secondary-text); display: flex; align-items: center; justify-content: center; font-size: var(--ui-type-symbol); }
.client-updates-installed p { margin: 5px 0; color: var(--ui-color-text-secondary); font-size: var(--ui-type-body); }
.client-updates-version { display: block; font-size: var(--ui-type-display); font-weight: var(--ui-weight-strong); line-height: var(--ui-line-heading); letter-spacing: .02em; }
.client-updates-status { padding: 20px; background: var(--ui-color-surface); border: 1px solid var(--ui-color-border); border-radius: 20px; }
.client-updates-status[data-state="available"] { background: var(--ui-gradient-brand-soft), var(--ui-color-surface); }
.client-updates-status h3 { margin: 0 0 8px; font-size: var(--ui-type-feature-title); line-height: var(--ui-line-heading); }
.client-updates-status p { margin: 0; color: var(--ui-color-text-secondary); font-size: var(--ui-type-body); line-height: var(--ui-line-reading); }
.client-updates-primary { display: block; width: 100%; margin-top: 18px; min-height: 48px; padding: 12px 16px; border: 0; border-radius: 14px; background: var(--ui-gradient-action); color: var(--ui-color-on-action); font-size: var(--ui-type-input); font-weight: var(--ui-weight-semibold); line-height: var(--ui-line-support); cursor: pointer; }
.client-updates-primary:disabled { opacity: .6; cursor: default; }
.client-updates-retry { min-height: 44px; margin: 12px 0 0; padding: 8px 16px; border: 1px solid var(--ui-color-border); border-radius: 12px; background: transparent; color: var(--ui-color-action-secondary-text); font-size: var(--ui-type-section-title); font-weight: var(--ui-weight-semibold); }
#client-updates-size { margin-top: 10px; font-size: var(--ui-type-item); }
.client-updates-check-meta { margin: 14px 0 24px; color: var(--ui-color-text-secondary); font-size: var(--ui-type-support); line-height: var(--ui-line-reading); }
.client-updates-history-heading { margin: 0 0 14px; font-size: var(--ui-type-page-title); line-height: var(--ui-line-heading); }
.client-updates-history { border: 1px solid var(--ui-color-border); border-radius: 18px; background: var(--ui-color-surface); overflow: hidden; }
.client-release-entry { padding: 0 18px; }
.client-release-entry + .client-release-entry { border-top: 1px solid var(--ui-color-border); }
.client-release-entry summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; list-style: none; min-height: 78px; padding: 15px 0; cursor: pointer; }
.client-release-entry summary::-webkit-details-marker { display: none; }
.client-release-label { min-width: 0; flex: 1; }
.client-release-heading { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.client-release-heading strong { font-size: var(--ui-type-page-title); }
.client-release-date { display: block; margin-top: 6px; color: var(--ui-color-text-secondary); font-size: var(--ui-type-item); }
.client-release-entry summary > i { color: var(--ui-color-text-secondary); font-size: var(--ui-type-item); transition: transform .15s ease; }
.client-release-entry[open] summary > i { transform: rotate(180deg); }
.client-release-notes { margin: 0; padding: 0 0 17px 19px; font-size: var(--ui-type-body); line-height: var(--ui-line-reading); overflow-wrap: anywhere; }
.client-release-notes li { margin-bottom: 7px; }
.client-release-notes li::marker { color: var(--ui-color-action-secondary-text); }
.client-release-no-details { margin: 0; padding: 0 0 17px; color: var(--ui-color-text-secondary); font-size: var(--ui-type-body); line-height: var(--ui-line-reading); }
.client-update-badge { display: inline-block; padding: 4px 9px; border-radius: 20px; color: var(--ui-color-action-secondary-text); background: rgba(var(--brand-pink-rgb), .1); font-size: var(--ui-type-support); line-height: var(--ui-line-heading); font-weight: var(--ui-weight-semibold); }
.client-update-badge.is-current { color: var(--ui-color-text-secondary); background: rgba(var(--brand-purple-rgb), .08); }
.client-updates-empty, .client-updates-cache-notice { color: var(--ui-color-text-secondary); font-size: var(--ui-type-body); line-height: var(--ui-line-reading); }
.client-updates-cache-notice { margin-top: 12px; }
.client-updates-entry { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; min-height: 72px; cursor: pointer; color: inherit; font: inherit; }
.client-updates-entry > .settings-item-info { flex: 1; min-width: 0; }
.client-updates-entry .settings-item-title, .client-updates-entry .settings-item-desc { display: block; }
.client-updates-entry > i { color: var(--ui-color-text-secondary); }
.client-updates-entry-accessory { display: flex; align-items: center; gap: 10px; }
#client-updates-page button:focus-visible, .client-release-entry summary:focus-visible,
.client-updates-entry:focus-visible { outline: 3px solid var(--ui-color-action-secondary-text); outline-offset: 3px; }
@media (max-width: 350px) {
    #client-updates-page .page-content { padding-left: 14px; padding-right: 14px; }
    .client-updates-status { padding: 16px; }
    .client-updates-status h3 { font-size: var(--ui-type-page-title); }
    .client-update-badge { font-size: var(--ui-type-support); }
}
@media (prefers-reduced-motion: reduce) {
    #client-updates-page .fa-spin { animation: none; }
    .client-release-entry summary > i { transition: none; }
}