/* Product screen mockups: faithful recreations of the Holoflow web app, rendered at a fixed internal size and scaled to fit. */
.mock { position: relative; width: 100%; aspect-ratio: var(--mock-ar, 16 / 10); }
.mock-stage { position: absolute; left: 0; top: 0; width: var(--mw, 1280px); height: var(--mh, 800px); transform-origin: 0 0; transform: scale(var(--s, 0.5)); }
.mock-frame { width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: #1D201F; color: #F4F4F2; font: 300 14px/1.4 "Outfit", system-ui, sans-serif;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 40px 90px rgba(0,0,0,0.55); display: grid; grid-template-rows: 48px 1fr; }
.mock-frame * { box-sizing: border-box; }
.mock-shadowless .mock-frame { box-shadow: 0 0 0 1px rgba(255,255,255,0.08); }

/* app chrome */
.m-top { display: flex; align-items: center; gap: 12px; padding: 0 18px; background: #1D201F; border-bottom: 1px solid rgba(255,255,255,0.07); }
.m-top .m-brand { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 200; }
.m-top .m-brand b { font-weight: 800; }
.m-top .m-brand svg { width: 18px; height: 18px; }
.m-top .m-account { color: #CFCFCB; font-size: 15px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.12); }
.m-top .m-crumb { color: #CFCFCB; font-size: 15px; }
.m-top .m-spacer { flex: 1; }
.m-top .m-lang { border: 1px solid #9C9C9C; border-radius: 100px; font-size: 11px; font-weight: 800; padding: 3px 10px; }
.m-top .m-user { text-align: right; font-size: 12px; line-height: 1.2; }
.m-top .m-user b { display: block; font-weight: 800; font-size: 13px; }
.m-top .m-user span { color: #A9A9A4; }
.m-top .m-avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #3FC0EB; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #3FC0EB; }
.m-body { display: grid; grid-template-columns: 188px 1fr; min-height: 0; }
.m-side { background: #232625; padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid rgba(255,255,255,0.05); }
.m-side h6 { margin: 0 8px 10px; font-size: 13px; font-weight: 800; }
.m-side .m-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: #CFCFCB; font-size: 14px; position: relative; }
.m-side .m-item i { width: 18px; height: 18px; border-radius: 5px; background: #5A5D5C; display: block; }
.m-side .m-item.on { color: #fff; font-weight: 800; background: rgba(63,192,235,0.1); }
.m-side .m-item.on::before { content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 4px; border-radius: 0 4px 4px 0; background: #3FC0EB; }
.m-side .m-item.on i { background: #3FC0EB; }
.m-side .m-foot { margin-top: auto; color: #7E807C; font-size: 11px; padding: 0 10px; }
.m-main { min-width: 0; min-height: 0; overflow: hidden; padding: 16px; display: grid; gap: 14px; }

/* shared atoms */
.m-panel { background: #2A2D2C; border-radius: 20px; padding: 18px; min-width: 0; min-height: 0; }
.m-panel h5 { margin: 0 0 12px; font-size: 16px; font-weight: 800; color: #3FC0EB; }
.m-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 28px; font-size: 13px; font-weight: 800; background: #3FC0EB; color: #10201F; }
.m-btn.ghost { background: #484848; color: #F4F4F2; }
.m-search { height: 30px; border-radius: 100px; background: #484848; color: #9C9C9C; font-size: 12px; padding: 0 14px; display: flex; align-items: center; min-width: 160px; }
.m-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 100px; font-size: 11px; font-weight: 800; color: #0E1110; white-space: nowrap; }
.m-pill.new { background: #3FC0EB; } .m-pill.survey { background: #8BD6B0; } .m-pill.plan { background: #B79CFF; }
.m-pill.build { background: #F4A712; } .m-pill.review { background: #20C997; } .m-pill.complete { background: #59C9A5; } .m-pill.blocked { background: #FF6B82; }
.m-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.m-tabs span { height: 30px; border-radius: 100px; background: #3C3C3C; display: grid; place-items: center; font-size: 13px; color: #CFCFCB; }
.m-tabs span.on { background: #1D201F; box-shadow: inset 0 0 0 1px #3FC0EB; color: #fff; font-weight: 800; }
.m-muted { color: #A9A9A4; }

/* jobs list */
.m-jobs { grid-template-columns: 1fr 330px; grid-template-rows: auto 1fr; }
.m-toolbar { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; }
.m-grid { background: #2A2D2C; border-radius: 16px; overflow: hidden; display: grid; grid-auto-rows: min-content; }
.m-grid .m-row { display: grid; grid-template-columns: 54px 1fr 110px 110px 90px; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13px; }
.m-grid .m-row.head { font-weight: 800; color: #CFCFCB; background: #262928; }
.m-grid .m-row.sel { background: rgba(63,192,235,0.1); box-shadow: inset 3px 0 0 #3FC0EB; }
.m-grid .m-thumb { width: 40px; height: 30px; border-radius: 6px; background: linear-gradient(160deg, #7FB9D6, #3A4F58); }
.m-grid .m-addr b { display: block; font-weight: 800; font-size: 13px; }
.m-grid .m-addr span { color: #A9A9A4; font-size: 11px; }
.m-bar { height: 6px; border-radius: 3px; background: #3C3C3C; overflow: hidden; }
.m-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3FC0EB, #6FF2C8); border-radius: 3px; }
.m-detail { background: #2A2D2C; border-radius: 16px; overflow: hidden; display: grid; grid-template-rows: 190px auto 1fr auto; }
.m-detail canvas { width: 100%; height: 100%; display: block; background: radial-gradient(circle at 50% 40%, #2E3A3F, #171A19); }
.m-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px; }
.m-stats div { background: #232625; border-radius: 12px; padding: 10px; text-align: center; }
.m-stats b { display: block; font-size: 20px; font-weight: 800; }
.m-stats span { font-size: 10px; color: #A9A9A4; }
.m-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 14px; align-content: start; }
.m-photos i { aspect-ratio: 4 / 3; border-radius: 8px; display: block; }

/* summary / units board */
.m-summary { grid-template-columns: 1fr 300px; grid-template-rows: auto auto 1fr; }
.m-summary .m-tabs { grid-column: 1 / -1; }
.m-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; }
.m-head h4 { margin: 0; font-size: 22px; font-weight: 800; }
.m-floors { display: grid; gap: 8px; }
.m-floor { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; }
.m-floor > span { font-size: 12px; font-weight: 800; color: #CFCFCB; }
.m-units { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.m-unit { height: 38px; border-radius: 10px; background: #343736; display: flex; flex-direction: column; justify-content: center; padding: 0 9px; font-size: 11px; font-weight: 800; position: relative; transition: background 0.5s, color 0.5s; }
.m-unit small { font-weight: 300; font-size: 9px; color: #A9A9A4; transition: color 0.5s; }
.m-unit.planned { background: rgba(183,156,255,0.22); }
.m-unit.build { background: rgba(244,167,18,0.28); }
.m-unit.live { background: #59C9A5; color: #0E1110; }
.m-unit.live small { color: rgba(14,17,16,0.7); }
.m-unit.blocked { background: rgba(255,107,130,0.3); }
.m-legend { display: flex; gap: 14px; font-size: 11px; color: #CFCFCB; margin-top: 12px; }
.m-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.m-feed { display: grid; gap: 10px; font-size: 12px; }
.m-feed div { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: start; }
.m-feed .m-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #0E1110; }
.m-feed b { font-weight: 800; }
.m-feed span { color: #A9A9A4; display: block; font-size: 11px; }
.m-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; font-size: 12px; }
.m-kv span { color: #A9A9A4; display: block; font-size: 11px; }
.m-kv b { font-weight: 800; color: #3FC0EB; }

/* editor */
.m-editor { grid-template-columns: 220px 1fr 44px; grid-template-rows: auto 1fr 150px; padding: 12px; gap: 10px; }
.m-editor .m-tabs { grid-column: 1 / -1; }
.m-tree { grid-row: 2 / 4; background: #262928; border-radius: 14px; padding: 10px; display: grid; gap: 6px; align-content: start; overflow: hidden; }
.m-tree .m-seg { display: grid; grid-template-columns: 1fr 1fr; background: #1D201F; border-radius: 100px; padding: 3px; font-size: 11px; margin-bottom: 4px; }
.m-tree .m-seg span { text-align: center; padding: 3px; border-radius: 100px; }
.m-tree .m-seg span.on { background: #3C3C3C; font-weight: 800; }
.m-node { display: flex; align-items: center; gap: 8px; height: 26px; border-radius: 8px; padding: 0 8px; font-size: 11.5px; background: #303332; box-shadow: inset 3px 0 0 var(--c, #3FC0EB); }
.m-node.sel { background: rgba(63,192,235,0.16); }
.m-node i { width: 8px; height: 8px; border-radius: 2px; background: var(--c, #3FC0EB); }
.m-canvas { background: radial-gradient(circle at 50% 45%, #2B3134, #151817 75%); border-radius: 14px; position: relative; overflow: hidden; }
.m-canvas canvas { width: 100%; height: 100%; display: block; }
.m-canvas .m-sel { position: absolute; right: 14px; top: 14px; width: 220px; background: rgba(35,38,37,0.94); border-radius: 14px; padding: 12px; font-size: 11.5px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.m-canvas .m-sel b { font-size: 13px; font-weight: 800; display: block; margin-bottom: 6px; }
.m-canvas .m-sel div { display: flex; justify-content: space-between; padding: 4px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.m-rail { grid-row: 2 / 4; background: #262928; border-radius: 14px; display: grid; gap: 8px; align-content: start; padding: 8px 6px; }
.m-rail i { width: 30px; height: 30px; border-radius: 8px; background: #343736; display: block; }
.m-rail i.on { background: #3FC0EB; }
.m-lib { background: #262928; border-radius: 14px; padding: 10px; display: grid; grid-template-columns: 130px 1fr; gap: 10px; min-width: 0; }
.m-lib .m-cats { display: grid; gap: 6px; align-content: start; }
.m-lib .m-cats span { font-size: 11px; padding: 5px 10px; border-radius: 100px; background: #303332; display: flex; gap: 6px; align-items: center; }
.m-lib .m-cats span.on { box-shadow: inset 0 0 0 1px #59C9A5; font-weight: 800; }
.m-lib .m-cats span i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.m-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; min-width: 0; }
.m-tile { background: #303332; border-radius: 12px; padding: 8px; font-size: 10.5px; display: grid; gap: 6px; }
.m-tile canvas, .m-tile svg { width: 100%; height: 56px; border-radius: 8px; background: #1F2221; display: block; }
.m-tile b { font-weight: 800; font-size: 11px; }

/* report */
.m-report-stage { background: #3A3D3C; display: grid; place-items: center; padding: 18px; }
.m-page { width: 100%; height: 100%; background: #FBFBF9; color: #1D201F; border-radius: 6px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); padding: 26px 28px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 16px; font-size: 11px; }
.m-page .rh { display: flex; align-items: center; gap: 14px; background: #1D201F; color: #fff; border-radius: 8px; padding: 14px 16px; }
.m-page .rh .logo { width: 44px; height: 44px; border-radius: 50%; background: #FFCD2B; color: #1D201F; display: grid; place-items: center; font-weight: 800; font-size: 10px; text-align: center; line-height: 1; }
.m-page .rh b { font-size: 17px; font-weight: 800; display: block; }
.m-page .rh span { color: #CFCFCB; }
.m-page .rgrid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; min-height: 0; }
.m-page .rimg { background: #E9ECEB; border-radius: 8px; position: relative; overflow: hidden; min-height: 0; }
.m-page .rimg canvas { width: 100%; height: 100%; display: block; }
.m-page table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.m-page th { text-align: left; background: rgba(63,192,235,0.2); padding: 6px 8px; font-weight: 800; }
.m-page td { padding: 5px 8px; border-bottom: 1px solid #E4E6E4; }
.m-page td.ok { color: #1E8A62; font-weight: 800; }
.m-page .rphotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m-page .rphotos i { aspect-ratio: 4 / 3; border-radius: 6px; display: block; }
.m-page .rsign { display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px solid #D9DBD9; padding-top: 10px; color: #55585A; }
.m-page .rsign svg { width: 160px; height: 40px; }

/* dashboard */
.m-dash { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto 1fr; }
.m-kpi { background: #2A2D2C; border-radius: 16px; padding: 16px; }
.m-kpi span { color: #A9A9A4; font-size: 12px; display: block; }
.m-kpi b { display: block; font-size: 30px; font-weight: 800; margin-top: 4px; }
.m-kpi em { font-style: normal; font-size: 11px; color: #6FF2C8; }
.m-chart { grid-column: span 3; }
.m-chart svg, .m-donut svg { width: 100%; height: 100%; display: block; }
.m-dash .m-head { grid-column: 1 / -1; }

/* phone (scanning) */
.m-phone { position: absolute; inset: 0; border-radius: 44px; background: #0B0C0C; box-shadow: 0 0 0 2px #2F2F30, 0 40px 90px rgba(0,0,0,0.55); padding: 12px; }
.m-phone .scr { width: 100%; height: 100%; border-radius: 34px; overflow: hidden; position: relative; background: #131716; }
.m-phone canvas { width: 100%; height: 100%; display: block; }
.m-phone .notch { position: absolute; top: 20px; left: 50%; width: 90px; height: 24px; margin-left: -45px; background: #000; border-radius: 20px; z-index: 2; }
.m-phone .hud { position: absolute; left: 16px; right: 16px; bottom: 22px; background: rgba(20,23,22,0.86); border-radius: 18px; padding: 12px 14px; font-size: 12px; }
.m-phone .hud b { font-weight: 800; font-size: 14px; display: block; }
.m-phone .hud .m-bar { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) { .m-unit { transition: none; } }

/* explicit placement (auto-placement mis-assigns cells around the spanning panels) */
.m-editor > .m-tabs { grid-column: 1 / -1; grid-row: 1; }
.m-editor > .m-tree { grid-column: 1; grid-row: 2 / 4; }
.m-editor > .m-canvas { grid-column: 2; grid-row: 2; }
.m-editor > .m-rail { grid-column: 3; grid-row: 2 / 4; }
.m-editor > .m-lib { grid-column: 2; grid-row: 3; }
.m-summary > .m-panel, .m-floors, .m-feed { align-content: start; }
.m-summary { grid-template-rows: auto auto minmax(0, 1fr); }
.m-page { grid-template-rows: auto minmax(0, 1fr) auto auto; }
.m-page .rgrid { align-items: stretch; }
.m-page .rphotos i { aspect-ratio: auto; height: 120px; }