/*! Dialog OS themes -- app-specific chrome layered on top of the real
 * classic-stylesheets skins (see dialog-classic-themes.generated.css, which
 * must load BEFORE this file).
 * Root attribute: body[data-dialog-os="cde"|"macos9"|"win9x"|"winxp"]
 * Structural classes stay shared (.retro-*, .prefs-*, .floating-window, menus).
 * This file only covers things classic-stylesheets can't know about (avatar/
 * social colors, connect-list avatars, etc). "Win9x" rules below are grouped
 * with cde/winxp via :is(...) since those two don't have their own
 * app-specific overrides yet -- add a dedicated branch if one needs to
 * diverge. Mac OS 9 (data-dialog-os="macos9") keeps its own dedicated
 * branch below (previously "mac").
 */

/* ===== Shared Mac chrome tokens (System 8.1 Platinum) ===== */
body[data-dialog-os="macos9"] {
  --dos-mac-surface: #dddddd;
  --dos-mac-raised: #c0c0c0;
  --dos-mac-pressed: #ffffff;
  --dos-mac-frame: #000000;
  --dos-mac-highlight: #ffffff;
  --dos-mac-shadow: #808080;
  --dos-mac-text: #000000;
  --dos-mac-muted: #555555;
  --dos-mac-accent: #000066;
  --dos-mac-accent-light: #6699cc;
  --dos-mac-font: Geneva, Verdana, Arial, sans-serif;
  --dos-mac-bevel-hi: #eeeeee;
  --dos-mac-bevel-lo: #888888;
  --dos-mac-btn-top: #f0f0f0;
  --dos-mac-btn-bot: #c8c8c8;
  --dos-mac-select: #000066;
}

/* ===== Mac: retro authoring / server settings dialogs ===== */
body[data-dialog-os="macos9"] #serverSettingsModal .retro-window,
body[data-dialog-os="macos9"] #roomEditorModal .retro-window,
body[data-dialog-os="macos9"] #spotEditorModal .retro-window,
body[data-dialog-os="macos9"] :is(#roomScriptModal, #cyborgModal) .retro-window,
body[data-dialog-os="macos9"] #imageBrowserModal .retro-window,
body[data-dialog-os="macos9"] :is(#imageBrowserDeleteConfirmModal, #serverSettingsMediaDeleteConfirmModal) .retro-window,
body[data-dialog-os="macos9"] #propBagBackupModal .retro-window,
body[data-dialog-os="macos9"] :is(#globalMessageModal, #roomUnlockModal) .retro-window,
body[data-dialog-os="macos9"] #accountPromptModal .retro-window,
body[data-dialog-os="macos9"] #tenantGateModal .retro-window,
body[data-dialog-os="macos9"] #tenantClaimModal .retro-window,
body[data-dialog-os="macos9"] #deleteTenantModal .retro-window,
body[data-dialog-os="macos9"] #mailComposeModal .retro-window,
body[data-dialog-os="macos9"] #createTenantModal .retro-window {
  background: var(--dos-mac-surface);
  color: var(--dos-mac-text);
  border: 1px solid var(--dos-mac-frame);
  border-radius: 2px;
  box-shadow:
    -1px -1px 0 var(--dos-mac-highlight),
    1px 1px 0 var(--dos-mac-shadow),
    inset 1px 1px 0 var(--dos-mac-bevel-hi),
    inset -1px -1px 0 var(--dos-mac-shadow),
    2px 2px 0 rgba(0, 0, 0, 0.35);
  font: 11px var(--dos-mac-font);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-titlebar,
body[data-dialog-os="macos9"] #roomEditorModal .retro-titlebar,
body[data-dialog-os="macos9"] #spotEditorModal .retro-titlebar,
body[data-dialog-os="macos9"] :is(#roomScriptModal, #cyborgModal) .retro-titlebar,
body[data-dialog-os="macos9"] #imageBrowserModal .retro-titlebar,
body[data-dialog-os="macos9"] :is(#imageBrowserDeleteConfirmModal, #serverSettingsMediaDeleteConfirmModal) .retro-titlebar,
body[data-dialog-os="macos9"] #propBagBackupModal .retro-titlebar,
body[data-dialog-os="macos9"] :is(#globalMessageModal, #roomUnlockModal) .retro-titlebar,
body[data-dialog-os="macos9"] #accountPromptModal .retro-titlebar,
body[data-dialog-os="macos9"] #tenantGateModal .retro-titlebar,
body[data-dialog-os="macos9"] #tenantClaimModal .retro-titlebar,
body[data-dialog-os="macos9"] #deleteTenantModal .retro-titlebar,
body[data-dialog-os="macos9"] #createTenantModal .retro-titlebar {
  height: 22px;
  padding: 0 6px 0 4px;
  gap: 6px;
  background: repeating-linear-gradient(
    to bottom,
    #cfcfcf 0px,
    #cfcfcf 1px,
    #8f8f8f 1px,
    #8f8f8f 2px
  );
  color: #111;
  font: bold 11px var(--dos-mac-font);
  border-bottom: 1px solid #404040;
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-close,
body[data-dialog-os="macos9"] #roomEditorModal .retro-close,
body[data-dialog-os="macos9"] #spotEditorModal .retro-close,
body[data-dialog-os="macos9"] :is(#roomScriptModal, #cyborgModal) .retro-close,
body[data-dialog-os="macos9"] #imageBrowserModal .retro-close,
body[data-dialog-os="macos9"] :is(#imageBrowserDeleteConfirmModal, #serverSettingsMediaDeleteConfirmModal) .retro-close,
body[data-dialog-os="macos9"] :is(#globalMessageModal, #roomUnlockModal) .retro-close,
body[data-dialog-os="macos9"] #accountPromptModal .retro-close,
body[data-dialog-os="macos9"] #tenantGateModal .retro-close,
body[data-dialog-os="macos9"] #tenantClaimModal .retro-close,
body[data-dialog-os="macos9"] #deleteTenantModal .retro-close,
body[data-dialog-os="macos9"] #createTenantModal .retro-close {
  order: -1;
  width: 13px;
  height: 13px;
  margin-right: 2px;
  background: linear-gradient(#d8d8d8, #a8a8a8);
  color: transparent;
  border: 1px solid #202020;
  border-radius: 1px;
  box-shadow:
    inset 1px 1px 0 #f0f0f0,
    inset -1px -1px 0 #707070;
  font-size: 0;
  line-height: 0;
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-close:active,
body[data-dialog-os="macos9"] #roomEditorModal .retro-close:active,
body[data-dialog-os="macos9"] #spotEditorModal .retro-close:active,
body[data-dialog-os="macos9"] :is(#roomScriptModal, #cyborgModal) .retro-close:active,
body[data-dialog-os="macos9"] #imageBrowserModal .retro-close:active,
body[data-dialog-os="macos9"] :is(#globalMessageModal, #roomUnlockModal) .retro-close:active,
body[data-dialog-os="macos9"] #accountPromptModal .retro-close:active,
body[data-dialog-os="macos9"] #tenantGateModal .retro-close:active,
body[data-dialog-os="macos9"] #tenantClaimModal .retro-close:active,
body[data-dialog-os="macos9"] #deleteTenantModal .retro-close:active,
body[data-dialog-os="macos9"] #createTenantModal .retro-close:active {
  background: #808080;
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #c0c0c0;
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-body,
body[data-dialog-os="macos9"] #roomEditorModal .retro-body,
body[data-dialog-os="macos9"] #spotEditorModal .retro-body,
body[data-dialog-os="macos9"] :is(#roomScriptModal, #cyborgModal) .retro-body,
body[data-dialog-os="macos9"] #imageBrowserModal .retro-body,
body[data-dialog-os="macos9"] :is(#imageBrowserDeleteConfirmModal, #serverSettingsMediaDeleteConfirmModal) .retro-body,
body[data-dialog-os="macos9"] #propBagBackupModal .retro-body,
body[data-dialog-os="macos9"] :is(#globalMessageModal, #roomUnlockModal) .retro-body,
body[data-dialog-os="macos9"] #accountPromptModal .retro-body,
body[data-dialog-os="macos9"] #tenantGateModal .retro-body,
body[data-dialog-os="macos9"] #tenantClaimModal .retro-body,
body[data-dialog-os="macos9"] #deleteTenantModal .retro-body,
body[data-dialog-os="macos9"] #createTenantModal .retro-body {
  color: var(--dos-mac-text);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-window h4,
body[data-dialog-os="macos9"] #roomEditorModal .retro-window h4,
body[data-dialog-os="macos9"] #spotEditorModal .retro-window h4,
body[data-dialog-os="macos9"] :is(#roomScriptModal, #cyborgModal) .retro-window h4,
body[data-dialog-os="macos9"] #imageBrowserModal .retro-window h4 {
  color: var(--dos-mac-text);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-row > label,
body[data-dialog-os="macos9"] #roomEditorModal .retro-row > label,
body[data-dialog-os="macos9"] #spotEditorModal .retro-row > label,
body[data-dialog-os="macos9"] :is(#roomScriptModal, #cyborgModal) .retro-row > label,
body[data-dialog-os="macos9"] #imageBrowserModal .retro-row > label,
body[data-dialog-os="macos9"] #roomUnlockModal .retro-row > label,
body[data-dialog-os="macos9"] #createTenantModal .retro-row > label,
body[data-dialog-os="macos9"] #accountPromptModal .retro-row > label,
body[data-dialog-os="macos9"] #tenantGateModal .retro-row > label,
body[data-dialog-os="macos9"] #tenantClaimModal .retro-row > label,
body[data-dialog-os="macos9"] #deleteTenantModal .retro-row > label {
  color: var(--dos-mac-muted);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-row input[type="text"],
body[data-dialog-os="macos9"] #serverSettingsModal .retro-row input[type="number"],
body[data-dialog-os="macos9"] #serverSettingsModal .retro-row select,
body[data-dialog-os="macos9"] #serverSettingsModal .retro-row input[type="file"],
body[data-dialog-os="macos9"] #roomEditorModal .retro-row input[type="text"],
body[data-dialog-os="macos9"] #roomEditorModal .retro-row input[type="number"],
body[data-dialog-os="macos9"] #roomEditorModal .retro-row select,
body[data-dialog-os="macos9"] #roomEditorModal .retro-row input[type="file"],
body[data-dialog-os="macos9"] #spotEditorModal .retro-row input[type="text"],
body[data-dialog-os="macos9"] #spotEditorModal .retro-row input[type="number"],
body[data-dialog-os="macos9"] #spotEditorModal .retro-row select,
body[data-dialog-os="macos9"] #spotEditorModal .retro-row input[type="file"],
body[data-dialog-os="macos9"] :is(#roomScriptModal, #cyborgModal) .retro-row input[type="text"],
body[data-dialog-os="macos9"] :is(#roomScriptModal, #cyborgModal) .retro-row input[type="number"],
body[data-dialog-os="macos9"] :is(#roomScriptModal, #cyborgModal) .retro-row select,
body[data-dialog-os="macos9"] #imageBrowserModal .retro-row input[type="text"],
body[data-dialog-os="macos9"] #imageBrowserModal .retro-row input[type="number"],
body[data-dialog-os="macos9"] #imageBrowserModal .retro-row select,
body[data-dialog-os="macos9"] #createTenantModal .retro-row input[type="text"],
body[data-dialog-os="macos9"] #accountPromptModal .retro-row input[type="text"],
body[data-dialog-os="macos9"] #accountPromptModal .retro-row input[type="password"],
body[data-dialog-os="macos9"] #accountPromptModal .retro-row input[type="email"],
body[data-dialog-os="macos9"] #tenantGateModal .retro-row input[type="text"],
body[data-dialog-os="macos9"] #tenantGateModal .retro-row input[type="password"],
body[data-dialog-os="macos9"] #tenantGateModal .retro-row input[type="email"],
body[data-dialog-os="macos9"] #tenantClaimModal .retro-row input[type="text"],
body[data-dialog-os="macos9"] #deleteTenantModal .retro-row input[type="text"],
body[data-dialog-os="macos9"] #roomUnlockModal .retro-row input[type="password"] {
  background: var(--dos-mac-pressed);
  color: var(--dos-mac-text);
  border: 1px solid var(--dos-mac-frame);
  border-radius: 1px;
  box-shadow:
    inset 1px 1px 0 var(--dos-mac-shadow),
    inset -1px -1px 0 var(--dos-mac-highlight),
    1px 1px 0 var(--dos-mac-shadow);
  font: 11px var(--dos-mac-font);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-row input[readonly],
body[data-dialog-os="macos9"] #roomEditorModal .retro-row input[readonly],
body[data-dialog-os="macos9"] #spotEditorModal .retro-row input[readonly],
body[data-dialog-os="macos9"] #imageBrowserModal .retro-row input[readonly] {
  background: #e8e8e8;
  color: var(--dos-mac-muted);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-check,
body[data-dialog-os="macos9"] #roomEditorModal .retro-check,
body[data-dialog-os="macos9"] #spotEditorModal .retro-check {
  color: var(--dos-mac-text);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-check input[type="checkbox"],
body[data-dialog-os="macos9"] #roomEditorModal .retro-check input[type="checkbox"],
body[data-dialog-os="macos9"] #spotEditorModal .retro-check input[type="checkbox"] {
  accent-color: var(--dos-mac-accent);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-sep,
body[data-dialog-os="macos9"] #roomEditorModal .retro-sep,
body[data-dialog-os="macos9"] #spotEditorModal .retro-sep,
body[data-dialog-os="macos9"] :is(#roomScriptModal, #cyborgModal) .retro-sep,
body[data-dialog-os="macos9"] #imageBrowserModal .retro-sep,
body[data-dialog-os="macos9"] #propBagBackupModal .retro-sep,
body[data-dialog-os="macos9"] :is(#globalMessageModal, #roomUnlockModal) .retro-sep,
body[data-dialog-os="macos9"] #accountPromptModal .retro-sep,
body[data-dialog-os="macos9"] #tenantGateModal .retro-sep,
body[data-dialog-os="macos9"] #tenantClaimModal .retro-sep,
body[data-dialog-os="macos9"] #deleteTenantModal .retro-sep,
body[data-dialog-os="macos9"] #createTenantModal .retro-sep {
  border-top: 1px solid var(--dos-mac-shadow);
  border-bottom: 1px solid var(--dos-mac-highlight);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-btn,
body[data-dialog-os="macos9"] #roomEditorModal .retro-btn,
body[data-dialog-os="macos9"] #spotEditorModal .retro-btn,
body[data-dialog-os="macos9"] :is(#roomScriptModal, #cyborgModal) .retro-btn,
body[data-dialog-os="macos9"] #imageBrowserModal .retro-btn,
body[data-dialog-os="macos9"] :is(#imageBrowserDeleteConfirmModal, #serverSettingsMediaDeleteConfirmModal) .retro-btn,
body[data-dialog-os="macos9"] #propBagBackupModal .retro-btn,
body[data-dialog-os="macos9"] :is(#globalMessageModal, #roomUnlockModal) .retro-btn,
body[data-dialog-os="macos9"] #accountPromptModal .retro-btn,
body[data-dialog-os="macos9"] #tenantGateModal .retro-btn,
body[data-dialog-os="macos9"] #tenantClaimModal .retro-btn,
body[data-dialog-os="macos9"] #deleteTenantModal .retro-btn,
body[data-dialog-os="macos9"] #createTenantModal .retro-btn {
  min-height: 22px;
  background: linear-gradient(var(--dos-mac-btn-top), var(--dos-mac-btn-bot));
  color: var(--dos-mac-text);
  border: 1px solid var(--dos-mac-frame);
  border-radius: 3px;
  box-shadow:
    inset 1px 1px 0 var(--dos-mac-highlight),
    inset -1px -1px 0 var(--dos-mac-shadow),
    1px 1px 0 var(--dos-mac-shadow);
  font: 11px var(--dos-mac-font);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-btn:hover,
body[data-dialog-os="macos9"] #roomEditorModal .retro-btn:hover,
body[data-dialog-os="macos9"] #spotEditorModal .retro-btn:hover,
body[data-dialog-os="macos9"] :is(#roomScriptModal, #cyborgModal) .retro-btn:hover,
body[data-dialog-os="macos9"] #imageBrowserModal .retro-btn:hover,
body[data-dialog-os="macos9"] :is(#imageBrowserDeleteConfirmModal, #serverSettingsMediaDeleteConfirmModal) .retro-btn:hover,
body[data-dialog-os="macos9"] #propBagBackupModal .retro-btn:hover,
body[data-dialog-os="macos9"] :is(#globalMessageModal, #roomUnlockModal) .retro-btn:hover,
body[data-dialog-os="macos9"] #accountPromptModal .retro-btn:hover,
body[data-dialog-os="macos9"] #tenantGateModal .retro-btn:hover,
body[data-dialog-os="macos9"] #tenantClaimModal .retro-btn:hover,
body[data-dialog-os="macos9"] #deleteTenantModal .retro-btn:hover,
body[data-dialog-os="macos9"] #createTenantModal .retro-btn:hover {
  background: linear-gradient(#f8f8f8, #d0d0d0);
  color: var(--dos-mac-text);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-btn:active,
body[data-dialog-os="macos9"] #roomEditorModal .retro-btn:active,
body[data-dialog-os="macos9"] #spotEditorModal .retro-btn:active,
body[data-dialog-os="macos9"] :is(#roomScriptModal, #cyborgModal) .retro-btn:active,
body[data-dialog-os="macos9"] #imageBrowserModal .retro-btn:active,
body[data-dialog-os="macos9"] :is(#imageBrowserDeleteConfirmModal, #serverSettingsMediaDeleteConfirmModal) .retro-btn:active,
body[data-dialog-os="macos9"] #propBagBackupModal .retro-btn:active,
body[data-dialog-os="macos9"] :is(#globalMessageModal, #roomUnlockModal) .retro-btn:active,
body[data-dialog-os="macos9"] #accountPromptModal .retro-btn:active,
body[data-dialog-os="macos9"] #tenantGateModal .retro-btn:active,
body[data-dialog-os="macos9"] #tenantClaimModal .retro-btn:active,
body[data-dialog-os="macos9"] #deleteTenantModal .retro-btn:active,
body[data-dialog-os="macos9"] #createTenantModal .retro-btn:active {
  background: var(--dos-mac-pressed);
  box-shadow:
    inset 1px 1px 0 var(--dos-mac-shadow),
    inset -1px -1px 0 var(--dos-mac-highlight);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-btn:disabled,
body[data-dialog-os="macos9"] #roomEditorModal .retro-btn:disabled,
body[data-dialog-os="macos9"] #spotEditorModal .retro-btn:disabled,
body[data-dialog-os="macos9"] #imageBrowserModal .retro-btn:disabled,
body[data-dialog-os="macos9"] #deleteTenantModal .retro-btn:disabled,
body[data-dialog-os="macos9"] #createTenantModal .retro-btn:disabled {
  color: #888888;
  text-shadow: none;
  cursor: default;
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-btn.retro-btn-default,
body[data-dialog-os="macos9"] #roomEditorModal .retro-btn.retro-btn-default,
body[data-dialog-os="macos9"] #spotEditorModal .retro-btn.retro-btn-default,
body[data-dialog-os="macos9"] :is(#roomScriptModal, #cyborgModal) .retro-btn.retro-btn-default,
body[data-dialog-os="macos9"] #imageBrowserModal .retro-btn.retro-btn-default,
body[data-dialog-os="macos9"] :is(#imageBrowserDeleteConfirmModal, #serverSettingsMediaDeleteConfirmModal) .retro-btn.retro-btn-default,
body[data-dialog-os="macos9"] #propBagBackupModal .retro-btn.retro-btn-default,
body[data-dialog-os="macos9"] :is(#globalMessageModal, #roomUnlockModal) .retro-btn.retro-btn-default,
body[data-dialog-os="macos9"] #accountPromptModal .retro-btn.retro-btn-default,
body[data-dialog-os="macos9"] #tenantGateModal .retro-btn.retro-btn-default,
body[data-dialog-os="macos9"] #tenantClaimModal .retro-btn.retro-btn-default,
body[data-dialog-os="macos9"] #deleteTenantModal .retro-btn.retro-btn-default,
body[data-dialog-os="macos9"] #createTenantModal .retro-btn.retro-btn-default {
  box-shadow:
    inset 1px 1px 0 var(--dos-mac-highlight),
    inset -1px -1px 0 var(--dos-mac-shadow),
    0 0 0 1px var(--dos-mac-accent),
    1px 1px 0 var(--dos-mac-shadow);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-btn.retro-btn-danger,
body[data-dialog-os="macos9"] #roomEditorModal .retro-btn.retro-btn-danger,
body[data-dialog-os="macos9"] #spotEditorModal .retro-btn.retro-btn-danger,
body[data-dialog-os="macos9"] #imageBrowserModal .retro-btn.retro-btn-danger,
body[data-dialog-os="macos9"] #deleteTenantModal .retro-btn.retro-btn-danger {
  color: #990000;
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-hint,
body[data-dialog-os="macos9"] #spotEditorModal .retro-hint,
body[data-dialog-os="macos9"] :is(#imageBrowserDeleteConfirmModal, #serverSettingsMediaDeleteConfirmModal) .retro-hint,
body[data-dialog-os="macos9"] #propBagBackupModal .retro-hint,
body[data-dialog-os="macos9"] :is(#globalMessageModal, #roomUnlockModal) .retro-hint,
body[data-dialog-os="macos9"] #accountPromptModal .retro-hint,
body[data-dialog-os="macos9"] #tenantGateModal .retro-hint,
body[data-dialog-os="macos9"] #tenantClaimModal .retro-hint,
body[data-dialog-os="macos9"] #deleteTenantModal .retro-hint,
body[data-dialog-os="macos9"] #createTenantModal .retro-hint {
  color: var(--dos-mac-muted);
}

/* Welcome / Not Registered — Mac OS 8.1 Platinum movable modal */
body[data-dialog-os="macos9"] #accountPromptModal .palace-welcome-window {
  width: 500px;
  max-width: min(94vw, 500px);
  border: 1px solid #000;
  border-radius: 7px 7px 0 0;
  background: #dddddd;
  box-shadow:
    0 0 0 1px #000,
    1px 1px 0 #fff,
    -1px -1px 0 #666,
    inset 1px 1px 0 #eee,
    inset -1px -1px 0 #999,
    4px 5px 0 rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

body[data-dialog-os="macos9"] #accountPromptModal .retro-titlebar {
  position: relative;
  height: 20px;
  padding: 3px 5px;
  gap: 0;
  justify-content: flex-start;
  align-items: center;
  background: repeating-linear-gradient(
    to bottom,
    #ececec 0px,
    #ececec 1px,
    #9a9a9a 1px,
    #9a9a9a 2px
  );
  border-bottom: 1px solid #404040;
  color: #000;
  font: bold 12px "Chicago", Charcoal, Geneva, Verdana, sans-serif;
}

body[data-dialog-os="macos9"] #accountPromptModal .retro-titlebar span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  flex: 0 0 auto;
  max-width: calc(100% - 48px);
  padding: 0 10px;
  background: #dddddd;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 1;
  font: bold 12px "Chicago", Charcoal, Geneva, Verdana, sans-serif;
  letter-spacing: 0.2px;
}

body[data-dialog-os="macos9"] #accountPromptModal .retro-close {
  position: relative;
  z-index: 2;
  width: 13px;
  height: 13px;
  margin: 0;
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0 45%, transparent 45%),
    linear-gradient(#d4d4d4, #a0a0a0);
}

body[data-dialog-os="macos9"] #accountPromptModal .retro-body {
  padding: 14px 16px 16px;
  background: #dddddd;
}

body[data-dialog-os="macos9"] #accountPromptModal .palace-welcome-banner {
  margin: 0 0 12px;
  padding: 5px 8px;
  text-align: center;
  color: #000;
  background: #dddddd;
  border: 1px solid #000;
  border-radius: 2px;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #888,
    1px 1px 0 #fff;
  font: bold 12px "Chicago", Charcoal, Geneva, Verdana, sans-serif;
}

body[data-dialog-os="macos9"] #accountPromptModal .palace-welcome-copy {
  margin: 0 0 16px;
  padding: 0 2px;
}

body[data-dialog-os="macos9"] #accountPromptModal .palace-welcome-copy p {
  margin: 0 0 11px;
  color: #000;
  font: 12px/1.4 Geneva, Verdana, Arial, sans-serif;
}

body[data-dialog-os="macos9"] #accountPromptModal .palace-welcome-copy p:last-child {
  margin-bottom: 0;
}

body[data-dialog-os="macos9"] #accountPromptModal .palace-welcome-btns {
  gap: 14px;
  padding: 2px 2px 4px;
}

body[data-dialog-os="macos9"] #accountPromptModal .palace-welcome-btn,
body[data-dialog-os="macos9"] #accountPromptModal .retro-btn {
  min-height: 22px;
  border-radius: 6px;
  background: linear-gradient(#f4f4f4 0%, #d8d8d8 45%, #c4c4c4 100%);
  border: 1px solid #000;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #8a8a8a,
    1px 1px 0 rgba(0, 0, 0, 0.18);
  font: 12px Geneva, Verdana, Arial, sans-serif;
}

body[data-dialog-os="macos9"] #accountPromptModal .palace-welcome-btn {
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 8px;
}

body[data-dialog-os="macos9"] #accountPromptModal .retro-btn:hover {
  background: linear-gradient(#fafafa 0%, #e0e0e0 45%, #cecece 100%);
}

body[data-dialog-os="macos9"] #accountPromptModal .retro-btn:active {
  background: #c8c8c8;
  box-shadow:
    inset 1px 1px 0 #777,
    inset -1px -1px 0 #ddd;
}

/* Classic Mac default button: black double ring around a roundrect */
body[data-dialog-os="macos9"] #accountPromptModal .retro-btn.retro-btn-default {
  font-weight: bold;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #8a8a8a,
    0 0 0 1px #dddddd,
    0 0 0 3px #000;
}

body[data-dialog-os="macos9"] #accountPromptModal .retro-btn.retro-btn-default:active {
  box-shadow:
    inset 1px 1px 0 #777,
    inset -1px -1px 0 #ddd,
    0 0 0 1px #dddddd,
    0 0 0 3px #000;
}

body[data-dialog-os="macos9"] #accountPromptModal .retro-sep {
  border-top-color: #999;
  border-bottom-color: #fff;
  margin: 12px 0 10px;
}

body[data-dialog-os="macos9"] #accountPromptModal .retro-row > label {
  font: 12px Geneva, Verdana, Arial, sans-serif;
}

body[data-dialog-os="macos9"] #accountPromptModal .retro-row input[type="text"],
body[data-dialog-os="macos9"] #accountPromptModal .retro-row input[type="password"],
body[data-dialog-os="macos9"] #accountPromptModal .retro-row input[type="email"],
body[data-dialog-os="macos9"] #roomUnlockModal .retro-row input[type="password"] {
  border-radius: 0;
  background: #fff;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #888, inset -1px -1px 0 #fff;
  font: 12px Geneva, Verdana, Arial, sans-serif;
  padding: 3px 5px;
}

body[data-dialog-os="macos9"] #accountPromptModal .retro-hint {
  font: 11px/1.35 Geneva, Verdana, Arial, sans-serif;
  color: #333;
  margin: 0 0 10px;
}

body[data-dialog-os="macos9"] #accountPromptModal .retro-btnrow {
  gap: 10px;
  padding-top: 2px;
}

body[data-dialog-os="macos9"] #accountPromptModal .acct-msg {
  font: 11px Geneva, Verdana, Arial, sans-serif;
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-textarea,
body[data-dialog-os="macos9"] #spotEditorModal .retro-textarea,
body[data-dialog-os="macos9"] :is(#roomScriptModal, #cyborgModal) .retro-textarea {
  background: var(--dos-mac-pressed);
  color: var(--dos-mac-text);
  border: 1px solid var(--dos-mac-frame);
  box-shadow:
    inset 1px 1px 0 var(--dos-mac-shadow),
    inset -1px -1px 0 var(--dos-mac-highlight);
  font: 11px/1.4 Monaco, "Courier New", monospace;
}

body[data-dialog-os="macos9"] #cyborgModal .ipt-editor {
  border: 1px solid var(--dos-mac-frame);
  box-shadow:
    inset 1px 1px 0 var(--dos-mac-shadow),
    inset -1px -1px 0 var(--dos-mac-highlight);
}

body[data-dialog-os="macos9"] #cyborgModal .cyborg-librow select,
body[data-dialog-os="macos9"] #cyborgModal .cyborg-librow input[type="text"] {
  background: var(--dos-mac-pressed);
  color: var(--dos-mac-text);
  border: 1px solid var(--dos-mac-frame);
  box-shadow:
    inset 1px 1px 0 var(--dos-mac-shadow),
    inset -1px -1px 0 var(--dos-mac-highlight);
  font: 11px Monaco, "Courier New", monospace;
}

body[data-dialog-os="macos9"] :is(#globalMessageModal, #roomUnlockModal) .retro-textarea,
body[data-dialog-os="macos9"] #accountPromptModal .retro-textarea,
body[data-dialog-os="macos9"] #tenantGateModal .retro-textarea,
body[data-dialog-os="macos9"] #tenantClaimModal .retro-textarea,
body[data-dialog-os="macos9"] #deleteTenantModal .retro-textarea,
body[data-dialog-os="macos9"] #createTenantModal .retro-textarea {
  background: var(--dos-mac-pressed);
  color: var(--dos-mac-text);
  border: 1px solid var(--dos-mac-frame);
  box-shadow:
    inset 1px 1px 0 var(--dos-mac-shadow),
    inset -1px -1px 0 var(--dos-mac-highlight);
  font: 12px/1.35 var(--dos-mac-font);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-scroll,
body[data-dialog-os="macos9"] #imageBrowserModal .retro-scroll {
  background: var(--dos-mac-pressed);
  border: 1px solid var(--dos-mac-frame);
  box-shadow:
    inset 1px 1px 0 var(--dos-mac-shadow),
    inset -1px -1px 0 var(--dos-mac-highlight);
}

body[data-dialog-os="macos9"] #serverSettingsModal .sim-menu-section-label,
body[data-dialog-os="macos9"] #roomEditorModal .sim-menu-section-label,
body[data-dialog-os="macos9"] #createTenantModal .sim-menu-section-label {
  color: var(--dos-mac-muted);
  border-bottom-color: var(--dos-mac-shadow);
}

body[data-dialog-os="macos9"] #serverSettingsModal .server-avatar {
  background: var(--dos-mac-pressed, #e8e8e8);
  border: 1px solid var(--dos-mac-frame);
  box-shadow:
    inset 1px 1px 0 var(--dos-mac-shadow),
    inset -1px -1px 0 var(--dos-mac-highlight);
}
body[data-dialog-os="macos9"] #serverSettingsModal .server-avatar-drop.drag-over {
  outline-color: var(--dos-mac-frame, #000);
  background: #d8e8ff;
}
body[data-dialog-os="macos9"] #serverSettingsModal .server-avatar-hint {
  color: var(--dos-mac-text, #000);
}
body[data-dialog-os="macos9"] #createTenantModal .acct-msg.err,
body[data-dialog-os="macos9"] #deleteTenantModal .acct-msg.err { color: #900; }
body[data-dialog-os="macos9"] #createTenantModal .acct-msg.ok,
body[data-dialog-os="macos9"] #deleteTenantModal .acct-msg.ok { color: #060; }

body[data-dialog-os="macos9"] #createTenantModal .acct-space-summary { color: var(--dos-mac-muted); }
body[data-dialog-os="macos9"] #createTenantModal .acct-space-summary.err { color: #900; }
body[data-dialog-os="macos9"] #createTenantModal .acct-space-list-empty { color: var(--dos-mac-muted); }
body[data-dialog-os="macos9"] #createTenantModal .acct-space-row {
  background: var(--dos-mac-pressed);
  border: 1px solid var(--dos-mac-frame);
  box-shadow:
    inset 1px 1px 0 var(--dos-mac-shadow),
    inset -1px -1px 0 var(--dos-mac-highlight);
}
body[data-dialog-os="macos9"] #createTenantModal .acct-space-row a { color: var(--dos-mac-accent); }
body[data-dialog-os="macos9"] #createTenantModal .retro-btn.retro-btn-danger { color: #990000; }


body[data-dialog-os="macos9"] #serverSettingsModal .retro-tabbar {
  background: var(--dos-mac-raised);
  padding: 6px 6px 0;
  border-bottom: none;
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-tab-btn {
  top: 1px;
  background: var(--dos-mac-raised);
  color: var(--dos-mac-muted);
  border: 1px solid var(--dos-mac-frame);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  box-shadow: inset 1px 1px 0 var(--dos-mac-highlight);
  font: 11px var(--dos-mac-font);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-tab-btn.active {
  top: 0;
  background: var(--dos-mac-surface);
  color: var(--dos-mac-text);
  font-weight: 700;
  box-shadow:
    inset 1px 1px 0 var(--dos-mac-highlight),
    0 1px 0 var(--dos-mac-surface);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-tabbar + .retro-body {
  border-top: 1px solid var(--dos-mac-frame);
  background: var(--dos-mac-surface);
}

body[data-dialog-os="macos9"] #imageBrowserModal .retro-icon-item,
body[data-dialog-os="macos9"] #serverSettingsModal .retro-media-item {
  color: var(--dos-mac-text);
}

body[data-dialog-os="macos9"] #imageBrowserModal .retro-icon-item:hover,
body[data-dialog-os="macos9"] #serverSettingsModal .retro-media-item:hover {
  border-color: var(--dos-mac-accent);
}

body[data-dialog-os="macos9"] #imageBrowserModal .retro-icon-item.selected,
body[data-dialog-os="macos9"] #serverSettingsModal .retro-media-item.selected {
  background: var(--dos-mac-accent);
  border-color: var(--dos-mac-accent-light);
}

body[data-dialog-os="macos9"] #imageBrowserModal .retro-icon-label,
body[data-dialog-os="macos9"] #serverSettingsModal .retro-media-item .retro-icon-label {
  color: var(--dos-mac-text);
}

body[data-dialog-os="macos9"] #imageBrowserModal .retro-icon-item.selected .retro-icon-label,
body[data-dialog-os="macos9"] #serverSettingsModal .retro-media-item.selected .retro-icon-label {
  color: #fff;
}

body[data-dialog-os="macos9"] #imageBrowserModal .retro-icon-thumb,
body[data-dialog-os="macos9"] #serverSettingsModal .retro-media-thumb {
  background: var(--dos-mac-pressed);
  border: 1px solid var(--dos-mac-frame);
  box-shadow: inset 1px 1px 0 var(--dos-mac-shadow), inset -1px -1px 0 var(--dos-mac-highlight);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-media-player,
body[data-dialog-os="macos9"] #serverSettingsModal .retro-media-dropzone {
  background: var(--dos-mac-pressed);
  border: 1px solid var(--dos-mac-frame);
  box-shadow: inset 1px 1px 0 var(--dos-mac-shadow), inset -1px -1px 0 var(--dos-mac-highlight);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-media-dropzone:hover {
  border-color: var(--dos-mac-accent);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-media-upload-list {
  background: var(--dos-mac-pressed);
  border: 1px solid var(--dos-mac-frame);
  box-shadow: inset 1px 1px 0 var(--dos-mac-shadow), inset -1px -1px 0 var(--dos-mac-highlight);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-media-player-label {
  color: var(--dos-mac-muted);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-media-player-name {
  color: var(--dos-mac-text);
}

body[data-dialog-os="macos9"] #serverSettingsModal .analytics-summary-item,
body[data-dialog-os="macos9"] #serverSettingsModal .analytics-gauge {
  background: var(--dos-mac-pressed);
  border: 1px solid var(--dos-mac-frame);
  box-shadow:
    inset 1px 1px 0 var(--dos-mac-shadow),
    inset -1px -1px 0 var(--dos-mac-highlight);
}

body[data-dialog-os="macos9"] #serverSettingsModal .analytics-summary-label,
body[data-dialog-os="macos9"] #serverSettingsModal .analytics-gauge-caption,
body[data-dialog-os="macos9"] #serverSettingsModal .analytics-gauge-min,
body[data-dialog-os="macos9"] #serverSettingsModal .analytics-gauge-max {
  color: var(--dos-mac-muted);
}

body[data-dialog-os="macos9"] #serverSettingsModal .analytics-summary-value,
body[data-dialog-os="macos9"] #serverSettingsModal .analytics-gauge-value,
body[data-dialog-os="macos9"] #serverSettingsModal .analytics-detail-row strong {
  color: var(--dos-mac-text);
}

body[data-dialog-os="macos9"] #serverSettingsModal .analytics-gauge-needle {
  background: var(--dos-mac-text);
}

body[data-dialog-os="macos9"] #serverSettingsModal .analytics-gauge-peak {
  background: var(--dos-mac-muted);
}

body[data-dialog-os="macos9"] #serverSettingsModal .analytics-room-bar {
  background: #e8e8e8;
  border-color: var(--dos-mac-shadow) var(--dos-mac-highlight) var(--dos-mac-highlight) var(--dos-mac-shadow);
  box-shadow: inset 1px 1px 0 #d0d0d0;
}

body[data-dialog-os="macos9"] #serverSettingsModal .analytics-row-stats {
  color: var(--dos-mac-muted);
}

body[data-dialog-os="macos9"] #serverSettingsModal .analytics-user-details {
  color: var(--dos-mac-muted);
  background: #e8e8e8;
  border-color: var(--dos-mac-shadow);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-manager-row.selectable:hover {
  background: #d0d8e8;
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-manager-row.selected {
  background: var(--dos-mac-accent);
  color: #fff;
}

/* Discovery borrows the compact card language from the Platinum preferences
   panel while keeping the shared Server Settings controls and behavior. */
body[data-dialog-os="macos9"] #serverSettingsTabDiscovery.discovery-platinum {
  color: var(--dos-mac-text);
}

body[data-dialog-os="macos9"] #serverSettingsTabDiscovery .discovery-settings-card,
body[data-dialog-os="macos9"] #serverSettingsTabDiscovery .discovery-invites-card {
  background: var(--dos-mac-surface);
  border: 1px solid var(--dos-mac-frame);
  border-radius: 2px;
  box-shadow:
    -1px -1px 0 var(--dos-mac-highlight),
    1px 1px 0 var(--dos-mac-shadow),
    inset 1px 1px 0 var(--dos-mac-bevel-hi),
    inset -1px -1px 0 var(--dos-mac-shadow);
}

body[data-dialog-os="macos9"] #serverSettingsTabDiscovery .discovery-card-header {
  border-bottom-color: var(--dos-mac-shadow);
  box-shadow: 0 1px 0 var(--dos-mac-highlight);
}

body[data-dialog-os="macos9"] #serverSettingsTabDiscovery .discovery-card-header strong {
  color: var(--dos-mac-text);
}

body[data-dialog-os="macos9"] #serverSettingsTabDiscovery .discovery-card-header span,
body[data-dialog-os="macos9"] #serverSettingsTabDiscovery .discovery-cat-count,
body[data-dialog-os="macos9"] #serverSettingsTabDiscovery .discovery-invite-meta {
  color: var(--dos-mac-muted);
}

body[data-dialog-os="macos9"] #serverSettingsTabDiscovery .discovery-category-grid {
  background: var(--dos-mac-pressed);
  border: 1px solid var(--dos-mac-frame);
  box-shadow:
    inset 1px 1px 0 var(--dos-mac-shadow),
    inset -1px -1px 0 var(--dos-mac-highlight);
}

body[data-dialog-os="macos9"] #serverSettingsTabDiscovery .retro-check input[type="radio"],
body[data-dialog-os="macos9"] #serverSettingsTabDiscovery .retro-check input[type="checkbox"] {
  accent-color: var(--dos-mac-accent-light);
}

body[data-dialog-os="macos9"] #serverSettingsTabDiscovery .discovery-invite-row {
  border-bottom: 1px solid #c0c0c0;
}

body[data-dialog-os="macos9"] #serverSettingsTabDiscovery .discovery-invite-row:last-child {
  border-bottom: 0;
}

body[data-dialog-os="macos9"] #serverSettingsTabDiscovery .discovery-invite-url {
  color: var(--dos-mac-accent-light);
}

body[data-dialog-os="macos9"] #serverSettingsTabDiscovery .discovery-invite-url:hover {
  color: #0000cc;
}

body[data-dialog-os="macos9"] #spotEditorModal .spot-state-row input[type="text"],
body[data-dialog-os="macos9"] #spotEditorModal .spot-state-row input[type="number"] {
  background: var(--dos-mac-pressed);
  color: var(--dos-mac-text);
  border: 1px solid var(--dos-mac-frame);
  box-shadow:
    inset 1px 1px 0 var(--dos-mac-shadow),
    inset -1px -1px 0 var(--dos-mac-highlight);
  font: 11px var(--dos-mac-font);
}

body[data-dialog-os="macos9"] #serverSettingsModal .retro-btn:focus-visible,
body[data-dialog-os="macos9"] #roomEditorModal .retro-btn:focus-visible,
body[data-dialog-os="macos9"] #spotEditorModal .retro-btn:focus-visible,
body[data-dialog-os="macos9"] :is(#roomScriptModal, #cyborgModal) .retro-btn:focus-visible,
body[data-dialog-os="macos9"] #imageBrowserModal .retro-btn:focus-visible,
body[data-dialog-os="macos9"] :is(#imageBrowserDeleteConfirmModal, #serverSettingsMediaDeleteConfirmModal) .retro-btn:focus-visible,
body[data-dialog-os="macos9"] #propBagBackupModal .retro-btn:focus-visible,
body[data-dialog-os="macos9"] :is(#globalMessageModal, #roomUnlockModal) .retro-btn:focus-visible,
body[data-dialog-os="macos9"] #accountPromptModal .retro-btn:focus-visible,
body[data-dialog-os="macos9"] #tenantGateModal .retro-btn:focus-visible,
body[data-dialog-os="macos9"] #tenantClaimModal .retro-btn:focus-visible,
body[data-dialog-os="macos9"] #deleteTenantModal .retro-btn:focus-visible,
body[data-dialog-os="macos9"] #createTenantModal .retro-btn:focus-visible,
body[data-dialog-os="macos9"] #serverSettingsModal .retro-tab-btn:focus-visible {
  outline: 2px solid var(--dos-mac-accent-light);
  outline-offset: 2px;
}

/* ===== Mac: Profile window (same chrome as Room Inspector) ===== */
body[data-dialog-os="macos9"] #profileWindow.floating-window,
body[data-dialog-os="macos9"] #roomInfoWindow.floating-window {
  background: var(--dos-mac-surface);
  border: 1px solid var(--dos-mac-frame);
  border-radius: 2px;
  box-shadow:
    -1px -1px 0 var(--dos-mac-highlight),
    1px 1px 0 var(--dos-mac-shadow),
    2px 2px 0 rgba(0, 0, 0, 0.35);
  font-family: var(--dos-mac-font);
}

body[data-dialog-os="macos9"] #profileWindow .fw-title,
body[data-dialog-os="macos9"] #roomInfoWindow .fw-title {
  justify-content: flex-start;
  gap: 6px;
  background: repeating-linear-gradient(
    to bottom,
    #cfcfcf 0px,
    #cfcfcf 1px,
    #8f8f8f 1px,
    #8f8f8f 2px
  );
  color: #111;
  border-radius: 0;
  font: bold 11px var(--dos-mac-font);
}

body[data-dialog-os="macos9"] #profileWindow .fw-title > span:first-child,
body[data-dialog-os="macos9"] #roomInfoWindow .fw-title > span:first-child {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-dialog-os="macos9"] #profileWindow .fw-close,
body[data-dialog-os="macos9"] #roomInfoWindow .fw-close {
  order: -1;
  width: 13px;
  height: 13px;
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#d8d8d8, #a8a8a8);
  color: transparent;
  border: 1px solid #202020;
  border-radius: 1px;
  box-shadow:
    inset 1px 1px 0 #f0f0f0,
    inset -1px -1px 0 #707070;
  font-size: 0;
  line-height: 0;
  padding: 0;
}

/* Mac Profile content: base CSS uses light-on-dark; Platinum needs ink on gray. */
body[data-dialog-os="macos9"] #profileWindow {
  color: #111;
}
body[data-dialog-os="macos9"] #profileWindow .social-window-body {
  color: #111;
  background: var(--dos-mac-surface, #c0c0c0);
}
body[data-dialog-os="macos9"] #profileWindow .social-username { color: #000; }
body[data-dialog-os="macos9"] #profileWindow .social-handle { color: #333; }
body[data-dialog-os="macos9"] #profileWindow .social-tagline,
body[data-dialog-os="macos9"] #profileWindow .social-desc { color: #222; }
body[data-dialog-os="macos9"] #profileWindow .social-presence { color: #006600; }
body[data-dialog-os="macos9"] #profileWindow .social-muted { color: #444; }
body[data-dialog-os="macos9"] #profileWindow .social-link a { color: #0000cc; }
body[data-dialog-os="macos9"] #profileWindow .social-avatar {
  background: transparent;
  border: none;
  box-shadow: none;
}
body[data-dialog-os="macos9"] #profileWindow .social-avatar-placeholder { color: #666; }
body[data-dialog-os="macos9"] #profileWindow .room-namecontrols-btn {
  background: linear-gradient(var(--dos-mac-btn-top), var(--dos-mac-btn-bot));
  color: var(--dos-mac-text);
  border: 1px solid var(--dos-mac-frame);
  border-radius: 3px;
  box-shadow:
    inset 1px 1px 0 var(--dos-mac-highlight),
    inset -1px -1px 0 var(--dos-mac-shadow);
  font: 11px var(--dos-mac-font);
}
body[data-dialog-os="macos9"] #profileWindow .social-danger,
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #profileWindow .social-danger {
  color: #900 !important;
}

body[data-dialog-os="macos9"] #roomInfoWindow .fw-toolbar {
  border-bottom: 1px solid var(--dos-mac-shadow);
  box-shadow: 0 1px 0 var(--dos-mac-highlight);
  color: var(--dos-mac-text);
}

body[data-dialog-os="macos9"] #roomInfoWindow .room-namecontrols-btn {
  background: linear-gradient(var(--dos-mac-btn-top), var(--dos-mac-btn-bot));
  color: var(--dos-mac-text);
  border: 1px solid var(--dos-mac-frame);
  border-radius: 3px;
  box-shadow:
    inset 1px 1px 0 var(--dos-mac-highlight),
    inset -1px -1px 0 var(--dos-mac-shadow);
  font: 11px var(--dos-mac-font);
}

body[data-dialog-os="macos9"] #roomInfoWindow .room-namecontrols-btn:hover {
  background: linear-gradient(#f8f8f8, #d0d0d0);
  color: var(--dos-mac-text);
}

body[data-dialog-os="macos9"] #roomInfoWindow .prefs-checkbox {
  color: var(--dos-mac-text);
}

body[data-dialog-os="macos9"] #roomInfoWindow .room-info-debug {
  color: var(--dos-mac-text);
}

body[data-dialog-os="macos9"] #roomInfoWindow .rid-section-label {
  color: var(--dos-mac-muted);
  border-bottom-color: var(--dos-mac-shadow);
}

body[data-dialog-os="macos9"] #roomInfoWindow .rid-field .rid-k {
  color: var(--dos-mac-muted);
}

body[data-dialog-os="macos9"] #roomInfoWindow .rid-field .rid-v {
  color: var(--dos-mac-text);
}

body[data-dialog-os="macos9"] #roomInfoWindow .rid-detail {
  background: var(--dos-mac-pressed);
  border-color: var(--dos-mac-shadow);
}

body[data-dialog-os="macos9"] #roomInfoWindow .rid-detail pre {
  background: var(--dos-mac-pressed);
  border-color: var(--dos-mac-shadow);
  color: var(--dos-mac-text);
}

/* ===== Mac: authoring + moderator menus ===== */
body[data-dialog-os="macos9"] #authorMenu {
  background: var(--dos-mac-surface);
  color: var(--dos-mac-text);
  border: 1px solid var(--dos-mac-frame);
  border-radius: 2px;
  box-shadow:
    -1px -1px 0 var(--dos-mac-highlight),
    1px 1px 0 var(--dos-mac-shadow),
    2px 2px 0 rgba(0, 0, 0, 0.35);
  font: 11px var(--dos-mac-font);
}

body[data-dialog-os="macos9"] #authorMenu .sim-menu-section-label {
  color: var(--dos-mac-muted);
  border-bottom: 1px solid var(--dos-mac-shadow);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

body[data-dialog-os="macos9"] #authorMenu .sim-menu-item {
  color: var(--dos-mac-text);
  border-radius: 2px;
  font: 11px var(--dos-mac-font);
}

body[data-dialog-os="macos9"] #authorMenu .sim-menu-item:hover:not(:disabled) {
  background: var(--dos-mac-accent);
  color: #fff;
}

body[data-dialog-os="macos9"] #authorMenu .sim-menu-check {
  color: var(--dos-mac-accent-light);
}

body[data-dialog-os="macos9"] #authorCanvasPopover,
body[data-dialog-os="macos9"] #modActionPopover {
  background: var(--dos-mac-surface);
  color: var(--dos-mac-text);
  border: 1px solid var(--dos-mac-frame);
  border-radius: 2px;
  box-shadow:
    -1px -1px 0 var(--dos-mac-highlight),
    1px 1px 0 var(--dos-mac-shadow),
    2px 2px 0 rgba(0, 0, 0, 0.35);
  font: 11px var(--dos-mac-font);
}

body[data-dialog-os="macos9"] #authorCanvasPopover .mod-action-title,
body[data-dialog-os="macos9"] #modActionPopover .mod-action-title {
  color: var(--dos-mac-muted);
  border-bottom: 1px solid var(--dos-mac-shadow);
  font-weight: 700;
}

body[data-dialog-os="macos9"] #authorCanvasPopover .mod-action-item,
body[data-dialog-os="macos9"] #modActionPopover .mod-action-item {
  color: var(--dos-mac-text);
  border-radius: 2px;
  font: 11px var(--dos-mac-font);
}

body[data-dialog-os="macos9"] #authorCanvasPopover .mod-action-item:hover,
body[data-dialog-os="macos9"] #modActionPopover .mod-action-item:hover {
  background: var(--dos-mac-accent);
  color: #fff;
}

/* ===== Mac: Connect dialog ===== */
body[data-dialog-os="macos9"] #connectModal {
  background: var(--dos-mac-surface);
  color: var(--dos-mac-text);
  border: 1px solid var(--dos-mac-frame);
  border-radius: 0;
  box-shadow:
    -1px -1px 0 var(--dos-mac-highlight),
    1px 1px 0 #404040,
    inset 1px 1px 0 var(--dos-mac-bevel-hi),
    inset -1px -1px 0 var(--dos-mac-shadow),
    2px 2px 0 rgba(0, 0, 0, 0.35);
  font: 11px var(--dos-mac-font);
}

body[data-dialog-os="macos9"] #connectModal .pp-title {
  height: 22px;
  padding: 0 5px 0 4px;
  gap: 6px;
  background: repeating-linear-gradient(
    to bottom,
    #cfcfcf 0px,
    #cfcfcf 1px,
    #8f8f8f 1px,
    #8f8f8f 2px
  );
  border-bottom: 1px solid #404040;
}

body[data-dialog-os="macos9"] #connectModal .pp-title-text {
  font: bold 11px var(--dos-mac-font);
  color: #111;
}

body[data-dialog-os="macos9"] #connectModal .pp-close {
  width: 13px;
  height: 13px;
  background: linear-gradient(#d8d8d8, #a8a8a8);
  border: 1px solid #202020;
  border-radius: 1px;
  box-shadow:
    inset 1px 1px 0 #f0f0f0,
    inset -1px -1px 0 #707070;
}

body[data-dialog-os="macos9"] #connectModal .pp-close:hover {
  background: linear-gradient(#e8e8e8, #b8b8b8);
}

body[data-dialog-os="macos9"] #connectModal .pp-close:active {
  background: #808080;
  box-shadow:
    inset 1px 1px 0 #404040,
    inset -1px -1px 0 #c0c0c0;
}

body[data-dialog-os="macos9"] #connectModal .modal-box {
  background: var(--dos-mac-surface);
  color: var(--dos-mac-text);
}

body[data-dialog-os="macos9"] #connectModal .conn-user-row {
  margin-bottom: 8px;
}

body[data-dialog-os="macos9"] #connectModal .conn-user-row label {
  min-width: 72px;
  font: 11px var(--dos-mac-font);
  color: var(--dos-mac-text);
}

body[data-dialog-os="macos9"] #connectModal .conn-user-row input[type="text"],
body[data-dialog-os="macos9"] #connectModal .conn-user-row select {
  flex: 1;
  padding: 3px 5px;
  border-radius: 0;
  border: 1px solid var(--dos-mac-frame);
  background: var(--dos-mac-pressed);
  color: var(--dos-mac-text);
  font: 11px var(--dos-mac-font);
  box-shadow:
    inset 1px 1px 0 var(--dos-mac-shadow),
    inset -1px -1px 0 var(--dos-mac-highlight);
}

body[data-dialog-os="macos9"] #connectModal .conn-user-row input[type="text"]:focus,
body[data-dialog-os="macos9"] #connectModal .conn-user-row select:focus {
  outline: 1px dotted #000;
  outline-offset: 1px;
}

body[data-dialog-os="macos9"] #connectModal .conn-user-row input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: #000;
}

body[data-dialog-os="macos9"] #connectModal .connect-directory-tabs {
  margin-top: 12px;
  gap: 0;
  border-bottom: 1px solid var(--dos-mac-frame);
}

body[data-dialog-os="macos9"] #connectModal .connect-directory-tab {
  top: 1px;
  padding: 4px 12px 5px;
  border: 1px solid var(--dos-mac-frame);
  border-bottom-color: var(--dos-mac-frame);
  border-radius: 3px 3px 0 0;
  background: var(--dos-mac-raised);
  color: var(--dos-mac-text);
  font: 11px var(--dos-mac-font);
  box-shadow:
    inset 1px 1px 0 var(--dos-mac-highlight),
    inset -1px 0 0 var(--dos-mac-shadow);
}

body[data-dialog-os="macos9"] #connectModal .connect-directory-tab:hover {
  background: #d0d0d0;
  color: var(--dos-mac-text);
}

body[data-dialog-os="macos9"] #connectModal .connect-directory-tab.active {
  z-index: 1;
  background: var(--dos-mac-surface);
  color: var(--dos-mac-text);
  border-bottom-color: var(--dos-mac-surface);
  font-weight: bold;
  box-shadow: inset 1px 1px 0 var(--dos-mac-highlight);
}

body[data-dialog-os="macos9"] #connectModal .connect-directory-panel {
  min-height: 140px;
  max-height: 280px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--dos-mac-surface);
  border: 1px solid var(--dos-mac-frame);
  border-top: none;
}

body[data-dialog-os="macos9"] #connectModal .connect-listbox {
  display: block;
  height: 100%;
  min-height: 140px;
  max-height: 280px;
  overflow-y: auto;
  gap: 0;
  margin: 0;
  padding: 0;
  background: var(--dos-mac-pressed);
  border: none;
  box-shadow:
    inset 1px 1px 0 var(--dos-mac-shadow),
    inset -1px -1px 0 var(--dos-mac-highlight);
}

body[data-dialog-os="macos9"] #connectModal .connect-listbox .example-status {
  padding: 16px 8px;
  font: 11px var(--dos-mac-font);
  color: var(--dos-mac-muted);
  text-align: center;
}

body[data-dialog-os="macos9"] #connectModal .connect-listbox .example-item,
body[data-dialog-os="macos9"] #connectModal .connect-listbox .server-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 5px 8px;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #e8e8e8;
  background: transparent;
  color: var(--dos-mac-text);
  font: 11px var(--dos-mac-font);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

body[data-dialog-os="macos9"] #connectModal .connect-listbox .example-item:last-child,
body[data-dialog-os="macos9"] #connectModal .connect-listbox .server-item:last-child {
  border-bottom: none;
}

body[data-dialog-os="macos9"] #connectModal .connect-listbox .example-item:hover,
body[data-dialog-os="macos9"] #connectModal .connect-listbox .server-item:hover {
  background: var(--dos-mac-select);
  color: #ffffff;
  border-bottom-color: var(--dos-mac-select);
}

body[data-dialog-os="macos9"] #connectModal .connect-listbox .example-item:hover .server-item-name,
body[data-dialog-os="macos9"] #connectModal .connect-listbox .server-item:hover .server-item-name,
body[data-dialog-os="macos9"] #connectModal .connect-listbox .example-item:hover .server-item-sysop,
body[data-dialog-os="macos9"] #connectModal .connect-listbox .server-item:hover .server-item-sysop,
body[data-dialog-os="macos9"] #connectModal .connect-listbox .example-item:hover .server-item-blurb,
body[data-dialog-os="macos9"] #connectModal .connect-listbox .server-item:hover .server-item-blurb {
  color: #ffffff;
}

body[data-dialog-os="macos9"] #connectModal .connect-listbox .example-item:hover .server-item-users,
body[data-dialog-os="macos9"] #connectModal .connect-listbox .server-item:hover .server-item-users,
body[data-dialog-os="macos9"] #connectModal .connect-listbox .example-item:hover .server-item-rooms,
body[data-dialog-os="macos9"] #connectModal .connect-listbox .server-item:hover .server-item-rooms {
  color: #ff6b6b;
}

body[data-dialog-os="macos9"] #connectModal .server-item-avatar,
body[data-dialog-os="macos9"] #connectModal .server-item-avatar-fallback,
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #connectModal .server-item-avatar,
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #connectModal .server-item-avatar-fallback {
  background: #fff;
  border: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}

body[data-dialog-os="macos9"] #connectModal .server-item-avatar,
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #connectModal .server-item-avatar {
  object-fit: contain;
  image-rendering: pixelated;
}

body[data-dialog-os="macos9"] #connectModal .server-item-main,
body[data-dialog-os="macos9"] #connectModal .server-item-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

body[data-dialog-os="macos9"] #connectModal .server-item-body {
  min-width: 0;
  flex: 1;
}

body[data-dialog-os="macos9"] #connectModal .server-item-name {
  font: bold 12px/1.25 var(--dos-mac-font);
  color: var(--dos-mac-text);
}

body[data-dialog-os="macos9"] #connectModal .server-item-stats {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  line-height: 1.2;
}

body[data-dialog-os="macos9"] #connectModal .server-item-users,
body[data-dialog-os="macos9"] #connectModal .server-item-rooms {
  font: bold 12px var(--dos-mac-font);
  color: #cc0000;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body[data-dialog-os="macos9"] #connectModal .server-item-sysop {
  margin-top: 1px;
  font: italic 10px/1.25 var(--dos-mac-font);
  color: var(--dos-mac-muted);
}

body[data-dialog-os="macos9"] #connectModal .server-item-blurb {
  margin-top: 2px;
  font: 10px/1.35 var(--dos-mac-font);
  color: var(--dos-mac-muted);
}

/* ===== Connect modal: win9x/winxp/CDE row contrast =====
   .example-item/.server-item are real <button>s, so each classic theme's
   generic ".window button" rule (dialog-classic-themes.generated.css) was
   already painting their *background* light (button-face gray/white) --
   but the row's own text colors (server-item-name/-sysop/-blurb) are
   hardcoded light (#e8f0ff/#9ab/#aaa) for the app's default dark theme,
   so on these lighter OS skins it became near-invisible light-on-light
   text. macOS9 already gets its own full treatment above; this reuses the
   same idea for the other three, each with its own theme variables. */
body:is([data-dialog-os="win9x"], [data-dialog-os="winxp"]) #connectModal .conn-user-row label {
  color: var(--window-fg);
}

body:is([data-dialog-os="win9x"], [data-dialog-os="winxp"]) #connectModal .connect-listbox {
  background: var(--input-bg);
  border: 1px solid var(--darker, #808080);
}

body:is([data-dialog-os="win9x"], [data-dialog-os="winxp"]) #connectModal .connect-listbox .example-item,
body:is([data-dialog-os="win9x"], [data-dialog-os="winxp"]) #connectModal .connect-listbox .server-item {
  background: transparent;
  color: var(--input-fg);
  border: none;
  border-bottom: 1px solid var(--light, #ddd);
  border-radius: 0;
  min-width: 0;
}

body:is([data-dialog-os="win9x"], [data-dialog-os="winxp"]) #connectModal .connect-listbox .example-item:last-child,
body:is([data-dialog-os="win9x"], [data-dialog-os="winxp"]) #connectModal .connect-listbox .server-item:last-child {
  border-bottom: none;
}

body:is([data-dialog-os="win9x"], [data-dialog-os="winxp"]) #connectModal .server-item-name {
  color: var(--input-fg);
}

body:is([data-dialog-os="win9x"], [data-dialog-os="winxp"]) #connectModal .server-item-sysop,
body:is([data-dialog-os="win9x"], [data-dialog-os="winxp"]) #connectModal .server-item-blurb {
  color: var(--dark, #666666);
}

body:is([data-dialog-os="win9x"], [data-dialog-os="winxp"]) #connectModal .connect-listbox .example-item:hover,
body:is([data-dialog-os="win9x"], [data-dialog-os="winxp"]) #connectModal .connect-listbox .server-item:hover {
  background: var(--selection-bg);
  border-bottom-color: var(--selection-bg);
}

body:is([data-dialog-os="win9x"], [data-dialog-os="winxp"]) #connectModal .connect-listbox .example-item:hover .server-item-name,
body:is([data-dialog-os="win9x"], [data-dialog-os="winxp"]) #connectModal .connect-listbox .server-item:hover .server-item-name,
body:is([data-dialog-os="win9x"], [data-dialog-os="winxp"]) #connectModal .connect-listbox .example-item:hover .server-item-sysop,
body:is([data-dialog-os="win9x"], [data-dialog-os="winxp"]) #connectModal .connect-listbox .server-item:hover .server-item-sysop,
body:is([data-dialog-os="win9x"], [data-dialog-os="winxp"]) #connectModal .connect-listbox .example-item:hover .server-item-blurb,
body:is([data-dialog-os="win9x"], [data-dialog-os="winxp"]) #connectModal .connect-listbox .server-item:hover .server-item-blurb,
body:is([data-dialog-os="win9x"], [data-dialog-os="winxp"]) #connectModal .connect-listbox .example-item:hover .server-item-users,
body:is([data-dialog-os="win9x"], [data-dialog-os="winxp"]) #connectModal .connect-listbox .server-item:hover .server-item-users,
body:is([data-dialog-os="win9x"], [data-dialog-os="winxp"]) #connectModal .connect-listbox .example-item:hover .server-item-rooms,
body:is([data-dialog-os="win9x"], [data-dialog-os="winxp"]) #connectModal .connect-listbox .server-item:hover .server-item-rooms {
  color: var(--selection-fg);
}

body[data-dialog-os="cde"] #connectModal .conn-user-row label {
  color: var(--button-fg);
}

body[data-dialog-os="cde"] #connectModal .connect-listbox {
  background: var(--input-bg);
  border: 1px solid var(--input-dark);
}

body[data-dialog-os="cde"] #connectModal .connect-listbox .example-item,
body[data-dialog-os="cde"] #connectModal .connect-listbox .server-item {
  background: transparent;
  color: var(--input-fg);
  border: none;
  border-bottom: 1px solid var(--input-light);
  border-radius: 0;
  min-width: 0;
}

body[data-dialog-os="cde"] #connectModal .connect-listbox .example-item:last-child,
body[data-dialog-os="cde"] #connectModal .connect-listbox .server-item:last-child {
  border-bottom: none;
}

body[data-dialog-os="cde"] #connectModal .server-item-name {
  color: var(--input-fg);
}

body[data-dialog-os="cde"] #connectModal .server-item-sysop,
body[data-dialog-os="cde"] #connectModal .server-item-blurb {
  color: var(--input-dark);
}

body[data-dialog-os="cde"] #connectModal .connect-listbox .example-item:hover,
body[data-dialog-os="cde"] #connectModal .connect-listbox .server-item:hover {
  background: var(--select-active-bg);
  border-bottom-color: var(--select-active-bg);
}

body[data-dialog-os="cde"] #connectModal .connect-listbox .example-item:hover .server-item-name,
body[data-dialog-os="cde"] #connectModal .connect-listbox .server-item:hover .server-item-name,
body[data-dialog-os="cde"] #connectModal .connect-listbox .example-item:hover .server-item-sysop,
body[data-dialog-os="cde"] #connectModal .connect-listbox .server-item:hover .server-item-sysop,
body[data-dialog-os="cde"] #connectModal .connect-listbox .example-item:hover .server-item-blurb,
body[data-dialog-os="cde"] #connectModal .connect-listbox .server-item:hover .server-item-blurb,
body[data-dialog-os="cde"] #connectModal .connect-listbox .example-item:hover .server-item-users,
body[data-dialog-os="cde"] #connectModal .connect-listbox .server-item:hover .server-item-users,
body[data-dialog-os="cde"] #connectModal .connect-listbox .example-item:hover .server-item-rooms,
body[data-dialog-os="cde"] #connectModal .connect-listbox .server-item:hover .server-item-rooms {
  color: var(--select-active-fg);
}

/* ===== Mac: paint + YouTube floating windows ===== */
/* Paint palette keeps #444444 (same as .main / PAINT_GRAY44 tool cells); only
   the YouTube floaters use the light Mac dialog surface. */
body[data-dialog-os="macos9"] #paintPalette,
body[data-dialog-os="macos9"] #ytPlayerWindow,
body[data-dialog-os="macos9"] #ytSearchWindow {
  border: 1px solid var(--dos-mac-frame);
  border-radius: 0;
  box-shadow:
    -1px -1px 0 var(--dos-mac-highlight),
    1px 1px 0 var(--dos-mac-shadow),
    2px 2px 0 rgba(0, 0, 0, 0.35);
  font-family: var(--dos-mac-font);
}
body[data-dialog-os="macos9"] #ytPlayerWindow,
body[data-dialog-os="macos9"] #ytSearchWindow {
  background: var(--dos-mac-surface);
}

body[data-dialog-os="macos9"] #paintPalette .pp-title,
body[data-dialog-os="macos9"] #ytPlayerWindow .pp-title,
body[data-dialog-os="macos9"] #ytSearchWindow .pp-title {
  height: 22px;
  padding: 0 5px 0 4px;
  background: repeating-linear-gradient(
    to bottom,
    #cfcfcf 0px,
    #cfcfcf 1px,
    #8f8f8f 1px,
    #8f8f8f 2px
  );
  border-bottom: 1px solid #404040;
}

body[data-dialog-os="macos9"] #ytPlayerWindow .pp-title-label,
body[data-dialog-os="macos9"] #ytSearchWindow .pp-title-label {
  font: bold 11px var(--dos-mac-font);
  color: #111;
}

body[data-dialog-os="macos9"] #paintPalette .pp-close,
body[data-dialog-os="macos9"] #ytPlayerWindow .pp-close,
body[data-dialog-os="macos9"] #ytSearchWindow .pp-close {
  width: 13px;
  height: 13px;
  background: linear-gradient(#d8d8d8, #a8a8a8);
  border: 1px solid #202020;
  border-radius: 1px;
  box-shadow:
    inset 1px 1px 0 #f0f0f0,
    inset -1px -1px 0 #707070;
}

body[data-dialog-os="macos9"] #ytSearchWindow .yt-results {
  background: var(--dos-mac-pressed);
}

body[data-dialog-os="macos9"] #ytSearchWindow .yt-result:hover {
  background: var(--dos-mac-select);
}

body[data-dialog-os="macos9"] #ytSearchWindow .yt-result-text {
  color: var(--dos-mac-text);
}

body[data-dialog-os="macos9"] #ytSearchWindow .yt-result:hover .yt-result-text,
body[data-dialog-os="macos9"] #ytSearchWindow .yt-result:hover .yt-result-channel {
  color: #fff;
}

body[data-dialog-os="macos9"] #ytSearchWindow .yt-result-channel,
body[data-dialog-os="macos9"] #ytSearchWindow .yt-empty {
  color: var(--dos-mac-muted);
}

body[data-dialog-os="macos9"] #ytPlayerWindow .yt-controls {
  background: #e8e8e8;
  border-bottom: 1px solid var(--dos-mac-frame);
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-play-row input {
  background: #fff;
  color: #111;
  border: 1px solid #808080;
  box-shadow: inset 1px 1px 0 #c0c0c0;
  font: 11px var(--dos-mac-font);
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-play-row input:focus {
  border-color: #404040;
  background: #fff;
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-btn {
  background: linear-gradient(#ffffff, #d4d4d4);
  border: 1px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
  font: 11px var(--dos-mac-font);
  color: #111;
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-btn:hover {
  background: linear-gradient(#fff, #e0e0e0);
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-btn:active,
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-btn.open {
  background: #c8c8c8;
  border-color: #000 #fff #fff #000;
  box-shadow: inset 1px 1px 0 #808080;
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-btn-ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #333;
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-btn-ghost:hover {
  background: #d8d8d8;
  border-color: #808080;
  color: #000;
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-btn-danger {
  color: #5a1010;
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-btn-danger.confirming {
  color: #fff;
  background: linear-gradient(#d05050, #9a2828);
  border-color: #600 #300 #300 #600;
  box-shadow: inset 1px 1px 0 #e08080;
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-block-prompt-text {
  color: #333;
  font: 11px var(--dos-mac-font);
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-blocked-panel {
  background: #f4f4f4;
  border-top: 1px solid var(--dos-mac-frame);
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-blocked-empty {
  color: var(--dos-mac-muted);
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-blocked-row:hover {
  background: #ddd;
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-blocked-title {
  color: #111;
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-blocked-id {
  color: var(--dos-mac-muted);
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-status-bar {
  background: #f0e8d0;
  color: #5a4010;
  border-bottom: 1px solid var(--dos-mac-frame);
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-queue-panel {
  background: #f4f4f4;
  border-top: 1px solid var(--dos-mac-frame);
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-now {
  border-bottom: 1px solid #ccc;
  color: #111;
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-now-label,
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-wizard-label {
  color: var(--dos-mac-muted);
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-now-meta,
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-queue-by,
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-queue-eta,
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-queue-empty {
  color: var(--dos-mac-muted);
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-queue-title {
  color: #111;
}
body[data-dialog-os="macos9"] #ytPlayerWindow .yt-queue-row {
  border-bottom: 1px solid #ddd;
}

/* ===== Win9x: Room Inspector / Profile ===== */
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #profileWindow.floating-window,
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #roomInfoWindow.floating-window {
  background: #c0c0c0;
  color: #000;
  border: 2px solid;
  border-color: #fff #000 #000 #fff;
  border-radius: 0;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf, 0 6px 22px rgba(0, 0, 0, 0.55);
  font-family: Tahoma, "MS Sans Serif", Geneva, sans-serif;
}

body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #profileWindow .fw-title,
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #roomInfoWindow .fw-title {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  border-radius: 0;
  font: bold 12px Tahoma, "MS Sans Serif", sans-serif;
}

body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #profileWindow {
  color: #000;
}
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #profileWindow .social-window-body {
  color: #000;
  background: #c0c0c0;
}
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #profileWindow .social-username { color: #000; }
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #profileWindow .social-handle { color: #333; }
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #profileWindow .social-tagline,
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #profileWindow .social-desc { color: #222; }
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #profileWindow .social-presence { color: #006600; }
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #profileWindow .social-muted { color: #444; }
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #profileWindow .social-link a { color: #0000cc; }
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #profileWindow .social-avatar {
  background: transparent;
  border: none;
  box-shadow: none;
}
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #profileWindow .social-avatar-placeholder { color: #666; }
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #profileWindow .room-namecontrols-btn {
  background: #c0c0c0;
  color: #000;
  border: 1px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
  font: 11px Tahoma, "MS Sans Serif", sans-serif;
}

body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #profileWindow .fw-close,
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #roomInfoWindow .fw-close {
  width: 16px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #c0c0c0;
  color: #000;
  border: 1px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
  font: 9px/12px Tahoma, "MS Sans Serif", sans-serif;
  font-weight: bold;
  padding: 0;
}

body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #roomInfoWindow .fw-toolbar {
  border-bottom: 1px solid #808080;
  box-shadow: 0 1px 0 #fff;
  color: #000;
}

body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #roomInfoWindow .room-namecontrols-btn {
  background: #c0c0c0;
  color: #000;
  border: 1px solid;
  border-color: #fff #000 #000 #fff;
  border-radius: 0;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
  font: 11px Tahoma, "MS Sans Serif", sans-serif;
}

body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #roomInfoWindow .prefs-checkbox,
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #roomInfoWindow .room-info-debug {
  color: #000;
}

body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #roomInfoWindow .rid-status {
  color: #404040;
}

body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #roomInfoWindow .rid-section-label {
  color: #000;
  border-bottom: 1px solid #808080;
}

body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #roomInfoWindow .rid-field .rid-k {
  color: #404040;
}

body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #roomInfoWindow .rid-field .rid-v {
  color: #000;
}

body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #roomInfoWindow .rid-spot:hover {
  background: #d8d8d8;
}

body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #roomInfoWindow .rid-spot.open {
  background: #000080;
  color: #fff;
}

body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #roomInfoWindow .rid-detail {
  background: #fff;
  border: 1px solid;
  border-color: #000 #fff #fff #000;
  border-radius: 0;
  box-shadow: inset 1px 1px 0 #808080;
}

body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #roomInfoWindow .rid-detail pre {
  background: #fff;
  border: 1px solid #808080;
  border-radius: 0;
  color: #000;
}

body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #roomInfoWindow .rid-flag {
  background: #fff;
  color: #000;
  border: 1px solid #808080;
  border-radius: 0;
}

/* ===== Win9x: moderator action menu (author menus already win9x in base CSS) ===== */
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #modActionPopover {
  background: #c0c0c0;
  color: #000;
  border: 1px solid;
  border-color: #fff #000 #000 #fff;
  border-radius: 0;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf, 0 4px 14px rgba(0, 0, 0, 0.5);
  font: 11px Tahoma, "MS Sans Serif", sans-serif;
}

body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #modActionPopover .mod-action-title {
  color: #000;
  font-weight: bold;
  border-bottom: 1px solid #808080;
  padding: 3px 6px 2px;
}

body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #modActionPopover .mod-action-item {
  color: #000;
  border-radius: 0;
  font: 11px Tahoma, "MS Sans Serif", sans-serif;
  padding: 4px 8px;
}

body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #modActionPopover .mod-action-item:hover {
  background: #000080;
  color: #fff;
}

/* Win9x keeps base .retro-* chrome; ensure close stays right-side (default order). */
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) .retro-close,
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) #roomInfoWindow .fw-close {
  order: 0;
}

/* ===== Blessed operators table: Mac theme ===== */
body[data-dialog-os="macos9"] .bless-table th {
  background: var(--dos-mac-raised);
  border-color: var(--dos-mac-bevel-hi) var(--dos-mac-shadow) var(--dos-mac-shadow) var(--dos-mac-bevel-hi);
  color: var(--dos-mac-text);
  font: bold 10px var(--dos-mac-font);
}
body[data-dialog-os="macos9"] .bless-table th:hover {
  background: var(--dos-mac-surface);
}
body[data-dialog-os="macos9"] .bless-table td {
  border-bottom: 1px solid var(--dos-mac-shadow);
  color: var(--dos-mac-text);
  font: 10px var(--dos-mac-font);
}
body[data-dialog-os="macos9"] .bless-table tr:hover td {
  background: var(--dos-mac-accent-light);
  color: #fff;
}

/* ===== Blessed operators table: Win9x theme ===== */
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) .bless-table th {
  background: #c0c0c0;
  border-color: #fff #808080 #808080 #fff;
  font-weight: bold;
}
body:is([data-dialog-os="win9x"], [data-dialog-os="cde"], [data-dialog-os="winxp"]) .bless-table tr:hover td {
  background: #000080;
  color: #fff;
}