:root {
  --rc-blue: #3a6ea5;
  --rc-blue-dark: #2c5580;
  --rc-bg: #f4f6f8;
  --rc-panel: #ffffff;
  --rc-border: #dde3e8;
  --rc-text: #2a2f36;
  --rc-muted: #7a8592;
  --rc-danger: #c0392b;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--rc-text);
  background: var(--rc-bg);
}

.lang-switch {
  display: flex;
  justify-content: flex-end;
  padding: 5px 14px;
  background: #f4f6f8;
  border-bottom: 1px solid var(--rc-border);
  font-size: 12px;
}
.lang-switch a {
  color: var(--rc-muted);
  text-decoration: none;
  margin-left: 6px;
}
.lang-switch a.active { color: var(--rc-blue-dark); font-weight: 600; }
.theme-switch-sep { color: var(--rc-muted); margin: 0 4px; font-size: 11px; }

/* ---------- Login ---------- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--rc-blue-dark), var(--rc-blue));
}
.login-box {
  background: var(--rc-panel);
  padding: 40px;
  border-radius: 6px;
  width: 340px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.login-logo {
  font-weight: 700;
  color: var(--rc-blue-dark);
  letter-spacing: .5px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}
.login-logo-mark { width: 36px; height: 36px; border-radius: 8px; }
.login-box h1 {
  font-size: 18px;
  margin: 0 0 20px;
  color: var(--rc-text);
  font-weight: 600;
}
.login-box label {
  display: block;
  font-size: 12px;
  color: var(--rc-muted);
  margin: 12px 0 4px;
}
.login-box input[type="email"],
.login-box input[type="password"] {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--rc-border);
  border-radius: 4px;
  font-size: 14px;
}
.login-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 14px 0 18px;
  font-size: 12px;
}
.checkbox { color: var(--rc-muted); display: flex; gap: 5px; align-items: center; }
.forgot-link { color: var(--rc-blue); text-decoration: none; }
.btn-primary {
  width: 100%;
  padding: 10px;
  background: var(--rc-blue);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.btn-primary:hover { background: var(--rc-blue-dark); }
.alert {
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 12px;
}
.alert-error { background: #fdecea; color: var(--rc-danger); }
.alert-info { background: #eaf3fb; color: var(--rc-blue-dark); }

/* ---------- Inbox (3-pane, Roundcube "Elastic"-like) ---------- */
.rc-shell { display: flex; flex-direction: column; height: 100vh; }
.rc-topbar {
  height: 48px;
  background: var(--rc-blue-dark);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
  flex-shrink: 0;
}
.rc-brand { font-weight: 700; letter-spacing: .5px; }
.rc-brand-wrap { display: flex; flex-direction: column; justify-content: center; line-height: 1.25; }
.rc-version { font-size: 10px; font-weight: 400; color: rgba(255,255,255,.6); letter-spacing: 0; }
.rc-search { flex: 1; max-width: 420px; }
.rc-dark-toggle { color: rgba(255,255,255,.85); text-decoration: none; font-size: 18px; padding: 4px 8px; border-radius: 4px; line-height: 1; }
.rc-dark-toggle:hover { background: rgba(255,255,255,.15); }
.rc-search input {
  width: 100%;
  padding: 6px 10px;
  border-radius: 4px;
  border: none;
  font-size: 13px;
}
.rc-account { font-size: 13px; opacity: .9; white-space: nowrap; flex-shrink: 0; }
.rc-account a { color: #fff; text-decoration: underline; }

.rc-body { flex: 1; display: flex; overflow: hidden; }

.rc-folders {
  width: 200px;
  background: var(--rc-panel);
  border-right: 1px solid var(--rc-border);
  display: flex;
  flex-direction: column;
  padding: 12px;
}
.btn-compose {
  background: var(--rc-blue);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 9px;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 14px;
}
.rc-folders ul { list-style: none; padding: 0; margin: 0; flex: 1; }
.rc-folders li {
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--rc-text);
  cursor: pointer;
}
.rc-folders li.active { background: #eaf1f8; color: var(--rc-blue-dark); font-weight: 600; }
.rc-folders li:hover { background: #f0f3f6; }
.rc-footer-link a { font-size: 12px; color: var(--rc-muted); text-decoration: none; }

.rc-messagelist {
  width: 340px;
  background: var(--rc-panel);
  border-right: 1px solid var(--rc-border);
  overflow-y: auto;
}
.rc-preview-pane { flex: 1; background: var(--rc-panel); overflow: hidden; }
.rc-preview-frame { width: 100%; height: 100%; border: none; display: block; }
.rc-empty {
  color: var(--rc-muted);
  font-size: 13px;
  text-align: center;
  padding: 40px 20px;
}

/* ---------- Folder list links ---------- */
.rc-folders li { padding: 0; }
.rc-folders li a {
  display: block;
  padding: 8px 10px;
  color: inherit;
  text-decoration: none;
}
.rc-folders li.active a { color: var(--rc-blue-dark); font-weight: 600; }
a.btn-compose {
  display: block;
  text-align: center;
  text-decoration: none;
}

/* ---------- Account tree (Thunderbird-style: each account's folders
   nest directly underneath it, not a separate switcher plus one shared
   folder list) ---------- */
.rc-account-tree { margin-top: 8px; display: flex; flex-direction: column; gap: 1px; }
.rc-acc-row { display: flex; align-items: center; gap: 2px; }
.rc-acc-toggle {
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  color: var(--rc-muted); font-size: 10px; line-height: 1; flex-shrink: 0;
  transition: transform 0.15s ease;
}
.rc-acc-node.expanded > .rc-acc-row > .rc-acc-toggle { transform: rotate(90deg); }
.rc-acc-email {
  flex: 1; min-width: 0;
  font-size: 12px; color: var(--rc-muted); text-decoration: none;
  padding: 5px 6px; border-radius: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-acc-email:hover { background: #f0f3f6; }
.rc-acc-email.active { background: #eaf1f8; color: var(--rc-blue-dark); font-weight: 600; }
/* An account with unread mail shows bold - reset to normal weight
   above when it's also the active one, since active already has its
   own (equally bold) treatment and shouldn't visually stack. */
.rc-acc-email.unread { font-weight: 700; color: var(--rc-text); }
.rc-acc-email.unread.active { color: var(--rc-blue-dark); }
.rc-acc-folders {
  list-style: none; margin: 0 0 2px; padding: 0;
  display: none;
}
.rc-acc-node.expanded > .rc-acc-folders { display: block; }
.rc-acc-folders li { padding: 0; }
.rc-acc-folders li a {
  display: block; padding: 6px 10px 6px 26px;
  font-size: 13px; color: var(--rc-text); text-decoration: none; border-radius: 4px;
}
.rc-acc-folders li a:hover { background: #f0f3f6; }
.rc-acc-folders li.active a { background: #eaf1f8; color: var(--rc-blue-dark); font-weight: 600; }
.rc-acc-connect-failed {
  padding: 6px 10px 6px 26px;
  font-size: 12px;
  color: var(--rc-danger);
  font-style: italic;
}
.rc-acc-connect-detail {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--rc-muted);
  word-break: break-word;
  margin-top: 2px;
}

/* ---------- Message list: stacked rows (sender / subject / time), each
   its own line - not a table, so long subjects wrap instead of getting
   squeezed into a narrow column. Clicking a row loads the message into
   the reading pane on the right (rc-preview-frame) instead of navigating
   away from the inbox. ---------- */
.rc-msglist-stacked { display: flex; flex-direction: column; }
.rc-msgrow-stacked {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rc-border);
}
.rc-msgrow-stacked.unread { font-weight: 600; background: #fbfdff; }
.rc-msgrow-stacked:hover { background: #f5f8fb; }
.rc-msgrow-link {
  flex: 1;
  min-width: 0;
  color: var(--rc-text);
  text-decoration: none;
  display: block;
}
.rc-msgrow-link:hover { color: var(--rc-blue); }
.rc-msg-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rc-msg-line-sender { font-size: 13px; }
.rc-msg-line-subject { font-size: 13px; color: var(--rc-text); }
.rc-msgrow-stacked:not(.unread) .rc-msg-line-subject { color: var(--rc-muted); }
.rc-msg-line-date { font-size: 11px; color: var(--rc-muted); }
.rc-msgrow-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.rc-icon-btn {
  background: none; border: none; cursor: pointer;
  color: var(--rc-muted); font-size: 16px; line-height: 1;
}
.rc-icon-btn:hover { color: var(--rc-danger); }

/* Infinite scroll: a sentinel row after the loaded messages, watched by
   an IntersectionObserver (app.js) which fetches and appends the next
   page automatically as it scrolls into view. Replaces numbered
   pagination - the person just keeps scrolling, no page concept
   surfaces in the UI at all. */
.rc-scroll-sentinel { display: flex; justify-content: center; padding: 18px 0; min-height: 1px; }
.rc-scroll-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--rc-border); border-top-color: var(--rc-blue);
  opacity: 0; animation: rc-spin 0.8s linear infinite;
}
.rc-scroll-sentinel.rc-scroll-loading .rc-scroll-spinner { opacity: 1; }
@keyframes rc-spin { to { transform: rotate(360deg); } }

/* ---------- Message detail ---------- */
.rc-message-detail { flex: 1; padding: 24px 32px; overflow-y: auto; background: var(--rc-panel); }
.rc-embed-body { margin: 0; }
.rc-message-detail-embed { padding: 18px 22px; }
.rc-format-toggle {
  display: flex;
  gap: 16px;
  margin: 4px 0 12px;
  font-size: 12px;
  color: var(--rc-muted);
}
.rc-format-toggle label { display: flex; align-items: center; gap: 5px; cursor: pointer; }

.rc-add-contact-link { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--rc-muted); }
.rc-add-contact-link:hover { color: var(--rc-blue); border-bottom-color: var(--rc-blue); }
.rc-unread-count { color: var(--rc-muted); font-weight: 600; font-size: 12px; }

.rc-flash-error {
  background: #fdecea;
  color: #a80115;
  padding: 10px 20px;
  font-size: 13px;
  border-bottom: 1px solid #f3c8c4;
}
.rc-checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--rc-text); margin: 10px 0 2px; }

/* Mail-account switcher entries show the lowercase email address (not
   whatever custom label was configured) so it's always unambiguous
   which account you're switching to - given a subtly different
   background/font from the folder list above it, so the two lists read
   as distinct groups rather than blending together. */
.rc-acc-email {
  font-family: "SF Mono", Consolas, Menlo, monospace;
  font-size: 11px;
  background: #f1f3f5;
  border-radius: 4px;
}

.rc-headers-toggle {
  margin: 10px 0 16px;
  font-size: 12px;
  color: var(--rc-muted);
}
.rc-headers-toggle summary { cursor: pointer; user-select: none; }
.rc-headers-toggle summary:hover { color: var(--rc-text); }
.rc-headers-raw {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: #f7f8fa;
  border: 1px solid var(--rc-border);
  border-radius: 4px;
  font-family: "SF Mono", Consolas, Menlo, monospace;
  font-size: 11px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--rc-text);
  max-height: 300px;
  overflow-y: auto;
}
.rc-message-body { margin-top: 4px; }
.rc-message-toolbar { display: flex; gap: 18px; font-size: 13px; margin-bottom: 18px; }
.rc-message-toolbar a, .link-btn {
  color: var(--rc-blue);
  text-decoration: none;
  background: none;
  border: none;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.inline-form { display: inline; }
.rc-message-subject { font-size: 20px; margin: 0 0 10px; }
.rc-message-meta { font-size: 13px; color: var(--rc-muted); margin-bottom: 16px; line-height: 1.6; }
.rc-attachments { margin-bottom: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.rc-attachment {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--rc-border);
  border-radius: 4px;
  font-size: 12px;
  color: var(--rc-text);
  text-decoration: none;
}
.rc-attachment:hover { border-color: var(--rc-blue); }
.rc-text-body { white-space: pre-wrap; font-family: inherit; font-size: 14px; line-height: 1.5; }
.rc-html-body { width: 100%; height: 60vh; border: none; }

/* ---------- Compose ---------- */
.rc-compose { flex: 1; padding: 24px 32px; overflow-y: auto; background: var(--rc-panel); max-width: 720px; }
.compose-form label {
  display: block;
  font-size: 12px;
  color: var(--rc-muted);
  margin: 14px 0 4px;
}
.compose-form input[type="text"],
.compose-form input[type="file"],
.compose-form textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--rc-border);
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}
.compose-send { width: auto; padding: 10px 24px; margin-top: 18px; }

/* ---------- App nav (shared across logged-in pages) ---------- */
.rc-appnav { display: flex; gap: 14px; }
.rc-appnav a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 13px;
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
}
.rc-appnav a:hover { border-bottom-color: rgba(255,255,255,0.6); }
/* ---------- Generic list pages (contacts, filters) ---------- */
.rc-list-page { flex: 1; padding: 20px 28px; overflow-y: auto; background: var(--rc-panel); }
.rc-list-toolbar { margin-bottom: 14px; }
.rc-inline-btn { display: inline-block; text-decoration: none; padding: 8px 16px; }
.rc-datatable { width: 100%; border-collapse: collapse; font-size: 13px; }
.rc-datatable tr td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--rc-border);
  vertical-align: middle;
}
.rc-dt-name { font-weight: 600; width: 200px; }
.rc-dt-email, .rc-dt-cond, .rc-dt-phone { color: var(--rc-muted); }
.rc-dt-actions { text-align: right; white-space: nowrap; }
.rc-dt-actions a, .rc-dt-actions .link-btn { margin-left: 12px; font-size: 12px; }

/* ---------- Generic form pages (contact/event/filter forms) ---------- */
.rc-form-page { flex: 1; padding: 24px 32px; overflow-y: auto; background: var(--rc-panel); max-width: 640px; }
.rc-form-page h1 { font-size: 18px; margin: 0 0 18px; }
.rc-form-row { display: flex; gap: 8px; margin-bottom: 4px; }
.rc-form-row select, .rc-form-row input { flex: 1; }
.compose-actions { display: flex; gap: 12px; align-items: center; margin-top: 18px; }
/* .btn-primary's own rule below sets width:100% for the LOGIN page's
   full-width button - that must NOT leak into every form that reuses
   .btn-primary inside a compose-actions row (contact/event/filter/mail
   account forms), or the button stretches to fill the row and squeezes
   whatever sits next to it (e.g. a Cancel link) with no visible gap. */
.compose-actions .btn-primary { width: auto; padding: 10px 24px; border: 1px solid transparent; }
.compose-actions .btn-secondary, .compose-actions .btn-secondary-link { padding: 10px 24px; }
.btn-secondary {
  background: #fff;
  border: 1px solid var(--rc-border);
  color: var(--rc-text);
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.btn-secondary:hover { border-color: var(--rc-blue); }
.btn-secondary-link {
  color: var(--rc-text);
  text-decoration: none;
  font-size: 14px;
  padding: 10px 20px;
  border: 1px solid var(--rc-border);
  border-radius: 4px;
  display: inline-block;
  background: #fff;
}
.btn-secondary-link:hover { border-color: var(--rc-blue); color: var(--rc-blue-dark); text-decoration: none; }

/* ---------- Calendar ---------- */
.rc-calendar-page { flex: 1; padding: 20px 28px; overflow-y: auto; background: var(--rc-panel); }
.rc-cal-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.rc-cal-toolbar a { color: var(--rc-blue); text-decoration: none; font-size: 16px; }
.rc-cal-title { font-weight: 700; font-size: 16px; flex: 1; }
.rc-calendar-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rc-calendar-grid th {
  font-size: 11px;
  color: var(--rc-muted);
  text-transform: uppercase;
  padding: 6px;
  text-align: left;
}
.rc-cal-cell {
  border: 1px solid var(--rc-border);
  height: 90px;
  vertical-align: top;
  padding: 4px;
  font-size: 12px;
}
.rc-cal-empty { background: #fafbfc; }
.rc-cal-today { background: #eaf3fb; }
.rc-cal-daynum a { color: var(--rc-muted); text-decoration: none; font-weight: 600; }
.rc-cal-event {
  display: block;
  background: var(--rc-blue);
  color: #fff;
  border-radius: 3px;
  padding: 2px 5px;
  margin-top: 3px;
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Move-to-folder dropdown in message list/detail ---------- */
.rc-move-form { display: inline-block; }
.rc-move-form select { font-size: 11px; padding: 2px 4px; border: 1px solid var(--rc-border); border-radius: 3px; }

/* ---------- Calendar sync / feed box ---------- */
.rc-cal-sync-link { margin-left: auto; }
.rc-cal-feed-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f5f7fa;
  border: 1px solid var(--rc-border);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 12px;
  flex-wrap: wrap;
}
.rc-cal-feed-box span { color: var(--rc-muted); white-space: nowrap; }
.rc-cal-feed-box input[type="text"] {
  flex: 1;
  min-width: 220px;
  font-size: 11px;
  padding: 5px 7px;
  border: 1px solid var(--rc-border);
  border-radius: 3px;
  color: var(--rc-muted);
}
.rc-import-btn { padding: 5px 10px; font-size: 12px; }
.rc-form-hint { color: var(--rc-muted); font-size: 12px; margin: 4px 0 16px; }
.rc-discovered-list { background: #f5f7fa; border-radius: 4px; padding: 10px 12px; margin-bottom: 14px; font-size: 12px; }
.rc-discovered-item { margin-top: 4px; }
.rc-discovered-item code { background: #fff; padding: 1px 4px; border-radius: 3px; }
.rc-sync-error { color: var(--rc-danger); }
.rc-mail-accounts-heading { font-size: 16px; margin: 28px 0 12px; padding-top: 20px; border-top: 1px solid var(--rc-border); }
.rc-test-ok { color: #1e7e34; font-size: 11px; margin-top: 3px; }
.rc-test-fail { color: var(--rc-danger); font-size: 11px; margin-top: 3px; word-break: break-word; max-width: 320px; }

/* ---------- Directory search ---------- */
.rc-directory-search { display: flex; gap: 8px; margin-bottom: 16px; max-width: 480px; }
.rc-directory-search input { flex: 1; padding: 8px 10px; border: 1px solid var(--rc-border); border-radius: 4px; font-size: 14px; }
.lang-switch select { border: 1px solid var(--rc-border); border-radius: 3px; font-size: 11px; padding: 3px 4px; background: #fff; color: var(--rc-muted); }

/* ============================================================
   Dark mode - overriding the same CSS custom properties every
   other rule in this file already reads via var(--rc-*) handles
   most of the app automatically (topbar, panels, page background,
   text, borders). A short list of hardcoded hover/tint/status
   colors that don't go through a variable get their own explicit
   dark-mode override below rather than being refactored into new
   variables - a pragmatic middle ground given how many small,
   one-off tints exist (unread-row tint, error banner, headers
   toggle background, etc.) versus how much they actually matter
   visually once the big surfaces are already dark.
   ============================================================ */
html[data-mode="dark"] {
  --rc-blue: #5b8fc7;
  --rc-blue-dark: #4a7ab0;
  --rc-bg: #16181c;
  --rc-panel: #1f2226;
  --rc-border: #34383e;
  --rc-text: #e4e6eb;
  --rc-muted: #9aa3ad;
  --rc-danger: #e0574a;
}
html[data-mode="dark"] body { background: var(--rc-bg); color: var(--rc-text); }
html[data-mode="dark"] .rc-folders li:hover,
html[data-mode="dark"] .rc-acc-email:hover,
html[data-mode="dark"] .rc-acc-folders li a:hover,
html[data-mode="dark"] .rc-appnav a:hover { background: #2a2d33; }
html[data-mode="dark"] .rc-folders li.active,
html[data-mode="dark"] .rc-acc-email.active,
html[data-mode="dark"] .rc-acc-folders li.active a { background: #253345; color: #8fb8e0; }
html[data-mode="dark"] .rc-acc-email { background: #24272c; }
html[data-mode="dark"] .rc-msgrow-stacked.unread,
html[data-mode="dark"] .rc-msgrow-stacked:hover { background: #24272c; }
html[data-mode="dark"] .rc-flash-error { background: #3a2020; color: #ff9a8e; border-color: #5a2d2d; }
html[data-mode="dark"] .rc-alert-error, html[data-mode="dark"] .alert-error { background: #3a2020; color: #ff9a8e; }
html[data-mode="dark"] .rc-headers-raw { background: #17191c; color: var(--rc-text); }
html[data-mode="dark"] .lang-switch, html[data-mode="dark"] .rc-lang-switch { background: #1a1c20; }
html[data-mode="dark"] .lang-switch select { background: #24272c; color: var(--rc-text); border-color: var(--rc-border); }
html[data-mode="dark"] input, html[data-mode="dark"] textarea, html[data-mode="dark"] select {
  background: #24272c; color: var(--rc-text); border-color: var(--rc-border);
}
html[data-mode="dark"] ::placeholder { color: #6b7178; }
html[data-mode="dark"] .btn-secondary, html[data-mode="dark"] .btn-secondary-link { background: #24272c; color: var(--rc-text); }
html[data-mode="dark"] .rc-preview-pane, html[data-mode="dark"] .rc-message-detail { background: var(--rc-panel); }
html[data-mode="dark"] .rc-html-body { background: #fff; } /* the message's own HTML keeps a white canvas - it's someone else's content, not ours to recolor */
html[data-mode="dark"] .rc-attachment { background: #24272c; }
html[data-mode="dark"] .rc-dark-toggle { color: rgba(255,255,255,.85); }

/* ---------- Global loading overlay ----------
   Shown while waiting for a real server round-trip (form submit, link
   navigation) so an action like deleting a message doesn't leave the
   person staring at an unchanged screen with no way to tell whether
   anything is actually happening versus the click having done nothing
   at all. Shared across every theme (added once here, in the base CSS
   every theme loads first) rather than duplicated per theme, since the
   overlay/spinner look doesn't need to vary by theme the way page
   content does. */
.rc-loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.4);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.rc-loading-overlay.visible { display: flex; }
.rc-loading-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(0, 0, 0, 0.15);
  border-top-color: var(--rc-blue);
  border-radius: 50%;
  animation: rc-spin 0.8s linear infinite;
}
@keyframes rc-spin {
  to { transform: rotate(360deg); }
}
html[data-mode="dark"] .rc-loading-overlay { background: rgba(0, 0, 0, 0.5); }
html[data-mode="dark"] .rc-loading-spinner { border-color: rgba(255, 255, 255, 0.15); border-top-color: var(--rc-blue); }