.portal-preview {
    position: fixed;
    inset: 50% auto auto 50%;
    width: min(1800px, calc(100vw - 28px));
    height: min(1040px, calc(100dvh - 24px));
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-radius: 12px;
    background: #111620;
    color: var(--text);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.72);
}

.portal-preview::backdrop {
    background: rgba(5, 8, 13, 0.84);
    backdrop-filter: blur(3px);
}

.portal-preview__shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 12px;
    width: 100%;
    height: 100%;
    padding: 18px;
}

.portal-preview__header,
.portal-preview__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.portal-preview__header h3 { margin: 0; }
.portal-preview__footer { justify-content: flex-end; }
.portal-preview__close { width: 40px; height: 40px; padding: 0; font-size: 1.35rem; }
.portal-preview__viewer { min-height: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: #090d13; }
.portal-preview__frame,
.portal-preview__image,
.portal-preview__media { width: 100%; height: 100%; border: 0; }
.portal-preview__frame { background: #fff; }
.portal-preview__frame--video { background: #000; }
.portal-preview__image,
.portal-preview__media { object-fit: contain; }
.portal-preview__audio { width: min(760px, calc(100% - 32px)); margin: 40px auto; display: block; }
.portal-preview__status { min-height: 1.2em; margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm); }
.portal-preview__secondary { background: #202735; color: var(--text); }
.portal-preview__external {
    align-items: center;
    display: inline-flex;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    text-decoration: none;
}
.portal-preview__external:hover,
.portal-preview__external:focus-visible { border-color: rgba(212, 175, 55, 0.65); }

@media (max-width: 720px) {
    .portal-preview { width: calc(100vw - 20px); height: calc(100dvh - 20px); }
    .portal-preview__shell { padding: 12px; }
}