/* AI for FM booth. Fixed 1440 x 900 stage, scaled to fit, letterboxed. Tokens from the Sodexo Spark booth design system. */
@font-face { font-family: "Open Sans"; font-weight: 300; font-style: normal; font-display: block; src: url("assets/fonts/open-sans-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; font-display: block; src: url("assets/fonts/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 600; font-style: normal; font-display: block; src: url("assets/fonts/open-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 700; font-style: normal; font-display: block; src: url("assets/fonts/open-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 800; font-style: normal; font-display: block; src: url("assets/fonts/open-sans-latin-800-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  /* tap targets: 60 logical px = 49 px on an iPad at stage scale 0.82 */
  --surface: #ffffff;
  --surface-lavender: #ebf0f9;
  --surface-illustration: #e6e8f4;
  --ink: #2a295c;
  --ink-title: #002060;
  --ink-accent: #283897;
  --ink-muted: #5c5b7e;
  --red: #ee3124;
  --red-text: #c8261b;
  --line: #d9dcec;
  --placeholder: #c9cbd8;
  --letterbox: #14133a;
  --media-dark: #1b1a3d;
  --iq: #8ccdec; --iq-stroke: #199cda; --iq-text: #0071a8; --iq-tint: #f3f9fc;
  --os: #b28b4e; --os-text: #90713f; --os-tint: #f7f3ed;
  --xp: #7fd6a2; --xp-stroke: #34a866; --xp-text: #218085; --xp-tint: #f1faf5;
  --status-live: #1e7a4c; --status-live-soft: #e2f3e9;
  --status-building: #283897; --status-building-soft: #e7eaf7;
  --status-poc: #0071a8; --status-poc-soft: #e1f1f9;
  --status-planned: #2a295c;
  --status-discovery: #8a6a00; --status-discovery-soft: #fef3df;
  --status-vision: #5c5b7e;
  --shadow-chip: 0 1px 4px rgba(42, 41, 92, 0.10);
  --shadow-device: 0 12px 32px rgba(42, 41, 92, 0.16);
  --font: "Open Sans", "Segoe UI", Arial, sans-serif;
  --focus: #283897;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; width: 100%;
  overflow: hidden; overscroll-behavior: none;
  background: var(--letterbox); color: var(--ink);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
#viewport { position: fixed; inset: 0; overflow: hidden; }
#stage {
  position: absolute; left: 0; top: 0;
  width: 1440px; height: 900px; overflow: hidden;
  transform-origin: 0 0;
  background: var(--surface-illustration);
  font-family: var(--font); color: var(--ink);
}
body.hide-cursor, body.hide-cursor * { cursor: none !important; }

button, a.btn { font-family: inherit; color: inherit; cursor: pointer; }
button { -webkit-appearance: none; appearance: none; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- shared: badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 8px; border: 1.5px solid transparent; font-size: 14px; line-height: 18px; font-weight: 700; white-space: nowrap; }
.st-live { background: var(--status-live-soft); color: var(--status-live); }
.st-building { background: var(--status-building-soft); color: var(--status-building); }
.st-poc_passed { background: var(--status-poc); color: #fff; }
.st-poc { background: var(--status-poc-soft); color: var(--status-poc); }
.st-planned { background: var(--surface); color: var(--status-planned); border-color: var(--status-planned); }
.st-discovery { background: var(--status-discovery-soft); color: var(--status-discovery); }
.st-vision { background: var(--surface); color: var(--status-vision); border: 1.5px dashed var(--status-vision); }
.st-unknown { background: var(--surface); color: var(--ink); border-color: var(--line); }

.lane { color: var(--ink); }
.lane-xp { background: var(--xp-tint); border-color: var(--xp-stroke); }
.lane-os { background: var(--os-tint); border-color: var(--os); }
.lane-iq { background: var(--iq-tint); border-color: var(--iq-stroke); }
.lane-other { background: var(--surface-lavender); border-color: var(--ink); }
.lane img { width: 22px; height: 22px; margin-left: -4px; }

.kicker { font-size: 15px; line-height: 18px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--ink); }
.label { font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); }

/* ---------- avatars ---------- */
.avatar { position: relative; flex-shrink: 0; border-radius: 999px; background: var(--placeholder); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--ink); overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar img.missing { display: none; }

/* ---------- background building ---------- */
.bg-building { position: absolute; left: 200px; top: 66px; width: 1150px; height: auto; opacity: 0.22; filter: blur(2px); pointer-events: none; }

/* ---------- welcome ---------- */
.welcome-building { position: absolute; left: 330px; top: 26px; width: 1090px; height: 795px; pointer-events: none; }
.welcome-intro { position: absolute; left: 48px; top: 48px; width: 540px; display: flex; flex-direction: column; gap: 12px; z-index: 2; }
.welcome-intro h1 { margin: 0; font-size: 48px; line-height: 54px; font-weight: 800; color: var(--ink-title); text-wrap: balance; }
.welcome-intro p { margin: 0; max-width: 440px; font-size: 21px; line-height: 30px; font-weight: 400; color: var(--ink); }
.filters { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: nowrap; }
.filters .sep { width: 1px; height: 30px; background: #9a9cb8; margin: 0 2px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 60px; padding: 0 14px; border-radius: 10px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); font-size: 16px; font-weight: 700; white-space: nowrap; }
.chip img { width: 26px; height: 26px; }
.chip.lane-xp { border-color: var(--xp-stroke); background: var(--xp-tint); }
.chip.lane-os { border-color: var(--os); background: var(--os-tint); }
.chip.lane-iq { border-color: var(--iq-stroke); background: var(--iq-tint); }
.chip.thread { border-radius: 999px; }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: var(--shadow-device); }

.pins { position: absolute; inset: 0; pointer-events: none; }
.pin-line { stroke: var(--ink); stroke-width: 2; }
.pin-dot { fill: var(--ink); stroke: #fff; stroke-width: 3; }
.pin { position: absolute; display: flex; align-items: center; gap: 12px; padding: 0; border: none; background: none; text-align: left; pointer-events: auto; transition: opacity .25s ease, transform .25s ease; }
.pin.left { flex-direction: row-reverse; text-align: right; }
.pin .avatar { width: 68px; height: 68px; border: 4px solid var(--ink); font-size: 22px; box-shadow: var(--shadow-chip); }
.pin .tag { display: flex; flex-direction: column; padding: 6px 12px; border-radius: 12px; background: rgba(255,255,255,0.94); box-shadow: var(--shadow-chip); }
.pin .tag b { font-size: 19px; line-height: 24px; font-weight: 800; }
.pin .tag span { font-size: 16px; line-height: 21px; }
.pin-g.dim { opacity: 0.25; }
.pin.dim .avatar { filter: grayscale(1); border-color: #a3a5bd !important; background: #e3e4ee; color: var(--ink-muted); box-shadow: none; }
.pin.dim .avatar img { opacity: 0.45; }
.pin.dim .tag { background: rgba(255,255,255,0.86); box-shadow: none; }
.pin.dim .tag b, .pin.dim .tag span { color: var(--ink-muted); }
.pin.hit { transform: scale(1.06); }
.pin.hit .avatar { box-shadow: 0 0 0 6px rgba(40, 56, 151, 0.22), var(--shadow-device); }
.pin-g { transition: opacity .25s ease; }

.ring-xp { border-color: var(--xp-stroke) !important; }
.ring-os { border-color: var(--os) !important; }
.ring-iq { border-color: var(--iq-stroke) !important; }
.ring-other { border-color: var(--ink) !important; }

.welcome-actions { position: absolute; right: 36px; bottom: 100px; display: flex; gap: 14px; z-index: 3; }
.pill { display: inline-flex; align-items: center; gap: 10px; height: 60px; padding: 0 24px; border-radius: 999px; font-size: 19px; font-weight: 700; border: 2px solid var(--ink); }
.pill.primary { background: var(--ink); color: #fff; box-shadow: var(--shadow-device); }
.pill.secondary { background: var(--surface); color: var(--ink); }
.pill svg { width: 24px; height: 24px; }

.footer { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; display: flex; align-items: center; gap: 12px; padding: 0 36px; background: var(--surface); border-top: 1px solid var(--line); z-index: 3; }
.footer .logo { height: 32px; width: auto; }
.footer .grow { flex: 1; }
.footer .label { margin-right: 4px; }

/* ---------- top bar ---------- */
.topbar { position: absolute; left: 40px; right: 40px; top: 20px; height: 66px; display: flex; align-items: center; gap: 16px; z-index: 5; }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 60px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); font-size: 18px; font-weight: 700; }
.persona-chip { display: flex; align-items: center; gap: 12px; padding: 6px 20px 6px 6px; border-radius: 999px; background: var(--surface); border: 2px solid var(--ink); }
.persona-chip .avatar { width: 46px; height: 46px; font-size: 18px; }
.persona-chip b { font-size: 19px; font-weight: 800; }
.persona-chip span.role { font-size: 17px; }
.topbar .grow { flex: 1; }
.filter-flag { display: inline-flex; align-items: center; gap: 10px; min-height: 64px; padding: 2px 2px 2px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 16px; }
.filter-flag button { min-height: 60px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--ink); background: var(--surface); font-size: 15px; font-weight: 700; }

/* ---------- moment strip ---------- */
.strip { position: absolute; left: 40px; top: 104px; width: 470px; height: 764px; display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; }
.strip .rail { position: absolute; left: 18px; top: 40px; bottom: 40px; width: 2px; background: var(--ink); }
.step { position: relative; display: flex; align-items: center; gap: 12px; transition: opacity .2s ease; }
.step .num { flex-shrink: 0; width: 38px; height: 38px; border-radius: 999px; background: var(--surface); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; z-index: 1; }
.step.active .num { background: var(--ink); color: #fff; }
.step button.card { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 13px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; }
.step.active button.card { border: 3px solid var(--ink); padding: 11px 14px; box-shadow: var(--shadow-device); }
.card .t { font-size: 19px; line-height: 24px; font-weight: 800; }
.card .d { font-size: 16px; line-height: 22px; }
.card .b { display: flex; gap: 6px; flex-wrap: wrap; }
.step.dim:not(.active) .num { border-color: var(--ink-muted); color: var(--ink-muted); }
.step.dim button.card { background: var(--surface-lavender); border-style: dashed; color: var(--ink-muted); box-shadow: none; }

/* ---------- panel ---------- */
.panel { position: absolute; left: 534px; top: 104px; width: 866px; max-height: 764px; padding: 28px; display: flex; flex-direction: column; gap: 16px; background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-device); }
.panel.full { height: 764px; }
.panel .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.panel h2 { margin: 0; font-size: 36px; line-height: 42px; font-weight: 800; color: var(--ink-title); text-wrap: balance; }
.panel .detail { margin: 0; font-size: 24px; line-height: 34px; font-weight: 300; max-width: 760px; }
.ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; flex-shrink: 0; }
.ba > div { padding: 14px 18px; border-radius: 12px; display: flex; flex-direction: column; gap: 4px; }
.ba .before { background: var(--surface-lavender); }
.ba .after.lane-xp { background: var(--xp-tint); }
.ba .after.lane-os { background: var(--os-tint); }
.ba .after.lane-iq { background: var(--iq-tint); }
.ba .after.lane-other { background: var(--surface-lavender); }
.ba p { margin: 0; font-size: 19px; line-height: 26px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; flex-shrink: 0; }
.facts > div { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.facts p { margin: 0; font-size: 16px; line-height: 22px; }
.pending { color: var(--ink-muted); font-style: italic; }

/* ---------- media slot ---------- */
.media { position: relative; flex: 1 1 auto; min-height: 220px; border-radius: 16px; background: var(--placeholder); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.media.fixed { flex: 0 0 auto; height: 470px; }
.media.ready { background: var(--media-dark); }
.media.lane-xp { box-shadow: inset 0 0 0 2px var(--xp-stroke); }
.media.lane-os { box-shadow: inset 0 0 0 2px var(--os); }
.media.lane-iq { box-shadow: inset 0 0 0 2px var(--iq-stroke); }
.media .frame { position: relative; height: 100%; max-width: 100%; aspect-ratio: 16 / 9; }
.media video, .media img.asset, .media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: transparent; }
.media video.hidden, .media img.asset.hidden { visibility: hidden; }
.ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 64px 24px 56px; text-align: center; color: var(--ink); }
.ph .icon { width: 48px; height: 48px; border-radius: 999px; background: rgba(255,255,255,0.65); display: flex; align-items: center; justify-content: center; }
.ph .file { white-space: nowrap; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; background: rgba(255,255,255,0.75); padding: 4px 10px; border-radius: 6px; user-select: text; -webkit-user-select: text; }
.ph .lbl { font-size: 17px; line-height: 23px; max-width: 520px; }
.ph .miss { font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); }
.media.ready .ph { display: none; }
.media .when-ready { display: none; }
.media.ready .when-ready { display: inline-block; }
.tl { position: absolute; left: 14px; top: 14px; display: flex; gap: 8px; z-index: 3; }
.tl span { padding: 4px 10px; border-radius: 6px; background: var(--surface); font-size: 14px; font-weight: 700; color: var(--ink); }
.tr { position: absolute; right: 14px; top: 14px; display: flex; gap: 8px; z-index: 3; }
.tr button, .tr a { min-height: 60px; min-width: 60px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.tr button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.bl { position: absolute; left: 14px; bottom: 14px; right: 110px; z-index: 3; }
.bl span { display: inline-block; padding: 4px 10px; border-radius: 6px; background: rgba(255,255,255,0.92); font-size: 15px; font-weight: 600; color: var(--ink); }
.playbtn { position: absolute; z-index: 4; width: 92px; height: 92px; border-radius: 999px; border: none; background: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-device); }
.playbtn svg { width: 36px; height: 36px; }
.playbtn[hidden] { display: none; }

/* ---------- soda / close ---------- */
.sheet { position: absolute; left: 120px; right: 120px; top: 104px; bottom: 32px; padding: 32px; display: flex; flex-direction: column; gap: 16px; background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-device); }
.sheet h2 { margin: 0; font-size: 48px; line-height: 54px; font-weight: 800; color: var(--ink-title); }
.sheet .body { margin: 0; font-size: 24px; line-height: 34px; font-weight: 300; max-width: 980px; }
.tagrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tag-neutral { background: var(--surface-lavender); color: var(--ink); }

/* close screen: AI for FM program on one page (master deck slide 2) */
.program { position: absolute; left: 16px; right: 16px; top: 12px; bottom: 12px; padding: 14px 20px 16px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-device); }
.phead { display: flex; align-items: center; gap: 22px; }
.phead .back { flex-shrink: 0; }
.ptitle { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ptitle h2 { margin: 0; font-size: 32px; line-height: 38px; font-weight: 800; color: var(--ink-title); }
.psub { margin: 0; font-size: 16px; line-height: 21px; color: var(--ink-muted); }
.plogo { height: 30px; width: auto; flex-shrink: 0; }
.qr { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 12px; border: 1px solid var(--line); }
.qr .code { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--placeholder); }
.qr .code svg { width: 100%; height: 100%; }
.qr .code > svg[width="64"] { width: 40px; height: 40px; }
.qr .code.real { background: #fff; }
.qrtext { display: flex; flex-direction: column; gap: 2px; max-width: 160px; }
.qr p { margin: 0; font-size: 14px; line-height: 18px; font-weight: 700; }
.qr small { font-size: 13px; line-height: 17px; color: var(--ink-muted); }
.plabel { font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--red-text); }
.grouphead { display: flex; align-items: baseline; gap: 12px; font-size: 13px; color: var(--ink-muted); margin-top: 2px; }
.ucgrid, .engrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ucgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); flex: 1 1 auto; min-height: 0; margin-top: 8px; gap: 10px; }
.engrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.uc { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 14px 12px 10px; border-radius: 14px; background: var(--surface); border: 1px solid #dfe3ef; box-shadow: 0 2px 8px rgba(42, 41, 92, 0.08); min-width: 0; }
.uc > .badge { position: absolute; top: -12px; right: 12px; font-size: 13px; line-height: 16px; padding: 2px 9px; }
.uchead { display: flex; align-items: center; gap: 10px; }
.pico { flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.pico img { width: 21px; height: 21px; filter: invert(1); }
.pico.red { background: var(--red); }
.pico.navy { background: var(--ink); }
.uc .pname { font-size: 18px; line-height: 22px; font-weight: 800; color: var(--ink-title); }
.uc .pillar { font-size: 12.5px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.pbody { margin: 0; font-size: 13px; line-height: 17px; color: var(--ink); }
.uc .plabel { margin-top: 2px; }
.pitems { margin: 0; padding: 0 0 0 15px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 16px; color: var(--ink); }
.pitems li::marker { color: var(--red); }
.pbox { border-radius: 8px; background: var(--surface-lavender); padding: 6px 9px; font-size: 12.5px; line-height: 16px; color: var(--ink); }
.pbox.next { margin-top: auto; min-height: 62px; }
.pbox.value { display: flex; flex-direction: column; gap: 1px; }
.pbox.value b { font-size: 13px; line-height: 17px; font-weight: 800; color: var(--ink-title); }
.en { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: #e9edf5; min-width: 0; }
.entext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.enhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.en .pname { font-size: 16px; line-height: 20px; font-weight: 800; color: var(--ink-title); }
.en .badge { font-size: 12px; line-height: 15px; padding: 1px 8px; }
.en p { margin: 0; font-size: 13px; line-height: 17px; color: var(--ink); }
.infra { display: flex; align-items: center; gap: 14px; padding: 7px 18px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 16px; }
.infra b { font-weight: 800; }
.infra > span:not(.badge) { flex: 1; color: #fff; }
.infra .badge { flex: none; }

/* ---------- attract ---------- */
.attract { position: absolute; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 104px; background: rgba(230, 232, 244, 0.35); border: none; width: 100%; }
.attract span { display: inline-flex; align-items: center; gap: 12px; height: 72px; padding: 0 40px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 26px; font-weight: 700; box-shadow: var(--shadow-device); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* ---------- presenter overlays ---------- */
.notes { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 60; max-height: 380px; overflow: hidden; padding: 22px 28px; border-radius: 18px; background: rgba(20, 19, 58, 0.96); color: #fff; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 16px 48px rgba(0,0,0,0.35); }
.notes .top { display: flex; gap: 16px; align-items: baseline; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: #c9cbe8; }
.notes .top .grow { flex: 1; }
.notes p { margin: 0; font-size: 22px; line-height: 31px; }
.notes .cue { font-size: 18px; line-height: 26px; color: #e4e5f3; }
.notes .next { font-size: 16px; color: #c9cbe8; }
.mcheck { position: absolute; inset: 40px; z-index: 61; overflow: auto; padding: 24px 28px; border-radius: 18px; background: rgba(20, 19, 58, 0.97); color: #fff; font-size: 15px; line-height: 22px; }
.mcheck table { width: 100%; border-collapse: collapse; }
.mcheck td, .mcheck th { padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.12); text-align: left; vertical-align: top; }
.mcheck .ok { color: #8fe0b0; font-weight: 700; }
.mcheck .no { color: #ffb4a0; font-weight: 700; }
.error-box { position: absolute; inset: 120px; padding: 40px; border-radius: 24px; background: var(--surface); font-size: 22px; line-height: 32px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}