body.client-app { overflow-x: hidden; }

.client-shell { min-height: 100vh; }
.client-container { width: min(calc(100% - 40px), 1520px); margin: 0 auto; }

.client-header {
    border-bottom: 1px solid var(--border);
    background: rgb(11 13 16 / 92%);
}
.client-header-inner {
    min-height: 104px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-5) 0;
}
.client-brand { min-width: 0; display: flex; align-items: center; gap: var(--space-4); }
.client-brand-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: #9db0ff;
    font-size: var(--text-xl);
}
.client-title { margin: 0; font-size: clamp(var(--text-xl), 2vw, var(--text-2xl)); letter-spacing: -.02em; line-height: 1.2; }
.client-subtitle { margin: 5px 0 0; color: var(--text-secondary); font-size: var(--text-sm); }
.client-header-meta { display: flex; align-items: center; gap: var(--space-5); }
.sync-meta { display: grid; gap: 2px; text-align: right; }
.sync-meta span { color: var(--text-tertiary); font-size: var(--text-xs); }
.sync-meta strong { font-size: var(--text-sm); font-weight: 600; }
.contact-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    color: var(--text);
    text-decoration: none;
}
.contact-link:hover { border-color: #526bc5; color: #c6d0ff; }
.qq-brand-icon {
    width: 24px;
    height: 28px;
    flex: 0 0 auto;
    display: block;
    border-radius: 6px;
    background: #fff;
    object-fit: contain;
}
.contact-copy { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.contact-label { color: var(--text-tertiary); font-size: 11px; font-weight: 600; }
#contactQQ { font-size: var(--text-sm); font-weight: 700; letter-spacing: .02em; }

.client-main { padding: var(--space-6) 0 var(--space-12); }
.filter-shell {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgb(18 21 26 / 94%);
    box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
    backdrop-filter: blur(16px);
}
.search-row { min-width: 0; display: grid; grid-template-columns: minmax(240px, 1fr) auto; align-items: center; gap: var(--space-2); }
.search-control { position: relative; min-width: 0; }
.search-shell {
    min-width: 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 40px;
    padding: 0 var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    color: var(--text-secondary);
}
.search-shell:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgb(120 147 255 / 15%); }
.search-shell input { min-height: auto; padding: 0 34px 0 0; border: 0; background: transparent; box-shadow: none; }
.search-shell input:focus { box-shadow: none; }
.search-clear-btn {
    position: absolute;
    top: 50%;
    right: 5px;
    width: 32px;
    height: 32px;
    min-height: 32px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    transform: translateY(-50%);
    border-color: transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-tertiary);
}
.search-clear-btn:hover { background: var(--surface-hover); color: var(--text); }
.query-controls { display: flex; align-items: center; gap: var(--space-2); }
.sort-control { display: flex; align-items: center; gap: 7px; color: var(--text-tertiary); font-size: var(--text-xs); white-space: nowrap; }
.sort-control select { width: 124px; min-height: 40px; padding-block: 0; }
.view-toggle { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-subtle); }
.view-toggle-btn {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 0;
    border-radius: calc(var(--radius-md) - 3px);
    background: transparent;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-weight: 700;
}
.view-toggle-btn:hover { color: var(--text); }
.view-toggle-btn.active { background: rgb(76 105 214 / 24%); color: #dfe6ff; box-shadow: inset 0 0 0 1px rgb(126 151 255 / 18%); }
.mobile-filter-btn { display: none; min-width: 46px; min-height: 46px; padding: 0 var(--space-3); }
.filter-panel { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.filter-group { display: grid; gap: var(--space-2); }
.filter-group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.filter-group-title { margin: 0; color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; }
.category-grid, .pill-group { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-btn, .chip-btn {
    min-height: 34px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
}
.pill-btn:hover, .pill-btn.active, .chip-btn.active { border-color: #526bc5; background: rgb(63 99 244 / 16%); color: #e7ecff; }
.pill-btn.active { box-shadow: inset 0 0 0 1px rgb(123 148 255 / 12%); }
.studio-filter-panel { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(180px, 260px); gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.studio-search-block { display: grid; gap: 6px; }
.studio-filter-meta { color: var(--text-tertiary); font-size: var(--text-xs); }
.studio-select { align-self: start; }
.active-filters { display: flex; align-items: center; gap: var(--space-2); min-height: 22px; color: var(--text-secondary); font-size: var(--text-xs); }
.active-filter-list { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-clear { min-height: 32px; padding-inline: var(--space-3); font-size: var(--text-xs); }

@media (min-width: 769px) {
    .filter-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(520px, 620px);
        align-items: start;
        gap: 0 var(--space-5);
        padding: var(--space-4);
    }
    .search-row {
        min-width: 0;
        grid-column: 2;
        grid-row: 1;
    }
    .filter-panel {
        min-width: 0;
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        gap: var(--space-2);
        margin-top: 0;
    }
    .filter-group {
        min-width: 0;
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr) max-content;
        align-items: center;
        gap: var(--space-3);
    }
    .filter-group-head { display: contents; }
    .filter-group-title { grid-column: 1; grid-row: 1; }
    .category-grid { min-width: 0; grid-column: 2; grid-row: 1; }
    .filter-clear { grid-column: 3; grid-row: 1; }
    .studio-filter-panel { padding-top: var(--space-2); }
    .studio-filter-meta { display: none; }
    .active-filters {
        min-width: 0;
        display: none;
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: var(--space-3);
        padding-top: var(--space-3);
        border-top: 1px solid var(--border);
    }
}

@media (min-width: 769px) and (max-width: 1180px) {
    .filter-shell { grid-template-columns: 1fr; gap: var(--space-3); }
    .search-row { grid-column: 1; grid-row: 1; }
    .filter-panel { grid-column: 1; grid-row: 2; }
}

.results-shell { margin-top: var(--space-6); }
.results-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.results-title-row { display: flex; align-items: center; gap: var(--space-2); }
.results-title { margin: 0; font-size: var(--text-xl); letter-spacing: -.01em; }
.result-count { min-width: 28px; min-height: 24px; display: inline-grid; place-items: center; padding: 0 8px; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; }
.results-meta { margin: 5px 0 0; color: var(--text-secondary); font-size: var(--text-sm); }

.gallery {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    transition: opacity var(--motion-fast) var(--ease-standard);
}
.gallery.is-refreshing { opacity: .58; pointer-events: none; }
.gallery.is-refreshing::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 3px solid rgb(255 255 255 / 18%);
    border-top-color: #b9c7ff;
    border-radius: 50%;
    animation: gallery-spin .8s linear infinite;
}
@keyframes gallery-spin { to { transform: rotate(360deg); } }
.gallery-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #282f39;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #15191f, #111419);
    box-shadow: 0 10px 24px rgb(0 0 0 / 14%);
    transition: transform var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}
.gallery-card:hover { transform: translateY(-2px); border-color: #46536a; box-shadow: 0 15px 32px rgb(0 0 0 / 24%); }
.gallery-card-preview {
    position: relative;
    width: 100%;
    display: block;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #080a0d;
    color: var(--text);
    text-align: left;
}
.gallery-card-preview:focus-visible { z-index: 1; outline-offset: -4px; }
.gallery-card-media {
    width: 100%;
    aspect-ratio: 3 / 2;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(circle at 50% 42%, #202630, #080a0d 72%);
}
.gallery-card-media img { width: 100%; height: 100%; display: block; object-fit: contain; transition: filter var(--motion-fast) var(--ease-standard); }
.gallery-card-media img[data-thumbnail-src] { opacity: 0; }
.gallery-card:hover .gallery-card-media img { filter: brightness(1.06); }
.gallery-image-fallback { width: 100%; height: 100%; min-height: 120px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--text-tertiary); font-size: var(--text-xs); }
.gallery-image-fallback .icon { width: 26px; height: 26px; }
.gallery-preview-hint {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: var(--radius-pill);
    background: rgb(8 10 13 / 74%);
    color: #f6f8ff;
    font-size: 11px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
    backdrop-filter: blur(8px);
}
.gallery-card:hover .gallery-preview-hint, .gallery-card-preview:focus-visible .gallery-preview-hint { opacity: 1; transform: none; }
.gallery-card-body { min-width: 0; display: grid; gap: 7px; padding: 12px 13px 13px; }
.gallery-card-title-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: start; gap: 6px; }
.gallery-code-button {
    min-width: 0;
    min-height: 34px;
    display: -webkit-box;
    padding: 5px 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: #f2f5fb;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.35;
    text-align: left;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.gallery-code-button:hover { color: #b9c7ff; }
.gallery-card-meta { min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; color: var(--text-secondary); font-size: 11px; white-space: nowrap; }
.gallery-card-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.metadata-divider { flex: 0 0 auto; color: #566171; }
.gallery-card-meta .studio-name-badge { min-width: 0; overflow: hidden; color: inherit; text-overflow: ellipsis; white-space: nowrap; }
.gallery-card-meta .studio-hot-flag { display: none; }
.gallery-list-extras { display: none; color: var(--text-tertiary); font-size: var(--text-xs); }
.gallery-list-extras > span { display: inline-flex; align-items: center; gap: 6px; }
.copy-btn.is-inline-icon { width: 34px; min-width: 34px; min-height: 34px; padding: 0; border-color: transparent; background: transparent; color: var(--text-tertiary); }
.copy-btn.is-inline-icon:hover { border-color: var(--border); color: var(--text); }
.recent-pill { border-color: rgb(63 99 244 / 30%); background: rgb(63 99 244 / 12%); color: #afbdff; }

.gallery.view-list { grid-template-columns: 1fr; gap: 8px; }
.gallery > .state-panel { grid-column: 1 / -1; }
.view-list .gallery-card { display: grid; grid-template-columns: 136px minmax(0, 1fr); border-radius: var(--radius-md); box-shadow: none; }
.view-list .gallery-card:hover { transform: none; }
.view-list .gallery-card-preview { min-height: 94px; }
.view-list .gallery-card-media { height: 100%; min-height: 94px; aspect-ratio: auto; }
.view-list .gallery-preview-hint { display: none; }
.view-list .gallery-card-body { grid-template-columns: minmax(0, 1.1fr) minmax(180px, .8fr) auto; align-items: center; gap: var(--space-5); padding: 12px var(--space-4); }
.view-list .gallery-card-title-row { min-width: 0; }
.view-list .gallery-code-button { display: block; min-height: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-list .gallery-card-meta { font-size: var(--text-xs); }
.view-list .gallery-list-extras { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); white-space: nowrap; }

.skeleton-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.skeleton-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.skeleton-card span { aspect-ratio: 3 / 2; display: block; background: linear-gradient(100deg, #171b21 20%, #232a34 40%, #171b21 60%); background-size: 240% 100%; animation: skeleton-sweep 1.4s ease-in-out infinite; }
.skeleton-card i { width: 64%; height: 14px; display: block; margin: 15px 13px 34px; border-radius: var(--radius-pill); background: #20262e; }
@keyframes skeleton-sweep { to { background-position-x: -240%; } }

.pagination-wrap { display: flex; justify-content: center; margin-top: var(--space-5); }
.pagination-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); }
.pagination-info { min-width: 88px; color: var(--text-secondary); text-align: center; font-size: var(--text-sm); }
.page-jump { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: var(--text-xs); }
.page-jump input { width: 64px; min-height: var(--control-md); padding-inline: var(--space-2); text-align: center; }
.page-size-select { width: auto; min-width: 112px; min-height: var(--control-md); }

.modal.viewer-modal { padding: 0; }
.viewer-card {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    display: grid;
    grid-template-rows: 72px minmax(0, 1fr);
    border: 0;
    border-radius: 0;
    background: #090b0e;
}
.viewer-topbar {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: 0 320px 0 0;
    pointer-events: none;
}
.viewer-contact-link {
    min-width: 0;
    max-width: 360px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 18px;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: var(--radius-pill);
    background: rgb(21 26 33 / 94%);
    color: #f5f7fa;
    text-decoration: none;
    box-shadow: 0 10px 28px rgb(0 0 0 / 36%);
    backdrop-filter: blur(10px);
    pointer-events: auto;
}
.viewer-contact-link:hover { border-color: rgb(18 183 245 / 65%); background: rgb(26 32 41 / 97%); }
.viewer-contact-link .qq-brand-icon { width: 28px; height: 32px; border-radius: 7px; }
.viewer-contact-link span { color: #aab2bd; font-size: var(--text-xs); font-weight: 650; }
.viewer-contact-link strong { overflow: hidden; font-size: var(--text-sm); letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.viewer-close { position: absolute; top: 14px; right: var(--space-4); z-index: 3; border-color: #343b45; background: rgb(21 26 33 / 94%); color: #fff; }
.modal-layout { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.modal-media-wrap { min-width: 0; min-height: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; }
.modal-media { min-width: 0; min-height: 0; height: 100%; display: grid; place-items: center; padding: var(--space-6); overflow: hidden; }
.modal-media img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; }
.modal-nav { width: 44px; height: 44px; justify-self: center; border: 1px solid #343b45; border-radius: var(--radius-pill); background: rgb(16 19 24 / 88%); color: #fff; cursor: pointer; }
.modal-nav:disabled { opacity: .28; cursor: not-allowed; }
.modal-info { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-8) var(--space-5); border-left: 1px solid #2a3038; background: #111419; }
.modal-sequence { color: var(--text-tertiary); font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; }
.modal-title-block { display: grid; gap: var(--space-3); }
.modal-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
#modalName { min-width: 0; margin: 0; font-size: var(--text-xl); line-height: 1.35; overflow-wrap: anywhere; }
.modal-actions .copy-btn { padding: 0 var(--space-3); }
.modal-meta { display: grid; gap: var(--space-2); }
.modal-meta .meta-chip { justify-content: flex-start; border: 0; padding: 5px 0; background: transparent; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }

.gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: #0b0d10;
}
.gate-overlay.active { display: flex; }
.gate-layout { width: min(920px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--space-12); align-items: center; }
.gate-intro { display: grid; gap: var(--space-4); }
.gate-intro-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--radius-lg); background: var(--surface-raised); color: #9db0ff; font-size: var(--text-2xl); }
.gate-intro h1 { max-width: 520px; margin: 0; font-size: clamp(30px, 5vw, 46px); letter-spacing: -.04em; line-height: 1.08; }
.gate-intro p { max-width: 520px; margin: 0; color: var(--text-secondary); font-size: var(--text-lg); line-height: 1.7; }
.gate-card { padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-overlay); }
.gate-badge { display: inline-flex; align-items: center; gap: 7px; color: #afbdff; font-size: var(--text-xs); font-weight: 700; }
.gate-card h2 { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-2xl); }
.gate-card > p { margin: 0 0 var(--space-5); color: var(--text-secondary); font-size: var(--text-sm); }
.gate-form { display: grid; gap: var(--space-3); }
.gate-form .primary-btn { width: 100%; min-height: var(--control-lg); }
.gate-error { min-height: 20px; color: #ff9c96; font-size: var(--text-xs); line-height: 1.5; }

@media (max-width: 1024px) {
    .client-container { width: min(calc(100% - 32px), 1520px); }
    .filter-shell { grid-template-columns: 1fr; }
    .studio-filter-panel { grid-template-columns: 1fr; }
    .viewer-topbar { padding-inline: 72px; }
    .modal-layout { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
    .modal-info { gap: var(--space-3); padding: var(--space-4); border-left: 0; border-top: 1px solid #2a3038; }
    .modal-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
    .gate-layout { grid-template-columns: 1fr 400px; gap: var(--space-8); }
}

@media (max-width: 768px) {
    .client-container { width: min(calc(100% - 24px), 1520px); }
    .client-header-inner { min-height: 72px; padding: 10px 0; gap: var(--space-2); }
    .client-brand-mark { width: 40px; height: 40px; flex-basis: 40px; }
    .client-subtitle, .sync-meta { display: none; }
    .client-header-meta { gap: var(--space-2); }
    .contact-link { min-height: 44px; gap: 6px; padding: 4px 8px; }
    .contact-copy { display: grid; gap: 0; line-height: 1.15; }
    .contact-label { font-size: 10px; }
    #contactQQ { font-size: 11px; }
    .client-main { padding-top: var(--space-3); }
    .filter-shell {
        top: 6px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0 var(--space-2);
        padding: 6px;
        border-radius: var(--radius-md);
    }
    .search-row {
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-column: 1 / -1;
        grid-row: 2;
        gap: 6px;
        margin-top: 6px;
    }
    .search-shell { min-height: 42px; padding-inline: var(--space-3); }
    .query-controls { justify-content: space-between; }
    .sort-control { flex: 1 1 auto; }
    .sort-control select { width: 100%; min-width: 112px; }
    .view-toggle { flex: 0 0 auto; }
    .view-toggle-btn { min-height: 36px; }
    .mobile-filter-btn {
        min-width: 82px;
        min-height: 44px;
        display: inline-flex;
        grid-column: 2;
        grid-row: 1;
        padding: 0 var(--space-3);
    }
    .filter-panel {
        display: none;
        grid-column: 1 / -1;
        grid-row: 3;
        max-height: calc(100dvh - 120px);
        margin-top: 0;
        overflow: auto;
        padding: 6px var(--space-2) var(--space-2);
    }
    .filter-panel.is-open { display: grid; }
    .category-grid { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
    .category-grid .pill-btn { flex: 0 0 auto; min-height: 44px; }
    .studio-filter-panel .pill-btn { min-height: 44px; }
    .studio-filter-panel { grid-template-columns: 1fr; }
    .active-filters {
        min-width: 0;
        min-height: 44px;
        display: flex;
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        padding: 0 var(--space-2);
        overflow: hidden;
        white-space: nowrap;
    }
    .active-filters > span { flex: 0 0 auto; }
    .active-filter-list { min-width: 0; flex-wrap: nowrap; overflow: hidden; }
    .active-filter-list .tag { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .results-shell { margin-top: var(--space-3); }
    .results-header { align-items: flex-start; }
    .gallery, .skeleton-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .gallery-card { border-radius: var(--radius-md); }
    .gallery-card-body { padding: 10px; }
    .gallery-card-title-row { grid-template-columns: minmax(0, 1fr) 40px; }
    .gallery-code-button { min-height: 40px; font-size: 13px; }
    .copy-btn.is-inline-icon { width: 40px; min-width: 40px; min-height: 40px; }
    .gallery-preview-hint { display: none; }
    .view-list .gallery-card { grid-template-columns: 112px minmax(0, 1fr); }
    .view-list .gallery-card-body { grid-template-columns: 1fr; gap: 5px; padding: 9px 10px; }
    .view-list .gallery-card-title-row { grid-template-columns: minmax(0, 1fr) 40px; }
    .view-list .gallery-card-meta { font-size: 11px; }
    .view-list .gallery-list-extras { justify-content: flex-start; }
    .view-list .recent-pill { display: none; }
    .pagination-bar { width: 100%; }
    .pagination-bar .ghost-btn { min-height: 44px; }
    .page-jump { order: 4; flex-basis: 100%; justify-content: center; }
    .viewer-card { height: 100dvh; grid-template-rows: calc(64px + env(safe-area-inset-top)) minmax(0, 1fr); }
    .viewer-topbar { padding: env(safe-area-inset-top) 64px 0; }
    .viewer-contact-link { max-width: calc(100vw - 136px); min-height: 44px; padding: 0 12px; }
    .viewer-contact-link .qq-brand-icon { width: 26px; height: 30px; }
    .modal-layout { grid-template-rows: minmax(0, 1fr) auto; }
    .modal-media-wrap {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(0, 1fr) 52px;
        gap: 0 var(--space-2);
        padding: 0 var(--space-3) 4px;
    }
    .modal-media {
        width: calc(100% + (var(--space-3) * 2));
        grid-column: 1 / -1;
        grid-row: 1;
        margin-left: calc(var(--space-3) * -1);
        padding: 0;
    }
    .modal-media img { width: 100%; max-width: none; max-height: 100%; }
    .modal-info { gap: var(--space-2); padding: 10px var(--space-3) calc(10px + env(safe-area-inset-bottom)); }
    .modal-title-block { gap: 4px; }
    #modalName { font-size: var(--text-lg); }
    .modal-actions .copy-btn { min-height: 40px; }
    .modal-meta { gap: var(--space-2); font-size: 11px; }
    .modal-nav { width: 44px; height: 44px; grid-row: 2; }
    .modal-nav.prev { grid-column: 1; justify-self: start; }
    .modal-nav.next { grid-column: 2; justify-self: end; }
    .viewer-close { top: calc(10px + env(safe-area-inset-top)); right: max(var(--space-2), env(safe-area-inset-right)); width: 44px; height: 44px; min-height: 44px; }
    .gate-layout { width: min(440px, 100%); grid-template-columns: 1fr; gap: var(--space-6); }
    .gate-intro { justify-items: center; text-align: center; }
    .gate-intro h1 { font-size: var(--text-3xl); }
    .gate-intro p { display: none; }
    .gate-card { padding: var(--space-6); }
}

@media (max-width: 480px) {
    .client-title { max-width: 158px; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
    .results-title { font-size: 18px; }
    .results-header { display: block; }
    .results-meta { margin-top: 6px; }
    .gallery-card-meta { gap: 4px; }
    .view-toggle-btn span { display: none; }
    .view-toggle-btn { width: 38px; justify-content: center; padding: 0; }
    .gate-overlay { padding: var(--space-3); }
    .gate-intro { gap: var(--space-3); }
    .gate-card { padding: var(--space-5); }
}

@media (max-width: 360px) {
    .gallery, .skeleton-grid { grid-template-columns: 1fr; }
    .viewer-contact-link span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-card, .gallery-card-media img, .gallery-preview-hint, .gallery { transition: none; }
    .gallery-card:hover { transform: none; }
    .skeleton-card span, .gallery.is-refreshing::after { animation-duration: .001ms; animation-iteration-count: 1; }
}