/* @file mums-local-backup.css
 * @description MUMS LOCAL BACKUP (feature `mlb-1`) — the `.mlb-*` design system
 *   for the compliance onboarding overlay, the Local Backup console and the
 *   topbar status chip.
 *
 *   WHY THIS LAYER DEFINES ITS OWN TOKENS. The same two surfaces render on
 *   index.html (main theme — `html[data-mode]` + `html[data-theme]`) and on
 *   services.html (services theme — `:root[data-svc-theme]` + the `--sc-*`
 *   ramp). Neither token set exists on the other page, so borrowing either one
 *   would ship a half-unstyled panel on the other. `--mlb-*` is defined
 *   DARK-FIRST on :root and re-pointed by BOTH light selectors, so the layer is
 *   correct on both pages in both themes with no page-specific code.
 *
 *   Every colour is defined on bare `:root` first. Nothing gets its ONLY
 *   definition inside a theme block — the trap that ships a dark literal into
 *   the light ramp (memory.md · super-wiki-ownership `--ss-surface2`).
 *
 *   Z-INDEX. The app's real top tier is 2147483000, not 100000 — an overlay at
 *   the lower tier renders UNDER existing app chrome (memory.md · egr-6). The
 *   onboarding overlay sits above the console because it is the compliance gate.
 *
 * @module MUMS/LocalBackup
 * @version mlb-1 (2026-08-26)
 */

:root {
  --mlb-z-console: 2147483040;
  --mlb-z-overlay: 2147483060;

  --mlb-scrim: rgba(4, 7, 14, .78);
  --mlb-card: #0e1420;
  --mlb-card-2: #131b2a;
  --mlb-raise: rgba(255, 255, 255, .045);
  --mlb-raise-2: rgba(255, 255, 255, .075);
  --mlb-edge: rgba(255, 255, 255, .10);
  --mlb-edge-2: rgba(255, 255, 255, .16);

  --mlb-ink: #eef3fa;
  --mlb-ink-2: #a9b8cb;
  --mlb-ink-3: #8a9bb2;

  --mlb-accent: #38bdf8;
  --mlb-accent-ink: #04121c;
  --mlb-accent-soft: rgba(56, 189, 248, .14);
  --mlb-accent-edge: rgba(56, 189, 248, .42);

  --mlb-gold: #d8b45a;
  --mlb-ok: #34d399;
  --mlb-warn: #fbbf24;
  --mlb-err: #f87171;
  --mlb-info: #60a5fa;

  --mlb-shadow: 0 30px 90px rgba(0, 0, 0, .62), 0 0 0 1px rgba(255, 255, 255, .05);
  --mlb-radius: 18px;
}

html[data-mode="light"],
:root[data-svc-theme="light"] {
  --mlb-scrim: rgba(24, 33, 48, .48);
  --mlb-card: #ffffff;
  --mlb-card-2: #f4f6fa;
  --mlb-raise: rgba(15, 30, 55, .04);
  --mlb-raise-2: rgba(15, 30, 55, .07);
  --mlb-edge: rgba(15, 30, 55, .12);
  --mlb-edge-2: rgba(15, 30, 55, .2);

  --mlb-ink: #16202f;
  --mlb-ink-2: #4a5a70;
  --mlb-ink-3: #5b6c82;

  --mlb-accent: #0369a1;
  --mlb-accent-ink: #ffffff;
  --mlb-accent-soft: rgba(3, 105, 161, .10);
  --mlb-accent-edge: rgba(3, 105, 161, .34);

  --mlb-gold: #7d5c14;
  /* Darkened from #0f8a5f, which measured 4.36:1 for the settings panel's
     success line on the light card — just under AA. */
  --mlb-ok: #0b7a53;
  --mlb-warn: #a86a04;
  --mlb-err: #c2413b;
  --mlb-info: #2563eb;

  --mlb-shadow: 0 24px 70px rgba(20, 35, 60, .22), 0 0 0 1px rgba(15, 30, 55, .07);
}

/* ═══════════════════════════ shared primitives ══════════════════════════ */

.mlb-root, .mlb-root * { box-sizing: border-box; }
.mlb-root {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--mlb-ink);
  font-size: 13.5px;
  line-height: 1.5;
}
/* BOTH forms are required, and the first one is the bug fix.
   `#mlbOnboard`, `#mlbConsole` and `#mlbChip` carry `.mlb-root` THEMSELVES, so
   a descendant-only rule never matched them — and because `.mlb-scrim` sets
   `display:flex`, an AUTHOR rule out-ranks the UA's `[hidden]{display:none}`.
   Setting `el.hidden = true` therefore left the compliance overlay fully
   painted while every state flag said it was closed: the folder was linked,
   the files were written, and the screen stayed on top of them (MACE, prod).
   The JS also forces `style.display` — see `setSurface()` in the UI module —
   so this can never come back through a cascade change alone. */
.mlb-root[hidden],
.mlb-root [hidden] { display: none !important; }

.mlb-scrim {
  position: fixed; inset: 0;
  background: var(--mlb-scrim);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  animation: mlbFade .2s ease-out;
}
@keyframes mlbFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes mlbRise { from { opacity: 0; transform: translateY(14px) scale(.985) } to { opacity: 1; transform: none } }
@keyframes mlbPulse { 0%, 100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.4); opacity: .5 } }
@keyframes mlbSpin { to { transform: rotate(360deg) } }

@media (prefers-reduced-motion: reduce) {
  .mlb-scrim, .mlb-card { animation: none !important; }
  .mlb-dot.st-sync, .mlb-spin { animation: none !important; }
}

.mlb-card {
  background: var(--mlb-card);
  border: 1px solid var(--mlb-edge);
  border-radius: var(--mlb-radius);
  box-shadow: var(--mlb-shadow);
  display: flex; flex-direction: column;
  max-height: min(92vh, 860px);
  width: min(720px, 96vw);
  overflow: hidden;
  animation: mlbRise .26s cubic-bezier(.16, 1, .3, 1) both;
}

.mlb-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--mlb-edge);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--mlb-accent-soft), transparent 62%),
    var(--mlb-card-2);
  flex-shrink: 0;
}
.mlb-head-ic {
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mlb-accent-soft);
  border: 1px solid var(--mlb-accent-edge);
  color: var(--mlb-accent);
}
.mlb-head-ic svg { width: 21px; height: 21px; }
.mlb-head-txt { flex: 1; min-width: 0; }
.mlb-eyebrow {
  font-size: 9.5px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase;
  color: var(--mlb-accent);
}
.mlb-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin-top: 3px; line-height: 1.25; }
.mlb-sub { margin-top: 6px; font-size: 12.5px; color: var(--mlb-ink-2); line-height: 1.6; }
.mlb-x {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  background: var(--mlb-raise); border: 1px solid var(--mlb-edge); color: var(--mlb-ink-2);
  display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1;
  transition: background .14s, color .14s;
}
.mlb-x:hover { background: var(--mlb-raise-2); color: var(--mlb-ink); }

.mlb-body { padding: 18px 24px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.mlb-foot {
  flex-shrink: 0; padding: 14px 24px 18px;
  border-top: 1px solid var(--mlb-edge);
  background: var(--mlb-card-2);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.mlb-foot .mlb-spacer { flex: 1 1 auto; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.mlb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 17px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  border: 1px solid var(--mlb-edge-2); background: var(--mlb-raise); color: var(--mlb-ink);
  transition: background .14s, border-color .14s, transform .1s, opacity .14s;
  white-space: nowrap;
}
.mlb-btn:hover { background: var(--mlb-raise-2); }
.mlb-btn:active { transform: translateY(1px); }
.mlb-btn:focus-visible { outline: 2px solid var(--mlb-accent); outline-offset: 2px; }
.mlb-btn[disabled] { opacity: .45; cursor: not-allowed; }
.mlb-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.mlb-btn.primary {
  background: var(--mlb-accent); border-color: var(--mlb-accent); color: var(--mlb-accent-ink);
  box-shadow: 0 6px 20px rgba(56, 189, 248, .22);
}
.mlb-btn.primary:hover { filter: brightness(1.07); }
.mlb-btn.ghost { background: transparent; border-color: transparent; color: var(--mlb-ink-2); }
.mlb-btn.ghost:hover { background: var(--mlb-raise); color: var(--mlb-ink); }
.mlb-btn.danger { color: var(--mlb-err); border-color: color-mix(in srgb, var(--mlb-err) 34%, transparent); }
.mlb-btn.lg { padding: 13px 24px; font-size: 13.5px; }

/* ── status ──────────────────────────────────────────────────────────────── */
.mlb-status {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 17px; border-radius: 13px;
  border: 1px solid var(--mlb-edge); background: var(--mlb-raise);
}
.mlb-status-ic {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mlb-raise-2); color: var(--mlb-ink-2);
}
.mlb-status-ic svg { width: 18px; height: 18px; }
.mlb-status-txt { flex: 1; min-width: 0; }
.mlb-status-l { font-size: 13.5px; font-weight: 800; }
.mlb-status-s { font-size: 11.5px; color: var(--mlb-ink-2); margin-top: 2px; word-break: break-word; }

.mlb-status.st-ok    { border-color: color-mix(in srgb, var(--mlb-ok) 40%, transparent); }
.mlb-status.st-ok    .mlb-status-ic { color: var(--mlb-ok);   background: color-mix(in srgb, var(--mlb-ok) 14%, transparent); }
.mlb-status.st-watch .mlb-status-ic { color: var(--mlb-info); background: color-mix(in srgb, var(--mlb-info) 14%, transparent); }
.mlb-status.st-sync  .mlb-status-ic { color: var(--mlb-warn); background: color-mix(in srgb, var(--mlb-warn) 14%, transparent); }
.mlb-status.st-sync  .mlb-status-ic svg { animation: mlbSpin 1.05s linear infinite; }
.mlb-status.st-warn  { border-color: color-mix(in srgb, var(--mlb-warn) 42%, transparent); }
.mlb-status.st-warn  .mlb-status-ic { color: var(--mlb-warn); background: color-mix(in srgb, var(--mlb-warn) 14%, transparent); }
.mlb-status.st-err   { border-color: color-mix(in srgb, var(--mlb-err) 44%, transparent); }
.mlb-status.st-err   .mlb-status-ic { color: var(--mlb-err);  background: color-mix(in srgb, var(--mlb-err) 14%, transparent); }

/* ── notice banner ───────────────────────────────────────────────────────── */
.mlb-note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 11px;
  font-size: 12px; line-height: 1.65; color: var(--mlb-ink-2);
  border: 1px solid var(--mlb-edge); background: var(--mlb-raise);
}
.mlb-note svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }
.mlb-note b { color: var(--mlb-ink); font-weight: 700; }
.mlb-note.warn { border-color: color-mix(in srgb, var(--mlb-warn) 40%, transparent); background: color-mix(in srgb, var(--mlb-warn) 8%, transparent); }
.mlb-note.warn svg { color: var(--mlb-warn); }
.mlb-note.info svg { color: var(--mlb-info); }
.mlb-note.ok { border-color: color-mix(in srgb, var(--mlb-ok) 44%, transparent); background: color-mix(in srgb, var(--mlb-ok) 9%, transparent); }
.mlb-note.ok svg { color: var(--mlb-ok); }

/* The onboarding buttons go disabled while the picker is open and again once
   the gate has succeeded, so a second click cannot re-enter a flow that is
   already finishing. */
.mlb-btn[disabled] svg { animation: none; }
.mlb-btn.primary[disabled] { box-shadow: none; }
.mlb-btn[disabled] .mlb-spin,
.mlb-btn[disabled] svg.mlb-spin { animation: mlbSpin 1.05s linear infinite; }

/* ── folder tree preview ─────────────────────────────────────────────────── */
.mlb-tree {
  border: 1px solid var(--mlb-edge); border-radius: 12px;
  background: var(--mlb-card-2); overflow: hidden;
}
.mlb-tree-h {
  padding: 9px 14px; font-size: 9.5px; font-weight: 900; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mlb-ink-3);
  border-bottom: 1px solid var(--mlb-edge);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.mlb-tree-b {
  margin: 0; padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.85; color: var(--mlb-ink-2);
  overflow-x: auto; white-space: pre;
}
.mlb-tree-b .r { color: var(--mlb-gold); font-weight: 700; }
.mlb-tree-b .d { color: var(--mlb-accent); }
.mlb-tree-b .f { color: var(--mlb-ink-3); }

/* ── source rows (one per provider) ──────────────────────────────────────── */
.mlb-srcs { display: flex; flex-direction: column; gap: 8px; }
.mlb-src {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 11px;
  border: 1px solid var(--mlb-edge); background: var(--mlb-raise);
}
.mlb-src.off { opacity: .55; }
.mlb-src-ic {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mlb-accent-soft); color: var(--mlb-accent);
}
.mlb-src-ic svg { width: 16px; height: 16px; }
.mlb-src-t { flex: 1; min-width: 0; }
.mlb-src-l { font-size: 12.5px; font-weight: 700; }
.mlb-src-p {
  font-size: 10.5px; color: var(--mlb-ink-3); margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mlb-src-d { font-size: 11px; color: var(--mlb-ink-2); margin-top: 3px; }
.mlb-src-na { font-size: 10.5px; color: var(--mlb-ink-3); font-style: italic; }

/* ── switch ──────────────────────────────────────────────────────────────── */
.mlb-sw { position: relative; flex: 0 0 auto; width: 40px; height: 23px; cursor: pointer; }
.mlb-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.mlb-sw-tr {
  display: block; width: 40px; height: 23px; border-radius: 999px;
  background: var(--mlb-raise-2); border: 1px solid var(--mlb-edge-2);
  transition: background .16s, border-color .16s; pointer-events: none;
}
.mlb-sw-th {
  position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--mlb-ink-3); transition: transform .16s, background .16s; pointer-events: none;
}
.mlb-sw input:checked ~ .mlb-sw-tr { background: var(--mlb-accent-soft); border-color: var(--mlb-accent-edge); }
.mlb-sw input:checked ~ .mlb-sw-th { transform: translateX(17px); background: var(--mlb-accent); }
.mlb-sw input:focus-visible ~ .mlb-sw-tr { outline: 2px solid var(--mlb-accent); outline-offset: 2px; }

/* ── settings rows ───────────────────────────────────────────────────────── */
.mlb-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 11px;
  border: 1px solid var(--mlb-edge); background: var(--mlb-raise);
}
.mlb-row-t { flex: 1; min-width: 0; }
.mlb-row-l { font-size: 12.5px; font-weight: 700; }
.mlb-row-h { font-size: 11px; color: var(--mlb-ink-2); margin-top: 2px; }
.mlb-select {
  /* color-scheme is what paints the native OPTION list — without it the popup
     renders white-on-white in dark mode (memory.md · THREE WAYS UI QA LIES). */
  color-scheme: dark;
  background: var(--mlb-card-2); color: var(--mlb-ink);
  border: 1px solid var(--mlb-edge-2); border-radius: 9px;
  padding: 8px 11px; font-size: 12px; font-family: inherit; cursor: pointer; outline: none;
  max-width: 220px;
}
html[data-mode="light"] .mlb-select,
:root[data-svc-theme="light"] .mlb-select { color-scheme: light; }
.mlb-select:focus-visible { border-color: var(--mlb-accent); outline: 2px solid var(--mlb-accent); outline-offset: 1px; }

/* ── section label ───────────────────────────────────────────────────────── */
.mlb-lbl {
  font-size: 9.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mlb-ink-3); margin-bottom: -6px;
}

/* ── activity log ────────────────────────────────────────────────────────── */
.mlb-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; max-height: 190px; overflow-y: auto; }
.mlb-log-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 11px; border-radius: 8px; font-size: 11.5px;
  background: var(--mlb-raise); color: var(--mlb-ink-2);
}
.mlb-log-row svg { width: 13px; height: 13px; flex: 0 0 auto; }
.mlb-log-row.ok svg { color: var(--mlb-ok); }
.mlb-log-row.no svg { color: var(--mlb-err); }
.mlb-log-d { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlb-log-w { flex: 0 0 auto; font-size: 10.5px; color: var(--mlb-ink-3); }
.mlb-log-empty { padding: 14px; text-align: center; font-size: 11.5px; color: var(--mlb-ink-3); }

/* ── onboarding-only: value bullets ──────────────────────────────────────── */
.mlb-vals { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.mlb-val {
  padding: 13px 14px; border-radius: 12px;
  border: 1px solid var(--mlb-edge); background: var(--mlb-raise);
}
.mlb-val-ic { color: var(--mlb-accent); margin-bottom: 8px; display: block; }
.mlb-val-ic svg { width: 18px; height: 18px; }
.mlb-val-l { font-size: 12.5px; font-weight: 800; }
.mlb-val-d { font-size: 11.5px; color: var(--mlb-ink-2); margin-top: 4px; line-height: 1.55; }

.mlb-steps { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mlb-step {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; color: var(--mlb-ink-3);
}
.mlb-step .n {
  width: 19px; height: 19px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900;
  background: var(--mlb-raise-2); border: 1px solid var(--mlb-edge-2); color: var(--mlb-ink-3);
}
.mlb-step.on { color: var(--mlb-ink); }
.mlb-step.on .n { background: var(--mlb-accent); border-color: var(--mlb-accent); color: var(--mlb-accent-ink); }
.mlb-step.done .n { background: color-mix(in srgb, var(--mlb-ok) 20%, transparent); border-color: var(--mlb-ok); color: var(--mlb-ok); }
.mlb-step-sep { flex: 1 1 12px; height: 1px; background: var(--mlb-edge); min-width: 10px; }

.mlb-privacy {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--mlb-ink-3);
}
.mlb-privacy svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--mlb-ok); }

/* ═══════════════════════════ topbar status chip ═════════════════════════ */

.mlb-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: .01em;
  border: 1px solid var(--mlb-edge-2); background: var(--mlb-raise); color: var(--mlb-ink-2);
  transition: background .14s, border-color .14s, color .14s;
  white-space: nowrap; line-height: 1.4;
}
.mlb-chip:hover { background: var(--mlb-raise-2); color: var(--mlb-ink); }
.mlb-chip:focus-visible { outline: 2px solid var(--mlb-accent); outline-offset: 2px; }
.mlb-chip svg { width: 13px; height: 13px; flex: 0 0 auto; }
.mlb-chip.alert {
  color: var(--mlb-warn);
  border-color: color-mix(in srgb, var(--mlb-warn) 46%, transparent);
  background: color-mix(in srgb, var(--mlb-warn) 12%, transparent);
}
.mlb-chip.alert:hover { background: color-mix(in srgb, var(--mlb-warn) 20%, transparent); color: var(--mlb-warn); }
.mlb-chip.good { color: var(--mlb-ok); border-color: color-mix(in srgb, var(--mlb-ok) 38%, transparent); }
.mlb-chip.bad  { color: var(--mlb-err); border-color: color-mix(in srgb, var(--mlb-err) 44%, transparent); }
.mlb-chip .mlb-chip-txt { max-width: 168px; overflow: hidden; text-overflow: ellipsis; }

.mlb-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--mlb-ink-3); }
.mlb-dot.st-off   { background: var(--mlb-ink-3); }
.mlb-dot.st-watch { background: var(--mlb-info); }
.mlb-dot.st-sync  { background: var(--mlb-warn); animation: mlbPulse 1.1s ease-in-out infinite; }
.mlb-dot.st-ok    { background: var(--mlb-ok); }
.mlb-dot.st-warn  { background: var(--mlb-warn); animation: mlbPulse 1.7s ease-in-out infinite; }
.mlb-dot.st-err   { background: var(--mlb-err); animation: mlbPulse 1.7s ease-in-out infinite; }

/* ═══════════════════════════ narrow viewports ═══════════════════════════ */
/* The feature is desktop-only by contract C1, so this is for a small LAPTOP
   window, not a phone — the phone never renders any of it. */
@media (max-width: 640px) {
  .mlb-scrim { padding: 10px; }
  .mlb-card { max-height: 94vh; border-radius: 14px; }
  .mlb-head { padding: 16px 16px 13px; }
  .mlb-body { padding: 14px 16px 16px; }
  .mlb-foot { padding: 12px 16px 14px; }
  .mlb-foot .mlb-btn { flex: 1 1 auto; }
  .mlb-vals { grid-template-columns: 1fr; }
}

/* ══════════════ Settings ▸ Workspace ▸ Local Backup (mlb-3) ══════════════
   The panel lives INSIDE the Main Settings modal, so it borrows that shell's
   chrome (.ms-panel-hero / .ms-ctrl-group / .btn) and only styles what the
   shell has no equivalent for. Everything below is scoped to #msp_localbackup
   so it cannot leak into any other settings panel.

   It rides the SAME --mlb-* tokens as the console, which are already
   re-pointed under html[data-mode="light"] — so this panel follows the main
   page's Dark/Light switch with no theme-specific rules of its own.        */

#msp_localbackup .mlbs-status {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border-radius: 12px; margin-bottom: 12px;
  border: 1px solid var(--mlb-edge); background: var(--mlb-raise);
  color: var(--mlb-ink);
}
#msp_localbackup .mlbs-status-ic {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mlb-raise-2); color: var(--mlb-ink-2);
}
#msp_localbackup .mlbs-status-ic svg { width: 17px; height: 17px; }
#msp_localbackup .mlbs-status-t { flex: 1; min-width: 0; }
#msp_localbackup .mlbs-status-l { display: block; font-size: 13px; font-weight: 800; }
#msp_localbackup .mlbs-status-s { display: block; font-size: 11.5px; color: var(--mlb-ink-2); margin-top: 2px; word-break: break-word; }

#msp_localbackup .mlbs-status.st-ok    { border-color: color-mix(in srgb, var(--mlb-ok) 40%, transparent); }
#msp_localbackup .mlbs-status.st-ok    .mlbs-status-ic { color: var(--mlb-ok);   background: color-mix(in srgb, var(--mlb-ok) 14%, transparent); }
#msp_localbackup .mlbs-status.st-watch .mlbs-status-ic { color: var(--mlb-info); background: color-mix(in srgb, var(--mlb-info) 14%, transparent); }
#msp_localbackup .mlbs-status.st-sync  .mlbs-status-ic { color: var(--mlb-warn); background: color-mix(in srgb, var(--mlb-warn) 14%, transparent); }
#msp_localbackup .mlbs-status.st-sync  .mlbs-status-ic svg { animation: mlbSpin 1.05s linear infinite; }
#msp_localbackup .mlbs-status.st-warn  { border-color: color-mix(in srgb, var(--mlb-warn) 42%, transparent); }
#msp_localbackup .mlbs-status.st-warn  .mlbs-status-ic { color: var(--mlb-warn); background: color-mix(in srgb, var(--mlb-warn) 14%, transparent); }
#msp_localbackup .mlbs-status.st-err   { border-color: color-mix(in srgb, var(--mlb-err) 44%, transparent); }
#msp_localbackup .mlbs-status.st-err   .mlbs-status-ic { color: var(--mlb-err);  background: color-mix(in srgb, var(--mlb-err) 14%, transparent); }

#msp_localbackup .mlbs-note {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 13px; border-radius: 10px; margin-bottom: 10px;
  font-size: 11.5px; line-height: 1.6; color: var(--mlb-ink-2);
  border: 1px solid var(--mlb-edge); background: var(--mlb-raise);
}
#msp_localbackup .mlbs-note svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }
#msp_localbackup .mlbs-note b { color: var(--mlb-ink); font-weight: 700; }
#msp_localbackup .mlbs-note.warn { border-color: color-mix(in srgb, var(--mlb-warn) 40%, transparent); background: color-mix(in srgb, var(--mlb-warn) 8%, transparent); }
#msp_localbackup .mlbs-note.warn svg { color: var(--mlb-warn); }
#msp_localbackup .mlbs-note.err  { border-color: color-mix(in srgb, var(--mlb-err) 44%, transparent); background: color-mix(in srgb, var(--mlb-err) 8%, transparent); }
#msp_localbackup .mlbs-note.err svg { color: var(--mlb-err); }

#msp_localbackup .mlbs-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 0;
}
#msp_localbackup .mlbs-row + .mlbs-row { border-top: 1px solid var(--mlb-edge); }
#msp_localbackup .mlbs-row-t { flex: 1 1 240px; min-width: 0; }
#msp_localbackup .mlbs-row-l { font-size: 12.5px; font-weight: 700; color: var(--mlb-ink); word-break: break-word; }
#msp_localbackup .mlbs-row-h { font-size: 11px; color: var(--mlb-ink-2); margin-top: 3px; line-height: 1.55; }
#msp_localbackup .mlbs-row-h b { color: var(--mlb-ink); font-weight: 700; }
#msp_localbackup .mlbs-row-a { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#msp_localbackup .mlbs-row-a .btn { display: inline-flex; align-items: center; gap: 7px; }
#msp_localbackup .mlbs-row-a .btn svg { width: 14px; height: 14px; }

#msp_localbackup .mlbs-srcs { display: flex; flex-direction: column; gap: 8px; }
#msp_localbackup .mlbs-src {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  padding: 11px 13px; border-radius: 11px;
  border: 1px solid var(--mlb-edge); background: var(--mlb-raise);
}
#msp_localbackup .mlbs-src:hover { background: var(--mlb-raise-2); }
#msp_localbackup .mlbs-src.off { opacity: .58; }
#msp_localbackup .mlbs-src-ic {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mlb-accent-soft); color: var(--mlb-accent);
}
#msp_localbackup .mlbs-src-ic svg { width: 15px; height: 15px; }
#msp_localbackup .mlbs-src-t { flex: 1; min-width: 0; }
#msp_localbackup .mlbs-src-l { display: block; font-size: 12.5px; font-weight: 700; color: var(--mlb-ink); }
#msp_localbackup .mlbs-src-p {
  display: block; font-size: 10.5px; color: var(--mlb-ink-3); margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#msp_localbackup .mlbs-src-d { display: block; font-size: 11px; color: var(--mlb-ink-2); margin-top: 3px; }
#msp_localbackup .mlbs-src-d.dim { color: var(--mlb-ink-3); font-style: italic; }

#msp_localbackup .mlbs-cb {
  flex: 0 0 auto; width: 16px; height: 16px; cursor: pointer;
  accent-color: var(--mlb-accent);
}
#msp_localbackup .mlbs-select {
  /* color-scheme is what paints the native OPTION list — without it the popup
     renders white-on-white in dark mode (memory.md · THREE WAYS UI QA LIES). */
  color-scheme: dark;
  background: var(--mlb-card-2); color: var(--mlb-ink);
  border: 1px solid var(--mlb-edge-2); border-radius: 8px;
  padding: 7px 10px; font-size: 12px; font-family: inherit; cursor: pointer; outline: none;
  max-width: 230px;
}
html[data-mode="light"] #msp_localbackup .mlbs-select { color-scheme: light; }
#msp_localbackup .mlbs-select:focus-visible { border-color: var(--mlb-accent); outline: 2px solid var(--mlb-accent); outline-offset: 1px; }

#msp_localbackup .mlbs-actions {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mlb-edge);
}
#msp_localbackup .mlbs-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
#msp_localbackup .mlbs-actions .btn svg { width: 14px; height: 14px; }
#msp_localbackup .mlbs-spacer { flex: 1 1 auto; }
#msp_localbackup .mlbs-foot {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; color: var(--mlb-ink-3); white-space: nowrap;
}
#msp_localbackup .mlbs-foot svg { width: 13px; height: 13px; }

#msp_localbackup .mlbs-msg-ok  { color: var(--mlb-ok) !important; }
#msp_localbackup .mlbs-msg-err { color: var(--mlb-err) !important; }

@media (max-width: 720px) {
  #msp_localbackup .mlbs-row-a { width: 100%; }
  #msp_localbackup .mlbs-actions .btn { flex: 1 1 auto; justify-content: center; }
  #msp_localbackup .mlbs-foot { white-space: normal; }
}