[data-window-type="admin"] .retro-window { box-sizing: border-box; }
[data-window-type="admin"] .title-bar { flex-shrink: 0; }
.retro-window.show-content .admin-content { flex: 1; min-height: 0; height: auto; padding: 14px; overflow: auto; }
.admin-program { color: #222; color-scheme: light; letter-spacing: .2px; }
.admin-program h2 { font-size: 15px; margin: 0; }
.admin-program p { line-height: 1.5; margin: 12px 0; }
.admin-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-login { max-width: 300px; margin: 16px auto; text-align: left; }
.admin-login label { display: flex; flex-direction: column; gap: 5px; margin: 14px 0; }
.admin-login input { width: 100%; box-sizing: border-box; height: 28px; }
.admin-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 16px 0; }
.admin-message { min-height: 18px; }
.admin-time, .admin-footnote { font-size: 11px; color: #444; }
.admin-program .admin-output { margin: 12px 0; box-sizing: border-box; width: 100%; height: 135px; padding: 10px; overflow: auto; white-space: pre; overflow-wrap: normal; background: #fff; color: #222; box-shadow: inset 1px 1px #808080, inset -1px -1px #fff; font: 11px/1.5 monospace; user-select: text; }
@media (max-width: 600px) {
  .retro-window.show-content .admin-content { padding: 10px; }
  .admin-program button { min-height: 34px; }
  .admin-login input { height: 34px; }
}

.admin-brand, .admin-login-heading { display: flex; align-items: center; gap: 12px; }
.admin-brand img, .admin-login-heading img { width: 32px; height: 32px; image-rendering: pixelated; }
.admin-brand span { display: block; margin-top: 5px; color: #444; font-size: 11px; }
.admin-login { max-width: 340px; }
.admin-login-heading p { margin: 6px 0 0; }
.admin-login input { border-radius: 0; font: inherit; }
.admin-program fieldset { min-width: 0; margin: 18px 0 0; padding: 12px; }
.admin-deployment dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.admin-deployment dl > div { min-width: 0; }
.admin-deployment dt { font-size: 11px; color: #444; margin-bottom: 6px; }
.admin-deployment dd { margin: 0; line-height: 1.5; }
.admin-deployment code { font: bold 12px monospace; }
.admin-program .admin-record-note { margin: 10px 0 0; font-size: 10px; color: #555; }
.admin-heading button, .admin-footer button { flex-shrink: 0; }
.admin-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-program .admin-log { margin-top: 12px; padding: 0; }
.admin-log-heading { margin-bottom: 6px; }
.admin-log .admin-output { margin: 0; }
@media (max-width: 600px) {
  .admin-deployment dl { gap: 12px; }
}

.admin-result { margin-top: 12px; padding: 8px 0; border-top: 1px solid grey; border-bottom: 1px solid white; }
[data-state="succeeded"] [data-status-title]::before,
[data-state="succeeded"] [data-status-detail]::before { content: "✓"; display: inline-block; width: 16px; font-family: sans-serif; font-weight: normal; }
.admin-result-copy { flex: 1; min-width: 0; }
.admin-result-copy strong { display: block; font-size: 12px; }
.admin-program .admin-result-copy p { margin: 5px 0 0; }
.admin-result .admin-time { font-size: 10px; }
.admin-result .admin-time:empty { display: none; }
.admin-program .admin-footnote { margin: 0; }

/* The window stays fixed; only the output viewport can scroll. */
.retro-window.show-content .admin-content:has(.admin-footnote) { padding-bottom: 6px; overflow: hidden; }
.admin-content > .admin-program:has(.admin-footnote) { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; gap: 12px; height: 100%; min-height: 0; min-width: 0; }
.admin-program:has(.admin-footnote) > * { margin-top: 0; margin-bottom: 0; }
.admin-program .admin-log { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.admin-log .admin-output { flex: 1; min-height: 0; height: 0; }
.admin-site-link { display: inline-block; margin-top: 8px; }
.admin-site-link[hidden] { display: none; }

[data-window-type="services"] .retro-window { box-sizing: border-box; }
[data-window-type="services"] .retro-window.show-content { display: flex; flex-direction: column; height: auto; max-height: calc(100dvh - 120px); }
[data-window-type="services"] .title-bar { flex-shrink: 0; }
[data-window-type="services"] .retro-window.show-content .admin-content { flex: none; min-height: 0; height: auto; overflow-y: auto; }
.admin-content > .admin-program:has(.services-list) { display: flex; flex-direction: column; height: auto; gap: 8px; }
.services-list { flex: none; min-height: 0; overflow: visible; }
.service-card { padding: 10px; margin-bottom: 10px; border: 1px solid #808080; box-shadow: 1px 1px #fff; }
.service-card:last-child { margin-bottom: 1px; }
.service-card h3 { margin: 0; font-size: 13px; }
.service-card h3::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: #808080; box-shadow: inset 1px 1px #444, 1px 1px white; }
.service-card[data-health="healthy"] h3::before { background: #00ff54; box-shadow: inset 1px 1px #168c38, 1px 1px white, 0 0 3px #00d943; }
.service-card[data-health="warning"] h3::before { background: #e4aa21; }
.service-card[data-health="error"] h3::before { background: #dc3b30; }
.services-list[data-stale="true"] .service-card h3::before { background: #808080; box-shadow: inset 1px 1px #444, 1px 1px white; }
.services-list .service-image { font: 13px/1.35 Arial, sans-serif; color: #444; margin: 6px 0; overflow-wrap: anywhere; }
.service-card dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; margin: 0; }
.service-card dt { font-size: 13px; color: #444; margin-bottom: 3px; }
.service-card dd { font-size: 14px; margin: 0; overflow-wrap: anywhere; user-select: text; }
.services-notes { font-size: 13px; line-height: 1.4; color: #444; }
.services-list[data-stale="true"] { opacity: .65; }

[data-window-type="backups"] .retro-window { box-sizing: border-box; }
[data-window-type="backups"] .title-bar { flex-shrink: 0; }
.admin-content > .admin-program:has(.backups-body) { grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; }
.backups-body { overflow: auto; min-height: 0; }
.backups-body .backup-details { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.backups-body .service-card p { margin: 8px 0 0; }
.backups-body .backup-note { font-size: 10px; color: #555; }
.backup-actions { display: flex; align-items: center; flex-shrink: 0; gap: 6px; }
.backup-actions button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; padding: 2px; }
.backup-actions button img { width: 20px; height: 20px; image-rendering: pixelated; }
[data-backup-offline="true"] .backups-body { opacity: .65; }
[data-backup-offline="true"] .service-card h3::before { background: grey; box-shadow: inset 1px 1px #444; }

@media (max-width: 600px) {
  [data-window-type="services"] .retro-window.show-content { max-height: calc(100dvh - 170px); }
  .admin-content > .admin-program:has(.admin-footnote) { gap: 8px; }
  .service-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-deployment dl { gap: 6px; }
  .admin-heading { flex-wrap: wrap; gap: 8px; }
  .admin-site-link { margin-top: 4px; }
}

/* Backup receipts are completed checks, not live connection indicators. */
.backups-body .service-card h3::before {
  content: "—"; width: 16px; height: auto; margin-right: 5px;
  background: transparent; box-shadow: none; font-family: Arial, sans-serif;
}
.backups-body .service-card[data-health="healthy"] h3::before { content: "✓"; }
.backups-body .service-card[data-health="warning"] h3::before { content: "!"; }
.admin-program:has(.backups-body) { font-size: 13px; line-height: 1.5; }
.backups-body .service-card h3 { font-size: 14px; line-height: 1.4; }
.backups-body .backup-details dt, .backups-body .backup-note,
.admin-program:has(.backups-body) .admin-brand span,
.admin-program:has(.backups-body) .admin-footnote { font-size: 12px; }
.backups-body .backup-details dd { font-size: 13px; }
.admin-content > .admin-program:has(.backups-body) { grid-template-rows: auto minmax(0, auto) auto; align-content: start; }

/* Login is a compact dialog; the authenticated program keeps its own size. */
.window-container:has(.admin-login) {
  width: min(360px, calc(100vw - 24px)) !important;
  height: min(320px, calc(100dvh - 72px)) !important;
}
.admin-program .admin-login { max-width: none; margin: 4px 0; }
.admin-login-heading { gap: 10px; }
.admin-login .admin-message { margin: 8px 0 0; }
.admin-login .admin-actions { margin: 12px 0 0; }

.backup-command-fallback:not([hidden]), .backup-restore-fallback:not([hidden]) { display: block; margin-top: 8px; padding: 6px; background: white; font: 11px/1.5 monospace; overflow-wrap: anywhere; user-select: text; }