#licenseGate .license-card {
  height: auto;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
}
.license-key-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.license-app-version { margin-left: auto; text-align: right; }
.license-update-btn {
  --license-action-icon: var(--app-update-icon);
}
#appUpdateGate .license-card {
  height: var(--license-card-height, 360px);
  max-width: 100%;
  max-height: calc(100dvh - 48px);
  min-height: 0;
  overflow-y: auto;
  grid-template-rows: auto auto auto auto minmax(32px, 1fr) auto;
  gap: 6px;
}
#appUpdateGate { z-index: 2100; }
#appUpdateGate .license-card-header { min-width: 0; }
#appUpdateGate h2, #appUpdateGate p { overflow-wrap: anywhere; }
#appUpdateVersions,
#appUpdateGate .app-update-progress-label,
#appUpdateGate .app-update-progress-label label,
#appUpdateGate .app-update-progress-label output,
#appUpdateGate .license-actions button { font-size: inherit; }
.app-update-progress { display: grid; gap: 7px; min-width: 0; }
.app-update-progress-label { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.app-update-progress-label label { flex: 1; }
.app-update-progress-label output { min-width: 5ch; text-align: right; font-variant-numeric: tabular-nums; }
.app-update-progress { pointer-events: none; user-select: none; }
.app-update-progress progress {
  display: block; appearance: none; width: 100%; height: 12px;
  border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
  background: var(--disabled-bg); accent-color: var(--accent);
  pointer-events: none; user-select: none;
}
.app-update-progress progress::-webkit-progress-bar { background: var(--disabled-bg); }
.app-update-progress progress::-webkit-progress-value { background: var(--accent); }
.app-update-progress progress::-moz-progress-bar { background: var(--accent); }
.app-update-progress progress:indeterminate { background: var(--disabled-bg); }
#appUpdateStatus { min-height: 32px; font-size: inherit; }
#appUpdateStatus.update-error { color: var(--danger); }
#appUpdateGate .license-actions { flex-wrap: wrap; justify-content: space-between; }
#appUpdateStart { margin-left: auto; }
#licenseGate .license-left-actions { flex-wrap: wrap; }
#licenseGate .license-actions { flex-wrap: wrap; }
@media (max-width: 360px) {
  #licenseGate .license-left-actions:has(#updateLicense:not(.hidden)) { display: grid; grid-template-columns: max-content max-content; }
  #licenseGate .license-left-actions:has(#updateLicense:not(.hidden)) #closeLicense { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 480px) {
  #licenseGate, #appUpdateGate { padding: 12px; }
  #licenseGate .license-card, #appUpdateGate .license-card { padding: 16px; }
  #licenseGate .license-card { min-height: 0; max-height: calc(100dvh - 24px); }
  #appUpdateGate .license-card { max-height: calc(100dvh - 24px); }
  #licenseGate .license-card-header, #appUpdateGate .license-card-header { grid-template-columns: minmax(0, 1fr) 54px; gap: 10px; }
  #licenseGate .license-logo, #appUpdateGate .license-logo { width: 50px; height: 50px; }
  #licenseGate h2, #appUpdateGate h2 { font-size: 21px; }
  #licenseGate .license-actions { flex-wrap: wrap; }
  #appUpdateStatus { min-height: 52px; }
}