:root {
    --font-sans: "Avenir Next", "Segoe UI Variable", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
    --font-display: "Avenir Next", "Segoe UI Variable Display", "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
    --surface-canvas: #f5f3f7;
    --surface-shell: #ebe6ee;
    --surface-core: #ffffff;
    --surface-soft: #fbf9fc;
    --ink-strong: #23182a;
    --ink: #3b3041;
    --ink-muted: #706477;
    --purple-900: #2d183b;
    --purple-800: #3d2050;
    --purple-700: #55306f;
    --purple-600: #6f438a;
    --purple-100: #eee7f2;
    --gold-500: #d7b75e;
    --gold-300: #f2d98c;
    --hairline: rgba(74, 45, 85, .13);
    --hairline-strong: rgba(74, 45, 85, .2);
    --focus-ring: 0 0 0 3px rgba(215, 183, 94, .26);
    --shadow-ambient: 0 1px 2px rgba(45, 24, 59, .035), 0 10px 30px rgba(45, 24, 59, .07);
    --shadow-raised: 0 2px 5px rgba(45, 24, 59, .06), 0 18px 44px rgba(45, 24, 59, .11);
    --shadow-floating: 0 12px 38px rgba(38, 20, 48, .16), 0 2px 8px rgba(38, 20, 48, .08);
    --motion-standard: cubic-bezier(.32, .72, 0, 1);
    --motion-emphasis: cubic-bezier(.22, 1, .36, 1);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --layer-raised: 1;
    --layer-header: 20;
    --layer-dropdown: 30;
    --layer-modal: 40;
    --layer-toast: 50;
}

* {
    box-sizing: border-box;
}

html {
    color-scheme: light;
    scroll-behavior: smooth;
}

img.protected-media {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

body { 
    min-height: 100dvh;
    background:
        radial-gradient(circle at 12% -8%, rgba(111, 67, 138, .08), transparent 31rem),
        radial-gradient(circle at 92% 2%, rgba(215, 183, 94, .08), transparent 25rem),
        var(--surface-canvas);
    padding: 16px; 
    margin: 0; 
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
    font: inherit;
}

a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

input::placeholder,
textarea::placeholder {
    color: var(--ink-muted);
    opacity: 1;
}

/* ==========================================
   1. 顶栏与全局基础容器
   ========================================== */
.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

@media (max-width: 600px) {
    body {
        padding: 10px;
    }

    .site-header {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 12px !important;
    }

    .site-header > h3 {
        flex: 0 0 auto;
    }

    .site-header .header-right-actions {
        max-width: 100%;
        min-width: 0;
        gap: 8px !important;
        margin-left: auto;
    }

    .site-header .user-nav-btn {
        max-width: 156px;
        padding: 4px 8px;
    }

    .site-header .user-nav-btn .user-name {
        max-width: 82px;
    }

    .site-actions {
        padding: 10px 12px !important;
        gap: 8px !important;
    }
}

.search-container {
    margin: 16px 0 24px 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.search-form {
    display: flex;
    gap: 8px;
}

.catalog-navigation {
    width: 100%;
}

.catalog-search-container {
    padding: 10px;
}

.catalog-quick-links {
    margin: 26px 0 22px;
}

.catalog-page-tabs-scroll {
    width: 100%;
    overflow: visible;
    border-bottom: 1px solid #e6e0eb;
}

.catalog-page-tabs {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 4px;
    margin-bottom: -1px;
    border: 1px solid #e6e0eb;
    border-bottom-color: #d7cce0;
    border-radius: 7px 7px 0 0;
    background: #f3eff6;
}

.catalog-sort-links,
.catalog-section-links {
    display: contents;
}

.catalog-page-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 14px;
    color: #5d5263;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: color 180ms var(--motion-standard), background-color 180ms var(--motion-standard), transform 180ms var(--motion-standard);
}

.catalog-page-tab:hover {
    color: #4a286e;
    background: #ebe3f0;
}

.catalog-page-tab:active {
    transform: translateY(1px);
}

.catalog-page-tab.is-active {
    color: #f7df9a;
    background: #4a286e;
}

.catalog-page-tab.is-active::after {
    content: '';
    position: absolute;
    right: 18px;
    bottom: 5px;
    left: 18px;
    height: 2px;
    background: #d4af37;
}

.catalog-page-tab:focus-visible {
    z-index: 1;
    outline: 3px solid rgba(212, 175, 55, 0.38);
    outline-offset: 2px;
}

.catalog-search-history {
    margin-top: 12px;
}

@media (max-width: 600px) {
    .catalog-search-container {
        padding: 8px;
    }

    .catalog-search-container .search-form {
        align-items: stretch;
    }

    .catalog-search-container .btn {
        flex: 0 0 auto;
        padding-inline: 12px;
        white-space: nowrap;
    }

    .catalog-quick-links {
        margin: 20px 0 14px;
    }

    .catalog-page-tab {
        min-height: 36px;
        padding-inline: 10px;
        font-size: 12px;
    }

    .catalog-sort-links {
        display: flex;
        align-items: stretch;
        flex-wrap: wrap;
        width: auto;
        min-width: 0;
        gap: 2px;
        flex: 0 1 auto;
    }

    .catalog-section-links {
        display: contents;
    }
}

.input-field {
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    color: #1c1c1c;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    background-color: #ffffff;
    transition: border-color 300ms var(--motion-standard), box-shadow 300ms var(--motion-standard);
    outline: none;
    flex: 1;
}

/* 焦点状态：高级金描边 */
.input-field:focus {
    border-color: #D4AF37;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.15);
}

.section-title {
    font-size: 18px;
    font-weight: 700;
    margin: 24px 0 14px 0;
    color: #1c1c1c;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 首页资源浏览：最近更新 / 最受欢迎 / 最多收藏 */
.home-resource-browser {
    margin-top: 24px;
}

.home-resource-header {
    min-width: 0;
    margin-bottom: 18px;
}

.home-resource-tabs-scroll {
    width: 100%;
    overflow: visible;
}

.home-resource-tabs-row {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    gap: 4px;
    padding: 4px;
    border: 1px solid #e6e0eb;
    border-bottom-color: #d7cce0;
    border-radius: 7px;
    background: #f3eff6;
}

.home-resource-tabs,
.home-resource-links {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    min-width: 0;
    gap: 4px;
}

.home-resource-tabs {
    flex: 0 1 auto;
}

.home-resource-links {
    flex: 0 1 auto;
}

.home-resource-tab,
.home-resource-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 14px;
    color: #5d5263;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: color 180ms var(--motion-standard), background-color 180ms var(--motion-standard);
}

.home-resource-tab:hover,
.home-resource-link:hover {
    color: #4a286e;
    background: #ebe3f0;
}

.home-resource-tab.is-active {
    color: #f7df9a;
    background: #4a286e;
}

.home-resource-tab.is-active::after {
    content: '';
    position: absolute;
    right: 18px;
    bottom: 5px;
    left: 18px;
    height: 2px;
    background: #d4af37;
}

.home-resource-tab:focus-visible {
    outline: 3px solid rgba(212, 175, 55, 0.38);
    outline-offset: 2px;
}

.home-resource-panel {
    min-width: 0;
    scroll-margin-top: 20px;
}

.home-resource-panel[hidden] {
    display: none;
}

.home-resource-empty {
    grid-column: 1 / -1;
    padding: 56px 20px;
    color: var(--ink-muted);
    border: 1px solid #e6e0eb;
    border-radius: 8px;
    background: #fff;
    text-align: left;
}

@media (max-width: 600px) {
    .home-resource-tabs-scroll {
        margin-inline: -1px;
        padding: 1px 1px 6px;
    }

    .home-resource-tabs-row {
        display: flex;
        gap: 2px;
        padding: 3px;
    }

    .home-resource-tabs {
        display: flex;
        align-items: stretch;
        flex-wrap: wrap;
        width: auto;
        min-width: 0;
        gap: 2px;
        flex: 0 1 auto;
    }

    .home-resource-links {
        display: contents;
    }

    .home-resource-tab,
    .home-resource-link {
        flex: 0 0 auto;
        padding-inline: 10px;
        text-align: center;
        white-space: nowrap;
    }
}

/* ==========================================
   2. 统一按钮系统（绸缎紫底 + 金字）
   ========================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    color: #F2D27A; /* 金字 */
    background: linear-gradient(135deg, #5B3287 0%, #3D1F5C 100%); /* 深邃绸缎紫渐变 */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: color 300ms var(--motion-standard), background-color 300ms var(--motion-standard), border-color 300ms var(--motion-standard), box-shadow 300ms var(--motion-standard), transform 300ms var(--motion-emphasis);
    box-shadow: 0 2px 6px rgba(61, 31, 92, 0.3);
    text-decoration: none;
}

.btn:hover {
    background: linear-gradient(135deg, #4A286E 0%, #2A1342 100%);
    color: #FFE699; /* 悬浮时金色更明亮 */
    box-shadow: 0 4px 10px rgba(61, 31, 92, 0.4);
    transform: translateY(-1px);
}

.btn:active {
    background: #2A1342;
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

.btn-sm {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

.header-notification-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: inherit;
    max-width: 100%;
}

.site-actions .btn {
    white-space: nowrap;
}

.online-time-nav {
    max-width: 100%;
    white-space: nowrap;
}

.online-time-nav-value {
    color: #5b2782;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.site-actions #checkinGrowthLink {
    min-width: 38px;
    padding-inline: 10px;
}

.site-actions #checkinForm[hidden],
.site-actions #checkinGrowthLink[hidden] {
    display: none;
}

.online-time-nav:hover .online-time-nav-value {
    color: #f2d27a;
}

.notification-nav {
    position: relative;
}

.notification-nav.has-unread {
    color: var(--theme-legacy-accent, #4a286e) !important;
    border-color: var(--theme-legacy-border, rgba(111, 66, 161, .34)) !important;
    background: var(--theme-legacy-soft, #f4ebfb) !important;
}

.notification-nav-badge {
    display: inline-grid;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    place-items: center;
    border-radius: 999px;
    color: var(--theme-legacy-action-text, #fff);
    background: var(--theme-legacy-action-bg, #6f42a1);
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
}

.notifications-page {
    width: min(100% - 24px, 980px);
    margin: 18px auto 60px;
}

.notifications-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.notifications-tabs {
    display: inline-flex;
    gap: 3px;
    padding: 4px;
    border: 1px solid var(--theme-legacy-border, rgba(86, 48, 112, .14));
    border-radius: 13px;
    background: var(--theme-legacy-selected-bg, #f1edf4);
    box-shadow: var(--theme-legacy-shadow, inset 0 1px 2px rgba(45, 24, 59, .05));
}

.notifications-tab {
    display: inline-flex;
    min-height: 38px;
    padding: 0 17px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 9px;
    color: var(--theme-legacy-muted, #62576a);
    font-size: 13px;
    font-weight: 760;
    text-decoration: none;
    white-space: nowrap;
    transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.notifications-tab:hover {
    color: var(--theme-legacy-accent, #4a286e);
    background: var(--theme-legacy-surface, rgba(255, 255, 255, .72));
}

.notifications-tab.is-active {
    color: var(--theme-legacy-action-text, #f7df9a);
    background: var(--theme-legacy-action-bg, linear-gradient(145deg, #5b3287, #321747));
    box-shadow: var(--theme-legacy-shadow, 0 4px 12px rgba(45, 24, 59, .18));
}

.notifications-tab span {
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 999px;
    color: inherit;
    background: rgba(255, 255, 255, .16);
    font-size: 10px;
    text-align: center;
}

.notifications-toolbar .btn {
    min-height: 38px;
    height: auto;
    white-space: nowrap;
}

.notifications-list {
    display: grid;
    gap: 10px;
}

.notification-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 17px 19px;
    border: 1px solid var(--theme-legacy-border, rgba(86, 48, 112, .12));
    border-radius: 15px;
    color: var(--theme-legacy-ink, #302638);
    background: var(--theme-legacy-surface, rgba(255, 255, 255, .9));
    box-shadow: var(--theme-legacy-shadow, 0 7px 22px rgba(45, 24, 59, .055));
    text-decoration: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.notification-card:hover {
    border-color: var(--theme-legacy-border, rgba(111, 66, 161, .34));
    box-shadow: var(--theme-legacy-shadow-raised, 0 13px 30px rgba(45, 24, 59, .1));
    transform: translateY(-1px);
}

.notification-card.is-unread {
    border-left: 4px solid var(--theme-legacy-accent, #6f42a1);
    background: var(--theme-legacy-selected-bg, #fbf8fe);
}

.notification-card-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 13px;
    background: var(--theme-legacy-selected-bg, #f1e8f8);
    font-size: 21px;
}

.notification-card-copy,
.notification-card-title-row,
.notification-card-message,
.notification-card time {
    display: block;
}

.notification-card-title-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.notification-card-title-row strong {
    color: var(--theme-legacy-accent, #3d1f5c);
    font-size: 15px;
}

.notification-state {
    padding: 3px 7px;
    border-radius: 999px;
    color: var(--theme-legacy-muted, #75677d);
    background: var(--theme-legacy-selected-bg, #eee9f1);
    font-size: 10px;
    font-weight: 800;
}

.is-unread .notification-state {
    color: var(--theme-legacy-action-text, #fff);
    background: var(--theme-legacy-action-bg, #6f42a1);
}

.notification-card-message {
    margin-top: 5px;
    color: var(--theme-legacy-muted, #54485b);
    line-height: 1.55;
}

.notification-card time {
    margin-top: 6px;
    color: var(--ink-muted);
    font-size: 11px;
}

.notification-card-open {
    color: var(--theme-legacy-accent, #6f42a1);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.notifications-empty {
    display: grid;
    min-height: 210px;
    padding: 30px;
    justify-items: start;
    align-content: center;
    gap: 8px;
    border: 1px dashed var(--theme-legacy-border, rgba(86, 48, 112, .24));
    border-radius: 17px;
    color: var(--ink-muted);
    background: var(--theme-legacy-surface, #fff);
    text-align: left;
}

.notifications-empty span {
    font-size: 32px;
}

.notifications-empty p {
    margin: 0;
}

.notifications-alert {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 10px;
}

.notifications-alert.success {
    color: #1a6f37;
    border: 1px solid #a8d8b7;
    background: #eaf8ee;
}

.notifications-alert.warning {
    color: #845500;
    border: 1px solid #e5c36d;
    background: #fff8dd;
}

.notifications-pagination {
    margin-top: 20px;
}

@media (max-width: 680px) {
    .notifications-page {
        width: 100%;
        margin-top: 12px;
    }

    .notifications-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .notifications-tabs {
        flex: 1 1 auto;
    }

    .notifications-tab {
        flex: 1 1 0;
        padding-inline: 12px;
    }

    .notifications-toolbar form,
    .notifications-toolbar .btn {
        width: 100%;
    }

    .notification-card {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 15px;
    }

    .notification-card-icon {
        width: 40px;
        height: 40px;
    }

    .notification-card-open {
        grid-column: 2;
    }
}

.btn-block {
    width: 100%;
}

.btn.is-preparing {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: wait;
    opacity: 0.92;
}

.btn.is-preparing::before {
    content: '';
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border: 2px solid rgba(242, 210, 122, 0.35);
    border-top-color: #F2D27A;
    border-radius: 50%;
    animation: download-button-spin 0.75s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes download-button-spin {
    to { transform: rotate(360deg); }
}

.btn-outline {
    background: #ffffff !important;
    color: #1c1c1c !important;
    border: 1px solid #1c1c1c !important;
    box-shadow: none;
}

.btn-outline:hover {
    background: #1c1c1c !important;
    color: #D4AF37 !important; /* 黑底金字 */
}

.btn-disabled {
    background: #e5e5e5 !important;
    color: #999999 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* ==========================================
   3. 核心 Grid 媒体卡片矩阵
   ========================================== */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 180px);
    gap: 16px;
    justify-content: start;
    align-items: stretch;
}

@media (max-width: 480px) {
    .media-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* ==========================================
   用户邀请记录
   ========================================== */
.invitees-page {
    width: min(980px, calc(100% - 32px));
    margin: 32px auto 48px;
}

.invitees-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 30px 34px;
    border: 1px solid rgba(242, 210, 122, .26);
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 10%, rgba(242, 210, 122, .18), transparent 32%),
        linear-gradient(135deg, #321647 0%, #542273 55%, #713399 100%);
    box-shadow: 0 16px 40px rgba(74, 40, 110, .22);
}

.invitees-hero-copy {
    min-width: 0;
}

.invitees-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #f2d27a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}

.invitees-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(24px, 4vw, 34px);
    line-height: 1.25;
}

.invitees-hero p {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
}

.invitees-back {
    flex: 0 0 auto;
    padding: 10px 17px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: background-color 200ms var(--motion-standard), transform 200ms var(--motion-standard);
}

.invitees-back:hover {
    color: #fff;
    background: rgba(255, 255, 255, .2);
    transform: translateY(-1px);
}

.invitees-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0 14px;
}

.invitees-stat {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid #e9e1ee;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(50, 22, 71, .06);
}

.invitees-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    color: #fff;
    background: #6d3293;
    font-size: 20px;
    font-weight: 800;
}

.invitees-stat-icon.qualified { background: #16815d; }
.invitees-stat-icon.paid { background: #b18416; }

.invitees-stat div {
    min-width: 0;
}

.invitees-stat strong,
.invitees-stat span:last-child {
    display: block;
}

.invitees-stat strong {
    color: #24142f;
    font-size: 24px;
    line-height: 1.05;
}

.invitees-stat span:last-child {
    margin-top: 5px;
    overflow: hidden;
    color: #756b7b;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.invitees-privacy-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 11px 14px;
    border: 1px solid #e8dded;
    border-radius: 11px;
    color: #644d70;
    background: #faf7fc;
    font-size: 12px;
}

.invitees-list {
    display: grid;
    gap: 14px;
}

.invitee-card {
    position: relative;
    overflow: hidden;
    padding: 21px 22px;
    border: 1px solid #e9e4ec;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(38, 18, 52, .055);
}

.invitee-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #258466;
}

.invitee-card.is-invalid::before {
    background: #c85858;
}

.invitee-card-header,
.invitee-identity,
.invitee-badges {
    display: flex;
    align-items: center;
}

.invitee-card-header {
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 17px;
    border-bottom: 1px solid #f0ecf2;
}

.invitee-identity {
    min-width: 0;
    gap: 12px;
}

.invitee-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #4a286e, #8650a9);
    box-shadow: 0 5px 12px rgba(74, 40, 110, .22);
    font-size: 18px;
    font-weight: 800;
}

.invitee-name-wrap {
    min-width: 0;
}

.invitee-name-wrap strong,
.invitee-name-wrap span {
    display: block;
}

.invitee-name-wrap strong {
    overflow: hidden;
    color: #23162b;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
}

.invitee-name-wrap span {
    margin-top: 3px;
    color: #a093a8;
    font-size: 11px;
    letter-spacing: .04em;
}

.invitee-badges {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.invitee-badge,
.invitee-membership {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.25;
}

.invitee-badge.valid { color: #116748; background: #e6f6ef; }
.invitee-badge.invalid { color: #a43e3e; background: #fceaea; }
.invitee-badge.paid { color: #7b5907; background: #fff4cf; }
.invitee-badge.unpaid { color: #6d6571; background: #f1eef3; }

.invitee-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 15px 0 0;
}

.invitee-details > div {
    min-width: 0;
    padding: 11px 12px;
    border-radius: 10px;
    background: #faf9fb;
}

.invitee-details dt {
    margin-bottom: 5px;
    color: #968b9c;
    font-size: 10px;
    font-weight: 700;
}

.invitee-details dd {
    margin: 0;
    overflow: hidden;
    color: #322439;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
}

.invitee-membership.vip { color: #5c2b79; background: #eee2f5; }
.invitee-membership.member { color: #555; background: #ededed; }
.invitee-text-valid { color: #187052 !important; }
.invitee-text-invalid { color: #b64545 !important; }

.invitee-invalid-reason {
    display: flex;
    gap: 9px;
    margin-top: 13px;
    padding: 10px 12px;
    border: 1px solid #f3d2d2;
    border-radius: 10px;
    color: #8c3c3c;
    background: #fff7f7;
    font-size: 12px;
}

.invitee-invalid-reason > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    color: #fff;
    background: #c85858;
    font-weight: 800;
}

.invitee-invalid-reason p { margin: 0; }

.invitees-empty {
    display: grid;
    justify-items: start;
    align-content: center;
    gap: 8px;
    min-height: 180px;
    padding: 30px;
    border: 1px dashed #d9cbe1;
    border-radius: 16px;
    color: #786582;
    background: #fff;
    text-align: left;
}

.invitees-empty > span {
    color: #b18416;
    font-size: 30px;
}

.invitees-pagination {
    margin-top: 22px;
}

@media (max-width: 720px) {
    .invitees-page {
        width: min(100% - 20px, 980px);
        margin-top: 16px;
    }

    .invitees-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 23px 20px;
    }

    .invitees-back {
        padding: 8px 13px;
    }

    .invitees-stats {
        gap: 8px;
    }

    .invitees-stat {
        display: block;
        padding: 13px 8px;
        text-align: left;
    }

    .invitees-stat-icon {
        width: 34px;
        height: 34px;
        margin: 0 0 8px;
        font-size: 16px;
    }

    .invitees-stat strong {
        font-size: 20px;
    }

    .invitee-card {
        padding: 17px 15px;
    }

    .invitee-card-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .invitee-badges {
        justify-content: flex-start;
    }

    .invitee-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 390px) {
    .invitees-stat span:last-child {
        font-size: 10px;
    }

    .invitee-details {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   用户下载记录
   ========================================== */
.downloads-history-page {
    width: min(1040px, calc(100% - 32px));
    margin: 32px auto 48px;
}

.downloads-history-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 30px 34px;
    border: 1px solid rgba(242, 210, 122, .26);
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 8%, rgba(242, 210, 122, .2), transparent 31%),
        linear-gradient(135deg, #301443 0%, #532170 55%, #75369a 100%);
    box-shadow: 0 16px 40px rgba(74, 40, 110, .22);
}

.downloads-history-hero-copy { min-width: 0; }

.downloads-history-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #f2d27a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}

.downloads-history-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(24px, 4vw, 34px);
    line-height: 1.25;
}

.downloads-history-hero p {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
}

.downloads-history-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.downloads-history-help,
.downloads-history-back {
    padding: 10px 16px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 750;
    transition: transform 200ms var(--motion-standard), background-color 200ms var(--motion-standard);
}

.downloads-history-help {
    border: 1px solid #f2d27a;
    color: #302039;
    background: #f2d27a;
}

.downloads-history-back {
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.downloads-history-help:hover,
.downloads-history-back:hover {
    transform: translateY(-1px);
}

.downloads-history-help:hover { color: #302039; background: #f7dda0; }
.downloads-history-back:hover { color: #fff; background: rgba(255, 255, 255, .2); }

.downloads-history-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.downloads-history-stat {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid #e9e1ee;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(50, 22, 71, .06);
}

.downloads-history-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    color: #fff;
    background: #6d3293;
    font-size: 20px;
    font-weight: 800;
}

.downloads-history-stat-icon.points { background: #b18416; }
.downloads-history-stat-icon.active { background: #16815d; }
.downloads-history-stat div { min-width: 0; }
.downloads-history-stat strong,
.downloads-history-stat span:last-child { display: block; }

.downloads-history-stat strong {
    color: #24142f;
    font-size: 24px;
    line-height: 1.05;
}

.downloads-history-stat span:last-child {
    margin-top: 5px;
    overflow: hidden;
    color: #756b7b;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.downloads-history-list {
    display: grid;
    gap: 14px;
}

.download-history-card {
    position: relative;
    overflow: hidden;
    padding: 21px 22px;
    border: 1px solid #e9e4ec;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(38, 18, 52, .055);
}

.download-history-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #258466;
}

.download-history-card.is-expired::before { background: #aaa0af; }

.download-history-card-header,
.download-history-title-wrap {
    display: flex;
    align-items: center;
}

.download-history-card-header {
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 17px;
    border-bottom: 1px solid #f0ecf2;
}

.download-history-title-wrap {
    min-width: 0;
    gap: 12px;
}

.download-history-title-wrap > div { min-width: 0; }

.download-history-file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(145deg, #4a286e, #8650a9);
    box-shadow: 0 5px 12px rgba(74, 40, 110, .22);
    font-size: 21px;
    font-weight: 800;
}

.download-history-title {
    display: block;
    overflow: hidden;
    max-width: 680px;
    color: #392047;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 750;
}

.download-history-title:hover { color: #713399; text-decoration: underline; }
.download-history-title.missing { color: #8d8492; }

.download-history-record-id {
    display: block;
    margin-top: 4px;
    color: #a093a8;
    font-size: 10px;
    letter-spacing: .05em;
}

.download-history-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 750;
}

.download-history-status.active { color: #116748; background: #e6f6ef; }
.download-history-status.expired { color: #6e6672; background: #f0edf2; }

.download-history-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 15px 0 0;
}

.download-history-details > div {
    min-width: 0;
    padding: 11px 12px;
    border-radius: 10px;
    background: #faf9fb;
}

.download-history-details dt {
    margin-bottom: 5px;
    color: #968b9c;
    font-size: 10px;
    font-weight: 700;
}

.download-history-details dd {
    margin: 0;
    overflow: hidden;
    color: #322439;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
}

.download-history-details a { color: #6d3293; text-decoration: none; }
.download-history-details a:hover { text-decoration: underline; }

.download-history-details code {
    padding: 2px 5px;
    border-radius: 4px;
    color: #4d3f55;
    background: #eeeaf0;
    font-size: 11px;
}

.download-history-type {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
}

.download-history-type.direct { color: #116748; background: #e6f6ef; }
.download-history-type.pan { color: #4d3282; background: #eee8fa; }
.download-history-points { color: #b54848 !important; }
.download-history-free,
.download-history-active-text { color: #187052 !important; }
.download-history-expired-text { color: var(--ink-muted) !important; }

.downloads-history-empty {
    display: grid;
    justify-items: start;
    align-content: center;
    gap: 8px;
    min-height: 190px;
    padding: 30px;
    border: 1px dashed #d9cbe1;
    border-radius: 16px;
    color: #786582;
    background: #fff;
    text-align: left;
}

.downloads-history-empty > span {
    color: #6d3293;
    font-size: 34px;
}

.downloads-history-pagination { margin-top: 22px; }

@media (max-width: 760px) {
    .downloads-history-page {
        width: min(100% - 20px, 1040px);
        margin-top: 16px;
    }

    .downloads-history-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 23px 20px;
    }

    .downloads-history-actions { justify-content: flex-start; }
    .downloads-history-stats { gap: 8px; }

    .downloads-history-stat {
        display: block;
        padding: 13px 8px;
        text-align: left;
    }

    .downloads-history-stat-icon {
        width: 34px;
        height: 34px;
        margin: 0 0 8px;
        font-size: 16px;
    }

    .downloads-history-stat strong { font-size: 20px; }
    .download-history-card { padding: 17px 15px; }

    .download-history-card-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .download-history-title { max-width: calc(100vw - 104px); }
    .download-history-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 390px) {
    .downloads-history-stat span:last-child { font-size: 10px; }
    .download-history-details { grid-template-columns: 1fr; }
}

/* View 图包与幻灯片 */
.view-gallery-page {
    max-width: 1200px;
    margin: 28px auto;
    padding: 0 16px;
}
.view-gallery-header {
    padding: 22px 24px;
    margin-bottom: 22px;
    border: 1px solid var(--theme-legacy-border, #ded3e8);
    border-radius: 12px;
    background: var(--theme-legacy-soft, linear-gradient(135deg, #f8f3fc 0%, #fff 100%));
}
.view-gallery-header h1 { margin: 0 0 8px; color: var(--theme-legacy-accent, #4A286E); font-size: 26px; }
.view-gallery-header p { margin: 0; color: var(--theme-legacy-muted, #6f6277); font-size: 14px; }
.view-single-page { max-width: 1000px; }
.view-single-header { margin-bottom: 14px; }
.view-single-viewer {
    padding: 14px;
    border: 1px solid var(--theme-legacy-border, #dfd4e7);
    border-radius: 14px;
    background: var(--theme-legacy-surface, #fff);
    box-shadow: var(--theme-legacy-shadow, 0 8px 28px rgba(74, 40, 110, .1));
}
.view-single-viewer > h2 {
    margin: 0 0 12px;
    color: var(--theme-legacy-ink, #302438);
    font-size: 16px;
    line-height: 1.45;
    text-align: left;
    overflow-wrap: anywhere;
}
.view-single-image-button {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 360px;
    max-height: 72vh;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    background: var(--theme-legacy-media-bg, #1d1424);
    cursor: pointer;
    touch-action: manipulation;
}
.view-single-image-button img {
    display: block;
    max-width: 100%;
    max-height: 72vh;
    width: auto;
    height: auto;
    object-fit: contain;
}
.view-single-loading {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    padding: 8px 13px;
    border-radius: 999px;
    color: var(--theme-legacy-hero-text, #fff);
    background: var(--theme-legacy-hero-bg, rgba(74,40,110,.88));
    font-size: 13px;
    white-space: nowrap;
}
.view-single-counter {
    margin: 10px 0;
    color: var(--theme-legacy-muted, #735987);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}
.view-single-counter input {
    width: 76px;
    min-height: 34px;
    padding: 5px 8px;
    border: 1px solid var(--theme-legacy-border, #cdbbda);
    border-radius: 8px;
    color: var(--theme-legacy-accent, #4f246e);
    background: var(--theme-legacy-surface, #fff);
    font: inherit;
    text-align: center;
}
.view-single-counter input:focus {
    border-color: var(--theme-legacy-accent, #6a2c91);
    outline: 2px solid var(--theme-legacy-accent, rgba(106,44,145,.16));
    outline-offset: 1px;
}
.video-single-viewer { max-width: 820px; }
.video-access-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 34px;
    padding: 7px 12px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
}
.video-access-status.is-login {
    color: var(--theme-legacy-accent, #4a286e);
    border-color: var(--theme-legacy-border, #d8c5e4);
    background: var(--theme-legacy-selected-bg, #f5eef9);
}
.video-access-status.is-vip {
    color: #4a3510;
    border-color: #d8b95f;
    background: linear-gradient(135deg, #fff8df 0%, #f4dfa1 100%);
}
.video-access-status:hover {
    filter: brightness(.97);
    text-decoration: none;
}
.video-header-access-area {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: flex-end;
    margin-left: auto;
}
.video-header-access-area form {
    display: grid;
    justify-items: stretch;
    gap: 4px;
    min-width: min(230px, 100%);
    margin: 0;
}
.video-header-access-area small {
    display: block;
    color: var(--theme-legacy-muted, #705b7d);
    font-size: 10px;
    line-height: 1.35;
    text-align: left;
}
.video-header-download {
    min-height: 38px;
    padding: 8px 15px;
    line-height: 1.25;
    white-space: nowrap;
}
.video-detail-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}
.video-detail-heading h2 {
    min-width: 0;
    margin: 0;
    color: var(--theme-legacy-ink, #302438);
    font-size: 16px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.video-single-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 720px);
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    background: var(--theme-legacy-media-bg, #130d19);
}
.video-single-stage video {
    display: block;
    width: auto;
    max-width: 100%;
    height: min(72vh, 760px);
    max-height: 1280px;
    aspect-ratio: 9 / 16;
    background: #000;
}

html.video-playback-captcha-open,
html.video-playback-captcha-open body {
    overflow: hidden;
    overscroll-behavior: none;
}

.video-playback-locked-button {
    position: absolute;
    inset: 0;
    display: grid;
    width: 100%;
    height: 100%;
    place-content: center;
    justify-items: center;
    gap: 12px;
    padding: 24px;
    border: 0;
    color: #fff;
    background: radial-gradient(circle at 50% 42%, rgba(var(--theme-legacy-accent-rgb, 114, 62, 149), .45), transparent 42%), var(--theme-legacy-media-bg, #130d19);
    cursor: pointer;
    pointer-events: auto;
    text-align: center;
}

.video-playback-locked-button[hidden] {
    display: none;
}

.video-playback-locked-button:disabled {
    cursor: default;
}

.video-playback-manual-play-button {
    background: radial-gradient(circle at 50% 42%, rgba(var(--theme-legacy-accent-rgb, 114, 62, 149), .5), transparent 44%), var(--theme-legacy-media-bg, rgba(19, 13, 25, .94));
}

.video-playback-locked-button > span {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    padding-left: 4px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
    font-size: 22px;
}

.video-playback-locked-button > strong {
    max-width: 24ch;
    font-size: 14px;
    line-height: 1.5;
}

.video-playback-captcha-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147482900;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    background: var(--theme-legacy-overlay-bg, rgba(20, 11, 28, .68));
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    pointer-events: auto;
}

.video-playback-captcha-overlay[hidden] {
    display: none;
}

/* Mandatory online checks stay above the separate playback challenge. */
.online-captcha-overlay {
    z-index: 2147483000;
}

.verification-page {
    min-height: 100dvh;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* The standalone gate has no authorized page underneath it. Keep this
   backdrop static and non-interactive; the shared overlay supplies the blur. */
.verification-backdrop {
    position: fixed;
    inset: 0;
    overflow: hidden;
    padding: clamp(18px, 4vw, 64px);
    background: var(--bg-body, #f3eef7);
    pointer-events: none;
    user-select: none;
}

.verification-backdrop-header,
.verification-backdrop-nav,
.verification-backdrop-panels > span {
    display: block;
    border: 1px solid #e4dbea;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(67, 38, 88, .08);
}

.verification-backdrop-header {
    height: 92px;
    margin-bottom: 26px;
}

.verification-backdrop-nav {
    width: min(100%, 940px);
    height: 56px;
    margin-bottom: 30px;
    background: #e9deef;
}

.verification-backdrop-panels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.verification-backdrop-panels > span {
    height: clamp(240px, 52vh, 560px);
    background: linear-gradient(155deg, #eee5f3, #c4a5d7);
}

.verification-backdrop-panels > span:nth-child(2) {
    background: linear-gradient(155deg, #dfd5e9, #ac91bf);
}

.verification-backdrop-panels > span:nth-child(3) {
    background: linear-gradient(155deg, #f5edf8, #d5bfdf);
}

.verification-main {
    width: min(100%, 460px);
    min-width: 0;
}

.verification-card {
    margin: 0;
}

.video-playback-captcha-overlay.is-suspended {
    visibility: hidden;
    pointer-events: none;
}

.video-playback-captcha-dialog {
    width: min(100%, 460px);
    max-height: calc(100dvh - 36px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 28px;
    border: 1px solid var(--theme-legacy-border, rgba(112, 72, 151, .24));
    border-radius: 20px;
    color: var(--theme-legacy-ink, #24152f);
    background: var(--theme-legacy-surface, #fff);
    box-shadow: var(--theme-legacy-dialog-shadow, 0 28px 80px rgba(31, 15, 48, .34));
    outline: none;
}

.video-playback-captcha-close {
    float: right;
    width: 36px;
    height: 36px;
    margin: -8px -8px 0 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--purple-100);
    color: var(--purple-800);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.video-playback-captcha-dialog:focus-visible {
    box-shadow: var(--theme-legacy-dialog-focus-shadow, 0 0 0 4px rgba(218, 187, 238, .5), 0 28px 80px rgba(31, 15, 48, .34));
}

.video-playback-captcha-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 11px;
    color: var(--theme-legacy-accent, #765090);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.video-playback-captcha-dialog h2 {
    margin: 0;
    color: var(--theme-legacy-ink, #24152f);
    font-size: 24px;
    line-height: 1.25;
}

.video-playback-captcha-description {
    margin: 10px 0 22px;
    color: var(--theme-legacy-muted, #6f6178);
    font-size: 14px;
    line-height: 1.7;
}

.video-playback-captcha-label {
    display: block;
    margin-bottom: 8px;
    color: var(--theme-legacy-ink, #35213f);
    font-size: 14px;
    font-weight: 750;
}

.video-playback-captcha-row {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr) 48px;
    gap: 9px;
    align-items: stretch;
}

.video-playback-captcha-image {
    display: block;
    width: 168px;
    height: 56px;
    border: 1px solid var(--theme-legacy-border, #e1d7e7);
    border-radius: 11px;
    background: var(--theme-legacy-soft, #f6f1fa);
    object-fit: cover;
}

.video-playback-captcha-input {
    width: 100%;
    min-width: 0;
    height: 56px;
    box-sizing: border-box;
    padding: 0 13px;
    border: 1px solid var(--theme-legacy-border, #d8cce0);
    border-radius: 11px;
    color: var(--theme-legacy-ink, #24152f);
    background: var(--theme-legacy-surface, #fff);
    font: 700 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .14em;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.video-playback-captcha-input:focus {
    border-color: var(--theme-legacy-accent, #8054a2);
    box-shadow: var(--theme-legacy-focus-shadow, 0 0 0 4px rgba(128, 84, 162, .13));
}

.video-playback-captcha-input:disabled {
    color: #8e8394;
    background: #f5f2f6;
}

.video-playback-captcha-refresh {
    width: 48px;
    height: 56px;
    border: 1px solid var(--theme-legacy-border, #d8cce0);
    border-radius: 11px;
    color: var(--theme-legacy-accent, #5e3678);
    background: var(--theme-legacy-soft, #f8f5fa);
    font-size: 21px;
    cursor: pointer;
}

.video-playback-captcha-refresh:hover:not(:disabled) {
    background: var(--theme-legacy-selected-bg, #efe7f5);
}

.video-playback-captcha-error {
    min-height: 20px;
    margin: 9px 0 0;
    color: #b4233b;
    font-size: 13px;
    line-height: 1.5;
}

.video-playback-captcha-error.is-info {
    color: var(--theme-legacy-muted, #75697c);
}

.video-playback-captcha-submit {
    width: 100%;
    min-height: 49px;
    margin-top: 13px;
    border: 0;
    border-radius: 12px;
    color: var(--theme-legacy-action-text, #fff);
    background: var(--theme-legacy-action-bg, #5c2f7a);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, opacity .16s ease;
}

.video-playback-captcha-submit:hover:not(:disabled) {
    background: var(--theme-legacy-action-hover, #4b2467);
    transform: translateY(-1px);
}

.video-playback-captcha-submit:disabled,
.video-playback-captcha-refresh:disabled {
    cursor: wait;
    opacity: .66;
    transform: none;
}

@media (max-width: 520px) {
    .video-playback-captcha-overlay {
        place-items: end center;
        padding-top: max(12px, env(safe-area-inset-top));
        padding-right: max(10px, env(safe-area-inset-right));
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        padding-left: max(10px, env(safe-area-inset-left));
    }

    .verification-backdrop-panels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .video-playback-captcha-dialog {
        width: 100%;
        max-height: calc(100dvh - max(22px, env(safe-area-inset-top)));
        padding: 22px 18px;
        border-radius: 18px;
    }

    .video-playback-captcha-dialog h2 {
        font-size: 21px;
    }

    .video-playback-captcha-description {
        margin-bottom: 18px;
    }

    .video-playback-captcha-row {
        grid-template-columns: minmax(0, 1fr) 48px;
    }

    .video-playback-captcha-image {
        grid-column: 1 / -1;
        width: 100%;
        height: 60px;
    }

    .video-playback-captcha-input {
        grid-column: 1;
        font-size: 18px;
    }

    .video-playback-captcha-refresh {
        grid-column: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-playback-captcha-input,
    .video-playback-captcha-submit {
        transition: none;
    }
}

@media (max-width: 600px) {
    .video-single-viewer { padding: 8px; }
    .video-detail-heading {
        align-items: stretch;
        flex-direction: column;
    }
    .video-detail-heading h2 { text-align: left; }
    .video-access-status { width: 100%; }
    .video-header-access-area {
        width: 100%;
        margin-left: 0;
    }
    .video-header-access-area form,
    .video-header-download {
        width: 100%;
    }
    .video-single-stage video { width: 100%; height: auto; max-height: 70vh; }
}
.view-single-download {
    display: block;
    width: min(100%, 460px);
    margin: 0 auto 12px;
    padding: 12px 16px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}
.view-single-download-area { text-align: center; }
.view-single-download-area form { margin: 0; }
.view-single-download-area small {
    display: block;
    margin: -5px 0 11px;
    color: var(--theme-legacy-muted, #705b7d);
    font-size: 12px;
}
.view-single-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: min(100%, 620px);
    margin: 0 auto;
}
.view-single-navigation .btn {
    display: block;
    padding: 11px 10px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}
.view-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}
.view-image-card {
    overflow: hidden;
    border: 1px solid var(--theme-legacy-border, #e3dbe9);
    border-radius: 12px;
    background: var(--theme-legacy-surface, #fff);
    box-shadow: var(--theme-legacy-shadow, 0 5px 18px rgba(74, 40, 110, .08));
}
.view-image-preview {
    display: block;
    width: 100%;
    height: 300px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--theme-legacy-media-bg, #21162b);
    cursor: zoom-in;
}
.view-image-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 220ms var(--motion-standard);
}
.view-image-preview:hover img { transform: scale(1.025); }
.view-image-info { padding: 11px; }
.view-image-info h2 {
    min-height: 38px;
    margin: 0 0 10px;
    overflow: hidden;
    color: var(--theme-legacy-ink, #312638);
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.view-image-download {
    display: block;
    width: 100%;
    padding: 9px 8px;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}
.view-gallery-pagination { margin-top: 24px; }
.view-pack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}
.view-pack-card {
    overflow: hidden;
    border: 1px solid var(--theme-legacy-border, #e3dbe9);
    border-radius: 12px;
    background: var(--theme-legacy-surface, #fff);
    box-shadow: var(--theme-legacy-shadow, 0 5px 18px rgba(74, 40, 110, .08));
}
.view-pack-cover {
    width: 100%;
    height: 280px;
    padding: 0;
    border: 0;
    background: var(--theme-legacy-media-bg, #21162b);
    cursor: pointer;
    overflow: hidden;
}
.view-pack-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 250ms var(--motion-standard); }
.view-pack-cover:hover img { transform: scale(1.025); }
.view-pack-info { padding: 14px; }
.view-pack-info h2 {
    min-height: 42px;
    margin: 0 0 8px;
    color: var(--theme-legacy-ink, #231a29);
    font-size: 15px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.view-pack-info p { margin: 0 0 12px; color: var(--theme-legacy-muted, #75677d); font-size: 12px; }
.view-pack-open { width: 100%; }
.view-gallery-empty {
    grid-column: 1 / -1;
    padding: 60px 20px;
    border: 1px dashed var(--theme-legacy-border, #cbbbd8);
    border-radius: 12px;
    color: var(--ink-muted);
    text-align: left;
    background: var(--theme-legacy-soft, #faf7fc);
}
.view-slideshow[hidden] { display: none; }
.view-slideshow {
    position: fixed;
    z-index: var(--layer-modal);
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--theme-legacy-slideshow-bg, rgba(20, 12, 27, .96));
    color: #fff;
}
.view-slideshow-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    background: var(--theme-legacy-hero-bg, #4A286E);
}
.view-slideshow-toolbar strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-slideshow-download {
    margin-left: auto;
    padding: 8px 13px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 7px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
.view-slideshow-close {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
}
.view-slideshow-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 70px;
}
.view-slideshow-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.view-slideshow-nav {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 70px;
    transform: translateY(-50%);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 9px;
    background: var(--theme-legacy-hero-bg, rgba(74,40,110,.78));
    color: var(--theme-legacy-hero-text, #fff);
    font-size: 42px;
    cursor: pointer;
}
.view-slideshow-nav.is-prev { left: 12px; }
.view-slideshow-nav.is-next { right: 12px; }
.view-slideshow-status { position: absolute; color: var(--theme-legacy-hero-text, #e5d7ee); font-size: 14px; }
.view-slideshow-counter { padding: 10px; text-align: center; color: #e6c27a; background: var(--theme-legacy-media-bg, #21162b); }
@media (max-width: 600px) {
    .view-gallery-page { margin-top: 14px; padding: 0 9px; }
    .view-gallery-header { padding: 15px; margin-bottom: 12px; }
    .view-gallery-header h1 { font-size: 22px; }
    .view-single-viewer { padding: 8px; border-radius: 10px; }
    .view-single-viewer > h2 { margin: 3px 4px 9px; font-size: 13px; }
    .view-single-image-button { min-height: 260px; max-height: 68vh; border-radius: 7px; }
    .view-single-image-button img { max-height: 68vh; }
    .view-single-download { margin-bottom: 9px; padding: 11px 10px; }
    .view-single-navigation { gap: 8px; }
    .view-single-navigation .btn { padding: 10px 5px; font-size: 13px; }
    .view-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .view-image-preview { height: 220px; }
    .view-image-info { padding: 8px; }
    .view-image-info h2 { min-height: 34px; font-size: 12px; }
    .view-image-download { padding: 8px 4px; font-size: 12px; }
    .view-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .view-pack-cover { height: 220px; }
    .view-pack-info { padding: 10px; }
    .view-slideshow-stage { padding: 10px 46px; }
    .view-slideshow-nav { width: 38px; height: 58px; font-size: 34px; }
    .view-slideshow-nav.is-prev { left: 4px; }
    .view-slideshow-nav.is-next { right: 4px; }
    .view-slideshow-toolbar { padding: 8px 10px; }
    .view-slideshow-toolbar strong { max-width: 38%; font-size: 12px; }
    .view-slideshow-download { padding: 7px 9px; font-size: 12px; }
}

/* 展示与视频：复用下载记录页的紫色页面壳层和白色记录卡片 */
.gallery-history-page .catalog-navigation {
    margin: 0;
}

.gallery-history-page .view-single-viewer {
    max-width: none;
    padding: 21px 22px;
    border: 1px solid var(--theme-legacy-border, #e9e4ec);
    border-radius: 16px;
    box-shadow: var(--theme-legacy-shadow, 0 5px 20px rgba(38, 18, 52, .055));
}

.gallery-history-page .view-single-viewer::before {
    background: var(--theme-legacy-accent, #6d3293);
}

.gallery-history-page .downloads-history-empty {
    min-height: 190px;
    padding: 30px;
    border-radius: 16px;
    color: var(--theme-legacy-muted, #786582);
    background: var(--theme-legacy-surface, #fff);
}

.gallery-history-card-header {
    margin-bottom: 16px;
}

.gallery-history-card-header .download-history-title-wrap {
    flex: 1 1 360px;
}

.gallery-history-title {
    min-width: 0;
    margin: 0;
    color: var(--theme-legacy-ink, #392047);
    font-size: 15px;
    line-height: 1.45;
}

.gallery-history-page .download-history-title {
    max-width: none;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
}

.gallery-history-page .video-single-title-link {
    color: var(--theme-legacy-ink, #392047);
    text-decoration: none;
}

.gallery-history-page .video-single-title-link:hover {
    color: var(--theme-legacy-accent, #713399);
    text-decoration: underline;
}

.gallery-history-page .video-single-details {
    display: table;
    margin: 12px auto 4px;
}

.gallery-history-page .video-single-details[hidden] {
    display: none;
}

.gallery-referral-card {
    display: grid;
    gap: 13px;
    padding: 18px 20px;
    border: 1px solid var(--theme-legacy-border, rgba(109, 50, 147, .2));
    border-radius: 14px;
    background: var(--theme-legacy-soft, linear-gradient(135deg, #fff 0%, #fbf7fd 100%));
    box-shadow: var(--theme-legacy-shadow, 0 5px 20px rgba(38, 18, 52, .045));
}

.gallery-referral-heading {
    display: flex;
    align-items: center;
    gap: 9px;
}

.gallery-referral-heading h2 {
    margin: 0;
    color: var(--theme-legacy-ink, #392047);
    font-size: 15px;
    line-height: 1.4;
}

.gallery-referral-rewards {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    gap: 18px;
    align-items: start;
    padding: 14px 0;
    border-top: 1px solid var(--theme-legacy-border, rgba(109, 50, 147, .13));
    border-bottom: 1px solid var(--theme-legacy-border, rgba(109, 50, 147, .13));
}

.gallery-referral-rewards > p {
    max-width: 65ch;
    margin: 0;
    color: var(--theme-legacy-muted, #65556e);
    font-size: 13px;
    line-height: 1.65;
    text-wrap: pretty;
}

.gallery-referral-vip-summary {
    display: grid;
    gap: 7px;
}

.gallery-referral-vip-summary strong {
    color: var(--theme-legacy-accent, #56306f);
    font-size: 12px;
    font-weight: 780;
}

.gallery-referral-vip-summary ul {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    color: var(--theme-legacy-muted, #786582);
    font-size: 11px;
    line-height: 1.5;
    list-style: none;
}

.gallery-referral-vip-summary li::before {
    margin-right: 6px;
    color: var(--theme-legacy-accent, #8a5da4);
    content: "•";
}

.view-header-download-area {
    flex: 0 0 auto;
    margin-left: auto;
}

.view-header-download-area form {
    margin: 0;
}

.view-header-download {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 9px 16px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.gallery-referral-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 10px;
    background: var(--theme-legacy-selected-bg, #f0e5f6);
    font-size: 17px;
}

.gallery-referral-copy-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.gallery-referral-copy-row input {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--theme-legacy-border, #d7c8df);
    border-radius: 9px;
    color: var(--theme-legacy-muted, #4f3a5b);
    background: var(--theme-legacy-surface, #fff);
    font: inherit;
    font-size: 13px;
}

.gallery-referral-copy-row input:focus {
    border-color: var(--theme-legacy-accent, #6d3293);
    outline: 2px solid var(--theme-legacy-accent, rgba(109, 50, 147, .14));
    outline-offset: 1px;
}

.gallery-referral-copy-button {
    flex: 0 0 auto;
    min-width: 126px;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .gallery-history-page .view-single-viewer {
        padding: 17px 15px;
    }

    .gallery-history-page .download-history-card-header {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .gallery-history-card-header .video-access-status {
        flex: 1 1 100%;
        width: 100%;
    }

    .gallery-history-card-header .video-header-access-area {
        width: 100%;
        flex: 1 1 100%;
        margin-left: 0;
    }

    .gallery-history-page .download-history-title {
        max-width: none;
    }

    .gallery-referral-card {
        padding: 16px 15px;
    }

    .gallery-referral-rewards {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .view-header-download-area {
        width: 100%;
        flex: 1 1 100%;
        margin-left: 0;
    }

    .view-header-download-area form,
    .view-header-download {
        width: 100%;
    }

    .gallery-referral-copy-row {
        align-items: stretch;
        flex-direction: column;
    }

    .gallery-referral-copy-button {
        width: 100%;
    }
}

@media (max-width: 390px) {
    .gallery-history-page .download-history-file-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        font-size: 17px;
    }
}

/* ==========================================
   优云宝收银台（统一紫金主题）
   ========================================== */
.yyb-page {
    max-width: 680px;
    margin: 18px auto 32px;
}

.yyb-card {
    padding: 20px 22px;
    text-align: left;
    background: #fff;
    border: 1px solid rgba(91, 50, 135, 0.22);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(61, 31, 92, 0.08);
}

.yyb-title {
    margin: 0 0 6px;
    color: #1f2328;
    font-size: 22px;
    line-height: 1.35;
}

.yyb-order-line,
.yyb-help,
.yyb-countdown {
    color: #57606a;
}

.yyb-order-line {
    margin: 0 0 8px;
    font-size: 13px;
}

.yyb-order-line code,
.yyb-copy-row code,
.yyb-account-row code {
    color: #1f2328;
    font-size: 14px;
    font-weight: 700;
}

.yyb-match-panel {
    margin: 14px 0;
    padding: 14px;
    text-align: left;
    background: linear-gradient(145deg, #fbf8ff 0%, #f3ecfa 100%);
    border: 1px solid rgba(91, 50, 135, 0.24);
    border-radius: 10px;
}

.yyb-match-panel > h2 {
    margin: 0;
    color: #1f2328;
    font-size: 16px;
    text-align: left;
}

.yyb-match-tip {
    margin: 4px 0 10px;
    color: #57606a;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
}

.yyb-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.yyb-choice {
    display: flex;
    gap: 9px;
    padding: 11px;
    background: #fff;
    border: 1px solid #d9c9e8;
    border-radius: 8px;
}

.yyb-choice-primary {
    border-color: #8b62ae;
    box-shadow: inset 3px 0 0 #5B3287;
}

.yyb-choice-number {
    display: inline-flex;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    color: #F2D27A;
    background: linear-gradient(135deg, #5B3287, #3D1F5C);
    border-radius: 50%;
    font-weight: 700;
}

.yyb-choice h3,
.yyb-direct-transfer h3 {
    margin: 1px 0 4px;
    color: #24292f;
    font-size: 14px;
}

.yyb-choice p,
.yyb-direct-transfer p {
    margin: 0;
    color: #24292f;
    font-size: 12px;
    line-height: 1.5;
}

.yyb-copy-row,
.yyb-account-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 7px;
}

.yyb-direct-transfer {
    margin-top: 10px;
    padding: 11px;
    background: #fffdf5;
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 8px;
}

.yyb-amount {
    margin: 6px 0 8px;
    color: #cf222e;
    font-size: 22px;
    font-weight: 800;
}

.yyb-wechat-risk {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    gap: 10px;
    margin: 10px auto 12px;
    padding: 11px 13px;
    color: #6f3b00;
    text-align: left;
    background: #fff8c5;
    border: 1px solid #d4a72c;
    border-left: 4px solid #bf8700;
    border-radius: 8px;
    overflow-wrap: anywhere;
}

.yyb-wechat-risk-icon {
    flex: 0 0 auto;
    line-height: 1.45;
}

.yyb-wechat-risk strong {
    display: block;
    color: #5c3200;
    font-size: 13px;
}

.yyb-wechat-risk p {
    margin: 3px 0 0;
    font-size: 12px;
    line-height: 1.55;
}

.yyb-qrcode {
    display: flex;
    width: 200px;
    min-height: 200px;
    margin: 8px auto 6px;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: #fff;
    border: 2px solid #5B3287;
    border-radius: 8px;
}

.yyb-open-link {
    display: inline-block;
    margin: 2px auto 5px;
    color: #0969da;
    font-weight: 700;
}

.yyb-unavailable {
    margin: 24px auto;
    padding: 28px 16px;
    color: #6b6075;
    background: #faf8fc;
    border: 1px dashed #8b62ae;
    border-radius: 8px;
}

.yyb-status {
    margin: 10px 0 7px;
    padding: 10px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
}

.yyb-status-waiting {
    color: #24292f;
    background: #f3ecfa;
    border: 1px solid #bda2d3;
}

.yyb-status-success {
    color: #116329;
    background: #dafbe1;
    border: 1px solid #4ac26b;
}

.yyb-status-error {
    color: #a40e26;
    background: #ffebe9;
    border: 1px solid #ff8182;
}

.yyb-help {
    margin: 7px 0 10px;
    font-size: 12px;
}

.yyb-countdown {
    margin: 5px 0 0;
    font-size: 12px;
}

.yyb-actions {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
}

.yyb-hidden {
    display: none !important;
}

/* Payment waiting/review page — shared purple-gold theme */
.payment-waiting-page {
    max-width: 640px;
    margin: 24px auto 40px;
    padding: 28px;
    text-align: left;
    color: var(--theme-legacy-ink, #24292f);
    background: var(--theme-legacy-surface, #fff);
    border: 1px solid var(--theme-legacy-border, rgba(91, 50, 135, 0.24));
    border-radius: 12px;
    box-shadow: var(--theme-legacy-shadow, 0 10px 30px rgba(61, 31, 92, 0.09));
}

.payment-waiting-instructions,
.payment-waiting-edit,
.payment-waiting-order-card {
    padding: 18px;
    margin-bottom: 22px;
    text-align: left;
    background: var(--theme-legacy-soft, linear-gradient(145deg, #fbf8ff 0%, #f3ecfa 100%));
    border: 1px solid var(--theme-legacy-border, rgba(91, 50, 135, 0.28));
    border-radius: 9px;
}

.payment-waiting-instructions h3,
.payment-waiting-edit h3 {
    margin: 0 0 8px;
    color: var(--theme-legacy-accent, #3D1F5C);
}

.payment-waiting-instructions code,
.payment-waiting-instructions [style*="font-family:monospace"] {
    color: var(--theme-legacy-accent, #3D1F5C);
}

.payment-waiting-edit input {
    background: var(--theme-legacy-surface, #fff);
    border-color: var(--theme-legacy-border, #bda2d3) !important;
}

.payment-waiting-edit input:focus {
    border-color: var(--theme-legacy-accent, #5B3287) !important;
    outline: 2px solid var(--theme-legacy-accent, rgba(91, 50, 135, 0.14));
}

.payment-waiting-title {
    margin: 0 0 10px;
    color: var(--theme-legacy-accent, #3D1F5C);
}

.payment-waiting-spinner {
    width: 50px;
    height: 50px;
    animation: rotate 2s cubic-bezier(.45, 0, .55, 1) infinite;
}

.payment-waiting-order-card {
    margin: 25px 0;
    font-size: 13px;
}

.payment-waiting-order-card li:first-child {
    border-bottom-color: var(--theme-legacy-border, #bda2d3) !important;
}

.payment-order-reference-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #d0d7de;
}

.payment-result-actions,
.payment-support-row {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.payment-support-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    min-height: 40px;
    padding: 8px 18px;
    box-sizing: border-box;
    line-height: 1.2;
    white-space: nowrap;
}

.payment-waiting-polling {
    color: var(--theme-legacy-accent, #5B3287);
    font-size: 14px;
    font-weight: 700;
}

.payment-waiting-page .btn-back {
    color: var(--theme-legacy-accent, #5B3287);
    border-color: var(--theme-legacy-border, #8b62ae);
}

.payment-return-btn {
    color: #5B3287;
    background: #fff;
    border-color: #8b62ae;
}

.payment-return-btn:hover {
    color: #fff;
    background: #5B3287;
    border-color: #5B3287;
}

/* Gift card order tutorial */
.gift-guide-page {
    max-width: 760px;
    margin: 24px auto 40px;
    padding: 28px;
    color: var(--theme-legacy-ink, #24292f);
    background: var(--theme-legacy-surface, #fff);
    border: 1px solid var(--theme-legacy-border, rgba(91, 50, 135, 0.25));
    border-radius: 12px;
    box-shadow: var(--theme-legacy-shadow, 0 10px 30px rgba(61, 31, 92, 0.09));
}

.gift-guide-header {
    padding-bottom: 18px;
    border-bottom: 2px solid var(--theme-legacy-border, #eee4f6);
}

.gift-guide-header h1 {
    margin: 0 0 8px;
    color: var(--theme-legacy-accent, #3D1F5C);
    font-size: 26px;
}

.gift-guide-header p {
    margin: 0;
    color: var(--theme-legacy-muted, #57606a);
    line-height: 1.65;
}

.gift-guide-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 22px;
}

.gift-guide-summary > div {
    min-width: 0;
    padding: 13px;
    background: var(--theme-legacy-selected-bg, #f7f1fb);
    border: 1px solid var(--theme-legacy-border, #dbc9e8);
    border-radius: 8px;
}

.gift-guide-summary span,
.gift-guide-values dt {
    display: block;
    margin-bottom: 5px;
    color: var(--theme-legacy-muted, #6f5684);
    font-size: 12px;
    font-weight: 700;
}

.gift-guide-summary strong,
.gift-guide-values dd {
    margin: 0;
    color: var(--theme-legacy-ink, #24292f);
    overflow-wrap: anywhere;
}

.gift-guide-steps {
    counter-reset: gift-guide-step;
    padding: 0;
    margin: 0;
    list-style: none;
}

.gift-guide-steps > li {
    position: relative;
    margin-bottom: 13px;
    padding: 16px 16px 16px 58px;
    background: var(--theme-legacy-soft, linear-gradient(145deg, #fcfaff, #f5eefb));
    border: 1px solid var(--theme-legacy-border, #dbc9e8);
    border-radius: 9px;
}

.gift-guide-steps > li::before {
    counter-increment: gift-guide-step;
    content: counter(gift-guide-step);
    position: absolute;
    top: 16px;
    left: 16px;
    width: 28px;
    height: 28px;
    color: var(--theme-legacy-action-text, #f7d96b);
    background: var(--theme-legacy-action-bg, #5B3287);
    border-radius: 50%;
    font-weight: 800;
    line-height: 28px;
    text-align: center;
}

.gift-guide-steps h2 {
    margin: 1px 0 8px;
    color: var(--theme-legacy-accent, #3D1F5C);
    font-size: 17px;
}

.gift-guide-steps p {
    margin: 0;
    color: var(--theme-legacy-muted, #57606a);
    line-height: 1.6;
}

.gift-guide-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 12px 0 0;
}

.gift-guide-values > div,
.gift-guide-emphasis,
.gift-guide-code {
    padding: 10px 12px;
    background: var(--theme-legacy-surface, #fff);
    border: 1px solid var(--theme-legacy-border, #cbb4dc);
    border-radius: 7px;
}

.gift-guide-emphasis,
.gift-guide-code {
    margin-top: 9px !important;
    color: var(--theme-legacy-accent, #3D1F5C) !important;
    font-size: 18px;
    font-weight: 800;
    user-select: all;
}

.gift-guide-code {
    font-family: monospace;
}

.gift-copy-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.gift-copy-value {
    flex: 1;
    min-width: 0;
    padding: 9px 10px;
    color: var(--theme-legacy-accent, #3D1F5C);
    background: var(--theme-legacy-selected-bg, #f8f5fb);
    border: 1px solid var(--theme-legacy-border, #dbc9e8);
    border-radius: 6px;
    font-family: monospace;
    font-size: 15px;
    font-weight: 700;
    overflow-wrap: anywhere;
    user-select: all;
}

.gift-copy-button {
    flex: 0 0 auto;
    padding: 6px 9px;
    color: var(--theme-legacy-accent, #5B3287);
    background: var(--theme-legacy-surface, #fff);
    border: 1px solid var(--theme-legacy-border, #9c78ba);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.gift-copy-button:hover,
.gift-copy-button.is-copied {
    color: var(--theme-legacy-action-text, #fff);
    background: var(--theme-legacy-action-hover, #5B3287);
    border-color: var(--theme-legacy-accent, #5B3287);
}

.gift-guide-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.gift-guide-link svg {
    flex: 0 0 auto;
}

.gift-guide-links,
.gift-guide-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* Points and VIP use the established proxy-purchase palette and spacing. */
.member-commerce-page {
    width: min(100% - 24px, 980px);
    margin: 24px auto;
}

.member-commerce-heading {
    margin-bottom: 18px;
    text-align: left;
}

.member-commerce-heading h1 {
    margin: 0;
    color: var(--theme-legacy-accent, #4a286e);
    font-size: clamp(1.65rem, 2.4vw, 2rem);
    line-height: 1.25;
}

.member-commerce-heading p {
    max-width: 65ch;
    margin: 7px 0 0;
    color: var(--theme-legacy-muted, #6f6277);
    line-height: 1.65;
    text-wrap: pretty;
}

.member-commerce-wallet {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin: 18px 0;
    padding: 18px 22px;
    border-radius: 12px;
    color: var(--theme-legacy-hero-text, #fff);
    background: var(--theme-legacy-hero-bg, linear-gradient(135deg, #4a286e, #733ba0));
}

.member-commerce-wallet span {
    color: var(--theme-legacy-hero-accent, #f1d47a);
    font-size: 25px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.member-commerce-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 16px;
    margin-top: 18px;
}

.member-commerce-plan {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--theme-legacy-border, #e2d8e9);
    border-radius: 14px;
    background: var(--theme-legacy-surface, #fff);
    box-shadow: var(--theme-legacy-shadow, 0 6px 22px rgba(74, 40, 110, .07));
    text-align: left;
}

.member-commerce-plan--featured {
    border-color: var(--theme-legacy-accent, #6b2e91);
    background: var(--theme-legacy-selected-bg, #f7f0fb);
    box-shadow: var(--theme-legacy-shadow, inset 0 3px 0 #6b2e91, 0 6px 22px rgba(74, 40, 110, .07));
}

.member-commerce-tag-slot {
    display: flex;
    align-items: flex-start;
    min-height: 1.7rem;
    margin-bottom: 10px;
}

.member-commerce-tag {
    max-width: 100%;
    padding: 3px 9px;
    border: 1px solid #ead27a;
    border-radius: 6px;
    color: #634b0a;
    background: #fff8dd;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.member-commerce-plan h2 {
    margin: 0;
    color: var(--theme-legacy-accent, #4a286e);
    font-size: 1.3rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.member-commerce-description {
    margin: 8px 0 0;
    color: var(--theme-legacy-muted, #76687e);
    font-size: 14px;
    line-height: 1.55;
}

.member-commerce-price-block {
    margin: 18px 0 22px;
}

.member-commerce-original-price {
    min-height: 1.5em;
    margin-bottom: 4px;
    color: var(--theme-legacy-muted, #76687e);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.member-commerce-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 6px;
    color: var(--theme-legacy-muted, #76687e);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.member-commerce-price strong {
    min-width: 0;
    color: var(--theme-legacy-accent, #4a286e);
    font-size: clamp(1.8rem, 3vw, 2.1rem);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}

.member-commerce-plan form {
    width: 100%;
    margin-top: auto;
}

.member-commerce-plan .btn {
    width: 100%;
    min-height: 44px;
    height: auto;
    padding: 10px 16px;
    line-height: 1.5;
    white-space: normal;
}

.member-commerce-plan .btn:disabled {
    cursor: not-allowed;
}

.member-commerce-page .bonus-pending-orders {
    margin-top: 24px;
    border-color: var(--theme-legacy-border, #e2d8e9);
    border-radius: 14px;
    background: var(--theme-legacy-surface, #fff);
    box-shadow: var(--theme-legacy-shadow, 0 6px 22px rgba(74, 40, 110, .07));
}

.member-commerce-page .bonus-order-item > div {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .member-commerce-grid {
        gap: 14px;
    }

    .member-commerce-plan {
        padding: 18px;
    }
}

.bonus-invitee-reward {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 20px;
    padding: 13px 16px;
    color: var(--theme-legacy-accent, #4a286e);
    background: var(--theme-legacy-selected-bg, linear-gradient(135deg, #fbf7ff 0%, #f2e8fa 100%));
    border: 1px solid var(--theme-legacy-border, #d9c5e8);
    border-radius: 10px;
    text-align: left;
}

.bonus-invitee-reward-icon {
    flex: 0 0 auto;
    font-size: 21px;
}

.bonus-invitee-reward strong {
    font-size: 14px;
    line-height: 1.55;
}

/* Pending orders shown below the points packages */
.bonus-pending-orders {
    margin-top: 34px;
    padding: 20px;
    text-align: left;
    background: var(--theme-legacy-soft, linear-gradient(145deg, #fbf8ff, #f3ecfa));
    border: 1px solid var(--theme-legacy-border, rgba(91, 50, 135, 0.3));
    border-radius: 12px;
}

.bonus-pending-heading {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--theme-legacy-border, #dbc9e8);
}

.bonus-pending-heading > span {
    font-size: 21px;
}

.bonus-pending-heading h2 {
    margin: 0 0 4px;
    color: var(--theme-legacy-accent, #3D1F5C);
    font-size: 18px;
}

.bonus-pending-heading p,
.bonus-order-item p {
    margin: 0;
    color: var(--theme-legacy-muted, #6b7280);
    font-size: 12px;
    line-height: 1.55;
}

.bonus-order-day {
    margin-top: 17px;
}

.bonus-order-day h3 {
    margin: 0 0 8px;
    color: var(--theme-legacy-muted, #6f5684);
    font-size: 13px;
}

.bonus-order-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.bonus-order-item {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: var(--theme-legacy-surface, #fff);
    border: 1px solid var(--theme-legacy-border, #d6c2e5);
    border-radius: 8px;
}

.bonus-order-item strong {
    display: block;
    margin-bottom: 4px;
    color: var(--theme-legacy-ink, #24292f);
    font-size: 14px;
}

/* Profile payment status and order history */
.profile-paid-line {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 7px;
    color: #666;
    font-size: 14px;
}

.profile-paid-badge,
.profile-order-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.profile-paid-badge.is-paid,
.profile-order-status.is-paid {
    color: #116329;
    background: #dafbe1;
    border: 1px solid #4ac26b;
}

.profile-paid-badge.is-unpaid,
.profile-order-status.is-pending {
    color: #6f5684;
    background: #f3ecfa;
    border: 1px solid #cbb4dc;
}

.profile-order-status.is-rejected {
    color: #a40e26;
    background: #ffebe9;
    border: 1px solid #ff8182;
}

.profile-payment-card {
    padding: 24px;
}

.profile-payment-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}

.profile-payment-heading h3 {
    margin: 0 0 4px;
    color: #3D1F5C;
    font-size: 17px;
}

.profile-payment-heading p {
    margin: 0;
    color: #6b7280;
    font-size: 12px;
}

.profile-payment-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.profile-payment-item {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 13px 14px;
    background: linear-gradient(145deg, #fcfaff, #f5eefb);
    border: 1px solid #dbc9e8;
    border-radius: 8px;
}

.profile-payment-main,
.profile-payment-side {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-payment-main > strong {
    color: #24292f;
    font-family: monospace;
}

.profile-payment-main > span,
.profile-payment-main > small {
    color: #6b7280;
    font-size: 12px;
}

.profile-payment-side {
    align-items: flex-end;
    flex: 0 0 auto;
}

.profile-payment-side > strong {
    color: #3D1F5C;
}

.profile-payment-side > a {
    color: #5B3287;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.profile-payment-empty {
    padding: 24px;
    color: var(--ink-muted);
    text-align: left;
    background: #faf8fc;
    border: 1px dashed #cbb4dc;
    border-radius: 8px;
}

@media (max-width: 600px) {
    .yyb-page {
        margin: 10px auto 22px;
    }

    .yyb-card {
        padding: 15px 14px;
    }

    .yyb-match-panel {
        padding: 12px;
    }

    .yyb-title {
        font-size: 19px;
    }

    .yyb-wechat-risk {
        margin: 9px 0 12px;
        padding: 10px 11px;
    }

    .yyb-choice-grid {
        grid-template-columns: 1fr;
    }

    .yyb-actions,
    .yyb-actions .btn {
        width: 100%;
    }

    .payment-waiting-page {
        margin: 10px auto 24px;
        padding: 18px 14px;
    }

    .payment-waiting-instructions,
    .payment-waiting-edit,
    .payment-waiting-order-card {
        padding: 14px;
    }

    .payment-order-reference-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .payment-result-actions,
    .payment-support-row,
    .yyb-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .payment-result-actions .btn,
    .payment-support-row .btn,
    .yyb-actions .btn,
    .gift-guide-actions .payment-support-btn {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .gift-guide-page {
        margin: 10px auto 24px;
        padding: 18px 14px;
    }

    .gift-guide-header h1 {
        font-size: 22px;
    }

    .gift-guide-summary,
    .gift-guide-values {
        grid-template-columns: 1fr;
    }

    .gift-guide-steps > li {
        padding: 14px 12px 14px 50px;
    }

    .gift-guide-steps > li::before {
        top: 14px;
        left: 12px;
    }

    .gift-guide-actions .btn {
        width: 100%;
        box-sizing: border-box;
    }

    .gift-copy-row {
        align-items: stretch;
        flex-direction: column;
    }

    .gift-copy-button {
        width: 100%;
    }

    .bonus-pending-orders {
        padding: 15px 12px;
    }

    .bonus-order-item {
        align-items: stretch;
        flex-direction: column;
    }

    .bonus-order-item .btn {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .profile-payment-heading,
    .profile-payment-item {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-payment-heading .btn {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .profile-payment-side {
        align-items: flex-start;
    }
}

.card { 
    background: #fff; 
    border: 1px solid #eaeaea; 
    border-radius: 6px; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    transition: transform 300ms var(--motion-standard), box-shadow 300ms var(--motion-standard);
}

.card:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 6px 16px rgba(0,0,0,0.08); 
    border-color: #dcdcdc;
}

.card-img-wrapper { 
    position: relative; 
    width: 100%; 
    height: 220px; 
    overflow: hidden; 
    background: #111; 
}

.card-img-wrapper img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 400ms var(--motion-standard);
}

.card-img-wrapper:hover img { 
    object-fit: contain !important; 
    transform: scale(1.03); 
}

.card-img-wrapper.has-screenshots { cursor: pointer; }
.card-img-wrapper.no-screenshots { cursor: default; }

.badge-shot {
    position: absolute; 
    top: 8px; 
    right: 8px;
    background: rgba(28,28,28,0.85); 
    color: #D4AF37; /* 黑底金字 */
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px; 
    border-radius: 2px; 
    pointer-events: none; 
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.card-info { 
    padding: 12px 10px; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    flex-grow: 1; 
}

.card-action-group .btn {
    min-width: 0;
    box-sizing: border-box;
    padding-inline: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-action-group .btn > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-title { 
    font-size: 13px; 
    font-weight: 600; 
    color: #1c1c1c; 
    line-height: 1.5; 
    height: 39px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    margin-bottom: 8px; 
}

.card-meta { 
    display: flex; 
    justify-content: flex-start;
    align-items: center; 
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px; 
    color: #666; 
}

.card-points {
    white-space: nowrap;
}

.card-meta-actions {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
    margin-left: auto;
}

.media-detail-link {
    display: inline-flex;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid rgba(124, 116, 128, .2);
    border-radius: 50%;
    color: #9c959f;
    background: rgba(124, 116, 128, .055);
    text-decoration: none;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.media-detail-link:hover {
    border-color: rgba(109, 50, 147, .38);
    color: #5b3287;
    background: rgba(109, 50, 147, .08);
}

.media-detail-link:focus-visible {
    outline: 2px solid #5b3287;
    outline-offset: 2px;
}

.media-gallery-preview-link {
    color: var(--ink-muted, #66586d);
}

.media-favorite-control {
    flex: 0 0 auto;
}

.media-favorite-control form {
    margin: 0;
}

.media-favorite-button {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid rgba(124, 116, 128, .2);
    border-radius: 999px;
    color: #9c959f;
    background: rgba(124, 116, 128, .055);
    font: inherit;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.media-favorite-button:hover {
    border-color: rgba(109, 50, 147, .38);
    color: #5b3287;
    background: rgba(109, 50, 147, .08);
    transform: translateY(-1px);
}

.media-favorite-button:focus-visible {
    outline: 2px solid rgba(91, 50, 135, .42);
    outline-offset: 2px;
}

.media-favorite-button.is-active {
    border-color: rgba(109, 50, 147, .3);
    color: #5b3287;
    background: rgba(109, 50, 147, .11);
}

.media-favorite-heart {
    color: #9c959f;
    font-size: 14px;
    line-height: 1;
    transition: color 160ms ease, transform 160ms ease;
}

.media-favorite-button.is-active .media-favorite-heart {
    color: #6d3293;
    transform: scale(1.06);
}

.media-favorited-at {
    display: block;
    margin: -2px 0 8px;
    color: #8a7c90;
    font-size: 10px;
    line-height: 1.35;
}

.user-menu-favorite-heart,
.profile-favorite-heart {
    color: #6d3293;
}

.media-favorite-button.is-loading {
    opacity: .62;
    cursor: wait;
}

/* 用户收藏记录 */
.favorite-history-page {
    width: min(1120px, calc(100% - 32px));
    margin: 32px auto 48px;
}

.favorite-history-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 30px 34px;
    border: 1px solid rgba(242, 210, 122, .26);
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 8%, rgba(242, 210, 122, .2), transparent 31%),
        linear-gradient(135deg, #301443 0%, #532170 55%, #75369a 100%);
    box-shadow: 0 16px 40px rgba(74, 40, 110, .22);
}

.favorite-history-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #f2d27a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}

.favorite-history-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(24px, 4vw, 34px);
    line-height: 1.25;
}

.favorite-history-hero h1 span {
    color: #f2d27a;
}

.favorite-history-hero p {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
}

.favorite-history-hero-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.favorite-history-hero-actions span,
.favorite-history-hero-actions a {
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.favorite-history-hero-actions a:hover {
    background: rgba(255, 255, 255, .2);
}

.favorite-history-grid {
    margin-top: 20px;
}

.favorite-history-empty {
    display: grid;
    grid-column: 1 / -1;
    justify-items: start;
    align-content: center;
    gap: 8px;
    min-height: 210px;
    padding: 30px;
    border: 1px dashed #d9cbe1;
    border-radius: 16px;
    color: #786582;
    background: #fff;
    text-align: left;
}

.favorite-history-empty span {
    color: #a59ca8;
    font-size: 38px;
}

.favorite-history-pagination {
    margin-top: 22px;
}

@media (max-width: 760px) {
    .favorite-history-page {
        width: min(100% - 20px, 1120px);
        margin-top: 16px;
    }

    .favorite-history-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 23px 20px;
    }

    .favorite-history-hero-actions {
        justify-content: flex-start;
    }
}

.card-detail-link {
    color: #5B3287;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.card-detail-link:hover,
.card-detail-link:focus-visible {
    color: #3D1F5C;
    text-decoration: underline;
}

.lock-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(28, 28, 28, 0.75);
    color: #F2D27A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    z-index: 2;
}

/* ==========================================
   4. 🚀 现代化独立卡片分页
   ========================================== */
.custom-pg-container {
    margin: 30px 0 20px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
}

.custom-pg-info {
    font-size: 14px !important;
    color: #666 !important;
    text-align: left !important;
}

.custom-pg-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.c-pg-btn, .c-pg-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1c1c1c !important;
    background-color: #ffffff !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: color 200ms var(--motion-standard), background-color 200ms var(--motion-standard), border-color 200ms var(--motion-standard), box-shadow 200ms var(--motion-standard), transform 200ms var(--motion-standard) !important;
    user-select: none !important;
    cursor: pointer !important;
}

.c-pg-num {
    min-width: 36px !important;
    padding: 0 10px !important;
}

.c-pg-btn:hover:not(.disabled), .c-pg-num:hover:not(.active) {
    background-color: #1c1c1c !important;
    border-color: #1c1c1c !important;
    color: #D4AF37 !important; /* 悬浮时变成黑底金字 */
}

.c-pg-num.active {
    background-color: #4A286E !important; /* 绸缎紫底 */
    border-color: #4A286E !important;
    color: #F2D27A !important; /* 金字 */
    box-shadow: 0 2px 6px rgba(74, 40, 110, 0.3) !important;
}

.c-pg-btn.disabled {
    color: #999 !important;
    background-color: #f5f5f5 !important;
    border-color: #e5e5e5 !important;
    cursor: not-allowed !important;
}

.c-pg-dots {
    color: #666 !important;
    font-weight: bold !important;
    padding: 0 4px !important;
}

.c-pg-jump {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
}

.c-pg-input {
    width: 78px !important;
    height: 36px !important;
    box-sizing: border-box !important;
    padding: 0 8px !important;
    text-align: center !important;
    color: #3D1F5C !important;
    background-color: #ffffff !important;
    border: 1px solid #9c78ba !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.c-pg-input:focus {
    border-color: #5B3287 !important;
    outline: 2px solid rgba(91, 50, 135, 0.16) !important;
}

.c-pg-total {
    color: #666 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.c-pg-go {
    height: 36px !important;
    padding: 0 12px !important;
    color: #F2D27A !important;
    background: #4A286E !important;
    border: 1px solid #4A286E !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

@media (max-width: 480px) {
    .custom-pg-controls {
        width: 100% !important;
    }

    .c-pg-btn {
        flex: 1 1 0 !important;
    }

    .c-pg-jump {
        justify-content: flex-start !important;
        width: 100% !important;
    }
}

/* 展示 / 视频沿用首页资源列表的分页样式，并与媒体内容明确分隔。 */
.view-single-pagination.custom-pg-container {
    margin: 24px 0 0 !important;
    padding-top: 18px;
    border-top: 1px solid var(--theme-legacy-border, rgba(91, 50, 135, .14));
    gap: 0 !important;
}

.view-single-pagination .view-single-pagination-controls {
    width: 100% !important;
}

.view-current-share {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.view-single-pagination .view-single-share-current {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: auto;
    height: auto !important;
    min-height: 44px;
    padding: 9px 15px !important;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.25;
    white-space: normal;
}

.view-single-share-current svg {
    flex-shrink: 0;
}

.view-single-pagination .view-single-share-current.is-copied {
    color: #166534 !important;
    border-color: #86b99a !important;
    background: #edf8f0 !important;
}

.view-current-share-status {
    color: #166534;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.view-current-share-status:empty {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.view-current-share-status.is-error {
    color: #9f1239;
}

.view-current-share .clipboard-manual-copy {
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
}

@media (max-width: 480px) {
    .view-single-pagination.custom-pg-container {
        margin-top: 20px !important;
        padding-top: 16px;
    }

    .view-single-pagination .view-single-previous,
    .view-single-pagination .view-single-next {
        flex: 1 1 0 !important;
    }

    .view-current-share {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .view-single-pagination .view-single-share-current {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        padding: 9px 14px !important;
        white-space: normal;
    }
}

/* ==========================================
   5. 全屏剧照预览弹窗
   ========================================== */
.modal-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100dvh;
    background: rgba(17,17,17,0.95); 
    display: none; 
    justify-content: center; 
    align-items: center;
    z-index: var(--layer-modal);
    backdrop-filter: blur(8px);
}

.modal-body { 
    max-width: 90vw; 
    max-height: 90vh; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    padding: 20px; 
}

.modal-body img { 
    width: 100%; 
    border-radius: 4px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.8); 
}

.modal-close { 
    position: absolute; 
    top: 20px; 
    right: 25px; 
    color: #D4AF37; 
    font-size: 32px; 
    cursor: pointer; 
    font-weight: 300; 
}

/* ==========================================
   6. 👤 顶栏用户导航下拉菜单样式
   ========================================== */
.user-nav-dropdown {
    position: relative;
    display: inline-block;
}

.user-nav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdcdc;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #1c1c1c;
    transition: color 200ms var(--motion-standard), background-color 200ms var(--motion-standard), border-color 200ms var(--motion-standard), box-shadow 200ms var(--motion-standard), transform 200ms var(--motion-standard);
}

.user-nav-btn:hover {
    background: #1c1c1c;
    color: #D4AF37;
    border-color: #1c1c1c;
}

.user-nav-btn .user-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    width: 200px;
    z-index: var(--layer-dropdown);
    padding: 6px 0;
}

.user-dropdown-menu.show {
    display: block !important;
}

.user-dropdown-header {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.user-dropdown-header .name {
    font-size: 13px;
    font-weight: 700;
    color: #1c1c1c;
}

.user-dropdown-header .points {
    font-size: 11px;
    color: #666;
    margin-top: 4px;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    color: #1c1c1c;
    text-decoration: none;
    transition: background-color 200ms var(--motion-standard);
}

.user-dropdown-item:hover {
    background: #f5f5f5;
    color: #000;
}

.user-dropdown-item.danger {
    color: #1c1c1c;
    font-weight: 600;
}

.user-dropdown-item.danger:hover {
    background: #1c1c1c;
    color: #fff;
}

.user-dropdown-divider {
    border-top: 1px solid #f0f0f0;
    margin: 4px 0;
}

/* ==========================================
   7. ✨ 头像徽章与高亮
   ========================================== */
.user-avatar-badge {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #1c1c1c; /* 黑底 */
    color: #D4AF37;     /* 金字 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: bold;
}

.user-avatar-badge.vip-badge {
    background: linear-gradient(135deg, #E6C27A 0%, #D4AF37 100%);
    color: #1c1c1c;
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.4);
}

.vip-mini-tag {
    font-size: 10px;
    font-weight: 800;
    background: #1c1c1c;
    color: #D4AF37;
    padding: 2px 5px;
    border-radius: 2px;
    line-height: 1;
}

.dropdown-chevron {
    transition: transform 200ms var(--motion-standard);
}

/* =========================================
   8. 最近搜索记录与热搜风云榜
   ========================================= */
.recent-searches-container {
    margin-top: 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.recent-searches-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    gap: 8px;
    font-size: 16px;
    color: #1c1c1c;
    font-weight: 700;
    user-select: none;
}

.recent-searches-label .search-history-tag {
    flex: 0 0 auto;
}

.search-history-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-history-tag {
    display: inline-block;
    font-size: 14px;
    color: #1c1c1c;
    background-color: #fff;
    border: 1px solid #dcdcdc;
    padding: 4px 16px;
    border-radius: 20px;
    text-decoration: none !important;
    transition: color 300ms var(--motion-standard), background-color 300ms var(--motion-standard), border-color 300ms var(--motion-standard), box-shadow 300ms var(--motion-standard), transform 300ms var(--motion-standard);
}

.search-history-tag:hover {
    background-color: #1c1c1c; /* 黑底 */
    color: #D4AF37;           /* 金字 */
    border-color: #1c1c1c;
}

.rankings-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.rankings-header {
    text-align: left;
    margin-bottom: 35px;
}

.rankings-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: #1c1c1c;
    margin-bottom: 8px;
}

.rankings-board {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid #eaeaea;
    overflow: hidden;
}

.rankings-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.rankings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    transition: background-color 200ms var(--motion-standard);
}

.rankings-item:nth-child(even) {
    border-right: none;
}

.rankings-item:hover {
    background-color: #fafafa;
}

.rank-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    margin-right: 16px;
    background-color: #f5f5f5;
    color: #666;
}

.rank-1 { background-color: #D4AF37; color: #1c1c1c; }
.rank-2 { background-color: #1c1c1c; color: #D4AF37; }
.rank-3 { background-color: #4A286E; color: #F2D27A; }

.rankings-keyword {
    font-size: 16px;
    font-weight: 600;
    color: #1c1c1c;
    text-decoration: none;
    transition: color 200ms var(--motion-standard);
}

.rankings-keyword:hover {
    color: var(--purple-700);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rankings-item-right {
    font-size: 13px;
    color: var(--ink-muted);
}

/* =========================================
   🚀 被遗漏的代码补全区
   ========================================= */

.search-count-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    opacity: 0.7;
}

.rankings-empty {
    padding: 40px;
    text-align: left;
    color: var(--ink-muted);
    font-size: 15px;
    grid-column: span 2;
}

.rankings-footer {
    margin-top: 35px;
    text-align: left;
}

.btn-back {
    display: inline-block;
    padding: 10px 24px;
    background-color: #1c1c1c; /* 返回大按钮：黑底金字 */
    color: #D4AF37;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 300ms var(--motion-standard), background-color 300ms var(--motion-standard), box-shadow 300ms var(--motion-standard), transform 300ms var(--motion-standard);
}

.btn-back:hover {
    background-color: #D4AF37; /* 悬浮：金底黑字 */
    color: #1c1c1c;
    transform: translateY(-1px);
}

.site-footer {
    width: 100%;
    padding: 20px 16px 30px;
    margin-top: 28px;
    text-align: left;
    display: flex;
    justify-content: flex-start;
}

.site-footer-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 14px;
}

.site-footer-navigation {
    display: flex;
    align-items: stretch;
    gap: 8px;
    max-width: 100%;
}

.site-footer-home {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid #d8cce3;
    border-radius: 8px;
    background: #fff;
    color: #4a286e;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 200ms var(--motion-standard), border-color 200ms var(--motion-standard);
}

.site-footer-home svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.site-footer-home:hover {
    color: #4a286e;
    border-color: #987aaf;
    background: #f5f0fa;
}

.site-footer-home:focus-visible {
    outline: 2px solid #6f42a1;
    outline-offset: 3px;
}

@media (max-width: 480px) {
    .site-footer-navigation {
        gap: 6px;
    }

    .site-footer-navigation > .site-footer-home {
        flex: 0 0 auto;
        gap: 6px;
        padding: 10px 8px;
        font-size: 13px;
    }
}

.site-footer-link {
    color: #6f5684;
    font-size: 13px;
    text-decoration: none;
}

.site-footer-link:hover {
    color: #4A286E;
    text-decoration: underline;
}

.lang-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: #1c1c1c;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 200ms var(--motion-standard);
}

.lang-item img {
    border-radius: 2px;
    box-shadow: 0 0 2px rgba(0,0,0,0.2);
}

.lang-item:hover {
    background-color: #f5f5f5;
}

@media (max-width: 768px) {
    .rankings-list {
        grid-template-columns: 1fr;
    }
    .rankings-item {
        border-right: none;
    }
    .rankings-empty {
        grid-column: span 1;
    }
}

/* Admin download analytics */
.download-analytics-page {
    display: grid;
    gap: 20px;
    width: min(100%, 1320px);
    margin: 0 auto;
}

.download-analytics-header,
.download-analytics-filter,
.download-analytics-section,
.download-analytics-summary {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--shadow-ambient);
}

.download-analytics-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
}

.download-analytics-header h1,
.download-analytics-section-heading h2 {
    margin: 0;
}

.download-analytics-header p,
.download-analytics-section-heading p {
    max-width: 72ch;
    margin: 7px 0 0;
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.55;
}

.download-analytics-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.download-analytics-header-actions .btn {
    min-height: 40px;
    white-space: nowrap;
}

.download-analytics-header-actions .is-disabled {
    opacity: .48;
    cursor: not-allowed;
    pointer-events: none;
}

.download-analytics-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
}

.download-analytics-filter label,
.download-analytics-section-heading.with-filter label {
    color: var(--purple-800);
    font-size: 12px;
    font-weight: 750;
}

.download-analytics-filter .input-field {
    width: auto;
    min-width: 160px;
}

.download-analytics-filter > span {
    margin-left: auto;
    color: var(--ink-muted);
    font-size: 11px;
}

.download-analytics-summary,
.download-analytics-section {
    padding: 20px;
}

.download-analytics-section-heading {
    margin-bottom: 16px;
}

.download-analytics-section-heading h2 {
    color: var(--purple-900);
    font-size: 19px;
}

.download-analytics-type-grid,
.download-analytics-ranking-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.download-analytics-type-card,
.download-analytics-ranking-panel {
    min-width: 0;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--surface-soft);
}

.download-analytics-type-card {
    display: grid;
    grid-template-columns: minmax(160px, .72fr) minmax(0, 1.28fr);
    overflow: hidden;
}

.download-analytics-type-card-head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 156px;
    padding: 18px;
    color: #f8f4fb;
    background: var(--purple-800);
}

.download-analytics-type-card.is-pan .download-analytics-type-card-head {
    color: var(--purple-900);
    background: var(--gold-300);
}

.download-analytics-type-card-head span {
    font-size: 12px;
    font-weight: 780;
}

.download-analytics-type-card-head strong {
    margin-top: 5px;
    font-size: clamp(30px, 4vw, 44px);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
    line-height: 1;
}

.download-analytics-type-card-head small {
    margin-top: 8px;
    opacity: .78;
}

.download-analytics-type-card dl {
    display: grid;
    align-content: center;
    gap: 14px;
    margin: 0;
    padding: 18px;
}

.download-analytics-type-card dl div,
.download-analytics-combined div,
.download-analytics-online-summary div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.download-analytics-type-card dt,
.download-analytics-combined dt,
.download-analytics-online-summary dt {
    color: var(--ink-muted);
    font-size: 12px;
}

.download-analytics-type-card dd,
.download-analytics-combined dd,
.download-analytics-online-summary dd {
    margin: 0;
    color: var(--purple-900);
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.download-analytics-combined {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin: 14px 0 0;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--hairline);
}

.download-analytics-combined div {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    min-height: 82px;
    padding: 13px;
    background: #fff;
}

.download-analytics-combined .is-warning dd,
.download-analytics-refunded {
    color: #a33e54;
}

.download-analytics-ranking-panel {
    padding: 14px;
}

.download-analytics-ranking-panel.is-wide {
    margin-top: 14px;
}

.download-analytics-ranking-panel h3 {
    margin: 0 0 10px;
    color: var(--purple-800);
    font-size: 14px;
}

.download-analytics-ranking-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.download-analytics-ranking-list.is-online {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.download-analytics-ranking-list li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .82);
}

.download-analytics-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: var(--purple-800);
    background: var(--purple-100);
    font-size: 12px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.download-analytics-ranking-body {
    min-width: 0;
}

.download-analytics-ranking-body > a,
.download-analytics-log-primary > a {
    color: var(--ink);
    font-size: 13px;
    font-weight: 720;
    line-height: 1.4;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.download-analytics-ranking-body > a:hover,
.download-analytics-log-primary > a:hover,
.download-analytics-log-meta > a:hover {
    color: var(--purple-700);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.download-analytics-ranking-id {
    margin-left: 6px;
    color: var(--ink-muted);
    font-size: 10px;
}

.download-analytics-ranking-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    margin-top: 6px;
    color: var(--ink-muted);
    font-size: 11px;
}

.download-analytics-online-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.download-analytics-online-summary div {
    min-height: 72px;
    padding: 13px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--surface-soft);
}

.download-analytics-section-heading.with-filter {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.download-analytics-section-heading.with-filter form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.download-analytics-section-heading.with-filter select {
    min-width: 156px;
}

.download-analytics-log-list {
    display: grid;
    gap: 8px;
}

.download-analytics-log-item {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: #fff;
}

.download-analytics-log-item.is-refunded {
    border-color: rgba(163, 62, 84, .24);
    background: #fff8fa;
}

.download-analytics-log-primary {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

.download-analytics-log-primary > span {
    flex: 0 0 auto;
    color: var(--ink-muted);
    font-size: 10px;
}

.download-analytics-log-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 11px;
    color: var(--ink-muted);
    font-size: 11px;
}

.download-analytics-log-meta > a {
    color: var(--purple-700);
    font-weight: 700;
    text-decoration: none;
}

.download-analytics-log-meta code {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.download-analytics-log-meta time {
    margin-left: auto;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.download-analytics-type-badge {
    padding: 3px 7px;
    border-radius: 999px;
    color: var(--purple-800);
    background: var(--purple-100);
    font-weight: 750;
}

.download-analytics-type-badge.is-pan {
    color: #6e5310;
    background: #fff5cf;
}

.download-analytics-empty {
    color: var(--ink-muted);
    font-size: 12px;
}

.download-analytics-empty.is-block {
    padding: 28px 16px;
    border: 1px dashed var(--hairline);
    border-radius: 12px;
    text-align: left;
}

@media (max-width: 980px) {
    .download-analytics-type-grid,
    .download-analytics-ranking-grid {
        grid-template-columns: 1fr;
    }

    .download-analytics-combined {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .download-analytics-page {
        gap: 12px;
    }

    .download-analytics-header,
    .download-analytics-summary,
    .download-analytics-section {
        padding: 15px;
    }

    .download-analytics-header,
    .download-analytics-section-heading.with-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .download-analytics-header-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .download-analytics-header-actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding-inline: 10px;
    }

    .download-analytics-header-actions .download-analytics-refresh {
        grid-column: 1 / -1;
    }

    .download-analytics-filter {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 12px;
    }

    .download-analytics-filter label,
    .download-analytics-filter > span {
        grid-column: 1 / -1;
    }

    .download-analytics-filter .input-field {
        width: 100%;
        min-width: 0;
        min-height: 44px;
    }

    .download-analytics-filter .btn {
        min-height: 44px;
    }

    .download-analytics-filter > span {
        margin-left: 0;
        line-height: 1.45;
    }

    .download-analytics-type-card {
        grid-template-columns: 1fr;
    }

    .download-analytics-type-card-head {
        min-height: 112px;
    }

    .download-analytics-type-card dl {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1px;
        padding: 0;
        background: var(--hairline);
    }

    .download-analytics-type-card dl div {
        align-items: flex-start;
        flex-direction: column;
        min-width: 0;
        padding: 11px 9px;
        background: #fff;
    }

    .download-analytics-type-card dt {
        min-height: 30px;
        font-size: 10px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .download-analytics-type-card dd {
        font-size: 16px;
    }

    .download-analytics-combined {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .download-analytics-combined div:last-child {
        grid-column: 1 / -1;
    }

    .download-analytics-ranking-list.is-online,
    .download-analytics-online-summary {
        grid-template-columns: 1fr;
    }

    .download-analytics-online-summary div {
        min-height: 58px;
    }

    .download-analytics-section-heading.with-filter form {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .download-analytics-section-heading.with-filter select {
        width: 100%;
        min-width: 0;
        min-height: 44px;
    }

    .download-analytics-log-meta time {
        margin-left: 0;
    }

    .download-analytics-log-meta code {
        flex-basis: 100%;
    }

    .download-analytics-page .c-pg-btn,
    .download-analytics-page .c-pg-num,
    .download-analytics-page .c-pg-input,
    .download-analytics-page .c-pg-go {
        min-height: 44px !important;
    }
}

/* =========================================
   9. 附加组件增强样式（配合 .btn 使用）
   ========================================= */
.keyword-link {
    margin-right: 4px;
    text-decoration: none;
    color: inherit;
}
.keyword-link:hover {
    color: var(--purple-700);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.btn-magnet {
    background: #1c1c1c;
    color: #D4AF37;
}
.btn-magnet:hover {
    background: #2c2c2c;
    color: #F2D27A;
}

.btn-pan {
    box-shadow: 0 2px 10px rgba(74, 40, 110, 0.4);
    
}

.detail-share-copy-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}

.detail-share-copy-row .input-field {
    flex: 1 1 260px;
    min-width: 0;
}

.detail-share-copy-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.detail-resource-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    font-size: 13px;
}

.pan-result-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.pan-result-actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    height: auto;
    padding: 8px 10px;
    justify-content: center;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
}

@media (max-width: 480px) {
    .detail-share-copy-button {
        width: 100%;
    }
}

/* ==========================================
   VIP 专属按钮样式 (紫金主题配套)
   ========================================== */
.btn-vip {
    background: linear-gradient(135deg, #E6C27A 0%, #D4AF37 100%) !important;
    color: #1c1c1c !important;
    border: none !important;
    font-weight: 700 !important;
    transition: color 300ms var(--motion-standard), background-color 300ms var(--motion-standard), box-shadow 300ms var(--motion-standard), opacity 300ms var(--motion-standard), transform 300ms var(--motion-standard);
}

.btn-vip:hover {
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.35);
}

/* 兼容带图标的弹性布局 */
.btn-vip.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Resource detail: media previews precede the separate download methods. */
.resource-primary-actions,
.resource-gallery-actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}

.resource-gallery-actions {
    margin: 0 0 20px;
}

.resource-primary-actions {
    flex-wrap: nowrap;
    max-width: 220px;
}

.resource-primary-actions > .btn,
.resource-primary-actions > .resource-gallery-action {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-gallery-actions .resource-gallery-action {
    min-width: 150px;
    text-align: center;
    text-decoration: none;
}

/* Keep direct and backup download choices in the same detail-page action row. */
.site-body .resource-detail-page .resource-download-actions.frontend-actions {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    max-width: none;
}

.resource-detail-page .resource-download-actions > .download-alternatives:not([hidden]) {
    display: contents;
}

.site-body .resource-detail-page .resource-download-actions .btn,
.site-body .resource-detail-page .resource-pan-action {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 44px;
    height: auto;
    margin-top: 0 !important;
    padding: 8px 6px;
    font-size: 14px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
}

.site-body .resource-detail-page .resource-pan-action {
    width: 100%;
}

@media (max-width: 480px) {
    .site-body .resource-detail-page .resource-download-actions .btn,
    .site-body .resource-detail-page .resource-pan-action {
        font-size: 12px;
    }

    /* 针对手机端表单按钮让其 100% 宽度 */
    form[action*="claim_reward"] .btn {
        width: 100%;
        justify-content: center;
    }

    .resource-primary-actions {
        width: 100%;
        max-width: none;
        gap: 8px;
    }

    .resource-primary-actions > .btn,
    .resource-primary-actions > .resource-gallery-action {
        height: 38px;
        padding-inline: 8px;
        font-size: 12px;
    }
}
/* ==========================================
   登录与注册说明卡片
   ========================================== */
.auth-entry-card {
    box-sizing: border-box;
}

.search-container.auth-login-card {
    max-width: 440px;
    margin: 48px auto;
    padding: 28px;
}

.auth-login-heading {
    margin-bottom: 24px;
}

.auth-login-heading h1 {
    margin: 0;
    font-size: 24px;
    line-height: 1.35;
}

.auth-login-heading p {
    margin: 8px 0 0;
    color: #62516e;
    font-size: 14px;
    line-height: 1.65;
}

.auth-login-alternatives {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid #e6ddec;
}

.auth-login-alternatives a {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 4px 8px;
    border-radius: 6px;
    color: #543064;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.auth-login-alternatives a:hover {
    background: #f5eff9;
}

.auth-login-alternatives a:focus-visible {
    outline: 2px solid #795296;
    outline-offset: 2px;
}

.auth-primary-submit {
    width: 100%;
    min-height: 44px;
    font-size: 15px;
}

.auth-login-card #email-code-submit { min-height: 44px; }

.auth-code-card .auth-login-heading { text-align: left; }
.auth-code-card .auth-login-heading p { overflow-wrap: anywhere; }
.auth-code-input {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    letter-spacing: .3em;
    font-size: 24px;
}
.auth-code-card .auth-code-submit { margin-top: 16px; min-height: 44px; }
.auth-code-help { margin-top: 8px; color: #62516e; font-size: 13px; line-height: 1.65; }
.auth-code-help summary { padding: 8px 0; cursor: pointer; text-align: left; }
.auth-code-help summary:focus-visible { outline: 2px solid #795296; outline-offset: 2px; }
.auth-code-help p { margin: 6px 0 0; overflow-wrap: anywhere; }
.auth-code-delivery-notice {
    margin: 0 0 20px;
    padding: 14px;
    border: 1px solid var(--theme-border, #e6ddec);
    border-radius: 8px;
    color: var(--ink-strong, #3d3045);
    background: var(--theme-soft, #f5eff9);
    text-align: left;
    overflow-wrap: anywhere;
}
.auth-code-delivery-notice[data-state="bounced"] { color: #8d202b; background: #fff5f5; border-color: #eac5c9; }
.auth-code-delivery-notice h2 { margin: 0 0 6px; color: inherit; font-size: 16px; line-height: 1.5; }
.auth-code-delivery-notice p { margin: 0; color: inherit; font-size: 14px; line-height: 1.65; }
.auth-code-delivery-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.auth-code-delivery-actions .btn { flex: 1 1 145px; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1.5; white-space: normal; text-align: center; }
.auth-code-delivery-notice[hidden], .auth-code-delivery-actions[hidden] { display: none; }

.auth-return-notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 14px 0 18px;
    padding: 11px 13px;
    border: 1px solid #b9dcc8;
    border-radius: 10px;
    color: #17643d;
    background: #edf9f2;
    font-size: 13px;
    line-height: 1.55;
    text-align: left;
}

.auth-return-notice > span:first-child {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1.25;
}

.auth-passwordless-tip {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    margin: 18px 0 22px;
    padding: 14px 15px;
    border: 1px solid #dfd1e9;
    border-radius: 12px;
    color: #44245f;
    background: linear-gradient(135deg, #faf5fd 0%, #f2e8f8 100%);
    box-shadow: 0 4px 14px rgba(74, 40, 110, .06);
}

.auth-passwordless-icon,
.auth-referral-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(74, 40, 110, .09);
    font-size: 16px;
}

.auth-passwordless-tip p {
    margin: 1px 0 0;
    font-size: 13px;
    line-height: 1.7;
    text-align: left;
}

.auth-referral-card {
    margin: 3px 0 18px;
    padding: 14px;
    border: 1px solid #c6dcf2;
    border-radius: 12px;
    background: linear-gradient(145deg, #eff8ff 0%, #e6f3ff 100%);
    box-shadow: 0 4px 14px rgba(9, 105, 218, .06);
}

.auth-referral-header {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    color: #30506d;
}

.auth-referral-header > div {
    min-width: 0;
}

.auth-referral-header span:not(.auth-referral-icon),
.auth-referral-header strong {
    display: block;
}

.auth-referral-header span:not(.auth-referral-icon) {
    margin-bottom: 2px;
    font-size: 11px;
    line-height: 1.4;
}

.auth-referral-header strong {
    overflow-wrap: anywhere;
    color: #0969da;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    letter-spacing: .04em;
}

.auth-reward-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.auth-reward-item {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid rgba(9, 105, 218, .12);
    border-radius: 9px;
    background: rgba(255, 255, 255, .72);
}

.auth-reward-item strong,
.auth-reward-item span {
    display: block;
}

.auth-reward-item strong {
    flex: 0 0 auto;
    color: #19704f;
    font-size: 17px;
    line-height: 1.25;
    white-space: nowrap;
}

.auth-reward-item.is-payment strong {
    color: #5a2a7b;
}

.auth-reward-item strong small {
    font-size: 10px;
    font-weight: 700;
}

.auth-reward-item span {
    min-width: 0;
    margin-top: 4px;
    color: #53677a;
    font-size: 10px;
    line-height: 1.45;
}

.auth-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 480px) {
    .auth-entry-card {
        width: calc(100% - 20px);
        margin-top: 20px !important;
        padding: 21px 17px !important;
    }

    .auth-passwordless-tip {
        grid-template-columns: 30px minmax(0, 1fr);
        padding: 12px;
    }

    .auth-passwordless-icon,
    .auth-referral-icon {
        width: 30px;
        height: 30px;
    }

    .auth-reward-grid {
        grid-template-columns: 1fr;
    }

    .auth-reward-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .auth-reward-item span {
        margin-top: 0;
        text-align: left;
    }
}

/* Personal points ledger */
.points-history-page {
    width: min(100% - 32px, 980px);
    margin: 30px auto;
}

.points-history-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px;
    border: 1px solid #dbcce5;
    border-radius: 16px;
    background: linear-gradient(135deg, #321742 0%, #5b3287 70%, #7a4a92 100%);
    color: #fff;
    box-shadow: 0 12px 30px rgba(50, 23, 66, .13);
}

.points-history-eyebrow {
    color: #f0cf72;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
}

.points-history-hero h1 {
    margin: 7px 0 5px;
    color: #fff;
    font-size: clamp(22px, 4vw, 30px);
}

.points-history-hero p {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    line-height: 1.6;
}

.points-history-back {
    flex: 0 0 auto;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 9px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.points-history-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.points-history-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #eadfeb;
    border-radius: 12px;
    background: #fff;
}

.points-history-stat > span {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    background: #f3eafb;
    color: #5b3287;
    font-size: 18px;
    font-weight: 900;
}

.points-history-stat.earned > span { background: #eaf8ef; color: #18763b; }
.points-history-stat.spent > span { background: #fff0f0; color: #b42318; }
.points-history-stat.total > span { background: #fff8dc; color: #946c00; }
.points-history-stat strong,
.points-history-stat small { display: block; }
.points-history-stat strong { color: #321742; font-size: 19px; }
.points-history-stat small { margin-top: 2px; color: #76687e; font-size: 11px; }

.points-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.points-history-card {
    overflow: hidden;
    border: 1px solid #e6dce9;
    border-left: 4px solid #5b3287;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(50, 23, 66, .05);
}

.points-history-card.is-credit { border-left-color: #1f8b4c; }
.points-history-card.is-debit { border-left-color: #c33d3d; }
.points-history-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 18px;
    border-bottom: 1px solid #f0eaf2;
}

.points-history-reason {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.points-history-direction {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: #f3eafb;
    color: #5b3287;
    font-weight: 900;
}

.is-credit .points-history-direction { background: #eaf8ef; color: #18763b; }
.is-debit .points-history-direction { background: #fff0f0; color: #b42318; }
.points-history-reason strong,
.points-history-reason time { display: block; }
.points-history-reason strong { color: #321742; font-size: 14px; text-transform: capitalize; }
.points-history-reason time { margin-top: 3px; color: #88798e; font-size: 11px; }
.points-history-delta { flex: 0 0 auto; color: #5b3287; font-size: 20px; white-space: nowrap; }
.is-credit .points-history-delta { color: #18763b; }
.is-debit .points-history-delta { color: #b42318; }

.points-history-card-body {
    display: grid;
    grid-template-columns: minmax(190px, .7fr) minmax(0, 1.3fr);
    gap: 14px;
    padding: 13px 18px 15px;
}

.points-history-balance-change > span,
.points-history-source > span {
    display: block;
    margin-bottom: 5px;
    color: #88798e;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.points-history-balance-change strong { color: #4a286e; font-size: 13px; }
.points-history-balance-change b { margin: 0 5px; color: #ad9bb4; }
.points-history-source > div { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.points-history-source b,
.points-history-source code,
.points-history-source em {
    max-width: 100%;
    padding: 3px 7px;
    overflow-wrap: anywhere;
    border-radius: 6px;
    background: #f6f1f8;
    color: #5b3287;
    font-size: 11px;
    font-style: normal;
}

.points-history-source code { background: #f5f5f5; color: #555; }
.points-history-source em { background: #fff8dc; color: #795c0a; }
.points-history-empty {
    display: grid;
    min-height: 180px;
    place-items: center;
    align-content: center;
    gap: 10px;
    border: 1px dashed #d8c8df;
    border-radius: 12px;
    background: #fbf9fc;
    color: #76687e;
}

.points-history-empty span { font-size: 30px; }
.points-history-pagination { margin-top: 18px; }

@media (max-width: 760px) {
    .points-history-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .points-history-card-body { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .points-history-page { width: min(100% - 20px, 980px); margin-top: 18px; }
    .points-history-hero { align-items: flex-start; flex-direction: column; padding: 20px; }
    .points-history-back { width: 100%; text-align: center; }
    .points-history-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
    .points-history-stat { gap: 8px; padding: 12px 10px; }
    .points-history-stat > span { flex-basis: 32px; width: 32px; height: 32px; }
    .points-history-stat strong { font-size: 16px; }
    .points-history-card > header { align-items: flex-start; padding: 13px; }
    .points-history-card-body { padding: 12px 13px 14px; }
    .points-history-delta { font-size: 17px; }
}

/* ==========================================
   24. High-end visual system · Soft Structuralism
   Shared typography, spacing, surfaces, depth and motion.
   ========================================== */
h1,
h2,
h3,
.section-title,
.site-brand,
.admin-sidebar-title {
    color: var(--ink-strong);
    font-family: var(--font-display);
    font-weight: 750;
    letter-spacing: -.025em;
    text-wrap: balance;
}

::selection {
    color: #fff;
    background: var(--purple-700);
}

:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 3px;
}

/* Floating site chrome */
.header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .94);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 0 0 1px rgba(255, 255, 255, .42),
        var(--shadow-ambient);
}

.site-header {
    position: relative;
    z-index: var(--layer-header);
    min-height: 62px;
}

.site-brand {
    margin: 0;
    font-size: 19px;
    line-height: 1;
}

.site-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--purple-900);
    text-decoration: none;
}

.site-brand-link::before {
    width: 9px;
    height: 9px;
    border: 3px solid var(--gold-300);
    border-radius: 50%;
    background: var(--purple-700);
    box-shadow: 0 0 0 3px rgba(85, 48, 111, .08);
    content: "";
}

.header-right-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lang-dropdown-container,
.user-nav-dropdown {
    position: relative;
}

.language-trigger {
    gap: 7px;
    padding-inline: 12px;
}

.language-menu,
.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: var(--layer-dropdown);
    width: 190px;
    overflow: hidden;
    padding: 6px;
    border: 1px solid var(--hairline);
    border-radius: 15px;
    background: var(--surface-core);
    box-shadow: var(--shadow-floating);
}

.language-menu {
    display: none;
}

.language-menu.is-open {
    display: block;
}

.user-dropdown-menu.is-open {
    display: block;
}

.language-menu[hidden],
.user-dropdown-menu[hidden] {
    display: none !important;
}

.language-menu.is-open,
.user-dropdown-menu.is-open {
    transform-origin: top right;
    animation: dropdown-arrive 280ms var(--motion-emphasis) both;
}

@keyframes dropdown-arrive {
    from {
        opacity: 0;
        transform: translate3d(0, -7px, 0) scale(.98);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.lang-item,
.user-dropdown-item {
    min-height: 38px;
    padding: 9px 11px;
    border-radius: 9px;
    color: var(--ink);
    transition:
        color 220ms var(--motion-standard),
        background-color 220ms var(--motion-standard),
        transform 220ms var(--motion-standard);
}

.lang-item:hover,
.user-dropdown-item:hover {
    color: var(--purple-800);
    background: var(--purple-100);
    transform: translateX(2px);
}

.user-dropdown-menu {
    width: 220px;
    padding: 7px;
}

.user-dropdown-header {
    margin: 0 2px 5px;
    padding: 11px 10px 13px;
    border-bottom-color: var(--hairline);
}

.user-dropdown-divider {
    border-top-color: var(--hairline);
}

.user-nav-btn {
    min-height: 38px;
    padding: 5px 10px 5px 6px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--ink-strong);
    background: var(--surface-core);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    transition:
        color 240ms var(--motion-standard),
        border-color 240ms var(--motion-standard),
        background-color 240ms var(--motion-standard),
        box-shadow 240ms var(--motion-standard),
        transform 240ms var(--motion-standard);
}

.user-nav-btn:hover {
    color: var(--purple-800);
    border-color: rgba(85, 48, 111, .3);
    background: var(--surface-soft);
    box-shadow: 0 5px 16px rgba(45, 24, 59, .09);
    transform: translateY(-1px);
}

.user-avatar-badge {
    background: var(--purple-900);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.site-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 12px;
    padding: 10px 14px;
}

/* Keep multilingual purchase labels together, with a stable emoji baseline. */
.site-actions .header-purchase-action {
    flex: 0 0 auto;
    min-height: 38px;
    height: auto;
    gap: 7px;
    padding: 8px 13px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    white-space: nowrap;
}

.header-purchase-action .header-action-icon {
    display: inline-grid;
    flex: 0 0 18px;
    place-items: center;
    width: 18px;
    height: 18px;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 16px;
    line-height: 1;
}

.header-purchase-action .header-action-label {
    display: block;
    white-space: nowrap;
}

.search-vip-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 12px;
    color: var(--purple-800);
}

.search-vip-hint p {
    margin: 0;
    line-height: 1.55;
}

.search-vip-hint .search-vip-hint-action {
    flex: 0 0 auto;
    min-height: 38px;
    white-space: nowrap;
}

/* Controls */
.btn {
    min-height: 40px;
    padding: 0 17px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    color: var(--gold-300);
    background: linear-gradient(145deg, var(--purple-600), var(--purple-900));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 5px 14px rgba(45, 24, 59, .17);
    font-weight: 700;
    letter-spacing: .005em;
    transition:
        color 260ms var(--motion-standard),
        background-color 260ms var(--motion-standard),
        border-color 260ms var(--motion-standard),
        box-shadow 260ms var(--motion-standard),
        opacity 260ms var(--motion-standard),
        transform 260ms var(--motion-emphasis);
}

.btn:hover {
    color: #ffeaa7;
    background: linear-gradient(145deg, #65407e, #321a42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 9px 22px rgba(45, 24, 59, .22);
    transform: translateY(-2px);
}

.btn:active {
    box-shadow: inset 0 2px 5px rgba(20, 8, 28, .24);
    transform: translateY(0) scale(.98);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), 0 8px 20px rgba(45, 24, 59, .18);
}

.btn-sm {
    min-height: 34px;
    height: 34px;
    padding-inline: 13px;
    font-size: 12px;
}

.btn-outline {
    color: var(--ink-strong) !important;
    border: 1px solid var(--hairline-strong) !important;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 3px 9px rgba(45, 24, 59, .045) !important;
}

.btn-outline:hover {
    color: var(--purple-800) !important;
    border-color: rgba(85, 48, 111, .32) !important;
    background: var(--purple-100) !important;
    box-shadow: 0 7px 17px rgba(45, 24, 59, .1) !important;
}

.btn-disabled,
.btn:disabled {
    color: #958d99 !important;
    border-color: rgba(74, 45, 85, .08) !important;
    background: #eae7eb !important;
    box-shadow: none !important;
    transform: none !important;
}

.header-vip-button,
.btn-vip {
    color: var(--purple-900) !important;
    border-color: rgba(149, 112, 22, .16) !important;
    background: linear-gradient(145deg, #f5dda0, #d1aa49) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 6px 15px rgba(145, 112, 22, .18) !important;
}

.header-vip-button:hover,
.btn-vip:hover {
    color: #211329 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 9px 20px rgba(145, 112, 22, .24) !important;
}

.btn-magnet {
    color: var(--gold-300);
    background: linear-gradient(145deg, #31283a, #19141f);
}

.input-field,
.admin-domain-switch select {
    min-height: 42px;
    padding-inline: 14px;
    border: 1px solid var(--hairline-strong);
    border-radius: 11px;
    color: var(--ink-strong);
    background: rgba(255, 255, 255, .9);
    box-shadow: inset 0 1px 2px rgba(45, 24, 59, .035);
    transition:
        border-color 240ms var(--motion-standard),
        background-color 240ms var(--motion-standard),
        box-shadow 240ms var(--motion-standard);
}

.input-field:focus,
.admin-domain-switch select:focus {
    border-color: rgba(85, 48, 111, .55);
    background: #fff;
    box-shadow: var(--focus-ring), inset 0 1px 2px rgba(45, 24, 59, .025);
    outline: none;
}

/* Search and tab systems */
.search-container {
    margin: 18px 0 26px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: var(--surface-core);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        var(--shadow-ambient);
}

.catalog-search-container {
    padding: 12px;
}

.catalog-inline-search {
    display: flex;
    align-items: center;
    flex: 0 1 220px;
    width: clamp(160px, 20vw, 220px);
    min-width: 150px;
    max-width: 220px;
    padding: 2px;
}

.catalog-hot-search-group {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    min-width: 0;
    gap: 3px;
    margin-inline-end: 7px;
}

.catalog-inline-search-form {
    width: 100%;
    min-width: 0;
    gap: 4px;
}

.catalog-inline-search-input {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding-inline: 10px;
    border-color: rgba(85, 48, 111, .2);
    border-radius: 9px;
    background: rgba(255, 255, 255, .88);
    font-size: 12px;
}

.catalog-inline-search-input:focus {
    border-color: rgba(85, 48, 111, .5);
    box-shadow: var(--focus-ring);
}

.catalog-inline-search-button {
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 9px;
    font-size: 13px;
}

.catalog-page-tabs-scroll {
    padding: 2px 1px 8px;
    border-bottom: 0;
    scrollbar-color: rgba(85, 48, 111, .3) transparent;
}

.catalog-page-tabs,
.home-resource-tabs-row {
    gap: 3px;
    padding: 4px;
    margin-bottom: 0;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--surface-shell);
    box-shadow: inset 0 1px 2px rgba(45, 24, 59, .055), 0 5px 14px rgba(45, 24, 59, .055);
}

.catalog-page-tab,
.home-resource-tab,
.home-resource-link {
    min-height: 38px;
    padding-inline: 14px;
    border-radius: 10px;
    color: #62576a;
    font-size: 13px;
    font-weight: 720;
    transition:
        color 240ms var(--motion-standard),
        background-color 240ms var(--motion-standard),
        box-shadow 240ms var(--motion-standard),
        transform 240ms var(--motion-standard);
}

.catalog-page-tab:hover,
.home-resource-tab:hover,
.home-resource-link:hover {
    color: var(--purple-800);
    background: rgba(255, 255, 255, .72);
}

.catalog-page-tab.is-active,
.home-resource-tab.is-active {
    color: var(--gold-300);
    background: linear-gradient(145deg, var(--purple-700), var(--purple-900));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 12px rgba(45, 24, 59, .18);
}

.catalog-page-tab.is-active::after,
.home-resource-tab.is-active::after {
    right: 22px;
    bottom: 5px;
    left: 22px;
    height: 1px;
    border-radius: 999px;
    background: var(--gold-500);
}

.home-resource-browser {
    margin-top: 26px;
}

.home-resource-header {
    margin-bottom: 20px;
    border-bottom: 0;
}

.section-title {
    margin-block: 30px 16px;
    font-size: clamp(18px, 2vw, 22px);
}

/* Catalog siblings share the same full-width, left-aligned content shell. */
.catalog-aligned-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.catalog-rankings-page .rankings-header {
    margin: 30px 0 16px;
    text-align: left;
}

.catalog-rankings-page .rankings-header h1 {
    margin: 0;
    font-size: clamp(20px, 2.2vw, 28px);
    text-wrap: balance;
}

.catalog-rankings-page .rankings-header p {
    max-width: 65ch;
    margin: 6px 0 0;
    color: var(--ink-muted);
    text-wrap: pretty;
}

.catalog-rankings-page .rankings-board,
.catalog-aligned-page .downloads-history-list {
    width: 100%;
}

/* Double-bezel media cards */
.media-grid {
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
}

.card:not(.media-card) {
    border-color: var(--hairline);
    border-radius: var(--radius-md);
    background: var(--surface-core);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow-ambient);
}

.card:not(.media-card):hover {
    border-color: var(--hairline);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow-ambient);
    transform: none;
}

.media-card {
    overflow: visible;
    min-width: 0;
    padding: 4px;
    border: 1px solid rgba(74, 45, 85, .14);
    border-radius: 20px;
    background: var(--surface-shell);
    box-shadow: var(--shadow-ambient);
    transition:
        border-color 320ms var(--motion-standard),
        box-shadow 320ms var(--motion-standard),
        transform 420ms var(--motion-emphasis);
}

.media-card-core {
    display: flex;
    overflow: hidden;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, .84);
    border-radius: 15px;
    background: var(--surface-core);
    box-shadow: inset 0 0 0 1px rgba(45, 24, 59, .035);
}

.media-card:hover {
    border-color: rgba(85, 48, 111, .3);
    box-shadow: var(--shadow-raised);
    transform: translateY(-5px);
}

.media-card .card-img-wrapper {
    height: 220px;
    background: #18131d;
}

.media-card .card-img-wrapper img {
    transition: transform 600ms var(--motion-emphasis);
}

.media-card .card-img-wrapper:hover img {
    object-fit: cover !important;
    transform: scale(1.025);
}

.media-card .card-info {
    padding: 14px 12px 13px;
}

.media-card .card-title {
    height: 41px;
    margin-bottom: 9px;
    color: var(--ink-strong);
    font-size: 13px;
    font-weight: 680;
    line-height: 1.55;
}

.media-card .card-meta {
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.media-card .card-action-group {
    gap: 7px !important;
    margin-top: 12px !important;
}

.media-card .btn {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 10px rgba(45, 24, 59, .13);
}

.badge-shot {
    top: 9px;
    right: 9px;
    padding: 5px 9px;
    border: 1px solid rgba(242, 217, 140, .34);
    border-radius: 999px;
    color: var(--gold-300);
    background: rgba(35, 24, 42, .88);
    box-shadow: 0 4px 14px rgba(20, 10, 26, .2);
}

.lock-overlay {
    background: rgba(28, 20, 34, .88);
}

.home-resource-empty,
.rankings-board,
.invitees-stat,
.invitee-card,
.download-history-card,
.downloads-history-stat,
.points-history-card,
.checkout-container,
.payment-waiting-order-card {
    border-color: var(--hairline);
    box-shadow: var(--shadow-ambient);
}

.rankings-board,
.home-resource-empty {
    border-radius: var(--radius-md);
}

.rankings-item,
.search-history-tag,
.c-pg-btn,
.c-pg-num,
.c-pg-input,
.c-pg-go {
    border-color: var(--hairline) !important;
    border-radius: 999px !important;
}

.search-history-tag {
    color: var(--ink);
    background: rgba(255, 255, 255, .76);
    transition:
        color 240ms var(--motion-standard),
        border-color 240ms var(--motion-standard),
        background-color 240ms var(--motion-standard),
        box-shadow 240ms var(--motion-standard),
        transform 240ms var(--motion-standard);
}

.search-history-tag:hover {
    color: var(--purple-800);
    border-color: rgba(85, 48, 111, .3);
    background: var(--purple-100);
    box-shadow: 0 5px 14px rgba(45, 24, 59, .08);
    transform: translateY(-1px);
}

/* Premium admin shell */
.admin-body {
    padding: 0;
    background: var(--surface-canvas);
}

.admin-layout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    min-height: 100dvh;
    padding: 18px;
    background:
        radial-gradient(circle at 0 0, rgba(111, 67, 138, .09), transparent 30rem),
        var(--surface-canvas);
}

.admin-sidebar {
    position: sticky;
    top: 18px;
    display: flex;
    overflow-y: auto;
    flex: 0 0 268px;
    flex-direction: column;
    width: 268px;
    max-height: calc(100dvh - 36px);
    padding: 14px 11px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), var(--shadow-raised);
    scrollbar-width: thin;
}

.admin-sidebar-disclosure,
.admin-sidebar-content {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

.admin-sidebar-disclosure:not([open]) > .admin-sidebar-content {
    display: none;
}

.admin-sidebar-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 4px 11px;
    padding: 12px 11px 16px;
    border-bottom: 1px solid var(--hairline);
    color: var(--purple-800);
    font-size: 18px;
    cursor: pointer;
    list-style: none;
}

.admin-sidebar-title::-webkit-details-marker {
    display: none;
}

.admin-sidebar-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--purple-100);
    font-size: 16px;
    transition: transform 240ms var(--motion-standard);
}

.admin-sidebar-disclosure[open] .admin-sidebar-chevron {
    transform: rotate(180deg);
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-nav-group {
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 13px;
}

.admin-nav-group.is-active {
    border-color: rgba(85, 48, 111, .13);
    background: var(--surface-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95);
}

.admin-nav-group-title {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 4px 8px;
    color: #705f79;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .055em;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.admin-nav-group-title::-webkit-details-marker {
    display: none;
}

.admin-nav-group-title::after {
    margin-left: auto;
    color: #947ca0;
    font-size: 14px;
    content: "⌄";
    transition: transform 240ms var(--motion-standard);
}

.admin-nav-group:not([open]) .admin-nav-group-title::after {
    transform: rotate(-90deg);
}

.admin-nav-group-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0;
}

.admin-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 39px;
    padding: 8px 10px 8px 14px;
    border-radius: 10px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 550;
    line-height: 1.35;
    text-decoration: none;
    transition:
        color 240ms var(--motion-standard),
        background-color 240ms var(--motion-standard),
        box-shadow 240ms var(--motion-standard),
        transform 240ms var(--motion-standard);
}

.admin-nav-item:hover,
.admin-nav-item.active {
    color: var(--purple-800);
    background: var(--purple-100);
}

.admin-nav-item:hover {
    transform: translateX(2px);
}

.admin-nav-item.active {
    font-weight: 780;
    box-shadow: inset 3px 0 0 var(--purple-600);
}

.admin-main {
    flex: 1;
    min-width: 0;
    padding: 14px 16px 48px;
    overflow-y: auto;
}

.admin-main h1 {
    margin-top: 0;
    color: var(--purple-900) !important;
    font-size: clamp(24px, 3vw, 32px);
}

.admin-main :is(.card, .torrent-panel, .translation-card, .cloudflare-card, .reward-settings-card, .legacy-orders-panel, .proxy-admin-panel, .admin-invitees-table-card) {
    border-color: var(--hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-ambient);
}

.clipboard-feedback {
    position: fixed;
    z-index: var(--layer-toast);
    left: 50%;
    bottom: max(24px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 12px 18px;
    border: 1px solid var(--purple-100);
    border-radius: 12px;
    background: var(--purple-900);
    color: #fff;
    box-shadow: var(--shadow-ambient);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    pointer-events: none;
}

.clipboard-feedback[hidden] {
    display: none;
}

.clipboard-feedback.is-error {
    background: #6e3149;
}

.clipboard-manual-copy {
    display: block;
    width: 100%;
    min-height: 72px;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    font-size: 13px;
    overflow-wrap: anywhere;
    resize: vertical;
}

.admin-user-ip-summary {
    display: grid;
    gap: 4px;
    margin: 8px 0 0;
    font-size: 12px;
}

.admin-user-ip-summary > div {
    display: grid;
    grid-template-columns: 6.5em minmax(0, 1fr);
    gap: 8px;
}

.admin-user-ip-summary dt {
    color: var(--muted, #57606a);
}

.admin-user-ip-summary dd {
    margin: 0;
}

.admin-user-ip-summary code {
    color: var(--purple-800);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.admin-user-ip-missing {
    color: #6e7781;
}

@media (max-width: 768px) {
    .admin-users-panel {
        padding: 14px !important;
    }

    .admin-users-search {
        width: 100%;
    }

    .admin-users-search input {
        flex: 1;
        width: 0 !important;
        min-width: 0;
    }

    .admin-users-table-wrap {
        overflow: visible !important;
    }

    .admin-users-table,
    .admin-users-table tbody {
        display: block;
    }

    .admin-users-table thead {
        display: none;
    }

    .admin-users-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 12px;
        border: 1px solid var(--hairline);
        border-radius: 12px;
    }

    .admin-users-table td {
        min-width: 0;
        padding: 10px !important;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    .admin-users-table td::before {
        display: block;
        margin-bottom: 5px;
        color: #57606a;
        font-size: 11px;
        font-weight: 600;
        content: attr(data-label);
    }

    .admin-users-table .admin-user-identity {
        grid-column: 1 / -1;
        grid-row: 1;
        border-bottom: 1px solid var(--hairline);
    }

    .admin-users-table .admin-user-identity::before {
        display: none;
    }

    .admin-users-table .is-empty td {
        grid-column: 1 / -1;
    }

    .admin-users-table .is-empty td::before {
        display: none;
    }
}

.admin-domain-switch {
    margin-top: 12px;
    padding: 14px 8px;
    border-top: 1px solid var(--hairline);
}

.admin-domain-switch label,
.admin-domain-switch small {
    display: block;
}

.admin-domain-switch label {
    margin-bottom: 7px;
    color: var(--purple-800);
    font-size: 12px;
    font-weight: 750;
}

.admin-domain-switch select {
    width: 100%;
    margin-bottom: 8px;
    padding-inline: 10px;
}

.admin-domain-switch button {
    width: 100%;
    min-height: 38px;
    border: 0;
    border-radius: 999px;
    color: var(--gold-300);
    background: var(--purple-700);
    font-weight: 750;
    cursor: pointer;
    transition:
        background-color 240ms var(--motion-standard),
        box-shadow 240ms var(--motion-standard),
        transform 240ms var(--motion-standard);
}

.admin-domain-switch button:hover {
    background: var(--purple-800);
    box-shadow: 0 7px 16px rgba(45, 24, 59, .16);
    transform: translateY(-1px);
}

.admin-domain-switch small {
    margin-top: 7px;
    color: var(--ink-muted);
    font-size: 10px;
    line-height: 1.45;
}

.admin-sidebar-footer {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
}

.admin-home-link {
    color: #a33e54;
}

/* User audit: wide tables become readable two-column records on phones. */
.admin-user-audit-page {
    width: min(100%, 1500px);
    margin-inline: auto;
    padding: clamp(10px, 1.8vw, 22px);
}

.admin-user-audit-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 20px;
    padding: 20px 22px 22px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), var(--shadow-ambient);
}

.admin-user-audit-identity {
    min-width: 0;
}

.admin-user-audit-eyebrow,
.admin-user-audit-section-kicker {
    margin: 0 0 5px;
    color: var(--purple-600);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.admin-user-audit-header h1 {
    margin: 0;
    color: var(--purple-900);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.12;
    letter-spacing: -.035em;
}

.admin-user-audit-account {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 3px 7px;
    margin: 9px 0 0;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.admin-user-audit-account strong {
    color: var(--ink-strong);
}

.admin-user-audit-locale {
    margin: 4px 0 0;
    color: var(--ink-muted);
    font-size: 12px;
}

.admin-user-audit-actions {
    display: flex;
    justify-content: flex-end;
    flex: 0 1 580px;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-user-audit-actions .btn {
    white-space: nowrap;
}

.admin-user-audit-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 22px;
}

.admin-user-audit-stat {
    min-width: 0;
    padding: 14px 15px 16px;
    border: 1px solid var(--hairline);
    border-radius: 13px;
    background: rgba(255, 255, 255, .9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 7px 20px rgba(45, 24, 59, .045);
}

.admin-user-audit-stat dt {
    min-height: 2.6em;
    color: var(--ink-muted);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.3;
}

.admin-user-audit-stat dd {
    margin: 5px 0 0;
    color: var(--ink-strong);
    font-size: clamp(18px, 2vw, 23px);
    font-weight: 780;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.admin-user-audit-stat.is-primary dd {
    color: var(--purple-700);
}

.admin-user-audit-stat.is-positive dd,
.admin-user-audit-delta.is-positive {
    color: #247142;
}

.admin-user-audit-stat.is-negative dd,
.admin-user-audit-delta.is-negative {
    color: #b33b4d;
}

.admin-user-audit-section {
    overflow: hidden;
    margin-bottom: 22px;
    padding: 0;
}

.admin-user-audit-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 19px 15px;
    border-bottom: 1px solid var(--hairline);
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(251, 249, 252, .9));
}

.admin-user-audit-section-heading h2 {
    margin: 0;
    color: var(--ink-strong);
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.25;
    letter-spacing: -.018em;
}

.admin-user-audit-section-heading > span {
    flex: 0 0 auto;
    color: var(--ink-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.admin-user-audit-table-wrap {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.admin-user-audit-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--ink);
    background: var(--surface-core);
    font-size: 12px;
}

.admin-user-audit-table th {
    padding: 10px 12px;
    color: #675b6d;
    background: var(--surface-soft);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .045em;
    text-align: left;
    white-space: nowrap;
}

.admin-user-audit-table td {
    padding: 11px 12px;
    border-top: 1px solid rgba(74, 45, 85, .09);
    vertical-align: top;
}

.admin-user-audit-table tbody tr {
    transition: background-color 200ms var(--motion-standard);
}

.admin-user-audit-table tbody tr:hover {
    background: rgba(238, 231, 242, .35);
}

.admin-user-audit-table .is-time,
.admin-user-audit-table .is-balance {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.admin-user-audit-table .is-detail {
    max-width: 420px;
    overflow-wrap: anywhere;
}

.admin-user-audit-table code {
    color: var(--purple-800);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.admin-user-audit-delta {
    font-variant-numeric: tabular-nums;
}

.admin-user-audit-metadata {
    margin-top: 5px;
}

.admin-user-audit-metadata summary {
    color: var(--purple-700);
    font-weight: 700;
    cursor: pointer;
}

.admin-user-audit-metadata pre {
    overflow: auto;
    max-width: 100%;
    margin: 7px 0 0;
    padding: 9px;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    background: var(--surface-soft);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.admin-user-audit-table tr.is-empty td {
    padding: 30px 16px;
    color: var(--ink-muted);
    text-align: left;
}

.admin-user-audit-pagination {
    padding: 4px 16px 16px;
}

.admin-user-audit-visually-hidden {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 1180px) {
    .admin-user-audit-header {
        flex-direction: column;
    }

    .admin-user-audit-actions {
        justify-content: flex-start;
        flex-basis: auto;
    }

    .admin-user-audit-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .admin-user-audit-page {
        padding: 2px 0 18px;
    }

    .admin-user-audit-header {
        gap: 16px;
        margin-bottom: 12px;
        padding: 16px 14px 15px;
        border-radius: 16px;
    }

    .admin-user-audit-account {
        flex-direction: column;
        gap: 1px;
    }

    .admin-user-audit-account > span[aria-hidden="true"] {
        display: none;
    }

    .admin-user-audit-actions {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .admin-user-audit-actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        height: auto;
        padding: 8px 7px;
        font-size: 11px;
        line-height: 1.25;
        white-space: normal;
    }

    .admin-user-audit-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-bottom: 12px;
    }

    .admin-user-audit-stat {
        padding: 12px 11px 13px;
        border-radius: 11px;
    }

    .admin-user-audit-stat dt {
        min-height: 0;
        font-size: 10px;
    }

    .admin-user-audit-stat dd {
        margin-top: 7px;
        font-size: 19px;
    }

    .admin-user-audit-section {
        margin-bottom: 12px;
        border-radius: 15px !important;
    }

    .admin-user-audit-section-heading {
        align-items: center;
        padding: 14px 13px 12px;
    }

    .admin-user-audit-section-heading h2 {
        font-size: 16px;
    }

    .admin-user-audit-section-kicker {
        font-size: 9px;
    }

    .admin-user-audit-table-wrap {
        overflow: visible;
        padding: 8px;
        background: var(--surface-soft);
    }

    .admin-user-audit-table,
    .admin-user-audit-table tbody {
        display: block;
        width: 100%;
    }

    .admin-user-audit-table thead {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .admin-user-audit-table tbody tr {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        margin-bottom: 8px;
        border: 1px solid var(--hairline);
        border-radius: 12px;
        background: var(--surface-core);
        box-shadow: 0 5px 16px rgba(45, 24, 59, .045);
    }

    .admin-user-audit-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .admin-user-audit-table tbody tr:hover {
        background: var(--surface-core);
    }

    .admin-user-audit-table td {
        display: block;
        min-width: 0;
        padding: 10px;
        border-top: 0;
        border-bottom: 1px solid rgba(74, 45, 85, .08);
        overflow-wrap: anywhere;
    }

    .admin-user-audit-table td:nth-child(odd) {
        border-right: 1px solid rgba(74, 45, 85, .08);
    }

    .admin-user-audit-table td::before {
        display: block;
        margin-bottom: 3px;
        color: var(--ink-muted);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .035em;
        content: attr(data-label);
    }

    .admin-user-audit-table.is-points td.is-balance,
    .admin-user-audit-table td.is-detail {
        grid-column: 1 / -1;
        border-right: 0;
    }

    .admin-user-audit-table.is-points td.is-balance {
        order: 3;
    }

    .admin-user-audit-table.is-points td:nth-child(4) {
        order: 4;
        border-right: 1px solid rgba(74, 45, 85, .08);
    }

    .admin-user-audit-table.is-points td:nth-child(5) {
        order: 5;
        border-right: 0;
    }

    .admin-user-audit-table.is-points td.is-detail {
        order: 6;
        border-bottom: 0;
    }

    .admin-user-audit-table.is-access td.is-detail {
        border-bottom: 0;
    }

    .admin-user-audit-table tr.is-empty {
        display: block;
    }

    .admin-user-audit-table tr.is-empty td {
        padding: 24px 12px;
        border: 0;
    }

    .admin-user-audit-table tr.is-empty td::before {
        display: none;
    }

    .admin-user-audit-pagination {
        padding: 1px 8px 12px;
    }
}

/* Entry motion: only transform and opacity, observed once. */
.reveal-item {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(.992);
    will-change: transform, opacity;
    transition:
        opacity 620ms var(--motion-standard),
        transform 720ms var(--motion-emphasis);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal-item.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    will-change: auto;
}

@media (max-width: 768px) {
    .admin-layout {
        flex-direction: column;
        gap: 12px;
        padding:
            max(10px, env(safe-area-inset-top))
            max(10px, env(safe-area-inset-right))
            max(10px, env(safe-area-inset-bottom))
            max(10px, env(safe-area-inset-left));
    }

    .admin-sidebar {
        position: static;
        width: 100%;
        height: auto;
        flex-basis: auto;
        overflow: visible;
        border-radius: 18px;
    }

    .admin-sidebar-title {
        margin-bottom: 0;
        padding-bottom: 12px;
        cursor: pointer;
    }

    .admin-sidebar-content {
        padding-top: 8px;
    }

    .admin-main {
        width: 100%;
        padding: 10px 2px 36px;
    }
}

@media (max-width: 600px) {
    body.site-body {
        padding: 9px;
    }

    .header-bar {
        border-radius: 14px;
    }

    .site-header {
        min-height: 56px;
        padding: 10px 11px !important;
    }

    .site-brand {
        font-size: 17px;
    }

    .header-right-actions {
        gap: 6px !important;
    }

    .language-trigger {
        max-width: 118px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .site-actions {
        gap: 7px !important;
        margin-top: 9px;
        padding: 9px 10px !important;
    }

    .site-actions .btn {
        min-height: 33px;
        padding-inline: 11px;
    }

    .search-container {
        margin-block: 12px 18px;
        border-radius: 14px;
    }

    .catalog-search-container {
        padding: 9px;
    }

    .catalog-inline-search {
        flex-basis: 124px;
        width: clamp(108px, 32vw, 124px);
        min-width: 108px;
        max-width: 124px;
        padding: 1px;
    }

    .catalog-hot-search-group {
        gap: 2px;
        margin-inline-end: 6px;
    }

    .catalog-inline-search-input {
        height: 32px;
        padding-inline: 8px;
        font-size: 11px;
    }

    .catalog-inline-search-button {
        flex-basis: 32px;
        width: 32px;
        min-width: 32px;
        height: 32px;
        min-height: 32px;
    }

    .home-resource-browser {
        margin-top: 20px;
    }

    .home-resource-header {
        margin-bottom: 14px;
    }

    .home-resource-tabs-row {
        gap: 2px;
        padding: 3px;
        border-radius: 13px;
    }

    .home-resource-tabs {
        display: flex;
        align-items: stretch;
        flex-wrap: wrap;
        width: auto;
        min-width: 0;
        gap: 2px;
        flex: 0 1 auto;
    }

    .home-resource-links {
        display: contents;
    }

    .catalog-page-tab,
    .home-resource-tab,
    .home-resource-link {
        flex: 0 0 auto;
        min-width: 0;
        min-height: 34px;
        padding-inline: 10px;
        font-size: 12px;
        white-space: nowrap;
    }

    .media-grid {
        gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .media-card {
        padding: 3px;
        border-radius: 17px;
    }

    .media-card-core {
        border-radius: 13px;
    }

    .media-card .card-info {
        padding: 12px 9px 10px;
    }
}

@media (max-width: 360px) {
    .media-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .media-card .card-img-wrapper {
        height: 280px;
    }
}

@media (hover: none) {
    .media-card:hover,
    .btn:hover,
    .user-nav-btn:hover,
    .search-history-tag:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .reveal-item {
        opacity: 1;
        transform: none;
    }
}