/* app-card.css — the iframe that fills a card body (any app run through the card builder) +
   the one modular pop-up overlay (ozPopup) every tip uses. */

.app-frame { width: 100%; height: 100%; min-height: 440px; border: none; display: block; background: #1e1e2e; }

.oz-pop { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: var(--space-lg); background: rgba(0,0,0,.5); }
.oz-pop-box { position: relative; max-width: 380px; width: 100%; background: var(--surface-2, #1c1c22); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-lg); box-shadow: 0 12px 36px rgba(0,0,0,.55); animation: ozPopIn .14s ease-out; }
@keyframes ozPopIn { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.oz-pop-x { position: absolute; top: 8px; right: 10px; background: transparent; border: none; color: var(--text-dim); font-size: 16px; cursor: pointer; }
.oz-pop-x:hover { color: var(--text); }
.oz-pop-head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-md); }
.oz-pop-head:empty { display: none; }
.oz-pop-icon { font-size: 26px; line-height: 1; }
.oz-pop-title { font-weight: 700; color: var(--text); letter-spacing: .04em; }
.oz-pop-meta { margin-left: auto; color: var(--accent); font-weight: 700; }
.oz-pop-body { font-size: var(--fs-label); line-height: 1.55; color: var(--text); }