/* =========================================================
 * FOFU 页
 * ?index.html 鍚?Porsche 鍙屾爮甯冨眬
 * 宸ュ潑涓撳睘瀵艰埅锛氭诞宀涜兌鍥婃牸锛坱op-nav锛夛紝鏀屾祬鑹?娣辫壊涓诲垏鎹?
 * ========================================================= */

/* =========================================================
 * CSS 鍙橀噺锛氭祬?娣辫壊鍙屼富?
 * ========================================================= */

/* =========================================================
 * 鍏ㄥ眬鍩猴細寮规€у崰婊″彛楂?
 * ========================================================= */
html {
    min-height: 100vh;
}

body {
    min-height: 100vh;
}

:root {
    /* 涓昏壊?- 娴呰壊妯″紡 */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F5F5;
    --bg-tertiary: #EBEBEB;

    /*  - 浅色 */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-bg-hover: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-border-hover: rgba(0, 0, 0, 0.14);

    /* 片 */
    --card-bg: rgba(0, 0, 0, 0.04);
    --card-bg-hover: rgba(0, 0, 0, 0.08);
    --card-border: rgba(0, 0, 0, 0.06);
    --card-border-hover: rgba(0, 0, 0, 0.14);

    /*  */
    --text-primary: #1A1A1A;
    --text-secondary: #666666;
    --text-muted: #999999;

    /* 寮鸿皟?*/
    --accent: #1A1A1A;
    --accent-hover: #000000;

    /* 鍦?*/
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* 影 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.16);
    --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.2);

    /* 模 */
    --blur-sm: blur(8px);
    --blur-md: blur(16px);
    --blur-lg: blur(24px);

    /*  */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition: 0.3s var(--ease);

    /* 鍒嗛殧?杈?*/
    --divider: rgba(0, 0, 0, 0.08);
    --border-light: rgba(0, 0, 0, 0.08);
    --border-medium: rgba(0, 0, 0, 0.14);

    /* 杩涘害鏉¤建?*/
    --progress-track: rgba(0, 0, 0, 0.15);

    /* 页姹?*/
    --bg-page: #F5F5F5;

    /* 模 */
    --bg-blur: rgba(255, 255, 255, 0.85);
}

/* 色模式 */
[data-theme="dark"] {
    /* 涓昏壊?- 娣辫壊妯″紡 */
    --bg-primary: #0a0a0a;
    --bg-secondary: #141414;
    --bg-tertiary: #1f1f1f;

    /*  - 色 */
    --glass-bg: rgba(20, 20, 20, 0.85);
    --glass-bg-hover: rgba(30, 30, 30, 0.92);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-hover: rgba(255, 255, 255, 0.16);

    /* 片 */
    --card-bg: rgba(255, 255, 255, 0.04);
    --card-bg-hover: rgba(255, 255, 255, 0.08);
    --card-border: rgba(255, 255, 255, 0.06);
    --card-border-hover: rgba(255, 255, 255, 0.14);

    /*  */
    --text-primary: #f5f5f5;
    --text-secondary: #888888;
    --text-muted: #555555;

    /* 寮鸿皟?*/
    --accent: #f5f5f5;
    --accent-hover: #ffffff;

    /* 影 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.7);

    /* 鍒嗛殧?杈?*/
    --divider: rgba(255, 255, 255, 0.08);
    --border-light: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.14);

    /* 杩涘害鏉¤建?*/
    --progress-track: rgba(255, 255, 255, 0.15);

    /* 页姹?*/
    --bg-page: #0a0a0a;

    /* 模 */
    --bg-blur: rgba(20, 20, 20, 0.85);
}

/* 色模式太图辏?*/
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* 娴呰壊妯″紡涓嬮殣钘忔湀浜涙爣锛屾樉绀哄 */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

/* 鍔ㄧ敾鍏抽敭?*/
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes navSlideDown {
    from { opacity: 0; transform: translate(-50%, -16px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
 * 涓诲竷锛氬弻鏍忥紙宸︿晶瀵艰埅 + 鍙充晶鍐?
 * ========================================================= */
.workshop-main {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* 宸︿晶锛?+ 宸ュ潑浠嬬粛 */
.workshop-left {
    flex: 1.7;
    min-width: 0;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    padding: 90px 40px 40px;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--divider);
    gap: 32px;
}

/* 鍙充晶锛氬唴瀹瑰睍?*/
.workshop-right {
    flex: 8.3;
    min-width: 0;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    padding: 90px 40px 60px;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    overscroll-behavior: contain;
}

/* 瀛愰〉闈㈢嫭绔嬪竷锛氶殣钘忓乏鏍忥紝璁╁彸鏍忓崰?*/
body.workshop-full-mode .workshop-left {
    display: none;
}

body.workshop-full-mode .workshop-main {
    display: block;
}

body.workshop-full-mode .workshop-right {
    flex: 1;
    width: 100%;
    padding: 90px 40px 60px;
    overflow: hidden;
}

body.workshop-full-mode.videos-full-mode .videos-page {
    display: flex;
    visibility: visible;
}

.workshop-right::before {
    content: '';
    position: absolute;
    top: 70px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--text-primary) 0%, transparent 70%);
    opacity: 0.03;
    pointer-events: none;
    border-radius: 50%;
}

/* =========================================================
 * 虮尘
 * ========================================================= */
.bg-minimal {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    pointer-events: none;
    z-index: 0;
}

/* =========================================================
 * 椤堕儴鑳跺泭瀵艰埅锛堝伐鍧婁笓?路 榛戠櫧椋庢牸?
 * ========================================================= */
.top-nav {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: calc(100% - 32px);
    max-width: 1280px;
    animation: navSlideDown 0.5s var(--ease-out) both;
}

.top-nav__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 6px 6px 18px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* 品 */
.top-nav__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text-primary);
    padding: 4px 6px 4px 0;
    flex-shrink: 0;
    transition: opacity var(--transition);
}

.top-nav__brand:hover {
    opacity: 0.8;
}

.top-nav__brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--text-primary);
}

.top-nav__brand-mark .brand-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

[data-theme="dark"] .top-nav__brand-mark {
    background: var(--bg-primary);
}

.top-nav__brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.top-nav__brand-text strong {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

.top-nav__brand-text span {
    font-size: 10px;
    color: var(--text-primary);
    letter-spacing: 0.1em;
    margin-top: 1px;
}

/* 说 */
.top-nav__menu {
    display: flex;
    gap: 2px;
    flex: 1;
    justify-content: center;
}

.top-nav__link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: all var(--transition);
    white-space: nowrap;
    border: 1px solid transparent;
}

.top-nav__link i {
    font-size: 11px;
}

.top-nav__link:hover {
    color: var(--text-primary);
    background: var(--card-bg-hover);
}

.top-nav__link.is-active {
    color: var(--text-primary);
    background: var(--card-bg);
}

.top-nav__link.is-active i {
    color: var(--text-primary);
}

/* 鎿嶄綔?*/
.top-nav__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* 鍥炬爣鎸夐挳锛堟悳?/ 閫氱煡?*/
.top-nav__icon-btn {
    position: relative;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    transition: all var(--transition);
}

.top-nav__icon-btn:hover {
    color: var(--text-primary);
    background: var(--card-bg-hover);
}

.top-nav__icon-btn i {
    font-size: 13px;
}

/* 通知 */
.top-nav__badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    background: var(--text-primary);
    color: var(--bg-primary);
    border-radius: var(--radius-full);
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* 钮 */
.top-nav__create-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    background: var(--text-primary);
    color: var(--bg-primary);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    border: none;
    transition: all var(--transition);
    margin: 0 2px;
}

.top-nav__create-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.top-nav__create-btn i {
    font-size: 11px;
}

/* 头钮 */
.top-nav__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    object-fit: cover;
    cursor: pointer;
    transition: all var(--transition);
}

.top-nav__avatar:hover {
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* =========================================================
 * 鎼滅储鍛戒护闈㈡澘锛堥粦鐧芥牸锛?
 * ========================================================= */
.command-palette {
    position: fixed;
    top: 76px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    z-index: 200;
    width: calc(100% - 32px);
    max-width: 720px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.command-palette.is-open {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: all;
}

.command-palette__inner {
    background: rgba(18, 18, 18, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

.command-palette__search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
}

.command-palette__search > i {
    color: var(--text-muted);
    font-size: 14px;
    flex-shrink: 0;
}

.command-palette__search > input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 15px;
    color: var(--text-primary);
    font-family: inherit;
    letter-spacing: 0.01em;
}

.command-palette__search > input::placeholder {
    color: var(--text-muted);
}

.command-palette__search > kbd {
    flex-shrink: 0;
    padding: 3px 7px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-muted);
    font-family: inherit;
}

.command-palette__shortcuts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
}

.command-palette__label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0 6px;
}

.command-palette__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
}

.command-palette__chip i {
    font-size: 10px;
    color: var(--text-muted);
}

.command-palette__chip:hover {
    background: var(--card-bg-hover);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

/* =========================================================
 * 閫氱煡寮瑰嚭妗嗭紙榛戠櫧椋庢牸?
 * ========================================================= */
.notification-panel {
    position: fixed;
    z-index: 300;
    width: 380px;
    max-height: 520px;
    background: rgba(16, 16, 16, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
    display: flex;
    flex-direction: column;
}

.notification-panel.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.notification-panel__header {
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.notification-panel__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.notification-panel__title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

.notification-panel__count {
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.notification-panel__mark-read {
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    transition: all var(--transition);
}

.notification-panel__mark-read:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.notification-panel__list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.notification-panel__list::-webkit-scrollbar {
    width: 4px;
}
.notification-panel__list::-webkit-scrollbar-track {
    background: transparent;
}
.notification-panel__list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.notification-panel__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 18px;
    cursor: pointer;
    transition: background var(--transition);
    position: relative;
}

.notification-panel__item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.notification-panel__item.is-unread {
    background: rgba(255, 255, 255, 0.02);
}

.notification-panel__avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.notification-panel__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.notification-panel__type-icon {
    position: absolute;
    bottom: -2px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(16, 16, 16, 0.97);
}

.notification-panel__type-icon i {
    font-size: 8px;
    color: #fff;
}

.notification-panel__body {
    flex: 1;
    min-width: 0;
}

.notification-panel__message {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-panel__item.is-unread .notification-panel__message {
    color: #fff;
}

.notification-panel__time {
    font-size: 11px;
    color: var(--text-muted);
}

.notification-panel__dot {
    position: absolute;
    top: 16px;
    right: 14px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-primary);
    flex-shrink: 0;
}

.notification-panel__footer {
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.notification-panel__view-all {
    width: 100%;
    padding: 9px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
}

.notification-panel__view-all:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

/* =========================================================
 * 鐢ㄦ埛澶村儚涓嬫媺鑿滃崟锛堥粦鐧芥牸锛?
 * ========================================================= */
.user-menu-wrapper {
    position: relative;
    flex-shrink: 0;
}

.user-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 220px;
    background: rgba(16, 16, 16, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    transform-origin: top right;
    visibility: hidden;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
    z-index: 200;
}

.user-menu.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}

.user-menu__user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.user-menu__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
    overflow: hidden;
}

.user-menu__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-menu__details {
    flex: 1;
    min-width: 0;
}

.user-menu__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu__email {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 0;
}

.user-menu__items {
    padding: 6px;
}

.user-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.user-menu__item i {
    width: 16px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    flex-shrink: 0;
    transition: color var(--transition);
}

.user-menu__item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    padding-left: 14px;
}

.user-menu__item:hover i {
    color: var(--text-primary);
}

.user-menu__item--danger:hover {
    background: rgba(220, 38, 38, 0.1);
    color: #ef4444;
}

.user-menu__item--danger:hover i {
    color: #ef4444;
}

/* =========================================================
 * 宸︿笂锛氳繋锛堟部?index.html ?hero 椋庢牸?
 * ========================================================= */
.workshop-hero {
    position: relative;
}

.workshop-hero::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, var(--text-primary) 0%, transparent 70%);
    opacity: 0.04;
    pointer-events: none;
    border-radius: 50%;
}

.workshop-hero .hero-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin-bottom: 18px;
}

.workshop-hero .hero-title .ink-accent {
    color: var(--text-muted);
    font-style: italic;
    font-weight: 600;
}

.workshop-hero .hero-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 440px;
    margin: 0;
    padding-left: 16px;
    border-left: 2px solid var(--border-medium);
}

/* =========================================================
 * 宸︿腑锛氭澘鍧?
 * ?.right-entry-card 鍚岋紝浣嗕綔涓轰晶杈瑰鑸?
 * ========================================================= */
.workshop-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.workshop-nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-primary);
    transition: all 0.35s var(--ease);
    position: relative;
    overflow: hidden;
}

.workshop-nav-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.35s var(--ease);
    pointer-events: none;
}

.workshop-nav-item:hover {
    border-color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .workshop-nav-item:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.workshop-nav-item:hover::before {
    opacity: 1;
}

.workshop-nav-item.is-active {
    border-color: var(--text-primary);
    background: var(--bg-secondary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .workshop-nav-item.is-active {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.workshop-nav-item.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 3px;
    background: var(--text-primary);
    border-radius: 0 3px 3px 0;
}

.workshop-nav-index {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    border: 1px solid var(--border-light);
    border-radius: 50%;
    background: var(--bg-primary);
    transition: all 0.35s var(--ease);
    position: relative;
    z-index: 1;
}

.workshop-nav-item:hover .workshop-nav-index,
.workshop-nav-item.is-active .workshop-nav-index {
    background: var(--text-primary);
    color: var(--text-inverse);
    border-color: var(--text-primary);
    transform: rotate(-8deg);
}

.workshop-nav-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    transition: all 0.35s var(--ease);
    position: relative;
    z-index: 1;
}

.workshop-nav-item:hover .workshop-nav-icon,
.workshop-nav-item.is-active .workshop-nav-icon {
    background: var(--text-primary);
    transform: scale(1.06) rotate(-4deg);
}

.workshop-nav-icon svg {
    width: 16px;
    height: 16px;
    color: var(--text-primary);
    transition: color 0.35s var(--ease);
}

.workshop-nav-item:hover .workshop-nav-icon svg,
.workshop-nav-item.is-active .workshop-nav-icon svg {
    color: var(--text-inverse);
}

.workshop-nav-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.workshop-nav-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.workshop-nav-desc {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.workshop-nav-arrow {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 700;
    border: 1px solid var(--border-light);
    border-radius: 50%;
    transition: all 0.35s var(--ease);
    position: relative;
    z-index: 1;
}

.workshop-nav-item:hover .workshop-nav-arrow,
.workshop-nav-item.is-active .workshop-nav-arrow {
    background: var(--text-primary);
    color: var(--text-inverse);
    border-color: var(--text-primary);
    transform: translateX(4px);
}

/* =========================================================
 * 宸︿笅锛氬伐鍧婁粙?
 * ========================================================= */
.workshop-intro {
    margin-top: auto;
    padding: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}

.workshop-intro::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, var(--text-primary) 0%, transparent 70%);
    opacity: 0.05;
    pointer-events: none;
    border-radius: 50%;
}

.workshop-intro .section-label {
    margin-bottom: 14px;
}

.workshop-intro-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 18px;
    position: relative;
}

.workshop-intro-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-top: 16px;
    border-top: 1px dashed var(--border-medium);
    position: relative;
}

.workshop-intro-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.workshop-intro-stat-num {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.workshop-intro-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

/* =========================================================
 * 鍙充晶锛氭澘鍧楀唴瀹?
 * ========================================================= */
.workshop-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    animation: workshopFadeIn 0.5s var(--ease) both;
}

.workshop-section[hidden] {
    display: none;
}

.workshop-section--design {
    flex: none;
    height: calc(100vh - 150px);
    overflow: hidden;
}

@keyframes workshopFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.workshop-section-header {
    position: relative;
}

.workshop-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.workshop-section-tag::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--text-primary);
    border-radius: 50%;
}

.workshop-section-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.workshop-section-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
    max-width: 520px;
}

/* =========================================================
 * 鏉垮潡 01锛氭柊浣滄帹鑽愬崱鐗囩綉?
 * ========================================================= */
.workshop-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.workshop-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.35s var(--ease);
    position: relative;
}

.workshop-card:hover {
    border-color: var(--text-primary);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .workshop-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

.workshop-card--feature {
    grid-column: auto;
}

.workshop-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.workshop-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.25) 100%);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}

.workshop-card:hover .workshop-card-media::after {
    opacity: 1;
}

.workshop-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    font-size: 9px;
    font-weight: 700;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a1a;
    border-radius: var(--radius-pill);
    letter-spacing: 0.1em;
}

[data-theme="dark"] .workshop-card-badge {
    background: rgba(255, 255, 255, 0.9);
    color: #0a0a0a;
}

.workshop-card-play {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    color: #1a1a1a;
    border-radius: 50%;
    font-size: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    transform: scale(0.9);
    transition: transform 0.35s var(--ease);
    z-index: 1;
}

.workshop-card:hover .workshop-card-play {
    transform: scale(1);
}

.workshop-card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.workshop-card-meta {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.workshop-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.workshop-card--feature .workshop-card-title {
    font-size: 15px;
}

.workshop-card-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.workshop-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px dashed var(--border-light);
    font-size: 11px;
    color: var(--text-secondary);
}

.workshop-card-author {
    font-weight: 600;
    color: var(--text-primary);
}

.workshop-card-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.workshop-card-stat i {
    font-size: 10px;
    color: var(--text-muted);
}

/* =========================================================
 * 鏉垮潡 02锛氬伐鍧婁笓鏍忓垪?
 * ========================================================= */
.workshop-column-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.workshop-column-card {
    display: grid;
    grid-template-columns: 60px 1fr 200px;
    gap: 20px;
    align-items: center;
    padding: 22px 24px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.35s var(--ease);
}

.workshop-column-card:hover {
    border-color: var(--text-primary);
    transform: translateX(4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .workshop-column-card:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.workshop-column-no {
    font-family: 'DM Sans', monospace;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: -0.02em;
    line-height: 1;
}

.workshop-column-card:hover .workshop-column-no {
    color: var(--text-primary);
}

.workshop-column-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.workshop-column-meta {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.workshop-column-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

.workshop-column-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.workshop-column-author {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.workshop-column-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.workshop-column-author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.workshop-column-author-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.workshop-column-author-tag {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

/* =========================================================
 * 鏉垮潡 03锛氭洿澶氬崱鐗囩綉?
 * ========================================================= */
.workshop-more-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.workshop-more-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    transition: all 0.35s var(--ease);
    position: relative;
    overflow: hidden;
}

.workshop-more-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--text-primary);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.35s var(--ease);
}

.workshop-more-card:hover {
    border-color: var(--text-primary);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .workshop-more-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

.workshop-more-card:hover::before {
    transform: scaleY(1);
}

.workshop-more-tag {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.workshop-more-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 4px 0 0;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

.workshop-more-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.workshop-more-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 10px 0;
    border-top: 1px dashed var(--border-light);
    border-bottom: 1px dashed var(--border-light);
    font-size: 11px;
    color: var(--text-muted);
}

.workshop-more-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.workshop-more-meta i {
    font-size: 10px;
}

.workshop-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    transition: gap 0.25s var(--ease);
    align-self: flex-start;
}

.workshop-more-btn .arrow {
    transition: transform 0.25s var(--ease);
}

.workshop-more-btn:hover {
    gap: 10px;
}

.workshop-more-btn:hover .arrow {
    transform: translateX(4px);
}

/* =========================================================
 * 鏉垮潡搴曢儴锛堝叡鐢?
 * ========================================================= */
.workshop-section-foot {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px dashed var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
}

.workshop-foot-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color var(--transition);
}

.workshop-foot-link .arrow {
    font-weight: 700;
    transition: transform 0.3s var(--ease);
}

.workshop-foot-link:hover {
    color: var(--text-primary);
}

.workshop-foot-link:hover .arrow {
    transform: translateX(4px);
}

.workshop-foot-tip {
    letter-spacing: 0.05em;
}

/* =========================================================
 * 鍝嶅簲?
 * ========================================================= */
@media (max-width: 1100px) {
    .workshop-column-card {
        grid-template-columns: 50px 1fr;
        gap: 16px;
    }

    .workshop-column-author {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 900px) {
    .workshop-main {
        flex-direction: column;
    }

    .workshop-left {
        border-right: none;
        border-bottom: 1px solid var(--divider);
    }

    .workshop-card--feature {
        grid-column: span 1;
    }

    .workshop-card--feature .workshop-card-media {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 768px) {
    .workshop-left,
    .workshop-right {
        padding: 76px 24px 40px;
    }

    .workshop-section-title {
        font-size: 22px;
    }

    .workshop-intro-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .workshop-intro-stat-num {
        font-size: 18px;
    }
}

@media (max-width: 540px) {
    .workshop-card-grid {
        grid-template-columns: 1fr;
    }

    .workshop-column-card {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .workshop-column-no {
        font-size: 16px;
    }

    .workshop-more-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
 * 瑙嗗瓙椤甸澕workshop-section--videos?
 * 鍙屾爮甯冨眬锛歱osition: fixed 涓嶅彈鐖?overflow 褰卞搷
 * ========================================================= */
.workshop-section--videos {
    padding: 0 !important;
}

/* =========================================================
 * 鐑楀瓙椤甸澕workshop-section--trending?
 * 鍙屾爮甯冨眬锛氬崰婊″彛楂?
 * ========================================================= */
.workshop-section--trending {
    padding: 0 !important;
}

/* 鍙屾爮甯冨眬锛氬脊鎬у崰婊″彛楂?*/
.videos-page {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* 鐑楅〉闈㈠鍣?*/
.trending-page {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* 瑙嗛〉闈㈡椂鏄?*/
body.workshop-full-mode.videos-full-mode .videos-page {
    display: flex;
}

/* 鐑楅〉闈㈡椂鏄?*/
body.workshop-full-mode.trending-full-mode .trending-page {
    display: flex;
}

/* 缇庢湳椤甸潰鏃舵樉?*/
body.workshop-full-mode.design-full-mode .design-page {
    display: flex;
    height: 100%;
    min-height: 0;
}

/* ===== 宸︿晶锛氬伐鍧婃牸?===== */
.videos-page-left {
    flex: 1.5;
    min-width: 0;
    height: 100%;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    padding: 90px 40px 40px;
    overflow: hidden;
    border-right: 1px solid var(--divider);
    gap: 32px;
}

.videos-page-left::-webkit-scrollbar { width: 4px; }
.videos-page-left::-webkit-scrollbar-track { background: transparent; }
.videos-page-left::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

/* 鏃堕暱绛?*/
.videos-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.videos-filters .section-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.videos-duration-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.videos-duration-chip {
    padding: 6px 14px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
}

.videos-duration-chip:hover {
    background: var(--card-bg-hover);
    color: var(--text-primary);
    border-color: var(--card-border-hover);
}

.videos-duration-chip.is-active {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
    font-weight: 600;
}

/* 冒钮 */
.videos-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
}

.videos-reset i { font-size: 10px; }

.videos-reset:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ===== 鍙充晶锛氶鍐呭鍖?===== */
.videos-page-right {
    flex: 8.5;
    min-width: 0;
    height: 100%;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    padding: 90px 40px 60px;
    overflow: hidden;
    position: relative;
}

/* 椤堕儴宸ュ叿?*/
.videos-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 28px 0 24px;
    margin-bottom: 20px;
    border-bottom: 1px dashed var(--border-light);
}

.videos-toolbar-info {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.videos-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.videos-current-category {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0;
}

.videos-divider { color: var(--text-muted); opacity: 0.5; }

.videos-current-count { font-size: 13px; color: var(--text-muted); }
.videos-current-count strong { color: var(--text-primary); font-weight: 700; }

.videos-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* 瑙嗗唴鎼滅储 */
.videos-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-full);
    transition: all var(--transition);
    min-width: 180px;
}

.videos-search-box:focus-within {
    border-color: var(--border-medium);
    background: var(--card-bg-hover);
}

.videos-search-box i { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }

.videos-search-box input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 12px;
    color: var(--text-primary);
    font-family: inherit;
    min-width: 0;
}

.videos-search-box input::placeholder { color: var(--text-muted); }

/*  */
.videos-sort select {
    appearance: none;
    -webkit-appearance: none;
    padding: 8px 28px 8px 14px;
    background-color: var(--card-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-full);
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    transition: all var(--transition);
}

.videos-sort select:hover,
.videos-sort select:focus {
    background-color: var(--card-bg-hover);
    border-color: var(--border-medium);
    outline: none;
}

.videos-sort select option { background: var(--bg-secondary); color: var(--text-primary); }

/* 图谢 */
.videos-view-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-full);
}

.videos-view-btn {
    width: 30px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
}

.videos-view-btn i { font-size: 12px; }
.videos-view-btn:hover { color: var(--text-primary); }
.videos-view-btn.is-active { background: var(--card-bg-hover); color: var(--text-primary); }

/* 瑙嗙綉鏍?*/
.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.videos-grid[data-view="list"] { grid-template-columns: 1fr; gap: 12px; }

/* 瑙嗗崱鐗?*/
.video-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all 0.35s var(--ease);
    position: relative;
}

.video-card:hover {
    border-color: var(--text-primary);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

.video-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.video-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.6) 100%);
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;
}

.video-card:hover .video-card-media::after { opacity: 1; }

.video-card-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 2px 7px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    font-variant-numeric: tabular-nums;
    z-index: 2;
}

.video-card-quality {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 6px;
    background: var(--text-primary);
    color: var(--bg-primary);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    z-index: 2;
}

.video-card-play {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--text-primary);
    color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.85);
    transition: transform 0.3s var(--ease);
    z-index: 2;
}

.video-card-play i { font-size: 13px; margin-left: 2px; }
.video-card:hover .video-card-play { transform: scale(1); }

.video-card-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--progress-track);
    z-index: 2;
}

.video-card-progress span {
    display: block;
    height: 100%;
    background: var(--text-primary);
    width: 35%;
    transition: width 0.3s;
}

.video-card:hover .video-card-progress span { width: 38%; }

.video-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    flex: 1;
}

.video-card-meta {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.video-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-card-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    margin-top: auto;
    border-top: 1px dashed var(--divider);
}

.video-card-author {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 0;
}

.video-card-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--card-bg-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
}

.video-card-stats {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.video-card-stats span { display: inline-flex; align-items: center; gap: 3px; }
.video-card-stats i { font-size: 10px; }

/* 斜图 */
.videos-grid[data-view="list"] .video-card { flex-direction: row; height: 140px; }
.videos-grid[data-view="list"] .video-card-media { width: 250px; aspect-ratio: auto; height: 100%; flex-shrink: 0; }
.videos-grid[data-view="list"] .video-card-body { flex: 1; min-width: 0; padding: 18px 20px; gap: 10px; }
.videos-grid[data-view="list"] .video-card-title { font-size: 16px; -webkit-line-clamp: 1; }
.videos-grid[data-view="list"] .video-card-desc { -webkit-line-clamp: 2; }

/* 鍔犺浇鏇?*/
.videos-load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 0 8px;
}

.videos-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
}

.videos-load-more-btn:hover {
    background: var(--card-bg-hover);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

.videos-load-more-btn i { font-size: 11px; transition: transform var(--transition); }
.videos-load-more-btn:hover i { transform: translateY(2px); }
.videos-load-more-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.videos-load-tip { font-size: 11px; color: var(--text-muted); }

/* 绌虹姸?*/
.videos-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    gap: 12px;
}

.videos-empty i { font-size: 36px; color: var(--text-muted); opacity: 0.4; }
.videos-empty p { font-size: 13px; color: var(--text-muted); margin: 0; }

/* 瑙嗛〉闈㈠搷搴?*/
@media (max-width: 960px) {
    .videos-page { flex-direction: column; }
    .videos-page-left,
    .videos-page-right {
        padding-top: 90px;
        padding-left: 28px;
        padding-right: 28px;
        flex: 1;
        width: 100%;
        height: auto;
        border-right: none;
    }
    .videos-page-left { border-bottom: 1px solid var(--divider); border-right: none; }
    .videos-toolbar { gap: 12px; }
    .videos-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
    .videos-grid[data-view="list"] .video-card { height: auto; flex-direction: column; }
    .videos-grid[data-view="list"] .video-card-media { width: 100%; aspect-ratio: 16 / 9; height: auto; }
}

@media (max-width: 768px) {
    .videos-page-left,
    .videos-page-right { padding: 76px 24px 40px; }
    .videos-toolbar { flex-direction: column; align-items: stretch; }
    .videos-toolbar-actions { justify-content: space-between; }
    .videos-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
}

@media (max-width: 540px) {
    .videos-page-left,
    .videos-page-right { padding: 76px 20px 32px; }
    .videos-toolbar { flex-direction: column; align-items: stretch; }
    .videos-toolbar-actions { justify-content: space-between; }
    .videos-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* =========================================================
 * 鐑楅〉闈㈡牱寮?
 * ========================================================= */

/* 鐑楅〉闈㈠乏渚у鑸?*/
.trending-page-left {
    flex: 1.5;
    min-width: 0;
    height: 100%;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    padding: 90px 40px 40px;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--divider);
    gap: 32px;
}

/* 鑷箟婊氬姩鏉?*/
.trending-page-left {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.trending-page-left::-webkit-scrollbar { width: 4px; }
.trending-page-left::-webkit-scrollbar-track { background: transparent; }
.trending-page-left::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.trending-page-left::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* 鐑楀垎绫诲鑸?*/
.trending-nav {
    flex-shrink: 0;
}

/* 鐑楃瓫鍖?*/
.trending-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trending-time-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.trending-time-chip {
    padding: 6px 14px;
    background: var(--card-bg);
    border: 1px solid var(--divider);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.trending-time-chip:hover {
    background: var(--card-bg-hover);
    color: var(--text-primary);
}

.trending-time-chip.is-active {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--bg-primary);
}

/* 鐑楀叧浜庡尯鍩?*/
.trending-about {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--divider);
}

.trending-about-text {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* 鐑楅〉闈㈠彸渚у唴 */
.trending-page-right {
    flex: 8.5;
    min-width: 0;
    height: 100%;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    padding: 90px 40px 40px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

/* 鑷箟婊氬姩鏉?*/
.trending-page-right {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.trending-page-right::-webkit-scrollbar { width: 6px; }
.trending-page-right::-webkit-scrollbar-track { background: transparent; }
.trending-page-right::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.trending-page-right::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* 鐑楀伐鍏?*/
.trending-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--divider);
    margin-bottom: 24px;
    flex-shrink: 0;
}

.trending-toolbar-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trending-section-tag {
    font-size: 10px;
    color: var(--accent-primary);
    font-weight: 600;
    letter-spacing: 2px;
}

.trending-section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.trending-section-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 4px 0 0;
    line-height: 1.5;
}

.trending-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trending-refresh-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--card-bg);
    border: 1px solid var(--divider);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.trending-refresh-btn:hover {
    background: var(--card-bg-hover);
    color: var(--text-primary);
}

.trending-refresh-btn i {
    font-size: 12px;
}

/* 鐑楀唴鍖哄煙 */
.trending-content {
    flex: 1;
    overflow-y: auto;
}

.trending-ranking {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 鐑楀崱鐗?*/
.trending-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--card-bg);
    border: 1px solid var(--divider);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.trending-card:hover {
    background: var(--card-bg-hover);
    border-color: var(--border-medium);
    transform: translateY(-2px);
}

.trending-card--top {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

.trending-card--top:hover {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
}

/* 鐑楁帓鍚?*/
.trending-card-rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    flex-shrink: 0;
}

.trending-card-rank--gold {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: #1a1a1a;
}

.trending-card-rank--silver {
    background: linear-gradient(135deg, #9ca3af 0%, #d1d5db 100%);
    color: #1a1a1a;
}

.trending-card-rank--bronze {
    background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
    color: white;
}

/* 鐑楀崱鐗囧獟浣?*/
.trending-card-media {
    width: 96px;
    height: 54px;
    border-radius: 8px;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}

.trending-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    background: rgba(245, 158, 11, 0.9);
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
}

.trending-card-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.trending-card:hover .trending-card-play {
    opacity: 1;
}

.trending-card-play i {
    color: white;
    font-size: 16px;
}

/* 鐑楀崱鐗囧唴 */
.trending-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trending-card-meta {
    font-size: 11px;
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.trending-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.trending-card-desc {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.trending-card-stats {
    display: flex;
    gap: 8px;
    margin-top: 1px;
}

.trending-card-stats span {
    font-size: 11px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.trending-card-stats i {
    font-size: 11px;
}

/* 鍝嶅簲寮忛厤 */
@media (max-width: 960px) {
    .trending-page { flex-direction: column; }
    .trending-page-left,
    .trending-page-right { flex: none; width: 100%; height: auto; }
    .trending-page-left { max-height: 40vh; }
}

@media (max-width: 768px) {
    .trending-page-left { padding: 16px 20px 24px; gap: 20px; }
    .trending-page-right { padding: 16px 20px 24px; }
    .trending-card { flex-direction: column; }
    .trending-card-media { width: 100%; height: 120px; }
}

@media (max-width: 540px) {
    .trending-page-left { padding: 12px 16px 20px; }
    .trending-page-right { padding: 12px 16px 20px; }
}

/* =========================================================
 * 缇庢湳瀛愰〉闈煎弻鏍忓竷灞€?
 * ========================================================= */

/* =========================================================
 * 缇庢湳瀛愰〉闈间笌棰戦〉 / 鐑楅〉淇濇寔涓€鑷存牸锛?
 * ========================================================= */

/* 缇庢湳鍙屾爮甯冨眬锛堥粯璁ら殣钘忥紝杩涘叆 design-full-mode 鍚庢墠鏄剧ず?*/
.design-page {
    display: none;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* ===== 宸︿晶锛氬伐鍧婃牸?===== */
.design-page-left {
    flex: 1.5;
    min-width: 0;
    height: 100%;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    padding: 90px 40px 40px;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--divider);
    gap: 32px;
}

/* 鑷箟婊氬姩鏉?*/
.design-page-left {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.design-page-left::-webkit-scrollbar { width: 4px; }
.design-page-left::-webkit-scrollbar-track { background: transparent; }
.design-page-left::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.design-page-left::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* 嗟?*/
.design-nav {
    flex-shrink: 0;
}

/* 缇庢湳绛涘尯鍩燂紙绫诲瀷 / 鏃堕棿?*/
.design-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.design-filters .section-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/*  / 时 chip */
.design-type-options,
.design-time-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.design-type-chip,
.design-time-chip {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--divider);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
}

.design-type-chip:hover,
.design-time-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.16);
}

.design-type-chip.is-active,
.design-time-chip.is-active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
    font-weight: 600;
}

/* 閲嶇疆鎸夐挳锛堟部?.videos-reset 椋庢牸?*/
.design-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--divider);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    align-self: flex-start;
}

.design-reset i { font-size: 10px; }

.design-reset:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ===== 鍙充晶锛氬唴瀹瑰睍?===== */
.design-page-right {
    flex: 8.5;
    min-width: 0;
    height: 100%;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    position: relative;
    overscroll-behavior: contain;
}

/* 鑷箟婊氬姩鏉?*/
.design-page-right {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.design-page-right::-webkit-scrollbar { width: 6px; }
.design-page-right::-webkit-scrollbar-track { background: transparent; }
.design-page-right::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.design-page-right::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* 椤堕儴宸ュ叿鏍忥紙?trending-toolbar 椋庢牸鑷达級 */
.design-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 28px 0 24px;
    margin-bottom: 20px;
    border-bottom: 1px dashed var(--border-light);
    flex-shrink: 0;
}

.design-toolbar-info {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
    flex: 1;
}

.design-section-tag {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-primary);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.design-current-category {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0;
}

.design-current-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
    width: 100%;
    flex-basis: 100%;
}

.design-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.design-current-count {
    font-size: 13px;
    color: var(--text-muted);
}

.design-current-count strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* 鎼滅储妗嗭紙?videos-search-box 椋庢牸鑷达級 */
.design-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--divider);
    border-radius: var(--radius-full);
    transition: all var(--transition);
    min-width: 180px;
}

.design-search-box:focus-within {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
}

.design-search-box > i {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.design-search-box input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 12px;
    color: var(--text-primary);
    font-family: inherit;
    min-width: 0;
}

.design-search-box input::placeholder {
    color: var(--text-muted);
}

.design-search-clear {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition);
    flex-shrink: 0;
}

.design-search-clear:hover {
    color: var(--text-primary);
}

/* 鎺掑簭涓嬫媺锛堜笌 videos-sort 椋庢牸鑷达級 */
.design-sort {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.design-sort select {
    appearance: none;
    -webkit-appearance: none;
    padding: 8px 28px 8px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--divider);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: all var(--transition);
}

.design-sort select:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.16);
}

.design-sort select:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.2);
}

.design-sort > i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    color: var(--text-muted);
    pointer-events: none;
}

/* 图谢 */
.design-view-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--divider);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
}

.design-view-btn:hover {
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}

.design-view-btn.is-active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

/* ===== 浣滃搧鍐呭尯鍩?===== */
.design-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    margin-right: -4px;
}

.design-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.design-content::-webkit-scrollbar { width: 6px; }
.design-content::-webkit-scrollbar-track { background: transparent; }
.design-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.design-content::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* 品 */
.design-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.design-grid[data-view="list"] {
    grid-template-columns: 1fr;
    gap: 16px;
}

/* 缇庢湳锛氫富鍐呭尯锛堢綉鏍?+ 璇︽儏闈㈡澘?*/
.design-main {
    display: flex;
    gap: 16px;
    flex: 1;
    min-height: 0;
    height: 100%;
}
.design-grid-wrap {
    flex: 0 0 65%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    overscroll-behavior: contain;
}
.design-grid-wrap::-webkit-scrollbar { width: 6px; }
.design-grid-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }

/* 也 */
.design-detail-panel {
    flex: 1;
    min-width: 280px;
    min-height: 0;
    background: var(--bg-primary);
    border: 1px solid var(--divider);
    border-radius: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;
}
.design-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    color: var(--text-muted);
    gap: 12px;
    flex: 1;
}
.design-detail-empty i {
    font-size: 40px;
    opacity: 0.3;
}
.design-detail-empty p {
    font-size: 13px;
    margin: 0;
}
.design-detail-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.design-detail-image {
    width: 100%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.design-detail-body {
    padding: 20px;
    flex: none;
}
.design-detail-body::-webkit-scrollbar { width: 6px; }
.design-detail-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
.design-detail-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.design-detail-type {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(102, 126, 234, 0.15);
    color: #8b9cf7;
    letter-spacing: 0.05em;
}
.design-detail-date {
    font-size: 11px;
    color: var(--text-muted);
}
.design-detail-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 6px;
    line-height: 1.3;
}
.design-detail-author {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 12px;
}
.design-detail-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 16px;
}
.design-detail-stats {
    display: flex;
    gap: 20px;
    padding: 12px 0;
    border-top: 1px solid var(--divider);
    border-bottom: 1px solid var(--divider);
    margin-bottom: 16px;
}
.design-detail-stats span {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.design-detail-stats em {
    font-style: normal;
    color: var(--text-primary);
    font-weight: 600;
}
.design-detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.design-detail-btn {
    flex: 1;
    min-width: 80px;
    padding: 8px 12px;
    border: 1px solid var(--divider);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}
.design-detail-btn:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
}
.design-detail-btn--close {
    flex: 0 0 auto;
    min-width: auto;
    padding: 8px 14px;
}

/* 璇?*/
.design-comments {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--divider);
}
.design-comments-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.design-comments-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.design-comments-count {
    font-size: 12px;
    color: var(--text-muted);
    background: rgba(255,255,255,0.06);
    padding: 2px 8px;
    border-radius: 10px;
}
.design-comments-list {
    max-height: 240px;
    overflow-y: auto;
    margin-bottom: 12px;
}
.design-comments-list::-webkit-scrollbar { width: 4px; }
.design-comments-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.design-comment-item {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.design-comment-item:last-child { border-bottom: none; }
.design-comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.design-comment-body {
    flex: 1;
    min-width: 0;
}
.design-comment-user {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 2px;
}
.design-comment-text {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.5;
    word-break: break-word;
}
.design-comment-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.design-comment-input {
    display: flex;
    gap: 8px;
}
.design-comment-input input {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--divider);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s;
}
.design-comment-input input:focus {
    border-color: rgba(102, 126, 234, 0.5);
}
.design-comment-input input::placeholder {
    color: var(--text-muted);
}
.design-comment-send {
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    flex-shrink: 0;
}
.design-comment-send:hover {
    opacity: 0.85;
}
.design-comment-empty {
    text-align: center;
    padding: 20px 0;
    font-size: 12px;
    color: var(--text-muted);
}
.design-card.is-selected {
    border-color: rgba(102, 126, 234, 0.6);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* 品片 */
.design-card {
    position: relative;
    background: var(--bg-primary);
    border: 1px solid var(--divider);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
    animation: fadeInUp 0.4s ease both;
    /* button  */
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.design-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.design-grid[data-view="list"] .design-card {
    flex-direction: row;
}

.design-grid[data-view="list"] .design-thumbnail {
    flex: 0 0 240px;
    aspect-ratio: auto;
}

.design-thumbnail {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
}

.design-card-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding: 12px;
    position: relative;
}

.design-card-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-full);
    color: white;
    font-size: 11px;
    font-weight: 500;
}

.design-card-type i { font-size: 10px; }

.design-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition);
}

.design-card:hover .design-overlay { opacity: 1; }

.design-actions {
    display: flex;
    gap: 8px;
}

.design-action-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    color: #1a1a1a;
    cursor: pointer;
    transition: all var(--transition);
    transform: translateY(8px);
    font-size: 13px;
}

.design-card:hover .design-action-btn { transform: translateY(0); }

.design-action-btn:nth-child(1) { transition-delay: 0s; }
.design-action-btn:nth-child(2) { transition-delay: 0.05s; }
.design-action-btn:nth-child(3) { transition-delay: 0.1s; }

.design-action-btn:hover {
    background: var(--text-primary);
    color: var(--bg-primary);
    transform: translateY(-2px) !important;
}

/* 鍗＄墖鍐?*/
.design-info {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.design-grid[data-view="list"] .design-info {
    padding: 16px 20px;
}

.design-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.design-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.design-author {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.author-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.author-name {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.design-stats {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

.stat-item i { font-size: 10px; }

.design-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.design-grid[data-view="list"] .design-desc {
    -webkit-line-clamp: 1;
}

/* ----- 鍔犺浇鏇?----- */
.design-load-more {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    padding-top: 24px;
    flex-shrink: 0;
}

.design-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--divider);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
}

.design-load-more-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ----- 绌虹姸?----- */
.design-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 80px 20px;
    color: var(--text-muted);
}

.design-empty i {
    font-size: 48px;
    opacity: 0.4;
}

.design-empty p {
    margin: 0;
    font-size: 14px;
}

/* ----- 鍝嶅簲?----- */
@media (max-width: 1100px) {
    .design-page-left { padding: 90px 32px 32px; gap: 28px; }
    .design-page-right { padding: 90px 32px 40px; }
    .design-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
}

@media (max-width: 860px) {
    .design-page { flex-direction: column; height: auto; overflow-y: auto; }
    .design-page-left {
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid var(--divider);
        max-height: 60vh;
    }
    .design-page-right { padding: 24px 20px 32px; overflow: visible; }
    .design-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
}

@media (max-width: 540px) {
    .design-page-left { padding: 80px 16px 20px; }
    .design-page-right { padding: 24px 16px 32px; }
    .design-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
    .design-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
    .design-toolbar-actions { justify-content: flex-start; }
}

/* =========================================================
 * 闊虫晥瀛愰〉闈间笌棰戦〉 / 鐑?/ 缇庢湳椤典繚鎸佷竴鑷存牸锛?
 * ========================================================= */

/* 闊虫晥鍙屾爮甯冨眬锛堥粯璁ら殣钘忥紝杩涘叆 audio-full-mode 鍚庢墠鏄剧ず?*/
.audio-page {
    display: none;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* ===== 宸︿晶锛氭悳?+ 绛?+ 鍒楄〃 ===== */
.audio-page-left {
    flex: 1.5;
    min-width: 0;
    height: 100%;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    padding: 90px 40px 40px;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--divider);
    gap: 32px;
}

/* 鑷箟婊氬姩鏉?*/
.audio-page-left {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.audio-page-left::-webkit-scrollbar { width: 4px; }
.audio-page-left::-webkit-scrollbar-track { background: transparent; }
.audio-page-left::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.audio-page-left::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* 效嗟?*/
.audio-nav {
    flex-shrink: 0;
}

/* 鎼滅储?*/
.audio-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--divider);
    border-radius: var(--radius-full);
    transition: all var(--transition);
}

.audio-search-box:focus-within {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
}

.audio-search-box > i {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.audio-search-box input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 12px;
    color: var(--text-primary);
    font-family: inherit;
    min-width: 0;
}

.audio-search-box input::placeholder { color: var(--text-muted); }

.audio-search-clear {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition);
    flex-shrink: 0;
}

.audio-search-clear:hover { color: var(--text-primary); }

/* 鎯呯华绛?*/
.audio-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.audio-filters .section-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.audio-mood-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.audio-mood-chip {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--divider);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
}

.audio-mood-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.16);
}

.audio-mood-chip.is-active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
    font-weight: 600;
}

/* 冒钮 */
.audio-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--divider);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    align-self: flex-start;
}

.audio-reset i { font-size: 10px; }

.audio-reset:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ===== 鍙充晶锛氬敱鐗囨挱鏀惧櫒 + 鎾旈槦鍒?===== */
.audio-page-right {
    flex: 8.5;
    min-width: 0;
    height: 100%;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    padding: 60px 40px 30px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    gap: 16px;
}

/* 鑷箟婊氬姩鏉?*/
.audio-page-right {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.audio-page-right::-webkit-scrollbar { width: 6px; }
.audio-page-right::-webkit-scrollbar-track { background: transparent; }
.audio-page-right::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.audio-page-right::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* =========================================================
 * 榛戣兌鍞辩墖鎾斿櫦楂樼骇鐗堬級
 * ========================================================= */

/*  */
.vinyl-player {
    --vp-disc-size: 280px;
    --vp-accent: #667eea;
    --vp-accent-glow: rgba(102, 126, 234, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 28px 14px;
    background: rgba(10, 10, 15, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    position: relative;
    flex-shrink: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 24px 60px rgba(0,0,0,0.5),
        0 0 60px rgba(255, 255, 255, 0.25) inset;
    overflow: hidden;
}

/* 椤堕儴鎶曞皠鍏夋潫锛氱伅鍏変粠鑳屾櫙涓婃柟绌跨収涓嬶紝鑱氱劍鍦ㄥ敱鐗囧尯鍩燂紙鍏夋潫鍥撅級 */
/* 椤堕儴鎶曞皠鍏夋潫锛堟殏涓嶅惎鐢煎厛璇曚袱鑱氬厜鏌憋級 */
.vinyl-player::before {
    display: none;
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 760px;
    height: 100%;
    background: radial-gradient(ellipse 52% 60% at 50% 0%, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.12) 42%, rgba(255,255,255,0.03) 66%, transparent 80%);
    pointer-events: none;
    z-index: 0;
}
/* 涓よ仛鍏夋煴锛氭洿浜殑鍏夋潫钀藉湪鍞辩墖浣嶇郊钀ョ┛閫忚儗鏅氱珛浣?*/
.vinyl-player::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 520px;
    height: 600px;
    background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.12) 50%, transparent 80%);
    pointer-events: none;
    z-index: 0;
}

/* 片 +  */
.vinyl-disc-wrapper {
    position: relative;
    width: var(--vp-disc-size);
    height: var(--vp-disc-size);
    flex-shrink: 0;
    z-index: 1;
}

/* 诮片 */
.vinyl-disc {
    --vinyl-accent: #667eea;
    width: var(--vp-disc-size);
    height: var(--vp-disc-size);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow:
        0 0 0 3px rgba(255,255,255,0.06),
        0 0 0 6px rgba(0,0,0,0.5),
        0 0 0 9px rgba(255,255,255,0.04),
        0 20px 60px rgba(0,0,0,0.6),
        0 0 80px rgba(0,0,0,0.4);
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease;
    cursor: pointer;
    z-index: 1;
}

/* 鍞辩墖澶栧湀閲戝睘?*/
.vinyl-disc::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15) 0%, transparent 50%),
        radial-gradient(circle, #111 60%, #1a1a1a 60.5%, #222 61%, #0a0a0a 100%);
}

/* 片 */
.vinyl-grooves {
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    background:
        repeating-radial-gradient(
            circle at center,
            transparent 28px,
            rgba(255,255,255,0.025) 29px,
            transparent 30px
        );
    pointer-events: none;
}

/* 鍞辩墖灏侀潰娓愬彉濉?*/
.vinyl-disc::after {
    content: '';
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 50%),
        radial-gradient(circle at 35% 35%, rgba(255,255,255,0.12) 0%, transparent 60%),
        var(--vinyl-accent, #667eea);
    z-index: 0;
    pointer-events: none;
}

/* 鍞辩墖涓挎爣 */
.vinyl-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 2px 6px rgba(255,255,255,0.08),
        inset 0 -2px 6px rgba(0,0,0,0.4),
        0 0 0 2px rgba(255,255,255,0.05),
        0 4px 16px rgba(0,0,0,0.5);
    z-index: 2;
}

.vinyl-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.vinyl-label-text {
    font-size: 9px;
    font-weight: 900;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
}

.vinyl-label-sub {
    font-size: 7px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.05em;
}

/* 鍞辩墖涓?*/
.vinyl-center::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #333;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
}

/* 片转 */
.vinyl-disc.is-playing {
    animation: vinylSpin 2s linear infinite;
    box-shadow:
        0 0 0 3px rgba(255,255,255,0.06),
        0 0 0 6px rgba(0,0,0,0.5),
        0 0 0 9px rgba(255,255,255,0.04),
        0 20px 60px rgba(0,0,0,0.6),
        0 0 80px rgba(0,0,0,0.4),
        0 0 40px var(--vp-accent-glow);
}

@keyframes vinylSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* 鎾斾俊鎭?*/
.vinyl-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
    z-index: 2;
    width: 100%;
}

.vinyl-track-category {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--vp-accent);
    text-transform: uppercase;
    opacity: 0.9;
}

.vinyl-track-title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.vinyl-track-artist {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin: 0;
    font-weight: 400;
}

/* 杩涘害?*/
.vinyl-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 760px;
    z-index: 2;
}

.vinyl-time {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 32px;
    font-weight: 500;
}

.vinyl-time-current { text-align: right; }
.vinyl-time-total { text-align: left; }

.vinyl-progress-bar {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    transition: height 0.25s ease, background 0.25s ease;
}

.vinyl-progress-bar:hover {
    height: 5px;
    background: rgba(255,255,255,0.15);
}

.vinyl-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--vp-accent), rgba(255,255,255,0.8));
    border-radius: 2px;
    transition: width 0.15s linear;
    box-shadow: 0 0 8px var(--vp-accent-glow);
}

.vinyl-progress-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px var(--vp-accent-glow), 0 2px 6px rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.vinyl-progress-bar:hover .vinyl-progress-thumb {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}

/* 鎾旀帶鍒舵寜閽?*/
.vinyl-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex-wrap: nowrap;
    z-index: 2;
}

.vinyl-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 14px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.vinyl-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    transform: translateY(-3px);
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.35);
}

.vinyl-btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.vinyl-btn-prev,
.vinyl-btn-next {
    width: 36px;
    height: 36px;
    font-size: 12px;
}

.vinyl-btn-play {
    width: 52px;
    height: 52px;
    font-size: 18px;
    background: var(--vp-accent);
    color: #fff;
    box-shadow:
        0 6px 18px var(--vp-accent-glow),
        0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

.vinyl-btn-play:hover {
    background: var(--vp-accent);
    transform: translateY(-3px);
    box-shadow:
        0 12px 28px var(--vp-accent-glow),
        0 2px 6px rgba(0, 0, 0, 0.3);
}

.vinyl-btn-play:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px var(--vp-accent-glow);
}

/* 涌 */
.vinyl-extras {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 2;
}

.vinyl-btn-shuffle,
.vinyl-btn-repeat {
    width: 34px;
    height: 34px;
    font-size: 11px;
    border-radius: 50%;
}

.vinyl-btn-shuffle.is-active,
.vinyl-btn-repeat.is-active {
    background: rgba(255, 255, 255, 0.18);
    color: var(--vp-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.vinyl-volume {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.5);
    font-size: 12px;
}

.vinyl-volume i {
    font-size: 12px;
    cursor: pointer;
    transition: color 0.2s;
}

.vinyl-volume i:hover {
    color: #fff;
}

.vinyl-volume-slider {
    width: 80px;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.12);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    transition: height 0.2s;
}

.vinyl-volume-slider:hover {
    height: 5px;
}

.vinyl-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.8);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    transition: transform 0.15s ease, background 0.15s ease;
}

.vinyl-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.3);
    background: #fff;
}

.vinyl-volume-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.8);
    cursor: pointer;
    border: none;
}

/* 闊冲寲鏉?*/
.vinyl-visualizer {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 28px;
    z-index: 2;
}

.viz-bar {
    width: 4px;
    min-height: 3px;
    background: linear-gradient(to top, var(--vp-accent), rgba(255,255,255,0.6));
    border-radius: 2px;
    opacity: 0.7;
    transition: height 0.12s ease, opacity 0.12s ease;
}

.viz-bar:nth-child(1) { height: 6px; }
.viz-bar:nth-child(2) { height: 10px; }
.viz-bar:nth-child(3) { height: 16px; }
.viz-bar:nth-child(4) { height: 22px; }
.viz-bar:nth-child(5) { height: 14px; }
.viz-bar:nth-child(6) { height: 8px; }
.viz-bar:nth-child(7) { height: 18px; }
.viz-bar:nth-child(8) { height: 12px; }

.viz-bar.is-playing {
    animation: vizPulse 0.6s ease-in-out infinite alternate;
}

.viz-bar:nth-child(1) { animation-delay: 0s; }
.viz-bar:nth-child(2) { animation-delay: 0.07s; }
.viz-bar:nth-child(3) { animation-delay: 0.14s; }
.viz-bar:nth-child(4) { animation-delay: 0.21s; }
.viz-bar:nth-child(5) { animation-delay: 0.1s; }
.viz-bar:nth-child(6) { animation-delay: 0.28s; }
.viz-bar:nth-child(7) { animation-delay: 0.18s; }
.viz-bar:nth-child(8) { animation-delay: 0.05s; }

@keyframes vizPulse {
    0%   { transform: scaleY(0.3); opacity: 0.5; }
    100% { transform: scaleY(1); opacity: 1; }
}

.vinyl-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.vinyl-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-primary);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.vinyl-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.3);
}

.vinyl-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-primary);
    cursor: pointer;
    border: none;
}

/* =========================================================
 * 鎾旈槦鍒?
    border-radius: 3px;
    opacity: 0.6;
    transition: height 0.1s ease;
}

/* =========================================================
 * 鎾旈槦鍒?
 * ========================================================= */

.audio-playlist {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.audio-playlist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--divider);
    margin-bottom: 12px;
    flex-shrink: 0;
}

.audio-playlist-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.audio-playlist-count {
    font-size: 12px;
    color: var(--text-muted);
}

.audio-playlist-items {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

.audio-playlist-items {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.audio-playlist-items::-webkit-scrollbar { width: 4px; }
.audio-playlist-items::-webkit-scrollbar-track { background: transparent; }
.audio-playlist-items::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* 鍒楄〃?*/
.audio-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all var(--transition);
    margin-bottom: 2px;
}

.audio-list-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.audio-list-item.is-current {
    background: rgba(255, 255, 255, 0.07);
    border-left: 2px solid var(--accent-primary);
}

.audio-list-cover {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}

.audio-list-num {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    position: relative;
    z-index: 1;
}

.audio-list-play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition);
}

.audio-list-item:hover .audio-list-play-overlay { opacity: 1; }
.audio-list-item.is-current .audio-list-play-overlay { opacity: 1; }

.audio-list-play-overlay i {
    color: white;
    font-size: 14px;
}

.audio-list-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.audio-list-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audio-list-meta {
    display: flex;
    gap: 8px;
    align-items: center;
}

.audio-list-tag,
.audio-list-cat {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
}

.audio-list-item.is-current .audio-list-tag,
.audio-list-item.is-current .audio-list-cat {
    background: rgba(255,255,255,0.1);
}

.audio-list-artist {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
    display: none;
}

.audio-list-duration {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.audio-list-actions {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--transition);
}

.audio-list-item:hover .audio-list-actions { opacity: 1; }

.audio-list-action-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 11px;
    transition: all var(--transition);
}

.audio-list-action-btn:hover {
    background: rgba(255,255,255,0.12);
    color: var(--text-primary);
}

/* 绌虹姸?*/
.audio-playlist-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--text-muted);
}

.audio-playlist-empty i { font-size: 40px; opacity: 0.4; }
.audio-playlist-empty p { margin: 0; font-size: 13px; }

/* ===== audio-full-mode 示 ===== */
body.workshop-full-mode.audio-full-mode .audio-page {
    display: flex;
}

/* ===== 鍝嶅簲?===== */
@media (max-width: 1100px) {
    .audio-page-left { padding: 90px 32px 32px; gap: 28px; }
    .audio-page-right { padding: 90px 32px 32px; gap: 24px; }
    .vinyl-disc-wrapper { --vp-disc-size: 220px; }
    .vinyl-disc { width: 220px; height: 220px; }
    .vinyl-center { width: 68px; height: 68px; }
    .vinyl-label-text { font-size: 8px; }
}

@media (max-width: 860px) {
    .audio-page { flex-direction: column; height: auto; overflow-y: auto; }
    .audio-page-left {
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid var(--divider);
        max-height: 60vh;
    }
    .audio-page-right { padding: 24px 20px 32px; overflow: visible; gap: 24px; }
    .vinyl-disc-wrapper { --vp-disc-size: 200px; }
    .vinyl-disc { width: 200px; height: 200px; }
    .vinyl-center { width: 60px; height: 60px; }
}

@media (max-width: 540px) {
    .audio-page-left { padding: 80px 16px 20px; }
    .audio-page-right { padding: 24px 16px 32px; }
    .vinyl-disc-wrapper { --vp-disc-size: 180px; }
    .vinyl-disc { width: 180px; height: 180px; }
    .vinyl-center { width: 52px; height: 52px; }
    .vinyl-controls { gap: 12px; }
    .vinyl-visualizer { display: none; }
    .vinyl-progress { max-width: 100%; }
}

/* =========================================================
 * 浣滃搧瀛愰〉闈间笌棰戦〉 / 鐑?/ 缇庢湳?/ 闊虫晥椤典繚鎸佷竴鑷存牸锛?
 * ========================================================= */

/* 浣滃搧鍙屾爮甯冨眬锛堥粯璁ら殣钘忥紝杩涘叆 showcase-full-mode 鍚庢墠鏄剧ず?*/
.showcase-page {
    display: none;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* ===== 宸︿晶锛?+ 鎼滅储 + 绛?+ 灏忔父?===== */
.showcase-page-left {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    padding: 90px 40px 40px;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--divider);
    gap: 24px;
}

/* 鑷箟婊氬姩鏉?*/
.showcase-page-left {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.showcase-page-left::-webkit-scrollbar { width: 4px; }
.showcase-page-left::-webkit-scrollbar-track { background: transparent; }
.showcase-page-left::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.showcase-page-left::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* 鎼滅储?*/
.showcase-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--divider);
    border-radius: var(--radius-full);
    transition: all var(--transition);
}

.showcase-search-box:focus-within {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
}

.showcase-search-box > i {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.showcase-search-box input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 12px;
    color: var(--text-primary);
    font-family: inherit;
    min-width: 0;
}

.showcase-search-box input::placeholder { color: var(--text-muted); }

.showcase-search-clear {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition);
    flex-shrink: 0;
}

.showcase-search-clear:hover { color: var(--text-primary); }

/* 嗟?*/
.showcase-nav {
    flex-shrink: 0;
}

/* 骞冲彴绛?*/
.showcase-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.showcase-filters .section-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.showcase-platform-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.showcase-platform-chip {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--divider);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
}

.showcase-platform-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.16);
}

.showcase-platform-chip.is-active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
    font-weight: 600;
}

/* 冒钮 */
.showcase-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--divider);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    align-self: flex-start;
}

.showcase-reset i { font-size: 10px; }

.showcase-reset:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ===== 也啵浩氛故?===== */
.showcase-page-right {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    padding: 90px 40px 60px;
    overflow: hidden;
    position: relative;
}

/* 鑷箟婊氬姩鏉?*/
.showcase-page-right {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.showcase-page-right::-webkit-scrollbar { width: 6px; }
.showcase-page-right::-webkit-scrollbar-track { background: transparent; }
.showcase-page-right::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.showcase-page-right::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* 椤堕儴宸ュ叿?*/
.showcase-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 28px 0 24px;
    margin-bottom: 20px;
    border-bottom: 1px dashed var(--border-light);
    flex-shrink: 0;
}

.showcase-toolbar-info {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
    flex: 1;
}

.showcase-section-tag {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-primary);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.showcase-current-category {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0;
}

.showcase-current-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
    width: 100%;
    flex-basis: 100%;
}

.showcase-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.showcase-current-count {
    font-size: 13px;
    color: var(--text-muted);
}

.showcase-current-count strong {
    color: var(--text-primary);
    font-weight: 700;
}

/*  */
.showcase-sort {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.showcase-sort select {
    appearance: none;
    -webkit-appearance: none;
    padding: 8px 28px 8px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    transition: all var(--transition);
}

.showcase-sort select:hover {
    background: rgba(0, 0, 0, 1);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

.showcase-sort select:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.2);
}

.showcase-sort > i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    color: var(--text-muted);
    pointer-events: none;
}

/* 图谢 */
.showcase-view-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--divider);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
}

.showcase-view-btn:hover {
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}

.showcase-view-btn.is-active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

/* 浣滃搧鍐呭尯鍩?*/
.showcase-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    margin-right: -4px;
}

.showcase-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.showcase-content::-webkit-scrollbar { width: 6px; }
.showcase-content::-webkit-scrollbar-track { background: transparent; }
.showcase-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.showcase-content::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* 品 */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}

.showcase-grid[data-view="list"] {
    grid-template-columns: 1fr;
    gap: 16px;
}

/* 戏片 */
.game-card {
    position: relative;
    background: var(--bg-primary);
    border: 1px solid var(--divider);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
    animation: fadeInUp 0.4s ease both;
}

.game-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.showcase-grid[data-view="list"] .game-card {
    flex-direction: row;
}

.showcase-grid[data-view="list"] .game-card-cover {
    flex: 0 0 240px;
    aspect-ratio: auto;
}

/* 灏侀潰?*/
.game-card-cover {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 12px;
}

.game-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition);
}

.game-card:hover .game-card-overlay { opacity: 1; }

.game-card-actions {
    display: flex;
    gap: 8px;
}

.game-action-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    color: #1a1a1a;
    cursor: pointer;
    transition: all var(--transition);
    transform: translateY(8px);
    font-size: 13px;
}

.game-card:hover .game-action-btn { transform: translateY(0); }
.game-action-btn:nth-child(1) { transition-delay: 0s; }
.game-action-btn:nth-child(2) { transition-delay: 0.05s; }
.game-action-btn:nth-child(3) { transition-delay: 0.1s; }

.game-action-btn:hover {
    background: var(--text-primary);
    color: var(--bg-primary);
    transform: translateY(-2px) !important;
}

.game-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.05em;
}

.game-card-platform {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(6px);
    border-radius: 6px;
    color: rgba(255,255,255,0.8);
    font-size: 12px;
}

/* 片息 */
.game-card-info {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.showcase-grid[data-view="list"] .game-card-info {
    padding: 16px 20px;
    justify-content: center;
}

.game-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.game-card-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    color: #f59e0b;
}

.game-card-rating span {
    color: var(--text-muted);
    margin-left: 4px;
    font-size: 11px;
}

.game-card-rating .far { color: rgba(255,255,255,0.2); }

.game-card-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.author-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.author-name {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-card-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.showcase-grid[data-view="list"] .game-card-desc {
    -webkit-line-clamp: 1;
}

.game-card-stats {
    display: flex;
    gap: 14px;
    margin-top: 2px;
}

.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

.stat-item i { font-size: 10px; }

/* 鍔犺浇鏇?*/
.showcase-load-more {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    padding-top: 24px;
    flex-shrink: 0;
}

.showcase-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--divider);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
}

.showcase-load-more-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

/* 绌虹姸?*/
.showcase-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 80px 20px;
    color: var(--text-muted);
}

.showcase-empty i { font-size: 48px; opacity: 0.4; }
.showcase-empty p { margin: 0; font-size: 14px; }

/* ===== showcase-full-mode 示 ===== */
body.workshop-full-mode.showcase-full-mode .showcase-page {
    display: flex;
}

body.workshop-full-mode.history-full-mode .history-page {
    display: flex;
}

/* ===== 鍝嶅簲?===== */
@media (max-width: 1100px) {
    .showcase-page-left { padding: 90px 32px 32px; gap: 20px; }
    .showcase-page-right { padding: 90px 32px 40px; }
    .showcase-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
}

@media (max-width: 860px) {
    .showcase-page { flex-direction: column; height: auto; overflow-y: auto; }
    .showcase-page-left {
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid var(--divider);
        max-height: 60vh;
    }
    .showcase-page-right { padding: 24px 20px 32px; overflow: visible; }
    .showcase-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
}

@media (max-width: 540px) {
    .showcase-page-left { padding: 80px 16px 20px; }
    .showcase-page-right { padding: 24px 16px 32px; }
    .showcase-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
    .showcase-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
    .showcase-toolbar-actions { justify-content: flex-start; }
}

/* 鍘嗗彶椤甸潰璺熼殢 showcase-page 鐨勫搷搴斿紡鏂?*/
@media (max-width: 1100px) {
    .history-page-left { padding: 90px 32px 32px; gap: 20px; }
    .history-page-right { padding: 90px 32px 40px; }
}

@media (max-width: 860px) {
    .history-page { flex-direction: column; height: auto; overflow-y: auto; }
    .history-page-left {
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid var(--divider);
        max-height: 60vh;
    }
    .history-page-right { padding: 24px 20px 32px; overflow: visible; }
}

@media (max-width: 540px) {
    .history-page-left { padding: 80px 16px 20px; }
    .history-page-right { padding: 24px 16px 32px; }
    .history-item { flex-wrap: wrap; }
    .history-item-thumb { width: 100%; height: 140px; }
    .history-item-info { width: 100%; }
    .history-delete-btn { opacity: 1; position: absolute; top: 8px; right: 8px; }
}

/* =========================================================
   鍘嗗彶瀛愰〉闈㈡牱?
   ========================================================= */

/* 鍘嗗彶椤甸潰瀹瑰櫒锛堢敱 body.history-full-mode 鎺у埗鏄剧ず?*/
.history-page {
    display: none;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* 宸︽爮锛氫笌 showcase-page-left 鍏变韩鍩哄竷灞€锛宧istory 棰濊ˉ鍏?*/
.history-page-left {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    padding: 90px 40px 40px;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--divider);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.history-page-left::-webkit-scrollbar { width: 4px; }
.history-page-left::-webkit-scrollbar-track { background: transparent; }
.history-page-left::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.history-page-left::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* 鍙虫爮锛氫笌 showcase-page-right 鍏变韩鍩哄竷灞€ */
.history-page-right {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    padding: 90px 40px 60px;
    overflow: hidden;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.history-page-right::-webkit-scrollbar { width: 6px; }
.history-page-right::-webkit-scrollbar-track { background: transparent; }
.history-page-right::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.history-page-right::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* 缁熷崱鐗?*/
.history-stats-card {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--divider);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}
.history-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.history-stat-num {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}
.history-stat-label {
    font-size: 11px;
    color: var(--text-muted);
}
.history-stat-divider {
    width: 1px;
    height: 32px;
    background: var(--divider);
}

/* 鏃ユ湡绛?*/
.history-filters {
    margin-bottom: 20px;
}
.history-date-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.history-date-chip {
    padding: 6px 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--divider);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}
.history-date-chip:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}
.history-date-chip.is-active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

/* 谢 */
.history-groupby {
    margin-bottom: 24px;
}
.history-groupby-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.history-groupby-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--divider);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    text-align: left;
}
.history-groupby-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--text-primary);
}
.history-groupby-btn.is-active {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
    color: #818cf8;
}

/* 钮 */
.history-actions {
    margin-bottom: 28px;
}
.history-action-btn {
    width: 100%;
    padding: 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--divider);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.history-action-btn--danger:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
}

/* 鎺ㄨ崘鍖烘爣?*/
.recommended-header {
    margin-bottom: 12px;
}
.recommended-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.recommended-refresh-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--divider);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}
.recommended-refresh-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
    color: var(--accent);
}
.recommended-refresh-btn.is-loading {
    animation: spin 0.8s linear infinite;
    pointer-events: none;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.recommended-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* 萍斜 */
.recommended-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.recommended-card {
    display: flex;
    gap: 10px;
    padding: 8px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: all var(--transition);
}
.recommended-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--divider);
}
.recommended-cover {
    width: 80px;
    height: 56px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.recommended-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity var(--transition);
}
.recommended-card:hover .recommended-overlay { opacity: 1; }
.recommended-overlay i {
    color: #fff;
    font-size: 16px;
}
.recommended-cat {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
}
.recommended-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.recommended-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recommended-meta {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.recommended-meta .mini-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.recommended-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.recommended-rating {
    color: #fbbf24;
    font-size: 10px;
}
.recommended-rating i {
    margin-right: 1px;
}
.recommended-views {
    color: var(--text-muted);
    font-size: 10px;
}
.recommended-views i {
    margin-right: 2px;
}

/* 史斜 */
.history-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.history-header {
    margin-bottom: 24px;
}
.history-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.history-title i {
    color: var(--accent);
}

/*  */
.history-group-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.history-group-label--creator {
    font-size: 12px;
}
.history-group-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}
.history-group-count {
    font-weight: 400;
    font-size: 11px;
    color: var(--text-muted);
}
.creator-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    vertical-align: middle;
}
.history-group-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 史录 */
.history-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    position: relative;
    transition: all var(--transition);
}
.history-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--divider);
}
.history-item--done {
    opacity: 0.7;
}
.history-item--done:hover {
    opacity: 1;
}

.history-item-thumb {
    width: 140px;
    height: 84px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
.history-item-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity var(--transition);
}
.history-item:hover .history-item-overlay { opacity: 1; }
.history-item-overlay i {
    color: #fff;
    font-size: 22px;
}
.history-item-duration {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
}
.history-item-resume {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--accent);
    color: var(--bg-primary);
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 600;
}

.history-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.history-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.history-item-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
}
.history-item-author {
    display: flex;
    align-items: center;
    gap: 5px;
}
.history-item-cat {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 11px;
}
.history-item-stats {
    display: flex;
    gap: 14px;
    font-size: 11px;
    color: var(--text-muted);
}
.history-item-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.history-delete-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    opacity: 0;
}
.history-item:hover .history-delete-btn { opacity: 1; }
.history-delete-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* 杩涘害?*/
.history-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.history-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 0 0 0 var(--radius-lg);
    transition: width 0.3s;
}

/* 绌虹姸?*/
.history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    color: var(--text-muted);
}
.history-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.history-empty-icon i {
    font-size: 32px;
    color: var(--text-muted);
}
.history-empty h3 {
    font-size: 18px;
    color: var(--text-primary);
    margin: 0 0 8px;
}
.history-empty p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 24px;
}
.history-empty-btn {
    padding: 10px 24px;
    border-radius: var(--radius-full);
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}
.history-empty-btn:hover {
    background: var(--accent);
    color: #fff;
}

/* mini avatar */
.history-page-left .mini-avatar,
.history-page-right .mini-avatar,
.watchlater-page-left .mini-avatar,
.watchlater-page-right .mini-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    vertical-align: middle;
}

/* =========================================================
   绋嶅悗鍐嶇湅锛堟敹钘忥級瀛愰〉闈㈡牱?
   ========================================================= */

.watchlater-page {
    display: none;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/*  */
.watchlater-page-left {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    padding: 90px 40px 40px;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--divider);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.watchlater-page-left::-webkit-scrollbar { width: 4px; }
.watchlater-page-left::-webkit-scrollbar-track { background: transparent; }
.watchlater-page-left::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.watchlater-page-left::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/*  */
.watchlater-page-right {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    padding: 90px 40px 60px;
    overflow: hidden;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.watchlater-page-right::-webkit-scrollbar { width: 6px; }
.watchlater-page-right::-webkit-scrollbar-track { background: transparent; }
.watchlater-page-right::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.watchlater-page-right::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* 缁熷崱鐗?*/
.watchlater-stats-card {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--divider);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}
.watchlater-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.watchlater-stat-num {
    font-size: 22px;
    font-weight: 700;
    color: var(--accent);
}
.watchlater-stat-label {
    font-size: 11px;
    color: var(--text-muted);
}
.watchlater-stat-divider {
    width: 1px;
    height: 30px;
    background: var(--divider);
}

/* 鍒嗙被绛?*/
.watchlater-filters {
    margin-bottom: 20px;
}
.watchlater-category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.watchlater-category-chip {
    padding: 6px 12px;
    border-radius: var(--radius-full);
    border: 1px solid var(--divider);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition);
}
.watchlater-category-chip:hover {
    background: var(--card-bg-hover);
    border-color: var(--border-medium);
    color: var(--text-primary);
}
.watchlater-category-chip.is-active {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--bg-primary);
    font-weight: 600;
}

/* 式 */
.watchlater-sort {
    margin-bottom: 20px;
}
.watchlater-sort-btns {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.watchlater-sort-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition);
    text-align: left;
}
.watchlater-sort-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}
.watchlater-sort-btn.is-active {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
    color: var(--accent);
}
.watchlater-sort-btn i {
    width: 16px;
    text-align: center;
    font-size: 12px;
}

/* 钮 */
.watchlater-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
}
.watchlater-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--divider);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition);
}
.watchlater-action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}
.watchlater-action-btn--secondary:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    color: var(--accent);
}
.watchlater-action-btn--danger:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/*  */
.watchlater-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 0 24px;
    border-bottom: 1px solid var(--divider);
    margin-bottom: 20px;
}
.watchlater-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}
.watchlater-title i {
    color: var(--accent);
}
.watchlater-count-badge {
    font-size: 12px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 12px;
    border-radius: var(--radius-full);
}

/* 绌虹姸?*/
.watchlater-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    text-align: center;
}
.watchlater-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}
.watchlater-empty-icon i {
    font-size: 32px;
    color: var(--accent);
}
.watchlater-empty h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.watchlater-empty p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 24px;
}
.watchlater-empty-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition);
}
.watchlater-empty-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* 詹 */
.watchlater-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    flex: 1;
}

/* 詹乜片 */
.watchlater-card {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--divider);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition);
    animation: fadeInUp 0.3s ease both;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
}
.watchlater-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.watchlater-thumbnail {
    position: relative;
    width: 120px;
    height: 84px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.watchlater-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition);
}
.watchlater-card:hover .watchlater-overlay {
    opacity: 1;
}
.watchlater-overlay i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
    transition: all var(--transition);
}
.watchlater-card-type {
    position: absolute;
    top: 4px;
    left: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    border-radius: var(--radius-sm);
    color: white;
    font-size: 9px;
    font-weight: 500;
}
.watchlater-card-type i { font-size: 8px; }
.watchlater-card-duration {
    position: absolute;
    bottom: 4px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 5px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-sm);
    color: white;
    font-size: 10px;
    font-weight: 500;
}
.watchlater-card-duration i { font-size: 8px; }
.watchlater-remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    opacity: 0;
}
.watchlater-card:hover .watchlater-remove-btn {
    opacity: 1;
}
.watchlater-remove-btn:hover {
    background: rgba(239, 68, 68, 0.85);
    color: #fff;
}
.watchlater-info {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
    min-width: 0;
}
.watchlater-card-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
.watchlater-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
}
.watchlater-author {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.watchlater-author .mini-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.watchlater-card-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--text-muted);
}
.watchlater-rating {
    color: #f59e0b;
}
.watchlater-rating i {
    font-size: 9px;
    margin-right: 1px;
}
.watchlater-views, .watchlater-date {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.watchlater-views i, .watchlater-date i {
    font-size: 10px;
}

/* body 示 */
body.workshop-full-mode.watchlater-full-mode .watchlater-page {
    display: flex;
}

/* 鍝嶅簲?*/
@media (max-width: 1100px) {
    .watchlater-page-left { padding: 90px 32px 32px; gap: 20px; }
    .watchlater-page-right { padding: 90px 32px 40px; }
}

@media (max-width: 860px) {
    .watchlater-page { flex-direction: column; height: auto; overflow-y: auto; }
    .watchlater-page-left {
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid var(--divider);
        max-height: 60vh;
    }
    .watchlater-page-right { padding: 24px 20px 32px; overflow: visible; }
}

@media (max-width: 540px) {
    .watchlater-page-left { padding: 80px 16px 20px; }
    .watchlater-page-right { padding: 24px 16px 32px; }
    .watchlater-thumbnail { width: 100px; height: 70px; }
}

/* =========================================================
 * 娣辫壊妯″紡瑕嗙洊 - 閽堢〖鐮佽壊鐨勭粍浠?
 * ========================================================= */

/* 澶村儚杈?*/
[data-theme="dark"] .top-nav__avatar {
    border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .top-nav__avatar:hover {
    border-color: rgba(255, 255, 255, 0.3);
}
[data-theme="dark"] .notification-panel__avatar {
    border-color: rgba(255, 255, 255, 0.08);
}

/* 通知 */
[data-theme="dark"] .notification-panel {
    background: rgba(20, 20, 20, 0.95);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}
[data-theme="dark"] .notification-panel__header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .notification-panel__count {
    background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .notification-panel__list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .notification-panel__item:hover {
    background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .notification-panel__item.is-unread {
    background: rgba(255, 255, 255, 0.02);
}
[data-theme="dark"] .notification-panel__footer {
    border-top-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .notification-panel__view-all {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .notification-panel__view-all:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* 没说 */
[data-theme="dark"] .user-menu {
    background: rgba(20, 20, 20, 0.95);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}
[data-theme="dark"] .user-menu__header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .user-menu__avatar {
    background: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .user-menu__divider {
    background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .user-menu__item:hover {
    background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .user-menu__mini-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .user-menu__chip {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}
[data-theme="dark"] .user-menu__chip:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

/* / */
[data-theme="dark"] .command-palette {
    background: rgba(20, 20, 20, 0.95);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}

/* 影 */
[data-theme="dark"] .top-nav__inner {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* 瑙嗗崱鐗?*/
[data-theme="dark"] .video-card {
    background: var(--bg-primary);
    border-color: rgba(255, 255, 255, 0.06);
}

/* 鐑?*/
[data-theme="dark"] .trending-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--divider);
}
[data-theme="dark"] .trending-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--divider);
}
[data-theme="dark"] .trending-card:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* 绋嶅悗鍐嶇湅?*/
[data-theme="dark"] .watchlater-page-right {
    background: var(--bg-secondary);
}

/*  */
[data-theme="dark"] .bg-minimal {
    background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(120, 119, 199, 0.15), transparent);
}


/* =========================================================
 * 娴茬幓鐠冨竷灞€锛堟柟?B?
 * 浠呬綔鐢ㄤ簬銆屽伐鍧婁富椤碉細涓嶆敼鍙橀《閮ㄨ埢鏋勶紝涓嶅奖鍝?鐑?缇庢湳/闊虫晥绛夊瓙椤甸潰
 * ========================================================= */

/* 鐜荤拑娴蹭笓鐢ㄥ彉閲忥紙姣旈€氱敤鐜荤拑鏇达紝渚夸簬閫忓嚭鑳屾櫙鍏夋枒?*/
:root {
    --glass-island: rgba(255, 255, 255, 0.70);
    --glass-island-strong: rgba(255, 255, 255, 0.82);
    --glass-island-border: rgba(139, 92, 246, 0.22);
}

[data-theme="dark"] {
    --glass-island: rgba(24, 20, 42, 0.62);
    --glass-island-strong: rgba(30, 26, 52, 0.74);
    --glass-island-border: rgba(139, 92, 246, 0.40);
}

/* ---------- 椤甸潰鑳屾櫙锛氭繁绱?+ 鍏夌偣缃戞牸 ---------- */
.bg-minimal {
    background:
        radial-gradient(1100px 760px at 88% -8%, rgba(139, 92, 246, 0.16), transparent 58%),
        radial-gradient(900px 700px at -8% 108%, rgba(99, 102, 241, 0.13), transparent 55%),
        linear-gradient(165deg, #ffffff 0%, #f6f4fb 55%, #ece6fb 100%);
    overflow: hidden;
}

[data-theme="dark"] .bg-minimal {
    background:
        radial-gradient(1100px 760px at 88% -8%, rgba(139, 92, 246, 0.30), transparent 58%),
        radial-gradient(900px 700px at -8% 108%, rgba(99, 102, 241, 0.22), transparent 55%),
        linear-gradient(165deg, #0a0a0f 0%, #0d0b19 55%, #161028 100%);
}

.bg-minimal::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(139, 92, 246, 0.14) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 0.5;
    pointer-events: none;
}

[data-theme="dark"] .bg-minimal::before {
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
}

/* ---------- 页去实祝露浔?---------- */
body:not(.workshop-full-mode) .workshop-left {
    background: transparent;
    border-right: none;
}

body:not(.workshop-full-mode) .workshop-right {
    background: transparent;
}

/* ----------  Hero ---------- */
body:not(.workshop-full-mode) .workshop-left .workshop-hero {
    background: var(--glass-island);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    padding: 26px 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] body:not(.workshop-full-mode) .workshop-left .workshop-hero {
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---------- 宸︿晶鏉垮潡瀵艰埅锛氭诞宀涚幓?+ 閿欎綅 ---------- */
body:not(.workshop-full-mode) .workshop-left .workshop-nav-item {
    background: var(--glass-island);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] body:not(.workshop-full-mode) .workshop-left .workshop-nav-item {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* 涓変釜瀵艰埅椤归綈鎺掑垪锛堝凡绉?margin-top 閿欒惤?*/

body:not(.workshop-full-mode) .workshop-left .workshop-nav-item.is-active {
    border-color: var(--glass-island-border);
    background: var(--glass-island-strong);
    box-shadow: 0 14px 40px rgba(139, 92, 246, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] body:not(.workshop-full-mode) .workshop-left .workshop-nav-item.is-active {
    box-shadow: 0 16px 44px rgba(139, 92, 246, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---------- 喙ぼ?---------- */
body:not(.workshop-full-mode) .workshop-left .workshop-intro {
    background: var(--glass-island);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] body:not(.workshop-full-mode) .workshop-left .workshop-intro {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ---------- 鍙充晶 SECTION 鏍囷細鐜荤拑鍖栵紝閬垮厤绾櫧鍧?---------- */
body:not(.workshop-full-mode) .workshop-section-tag {
    background: var(--glass-island);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: var(--glass-border);
}

/* ---------- 鍙充晶銆屾柊浣滄帹鑽愬崱鐗囷細娴茬幓鐠?+ 閿欎綅 ---------- */
body:not(.workshop-full-mode) .workshop-card {
    background: var(--glass-island);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] body:not(.workshop-full-mode) .workshop-card {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body:not(.workshop-full-mode) .workshop-card:hover {
    border-color: var(--glass-island-border);
    box-shadow: 0 18px 44px rgba(139, 92, 246, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}


/* 涓绘墦鍗＄墖锛氭洿绐佸嚭鐨勬诞宀涜川?*/
body:not(.workshop-full-mode) .workshop-card--feature {
    border-color: var(--glass-island-border);
    box-shadow: 0 24px 60px rgba(139, 92, 246, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] body:not(.workshop-full-mode) .workshop-card--feature {
    box-shadow: 0 26px 64px rgba(139, 92, 246, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---------- 鍙充晶銆屾洿澶氬崱鐗囷細娴茬幓鐠冿紙涓婚〉鍐呭睍绀烘椂锛?---------- */
body:not(.workshop-full-mode) .workshop-more-card {
    background: var(--glass-island);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] body:not(.workshop-full-mode) .workshop-more-card {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body:not(.workshop-full-mode) .workshop-more-card:hover {
    border-color: var(--glass-island-border);
    box-shadow: 0 18px 44px rgba(139, 92, 246, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

body:not(.workshop-full-mode) .workshop-more-tag {
    background: var(--glass-island);
    border-color: var(--glass-border);
}

/* =========================================================
 * 娴蹭氦鍙?+ 鏌斿厜杈圭紭锛堢幓鐠冩嫙鎬佸己?路 鏂瑰悜 B 娣卞寲?
 * 诠页
 * ========================================================= */

/* 鏇村己纾ㄧ爞鐜荤拑 + 绱夋煍鍏夎竟缂橈紙鐩栧墠闈㈠熀鐜荤拑鏍峰紡?*/
body:not(.workshop-full-mode) .workshop-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.60));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.10),
        0 0 26px rgba(139, 92, 246, 0.10),
        0 16px 40px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] body:not(.workshop-full-mode) .workshop-card {
    background: linear-gradient(160deg, rgba(44, 38, 72, 0.80), rgba(26, 22, 48, 0.62));
    border: 1px solid rgba(139, 92, 246, 0.35);
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.16),
        0 0 30px rgba(139, 92, 246, 0.14),
        0 18px 44px rgba(0, 0, 0, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* 涓绘墦鍗★細鏌斿厜杈圭紭娴茶川鎰燂紙宸插彇娑堜氦鍙狅紝鍗＄墖瀹屽叏榻愶級 */
body:not(.workshop-full-mode) .workshop-card--feature {
    z-index: 2;
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.25),
        0 0 34px rgba(139, 92, 246, 0.18),
        0 24px 60px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] body:not(.workshop-full-mode) .workshop-card--feature {
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.30),
        0 0 40px rgba(139, 92, 246, 0.22),
        0 26px 64px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* 鍗＄墖瀵归綈锛堝凡鍒犻櫎鏂瑰悜 B 鐨勪笂涓嬮敊浣嶄綅绉伙紝鎭㈡暣榻愰┑鍏嬶級?
   宸插彇娑堜富鎵撳崱浜ゅ彔锛屽崱鐗囧畬鍏ㄩ綈鏃犻噸鍙?*/

/* 鎮佹椂娴埌鏈€涓婂眰锛屼究浜庣偣?*/
body:not(.workshop-full-mode) .workshop-card:hover { z-index: 6; }

/* =========================================================
 * 銆岄櫎浜嗚垹锛屽叾浠栧叏鏀规柟?B 娣卞寲 鈥?宸︿晶鏍忔诞宀涚粍?+ 鏉垮潡??+ 鑳屾櫙鍏夋枒
 * 诠页
 * ========================================================= */

/* ---------- 撸强 ---------- */
.bg-minimal::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(340px 340px at 20% 44%, rgba(139, 92, 246, 0.14), transparent 70%),
        radial-gradient(300px 300px at 74% 70%, rgba(99, 102, 241, 0.13), transparent 70%),
        radial-gradient(260px 260px at 52% 92%, rgba(168, 85, 247, 0.11), transparent 70%);
    filter: blur(24px);
}

[data-theme="dark"] .bg-minimal::after {
    background:
        radial-gradient(340px 340px at 20% 44%, rgba(139, 92, 246, 0.20), transparent 70%),
        radial-gradient(300px 300px at 74% 70%, rgba(99, 102, 241, 0.18), transparent 70%),
        radial-gradient(260px 260px at 52% 92%, rgba(168, 85, 247, 0.16), transparent 70%);
}

/* ---------- 宸︿晶 Hero锛氭洿澶ф洿鏈夊瓨鍦ㄦ劅鐨勬诞?---------- */
body:not(.workshop-full-mode) .workshop-left {
    justify-content: flex-start;   /* FOFU也啵?*/
}

body:not(.workshop-full-mode) .workshop-left .workshop-hero {
    padding: 34px 28px;
    border-radius: var(--radius-3xl);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.62));
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.12),
        0 0 34px rgba(139, 92, 246, 0.14),
        0 20px 48px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

[data-theme="dark"] body:not(.workshop-full-mode) .workshop-left .workshop-hero {
    background: linear-gradient(160deg, rgba(46, 40, 76, 0.86), rgba(28, 24, 50, 0.66));
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.22),
        0 0 40px rgba(139, 92, 246, 0.18),
        0 22px 54px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

body:not(.workshop-full-mode) .workshop-left .hero-title {
    font-size: clamp(2rem, 4vw, 3rem);   /* 涓庣儹闂ㄩ〉銆孴RENDING 鐑椼€嶆爣棰樺瓧鍙蜂竴?*/
    letter-spacing: -0.02em;
}

body:not(.workshop-full-mode) .workshop-left .hero-title .ink-accent {
    background: linear-gradient(120deg, #8b5cf6, #6366f1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------- 宸︿晶鏉垮潡鏍囷細鐜荤拑鑳?---------- */
body:not(.workshop-full-mode) .workshop-left .section-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--glass-island);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body:not(.workshop-full-mode) .workshop-left .section-label::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8b5cf6;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.9);
    flex-shrink: 0;
}

/* ---------- 榈间浮 ---------- */
body:not(.workshop-full-mode) .workshop-left .workshop-nav-item {
    border-radius: var(--radius-2xl);
    padding: 22px 20px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.60));
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.08),
        0 0 22px rgba(139, 92, 246, 0.08),
        0 14px 34px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

[data-theme="dark"] body:not(.workshop-full-mode) .workshop-left .workshop-nav-item {
    background: linear-gradient(160deg, rgba(44, 38, 72, 0.80), rgba(26, 22, 48, 0.62));
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.14),
        0 0 26px rgba(139, 92, 246, 0.10),
        0 16px 38px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* 涓変釜瀵艰埅椤归綈鎺掑垪锛堝凡绉?transform 閿欎綅浣嶇Щ涓庢棆杞?*/

/* 娲婚」锛氱传鑹叉煍鍏夛紝娴炬洿楂?*/
body:not(.workshop-full-mode) .workshop-left .workshop-nav-item.is-active {
    border-color: var(--glass-island-border);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.70));
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.22),
        0 0 34px rgba(139, 92, 246, 0.20),
        0 18px 44px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] body:not(.workshop-full-mode) .workshop-left .workshop-nav-item.is-active {
    background: linear-gradient(160deg, rgba(54, 46, 88, 0.90), rgba(34, 28, 60, 0.72));
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.30),
        0 0 40px rgba(139, 92, 246, 0.24),
        0 20px 48px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* ---------- 宸︿晶宸ュ潑浠嬬粛锛氱幓鐠冩诞?+ 缁熼樁閿欎綅 ---------- */
body:not(.workshop-full-mode) .workshop-left .workshop-intro {
    border-radius: var(--radius-2xl);
    padding: 22px 20px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.58));
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.08),
        0 0 24px rgba(139, 92, 246, 0.08),
        0 14px 34px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

[data-theme="dark"] body:not(.workshop-full-mode) .workshop-left .workshop-intro {
    background: linear-gradient(160deg, rgba(44, 38, 72, 0.80), rgba(26, 22, 48, 0.62));
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.14),
        0 0 28px rgba(139, 92, 246, 0.10),
        0 16px 38px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* 缁熸暟瀛楁洿閱?*/
body:not(.workshop-full-mode) .workshop-left .workshop-intro-stat-num {
    font-size: 26px;
    font-weight: 800;
    background: linear-gradient(120deg, #8b5cf6, #6366f1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 缁熷崱锛氱幓鐠冨皬鍗?+ 闃堕敊浣嶏紙韪忕煶娴?*/
body:not(.workshop-full-mode) .workshop-left .workshop-intro-stat {
    background: var(--glass-island);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 12px 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] body:not(.workshop-full-mode) .workshop-left .workshop-intro-stat {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* 缁熷崱榻愭帓鍒楋紙宸茬Щ闄ら樁姊斾綅锛?*/

/* ---------- 鍙充晶鏉垮潡鏍囷細娓愬彉寮?---------- */
body:not(.workshop-full-mode) .workshop-section-title {
    background: linear-gradient(120deg, #8b5cf6, #6366f1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

[data-theme="dark"] body:not(.workshop-full-mode) .workshop-section-title {
    background: linear-gradient(120deg, #a78bfa, #818cf8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------- 鍙充晶鏉垮潡鑴氭敞锛氭煡鐪嬪叏閮ㄦ柊??鐜荤拑鑳跺泭 ---------- */
body:not(.workshop-full-mode) .workshop-section-foot {
    margin-top: 26px;
}

body:not(.workshop-full-mode) .workshop-foot-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--glass-island);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    font-weight: 600;
    color: var(--text-primary);
}

[data-theme="dark"] body:not(.workshop-full-mode) .workshop-foot-link {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body:not(.workshop-full-mode) .workshop-foot-link:hover {
    border-color: var(--glass-island-border);
    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transform: translateY(-2px);
}

body:not(.workshop-full-mode) .workshop-foot-tip {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

/* =========================================================
 * 榛戣壊涓昏壊璋冿紙鐢ㄦ埛鎸囧畾锛氬幓鎺夌传鑹诧紝鏁翠綋榛戣壊 + 涓ч摱鐧斤級
 * 全郑莶诠页
 * ========================================================= */

/* 鈥?鐜荤拑杈瑰彉閲忥細绱???鈥?*/
:root {
    --glass-island-border: rgba(0, 0, 0, 0.20);
}
[data-theme="dark"] {
    --glass-island-border: rgba(255, 255, 255, 0.28);
}

/* 鈥?椤甸潰鑳屾櫙锛氱函榛戯紙娣辫壊? 涓ф祬鐏帮紙娴呰壊?鈥?*/
.bg-minimal {
    background: linear-gradient(165deg, #fafafa 0%, #f2f2f4 55%, #e9e9eb 100%);
}
[data-theme="dark"] .bg-minimal {
    background:
        radial-gradient(1200px 800px at 85% -10%, rgba(255, 255, 255, 0.045), transparent 55%),
        radial-gradient(900px 700px at -8% 108%, rgba(255, 255, 255, 0.03), transparent 55%),
        linear-gradient(165deg, #050505 0%, #0a0a0a 55%, #101010 100%);
}

/* 鈥?鍏夌偣缃戞牸锛氱传???鈥?*/
.bg-minimal::before {
    background-image: radial-gradient(rgba(0, 0, 0, 0.14) 1px, transparent 1px);
}
[data-theme="dark"] .bg-minimal::before {
    background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
}

/* 鈥?娴婂厜鏂戯細绱??涓у喎鐧介摱?鈥?*/
.bg-minimal::after {
    background:
        radial-gradient(340px 340px at 20% 44%, rgba(0, 0, 0, 0.05), transparent 70%),
        radial-gradient(300px 300px at 74% 70%, rgba(0, 0, 0, 0.04), transparent 70%),
        radial-gradient(260px 260px at 52% 92%, rgba(0, 0, 0, 0.03), transparent 70%);
}
[data-theme="dark"] .bg-minimal::after {
    background:
        radial-gradient(340px 340px at 20% 44%, rgba(255, 255, 255, 0.055), transparent 70%),
        radial-gradient(300px 300px at 74% 70%, rgba(255, 255, 255, 0.045), transparent 70%),
        radial-gradient(260px 260px at 52% 92%, rgba(255, 255, 255, 0.035), transparent 70%);
}

/* 鈥?宸︿晶 Hero 鐜荤拑鍗★細娣辩传 ?榛戠幓?鈥?*/
body:not(.workshop-full-mode) .workshop-left .workshop-hero {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.86), rgba(248, 248, 250, 0.60));
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.08),
        0 0 30px rgba(0, 0, 0, 0.04),
        0 20px 48px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.70);
}
[data-theme="dark"] body:not(.workshop-full-mode) .workshop-left .workshop-hero {
    background: linear-gradient(160deg, rgba(38, 38, 41, 0.86), rgba(18, 18, 20, 0.64));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.09),
        0 0 34px rgba(255, 255, 255, 0.04),
        0 22px 54px rgba(0, 0, 0, 0.60),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* 鈥?Hero 寮鸿皟瀛楋細绱???鐧芥笎?鈥?*/
body:not(.workshop-full-mode) .workshop-left .hero-title .ink-accent {
    background: linear-gradient(120deg, #161616, #4a4a4e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
[data-theme="dark"] body:not(.workshop-full-mode) .workshop-left .hero-title .ink-accent {
    background: linear-gradient(120deg, #ffffff, #9c9ca6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 鈥?鏉垮潡鏍囧渾鐐癸細绱????鈥?*/
body:not(.workshop-full-mode) .workshop-left .section-label::before {
    background: #1c1c1e;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] body:not(.workshop-full-mode) .workshop-left .section-label::before {
    background: #ffffff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.85);
}

/* 鈥?宸︿晶瀵艰埅鐜荤拑鍗★細娣辩传 ?榛戠幓?鈥?*/
body:not(.workshop-full-mode) .workshop-left .workshop-nav-item {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.62));
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 0 18px rgba(0, 0, 0, 0.04),
        0 14px 34px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] body:not(.workshop-full-mode) .workshop-left .workshop-nav-item {
    background: #0a0a0a;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 22px rgba(255, 255, 255, 0.03),
        0 16px 38px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* 鈥?瀵艰埅娲婚」锛氱传??涓ч摱鐧介珮?鈥?*/
body:not(.workshop-full-mode) .workshop-left .workshop-nav-item.is-active {
    border-color: rgba(0, 0, 0, 0.20);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.78));
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.10),
        0 0 26px rgba(0, 0, 0, 0.06),
        0 18px 44px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] body:not(.workshop-full-mode) .workshop-left .workshop-nav-item.is-active {
    border-color: rgba(255, 255, 255, 0.30);
    background: #0a0a0a;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.16),
        0 0 34px rgba(255, 255, 255, 0.06),
        0 20px 48px rgba(0, 0, 0, 0.60),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

/* 鈥?宸︿晶宸ュ潑浠嬬粛锛氭繁??榛戠幓?鈥?*/
body:not(.workshop-full-mode) .workshop-left .workshop-intro {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(250, 250, 252, 0.60));
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 0 18px rgba(0, 0, 0, 0.04),
        0 14px 34px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.60);
}
[data-theme="dark"] body:not(.workshop-full-mode) .workshop-left .workshop-intro {
    background: linear-gradient(160deg, rgba(36, 36, 39, 0.80), rgba(16, 16, 18, 0.62));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.07),
        0 0 24px rgba(255, 255, 255, 0.03),
        0 16px 38px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* 鈥?缁熸暟瀛楋細绱笎鍙???鐧芥笎?鈥?*/
body:not(.workshop-full-mode) .workshop-left .workshop-intro-stat-num {
    background: linear-gradient(120deg, #161616, #4a4a4e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
[data-theme="dark"] body:not(.workshop-full-mode) .workshop-left .workshop-intro-stat-num {
    background: linear-gradient(120deg, #ffffff, #9c9ca6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 鈥?鍙充晶鏉垮潡鏍囷細绱笎鍙???鐧芥笎?鈥?*/
body:not(.workshop-full-mode) .workshop-section-title {
    background: linear-gradient(120deg, #161616, #4a4a4e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
[data-theme="dark"] body:not(.workshop-full-mode) .workshop-section-title {
    background: linear-gradient(120deg, #ffffff, #9c9ca6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 鈥?鍙充晶鑴氭敞鑳跺泭 hover锛氱传???鈥?*/
body:not(.workshop-full-mode) .workshop-foot-link:hover {
    border-color: var(--glass-island-border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.60);
}
[data-theme="dark"] body:not(.workshop-full-mode) .workshop-foot-link:hover {
    border-color: var(--glass-island-border);
    box-shadow: 0 12px 30px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

/* 鈥?鏂颁綔鎺ㄨ崘鍗＄墖锛氭繁绱??榛戠幓?鈥?*/
body:not(.workshop-full-mode) .workshop-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.62));
    border: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.05),
        0 0 20px rgba(0, 0, 0, 0.04),
        0 16px 40px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.70);
}
[data-theme="dark"] body:not(.workshop-full-mode) .workshop-card {
    background: linear-gradient(160deg, rgba(40, 40, 43, 0.80), rgba(18, 18, 20, 0.62));
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0 22px rgba(255, 255, 255, 0.03),
        0 18px 44px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* 鈥?涓绘墦鍗★細绱??涓ч摱?鈥?*/
body:not(.workshop-full-mode) .workshop-card--feature {
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.10),
        0 0 28px rgba(0, 0, 0, 0.05),
        0 24px 60px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.80);
}
[data-theme="dark"] body:not(.workshop-full-mode) .workshop-card--feature {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.13),
        0 0 32px rgba(255, 255, 255, 0.04),
        0 26px 64px rgba(0, 0, 0, 0.60),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* 鈥?鏇村崱鐗?hover锛氱传???鈥?*/
body:not(.workshop-full-mode) .workshop-more-card:hover {
    border-color: var(--glass-island-border);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.60);
}
[data-theme="dark"] body:not(.workshop-full-mode) .workshop-more-card:hover {
    border-color: var(--glass-island-border);
    box-shadow: 0 18px 44px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}


/* =========================================================
 *  hero 鏍囥€屽潑銆嶅瓧锛氬姞楂橀珮鍙栨秷璐熷瓧璺濅笌鏂?
 * 诠页
 * ========================================================= */
body:not(.workshop-full-mode) .workshop-left .hero-title {
    line-height: 1.3;
    letter-spacing: 0;
    padding: 2px 8px 2px 0;   /* 鍙充晶鐣欑櫧锛岄槻姝㈡笎鍙樻枃瀛楁湯瀛?*/
}
body:not(.workshop-full-mode) .workshop-left .hero-title .ink-accent {
    font-style: normal;
    font-weight: 700;
}

/* =========================================================
 * 鍏充簬FOFU宸ュ潑绉诲叆鍙充晶銆屾柊浣滄帹鑽愪笅鏂瑰悗鐨勯厤
 * 诠页
 * ========================================================= */
body:not(.workshop-full-mode) .workshop-right .workshop-intro {
    margin-top: 28px;
    margin-bottom: 8px;
    border-radius: var(--radius-2xl);
    padding: 26px 28px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(250, 250, 252, 0.60));
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 0 18px rgba(0, 0, 0, 0.04),
        0 14px 34px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.60);
}
[data-theme="dark"] body:not(.workshop-full-mode) .workshop-right .workshop-intro {
    background: linear-gradient(160deg, rgba(36, 36, 39, 0.80), rgba(16, 16, 18, 0.62));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.07),
        0 0 24px rgba(255, 255, 255, 0.03),
        0 16px 38px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* 鍙充晶缁熸暟瀛楋細澶?+ 鐧解啋閾剁伆娓愬彉锛屼笌宸︿晶宸ュ潑椋庢牸缁熶竴 */
body:not(.workshop-full-mode) .workshop-right .workshop-intro-stat-num {
    font-size: 26px;
    font-weight: 800;
    background: linear-gradient(120deg, #161616, #4a4a4e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
[data-theme="dark"] body:not(.workshop-full-mode) .workshop-right .workshop-intro-stat-num {
    background: linear-gradient(120deg, #ffffff, #9c9ca6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* =========================================================
 * OFU宸ュ潑 hero锛氬垹闄ゅ簳閮ㄥ櫦浠呬繚鐣欐枃?
 * 诠页
 * 娉奸粦鑹蹭富鑹茶皟?hero 瑙勫垯?[data-theme] 鍓嶇紑锛岀壒寮傛洿楂橈紝
 *     蹇呴』鍚屾牱鍔犱笂 [data-theme] 鍓嶇紑鎵嶈兘瑕嗙洊?
 * ========================================================= */
body:not(.workshop-full-mode) .workshop-left .workshop-hero,
[data-theme="dark"] body:not(.workshop-full-mode) .workshop-left .workshop-hero {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
body:not(.workshop-full-mode) .workshop-left .workshop-hero::before,
[data-theme="dark"] body:not(.workshop-full-mode) .workshop-left .workshop-hero::before {
    display: none;   /* 去装喂 */
}

/* =========================================================
 * 宸︿晶闈㈡澘锛氬幓鎺夌嫭绔嬮潰鏉胯儗鏅糷ero 鏂囧瓧鐩存帴娴滈〉闈㈤粦鑹茶儗鏅?
 * 诠页
 * ========================================================= */
body:not(.workshop-full-mode) .workshop-left {
    background: transparent;
}

/* =========================================================
 * 宸ュ潑浜屽瓧锛氭枩?+ 鐏拌壊锛堥綈鐑棬椤点€孴RENDING 鐑椼€峣nk-accent 椋庢牸?
 * 浠呬綔鐢ㄤ簬宸ュ潑涓婚〉锛涗繚鐣?1.3 闃层€屽潑銆嶅瓧
 * ========================================================= */
body:not(.workshop-full-mode) .workshop-left .hero-title .ink-accent,
[data-theme="dark"] body:not(.workshop-full-mode) .workshop-left .hero-title .ink-accent {
    font-style: italic;
    font-weight: 700;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
    color: var(--text-muted);   /* 鐏拌壊锛氭祬?#999 / 鏆楄壊 #555锛屼笌鐑楅〉涓€?*/
}

/* =========================================================
 * 銆屾柊浣滄帹鑽愬崱鐗囩粺绛夊ぇ缃戞牸锛堢敤鎴锋眰锛氭牱澶у皬骞跺榻?
 * 2 鍒楃瓑?脳 3 琛岀瓑楂橈紱?4 寮犲畬鍏ㄧ瓑澶э紝?5 寮犺法涓ゅ垪閫氭爮绛夐珮
 * 诠页
 * ========================================================= */
body:not(.workshop-full-mode) .workshop-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    align-items: stretch;
}

/* 涓绘墦鍗★細鍘绘帀璺ㄧ壒鏉冿紝涓庡叾浠栧崱鐗囧悓灏?*/
body:not(.workshop-full-mode) .workshop-card--feature {
    grid-column: auto;
    grid-row: auto;
}



/* =========================================================
 * 鍙傜儹闂ㄩ〉鑳屾櫙锛氬伐鍧婁富椤佃儗鏅斾负骞叉繁鐏版笎鍙?
 * 鐑楅〉鑳?= 宸︽爮 bg-primary(#0a0a0a) + 鍙虫爮 bg-secondary(#141414) 绾濇澘鑹?
 * 鍘绘帀 bg-minimal 鐨勫厜鐐圭綉鏍间笌娴婂厜鏂戯紝浠呬繚鐣欏崟娓?
 * 诠页
 * ========================================================= */
body:not(.workshop-full-mode) .bg-minimal {
    background: #ffffff;
}
[data-theme="dark"] body:not(.workshop-full-mode) .bg-minimal {
    background: #0a0a0a;
}
body:not(.workshop-full-mode) .bg-minimal::before,
body:not(.workshop-full-mode) .bg-minimal::after,
[data-theme="dark"] body:not(.workshop-full-mode) .bg-minimal::before,
[data-theme="dark"] body:not(.workshop-full-mode) .bg-minimal::after {
    display: none;
}

/* =========================================================
 * 鍏充簬FOFU宸ュ潑绉诲洖鏉垮潡瀵艰埅涓嬫柟锛氬幓?auto margin锛岀揣璺?
 * 诠页
 * ========================================================= */
body:not(.workshop-full-mode) .workshop-left .workshop-intro {
    margin-top: 0;
}


/* =========================================================
 * 榈颊?鄣牟
 * 鎶樺彔鏃剁缉灏忓崰鐢ㄤ綋绉间繚鐣欏鑸」鏍囬鏂囧瓧锛堥殣钘忔弿杩?
 * 浠呬綔鐢ㄤ簬宸ュ潑涓婚〉?workshopNav锛夛紝瀛愰〉闈稿彈褰?
 * ========================================================= */
body:not(.workshop-full-mode) #workshopNav .workshop-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
body:not(.workshop-full-mode) #workshopNav .workshop-nav-head .section-label {
    margin-bottom: 0;
}
body:not(.workshop-full-mode) #workshopNav .workshop-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background: #3a3a40;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 10px;
    color: #e8e8ea;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transform: translateZ(0);
    will-change: transform;
    isolation: isolate;
    transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s, color 0.25s;
}
body:not(.workshop-full-mode) #workshopNav .workshop-nav-toggle:hover {
    color: var(--text-primary);
    border-color: var(--glass-island-border);
}
body:not(.workshop-full-mode) #workshopNav .workshop-nav-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.25s var(--ease);
}
body:not(.workshop-full-mode) #workshopNav.is-collapsed .workshop-nav-toggle svg {
    transform: rotate(-90deg);
}

/* 鎶樺彔鐘讹細缂╁皬浣撶Н锛屽彧淇濈暀瀵艰埅椤规爣棰樻枃?*/
body:not(.workshop-full-mode) #workshopNav.is-collapsed {
    gap: 8px;
}
body:not(.workshop-full-mode) #workshopNav.is-collapsed .workshop-nav-item {
    padding: 9px 14px;
}
body:not(.workshop-full-mode) #workshopNav.is-collapsed .workshop-nav-desc,
body:not(.workshop-full-mode) #workshopNav.is-collapsed .workshop-nav-arrow,
body:not(.workshop-full-mode) #workshopNav.is-collapsed .workshop-nav-index {
    display: none;
}

/* =========================================================
 * 鐑楁澘鍧楋細鑳屾櫤?+ 鍙?鎶樺彔瀵艰埅锛堝弬鑰冨伐鍧婃澘鍧楄埣
 * 浠呬綔鐢ㄤ簬鐑楁澘鍧?trendingNav / .trending-page-right?
 * ========================================================= */
/* 鍙虫爮鑳屾櫙绾?*/
[data-theme="dark"] .trending-page-right {
    background: #0a0a0a;
}

/* 鄣钮 */
#trendingNav .workshop-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
#trendingNav .workshop-nav-head .section-label {
    margin-bottom: 0;
}
#trendingNav .workshop-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background: #3a3a40;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 10px;
    color: #e8e8ea;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transform: translateZ(0);
    will-change: transform;
    isolation: isolate;
    transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s, color 0.25s;
}
#trendingNav .workshop-nav-toggle:hover {
    color: var(--text-primary);
    border-color: var(--glass-island-border);
}
#trendingNav .workshop-nav-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.25s var(--ease);
}
#trendingNav.is-collapsed .workshop-nav-toggle svg {
    transform: rotate(-90deg);
}

/* 鎶樺彔鐘讹細缂╁皬浣撶Н锛屽彧淇濈暀瀵艰埅椤规爣?*/
#trendingNav.is-collapsed {
    gap: 8px;
}
#trendingNav.is-collapsed .workshop-nav-item {
    padding: 9px 14px;
}
#trendingNav.is-collapsed .workshop-nav-desc,
#trendingNav.is-collapsed .workshop-nav-arrow,
#trendingNav.is-collapsed .workshop-nav-index {
    display: none;
}

/* =========================================================
 * 瑙嗘澘鍧楋細鑳屾櫤?+ 鍙?鎶樺彔瀵艰埅锛堝弬鑰冨伐?鐑楁澘鍧楀鑸?
 * 浠呬綔鐢ㄤ簬瑙嗘澘鍧?videosNav / .videos-page-right?
 * ========================================================= */
/* 鍙虫爮鑳屾櫙绾?*/
[data-theme="dark"] .videos-page-right {
    background: #0a0a0a;
}

/* 鄣钮 */
#videosNav .workshop-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
#videosNav .workshop-nav-head .section-label {
    margin-bottom: 0;
}
#videosNav .workshop-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background: #3a3a40;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 10px;
    color: #e8e8ea;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transform: translateZ(0);
    will-change: transform;
    isolation: isolate;
    transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s, color 0.25s;
}
#videosNav .workshop-nav-toggle:hover {
    color: var(--text-primary);
    border-color: var(--glass-island-border);
}
#videosNav .workshop-nav-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.25s var(--ease);
}
#videosNav.is-collapsed .workshop-nav-toggle svg {
    transform: rotate(-90deg);
}

/* 鎶樺彔鐘讹細缂╁皬浣撶Н锛屽彧淇濈暀瀵艰埅椤规爣?*/
#videosNav.is-collapsed {
    gap: 8px;
}
#videosNav.is-collapsed .workshop-nav-item {
    padding: 9px 14px;
}
#videosNav.is-collapsed .workshop-nav-desc,
#videosNav.is-collapsed .workshop-nav-arrow,
#videosNav.is-collapsed .workshop-nav-index {
    display: none;
}

/* =========================================================
 * 缇庢湳鏉垮潡锛氳儗鏅?+ 鍙?鎶樺彔瀵艰埅锛堝弬鑰冨伐?鐑?瑙嗘澘鍧?
 * 浠呬綔鐢ㄤ簬缇庢湳鏉垮潡?designNav / .design-page-right?
 * ========================================================= */
/* 鍙虫爮鑳屾櫙绾?*/
[data-theme="dark"] .design-page-right {
    background: #0a0a0a;
}

/* 鄣钮 */
#designNav .workshop-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
#designNav .workshop-nav-head .section-label {
    margin-bottom: 0;
}
#designNav .workshop-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background: #3a3a40;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 10px;
    color: #e8e8ea;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transform: translateZ(0);
    will-change: transform;
    isolation: isolate;
    transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s, color 0.25s;
}
#designNav .workshop-nav-toggle:hover {
    color: var(--text-primary);
    border-color: var(--glass-island-border);
}
#designNav .workshop-nav-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.25s var(--ease);
}
#designNav.is-collapsed .workshop-nav-toggle svg {
    transform: rotate(-90deg);
}

/* 鎶樺彔鐘讹細缂╁皬浣撶Н锛屽彧淇濈暀瀵艰埅椤规爣?*/
#designNav.is-collapsed {
    gap: 8px;
}
#designNav.is-collapsed .workshop-nav-item {
    padding: 9px 14px;
}
#designNav.is-collapsed .workshop-nav-desc,
#designNav.is-collapsed .workshop-nav-arrow,
#designNav.is-collapsed .workshop-nav-index {
    display: none;
}

/* =========================================================
 * 浣滃搧鏉垮潡锛氳儗鏅?+ 鍙?鎶樺彔瀵艰埅 + 宸﹀彸姣斾緥 1.5:8.5
 * ?#section-column 闄愬畾锛屼笉褰卞搷绋嶅悗鍐嶇湅 / 鍘嗗彶鏉垮潡锛堝叡?showcase-page 绫伙級
 * ========================================================= */
/* 姣斾緥锛氫綔鍝佹澘鍧楀乏?1.5銆佸彸?8.5 */
#section-column .showcase-page-left {
    flex: 1.5;
}
#section-column .showcase-page-right {
    flex: 8.5;
}

/* 鍙虫爮鑳屾櫙绾?*/
[data-theme="dark"] #section-column .showcase-page-right {
    background: #0a0a0a;
}

/* 鄣钮 */
#showcaseNav .workshop-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
#showcaseNav .workshop-nav-head .section-label {
    margin-bottom: 0;
}
#showcaseNav .workshop-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background: #3a3a40;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 10px;
    color: #e8e8ea;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transform: translateZ(0);
    will-change: transform;
    isolation: isolate;
    transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s, color 0.25s;
}
#showcaseNav .workshop-nav-toggle:hover {
    color: var(--text-primary);
    border-color: var(--glass-island-border);
}
#showcaseNav .workshop-nav-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.25s var(--ease);
}
#showcaseNav.is-collapsed .workshop-nav-toggle svg {
    transform: rotate(-90deg);
}

/* 鎶樺彔鐘讹細缂╁皬浣撶Н锛屽彧淇濈暀瀵艰埅椤规爣?*/
#showcaseNav.is-collapsed {
    gap: 8px;
}
#showcaseNav.is-collapsed .workshop-nav-item {
    padding: 9px 14px;
}
#showcaseNav.is-collapsed .workshop-nav-desc,
#showcaseNav.is-collapsed .workshop-nav-arrow,
#showcaseNav.is-collapsed .workshop-nav-index {
    display: none;
}

/* =========================================================
 * 闊虫晥鏉垮潡锛氳儗鏅?+ 鍙?鎶樺彔瀵艰埅锛堝弬鑰冨伐?鐑?瑙?缇庢湳/浣滃搧鏉垮潡?
 * 浠呬綔鐢ㄤ簬闊虫晥鏉垮潡?audioNav / .audio-page-right?
 * ========================================================= */
/* 鍙虫爮鑳屾櫙绾?*/
[data-theme="dark"] .audio-page-right {
    background: #0a0a0a;
}

/* 鄣钮 */
#audioNav .workshop-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
#audioNav .workshop-nav-head .section-label {
    margin-bottom: 0;
}
#audioNav .workshop-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background: #3a3a40;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 10px;
    color: #e8e8ea;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transform: translateZ(0);
    will-change: transform;
    isolation: isolate;
    transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s, color 0.25s;
}
#audioNav .workshop-nav-toggle:hover {
    color: var(--text-primary);
    border-color: var(--glass-island-border);
}
#audioNav .workshop-nav-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.25s var(--ease);
}
#audioNav.is-collapsed .workshop-nav-toggle svg {
    transform: rotate(-90deg);
}

/* 鎶樺彔鐘讹細缂╁皬浣撶Н锛屽彧淇濈暀瀵艰埅椤规爣?*/
#audioNav.is-collapsed {
    gap: 8px;
}
#audioNav.is-collapsed .workshop-nav-item {
    padding: 9px 14px;
}
#audioNav.is-collapsed .workshop-nav-desc,
#audioNav.is-collapsed .workshop-nav-arrow,
#audioNav.is-collapsed .workshop-nav-index {
    display: none;
}

/* =========================================================
 * 闊虫晥鎾斿櫦灏侀潰杞? 棣栧敱鐗囧崱鐗囷紝褰撳墠灞呬腑銆佷袱渚т緷娆′负涓婁竴?涓嬩竴棣栵級
 * ========================================================= */
.vinyl-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    width: 100%;
    padding: 12px 4px 0;
    z-index: 2;
    position: relative;
}
.vinyl-carousel-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 230px;
}
.vinyl-card {
    border: none;
    cursor: pointer;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    margin: 0 8px;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.3s ease, box-shadow 0.3s ease;
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    /* 鍞辩墖鐩橀潰锛氶粦鑳跺浘锛堝湀榛?澹扮汗锛夛紝涓?::before 鏄剧ず姝屾洸灏侀潰 */
    background: url('image/vinyl.png') center / cover no-repeat;
}
.vinyl-card-inner {
    display: none;
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, transparent 0 30%, rgba(0, 0, 0, 0.16) 30% 32%, transparent 32% 52%, rgba(0, 0, 0, 0.12) 52% 54%, transparent 54%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
}
/* 诮图源疲inner 装喂乇 */
/* 涓ゅ渾褰㈡爣锛堥粦鑳跺敱鐗囨爣绛惧尯?*/
.vinyl-card::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 45%;
    height: 45%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--cover-img, var(--c, #667eea)) center / cover no-repeat;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 0 1.5px rgba(255, 255, 255, 0.10);
    pointer-events: none;
}
/* 鍞辩墖鐜嗚竟缂橀珮鍏?*/
.vinyl-card::after {
    display: none;
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 45%;
    height: 45%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.10);
    pointer-events: none;
}
.vinyl-card-label {
    position: absolute;
    left: 0;
    right: 0;
    top: 20%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    text-transform: uppercase;
    white-space: nowrap;
}
.vinyl-card--center {
    width: 200px;
    height: 200px;
    z-index: 5;
    transform: scale(1);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.vinyl-card--center .vinyl-card-label {
    font-size: 15px;
}
.vinyl-card--side1 {
    width: 156px;
    height: 156px;
    z-index: 4;
    opacity: 0.85;
}
.vinyl-card--side2 {
    width: 130px;
    height: 130px;
    z-index: 3;
    opacity: 0.6;
}
.vinyl-card--side3 {
    width: 108px;
    height: 108px;
    z-index: 2;
    opacity: 0.34;
}
.vinyl-card:hover {
    opacity: 1;
    transform: scale(1.06);
}
.vinyl-carousel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #d0d0d4;
    cursor: pointer;
    z-index: 6;
    transition: all 0.25s ease;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.vinyl-carousel-arrow:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.35);
}
.vinyl-carousel-arrow:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

/* =========================================================
 * 姝屾洸璇︽儏闈㈡澘锛堢偣鍑讳腑闂村敱鐗囨墦锛氭瓕?+ 鎺у埗 + 杩斿洖?
 * ========================================================= */
.vinyl-detail-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: none;
    flex-direction: column;
    padding: 16px 26px 22px;
    border-radius: 18px;
    background: #cfd0d4;
    box-shadow:
        0 26px 64px rgba(0, 0, 0, 0.30);
}
.vinyl-detail-panel.is-open {
    display: flex;
}
.detail-back {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #3a3a40;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: all 0.25s ease;
}
.detail-back:hover {
    background: rgba(0, 0, 0, 0.10);
    color: #000;
}
.detail-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 34px;
    padding-bottom: 48px;
    min-height: 0;
}
.detail-lyrics-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.detail-head-info {
    text-align: center;
}
.detail-category {
    display: none;
}
.detail-title {
    font-size: 24px;
    font-weight: 700;
    color: #16161a;
    margin: 4px 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.detail-artist {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.detail-lyrics {
    position: relative;
    width: 100%;
    max-width: 560px;
    height: 118px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.detail-lyrics-inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    transition: transform 0.45s ease;
}
.lyric-line {
    height: 26px;
    line-height: 26px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.40);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease, font-size 0.3s ease;
}
.lyric-line.is-active {
    color: #111;
    font-size: 16px;
    font-weight: 600;
}
.detail-disc {
    width: 250px;
    height: 250px;
    flex-shrink: 0;
    border-radius: 50%;
    position: relative;
    /* 榛戣兌鐩橈細浣跨敤榛戣兌鍥撅紙澶栧湀榛戣兌+澹扮汗锛夛紝鏀惧ぇ浠ュ幓闄ゆ渶澶栧湀绾昏儗鏅?*/
    background: url('image/vinyl.png') center / 106% 106% no-repeat;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.25),
        0 24px 52px rgba(0, 0, 0, 0.32);
}
/* 鍐呭湀灏侀潰锛堢瓑姣旀斁澶э紝灞呬腑?*/
.detail-disc::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 172px;
    height: 172px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--cover-img, var(--vinyl-accent, #667eea)) center / cover no-repeat;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.detail-disc.is-playing {
    animation: vinylSpin 8s linear infinite;
}
.detail-bottom {
    margin-top: 6px;
}
.detail-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
}
.detail-time {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.55);
    font-variant-numeric: tabular-nums;
}
.detail-progress-bar {
    flex: 1;
    background: rgba(0, 0, 0, 0.12);
    height: 3px;
}
.detail-progress-bar:hover {
    background: rgba(0, 0, 0, 0.18);
}
.detail-progress-bar .vinyl-progress-fill {
    background: linear-gradient(90deg, var(--vp-accent), #4a6cf7);
}
.detail-progress-bar .vinyl-progress-thumb {
    background: #16161a;
    box-shadow: 0 0 0 3px rgba(22, 22, 26, 0.15);
}
.detail-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}
.detail-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.05);
    color: #3a3a40;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}
.detail-btn:hover {
    background: rgba(0, 0, 0, 0.10);
    color: #000;
}
.detail-btn--play {
    width: 56px;
    height: 56px;
    background: #16161a;
    border: none;
    color: #fff;
    font-size: 18px;
}
.detail-btn--play:hover {
    background: #000;
    color: #fff;
}
.detail-btn.is-active {
    color: #4a6cf7;
    border-color: rgba(74, 108, 247, 0.55);
    background: rgba(74, 108, 247, 0.10);
}
/*  */
.detail-volume {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(0, 0, 0, 0.55);
    font-size: 14px;
    margin-right: 4px;
}
.detail-volume i {
    font-size: 14px;
    cursor: pointer;
    transition: color 0.2s;
}
.detail-volume i:hover {
    color: #000;
}
.detail-volume-slider {
    width: 90px;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    transition: height 0.2s;
}
.detail-volume-slider:hover {
    height: 5px;
}
.detail-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.detail-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    border: none;
}


/* 寰庢寜閽嚠涔夊浘?*/
.vinyl-ico-repeat {
    width: 17px;
    height: 17px;
    object-fit: contain;
    display: block;
    pointer-events: none;
}
.detail-btn .vinyl-ico-repeat {
    width: 17px;
    height: 17px;
    filter: brightness(0.5);
}

/* 鎾斿垪琛ㄧ埍蹇冩敹钘忔寜閽?*/
.audio-list-like-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: none;
    border-radius: var(--radius-md);
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    font-size: 12px;
    transition: all var(--transition);
    flex-shrink: 0;
}
.audio-list-like-btn i { font-size: 12px; }
.audio-list-like-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    transform: scale(1.08);
}
.audio-list-like-btn.is-liked {
    color: #ff4757;
    background: rgba(255,71,87,0.14);
}
.audio-list-like-btn.is-liked i { animation: likePop 0.3s ease; }
@keyframes likePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* 鎾斿垪琛ㄦ嫋鎷芥帓搴忔墜鏌?*/
.audio-list-drag-handle {
    width: 22px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.35);
    cursor: grab;
    flex-shrink: 0;
    font-size: 12px;
    transition: color var(--transition);
}
.audio-list-drag-handle i { font-size: 12px; }
.audio-list-drag-handle:hover { color: rgba(255,255,255,0.75); }
.audio-list-drag-handle:active { cursor: grabbing; }
.audio-list-item.dragging {
    opacity: 0.45;
    border: 1px dashed rgba(255,255,255,0.28);
}
.audio-list-item.is-drag-over {
    border-top: 2px solid var(--accent-primary);
    background: rgba(255,255,255,0.05);
}

/* 宸ュ潑鎼滅储妗嗭紙宸︿晶锛屽弬鑰冮煶鏁堟悳绱紝閰嶇獎鏍?*/
.workshop-search-box {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-full);
    transition: all var(--transition);
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
    position: relative;
    z-index: 5;
    isolation: isolate;
}
.workshop-search-box:hover {
    border-color: rgba(255, 255, 255, 0.52);
    background: rgba(255, 255, 255, 0.17);
}
.workshop-search-box:focus-within {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.2);
}
.workshop-search-box > i {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    flex-shrink: 0;
}
.workshop-search-box input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 12px;
    color: var(--text-primary);
    font-family: inherit;
    min-width: 0;
}
.workshop-search-box input::placeholder { color: rgba(255, 255, 255, 0.6); }
.workshop-search-clear {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition);
    flex-shrink: 0;
}
.workshop-search-clear:hover { color: var(--text-primary); }

/* 时位auto-fill 鄣展
   閬垮厤 auto-fit 鎶婂墿浣欏崱鐗囨姌鍙犳媺浼告垚鏁村鑷存瘮渚嬪け琛?*/
body:not(.workshop-full-mode) .workshop-card-grid.is-searching {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* 鎼滅储缁撴灉绌虹姸?*/
.workshop-search-empty {
    padding: 28px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* ============================================================
   娲诲姩鏉垮潡杞?
   ============================================================ */
.activity-carousel {
    position: relative;
    width: 100%;
    height: 480px;
    border-radius: 16px;
    overflow: hidden;
    background: #111;
}

.activity-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.activity-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    pointer-events: none;
}

.activity-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.activity-slide-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 48px 56px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
}

.activity-slide-tag {
    display: inline-block;
    padding: 4px 14px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    font-size: 12px;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.activity-slide-title {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px 0;
    letter-spacing: 1px;
}

.activity-slide-desc {
    font-size: 15px;
    color: rgba(255,255,255,0.75);
    margin: 0;
    max-width: 560px;
    line-height: 1.6;
}

/* 谢钮 */
.activity-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 5;
}

.activity-carousel-btn:hover {
    background: rgba(0,0,0,0.65);
    border-color: rgba(255,255,255,0.3);
}

.activity-carousel-prev { left: 20px; }
.activity-carousel-next { right: 20px; }

/* 鎸囩ず?*/
.activity-carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5;
}

.activity-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.activity-dot.is-active {
    background: #fff;
    width: 28px;
    border-radius: 5px;
}

.activity-dot:hover {
    background: rgba(255,255,255,0.6);
}


/* ========== 娲诲姩杞?========== */
.activity-carousel {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 32px;
    aspect-ratio: 16 / 6;
    background: #111;
}
.activity-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}
.activity-carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
}
.activity-carousel-slide.is-active {
    opacity: 1;
}
.activity-carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.activity-carousel-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.activity-carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}
.activity-carousel-dot.is-active {
    background: #fff;
    width: 28px;
    border-radius: 5px;
}

/* ========== 疃?========== */
.activity-gallery-wrap {
    margin-bottom: 32px;
}
.activity-gallery-title {
    font-size: 26px;
    font-weight: 700;
    background: linear-gradient(135deg, #fff, #999);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 16px 0;
    text-align: left;
}
.activity-gallery {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}
.activity-gallery::-webkit-scrollbar {
    height: 4px;
}
.activity-gallery::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}
.activity-gallery-item {
    flex: 0 0 auto;
    width: calc((100% - 48px) / 5);
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    background: #1a1a1a;
    transition: transform 0.3s ease;
}
.activity-gallery-item:hover {
    transform: translateY(-4px);
}
.activity-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
@media (max-width: 1024px) {
    .activity-gallery-item {
        width: calc((100% - 24px) / 3);
    }
}
@media (max-width: 640px) {
    .activity-gallery-item {
        width: calc((100% - 12px) / 2);
    }
    .activity-carousel {
        aspect-ratio: 16 / 9;
    }
}

/* ==========  ========== */
.design-main-content {
    display: flex;
    gap: 24px;
    height: calc(100vh - 180px);
    overflow: visible !important;
    align-items: flex-start !important;
}
.design-works-panel {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding-right: 8px;
}
.design-works-panel::-webkit-scrollbar {
    width: 6px;
}
.design-works-panel::-webkit-scrollbar-track {
    background: transparent;
}
.design-works-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}
.design-works-panel .design-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.design-detail-panel {
    width: 420px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow-y: auto;
    padding: 24px;
}
.design-detail-panel::-webkit-scrollbar {
    width: 6px;
}
.design-detail-panel::-webkit-scrollbar-track {
    background: transparent;
}
.design-detail-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}
.design-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.3);
    gap: 12px;
}
.design-detail-empty i {
    font-size: 48px;
}
.design-detail-empty p {
    font-size: 14px;
    margin: 0;
}
.design-detail-image-wrap {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
    margin-bottom: 20px;
    display: block;
}
.design-detail-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    display: block;
}
.design-detail-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px 0;
}
.design-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 16px;
}
.design-detail-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 20px;
}
.design-detail-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.design-detail-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.design-detail-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}
.design-detail-btn.is-active {
    color: #ef4444;
    border-color: #ef4444;
}
.design-detail-comments {
    margin-top: 8px;
}
.design-comments-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 16px 0;
}
.design-comments-title span {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
    font-size: 14px;
}
.design-comment-input-wrap {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}
.design-comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.design-comment-input-box {
    flex: 1;
}
.design-comment-input-box textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-size: 13px;
    resize: none;
    outline: none;
    font-family: inherit;
}
.design-comment-input-box textarea:focus {
    border-color: #8b5cf6;
}
.design-comment-submit {
    margin-top: 8px;
    padding: 6px 16px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    float: right;
}
.design-comment-submit:hover {
    opacity: 0.9;
}
.design-comment-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.design-comment-item {
    display: flex;
    gap: 12px;
}
.design-comment-item-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.design-comment-item-content {
    flex: 1;
}
.design-comment-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.design-comment-item-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.design-comment-item-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
}
.design-comment-item-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
}
@media (max-width: 1200px) {
    .design-works-panel .design-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .design-detail-panel {
        width: 360px;
    }
}
@media (max-width: 900px) {
    .design-main-content {
        flex-direction: column;
        height: auto;
    }
    .design-works-panel {
        overflow: visible;
    }
    .design-works-panel .design-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .design-detail-panel {
        width: 100%;
    }
}

/* ========== 叱片 ========== */
.seven-records-player {
    padding: 40px 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* 酃 - 戏 */
.seven-records-player::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 500px;
    background: radial-gradient(ellipse at center top,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.08) 30%,
        rgba(255, 255, 255, 0.03) 60%,
        transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* 撞 */
.seven-records-player::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 150px;
    background: radial-gradient(ellipse at center bottom,
        rgba(139, 92, 246, 0.1) 0%,
        transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.seven-records-player > * {
    position: relative;
    z-index: 1;
}
.seven-records-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 32px;
    min-height: 200px;
}
.seven-records {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.record-item { width: 140px; height: 140px;
    border-radius: 50%;
    background: #111;
    position: relative;
    cursor: pointer;
    transition: all 0.4s ease;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.record-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #333;
    z-index: 2;
}
.record-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #666;
    z-index: 3;
}
.record-item .record-grooves {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at center,
        #0d0d0d 0px, #0d0d0d 1px,
        #1a1a1a 1px, #1a1a1a 3px,
        #111 3px, #111 4px);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}

/* 片 */
.record-item .record-grooves::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.15) 0%,
        transparent 40%,
        transparent 60%,
        rgba(255,255,255,0.05) 100%);
    pointer-events: none;
}
.record-item .record-cover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    z-index: 1;
}
.record-item.is-current { width: 220px; height: 220px;
    box-shadow: 0 8px 40px rgba(139, 92, 246, 0.3);
}
.record-item.is-current::before {
    width: 50px;
    height: 50px;
}
.record-item.is-current .record-cover { width: 50%; height: 50%;
}
.record-item.is-side { width: 130px; height: 130px;
    opacity: 0.6;
}
.record-item.is-far { width: 100px; height: 100px;
    opacity: 0.35;
}
.record-item.playing {
    animation: recordSpin 8s linear infinite;
}
@keyframes recordSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.seven-records-info {
    margin-bottom: 24px;
}
.seven-records-category {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
    letter-spacing: 2px;
}
.seven-records-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
}
.seven-records-artist {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}
.seven-records-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
}
.seven-records-volume {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}
.seven-records-volume-slider {
    width: 80px;
    accent-color: #8b5cf6;
}
.seven-records-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.seven-records-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}
.seven-records-btn-play {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border: none;
    font-size: 20px;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
}
.seven-records-btn-play:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 28px rgba(139, 92, 246, 0.5);
}
.seven-records-modes {
    display: flex;
    gap: 8px;
}
.seven-records-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
}
.seven-records-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    min-width: 36px;
}
.seven-records-progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}
.seven-records-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #6366f1);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}
.seven-records-progress-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.2s;
}
.seven-records-progress-bar:hover .seven-records-progress-thumb {
    opacity: 1;
}

/* ========== 璧?========== */
.song-detail-panel {
    padding: 32px;
    text-align: center;
    position: relative;
    background: #2a2a2a;
    border-radius: 16px;
    min-height: 500px;
}
.song-detail-back {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.song-detail-back:hover {
    background: rgba(255, 255, 255, 0.08);
}
.song-detail-content {
    max-width: 500px;
    margin: 0 auto;
    padding-top: 40px;
}
.song-detail-disc {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: #0a0a0a;
    position: relative;
    margin: 0 auto 32px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 0 8px #000, 0 0 0 10px #1a1a1a;
}
.song-detail-disc-grooves {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at center,
        #0d0d0d 0px, #0d0d0d 1px,
        #1a1a1a 1px, #1a1a1a 3px,
        #111 3px, #111 4px);
    box-shadow: inset 0 0 30px rgba(0,0,0,0.9);
}

/* 片 */
.song-detail-disc-grooves::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.12) 0%,
        transparent 40%,
        transparent 60%,
        rgba(255,255,255,0.04) 100%);
    pointer-events: none;
}
.song-detail-disc-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: #333;
    z-index: 2;
    border: 3px solid #000;
}
.song-detail-disc-center img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.song-detail-disc.playing {
    animation: recordSpin 8s linear infinite;
}
.song-detail-info {
    margin-bottom: 24px;
}
.song-detail-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
}
.song-detail-artist {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}
.song-detail-lyrics {
    margin-bottom: 32px;
    max-height: 180px;
    overflow-y: auto;
    padding: 0 20px;
}
.song-detail-lyrics::-webkit-scrollbar {
    width: 4px;
}
.song-detail-lyrics::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}
.lyric-line {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 2.2;
    margin: 0;
    transition: all 0.3s ease;
}
.lyric-line.active {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}
.song-detail-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.song-detail-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    min-width: 36px;
}
.song-detail-progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    cursor: pointer;
}
.song-detail-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #6366f1);
    border-radius: 2px;
    width: 0%;
}
.song-detail-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.song-detail-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.song-detail-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}
.song-detail-btn-play {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border: none;
    font-size: 24px;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
}
.song-detail-btn-play:hover {
    transform: scale(1.05);
}



/* ===== Vinyl 片式 ===== */
.record-item {
    background: url('image/vinyl.png') no-repeat center center;
    background-size: cover;
}
.record-item::before,
.record-item::after {
    display: none !important;
}
.record-item .record-grooves {
    display: none !important;
}
.record-item .record-cover {
    width: 35%;
    height: 35%;
    border: 2px solid rgba(0,0,0,0.3);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.record-item.is-current .record-cover {
    width: 40%;
    height: 40%;
}

/* 宄?*/
.song-detail-disc {
    background: url('image/vinyl.png') no-repeat center center;
    background-size: cover;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.song-detail-disc-grooves {
    display: none !important;
}
.song-detail-disc-center {
    width: 28%;
    height: 28%;
    border: 3px solid rgba(0,0,0,0.4);
    box-shadow: 0 0 15px rgba(0,0,0,0.6);
}


/* ===== 叱片式 ===== */
.seven-records-player {
    background: #000 !important;
}
/* 强酃效 - 戏 */
.seven-records-player::before {
    width: 700px !important;
    height: 1200px !important;
    background: radial-gradient(ellipse at center top,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0.08) 30%,
        rgba(255,255,255,0.02) 60%,
        transparent 80%) !important;
}
/* 虐钮 - 装准 */
.seven-records-btn-play {
    background: #2563eb !important;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.5) !important;
}
.seven-records-btn-play:hover {
    background: #3b82f6 !important;
    box-shadow: 0 6px 28px rgba(37, 99, 235, 0.6) !important;
}
/* 去色 */
.seven-records-volume-slider {
    accent-color: #fff !important;
}

/* ===== 历史板块左右比例 3:7 ===== */
.history-page-left {
    flex: 1.5 !important;
}
.history-page-right {
    flex: 8.5 !important;
}


/* ===== 历史板块纯黑背景 ===== */
.history-page-left,
.history-page-right {
    background: #000 !important;
}
.history-page {
    background: #000 !important;
}

/* ===== 稍后再看板块左右比例 1.5:8.5 ===== */
.watchlater-page-left {
    flex: 1.5 !important;
}
.watchlater-page-right {
    flex: 8.5 !important;
}

/* ===== 稍后再看板块纯黑背景 ===== */
.watchlater-page-left,
.watchlater-page-right {
    background: #000 !important;
}
.watchlater-page {
    background: #000 !important;
}


.activity-gallery-item {
    aspect-ratio: 3 / 4 !important;
}

/* ===== 活动板块上下间距加宽 ===== */
#section-more {
    overflow: auto !important;
    padding-top: 40px !important;
    padding-bottom: 60px !important;
}
.activity-gallery-wrap {
    margin-top: 32px !important;
    margin-bottom: 0 !important;
}

/* ===== 活动画廊图片上下拉伸填充 ===== */
.activity-gallery-item img {
    object-fit: cover !important;
    object-position: center top !important;
}


.activity-gallery {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
}
.activity-gallery-item {
    width: 320px !important;
    min-width: 320px !important;
    flex: 0 0 auto !important;
    aspect-ratio: 3 / 4 !important;
}

/* ===== APP上线板块：5个一排+高度增加+图片完整显示 ===== */
.activity-gallery-item {
    width: calc((100% - 48px) / 5) !important;
    min-width: auto !important;
    flex: 0 0 auto !important;
    aspect-ratio: 3 / 4 !important;
}
.activity-gallery-item img {
    object-fit: cover !important;
    object-position: center top !important;
}












.activity-slide {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
}






/* ===== 活动板块一屏自适应布局 ===== */
#section-more {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    
    
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
#section-more .workshop-section-header {
    flex-shrink: 0 !important;
    margin-bottom: 16px !important;
}
.activity-carousel {
    flex: none !important;
    min-height: 0 !important;
    width: 100% !important;
    aspect-ratio: 16 / 5 !important;
    height: auto !important;
    margin-bottom: 20px !important;
    flex-shrink: 0 !important;
}
.activity-carousel-slide img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}
.activity-gallery-wrap {
    flex-shrink: 0 !important;
    margin-top: 0 !important;
}
.activity-gallery-item {
    aspect-ratio: 3 / 4 !important;
}


/* ===== 美术详情图片强制无留白 ===== */
.design-detail-image-wrap {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    background: transparent !important;
    display: block !important;
    line-height: 0 !important;
}
.design-detail-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
}


/* ===== 美术详情图片彻底无留白 - 强制覆盖所有样式 ===== */
.design-detail-panel {
    height: calc(100vh - 180px) !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    align-self: flex-start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.design-detail-content {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
}
.design-detail-image-wrap {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    background: transparent !important;
    display: block !important;
    line-height: 0 !important;
    overflow: visible !important;
}
.design-detail-image {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
    float: none !important;
}
.design-detail-info {
    display: block !important;
    height: auto !important;
}