/* Glass modals: same layers as the sidebar (blur + tint + rim, warm accent fade at the bottom,
   diagonal sheen, cursor light). Tokens come from glass_core.css. Selectors are one notch more
   specific than the pages' own .modal rules so inline <style> blocks cannot win. */
html .modal-bg { background: rgba(10, 8, 6, .4); }
.modal-bg .modal, .cg-ov .cg-modal, .sheet, #attachModal > div, .cg-ov .cg-dlg, .cb-panel {
    background:
        radial-gradient(220px circle at var(--mx, -999px) var(--my, -999px), var(--gs-cursor), transparent 70%),
        linear-gradient(164deg, transparent 35%, color-mix(in srgb, var(--gs-sheen) 35%, transparent) 50%, transparent 65%),
        linear-gradient(0deg, color-mix(in srgb, var(--gs-accent) 34%, transparent), transparent 45%),
        var(--gs-tint) !important;
    border: 1px solid var(--gs-border) !important;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), inset 0 1px 0 var(--gs-rim) !important;
    backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%);
    border-radius: 30px !important;
}
.cg-ov .cg-modal { overflow: hidden; }
/* chat panel: bottom sheet on phones, floating glass card from 600px */
.cb-panel { border-radius: 30px 30px 0 0 !important; overflow: hidden; }
@media (min-width: 600px) { .cb-panel { border-radius: 30px !important; } }
.cg-ov .cg-mh { background: rgba(17, 17, 17, .82); }
/* open: same springy ease as the sidebar */
.modal-bg.open .modal, .modal.open .sheet, .cg-ov.on .cg-modal, .cg-ov.on .cg-dlg, body .cb-panel.cb-open, #attachModal[style*="flex"] > div { animation: gm-in .42s cubic-bezier(.22, 1, .36, 1); }
@keyframes gm-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal-bg.open .modal, .modal.open .sheet, .cg-ov.on .cg-modal, .cg-ov.on .cg-dlg, .cb-panel.cb-open, #attachModal > div { animation: none; } }
/* light-themed content (dark text): keep the glass but more opaque so dense data stays legible */
.cg-ov .cg-modal, .sheet, .cg-ov .cg-dlg { --gs-tint: rgba(255, 255, 255, .84); }

/* ── Product tiles (shop catalog, software): same layers; no backdrop blur (flat page behind them, and
   24+ blurred cards would be heavy on phones). The cursor light sits above the photo. ── */
.product-card {
    background:
        linear-gradient(164deg, transparent 35%, color-mix(in srgb, var(--gs-sheen) 35%, transparent) 50%, transparent 65%),
        linear-gradient(0deg, color-mix(in srgb, var(--gs-accent) 7%, transparent), transparent 45%),
        var(--gs-tint);
    border: 1px solid var(--gs-border);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), inset 0 1px 0 var(--gs-rim);
    border-radius: 22px;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}
.product-card::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
    background: radial-gradient(220px circle at var(--mx, -999px) var(--my, -999px), var(--gs-cursor), transparent 70%);
}
.product-card:hover { border-color: var(--gs-border); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), inset 0 1px 0 var(--gs-rim), 0 0 24px var(--green-glow); }