/* ============================================================
   ZLS Laboratory V3 — Layout Shell
   Full viewport · Top Bar · Main Area · Bottom Bar
   Zero page scroll — only inner panels scroll
   ============================================================ */

/* ── App Shell: fills entire viewport ── */
.zls-app {
    display: flex;
    flex-direction: column;
    height: 100vh;                   /* fallback */
    height: -webkit-fill-available;  /* older iOS */
    height: 100svh;                  /* ← fits inside ALL browser bars */
    width: 100vw;
    overflow: hidden;
}

/* ── Initial Entry Animations for Layout Assembly ── */
@keyframes slideInTop {
    0% { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideInBottom {
    0% { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideInLeft {
    0% { transform: translateX(-100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes fadeContentIn {
    0% { opacity: 0; transform: scale(0.98); filter: blur(3px); }
    100% { opacity: 1; transform: scale(1); filter: blur(0px); }
}

/* ═══════════════════════════════════════════
   TOP BAR — "ZLS Laboratory | [SECTION]"
   ═══════════════════════════════════════════ */
.zls-topbar {
    flex-shrink: 0;
    height: var(--bar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--sp-4);
    background-color: var(--bg-bar);
    border-bottom: var(--border-panel);
    z-index: var(--z-bar);
    user-select: none;
    
    /* Reveal 1: Instant */
    animation: slideInTop 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.zls-topbar__title {
    font-family: var(--ff-cli);
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-gray-100);
}

.zls-topbar__title strong {
    color: var(--clr-white);
    font-weight: var(--fw-bold);
}

.zls-topbar__title .sep {
    color: var(--clr-gray-300);
    margin: 0 var(--sp-2);
}

.zls-topbar__title .section-name {
    color: var(--clr-red);
}

.zls-topbar__meta {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    font-family: var(--ff-cli);
    font-size: var(--fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-gray-300);
}

.zls-topbar__meta .status-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--clr-online);
    margin-right: var(--sp-1);
    box-shadow: 0 0 4px var(--clr-online);
}

/* ── Topbar right section ── */
.zls-topbar__right {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
}

/* ── Mini Audio Player ── */
.zls-player {
    display: flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--clr-gray-400);
    padding: 2px 4px;
}

.zls-player__btn {
    font-size: 10px;
    width: 24px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-gray-300);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s, text-shadow 0.15s;
    padding: 0;
    line-height: 1;
}

.zls-player__btn:hover {
    color: var(--clr-white);
}

.zls-player__btn--hidden {
    display: none;
}

/* Playing state — play button swaps with pause */
.zls-player.is-playing #player-play {
    display: none;
}

.zls-player.is-playing #player-pause {
    display: flex;
}

.zls-player.is-playing #player-pause {
    color: var(--clr-red);
    text-shadow: 0 0 6px hsla(0, 70%, 50%, 0.4);
}

/* ── Spectrum Bars ── */
.zls-player__spectrum {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    margin-right: 4px;
}

.zls-player__spectrum span {
    width: 2px;
    height: 3px;
    background: var(--clr-gray-400);
    transition: background 0.3s;
}

/* Animate only when playing */
.zls-player.is-playing .zls-player__spectrum span {
    background: var(--clr-red);
    animation: spectrum-bounce 0.6s ease-in-out infinite alternate;
    box-shadow: 0 0 3px hsla(0, 70%, 50%, 0.3);
}

.zls-player.is-playing .zls-player__spectrum span:nth-child(1) {
    animation-duration: 0.5s;
}
.zls-player.is-playing .zls-player__spectrum span:nth-child(2) {
    animation-duration: 0.35s;
    animation-delay: 0.1s;
}
.zls-player.is-playing .zls-player__spectrum span:nth-child(3) {
    animation-duration: 0.45s;
    animation-delay: 0.15s;
}
.zls-player.is-playing .zls-player__spectrum span:nth-child(4) {
    animation-duration: 0.55s;
    animation-delay: 0.05s;
}

@keyframes spectrum-bounce {
    0%   { height: 3px; }
    100% { height: 14px; }
}

/* ═══════════════════════════════════════════
   MAIN AREA — Fills remaining vertical space
   ═══════════════════════════════════════════ */
.zls-main {
    flex: 1;
    display: flex;
    overflow: hidden;         /* panels handle their own scroll */
    min-height: 0;            /* flex shrink fix */
}

/* ── Sidebar (left panel) ── */
.zls-sidebar {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-base);
    border-right: var(--border-panel);
    overflow: hidden;
    
    /* Reveal 2: After Top/Bot bars */
    opacity: 0; /* Pre-hide to prevent flash */
    animation: slideInLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.4s;
}

.zls-sidebar__header {
    flex-shrink: 0;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 var(--sp-4);
    border-bottom: var(--border-subtle);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-gray-200);
}

.zls-sidebar__content {
    flex: 1;
    overflow-y: auto;         /* ← THIS scrolls */
    padding: var(--sp-2);
}

/* Sidebar nav items */
.zls-sidebar__item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    letter-spacing: 0.04em;
    color: var(--clr-gray-100);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.zls-sidebar__item:hover {
    background-color: var(--bg-elevated);
    border-color: var(--clr-gray-400);
    color: var(--clr-white);
}

.zls-sidebar__item.is-active {
    background-color: var(--bg-elevated);
    border-color: var(--clr-gray-300);
    color: var(--clr-white);
}

.zls-sidebar__item-icon {
    font-size: var(--fs-base);
    color: var(--clr-gray-300);
    width: 18px;
    text-align: center;
}

.zls-sidebar__item.is-active .zls-sidebar__item-icon {
    color: var(--clr-red);
}

/* ── Content Area (right/center panel) ── */
.zls-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    
    /* Reveal 3: After Sidebar is ready */
    opacity: 0;
    animation: fadeContentIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.8s;
}

.zls-content__header {
    flex-shrink: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--sp-5);
    border-bottom: var(--border-subtle);
    background: var(--bg-base);
}

.zls-content__title {
    font-family: var(--ff-cli);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-white);
}

/* Diagonal hatch decoration (RE style //////) */
.zls-content__title::after {
    content: ' ///////////////';
    color: var(--clr-gray-400);
    font-weight: var(--fw-regular);
}

.zls-content__body {
    flex: 1;
    overflow-y: auto;         /* ← THIS scrolls */
    padding: var(--sp-5);
    display: flex;
    gap: var(--sp-5);
}

/* ── Placeholder Panels ── */
.zls-panel {
    background: var(--bg-surface);
    border: var(--border-panel);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.zls-panel--list {
    width: 45%;
    flex-shrink: 0;
}

.zls-panel--detail {
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* Red scan line on detail panel */
.zls-panel--detail::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--clr-red), transparent);
    animation: detail-scan 4s linear infinite;
    opacity: 0.5;
    pointer-events: none;
    z-index: 2;
}

@keyframes detail-scan {
    0%   { top: 0; }
    100% { top: 100%; }
}

.zls-panel__header {
    flex-shrink: 0;
    padding: var(--sp-2) var(--sp-4);
    border-bottom: var(--border-subtle);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-gray-200);
    background: var(--bg-elevated);
}

/* Back button: hidden on desktop, shown on mobile via media query */
.zls-back-btn {
    display: none;
}

.zls-panel--detail .zls-panel__body {
    overflow: hidden;         /* no scroll by default */
}

.zls-panel--detail.is-expanded .zls-panel__body {
    overflow-y: auto;         /* scroll only when expanded */
}

.zls-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-3);
}

/* Placeholder items in list panel */
.zls-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: var(--border-subtle);
    font-size: var(--fs-sm);
    color: var(--clr-gray-100);
    cursor: pointer;
    transition: background-color 0.15s;
    position: relative;
    overflow: hidden;
}

.zls-list-item:last-child {
    border-bottom: none;
}

.zls-list-item:hover {
    background-color: var(--bg-elevated);
}

.zls-list-item.is-selected {
    background-color: var(--bg-elevated);
    border-left: 2px solid var(--clr-red);
}

.zls-list-item__name {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.zls-list-item__icon {
    color: var(--clr-gray-300);
    font-size: var(--fs-sm);
}

.zls-list-item__label {
    font-family: var(--ff-cli);
    transition: color 0.2s;
}

.zls-list-item__value {
    font-size: var(--fs-xs);
    color: var(--clr-gray-300);
    font-family: var(--ff-cli);
    letter-spacing: 0.06em;
    transition: color 0.3s;
}

/* ── File Decryption Progress Bar (inside each list item) ── */
.zls-file-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: var(--clr-white);
    box-shadow: 0 0 6px hsla(0, 0%, 100%, 0.4);
    transition: width 0.08s linear;
    z-index: 1;
}

/* ── Decrypting state: label pulses ── */
.zls-list-item.is-decrypting .zls-list-item__label {
    color: var(--clr-gray-200);
    animation: decrypt-pulse 0.4s ease infinite;
}

.zls-list-item.is-decrypting .zls-list-item__icon {
    color: var(--clr-red);
}

@keyframes decrypt-pulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

/* ── Decrypted state: green accents ── */
.zls-list-item.is-decrypted .zls-list-item__icon {
    color: var(--clr-online);
}

/* Detail placeholder */
.zls-detail-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: var(--fs-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clr-gray-400);
}


/* ═══════════════════════════════════════════
   BOTTOM BAR — Channel indicators
   ═══════════════════════════════════════════ */
.zls-bottombar {
    flex-shrink: 0;
    height: var(--bar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--sp-4);
    background-color: var(--bg-bar);
    border-top: var(--border-panel);
    z-index: var(--z-bar);
    user-select: none;
    
    /* Reveal 1: Instant */
    opacity: 0;
    animation: slideInBottom 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.zls-bottombar__left,
.zls-bottombar__right {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    font-family: var(--ff-cli);
    font-size: var(--fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-gray-300);
}

.zls-channel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--sp-2);
    border: 1px solid var(--clr-gray-400);
    font-family: var(--ff-cli);
    font-size: var(--fs-micro);
    color: var(--clr-gray-300);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

a.zls-channel:hover {
    border-color: var(--clr-gray-200);
    color: var(--clr-white);
}

.zls-channel.is-active {
    border-color: var(--clr-gray-200);
    color: var(--clr-white);
}

.zls-channel.is-soon {
    cursor: default;
    opacity: 0.5;
}

/* Status dot indicators */
.zls-channel__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.zls-channel__dot--online {
    background: hsl(130, 60%, 50%);
    box-shadow: 0 0 4px hsl(130, 60%, 50%);
}

.zls-channel__dot--offline {
    background: hsl(0, 70%, 50%);
    box-shadow: 0 0 4px hsl(0, 70%, 50%);
}

/* ═══════════════════════════════════════════
   HAMBURGER BUTTON (hidden on desktop)
   ═══════════════════════════════════════════ */
.zls-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 28px;
    height: 28px;
    padding: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.zls-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--clr-gray-200);
    transition: transform 0.25s, opacity 0.25s;
}

/* Animated X state */
.zls-hamburger.is-open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.zls-hamburger.is-open span:nth-child(2) {
    opacity: 0;
}
.zls-hamburger.is-open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Top bar left group */
.zls-topbar__left {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

/* ═══════════════════════════════════════════
   MOBILE OVERLAY BACKDROP
   ═══════════════════════════════════════════ */
.zls-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: hsla(0, 0%, 0%, 0.6);
    z-index: calc(var(--z-bar) + 1);
    opacity: 0;
    transition: opacity 0.25s;
}

.zls-overlay.is-visible {
    display: block;
    opacity: 1;
}

/* ═══════════════════════════════════════════
   RESPONSIVE: Tablet portrait (769px – 1024px)
   iPad Air 820×1180, iPad 810×1080, etc.
   ═══════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Narrower sidebar */
    .zls-sidebar {
        width: 180px;
    }

    /* Stack panels vertically */
    .zls-content__body {
        flex-direction: column;
        padding: var(--sp-3);
        gap: var(--sp-3);
    }

    /* List panel: top, compact */
    .zls-panel--list {
        width: 100%;
        max-height: 35%;
        flex-shrink: 0;
    }

    /* Detail panel: fills remaining space */
    .zls-panel--detail {
        flex: 1;
        min-height: 0;
    }

    /* Preview doesn't over-expand */
    .zls-detail-card__preview {
        max-height: 20vh;
    }

    /* Hide last meta item to save space */
    .zls-topbar__meta span:last-child {
        display: none;
    }

    /* Gallery adapts — 3 columns on tablet */
    .zls-gallery__grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(100px, 1fr);
    }

    /* Lightbox adapts */
    .zls-lightbox__container {
        width: 85vw;
        height: 70vh;
    }
}

/* ═══════════════════════════════════════════
   RESPONSIVE: Tablet (≤ 768px)
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Show hamburger */
    .zls-hamburger {
        display: flex;
    }

    /* Sidebar becomes slide-in overlay */
    .zls-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 240px;
        z-index: calc(var(--z-bar) + 2);
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        
        /* Disable desktop entry animation so it stays hidden on mobile */
        animation: none;
        opacity: 1;
    }

    .zls-sidebar.is-open {
        transform: translateX(0);
    }

    /* ── Master-Detail Pattern ──
       Both panels use position:absolute to guarantee
       100% height fill regardless of flex quirks.
       Default: LIST visible, DETAIL offscreen-right.
    */
    .zls-content__body {
        position: relative;
        overflow: hidden;
        padding: 0;
        gap: 0;
    }

    /* LIST — fills entire content body */
    .zls-panel--list {
        position: absolute;
        inset: 0;              /* fills 100% parent */
        width: auto;
        border: none;
        background: var(--bg-surface);
        display: flex;
        flex-direction: column;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 0.2s;
    }

    .zls-panel--list .zls-panel__body {
        flex: 1;
        overflow-y: auto;
    }

    /* DETAIL — offscreen right */
    .zls-panel--detail {
        position: absolute;
        inset: 0;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1;
        display: flex;
        flex-direction: column;
        background: var(--bg-surface);
        border: none;
    }

    .zls-panel--detail .zls-panel__body {
        flex: 1;
        overflow-y: auto;
    }

    /* When detail is active */
    .zls-content__body.is-detail-view .zls-panel--list {
        transform: translateX(-30%);
        opacity: 0;
        pointer-events: none;
    }

    .zls-content__body.is-detail-view .zls-panel--detail {
        transform: translateX(0);
    }

    /* Back button — visible only on mobile */
    .zls-back-btn {
        display: flex;
    }

    /* Touch-friendly list items (56px = Apple HIG) */
    .zls-list-item {
        min-height: 56px;
        padding: var(--sp-3) var(--sp-4);
        font-size: var(--fs-sm);
    }

    .zls-panel__header {
        flex-shrink: 0;
        min-height: 40px;
    }

    /* Hide desktop metadata */
    .zls-topbar__meta {
        display: none;
    }

    .zls-bottombar__right {
        display: none;
    }

    /* Lightbox adapts */
    .zls-lightbox__container {
        width: 92vw;
        height: 75vh;
        height: 75svh;
    }
}

/* ═══════════════════════════════════════════
   RESPONSIVE: Small phones (≤ 480px)
   ═══════════════════════════════════════════ */
@media (max-width: 480px) {
    /* Compact top bar */
    .zls-topbar {
        padding: 0 var(--sp-2);
    }

    .zls-topbar__title strong {
        display: none;   /* hide "ZLS Laboratory" — just show section */
    }

    .zls-topbar__title .sep {
        display: none;
    }

    /* Sidebar narrower */
    .zls-sidebar {
        width: 200px;
    }

    /* Gallery — 2 columns on small phones */
    .zls-gallery {
        padding: var(--sp-2);
    }

    .zls-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(80px, 1fr);
        gap: var(--sp-2);
    }

    /* Lightbox nearly full screen */
    .zls-lightbox__container {
        width: 96vw;
        height: 80vh;
        height: 80svh;
    }

    .zls-lightbox__body {
        padding: var(--sp-2);
    }

    /* Bottom bar compact */
    .zls-bottombar {
        padding: 0 var(--sp-2);
    }

    .zls-bottombar__left {
        font-size: var(--fs-micro);
    }
}

/* ═══════════════════════════════════════════
   RESPONSIVE: Ultra-small / low-end (≤ 320px)
   WCAG 2.1 Reflow compliance
   ═══════════════════════════════════════════ */
@media (max-width: 320px) {
    /* Scale down font for readability */
    :root {
        font-size: 14px;
    }

    .zls-topbar__title .section-name {
        font-size: var(--fs-micro);
    }

    /* Sidebar even narrower */
    .zls-sidebar {
        width: 180px;
    }

    .zls-sidebar__item {
        padding: var(--sp-1) var(--sp-2);
        font-size: var(--fs-xs);
    }

    /* Gallery 2 columns minimum */
    .zls-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Detail card compact */
    .zls-detail-card {
        padding: var(--sp-2);
        gap: var(--sp-2);
    }

    .zls-detail-card__title {
        font-size: var(--fs-sm);
    }

    .zls-detail-card__desc {
        font-size: var(--fs-xs);
    }

    /* Settings compact */
    .zls-setting-item {
        padding: var(--sp-2);
        flex-wrap: wrap;
        gap: var(--sp-2);
    }

    /* Lightbox full screen */
    .zls-lightbox__container {
        width: 100vw;
        height: 85vh;
    }

    .zls-lightbox__header,
    .zls-lightbox__nav {
        padding: var(--sp-1) var(--sp-2);
    }
}

/* ═══════════════════════════════════════════
   RESPONSIVE: Mobile Landscape
   Detects phones rotated horizontally (wide but SHORT)
   ═══════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {
    /* Compact top bar */
    .zls-topbar {
        height: 28px;
        padding: 0 var(--sp-2);
    }

    .zls-topbar__title {
        font-size: var(--fs-micro);
    }

    .zls-topbar__meta {
        display: none;
    }

    /* Show hamburger (sidebar hidden by default) */
    .zls-hamburger {
        display: flex;
        width: 22px;
        height: 22px;
    }

    /* Sidebar as overlay in landscape too */
    .zls-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 200px;
        z-index: calc(var(--z-bar) + 2);
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        
        /* Disable entry animation */
        animation: none;
        opacity: 1;
    }

    .zls-sidebar.is-open {
        transform: translateX(0);
    }

    .zls-sidebar__header {
        height: 28px;
        font-size: var(--fs-micro);
    }

    .zls-sidebar__item {
        padding: var(--sp-1) var(--sp-2);
        font-size: var(--fs-xs);
    }

    /* Hide bottom bar — reclaim vertical space */
    .zls-bottombar {
        display: none;
    }

    /* Content fills everything */
    .zls-content__header {
        height: 28px;
        padding: 0 var(--sp-3);
    }

    .zls-content__title {
        font-size: var(--fs-sm);
    }

    .zls-content__body {
        padding: var(--sp-2);
        gap: var(--sp-2);
    }

    /* Panels side by side (landscape has width) */
    .zls-content__body {
        flex-direction: row;
    }

    .zls-panel--list {
        width: 35%;
        max-height: none;
    }

    .zls-panel__header {
        padding: var(--sp-1) var(--sp-2);
        font-size: var(--fs-micro);
    }

    /* Gallery compact */
    .zls-gallery {
        padding: var(--sp-2);
    }

    .zls-gallery__grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: var(--sp-2);
    }

    /* Lightbox full screen */
    .zls-lightbox__container {
        width: 96vw;
        height: 90vh;
    }

    .zls-lightbox__header,
    .zls-lightbox__nav {
        padding: var(--sp-1) var(--sp-2);
        font-size: var(--fs-micro);
    }

    /* Detail card compact */
    .zls-detail-card {
        padding: var(--sp-2);
        gap: var(--sp-2);
    }

    .zls-detail-card__title {
        font-size: var(--fs-sm);
    }

    .zls-detail-card__desc {
        font-size: var(--fs-xs);
        line-height: 1.4;
    }
}