html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
*, *::before, *::after { box-sizing: inherit; }
[hidden] { display: none !important; }
:root {
    --bg: #07111f;
    --bg-soft: #0d1729;
    --card: rgba(15, 23, 42, 0.8);
    --card-strong: rgba(17, 24, 39, 0.92);
    --line: rgba(255,255,255,.09);
    --text: #eef4ff;
    --muted: #aab5c9;
    --accent: #8b5cf6;
    --accent-2: #2563eb;
    --danger: #dc2626;
    --success: #16a34a;
    --shadow: 0 18px 50px rgba(0,0,0,.28);
    --radius-xl: 28px;
    --radius-lg: 20px;
    --radius-md: 14px;
}
body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(139, 92, 246, .24), transparent 26%),
        radial-gradient(circle at 95% 10%, rgba(37, 99, 235, .22), transparent 24%),
        linear-gradient(180deg, #07111f 0%, #0b1424 100%);
}
html.lightbox-open,
body.lightbox-open {
    overflow: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a, input, select, textarea { touch-action: manipulation; }
code {
    background: rgba(255,255,255,.08);
    border-radius: .6rem;
    padding: .15rem .45rem;
}
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: max(1rem, env(safe-area-inset-top)) 1rem 1rem;
    background: rgba(7, 17, 31, .75);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
}
.topbar h1 {
    margin: .2rem 0 0;
    font-size: clamp(1.65rem, 4vw, 2.7rem);
    line-height: 1.05;
}
.eyebrow,
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #d8c7ff;
    font-weight: 700;
}
.subtitle,
.section-subtitle {
    margin: .35rem 0 0;
    color: var(--muted);
    line-height: 1.6;
}
.topbar-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}
.container {
    width: min(1380px, calc(100% - 1.25rem));
    margin: 0 auto;
    padding: 1rem 0 calc(2.4rem + env(safe-area-inset-bottom));
}
.page-stack {
    display: grid;
    gap: 1rem;
}
.hero-card,
.panel,
.detail-card,
.auth-card,
.unlock-card,
.comment-card,
.card,
.stat-card,
.admin-item-card,
.muted-box,
.viewer-media-panel,
.viewer-sidebar {
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.hero-card,
.panel,
.detail-card,
.auth-card,
.unlock-card,
.comment-card,
.admin-item-card,
.muted-box,
.viewer-media-panel,
.viewer-sidebar {
    border-radius: var(--radius-xl);
}
.hero-card {
    padding: 1.2rem;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
}
.hero-copy h2 {
    margin: .55rem 0 .6rem;
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    line-height: 1.08;
}
.hero-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
    max-width: 62ch;
}
.hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}
.stat-card {
    border-radius: 22px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.stat-card strong {
    font-size: clamp(1.45rem, 4vw, 2rem);
}
.stat-card span {
    color: var(--muted);
}
.section-head {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: end;
    flex-wrap: wrap;
}
.compact-head { align-items: center; }
.section-title {
    margin: .2rem 0 0;
    font-size: clamp(1.35rem, 3vw, 2rem);
}
.filters {
    display: flex;
    gap: .7rem;
    overflow: auto;
    padding-bottom: .2rem;
}
.chip {
    white-space: nowrap;
    padding: .82rem 1rem;
    border-radius: 999px;
    color: var(--muted);
    border: 1px solid var(--line);
    background: rgba(255,255,255,.04);
}
.chip-active {
    color: white;
    border-color: transparent;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 240px));
    justify-content: center;
    gap: 1rem;
}
.card {
    overflow: hidden;
    border-radius: var(--radius-xl);
}
.gallery-card {
    display: grid;
}
.card-media {
    position: relative;
    height: clamp(190px, 24vw, 280px);
    overflow: hidden;
    background: #02060f;
}
.card-media-button {
    width: 100%;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: zoom-in;
}
.card-media img,
.card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.card:hover .card-media img,
.card:hover .card-media video {
    transform: scale(1.03);
}
.badge,
.lock-badge,
.panel-note,
.comment-counter {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .75rem;
    border-radius: 999px;
    font-size: .82rem;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(8, 14, 26, .72);
    backdrop-filter: blur(12px);
}
.badge {
    position: absolute;
    left: .8rem;
    top: .8rem;
}
.badge-inline {
    position: static;
    align-self: start;
}
.lock-badge {
    position: absolute;
    right: .8rem;
    top: .8rem;
}
.card-overlay {
    position: absolute;
    left: .8rem;
    right: .8rem;
    bottom: .8rem;
    padding: .8rem 1rem;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(5,10,18,.1), rgba(5,10,18,.82));
    color: white;
    font-weight: 700;
}
.card-content,
.detail-content,
.panel,
.auth-card,
.unlock-card,
.comment-card,
.muted-box {
    padding: 1rem;
}
.card-content {
    display: grid;
    gap: .75rem;
}
.card-head,
.admin-item-head,
.detail-meta-row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.card-content h3,
.panel h2,
.detail-content h2,
.auth-card h1,
.unlock-card h2 {
    margin: 0;
}
.card-content p,
.panel p,
.detail-content p,
.auth-card p {
    color: var(--muted);
    line-height: 1.65;
    margin: 0;
}
.card-meta,
.admin-meta,
.comment-head-inline {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    color: var(--muted);
    font-size: .92rem;
}
.mini-date {
    color: var(--muted);
    font-size: .88rem;
}
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    padding: .85rem 1rem;
    border-radius: 15px;
    border: 0;
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
    color: white;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.btn-ghost {
    color: white;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
}
.btn-danger {
    color: #fecaca;
    background: rgba(220, 38, 38, .12);
    border: 1px solid rgba(220, 38, 38, .32);
}
.text-link {
    color: #c9b9ff;
    font-weight: 600;
}
label {
    display: grid;
    gap: .45rem;
    color: #dae5fa;
}
input, textarea, select {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: white;
    padding: .9rem 1rem;
    outline: none;
}
input:focus, textarea:focus, select:focus {
    border-color: rgba(139, 92, 246, .75);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, .18);
}
textarea { resize: vertical; }
.checkbox {
    display: flex;
    align-items: center;
    gap: .7rem;
}
.checkbox input { width: auto; }
.stack-form,
.unlock-form,
.comment-form,
.comments-list,
.detail-layout,
.admin-layout,
.admin-grid,
.viewer-shell {
    display: grid;
    gap: 1rem;
}
.two-col-form,
.split-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.alert {
    border-radius: 18px;
    padding: .95rem 1rem;
    border: 1px solid var(--line);
}
.alert-error { background: rgba(220, 38, 38, .14); color: #fecaca; }
.alert-success { background: rgba(22, 163, 74, .14); color: #bbf7d0; }
.alert-info { background: rgba(37, 99, 235, .14); color: #bfdbfe; }
.empty-state {
    text-align: center;
    padding: 2rem 1rem;
}
.unlock-card-wide {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
}
.unlock-form-inline {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto;
}
.unlock-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    background: rgba(255,255,255,.05);
}
.detail-card {
    overflow: hidden;
}
.media-detail-card {
    display: grid;
    gap: 0;
}
.detail-media {
    background: rgba(0,0,0,.2);
    min-height: 220px;
    display: grid;
    gap: .85rem;
    align-items: center;
    justify-items: center;
    padding: 1rem;
}
.detail-media img,
.detail-media video,
.media-zoom-btn {
    width: 100%;
}
.detail-media img,
.detail-media video {
    max-height: 78vh;
    object-fit: contain;
    margin: 0 auto;
}
.media-zoom-btn {
    display: block;
    border: 0;
    background: none;
    padding: 0;
    cursor: zoom-in;
    width: 100%;
    border-radius: 22px;
    overflow: hidden;
}
.comment-card p,
.comment-admin-row p {
    margin: .5rem 0 0;
    color: var(--text);
    line-height: 1.65;
}
.comment-author {
    display: flex;
    gap: .8rem;
    align-items: center;
}
.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: white;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.auth-body {
    display: grid;
    place-items: center;
    padding: 1rem;
}
.auth-card {
    width: min(560px, 100%);
}
.auth-card-large {
    padding: 1.25rem;
}
.admin-grid {
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}
.panel-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.upload-preview {
    min-height: 170px;
    border-radius: 20px;
    border: 1px dashed rgba(255,255,255,.16);
    background: rgba(255,255,255,.02);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.upload-preview-placeholder {
    color: var(--muted);
    text-align: center;
    padding: 1rem;
}
.upload-preview-inner {
    width: 100%;
    display: grid;
    gap: .75rem;
    padding: .85rem;
}
.upload-preview-media {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    border-radius: 18px;
}
.upload-preview-meta {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    color: var(--muted);
    font-size: .92rem;
}
.admin-list {
    display: grid;
    gap: 1rem;
}
.admin-item-card {
    display: grid;
    grid-template-columns: minmax(160px, 220px) 1fr;
    gap: 1rem;
    padding: 1rem;
}
.admin-preview {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 22px;
    background: rgba(255,255,255,.03);
}
.admin-preview img,
.admin-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.inline-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin: 1rem 0;
}
.inline-actions form {
    display: inline-flex;
}
.admin-comments {
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.08);
}
.comment-admin-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: .95rem 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.comment-admin-row:last-child { border-bottom: 0; }
.muted { color: var(--muted); }
.muted-box {
    color: var(--muted);
}
.detail-media-hint {
    color: var(--muted);
    font-size: .95rem;
    text-align: center;
}
.detail-extra-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1rem 0;
}
.comment-two-col {
    align-items: start;
}
.inline-actions-compact {
    margin-top: 1rem;
}
.viewer-header-nav {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}
.viewer-title {
    margin-bottom: 0;
}
.viewer-nav-inline,
.viewer-footer-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: center;
}
.viewer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 420px);
    gap: 1rem;
    align-items: stretch;
}
.viewer-media-panel,
.viewer-sidebar {
    overflow: hidden;
    min-height: calc(100vh - 210px);
    max-height: calc(100vh - 210px);
}
.viewer-media-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}
.viewer-sidebar {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
}
.viewer-media-meta,
.viewer-media-footer,
.viewer-sidebar-head,
.viewer-comment-form {
    padding: 1rem;
}
.viewer-media-meta,
.viewer-sidebar-head,
.viewer-comment-form {
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.viewer-media-scroll,
.viewer-comments-list {
    min-height: 0;
    scrollbar-width: thin;
}
.viewer-comments-list {
    overflow: auto;
}
.viewer-media-scroll {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0,0,0,.22);
    overflow: hidden;
}
.viewer-media-scroll img,
.viewer-media-scroll video {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 22px;
}
.viewer-media-scroll video {
    width: min(100%, 1280px);
}
.viewer-media-button {
    display: inline-flex;
    padding: 0;
    margin: 0 auto;
    background: transparent;
    border: 0;
    cursor: zoom-in;
}
.viewer-media-frame {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.viewer-media-frame img,
.viewer-media-frame video {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 22px;
}
.viewer-media-frame-video video {
    width: min(100%, 1280px);
}
.viewer-zoom-hotspot {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 5;
    min-height: 46px;
    padding: .8rem 1rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(8, 14, 26, .78);
    color: white;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(0,0,0,.3);
    cursor: pointer;
}
.viewer-zoom-hotspot-video {
    bottom: 1.25rem;
}
.viewer-media-footer p {
    margin: 0;
}
.viewer-comments-list {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}
.viewer-comment-form {
    gap: .85rem;
}
.viewer-comment-form textarea {
    min-height: 132px;
}
.comment-status {
    border-radius: 14px;
    padding: .85rem .95rem;
    border: 1px solid rgba(255,255,255,.10);
    font-size: .95rem;
}
.comment-status.is-working {
    background: rgba(37, 99, 235, .14);
    color: #bfdbfe;
}
.comment-status.is-success {
    background: rgba(22, 163, 74, .14);
    color: #bbf7d0;
}
.comment-status.is-error {
    background: rgba(220, 38, 38, .14);
    color: #fecaca;
}
.viewer-media-scroll::-webkit-scrollbar,
.viewer-comments-list::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.viewer-media-scroll::-webkit-scrollbar-thumb,
.viewer-comments-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.16);
    border-radius: 999px;
}
.viewer-media-scroll::-webkit-scrollbar-track,
.viewer-comments-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,.05);
}
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
    background: rgba(3, 7, 14, .96);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
}
.lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.lightbox-stage {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 4rem 1rem 1rem;
}
.lightbox-image {
    display: block;
    margin: auto;
    max-width: min(1400px, 100%);
    max-height: none;
    object-fit: contain;
    border-radius: 18px;
}
.lightbox-message {
    color: var(--muted);
    text-align: center;
}
.lightbox-close {
    position: absolute;
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    z-index: 10001;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.08);
    color: white;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.upload-status {
    padding: .9rem 1rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: var(--muted);
    font-size: .95rem;
}
.upload-status.is-working {
    color: #bfdbfe;
    border-color: rgba(96,165,250,.35);
    background: rgba(59,130,246,.12);
}
.upload-status.is-success {
    color: #bbf7d0;
    border-color: rgba(34,197,94,.35);
    background: rgba(34,197,94,.12);
}
.upload-status.is-warning {
    color: #fde68a;
    border-color: rgba(245,158,11,.35);
    background: rgba(245,158,11,.12);
}
.upload-status.is-error {
    color: #fecaca;
    border-color: rgba(239,68,68,.35);
    background: rgba(239,68,68,.12);
}
@media (max-width: 1200px) {
    .viewer-layout {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    }
}
@media (max-width: 1024px) {
    .hero-card,
    .admin-item-card,
    .unlock-card-wide,
    .viewer-layout {
        grid-template-columns: 1fr;
    }
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 220px));
    }
    .card-media {
        height: clamp(180px, 28vw, 250px);
    }
    .viewer-media-panel,
    .viewer-sidebar {
        min-height: auto;
        max-height: none;
    }
}
@media (max-width: 760px) {
    .topbar,
    .comment-admin-row,
    .admin-item-head,
    .panel-head,
    .viewer-header-nav,
    .viewer-nav-inline,
    .viewer-footer-actions {
        flex-direction: column;
    }
    .topbar-actions,
    .topbar-actions .btn,
    .topbar .btn-ghost,
    .viewer-nav-inline .btn,
    .viewer-footer-actions .btn {
        width: 100%;
    }
    .hero-stats,
    .two-col-form,
    .split-fields,
    .unlock-form-inline,
    .gallery-grid {
        grid-template-columns: 1fr;
    }
    .container {
        width: min(100%, calc(100% - 1rem));
    }
    .card-media {
        height: clamp(210px, 62vw, 270px);
    }
    .detail-extra-meta,
    .comment-two-col {
        grid-template-columns: 1fr;
    }
    .detail-media,
    .viewer-media-scroll {
        padding: .75rem;
    }
    .lightbox {
        padding: max(.75rem, env(safe-area-inset-top)) .75rem max(.75rem, env(safe-area-inset-bottom));
    }
    .lightbox-stage {
        padding: 4.25rem .25rem 1rem;
    }
}

.viewer-page-main {
    min-height: calc(100svh - 120px);
}
.viewer-shell-fullscreen {
    min-height: 100%;
}
.viewer-layout-tight {
    min-height: calc(100svh - 240px);
}
.viewer-media-stage {
    position: relative;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
}
.viewer-media-scroll-fit {
    min-height: min(68vh, 760px);
    max-height: min(68vh, 760px);
    overflow: hidden;
}
.viewer-arrow,
.standalone-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 2rem;
    color: white;
    background: rgba(8, 14, 26, .72);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.viewer-arrow-left,
.standalone-arrow-left { left: 1rem; }
.viewer-arrow-right,
.standalone-arrow-right { right: 1rem; }
.viewer-media-button-video {
    cursor: pointer;
}
.storage-panel {
    display: grid;
    gap: 1rem;
}
.storage-bar {
    position: relative;
    width: 100%;
    height: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.08);
}
.storage-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.storage-bar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem 1.2rem;
    color: var(--muted);
}
.standalone-viewer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(3, 7, 14, .985);
    transition: opacity .18s ease, visibility .18s ease;
    padding: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
    overflow: hidden;
    height: calc(var(--app-vh, 1vh) * 100);
}
.standalone-viewer.is-open {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.standalone-inner {
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 430px);
    gap: 1rem;
    overflow: hidden;
    align-items: stretch;
}
.standalone-media-panel,
.standalone-comments {
    min-height: 0;
    height: 100%;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.045);
    overflow: hidden;
}
.standalone-media-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}
.standalone-head,
.standalone-foot,
.standalone-sidebar-head {
    padding: 1rem 1.1rem;
}
.standalone-head,
.standalone-sidebar-head,
.standalone-comments .viewer-comment-form {
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.standalone-foot {
    max-height: 26vh;
    overflow: auto;
}
.standalone-stage {
    position: relative;
    min-height: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 4.75rem;
    overflow: hidden;
}
.standalone-stage img,
.standalone-stage video {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 22px;
}
.standalone-stage video {
    width: min(100%, 1280px);
}
.standalone-comments {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 0;
}
.standalone-comments-list {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}
.viewer-nav-inline-tight {
    align-items: center;
}
.btn-small {
    min-height: 40px;
    padding: .65rem .95rem;
}

.standalone-close {
    position: absolute;
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    z-index: 10001;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.10);
    color: white;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 26px rgba(0,0,0,.3);
}
@media (max-width: 1200px) {
    .standalone-inner {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    }
    .viewer-media-scroll-fit {
        min-height: min(62vh, 680px);
    }
}
@media (max-width: 1024px) {
    .viewer-page-main {
        min-height: auto;
    }
    .viewer-layout-tight {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .standalone-inner {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) minmax(280px, 40dvh);
        height: 100%;
    }
    .standalone-viewer {
        overflow: hidden;
    }
    .standalone-media-panel,
    .standalone-comments {
        min-height: 0;
    }
    .standalone-stage {
        padding: 1rem 1.4rem;
    }
    .standalone-stage img,
    .standalone-stage video {
        max-height: 100%;
    }
}
@media (max-width: 760px) {
    .storage-bar-meta {
        flex-direction: column;
        align-items: flex-start;
    }
    .viewer-zoom-hotspot {
        right: .75rem;
        bottom: .75rem;
        min-height: 42px;
        padding: .72rem .9rem;
        font-size: .92rem;
    }
    .viewer-arrow,
    .standalone-arrow {
        width: 50px;
        height: 50px;
        font-size: 1.8rem;
        top: calc(50% - 18px);
        background: rgba(8, 14, 26, .82);
    }
    .viewer-arrow-left,
    .standalone-arrow-left { left: .45rem; }
    .viewer-arrow-right,
    .standalone-arrow-right { right: .45rem; }
    .viewer-media-scroll-fit {
        min-height: min(48vh, 420px);
    }
    .standalone-inner {
        grid-template-rows: minmax(0, 1fr) minmax(240px, 42dvh);
        gap: .75rem;
    }
    .standalone-stage {
        padding: .75rem 1rem;
    }
    .standalone-stage img,
    .standalone-stage video {
        max-height: 100%;
    }
    .standalone-close {
        width: 50px;
        height: 50px;
    }
}

.standalone-nav-strip {
    padding: 0 1.1rem 1rem;
    border-top: 1px solid rgba(255,255,255,.08);
}
.standalone-nav-strip .btn {
    min-width: 180px;
}
.standalone-arrow {
    text-decoration: none;
    font-weight: 700;
}