/* ===================================================================
   /monitor-test - landing stage, full-screen inspection surface,
   marking toolbar and report panel. Everything is scoped under .mnt.
   The inspection surface is a position:fixed child of the root and is
   the element handed to the Fullscreen API (so everything that must be
   visible in full screen - toolbar, pop-ups, help - lives inside it).
   =================================================================== */

.mnt {
    --mnt-accent: #3d8bff;
    --mnt-accent-2: #22d3ee;
    --mnt-ink: #10162b;
    --mnt-muted: #5b6275;
    --mnt-line: #e4e7ef;
    --mnt-night: #0d1226;
    --mnt-night-2: #1a2142;

    margin: 18px auto 24px;
    padding: 0;
    max-width: 1120px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid var(--mnt-line);
    box-shadow: 0 30px 60px -32px rgb(16 22 43 / 45%);
    overflow: hidden;
    text-align: left;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--mnt-ink);
}
.mnt *, .mnt *::before, .mnt *::after { box-sizing: border-box; }
.mnt button, .mnt select, .mnt input { font: inherit; }
.mnt svg { display: block; }
.mnt [hidden] { display: none !important; }
.mnt kbd {
    display: inline-block; min-width: 22px; font: 600 .72rem/1 system-ui, sans-serif; text-align: center;
    padding: 4px 6px; border-radius: 6px; background: #f1f3f8; border: 1px solid #d9deea; border-bottom-width: 2px; color: var(--mnt-ink);
}

.mnt-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------- top bar ---------------- */

.mnt-topbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    padding: 12px 22px;
    background: linear-gradient(180deg, #151b33, #10162b);
    color: #cdd5ee;
}
.mnt-detected { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .88rem; font-weight: 500; min-width: 0; }
.mnt-detected svg { width: 18px; height: 18px; flex: none; color: var(--mnt-accent-2); }
.mnt-devices { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: rgb(255 255 255 / 7%); border: 1px solid rgb(255 255 255 / 10%); }
.mnt-devices button {
    min-height: 32px; padding: 0 12px; border: 0; border-radius: 9px; cursor: pointer;
    background: transparent; color: #aab3cf; font-size: .8rem; font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}
.mnt-devices button:hover { color: #fff; }
.mnt-devices button[aria-checked="true"] { background: #fff; color: var(--mnt-ink); box-shadow: 0 4px 12px -6px rgb(0 0 0 / 60%); }

/* ---------------- stage ---------------- */

.mnt-stage {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center;
    gap: 26px clamp(20px, 4vw, 48px);
    padding: clamp(28px, 4vw, 48px) clamp(16px, 4vw, 44px) clamp(22px, 3vw, 30px);
    background:
        radial-gradient(45% 60% at 28% 42%, rgb(61 139 255 / 26%), transparent 70%),
        radial-gradient(30% 40% at 85% 20%, rgb(34 211 238 / 12%), transparent 70%),
        linear-gradient(180deg, var(--mnt-night) 0%, var(--mnt-night-2) 100%);
    color: #e7ecfb;
}
.mnt-stage::before { /* faint pixel grid */
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
    background-image: linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(70% 80% at 50% 40%, #000, transparent);
    mask-image: radial-gradient(70% 80% at 50% 40%, #000, transparent);
}
.mnt-hero, .mnt-intro, .mnt-tiles-wrap { position: relative; min-width: 0; }
.mnt-hero { display: flex; justify-content: center; }

/* device mock-ups */
.mnt-device { display: flex; flex-direction: column; align-items: center; width: min(100%, 560px); }
.mnt-bezel {
    position: relative; width: 100%; padding: 12px; border-radius: 18px;
    background: linear-gradient(160deg, #2c3354, #0a0d19);
    box-shadow: 0 34px 60px -26px rgb(0 0 0 / 80%), inset 0 0 0 1px rgb(255 255 255 / 9%), 0 0 0 1px rgb(0 0 0 / 40%);
}
.mnt-cam { display: none; position: absolute; left: 50%; top: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #2b3252; box-shadow: inset 0 0 0 1px #465080; }
.mnt-screen {
    position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.mnt-preview { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mnt-screen::after { /* glass reflection */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, rgb(255 255 255 / 9%) 0 16%, transparent 38%);
}
.mnt-scan { /* a slow scanning light sweep - the "inspection" idea */
    position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgb(34 211 238 / 18%), transparent);
    animation: mnt-scan 5.5s ease-in-out infinite;
}
@keyframes mnt-scan { 0% { transform: translateX(0); } 60%, 100% { transform: translateX(440%); } }

.mnt-neck { width: 76px; height: 50px; background: linear-gradient(90deg, #1b2038, #3a4163, #1b2038); clip-path: polygon(24% 0, 76% 0, 88% 100%, 12% 100%); }
.mnt-foot { width: 230px; height: 12px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #3a4163, #151b33); box-shadow: 0 18px 24px -8px rgb(0 0 0 / 70%); }
.mnt-base { display: none; }

.mnt[data-device="laptop"] .mnt-device { width: min(100%, 540px); }
.mnt[data-device="laptop"] .mnt-bezel { width: 86%; border-radius: 16px 16px 4px 4px; padding: 14px 12px 12px; }
.mnt[data-device="laptop"] .mnt-cam { display: block; }
.mnt[data-device="laptop"] .mnt-screen { aspect-ratio: 16 / 10; border-radius: 3px; }
.mnt[data-device="laptop"] .mnt-neck, .mnt[data-device="laptop"] .mnt-foot { display: none; }
.mnt[data-device="laptop"] .mnt-base {
    display: block; width: 100%; height: 18px; border-radius: 2px 2px 14px 14px;
    background: linear-gradient(180deg, #4a5275 0%, #2a3050 55%, #151a2e 100%);
    box-shadow: 0 22px 28px -10px rgb(0 0 0 / 75%), inset 0 1px 0 rgb(255 255 255 / 18%);
    position: relative;
}
.mnt[data-device="laptop"] .mnt-base::after { content: ""; position: absolute; left: 50%; top: 0; width: 18%; height: 6px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #1a1f36; }

.mnt[data-device="tablet"] .mnt-device { width: min(100%, 440px); }
.mnt[data-device="tablet"] .mnt-bezel { border-radius: 28px; padding: 18px; }
.mnt[data-device="tablet"] .mnt-screen { aspect-ratio: 4 / 3; border-radius: 10px; }
.mnt[data-device="tablet"] .mnt-neck, .mnt[data-device="tablet"] .mnt-foot { display: none; }

.mnt[data-device="phone"] .mnt-device { width: min(72%, 270px); }
.mnt[data-device="phone"] .mnt-bezel { border-radius: 38px; padding: 11px; }
.mnt[data-device="phone"] .mnt-cam { display: block; top: 16px; width: 60px; height: 16px; margin-left: -30px; border-radius: 999px; background: #05070d; box-shadow: none; z-index: 2; }
.mnt[data-device="phone"] .mnt-screen { aspect-ratio: 9 / 19; border-radius: 28px; padding: 14px; }
.mnt[data-device="phone"] .mnt-neck, .mnt[data-device="phone"] .mnt-foot { display: none; }
.mnt[data-device="phone"] .mnt-start { flex-direction: column; min-height: 0; padding: 16px 18px; border-radius: 22px; font-size: .9rem; text-align: center; }

.mnt-start {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 56px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
    color: #fff; font-weight: 700; font-size: 1.04rem;
    background: radial-gradient(circle at 30% 20%, #6aa9ff, var(--mnt-accent) 55%, #2254c9);
    box-shadow: 0 16px 34px -10px rgb(61 139 255 / 80%), inset 0 -3px 8px rgb(0 0 0 / 22%), inset 0 2px 6px rgb(255 255 255 / 25%);
    transition: transform .15s ease, box-shadow .2s ease;
}
.mnt-start svg { width: 24px; height: 24px; flex: none; }
.mnt-start:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 22px 40px -10px rgb(61 139 255 / 90%), inset 0 -3px 8px rgb(0 0 0 / 22%), inset 0 2px 6px rgb(255 255 255 / 25%); }
.mnt-start:active { transform: scale(.97); }
.mnt-start:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.mnt-start-ring { position: absolute; inset: -7px; border-radius: inherit; border: 2px solid rgb(106 169 255 / 60%); animation: mnt-pulse 2.2s ease-out infinite; pointer-events: none; }
@keyframes mnt-pulse { 0% { opacity: .9; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.16); } }
.mnt-caption {
    position: relative; z-index: 1; max-width: 92%;
    padding: 5px 12px; border-radius: 999px; background: rgb(13 18 38 / 76%); color: #dfe5f7;
    font-size: .74rem; font-weight: 600; text-align: center;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* intro column */
.mnt-eyebrow { margin: 0 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mnt-accent-2); }
.mnt-lede { margin: 0 0 16px; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.35; font-weight: 700; color: #fff; }
.mnt-features { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.mnt-features li { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: #c2cae3; }
.mnt-features strong { color: #fff; font-weight: 600; }
.mnt-f-ico { flex: none; position: relative; width: 34px; height: 34px; border-radius: 10px; background: rgb(255 255 255 / 7%); border: 1px solid rgb(255 255 255 / 12%); }
.mnt-f-ico::before, .mnt-f-ico::after { content: ""; position: absolute; }
.mnt-f-ico--mark::before { left: 9px; top: 9px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #ff3b5c; }
.mnt-f-ico--mark::after { right: 4px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 0 2px #10162b; }
.mnt-f-ico--draw::before { left: 7px; top: 15px; width: 20px; height: 3px; border-radius: 2px; background: #ffb020; transform: rotate(-32deg); box-shadow: 0 0 8px rgb(255 176 32 / 60%); }
.mnt-f-ico--draw::after { left: 11px; top: 8px; width: 12px; height: 18px; border-radius: 50%; border: 2px dashed #3db8ff; transform: rotate(20deg); }
.mnt-f-ico--scan::before { inset: 0; border-radius: 10px; background: radial-gradient(circle at 60% 45%, #fff 0 5px, rgb(255 255 255 / 25%) 6px 9px, transparent 10px); }
.mnt-f-ico--save::before { left: 15px; top: 7px; width: 3px; height: 12px; background: #34f5a6; border-radius: 2px; }
.mnt-f-ico--save::after { left: 11px; top: 14px; width: 11px; height: 11px; border-right: 3px solid #34f5a6; border-bottom: 3px solid #34f5a6; transform: rotate(45deg); border-radius: 1px; }

.mnt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mnt-chip { display: inline-flex; flex-direction: column; gap: 2px; padding: 7px 12px; border-radius: 12px; background: rgb(255 255 255 / 6%); border: 1px solid rgb(255 255 255 / 10%); }
.mnt-chip i { font-style: normal; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8f99b8; }
.mnt-chip b { font-size: .92rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

.mnt-tour-btn {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; cursor: pointer;
    border-radius: 12px; border: 1px solid rgb(34 211 238 / 45%); background: rgb(34 211 238 / 10%); color: #d9f8ff; font-weight: 600; font-size: .9rem;
    transition: background-color .15s ease, transform .12s ease;
}
.mnt-tour-btn svg { width: 16px; height: 16px; color: var(--mnt-accent-2); }
.mnt-tour-btn:hover { background: rgb(34 211 238 / 20%); }
.mnt-tour-btn:active { transform: scale(.97); }

/* pattern tiles */
.mnt-tiles-wrap { grid-column: 1 / -1; }
.mnt-tiles-title { margin: 0 0 10px; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8f99b8; }
.mnt-tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.mnt-tile {
    position: relative; display: flex; flex-direction: column; gap: 0; padding: 0; min-width: 0; cursor: pointer; text-align: left;
    border-radius: 14px; overflow: hidden; border: 1px solid rgb(255 255 255 / 12%); background: rgb(255 255 255 / 5%); color: #e7ecfb;
    transition: transform .14s ease, border-color .15s ease, box-shadow .2s ease;
}
.mnt-tile canvas { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; background: #000; }
.mnt-tile-text { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px 8px; min-width: 0; }
.mnt-tile-name { font-size: .78rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mnt-tile-reveals { font-size: .66rem; color: #98a2c2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mnt-tile:hover { transform: translateY(-3px); border-color: rgb(34 211 238 / 60%); box-shadow: 0 14px 26px -14px rgb(34 211 238 / 55%); }
.mnt-tile:active { transform: scale(.97); }
.mnt-tile:focus-visible { outline: 3px solid var(--mnt-accent-2); outline-offset: 2px; }
.mnt-tile.is-current { border-color: var(--mnt-accent-2); }

/* ---------------- light panel ---------------- */

.mnt-panel { padding: 22px clamp(16px, 4vw, 36px) 26px; }
.mnt-status { margin: 0 0 18px; padding: 12px 16px; border-radius: 14px; background: #f4f7ff; border: 1px solid #dce6fb; font-weight: 600; color: #1d3a7a; }

.mnt-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.mnt-side { display: grid; gap: 16px; min-width: 0; }
.mnt-card { min-width: 0; padding: 18px; border-radius: 18px; background: #f6f8fc; border: 1px solid var(--mnt-line); }
.mnt-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1rem; font-weight: 700; }
.mnt-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mnt-card-head h3 { margin-bottom: 10px; }
.mnt-count { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--mnt-ink); color: #fff; font-size: .74rem; font-variant-numeric: tabular-nums; }
.mnt-count.is-bump { animation: mnt-bump .45s ease; }
@keyframes mnt-bump { 40% { transform: scale(1.35); background: var(--mnt-accent); } }
.mnt-optional { font-size: .7rem; font-weight: 600; color: var(--mnt-muted); padding: 2px 8px; border-radius: 999px; background: #e9edf6; }
.mnt-fine { margin: 10px 0 0; font-size: .8rem; color: #6d7489; line-height: 1.5; }
.mnt-empty { margin: 0; padding: 14px; border-radius: 12px; border: 1px dashed #cfd6e6; color: var(--mnt-muted); font-size: .88rem; background: #fff; }

.mnt-type-counts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mnt-type-counts:empty { display: none; }
.mnt-tc { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; background: #fff; border: 1px solid var(--mnt-line); font-size: .76rem; font-weight: 600; }
.mnt-tc i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgb(0 0 0 / 18%); }
.mnt-tc b { font-variant-numeric: tabular-nums; }

.mnt-marks { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; max-height: 420px; overflow: auto; }
.mnt-marks:empty { display: none; }
.mnt-mark {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; align-items: center;
    padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--mnt-line);
    animation: mnt-in .3s ease;
}
@keyframes mnt-in { from { opacity: 0; transform: translateY(6px); } }
.mnt-mark-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #0b0f1c; font-weight: 800; font-size: .8rem; box-shadow: inset 0 0 0 2px rgb(0 0 0 / 20%); }
.mnt-mark-main { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.mnt-mark-main select { min-height: 34px; max-width: 100%; padding: 0 6px; border-radius: 9px; border: 1px solid #d5dbe8; background: #fff; font-size: .82rem; font-weight: 600; color: var(--mnt-ink); }
.mnt-mark-where { font-size: .74rem; color: var(--mnt-muted); font-variant-numeric: tabular-nums; }
.mnt-mark-btns { display: flex; gap: 4px; }
.mnt-mark-btns button { min-height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--mnt-line); background: #fff; cursor: pointer; font-size: .76rem; font-weight: 600; color: var(--mnt-ink); }
.mnt-mark-btns button:hover { background: #f4f7ff; }
.mnt-mark-btns .mnt-del { color: #c23a4b; }
.mnt-mark-note { grid-column: 2 / -1; width: 100%; min-height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid #d5dbe8; background: #fbfcfe; font-size: .82rem; color: var(--mnt-ink); }

.mnt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mnt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 42px; padding: 0 16px; margin: 0; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--mnt-line); background: #fff; color: var(--mnt-ink); font-weight: 600; font-size: .88rem;
    transition: transform .12s ease, background-color .15s ease, box-shadow .2s ease;
}
.mnt-btn svg { width: 18px; height: 18px; }
.mnt-btn:hover { background: #f4f7ff; }
.mnt-btn:active { transform: scale(.96); }
.mnt-btn--primary { border: 0; color: #fff; background: linear-gradient(135deg, #4f9bff, #2463e0); box-shadow: 0 10px 22px -12px rgb(36 99 224 / 80%); }
.mnt-btn--primary:hover { background: linear-gradient(135deg, #63a8ff, #2d6ff0); }
.mnt-btn.is-done { background: #e8fbf3; border-color: #9fe5c7; color: #0d6b47; }
.mnt button:focus-visible, .mnt select:focus-visible, .mnt input:focus-visible, .mnt-file:focus-within { outline: 3px solid var(--mnt-accent); outline-offset: 2px; }

.mnt-link { padding: 0; border: 0; background: none; color: #c23a4b; font-size: .82rem; font-weight: 600; cursor: pointer; text-decoration: underline; }
.mnt-link--plain { color: #2463e0; }

.mnt-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; }
.mnt-dl div { min-width: 0; }
.mnt-dl dt { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a91a6; }
.mnt-dl dd { margin: 1px 0 0; font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.mnt-photo { position: relative; margin-top: 10px; }
.mnt-photo img { display: block; width: 100%; max-height: 220px; object-fit: contain; border-radius: 12px; background: #10162b; }
.mnt-photo .mnt-link { margin-top: 6px; }
.mnt-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mnt-file { position: relative; overflow: hidden; }
.mnt-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

.mnt-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; margin-top: 18px; }
.mnt-guide div { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: #454d63; line-height: 1.45; }
.mnt-guide b { flex: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.mnt-honest { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: #fff8ea; border: 1px solid #f5dfb0; font-size: .84rem; color: #6b4d12; line-height: 1.5; }
.mnt-shortcuts-line { margin: 10px 0 0; }

/* ---------------- full-screen inspection ---------------- */

.mnt-inspect {
    position: fixed; inset: 0; z-index: 2147483000;
    width: 100vw; height: 100vh; margin: 0; background: #000;
    color: #fff; overflow: hidden; outline: none;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    touch-action: none; user-select: none; -webkit-user-select: none;
}
.mnt-inspect:fullscreen { width: 100%; height: 100%; }
html.mnt-lock, html.mnt-lock body { overflow: hidden !important; }
.mnt-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.mnt-inspect[data-tool="marker"], .mnt-inspect[data-tool="pen"], .mnt-inspect[data-tool="ellipse"], .mnt-inspect[data-tool="rect"] { cursor: crosshair; }
.mnt-inspect.is-idle[data-tool="look"] { cursor: none; }

.mnt-torch {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle var(--r, 140px) at var(--x, 50%) var(--y, 50%), transparent 0 calc(100% - 3px), rgb(0 0 0 / 92%) 100%);
}
.mnt-torch::after { /* ring around the lit circle */
    content: ""; position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: calc(var(--r, 140px) * 2); height: calc(var(--r, 140px) * 2);
    transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 0 0 1px rgb(255 255 255 / 30%), 0 0 30px rgb(34 211 238 / 25%);
}

.mnt-focus-ring { position: absolute; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; pointer-events: none; border: 3px solid #fff; box-shadow: 0 0 0 3px #000, 0 0 30px 6px rgb(34 211 238 / 70%); animation: mnt-focus 1.1s ease-out 3; }
@keyframes mnt-focus { 0% { transform: scale(2.4); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

.mnt-loupe { position: absolute; left: 0; top: 0; width: 180px; height: 180px; pointer-events: none; }
.mnt-loupe canvas { display: block; width: 180px; height: 180px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #000, 0 14px 30px rgb(0 0 0 / 60%); background: #000; }
.mnt-loupe-info {
    position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap;
    padding: 3px 10px; border-radius: 999px; background: rgb(16 22 43 / 88%); border: 1px solid rgb(255 255 255 / 20%);
    font: 600 .74rem/1.4 system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #fff;
}

.mnt-glass {
    background: rgb(14 19 38 / 80%); border: 1px solid rgb(255 255 255 / 16%);
    -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
    box-shadow: 0 16px 40px -14px rgb(0 0 0 / 75%), inset 0 1px 0 rgb(255 255 255 / 8%);
}

.mnt-hud {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    max-width: min(760px, calc(100% - 28px)); padding: 9px 18px 11px; border-radius: 18px; text-align: center; pointer-events: none;
    background: rgb(14 19 38 / 80%); border: 1px solid rgb(255 255 255 / 16%);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px -12px rgb(0 0 0 / 70%);
    transition: opacity .35s ease, transform .35s ease;
}
.mnt-hud-name { font-size: .98rem; font-weight: 700; }
.mnt-hud-name b { font-variant-numeric: tabular-nums; color: var(--mnt-accent-2); margin-right: 6px; }
.mnt-hud-tip { font-size: .8rem; color: #cdd5ee; line-height: 1.4; }
.mnt-hud-progress { display: none; width: 100%; height: 3px; margin-top: 5px; border-radius: 999px; background: rgb(255 255 255 / 12%); overflow: hidden; }
.mnt-hud-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mnt-accent-2), var(--mnt-accent)); }
.mnt-inspect.is-tour .mnt-hud-progress { display: block; }
.mnt-inspect.is-tour .mnt-hud { padding: 14px 24px 14px; }
.mnt-inspect.is-tour .mnt-hud-tip { font-size: .95rem; color: #fff; }

/* toolbar */
.mnt-bar {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    width: max-content; max-width: calc(100% - 16px); padding: 6px; border-radius: 18px;
    background: rgb(14 19 38 / 84%); border: 1px solid rgb(255 255 255 / 16%);
    -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
    box-shadow: 0 18px 44px -14px rgb(0 0 0 / 80%), inset 0 1px 0 rgb(255 255 255 / 8%);
    transition: opacity .35s ease, transform .35s ease;
    color: #dfe5f7; touch-action: none;
}
.mnt-bar.is-placed { transform: none; }
.mnt-bar-row { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: center; }
.mnt-bar button {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; min-width: 40px; padding: 0 9px; border: 0; border-radius: 11px; cursor: pointer;
    background: transparent; color: #dfe5f7; font-weight: 600; font-size: .82rem; white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
.mnt-bar button svg { width: 20px; height: 20px; flex: none; }
.mnt-bar button:hover { background: rgb(255 255 255 / 12%); color: #fff; }
.mnt-bar button:active { transform: scale(.92); }
.mnt-bar button:disabled { opacity: .35; cursor: default; transform: none; background: transparent; }
.mnt-bar button[aria-pressed="true"] { background: #fff; color: var(--mnt-ink); box-shadow: 0 4px 14px -6px rgb(255 255 255 / 60%); }
.mnt-bar button:focus-visible { outline: 3px solid var(--mnt-accent-2); outline-offset: 1px; }
.mnt-bar .mnt-grip { min-width: 26px; padding: 0 2px; cursor: grab; color: #7d88aa; }
.mnt-bar .mnt-grip:active { cursor: grabbing; transform: none; }
.mnt-bar .mnt-pattern-btn { min-width: 0; max-width: 170px; padding: 0 10px; background: rgb(255 255 255 / 6%); }
.mnt-pattern-btn .mnt-swatch { width: 16px; height: 16px; flex: none; border-radius: 5px; border: 1px solid rgb(255 255 255 / 45%); }
.mnt-pattern-btn .mnt-pattern-name { overflow: hidden; text-overflow: ellipsis; }
.mnt-bar .mnt-exit { background: rgb(255 95 109 / 22%); color: #ffe0e3; padding: 0 12px; }
.mnt-bar .mnt-exit:hover { background: rgb(255 95 109 / 38%); }
.mnt-bar .mnt-exit kbd { background: rgb(255 255 255 / 14%); border-color: rgb(255 255 255 / 22%); color: inherit; min-width: 0; }
.mnt-bar .mnt-download { background: linear-gradient(135deg, #4f9bff, #2463e0); color: #fff; padding: 0 12px; }
.mnt-bar .mnt-download:hover { background: linear-gradient(135deg, #63a8ff, #2d6ff0); }
.mnt-bar-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #ff3b5c; color: #fff; font-size: .62rem; line-height: 16px; font-variant-numeric: tabular-nums; }
.mnt-bar-badge:empty { display: none; }
.mnt-sep { width: 1px; height: 24px; margin: 0 4px; background: rgb(255 255 255 / 16%); flex: none; }

.mnt-types { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; padding-top: 4px; border-top: 1px solid rgb(255 255 255 / 10%); }
.mnt-inspect[data-tool="look"] .mnt-types { display: none; }
.mnt-bar .mnt-type { min-height: 34px; padding: 0 10px 0 6px; gap: 6px; font-size: .76rem; border-radius: 999px; background: rgb(255 255 255 / 5%); }
.mnt-type i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #0b0f1c; flex: none; }
.mnt-type i svg { width: 14px; height: 14px; }
.mnt-type em { font-style: normal; font-variant-numeric: tabular-nums; font-size: .68rem; opacity: .7; }
.mnt-type em:empty { display: none; }
.mnt-bar .mnt-type[aria-checked="true"] { background: rgb(255 255 255 / 16%); color: #fff; box-shadow: inset 0 0 0 2px var(--c); }

.mnt-inspect.is-idle .mnt-hud { opacity: 0; transform: translate(-50%, -12px); }
.mnt-inspect.is-idle .mnt-bar { opacity: 0; pointer-events: none; transform: translate(-50%, 12px); }
.mnt-inspect.is-idle .mnt-bar.is-placed { transform: translateY(12px); }
.mnt-inspect.is-idle .mnt-pop { opacity: 0; pointer-events: none; }
.mnt-inspect.is-drawing .mnt-bar, .mnt-inspect.is-drawing .mnt-hud, .mnt-inspect.is-drawing .mnt-pop { opacity: .15; pointer-events: none; }

/* mark pop-up */
.mnt-pop {
    position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    max-width: min(420px, calc(100% - 16px)); padding: 6px 6px 6px 6px; border-radius: 14px;
    background: rgb(14 19 38 / 90%); border: 1px solid rgb(255 255 255 / 18%);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 14px 30px -10px rgb(0 0 0 / 80%);
    transition: opacity .3s ease; animation: mnt-pop .25s ease;
    user-select: auto; -webkit-user-select: auto;
}
@keyframes mnt-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } }
.mnt-pop-badge { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c, #fff); color: #0b0f1c; font-weight: 800; font-size: .75rem; flex: none; }
.mnt-pop-text { font-size: .8rem; font-weight: 600; color: #fff; padding-right: 4px; }
.mnt-pop input { flex: 1 1 150px; min-width: 0; min-height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid rgb(255 255 255 / 22%); background: rgb(255 255 255 / 8%); color: #fff; font-size: .82rem; }
.mnt-pop input::placeholder { color: #9aa4c4; }
.mnt-pop input:focus { outline: 2px solid var(--mnt-accent-2); outline-offset: 0; }
.mnt-pop button { min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; cursor: pointer; background: rgb(255 255 255 / 12%); color: #fff; font-size: .78rem; font-weight: 600; }
.mnt-pop button:hover { background: rgb(255 255 255 / 22%); }
.mnt-pop #mntPopDelete { color: #ffc2c9; }

/* pattern picker */
.mnt-picker {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(760px, calc(100% - 20px)); max-height: calc(100% - 20px); overflow: auto; padding: 14px; border-radius: 20px;
    background: rgb(14 19 38 / 92%); border: 1px solid rgb(255 255 255 / 16%);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 30px 70px -20px rgb(0 0 0 / 85%);
    animation: mnt-pop .22s ease;
}
.mnt-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mnt-picker .mnt-tile { background: rgb(255 255 255 / 6%); }

.mnt-toast {
    position: absolute; left: 50%; top: 120px; transform: translateX(-50%); z-index: 3;
    padding: 12px 20px; border-radius: 14px; font-weight: 600; font-size: .92rem; color: #fff; text-align: center;
    background: rgb(14 19 38 / 92%); border: 1px solid rgb(52 245 166 / 45%); box-shadow: 0 20px 40px -12px rgb(0 0 0 / 80%);
    animation: mnt-pop .25s ease; pointer-events: none; max-width: calc(100% - 32px);
}

/* help */
.mnt-help { position: fixed; inset: 0; z-index: 2147483001; display: grid; place-items: center; padding: 16px; background: rgb(5 8 18 / 72%); }
.mnt-inspect .mnt-help { position: absolute; }
.mnt-help-card {
    width: min(620px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 20px 22px; border-radius: 22px;
    background: #fff; color: var(--mnt-ink); box-shadow: 0 30px 60px rgb(0 0 0 / 50%); animation: mnt-pop .22s ease;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    user-select: text;
}
.mnt-help-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.mnt-help-head h3 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.mnt-help-close { width: 40px; height: 40px; border: 0; border-radius: 12px; background: #f1f3f8; cursor: pointer; font-size: 1.5rem; line-height: 1; color: var(--mnt-ink); }
.mnt-help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.mnt-help-grid div { display: flex; align-items: center; gap: 4px; font-size: .86rem; }
.mnt-help-grid span { margin-left: 8px; color: #454d63; }
.mnt-help-note { margin: 14px 0 0; font-size: .82rem; color: var(--mnt-muted); line-height: 1.5; }

/* ---------------- responsive ---------------- */

@media (max-width: 991.98px) {
    .mnt-stage { grid-template-columns: 1fr; }
    .mnt-intro { max-width: 620px; margin: 0 auto; }
    .mnt-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .mnt-cols { grid-template-columns: 1fr; }
    .mnt-side { grid-template-columns: 1fr 1fr; }
    .mnt-guide { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .mnt-side { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .mnt { border-radius: 22px; margin-inline: -4px; }
    .mnt-topbar { padding: 12px 14px; }
    .mnt-detected { font-size: .8rem; }
    .mnt-devices { width: 100%; }
    .mnt-devices button { flex: 1; padding: 0 6px; }
    .mnt-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .mnt-start { min-height: 48px; padding: 0 18px; font-size: .92rem; }
    .mnt-caption { font-size: .66rem; }
    .mnt-dl { grid-template-columns: 1fr 1fr; }
    .mnt-actions .mnt-btn { flex: 1 1 100%; }
    .mnt-mark { grid-template-columns: auto minmax(0, 1fr); }
    .mnt-mark-btns { grid-column: 1 / -1; justify-content: flex-end; }
    .mnt-mark-note { grid-column: 1 / -1; }
    .mnt-help-grid { grid-template-columns: 1fr; }
    .mnt-bar button { min-width: 38px; padding: 0 7px; }
    .mnt-bar .mnt-label { display: none; }
    .mnt-bar .mnt-exit .mnt-label { display: inline; }
    .mnt-bar .mnt-exit kbd { display: none; }
    .mnt-sep { display: none; }
    .mnt-bar .mnt-type span { display: none; }
    .mnt-bar .mnt-type { padding: 0 6px; }
    .mnt-bar .mnt-pattern-btn { max-width: 120px; }
    .mnt-bar { padding: 4px; max-width: calc(100% - 8px); bottom: 8px; }
    .mnt-types { gap: 1px; flex-wrap: nowrap; }
    .mnt-bar .mnt-type { min-width: 42px; padding: 0; flex: none; }
    .mnt-hud-tip { font-size: .72rem; }
    .mnt-pop { flex-wrap: nowrap; max-width: calc(100% - 16px); gap: 4px; }
    .mnt-pop-text { display: none; }
    .mnt-pop input { flex: 1 1 90px; }
    .mnt-pop button { padding: 0 8px; }
}
@media (max-width: 1100px) {
    .mnt-bar .mnt-type span { display: none; }
    .mnt-bar .mnt-type { padding: 0 6px; }
}
@media (min-width: 1101px) {
    .mnt-bar .mnt-type em { display: none; }
}

@media (pointer: coarse) {
    .mnt-devices button, .mnt-btn, .mnt-bar button, .mnt-mark-btns button, .mnt-mark-main select, .mnt-mark-note, .mnt-pop button, .mnt-pop input, .mnt-tour-btn { min-height: 44px; }
    .mnt-bar button { min-width: 44px; }
}

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