/* Microscopy resolution & Nyquist — 37degrees. Scoped to .mr-root. Dark default + .mr-theme-light. */
.mr-root {
  --mr-navy-900: #082540; --mr-navy-950: #04141f; --mr-navy-700: #133b56; --mr-navy-400: #5d83a1;
  --mr-text: #dde4ed; --mr-muted: #8ba5bd; --mr-accent: #ff7bac; --mr-accent-2: #ec1f6a; --mr-green: #34d399; --mr-amber: #f59e0b;
  --mr-surface: rgba(4,20,31,0.55); --mr-radius: 14px; --mr-radius-sm: 10px;
  --mr-mono: "JetBrains Mono","SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  --mr-font: "Nunito Sans Variable","Nunito Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  position: relative; font-family: var(--mr-font); color: var(--mr-text);
  background: radial-gradient(70% 55% at 12% 8%, rgba(255,123,172,0.13) 0%, rgba(255,123,172,0) 60%), radial-gradient(60% 55% at 88% 95%, rgba(52,211,153,0.08) 0%, rgba(52,211,153,0) 65%), linear-gradient(180deg,var(--mr-navy-900) 0%,var(--mr-navy-950) 100%);
  border: 1px solid var(--mr-navy-700); border-radius: var(--mr-radius); padding: 24px;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
  grid-template-areas: "header header" "rail result" "footer footer"; gap: 18px;
  box-shadow: 0 10px 40px rgba(4,20,31,0.35); box-sizing: border-box; max-width: 100%;
}
.mr-root *, .mr-root *::before, .mr-root *::after { box-sizing: border-box; }
@media (max-width: 760px) { .mr-root { grid-template-columns: 1fr; grid-template-areas: "header" "rail" "result" "footer"; } }

.mr-root.mr-theme-light {
  --mr-text: #082540; --mr-muted: #5d83a1; --mr-navy-700: #dde4ed; --mr-surface: #f7f9fc;
  background: radial-gradient(70% 55% at 12% 8%, rgba(255,123,172,0.07) 0%, rgba(255,123,172,0) 60%), radial-gradient(60% 55% at 88% 95%, rgba(52,211,153,0.045) 0%, rgba(52,211,153,0) 65%), linear-gradient(180deg,#ffffff 0%,#f1f4f8 100%); border-color: #dde4ed; box-shadow: 0 6px 24px rgba(8,37,64,0.08);
}
.mr-root.mr-theme-light .mr-card, .mr-root.mr-theme-light .mr-result, .mr-root.mr-theme-light .mr-stat,
.mr-root.mr-theme-light .mr-num, .mr-root.mr-theme-light .mr-select { background: #fff; border-color: #dde4ed; color: var(--mr-text); }
.mr-root.mr-theme-light .mr-viz { background: #04141f; }

.mr-header { grid-area: header; display: flex; flex-direction: column; gap: 4px; }
.mr-eyebrow { font-size: 11px; letter-spacing: 3px; font-weight: 800; color: var(--mr-accent); }
.mr-title { font-size: 22px; font-weight: 800; line-height: 1.2; }
.mr-subtitle { font-size: 14px; color: var(--mr-muted); line-height: 1.45; }

.mr-rail { grid-area: rail; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mr-card { background: rgba(8,37,64,0.4); border: 1px solid var(--mr-navy-700); border-radius: var(--mr-radius); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.mr-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 140px; }
.mr-label { font-size: 11px; letter-spacing: 1.5px; font-weight: 800; color: var(--mr-muted); text-transform: uppercase; }
.mr-inline { display: flex; align-items: center; gap: 8px; }
.mr-row2 { gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.mr-stack { display: flex; flex-direction: column; gap: 8px; }
.mr-suffix { font-size: 12px; font-weight: 700; color: var(--mr-muted); white-space: nowrap; }

.mr-num { width: 100%; font-family: var(--mr-mono); font-size: 16px; font-weight: 800; color: var(--mr-text);
  background: var(--mr-surface); border: 1px solid var(--mr-navy-700); border-radius: var(--mr-radius-sm); padding: 9px 12px; outline: none; }
.mr-num:focus { border-color: var(--mr-accent); box-shadow: 0 0 0 3px rgba(255,123,172,0.18); }
.mr-select { width: 100%; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--mr-text);
  background: var(--mr-surface); border: 1px solid var(--mr-navy-700); border-radius: var(--mr-radius-sm); padding: 9px 30px 9px 12px; outline: none; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%238ba5bd' d='M6 8.5 1.5 4h9z'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 12px; }
.mr-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(90deg,var(--mr-accent),var(--mr-accent-2)); outline: none; cursor: pointer; }
.mr-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--mr-accent); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.mr-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--mr-accent); cursor: pointer; }
.mr-warn { font-size: 12.5px; color: var(--mr-accent-2); font-weight: 600; line-height: 1.4; }
.mr-warn[hidden] { display: none; }

.mr-result { grid-area: result; background: rgba(8,37,64,0.4); border: 1px solid var(--mr-navy-700); border-radius: var(--mr-radius); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.mr-result-title { font-size: 11px; letter-spacing: 2px; font-weight: 800; color: var(--mr-accent); text-transform: uppercase; }
.mr-big-value { font-family: var(--mr-mono); font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.mr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mr-stat { background: var(--mr-surface); border: 1px solid var(--mr-navy-700); border-radius: var(--mr-radius-sm); padding: 10px 12px; }
.mr-stat-label { font-size: 10px; letter-spacing: 1px; font-weight: 800; color: var(--mr-muted); text-transform: uppercase; }
.mr-stat-value { font-family: var(--mr-mono); font-size: 16px; font-weight: 800; color: var(--mr-text); }

.mr-verdict { font-size: 13px; font-weight: 600; line-height: 1.45; padding: 10px 12px; border-radius: var(--mr-radius-sm); background: var(--mr-surface); border: 1px solid var(--mr-navy-700); color: var(--mr-muted); }
.mr-verdict-ok { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.4); color: var(--mr-text); }
.mr-verdict-warn { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.45); color: var(--mr-text); }
.mr-verdict-bad { background: rgba(236,31,106,0.14); border-color: var(--mr-accent-2); color: #fff; }

.mr-viz { width: 100%; display: flex; justify-content: center; background: #04141f; border: 1px solid var(--mr-navy-700); border-radius: var(--mr-radius-sm); padding: 8px; }
.mr-airy { width: 240px; max-width: 80%; height: auto; }
.mr-viz-cap { font-size: 11.5px; color: var(--mr-muted); line-height: 1.4; text-align: center; }

.mr-export { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.mr-export-label { font-size: 10px; letter-spacing: 1.5px; font-weight: 800; color: var(--mr-muted); text-transform: uppercase; }
.mr-export-btn { font-family: inherit; font-size: 12px; font-weight: 700; color: var(--mr-text); background: rgba(141,165,189,0.10); border: 1px solid var(--mr-navy-700); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.mr-export-btn:hover { background: rgba(255,123,172,0.12); border-color: var(--mr-accent); color: var(--mr-accent); }
.mr-footer { grid-area: footer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--mr-muted); }
.mr-footer a { color: var(--mr-text); text-decoration: none; font-weight: 700; }
.mr-footer-brand { color: #ff7bac !important; font-weight: 700; }
.mr-footer-brand:hover { color: #ec1f6a !important; text-decoration: underline; }
.mr-footer-sep { opacity: 0.5; }
.mr-fatal { padding: 16px; border-radius: 10px; background: rgba(236,31,106,0.12); border: 1px solid #ec1f6a; color: #fff; }

/* ---- Expand / fullscreen ---- */
.mr-expand-icon { position: absolute; top: 14px; right: 14px; z-index: 50; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: rgba(255,123,172,0.10); color: #ec1f6a; border: 1px solid rgba(255,123,172,0.30); border-radius: 10px; cursor: pointer; padding: 0; font-family: inherit; transition: background .12s, transform .12s; }
.mr-expand-icon:hover { background: rgba(255,123,172,0.22); transform: scale(1.05); }
.mr-expand-icon-label { display: none; }
.mr-brand-mark { display: none; }
html.mr-html-locked, body.mr-body-locked { overflow: hidden !important; height: 100vh !important; }

.mr-root.mr-is-expanded {
  position: fixed; inset: 0; z-index: 99990; margin: 0; border: none; border-radius: 0; box-shadow: none;
  background: #ffffff; color: #082540;
  --mr-text: #082540; --mr-muted: #5d83a1; --mr-navy-700: #dde4ed; --mr-surface: #f7f9fc;
  grid-template-columns: 360px minmax(0,1fr); grid-template-areas: "brand result" "rail result" "footer footer";
  grid-template-rows: auto minmax(0,1fr) auto; gap: 0; padding: 0; height: 100vh; overflow: hidden;
}
.mr-root.mr-is-expanded .mr-header { display: none; }
.mr-root.mr-is-expanded .mr-rail { grid-area: rail; overflow-y: auto; padding: 18px; border-right: 1px solid #dde4ed; background: #f1f4f8; min-height: 0; }
.mr-root.mr-is-expanded .mr-result { grid-area: result; overflow-y: auto; min-height: 0; background: #fff; padding: 24px; }
.mr-root.mr-is-expanded .mr-card, .mr-root.mr-is-expanded .mr-stat, .mr-root.mr-is-expanded .mr-num, .mr-root.mr-is-expanded .mr-select { background: #fff; border-color: #dde4ed; color: #082540; }
.mr-root.mr-is-expanded .mr-airy { width: 320px; }
.mr-root.mr-is-expanded .mr-expand-icon { position: fixed; top: 18px; right: 22px; z-index: 99991; }
.mr-root.mr-is-expanded .mr-rail .mr-expand-icon { position: static; top: auto; right: auto; width: 100%; height: 40px; margin-bottom: 4px; gap: 8px; justify-content: center; font-weight: 800; font-size: 13px; }
.mr-root.mr-is-expanded .mr-expand-icon-label { display: inline-block; }
.mr-root.mr-is-expanded .mr-brand-mark { grid-area: brand; display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; background: #082540; font-family: var(--mr-font); font-weight: 800; font-size: 15px; line-height: 1; padding: 14px 20px; }
.mr-root.mr-is-expanded .mr-brand-mark svg { height: 28px; width: 28px; display: block; }
.mr-root.mr-is-expanded .mr-brand-mark .mr-brand-sep { color: #ff7bac; margin: 0 2px; }
.mr-root.mr-is-expanded .mr-brand-mark .mr-tool-name { color: #ff7bac; }
.mr-root.mr-is-expanded .mr-footer { grid-area: footer; background: #082540; padding: 12px 24px; justify-content: center; margin: 0; }
.mr-root.mr-is-expanded .mr-footer, .mr-root.mr-is-expanded .mr-footer span { color: #fff; }
.mr-root.mr-is-expanded .mr-footer a { color: #ff7bac; }
@media (max-width: 960px) {
  .mr-root.mr-is-expanded { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0,1fr) auto; grid-template-areas: "brand" "rail" "result" "footer"; }
  .mr-root.mr-is-expanded .mr-rail { border-right: none; border-bottom: 1px solid #e4ecf2; max-height: 45vh; }
  .mr-root.mr-is-expanded .mr-brand-mark .mr-brand-sep, .mr-root.mr-is-expanded .mr-brand-mark .mr-tool-name { display: none; }
}
@media (max-width: 640px) { .mr-root { padding: 18px; } .mr-title { font-size: 19px; } .mr-big-value { font-size: 30px; } }