/* style.css — 独立页面(详情页 / 播放器 / 404)全局样式
   index.html(SPA)不加载本文件,其样式完全内联。
   主题机制:html 元素上的 .dark class(与 SPA 一致),单一变量表。 */

/* 0. 自托管字体:Playfair Display(latin 子集) */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/playfair-700.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/playfair-400-italic.woff2) format('woff2')}

/* 1. 核心主题变量定义(单一变量表:与 index.html 内联表同名同值) */
:root {
    --font-serif: 'Playfair Display', Georgia, 'Liberation Serif', 'Times New Roman', 'Songti SC', 'Noto Serif CJK SC', 'SimSun', serif;
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'HarmonyOS Sans SC', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Liberation Mono', 'Noto Sans Mono', Menlo, Monaco, 'Courier New', monospace;
    --bg-main: #f8f9fa;
    --bg-card: #ffffff;
    --bg-nav: rgba(255, 255, 255, 0.8);
    --surface: rgba(255, 255, 255, .8);
    --surface-hover: rgba(255, 255, 255, .92);
    --border: rgba(0, 0, 0, .08);
    --border-hover: rgba(0, 0, 0, .14);
    --text-main: #1f1f1f;
    --text-muted: #5f6368;
    --text-dim: #80868b;
    --accent: #385cfa;
    --accent-light: #eff6ff;
    --accent-glow: rgba(79, 110, 247, .08);
    --accent-text: #a3bdfc;
    --accent2: #d4a24c;
    --accent2-glow: rgba(212, 162, 76, .08);
    --accent2-text: #d4a24c;
    --accent3: #3ca09a;
    --accent3-glow: rgba(60, 160, 154, .08);
    --accent3-text: #3ca09a;
    --dock-bg: rgba(255, 255, 255, .9);
    --dock-border: rgba(0, 0, 0, .04);
    --dock-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 16px rgba(0, 0, 0, .04);
    --modal-bg: #ffffff;
    --modal-overlay: rgba(0, 0, 0, .3);
    --blob-green: rgba(168, 224, 99, .2);
    --blob-blue: rgba(86, 204, 242, .2);
    --blob-purple: rgba(139, 92, 246, .2);
    --tag-green: #10b981;
    --tag-green-bg: #ecfdf5;
    --pal-red: #b33a3a;
    --pal-blue: #4369ad;
    --pal-green: #438258;
    --pal-purple: #68527d;
    --pal-cyan: #2e8f89;
    --pal-amber: #b98a33;
    --pal-slate: #566b90;
    --pal-mint: #509568;
    --accent-deep: #5a4bd1;
    --signature: #7063c2;
    --tag-border: rgba(90, 75, 209, .32);
    --shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 8px -1px rgba(15, 23, 42, 0.03);
}

/* 衬线斜体工具类(与 SPA index.html 同名) */
.serif-italic{font-family:var(--font-serif);font-style:italic;font-weight:400}

:root.dark {
    --bg-main: #0d0d0f;
    --bg-card: #131a26;
    --bg-nav: rgba(19, 26, 38, 0.8);
    --surface: rgba(255, 255, 255, .04);
    --surface-hover: rgba(255, 255, 255, .06);
    --border: rgba(255, 255, 255, .10);
    --border-hover: rgba(255, 255, 255, .16);
    --text-main: #e8eaed;
    --text-muted: #9aa0a6;
    --text-dim: #6e7681;
    --accent: #8fa8f1;
    --accent-light: #172554;
    --accent-glow: rgba(123, 154, 247, .1);
    --accent-text: #5978c2;
    --accent2: #d4a24c;
    --accent2-glow: rgba(212, 162, 76, .1);
    --accent2-text: #e0b866;
    --accent3: #3ca09a;
    --accent3-glow: rgba(60, 160, 154, .1);
    --accent3-text: #5cc5bf;
    --dock-bg: rgba(32, 33, 36, .92);
    --dock-border: rgba(255, 255, 255, .04);
    --dock-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .2);
    --modal-bg: #1e1e20;
    --modal-overlay: rgba(0, 0, 0, .5);
    --blob-green: rgba(70, 100, 140, .25);
    --blob-blue: rgba(55, 80, 120, .22);
    --blob-purple: rgba(100, 75, 120, .22);
    --tag-green: #34d399;
    --tag-green-bg: #064e3b;
    --pal-red: #b33a3a;
    --pal-blue: #4369ad;
    --pal-green: #438258;
    --pal-purple: #68527d;
    --pal-cyan: #2e8f89;
    --pal-amber: #b98a33;
    --pal-slate: #566b90;
    --pal-mint: #509568;
    --accent-deep: #a89bff;
    --signature: #b3a8d9;
    --tag-border: rgba(168, 155, 255, .38);
    --shadow: 0 4px 25px rgba(0, 0, 0, 0.3);
}

/* 2. 背景光晕动画 */
body::before {
    content: "";
    position: fixed;
    top: -20%;
    left: -12%;
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, var(--blob-green), transparent 65%);
    filter: blur(100px);
    z-index: -1;
    pointer-events: none;
    animation: drift1 18s ease-in-out infinite;
}
body::after {
    content: "";
    position: fixed;
    bottom: -18%;
    right: -10%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, var(--blob-blue), transparent 65%);
    filter: blur(100px);
    z-index: -1;
    pointer-events: none;
    animation: drift2 22s ease-in-out infinite;
}
.fl-blob {
    position: fixed;
    pointer-events: none;
    z-index: -1;
    filter: blur(90px);
}
.fl-blob.b1 {
    top: 35%;
    left: 55%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, var(--blob-green), transparent 70%);
    animation: drift3 20s ease-in-out infinite;
}
.fl-blob.b2 {
    top: 55%;
    left: 15%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, var(--blob-blue), transparent 70%);
    animation: drift4 25s ease-in-out infinite;
}
@keyframes drift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(160px, -80px) scale(1.2); }
    50% { transform: translate(60px, 40px) scale(.85); }
    75% { transform: translate(-80px, 120px) scale(1.1); }
}
@keyframes drift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-120px, -60px) scale(1.15); }
    50% { transform: translate(40px, -20px) scale(.9); }
    75% { transform: translate(100px, 80px) scale(1.05); }
}
@keyframes drift3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-100px, -40px) scale(1.25); }
    66% { transform: translate(60px, 80px) scale(.8); }
}
@keyframes drift4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(120px, 60px) scale(1.15); }
    66% { transform: translate(-80px, -100px) scale(.85); }
}

/* 3. 基础重置与排版 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.625;
    -webkit-font-smoothing: antialiased;
}

/* 3. 毛玻璃顶部导航栏 */
header {
    background-color: var(--bg-nav);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}

.nav-logo {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main);
    text-decoration: none;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
}
.nav-logo-img {
    height: 32px;
    width: auto;
    display: block;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 28px;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    position: relative;
    padding: 4px 0;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--accent);
}

/* 主题切换开关按钮 */
.theme-toggle-btn {
    width: 36px;
    height: 36px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    transition: background .2s, border-color .2s;
}

.theme-toggle-btn:hover {
    background-color: var(--accent-light);
    border-color: var(--accent);
}

/* 4. 双栏核心框架布局 */
.main-wrapper {
    max-width: 1140px;
    margin: 48px auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    align-items: start;
}

/* 左侧高级悬浮卡片 */
.profile-sidebar {
    position: sticky;
    top: 100px;
}

.pro-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: var(--shadow);
}

.avatar-wrapper {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid var(--border);
    position: relative;
}

.avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.profile-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

.profile-domain {
    display: inline-block;
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--accent);
    background-color: var(--accent-light);
    padding: 4px 12px;
    border-radius: 20px;
    text-decoration: none;
    font-family: monospace;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.social-links a {
    color: var(--text-muted);
    text-decoration: none;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 50%;
    display: inline-flex;
    transition: all 0.2s ease;
}

.social-links a:hover {
    color: var(--accent);
    border-color: var(--accent);
    transform: translateY(-2px);
}

/* 5. 右侧高级内容模块 */
.content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* 7. 标签徽章 (Detail 页面技术标签) */
.badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 6px;
}

.badge-blue { background-color: var(--accent-light); color: var(--accent); }
.badge-green { background-color: var(--tag-green-bg); color: var(--tag-green); }

/* 响应式调整 */
@media (max-width: 1024px) {
    .main-wrapper {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .profile-sidebar {
        display: none;
    }
}

/* ==========================================================================
   PRO 拓展特性:高级对齐页脚样式 (Footer Aesthetics)
   ========================================================================== */
   .premium-footer {
    border-top: 1px solid var(--border);
    background-color: var(--bg-card);
    padding: 24px 0;
    margin-top: 80px;           /* 与上方主体内容保持优雅的留白距离 */
    width: 100%;
}

.footer-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* 版权文本样式 */
.footer-copyright {
    font-size: 0.85rem;
    color: var(--text-muted);
    letter-spacing: -0.1px;
}

.footer-copyright a {
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.footer-copyright a:hover {
    color: var(--accent);
}

/* 备案容器 */
.footer-beian {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* 单个备案点击块 */
.beian-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;                   /* 图标与文字的细腻间距 */
    text-decoration: none;
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.beian-link:hover {
    color: var(--text-main);    /* 悬浮时文字高亮 */
}

/* 备案指定图片样式 */
.beian-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;

    /* 高级细节:默认融入背景,悬浮时锐化还原 */
    filter: grayscale(30%) opacity(85%);
    transition: filter 0.2s ease;
}

:root.dark .beian-icon {
    /* 暗黑模式特调:降低高亮图标的对比度,使其更深邃 */
    filter: grayscale(20%) brightness(0.9) opacity(80%);
}

.beian-link:hover .beian-icon {
    filter: grayscale(0%) brightness(1) opacity(1);
}

/* ==========================================================================
   响应式流式布局断点
   ========================================================================== */
@media (max-width: 640px) {
    .premium-footer {
        margin-top: 48px;
        padding: 32px 0;
    }
    .footer-container {
        flex-direction: column;
        text-align: center;
        justify-content: center;
        gap: 20px;
    }
    .footer-beian {
        flex-direction: column;
        justify-content: center;
        gap: 14px;
    }
}

/* ==========================================================================
   文章顶部技术标签居中
   ========================================================================== */
.project-badge-group {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

/* ==========================================================================
   全局返回链接样式 (Back Link)
   ========================================================================== */
.back-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 24px;
    transition: color 0.2s ease, transform 0.2s ease;
}
.back-link:hover {
    color: var(--accent);
    transform: translateX(-4px);
}

@media (max-width: 768px) {
    .back-link {
        margin-top: -91px;
        margin-bottom: 60px;
    }

    /* Hero 图片填满移动端横向空间 */
    .hero-media-frame {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 4px !important;
        border-radius: 4px !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .hero-media-frame img,
    .hero-img-placeholder {
        width: 100% !important;
        object-fit: contain !important;
    }
}

/* ==========================================================================
   页面流微调:保障 True Footer 布局稳定性
   ========================================================================== */
   body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 确保当内容较少时,页脚依然牢牢吸附在屏幕最底端 */
}

/* 去掉 .publications-wrapper 的特定后缀,让所有使用全局双栏主容器的页面(包括 Showcase)都能自动撑开垂直空间 */
.main-wrapper {
    flex: 1;
}