/** * ZES QRE unified Modal Engine — fixed full-viewport overlay, centered panel. * * Authoritative styling for every popup/dialog/overlay. The matching runtime, * js/modal-engine.js, also injects these critical rules directly into * and portals overlays onto , so popups can never fall back to inline * rendering (or get trapped in a parent stacking context) even if this file * fails to load. */ @import url('tokens.css'); :root { --qre-modal-backdrop: rgba(0, 0, 0, 0.5); --qre-modal-blur: blur(8px); --qre-modal-z: 9999; --qre-modal-panel-max-h: 85vh; --qre-modal-panel-radius: var(--radius-lg, 12px); --qre-modal-panel-shadow: var(--shadow-lg); } /* ===== Overlay: fixed to the viewport, hidden until .active ===== */ .qre-modal-overlay, .modal-overlay, .sd-overlay, .admin-tool-modal, .qre-app-launcher, .op-modal, .op-modal-overlay, .login-overlay, .ss-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; inset: 0; margin: 0; z-index: var(--qre-modal-z); /* Full-screen glassmorphism backdrop */ background: var(--qre-modal-backdrop); backdrop-filter: var(--qre-modal-blur); -webkit-backdrop-filter: var(--qre-modal-blur); /* Center the modal window */ justify-content: center; align-items: center; padding: clamp(12px, 2vw, 24px); overflow: hidden; overscroll-behavior: contain; } .qre-modal-overlay.active, .modal-overlay.active, .sd-overlay.active, .admin-tool-modal.active, .qre-app-launcher.active, .op-modal.active, .op-modal-overlay.active, .login-overlay.active, .ss-modal-overlay.active { display: flex; } /* App launcher uses an inner backdrop layer — same full-cover spec */ .qre-app-launcher-backdrop { position: absolute; inset: 0; background: var(--qre-modal-backdrop); backdrop-filter: var(--qre-modal-blur); -webkit-backdrop-filter: var(--qre-modal-blur); } /* ===== Centered modal window — sits above the backdrop ===== */ .qre-modal-panel, .modal-box, .sd-box, .admin-tool-panel, .qre-app-launcher-panel, .op-modal-box, .login-box, .ss-modal-box { position: relative; z-index: calc(var(--qre-modal-z) + 1); margin: auto; background: var(--color-surface, var(--brand-surface, #fff)); color: var(--color-text, var(--text-main)); border-radius: var(--qre-modal-panel-radius); box-shadow: var(--qre-modal-panel-shadow); border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12)); max-height: var(--qre-modal-panel-max-h); overflow-y: auto; overscroll-behavior: contain; animation: qreModalPop 0.2s ease-out; } @keyframes qreModalPop { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ===== Body scroll lock while any modal is open ===== */ body.qre-modal-open { overflow: hidden; }