/* ==========================================================================
   资源站点平台 · 全站设计令牌 / 主题系统 / 过渡基建
   风格定位：Quiet Luxury（轻奢）
   浅色 = 象牙暖白 · 香槟金      暗色 = 曜石黑 · 金箔
   ========================================================================== */

/* ==========================================================================
   1. 与主题无关的常量：排版 / 尺度 / 动效
   ========================================================================== */
:root {
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Optima", "Songti SC", "STSong", "Noto Serif SC",
                  "Source Han Serif SC", "SimSun", Georgia, serif;
    --font-num: "Optima", "Didot", "Georgia", "Times New Roman", serif;

    --radius-xs: 3px;
    --radius-s: 6px;
    --radius: 10px;
    --radius-l: 14px;
    --radius-xl: 22px;

    --ease: cubic-bezier(.22, 1, .36, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
    --dur-1: .18s;
    --dur-2: .34s;
    --dur-3: .58s;
    --dur-theme: .64s;

    --header-h: 64px;
}

/* ==========================================================================
   2. 浅色主题：象牙暖白 · 香槟金
   ========================================================================== */
:root,
[data-theme="light"] {
    color-scheme: light;

    --bg: #F6F4F0;
    --bg-grad:
        radial-gradient(1200px 620px at 12% -12%, #FFFDF9 0%, rgba(255, 253, 249, 0) 62%),
        radial-gradient(900px 520px at 102% -4%, #F1EADE 0%, rgba(241, 234, 222, 0) 58%);
    --surface: #FFFFFF;
    --surface-2: #FBFAF7;
    --surface-3: #F3F0EA;
    --surface-inv: #171614;

    --text: #1B1A17;
    --text-2: #605B53;
    --text-3: #948D82;
    --text-inv: #F7F3EC;

    --line: rgba(27, 26, 23, .11);
    --line-2: rgba(27, 26, 23, .055);
    --line-strong: rgba(27, 26, 23, .20);

    --gold: #A98A5C;
    --gold-2: #C3A577;
    --gold-3: #8A6E45;
    --gold-soft: rgba(169, 138, 92, .12);
    --gold-soft-2: rgba(169, 138, 92, .06);
    --gold-line: rgba(169, 138, 92, .34);
    --gold-text: #8A6E45;
    --on-gold: #FFFFFF;

    --accent: var(--gold);
    --accent-soft: var(--gold-soft);
    --accent-text: var(--gold-text);

    --success: #4E7C5B;
    --success-soft: rgba(78, 124, 91, .12);
    --danger: #A23B3B;
    --danger-soft: rgba(162, 59, 59, .10);
    --warn: #A9772A;
    --warn-soft: rgba(169, 119, 42, .13);
    --info: #4F6472;
    --info-soft: rgba(79, 100, 114, .12);

    --header-bg: rgba(255, 255, 255, .78);
    --header-line: var(--line);
    --footer-bg: #171614;
    --footer-text: #9A938A;
    --footer-line: rgba(255, 255, 255, .10);

    --shadow-1: 0 1px 2px rgba(27, 26, 23, .04), 0 1px 6px rgba(27, 26, 23, .03);
    --shadow-2: 0 2px 6px rgba(27, 26, 23, .05), 0 8px 26px rgba(27, 26, 23, .055);
    --shadow-3: 0 10px 22px rgba(27, 26, 23, .09), 0 28px 64px rgba(27, 26, 23, .10);
    --shadow-gold: 0 8px 28px rgba(169, 138, 92, .22);
    --ring: 0 0 0 3px rgba(169, 138, 92, .16);
    --scrim: rgba(24, 22, 19, .44);

    --shine: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 100%);
    --hairline: rgba(27, 26, 23, .08);

    /* 兼容别名：历史视图与内联样式仍在使用的旧变量名 */
    --primary: var(--gold);
    --primary-dark: var(--gold-3);
    --primary-light: var(--gold-soft);
    --text-sub: var(--text-2);
    --text-light: var(--text-3);
    --border: var(--line);
    --card: var(--surface);
    --shadow-lg: var(--shadow-3);
}

/* ==========================================================================
   3. 暗色主题：曜石黑 · 金箔
   ========================================================================== */
[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0C0D0F;
    --bg-grad:
        radial-gradient(1200px 620px at 12% -12%, #191A1F 0%, rgba(25, 26, 31, 0) 62%),
        radial-gradient(900px 520px at 102% -4%, #1A1613 0%, rgba(26, 22, 19, 0) 58%);
    --surface: #14161A;
    --surface-2: #191C21;
    --surface-3: #20242A;
    --surface-inv: #F7F3EC;

    --text: #EDE9E2;
    --text-2: #A6A099;
    --text-3: #6F6961;
    --text-inv: #161513;

    --line: rgba(237, 233, 226, .11);
    --line-2: rgba(237, 233, 226, .055);
    --line-strong: rgba(237, 233, 226, .22);

    --gold: #D2B382;
    --gold-2: #E7CDA2;
    --gold-3: #B9975F;
    --gold-soft: rgba(210, 179, 130, .14);
    --gold-soft-2: rgba(210, 179, 130, .07);
    --gold-line: rgba(210, 179, 130, .32);
    --gold-text: #D2B382;
    --on-gold: #17140F;

    --accent: var(--gold);
    --accent-soft: var(--gold-soft);
    --accent-text: var(--gold-text);

    --success: #6E9B7A;
    --success-soft: rgba(110, 155, 122, .16);
    --danger: #C87270;
    --danger-soft: rgba(200, 114, 112, .14);
    --warn: #C9A04A;
    --warn-soft: rgba(201, 160, 74, .16);
    --info: #7C93A3;
    --info-soft: rgba(124, 147, 163, .14);

    --header-bg: rgba(14, 15, 17, .74);
    --header-line: var(--line);
    --footer-bg: #0A0B0C;
    --footer-text: #8A847C;
    --footer-line: rgba(255, 255, 255, .08);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, .42), 0 10px 30px rgba(0, 0, 0, .22);
    --shadow-3: 0 10px 24px rgba(0, 0, 0, .48), 0 30px 72px rgba(0, 0, 0, .38);
    --shadow-gold: 0 8px 30px rgba(210, 179, 130, .18);
    --ring: 0 0 0 3px rgba(210, 179, 130, .18);
    --scrim: rgba(0, 0, 0, .62);

    --shine: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 100%);
    --hairline: rgba(237, 233, 226, .08);

    /* 兼容别名：历史视图与内联样式仍在使用的旧变量名 */
    --primary: var(--gold);
    --primary-dark: var(--gold-3);
    --primary-light: var(--gold-soft);
    --text-sub: var(--text-2);
    --text-light: var(--text-3);
    --border: var(--line);
    --card: var(--surface);
    --shadow-lg: var(--shadow-3);
}

/* ==========================================================================
   4. 基础重置
   ========================================================================== */
* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.65;
    color: var(--text);
    background-color: var(--bg);
    background-image: var(--bg-grad);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; vertical-align: middle; }
ul, ol { list-style: none; margin: 0; padding: 0; }
p { margin: 0 0 .8em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; letter-spacing: .01em; }

input, textarea, select, button {
    font-family: inherit;
    font-size: 14px;
    outline: none;
    color: inherit;
}

table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line-2); margin: 16px 0; }
code, pre { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: .92em; }

::selection { background: var(--gold-soft); color: var(--text); }

:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-s);
}

/* 滚动条 */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); background-clip: content-box; }

/* ==========================================================================
   5. 通用工具类
   ========================================================================== */
.container { width: 1220px; max-width: 100%; margin: 0 auto; padding: 0 20px; }
.flex { display: flex; }
.between { display: flex; align-items: center; justify-content: space-between; }
.wrap { display: flex; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; } .mt32 { margin-top: 32px; }
.mr8 { margin-right: 8px; } .mb16 { margin-bottom: 16px; }
.center { text-align: center; }
.muted { color: var(--text-2); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

/* 数字：衬线体，奢侈品画册质感 */
.num, .num-font { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* 眉标 / 小标签 */
.eyebrow {
    font-size: 10.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-text);
    font-weight: 600;
}

/* 金色细分割线 */
.gold-rule {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-line) 22%, var(--gold-line) 78%, transparent);
    border: 0;
    margin: 14px 0;
}

/* 图标（内联 SVG） */
.ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    line-height: 0;
}
.ico svg { width: 1em; height: 1em; display: block; }
.ico-14 { font-size: 14px; } .ico-16 { font-size: 16px; }
.ico-18 { font-size: 18px; } .ico-20 { font-size: 20px; }
.ico-24 { font-size: 24px; } .ico-28 { font-size: 28px; } .ico-32 { font-size: 32px; }

/* ==========================================================================
   6. 主题切换器
   ========================================================================== */
.theme-toggle {
    position: relative;
    width: 34px;
    height: 34px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-2);
    cursor: pointer;
    padding: 0;
    transition: color var(--dur-2) var(--ease),
                border-color var(--dur-2) var(--ease),
                background-color var(--dur-2) var(--ease),
                transform var(--dur-2) var(--ease);
    font-size: 17px;
}
.theme-toggle:hover {
    color: var(--gold-text);
    border-color: var(--gold-line);
    transform: rotate(-18deg);
}
.theme-toggle:active { transform: scale(.92) rotate(-18deg); }
.theme-toggle .ico { transition: transform var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease); }
.theme-toggle .ico-sun,
.theme-toggle .ico-moon {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
[data-theme="light"] .theme-toggle .ico-moon,
[data-theme="dark"] .theme-toggle .ico-sun {
    opacity: 0;
    transform: scale(.4) rotate(-90deg);
}
[data-theme="light"] .theme-toggle .ico-sun,
[data-theme="dark"] .theme-toggle .ico-moon {
    opacity: 1;
    transform: scale(1) rotate(0);
}

/* ==========================================================================
   7. 主题切换动画
   ========================================================================== */

/* 7.1 无 View Transitions 支持时：全局色值平滑过渡（切换瞬间挂上 class） */
html.theme-animating,
html.theme-animating *,
html.theme-animating *::before,
html.theme-animating *::after {
    transition: background-color var(--dur-theme) var(--ease-soft),
                border-color var(--dur-theme) var(--ease-soft),
                color var(--dur-2) var(--ease-soft),
                fill var(--dur-2) var(--ease-soft),
                stroke var(--dur-2) var(--ease-soft),
                box-shadow var(--dur-theme) var(--ease-soft),
                background-image var(--dur-theme) var(--ease-soft) !important;
    transition-delay: 0s !important;
}

/* 7.2 有 View Transitions 支持时：从按钮处圆形扩散 */
html.vt-theme::view-transition-old(root) {
    animation: none;
    mix-blend-mode: normal;
    z-index: 0;
}
html.vt-theme::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
    z-index: 1;
}

/* ==========================================================================
   7.3 滚动后顶栏浮现阴影
   ========================================================================== */
.site-header.is-scrolled,
.admin-top.is-scrolled {
    box-shadow: var(--shadow-2);
}
.site-header,
.admin-top {
    transition: box-shadow var(--dur-3) var(--ease),
                background-color var(--dur-2) var(--ease),
                border-color var(--dur-2) var(--ease);
}

/* ==========================================================================
   8. 页面切换过渡（跨文档导航）
   ========================================================================== */
@view-transition { navigation: auto; }

/* 页头页脚保持稳定，仅内容区做位移淡入 */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}
::view-transition-old(page-view) { animation: page-out .20s var(--ease-soft) both; }
::view-transition-new(page-view) { animation: page-in .42s var(--ease) both; }

/* 主题切换时不触发页面位移动画，只做圆形扩散 */
html.vt-theme::view-transition-old(page-view),
html.vt-theme::view-transition-new(page-view) { animation: none; }

main, .admin-content, .page-view { view-transition-name: page-view; }

@keyframes page-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-8px) scale(.995); }
}
@keyframes page-in {
    from { opacity: 0; transform: translateY(14px) scale(.994); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes page-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 8.1 降级方案：不支持 VT 的浏览器用 CSS 入场 + 离场淡出 */
.page-enter { animation: page-in .48s var(--ease) both; }
html.has-vt .page-enter { animation: page-fade .30s var(--ease-soft) both; }
body.is-leaving main,
body.is-leaving .admin-content,
body.is-leaving .page-view {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .16s var(--ease-soft), transform .16s var(--ease-soft);
}

/* ==========================================================================
   9. 顶部导航进度条
   ========================================================================== */
.route-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0;
    z-index: 9999;
    background: linear-gradient(90deg, transparent, var(--gold) 40%, var(--gold-2) 60%, transparent);
    box-shadow: 0 0 12px rgba(169, 138, 92, .55);
    opacity: 0;
    transition: width .32s var(--ease-soft), opacity .3s linear;
    pointer-events: none;
}
.route-progress.active { opacity: 1; }
.route-progress.done { width: 100% !important; opacity: 0; transition: width .2s linear, opacity .35s linear .12s; }

/* ==========================================================================
   10. Toast（轻奢版）
   ========================================================================== */
.lx-toast {
    position: fixed;
    left: 50%;
    top: 84px;
    transform: translate(-50%, -14px);
    z-index: 10000;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: min(88vw, 520px);
    padding: 11px 20px;
    border-radius: var(--radius-s);
    background: var(--surface-inv);
    color: var(--text-inv);
    font-size: 13.5px;
    letter-spacing: .02em;
    box-shadow: var(--shadow-3);
    border: 1px solid var(--gold-line);
    opacity: 0;
    transition: opacity .26s var(--ease), transform .38s var(--ease);
}
.lx-toast.show { opacity: 1; transform: translate(-50%, 0); }
.lx-toast .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-2); flex: none; }
.lx-toast.error .dot { background: #C87270; }
.lx-toast.success .dot { background: var(--success); }

/* ==========================================================================
   11. 无障碍：减少动效
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    ::view-transition-old(page-view),
    ::view-transition-new(page-view) { animation: none; }
    .page-enter { animation: none; }
}