:root{
  --radius:18px; --max-w:720px; --elev:1500px; --dur:820ms;
  --a1:var(--accent); --a2:var(--accent-2); --overlay:var(--glass);
  --card-bg:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018)),
    linear-gradient(180deg, rgba(20,20,22,.32), rgba(10,10,12,.28));
}
/* Overlay (with safe fallback when backdrop-filter unsupported) */
.overlay{position:fixed;inset:0;z-index:9997;background:var(--overlay);backdrop-filter:blur(6px) saturate(1.05);-webkit-backdrop-filter:blur(6px) saturate(1.05);opacity:0;pointer-events:none;will-change:opacity;transform:translateZ(0);contain:paint}
.overlay.noblur{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.55)}
/* Perspective holder for WHOLE‑WINDOW transforms */
.portal{position:fixed;left:50%;top:50%;width:min(92vw,var(--max-w));transform:translate(-50%,-50%);z-index:9999;perspective:var(--elev);opacity:1;pointer-events:none;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* The actual MODAL WINDOW card */
.card{position:relative;width:100%;height:100%;border-radius:var(--radius);background:var(--card-bg);border:1px solid var(--glass-border);box-shadow:0 26px 90px rgba(0,0,0,.5);overflow:hidden;transform-style:preserve-3d;will-change:transform;pointer-events:auto;-webkit-transform-style:preserve-3d}
/* FX that stick to the card */
.aura,.sheen,.ring{position:absolute;inset:-6%;border-radius:inherit;pointer-events:none;mix-blend-mode:screen}
.aura{opacity:0;background:radial-gradient(60% 60% at 50% 50%, rgba(255,216,77,.72), rgba(255,216,77,0) 60%)}
.sheen{opacity:0;background:linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 65%)}
.ring{opacity:0;background:radial-gradient(circle, rgba(255,255,255,.5), rgba(255,255,255,0) 60%)}
/* Content (NOT rotated; only fade for reveal/close) */
.content{position:absolute;inset:0;display:flex;flex-direction:column}
.header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--glass-border)}
.title{font-weight:800;font-size:1.1rem;margin:0}
.close{background:transparent;border:0;color:var(--text);padding:.5rem;cursor:pointer;border-radius:12px}
.close:hover{background:rgba(255,255,255,.06);transform:rotate(90deg)}
.body{padding:1rem 1.25rem 1.25rem;overflow:auto;flex:1;min-height:0}
.actions{display:flex;justify-content:flex-end;gap:.5rem;padding:.8rem 1.25rem 1.1rem;border-top:1px solid var(--glass-border)}
@media (prefers-reduced-motion: reduce){.overlay,.portal,.card{transition:none !important;animation:none !important}}