/* ══ NAS sync app UI (.msync-*) — Media phase 2 ══
   Banner + 5-step wizard + folder-matcher review + management panel.
   Shares the Media page's token palette (see media.css) in both themes. */

/* ── topbar entry button ── */
.mm-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid #2a3040;
  border-radius: 8px; padding: 7px 13px; cursor: pointer; background: none; color: #9aa7b8;
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
}
.mm-btn-ghost:hover { border-color: #7a8a9b; color: #dce3ed; }
body.light-mode .mm-btn-ghost { border-color: #dde2ec; color: #4a5568; }
body.light-mode .mm-btn-ghost:hover { color: #1a2030; }
.mm-btn-ghost .material-symbols-outlined { font-size: 16px; }
.mm-btn-ico { padding: 7px 9px; }   /* icon-only ghost button (e.g. faststart) */
.mm-btn-ico .material-symbols-outlined { font-size: 18px; }
/* per-event cloud dials are meaningless without a paired sync app */
#mm-root:not(.ms-has-agent) .msync-pol-row .msync-tgl { opacity: .4; pointer-events: none; }

/* ── banner ── */
.msync-banner {
  display: flex; align-items: center; gap: 13px; padding: 12px 15px; border-radius: 12px;
  border: 1px solid #1a1f28; background: #141820; margin: 4px 0 6px;
}
body.light-mode .msync-banner { background: #fff; border-color: #e2e7f0; }
.msync-banner + .msync-banner { margin-top: 8px; }
.msync-banner > .material-symbols-outlined { font-size: 22px; flex: 0 0 auto; }
.msync-bn-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.msync-bn-tx b { font-size: 13px; font-weight: 700; }
.msync-bn-tx span { font-size: 11.5px; color: #5a6678; }
.msync-setup > .material-symbols-outlined { color: var(--accent); }
.msync-warn { border-color: rgba(224, 166, 75, .35); background: rgba(224, 166, 75, .06); }
.msync-warn > .material-symbols-outlined { color: #e0a64b; }
.msync-info > .material-symbols-outlined { color: var(--accent); }
.msync-ok > .material-symbols-outlined { color: #4ac8a4; }

/* ── shared buttons ── */
.msync-btn-acc {
  display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 8px;
  padding: 8px 15px; cursor: pointer; background: var(--accent); color: #0f1218;
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; flex: 0 0 auto;
}
.msync-btn-acc:hover { opacity: .88; }
.msync-btn-acc[disabled] { opacity: .4; cursor: not-allowed; }
.msync-btn-acc.sm, .msync-btn-ghost.sm, .msync-btn-danger.sm { padding: 5px 11px; font-size: 11px; }
.msync-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid #2a3040;
  border-radius: 8px; padding: 7px 13px; cursor: pointer; background: none; color: #9aa7b8;
  font-family: 'Barlow Condensed', sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; flex: 0 0 auto;
}
.msync-btn-ghost:hover { border-color: #7a8a9b; color: #dce3ed; }
body.light-mode .msync-btn-ghost { border-color: #dde2ec; color: #4a5568; }
.msync-btn-ghost .material-symbols-outlined, .msync-btn-acc .material-symbols-outlined { font-size: 16px; }
.msync-btn-danger {
  border: 1px solid rgba(239, 68, 68, .4); background: none; color: #ef8a8a; border-radius: 8px;
  padding: 7px 13px; cursor: pointer; font-family: 'Barlow Condensed', sans-serif;
  font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.msync-btn-danger:hover { background: rgba(239, 68, 68, .1); color: #ef4444; }

/* ── modal shell ── */
.msync-back {
  position: fixed; inset: 0; z-index: 720; background: rgba(4, 6, 10, .74);
  display: none; align-items: flex-start; justify-content: center; padding: 20px;
  /* Fallback so the footer is ALWAYS reachable: if a modal ever grows past the
     visible area (a short window, browser/webview chrome eating the viewport,
     zoom), the backdrop itself scrolls. The modal's own max-height + `margin:auto`
     keep it centred and internally scrolling in the normal case. */
  overflow-y: auto; overscroll-behavior: contain;
}
.msync-back.on { display: flex; }
.msync-modal { width: min(560px, 100%); margin: auto; display: flex; flex-direction: column;
  /* dvh tracks the *visible* viewport (mobile/webview chrome overshoots plain vh,
     which pushed the footer off the bottom); the vh line is the fallback for
     engines without dvh so the cap never simply drops. */
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  background: #141820; border: 1px solid #2a3545; border-radius: 14px; overflow: hidden; }
.msync-modal.msync-wide { width: min(720px, 100%); }
body.light-mode .msync-modal { background: #fff; border-color: #dde2ec; }
.msync-h { display: flex; align-items: center; gap: 10px; padding: 14px 17px; border-bottom: 1px solid #1f2530; flex: 0 0 auto; }
body.light-mode .msync-h { border-color: #eef1f6; }
.msync-t { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; flex: 1; }
.msync-b { padding: 16px 17px; overflow-y: auto; flex: 1 1 auto; min-height: 0;
  overscroll-behavior: contain; contain: paint; }
.msync-f { display: flex; align-items: center; gap: 10px; padding: 13px 17px; border-top: 1px solid #1f2530; flex: 0 0 auto; }
body.light-mode .msync-f { border-color: #eef1f6; }
.msync-f-sp { flex: 1; }
.msync-ico { width: 30px; height: 30px; border-radius: 8px; border: none; background: none; display: grid; place-items: center; color: #5a6678; cursor: pointer; }
.msync-ico:hover { background: #1a1f28; color: #dce3ed; }
body.light-mode .msync-ico:hover { background: #eef0f5; color: #1a2030; }
.msync-loading, .msync-empty, .msync-empty-sm { color: #5a6678; font-size: 12.5px; padding: 16px 2px; }
.msync-empty { text-align: center; padding: 34px 10px; }
.msync-empty .material-symbols-outlined { font-size: 30px; display: block; margin: 0 auto 8px; }

/* ── stepper ── */
.msync-steps { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.msync-step { display: inline-flex; align-items: center; gap: 6px; }
.msync-dot {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: #1a1f28; color: #7a8a9b; font-size: 11px; font-weight: 700; border: 1px solid #2a3040;
}
.msync-dot .material-symbols-outlined { font-size: 14px; }
body.light-mode .msync-dot { background: #eef0f5; border-color: #dde2ec; }
.msync-step.active .msync-dot { background: var(--accent); color: #0f1218; border-color: var(--accent); }
.msync-step.done .msync-dot { background: rgba(74, 200, 164, .15); color: #4ac8a4; border-color: rgba(74, 200, 164, .4); }
.msync-slabel { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #7a8a9b; }
.msync-step.active .msync-slabel { color: #dce3ed; }
body.light-mode .msync-step.active .msync-slabel { color: #1a2030; }
.msync-sarr { width: 16px; height: 1px; background: #2a3040; flex: 0 0 auto; }

/* ── wizard panes ── */
.msync-p { font-size: 13px; color: #9aa7b8; line-height: 1.5; margin: 0 0 12px; }
.msync-p b { color: #dce3ed; font-weight: 600; }
body.light-mode .msync-p b { color: #1a2030; }
.msync-hint { font-size: 11.5px; color: #5a6678; margin: 12px 0 0; }
.msync-plats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.msync-plat { background: #0f1318; border: 1px solid #1a1f28; border-radius: 11px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
body.light-mode .msync-plat { background: #f8fafd; border-color: #e2e7f0; }
.msync-plat .material-symbols-outlined { font-size: 22px; color: var(--accent); }
.msync-plat b { font-size: 12.5px; }
.msync-plat code { font-size: 11px; color: #7a8a9b; background: #141820; border: 1px solid #1a1f28; border-radius: 6px; padding: 4px 7px; word-break: break-all; }
body.light-mode .msync-plat code { background: #fff; border-color: #e2e7f0; }
.msync-plat .msync-dl { align-self: flex-start; margin-top: 2px; }
.msync-plat .msync-dl .material-symbols-outlined { font-size: 16px; color: #0f1218; }
.msync-dl-note { font-size: 10.5px; color: #7a8a9b; }
.msync-copy {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid #2a3040; border-radius: 6px; padding: 3px 9px; cursor: pointer;
  background: none; color: #9aa7b8; font-family: 'Barlow Condensed', sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.msync-plat .msync-copy .material-symbols-outlined { font-size: 14px; color: #9aa7b8; }
.msync-copy:hover { border-color: #7a8a9b; color: #dce3ed; }
.msync-plat .msync-copy:hover .material-symbols-outlined { color: #dce3ed; }
.msync-copy.ok, .msync-plat .msync-copy.ok .material-symbols-outlined { border-color: var(--accent); color: var(--accent); }
body.light-mode .msync-copy { border-color: #dde2ec; color: #4a5568; }
.msync-pairrow { display: flex; gap: 10px; align-items: center; }
.msync-code {
  flex: 1; background: #0f1318; border: 1px solid #2a3040; border-radius: 9px; color: #dce3ed;
  font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 800; letter-spacing: 6px;
  text-transform: uppercase; text-align: center; padding: 10px; outline: none;
}
.msync-code:focus { border-color: rgba(var(--accent-rgb), .5); }
body.light-mode .msync-code { background: #f0f3f8; border-color: #dde2ec; color: #1a2030; }
.msync-pair-msg, .msync-hint.err, #msync-pair-msg.err { color: #ef8a8a; }
.msync-paired, .msync-scan, .msync-status {
  display: flex; align-items: center; gap: 12px; background: #0f1318; border: 1px solid #1a1f28;
  border-radius: 11px; padding: 14px;
}
body.light-mode .msync-paired, body.light-mode .msync-scan, body.light-mode .msync-status { background: #f8fafd; border-color: #e2e7f0; }
.msync-paired .material-symbols-outlined { font-size: 26px; color: #4ac8a4; }
.msync-paired b, .msync-status b { font-size: 13px; display: block; }
.msync-paired span, .msync-status span { font-size: 11.5px; color: #5a6678; }
.msync-scan .material-symbols-outlined { font-size: 22px; color: var(--accent); }
.msync-scan .spin { animation: msync-spin 1.3s linear infinite; }
.msync-scan .spin.done { animation: none; }
@keyframes msync-spin { to { transform: rotate(360deg); } }
.msync-scan #msync-scan-tx { flex: 1; font-size: 12.5px; }

/* ── review: approval gate (review-first) ── */
.msync-gate { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px;
  background: rgba(224, 166, 75, .06); border: 1px solid rgba(224, 166, 75, .32);
  border-radius: 11px; padding: 11px 13px; }
body.light-mode .msync-gate { background: #fdf8ec; border-color: #ece0c0; }
.msync-gate > .material-symbols-outlined { font-size: 20px; color: #e0a64b; flex: 0 0 auto; }
.msync-gate-tx { flex: 1; min-width: 0; }
.msync-gate-tx b { display: block; font-size: 12.5px; font-weight: 700; }
.msync-gate-tx span { display: block; font-size: 11.5px; color: #5a6678; line-height: 1.45; margin-top: 2px; }
.msync-gate-acts { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.msync-gate-acts button { white-space: nowrap; justify-content: center; }
@media (max-width: 600px) { .msync-gate { flex-wrap: wrap; } .msync-gate-acts { flex-direction: row; width: 100%; } }

/* ── review ── */
.msync-tpl { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #7a8a9b; margin-bottom: 12px; }
.msync-tpl .material-symbols-outlined { font-size: 16px; color: var(--accent); }
.msync-tpl b { color: #dce3ed; font-weight: 600; }
body.light-mode .msync-tpl b { color: #1a2030; }
.msync-grp { margin-bottom: 12px; }
.msync-grp-h { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #7a8a9b; margin-bottom: 8px; display: flex; align-items: center; gap: 7px;
  position: sticky; top: -16px; z-index: 2; background: #141820; padding: 6px 0; margin-top: -6px; }
body.light-mode .msync-grp-h { background: #fff; }
.msync-grp-h span { background: #1a1f28; border-radius: 8px; padding: 1px 7px; font-size: 10px; }
body.light-mode .msync-grp-h span { background: #eef0f5; }
.msync-link { background: #0f1318; border: 1px solid #1a1f28; border-radius: 11px; padding: 9px 11px; margin-bottom: 6px; }
body.light-mode .msync-link { background: #f8fafd; border-color: #e2e7f0; }
.msync-link[data-status="confirmed"] { border-color: rgba(74, 200, 164, .3); }
.msync-link[data-status="skipped"] { opacity: .6; }
.msync-lk-top { display: flex; align-items: center; gap: 10px; }
.msync-lk-path { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msync-lk-path .material-symbols-outlined { font-size: 15px; color: #7a8a9b; flex: 0 0 auto; }
.msync-badge {
  flex: 0 0 auto; font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; padding: 2px 8px; border-radius: 9px;
}
.msync-badge.ok { color: #4ac8a4; background: rgba(74, 200, 164, .12); }
.msync-badge.warn { color: #e0a64b; background: rgba(224, 166, 75, .13); }
.msync-badge.none { color: #7a8a9b; background: #1a1f28; }
.msync-badge.skip { color: #5a6678; background: #1a1f28; }
body.light-mode .msync-badge.none, body.light-mode .msync-badge.skip { background: #eef0f5; }
.msync-lk-counts { display: flex; align-items: center; gap: 12px; margin: 5px 0; color: #5a6678; font-size: 11px; }
.msync-lk-counts span { display: inline-flex; align-items: center; gap: 4px; }
.msync-lk-counts .material-symbols-outlined { font-size: 14px; }
.msync-why { cursor: help; }
.msync-lk-map { display: grid; grid-template-columns: 1.6fr 1fr 1fr .8fr; gap: 7px; }
.msync-sel { width: 100%; background: #141820; border: 1px solid #2a3040; border-radius: 8px; color: #dce3ed; font: inherit; font-size: 11.5px; padding: 6px 8px; }
body.light-mode .msync-sel { background: #fff; border-color: #dde2ec; color: #1a2030; }
.msync-lk-act { display: flex; gap: 7px; margin-top: 7px; }

/* ── management panel ── */
.msync-status .msync-stat-n { margin-left: auto; font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 800; text-align: center; color: #dce3ed; }
.msync-status .msync-stat-n small { display: block; font-family: 'Barlow', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #7a8a9b; }
.msync-status > .material-symbols-outlined { font-size: 24px; color: var(--accent); flex: 0 0 auto; }
.msync-panel-acts { display: flex; gap: 9px; margin: 14px 0; }
.msync-sech { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #7a8a9b; margin: 6px 0 8px; }
.msync-policy, #msync-policy-host { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.msync-pol-row { display: flex; align-items: center; gap: 10px; background: #0f1318; border: 1px solid #1a1f28; border-radius: 9px; padding: 9px 12px; }
body.light-mode .msync-pol-row { background: #f8fafd; border-color: #e2e7f0; }
.msync-pol-n { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msync-pol-n small { display: block; font-size: 10.5px; color: #5a6678; font-weight: 400; }
.msync-tgl { position: relative; width: 34px; height: 19px; border-radius: 10px; background: #2a3040; border: none; cursor: pointer; flex: 0 0 auto; transition: background .15s; }
.msync-tgl::after { content: ""; position: absolute; top: 2.5px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #7a8a9b; transition: left .15s, background .15s; }
.msync-tgl.on { background: var(--accent); }
.msync-tgl.on::after { left: 17px; background: #0f1218; }

.msync-provrow { display: flex; align-items: center; gap: 12px; background: #0f1318; border: 1px solid #1a1f28; border-radius: 9px; padding: 11px 12px; margin-top: 4px; }
body.light-mode .msync-provrow { background: #f8fafd; border-color: #e2e7f0; }
.msync-provrow > div { flex: 1; min-width: 0; }
.msync-provrow b { display: block; font-size: 12.5px; font-weight: 600; }
.msync-provrow small { display: block; font-size: 11px; color: #5a6678; line-height: 1.4; margin-top: 2px; }

/* ── transfer settings (window + bandwidth cap) ── */
.msync-setrow { display: flex; align-items: center; gap: 12px; background: #0f1318; border: 1px solid #1a1f28; border-radius: 9px; padding: 11px 12px; margin-bottom: 6px; }
body.light-mode .msync-setrow { background: #f8fafd; border-color: #e2e7f0; }
.msync-set-lb { flex: 1; min-width: 0; }
.msync-set-lb b { display: block; font-size: 12.5px; font-weight: 600; }
.msync-set-lb small { display: block; font-size: 11px; color: #5a6678; line-height: 1.4; margin-top: 2px; }
.msync-setctl { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.msync-time, .msync-num { background: #141820; border: 1px solid #2a3040; border-radius: 8px; color: #dce3ed; font: inherit; font-size: 12px; padding: 6px 8px; }
body.light-mode .msync-time, body.light-mode .msync-num { background: #fff; border-color: #dde2ec; color: #1a2030; }
.msync-time:disabled { opacity: .45; }
.msync-num { width: 66px; text-align: right; }
.msync-dash, .msync-unit { color: #7a8a9b; font-size: 11.5px; }

/* ── live sync activity ── */
.msync-actchips { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 7px; }
.msync-actchip { display: flex; align-items: center; gap: 8px; background: #0f1318; border: 1px solid #1a1f28; border-radius: 9px; padding: 9px 11px; }
body.light-mode .msync-actchip { background: #f8fafd; border-color: #e2e7f0; }
.msync-actchip .material-symbols-outlined { font-size: 18px; color: var(--accent); flex: 0 0 auto; }
.msync-actchip b { font-size: 12px; text-transform: capitalize; }
.msync-actchip span { font-size: 10.5px; color: #5a6678; }
.msync-errs { margin-top: 10px; }
.msync-errrow { display: flex; align-items: center; gap: 9px; background: #1c1414; border: 1px solid #3a2323; border-radius: 9px; padding: 9px 11px; margin-top: 6px; }
body.light-mode .msync-errrow { background: #fdf3f3; border-color: #f0d8d8; }
.msync-errrow > .material-symbols-outlined { font-size: 18px; color: #e0574b; flex: 0 0 auto; }
.msync-err-tx { flex: 1; min-width: 0; }
.msync-err-tx b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msync-err-tx small { display: block; font-size: 10.5px; color: #a06868; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "no longer on the NAS" — cancelled, not an error; a calmer amber, not alarm-red */
.msync-miss { margin-top: 14px; }
.msync-miss-note { font-size: 11px; color: #7a8a9b; line-height: 1.45; margin: -2px 0 8px; }
.msync-missrow { display: flex; align-items: center; gap: 9px; background: #191510; border: 1px solid #34291a;
  border-radius: 9px; padding: 9px 11px; margin-top: 6px; }
body.light-mode .msync-missrow { background: #fdfaf3; border-color: #efe4cf; }
.msync-missrow > .material-symbols-outlined { font-size: 18px; color: #e0a64b; flex: 0 0 auto; }
.msync-miss-tx { flex: 1; min-width: 0; }
.msync-miss-tx b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msync-miss-tx small { display: block; font-size: 10.5px; color: #8a7a5a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msync-miss-more { font-size: 11px; color: #7a8a9b; text-align: center; padding: 8px 0 2px; }
#msync-prune { margin-top: 10px; }
#msync-prune .material-symbols-outlined { font-size: 15px; margin-right: 4px; vertical-align: -2px; }
.msync-loading-sm, .msync-empty-sm { font-size: 12px; color: #7a8a9b; padding: 8px 2px; }
.msync-lan-on { color: var(--accent); font-weight: 700; }
.msync-subhint { font-size: 11.5px; color: #5a6678; margin: -2px 0 8px; }
.msync-panel-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }

/* ── docker roll-forward nudge ── */
.msync-update { display: flex; align-items: flex-start; gap: 11px; background: #12180f; border: 1px solid #2c3a1f; border-radius: 10px; padding: 11px 12px; margin: 2px 0 10px; }
body.light-mode .msync-update { background: #f4faed; border-color: #d8e8c4; }
.msync-update > .material-symbols-outlined { font-size: 20px; color: var(--accent); flex: 0 0 auto; }
.msync-update-tx { flex: 1; min-width: 0; }
.msync-update-tx b { display: block; font-size: 12.5px; }
.msync-update-tx span { display: block; font-size: 11px; color: #5a6678; margin: 2px 0 6px; }
.msync-update-tx code { display: block; font-size: 10.5px; background: #0d1117; border: 1px solid #222; border-radius: 6px; padding: 5px 7px; overflow-x: auto; white-space: nowrap; color: #b8c4d0; }
body.light-mode .msync-update-tx code { background: #fff; border-color: #dde2ec; color: #35507a; }

/* ── editable sync folders ── */
.msync-roots { display: flex; flex-direction: column; gap: 6px; }
.msync-root-row { display: flex; align-items: center; gap: 9px; background: #0f1318; border: 1px solid #1a1f28; border-radius: 9px; padding: 8px 10px; }
body.light-mode .msync-root-row { background: #f8fafd; border-color: #e2e7f0; }
.msync-root-row .material-symbols-outlined { font-size: 17px; color: #7a8a9b; flex: 0 0 auto; }
.msync-root-row code { flex: 1; min-width: 0; font-size: 11.5px; color: #c4d0dc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.light-mode .msync-root-row code { color: #35507a; }
.msync-ico.sm { width: 26px; height: 26px; }
.msync-ico.sm .material-symbols-outlined { font-size: 15px; }
.msync-root-add { display: flex; gap: 7px; align-items: center; margin-top: 2px; }
.msync-root-add select { flex: 1; min-width: 0; }

/* ── cloud-sync tree (Year → Championship → event) ── */
#msync-cloud-tree { display: flex; flex-direction: column; gap: 7px; }
.msync-cy { background: #0f1318; border: 1px solid #1a1f28; border-radius: 10px; overflow: hidden; }
body.light-mode .msync-cy { background: #f8fafd; border-color: #e2e7f0; }
.msync-cy-h { display: flex; align-items: center; gap: 9px; padding: 10px 12px; }
.msync-cy-h > b { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; letter-spacing: .5px; }
.msync-cy-h > small, .msync-cc-h > small { font-size: 10.5px; color: #5a6678; }
.msync-cy-exp { background: none; border: none; cursor: pointer; color: #7a8a9b; padding: 0; display: flex; }
.msync-cy-exp .material-symbols-outlined { font-size: 20px; transition: transform .15s; }
.msync-cy:not(.open) .msync-cy-exp .material-symbols-outlined { transform: rotate(-90deg); }
.msync-cy-body { display: none; padding: 0 12px 10px 12px; flex-direction: column; gap: 7px; }
.msync-cy.open .msync-cy-body { display: flex; }
.msync-cc { background: #0b0e13; border: 1px solid #191e27; border-radius: 8px; }
body.light-mode .msync-cc { background: #fff; border-color: #eaeef5; }
.msync-cc-h { display: flex; align-items: center; gap: 9px; padding: 8px 11px; padding-left: 9px; }
.msync-cc-h > b { font-size: 12.5px; font-weight: 600; }
.msync-ce { display: flex; align-items: center; gap: 9px; padding: 7px 11px; border-top: 1px solid #141922; }
body.light-mode .msync-ce { border-top-color: #eef1f6; }
.msync-ce-n { flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msync-ce-n small { display: block; font-size: 10px; color: #5a6678; }
/* tri-state toggle: on = accent, off = grey, mixed = half */
.msync-tri { position: relative; width: 34px; height: 19px; border-radius: 10px; background: #2a3040; border: none; cursor: pointer; flex: 0 0 auto; transition: background .15s; }
.msync-tri::after { content: ""; position: absolute; top: 2.5px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #7a8a9b; transition: left .15s, background .15s; }
.msync-tri.on { background: var(--accent); }
.msync-tri.on::after { left: 17px; background: #0f1218; }
.msync-tri.mixed { background: linear-gradient(90deg, var(--accent) 50%, #2a3040 50%); }
.msync-tri.mixed::after { left: 10px; background: #dce3ed; }

/* ── discrepancy list (unsync / migration guard) ── */
.msync-disc { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; max-height: 260px; overflow-y: auto; }
.msync-grp-h { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #7a8a9b; display: flex; gap: 7px; align-items: center; }
.msync-grp-h span { background: #2a1414; color: #e0574b; border-radius: 8px; padding: 0 7px; font-size: 10px; }
.msync-disc-row { display: flex; align-items: flex-start; gap: 9px; background: #1c1414; border: 1px solid #3a2323; border-radius: 8px; padding: 8px 10px; }
body.light-mode .msync-disc-row { background: #fdf3f3; border-color: #f0d8d8; }
.msync-disc-row > .material-symbols-outlined { font-size: 17px; color: #e0574b; flex: 0 0 auto; }
.msync-disc-tx { flex: 1; min-width: 0; }
.msync-disc-tx b { display: block; font-size: 12px; }
.msync-disc-tx small { display: block; font-size: 10.5px; color: #a06868; }

/* ── nested dialog ── */
.msync-dlg { z-index: 10050; }
.msync-dlg-modal { max-width: 460px; }

/* ── migration wizard ── */
.msync-mig-step { display: flex; gap: 11px; align-items: flex-start; background: #0f1318; border: 1px solid #1a1f28; border-radius: 10px; padding: 12px; margin-bottom: 9px; }
body.light-mode .msync-mig-step { background: #f8fafd; border-color: #e2e7f0; }
.msync-mig-step.warn { background: #1a1710; border-color: #3a3220; }
body.light-mode .msync-mig-step.warn { background: #fdf8ec; border-color: #ece0c0; }
.msync-mig-step > .material-symbols-outlined { font-size: 20px; color: var(--accent); flex: 0 0 auto; }
.msync-mig-step.warn > .material-symbols-outlined { color: #d9a441; }
.msync-mig-step > div { flex: 1; min-width: 0; }
.msync-mig-step b { font-size: 12.5px; }
.msync-mig-step code { display: block; font-size: 10.5px; background: #0d1117; border: 1px solid #222; border-radius: 6px; padding: 6px 8px; margin: 6px 0; overflow-x: auto; white-space: nowrap; color: #b8c4d0; }
body.light-mode .msync-mig-step code { background: #fff; border-color: #dde2ec; color: #35507a; }
.msync-mig-n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #0f1218; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.msync-mig-heads { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.msync-mig-head { flex: 1; background: #0f1318; border: 1px solid #1a1f28; border-radius: 9px; padding: 9px 12px; }
body.light-mode .msync-mig-head { background: #f8fafd; border-color: #e2e7f0; }
.msync-mig-head small { display: block; font-size: 10px; color: #5a6678; text-transform: uppercase; letter-spacing: .5px; }
.msync-mig-head b { font-size: 13px; }
.msync-mig-heads > .material-symbols-outlined { color: #7a8a9b; }
.msync-mig-cov { margin: 6px 0 12px; }
.msync-mig-cov-h { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.msync-mig-cov-h span { color: #5a6678; font-size: 11px; }
.msync-bar { height: 8px; background: #1a1f28; border-radius: 5px; overflow: hidden; }
body.light-mode .msync-bar { background: #e2e7f0; }
.msync-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 5px; transition: width .3s; }
.msync-mig-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.msync-btn-acc.ghost-disabled { opacity: .4; }

@media (max-width: 600px) {
  .msync-lk-map { grid-template-columns: 1fr 1fr; }
  .msync-plats { grid-template-columns: 1fr; }
  .msync-steps .msync-slabel { display: none; }
  .msync-steps .msync-step.active .msync-slabel { display: inline; }
}

/* ── live sync activity view (openActivity) ── */
.msync-banner.msync-err { border-color: rgba(224, 87, 75, .4); background: rgba(224, 87, 75, .07); }
.msync-banner.msync-err > .material-symbols-outlined { color: #e0574b; }
body.light-mode .msync-banner.msync-err { background: #fdf3f3; border-color: #f0d8d8; }

.msync-av-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.msync-av-pill { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; padding: 5px 11px; border-radius: 20px;
  background: #1a1f28; color: #9aa7b8; }
.msync-av-pill .material-symbols-outlined { font-size: 16px; }
body.light-mode .msync-av-pill { background: #eef0f5; }
.msync-av-pill.ok { color: var(--accent); background: rgba(var(--accent-rgb), .13); }
.msync-av-pill.warn { color: #e0a64b; background: rgba(224, 166, 75, .14); }
.msync-av-pill.bad { color: #e0574b; background: rgba(224, 87, 75, .14); }
.msync-av-agent { min-width: 0; }
.msync-av-agent b { display: block; font-size: 13px; font-weight: 600; }
.msync-av-agent small { display: block; font-size: 11px; color: #5a6678; }
.msync-av-reason { display: flex; align-items: flex-start; gap: 9px; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 14px; font-size: 12px; line-height: 1.45; }
.msync-av-reason .material-symbols-outlined { font-size: 18px; flex: 0 0 auto; }
.msync-av-reason.warn { background: rgba(224, 166, 75, .08); border: 1px solid rgba(224, 166, 75, .3); color: #d9b877; }
.msync-av-reason.warn .material-symbols-outlined { color: #e0a64b; }
.msync-av-reason.bad { background: rgba(224, 87, 75, .08); border: 1px solid rgba(224, 87, 75, .32); color: #d99b93; }
.msync-av-reason.bad .material-symbols-outlined { color: #e0574b; }
body.light-mode .msync-av-reason.warn { background: #fdf8ec; color: #8a6a2a; }
body.light-mode .msync-av-reason.bad { background: #fdf3f3; color: #a04236; }

.msync-av-prog { margin-bottom: 16px; }
.msync-av-prog-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.msync-av-prog-h b { font-size: 13px; font-weight: 600; }
.msync-av-prog-h span { font-size: 11px; color: #5a6678; text-align: right; }
.msync-av-prog .msync-bar { height: 9px; }
.msync-av-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.msync-av-stat { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; padding: 3px 9px; border-radius: 8px;
  background: #1a1f28; color: #9aa7b8; }
body.light-mode .msync-av-stat { background: #eef0f5; color: #4a5568; }
.msync-av-stat.go { color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.msync-av-stat.bad { color: #e0574b; background: rgba(224, 87, 75, .12); }
.msync-av-stat.warn { color: #e0a64b; background: rgba(224, 166, 75, .12); }
.msync-av-rate { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  color: var(--accent); margin-left: auto; }
.msync-av-rate .material-symbols-outlined { font-size: 15px; }

/* live heartbeat line — proves the sync app is checking in even when idle */
.msync-av-live { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #7a8a9b;
  margin-bottom: 7px; font-weight: 600; }
.msync-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5); animation: msync-pulse 1.8s ease-out infinite; }
@keyframes msync-pulse { 70% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } }
.msync-spin { animation: msync-spin 1.1s linear infinite; }

.msync-av-now { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.msync-av-row { position: relative; overflow: hidden; display: flex; align-items: center; gap: 11px;
  background: #0f1318; border: 1px solid #1a1f28; border-radius: 10px; padding: 10px 12px; }
body.light-mode .msync-av-row { background: #f8fafd; border-color: #e2e7f0; }
.msync-av-dir { font-size: 19px; color: var(--accent); flex: 0 0 auto; }
.msync-av-rx { flex: 1; min-width: 0; }
.msync-av-rx b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msync-av-rx small { display: block; font-size: 10.5px; color: #5a6678; text-transform: capitalize; }
.msync-av-shine { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #1a1f28; overflow: hidden; }
.msync-av-shine::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: msync-shine 1.15s linear infinite; }
@keyframes msync-shine { from { left: -40%; } to { left: 100%; } }
/* real determinate progress (parts done/total reported by the sync app) */
.msync-av-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #1a1f28; overflow: hidden; }
.msync-av-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 0 2px 2px 0;
  transition: width .4s ease; }
body.light-mode .msync-av-bar { background: #e2e7f0; }
.msync-av-idle { display: flex; align-items: center; gap: 9px; color: #5a6678; font-size: 12px;
  background: #0f1318; border: 1px dashed #222a34; border-radius: 10px; padding: 12px 13px; }
body.light-mode .msync-av-idle { background: #f8fafd; border-color: #dde2ec; }
.msync-av-idle .material-symbols-outlined { font-size: 18px; color: #7a8a9b; flex: 0 0 auto; }

#msync-av-pause.on { border-color: rgba(224, 166, 75, .5); color: #e0a64b; }
#msync-av-pause.on .material-symbols-outlined { color: #e0a64b; }
#msync-av-prune .t { display: inline; }