/*
 *
 *  Tika's Personal Homepage - Stylesheet
 *  Version: 2.0 (Refactored)
 *  Tika 的个人主页 - 样式表
 *  版本: 2.0 (重构版)
 *
 */

@layer tokens, base, components, utilities, overrides;

@layer tokens {
    :root {
        --space-1: 4px;
        --space-2: 8px;
        --space-3: 12px;
        --space-4: 14px;
        --space-5: 18px;
        --space-6: 22px;
        --space-7: 32px;
        --radius-pill: 999px;
        --bg-opacity: 0.52;
        --surface-1: rgba(255, 255, 255, 0.94);
        --surface-2: rgba(255, 255, 255, 0.65);
        --surface-3: rgba(255, 255, 255, 0.7);
        --surface-border-1: rgba(24, 20, 16, 0.22);
        --surface-border-2: rgba(24, 20, 16, 0.16);
        --surface-border-3: rgba(24, 20, 16, 0.12);
        --blur-1: 6px;
        --blur-2: 10px;
        --blur-3: 14px;
        --shadow-1: 0 22px 54px rgba(16, 12, 8, 0.16);
        --shadow-2: 0 16px 38px rgba(16, 12, 8, 0.12);
        --shadow-3: 0 10px 24px rgba(16, 12, 8, 0.09);
        --type-display: clamp(2.1rem, 4.2vw, 3.6rem);
        --type-title: clamp(1.4rem, 2.2vw, 2rem);
        --type-body: 1rem;
        --type-caption: 0.9rem;
        --control-bg: rgba(var(--accent-rgb), 0.14);
        --control-border: rgba(var(--accent-rgb), 0.28);
    }

[data-theme="dark"] {
        --bg-opacity: 0.68;
        --surface-1: rgba(8, 12, 18, 0.92);
        --surface-2: rgba(10, 16, 24, 0.65);
        --surface-3: rgba(12, 18, 28, 0.68);
        --surface-border-1: rgba(210, 230, 245, 0.44);
        --surface-border-2: rgba(210, 230, 245, 0.3);
        --surface-border-3: rgba(210, 230, 245, 0.22);
        --shadow-1: 0 28px 72px rgba(0, 0, 0, 0.6);
        --shadow-2: 0 20px 52px rgba(0, 0, 0, 0.5);
        --shadow-3: 0 14px 34px rgba(0, 0, 0, 0.42);
        --control-bg: rgba(var(--accent-rgb), 0.18);
        --control-border: rgba(var(--accent-rgb), 0.28);
    }
}

/* --- 0. FONT DEFINITIONS / 字体定义 --- */
/* ------------------------------------ */

@font-face {
    font-family: "NasaDisplay"; /* Nasa 主题字体 */
    src:
        url("../fonts/NasaDisplay.woff2") format("woff2"),
        url("../fonts/NasaDisplay.woff") format("woff");
    font-weight: 100 900; /* 字体粗细范围 */
    font-style: normal; /* 正常样式 */
    font-display: swap; /* 字体加载策略 */
}

@font-face {
    font-family: "XinHuoTi"; /* 中文主体字体 */
    src:
        url("../fonts/中华薪火体.woff2") format("woff2"),
        url("../fonts/中华薪火体.woff") format("woff");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DS-Digital"; /* 数字时钟字体 */
    src:
        url("../fonts/DS-Digital-Normal.woff2") format("woff2"),
        url("../fonts/DS-Digital-Normal.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DS-Digital";
    src:
        url("../fonts/DS-Digital-Bold.woff2") format("woff2"),
        url("../fonts/DS-Digital-Bold.woff") format("woff");
    font-weight: bold; /* 粗体 */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DS-Digital";
    src:
        url("../fonts/DS-Digital-Italic.woff2") format("woff2"),
        url("../fonts/DS-Digital-Italic.woff") format("woff");
    font-weight: normal;
    font-style: italic; /* 斜体 */
    font-display: swap;
}

@font-face {
    font-family: "DS-Digital";
    src:
        url("../fonts/DS-Digital-BoldItalic.woff2") format("woff2"),
        url("../fonts/DS-Digital-BoldItalic.woff") format("woff");
    font-weight: bold;
    font-style: italic; /* 粗斜体 */
    font-display: swap;
}

@font-face {
    font-family: "Baskervville";
    src: url("../fonts/Baskervville-VariableFont_wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Baskervville";
    src: url("../fonts/Baskervville-Italic-VariableFont_wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}


/* --- 1. ROOT & THEME VARIABLES / 根元素与主题变量 --- */
/* ---------------------------------------------------- */

:root {
    /* Color Scheme / 配色方案 */
    color-scheme: light; /* 默认浅色主题 */

    /* Background / 背景 */
    --bg-image: url('https://s2.loli.net/2025/12/22/nBapAxK8NowjZFP.png'); /* 背景图片 */
    --bg-color: #f2efe8; /* 背景颜色（备用） */

    /* Glassmorphism / 玻璃拟态 */
    --glass-bg: var(--surface-2); /* 玻璃背景色 */
    --glass-border: var(--surface-border-2); /* 玻璃边框色 */
    --glass-inset: rgba(255, 255, 255, 0.48); /* 玻璃内嵌高光 */
    --glass-glow: rgba(var(--accent-rgb), 0.12); /* 玻璃辉光 */
    --blur-strength: var(--blur-2); /* 模糊强度 */

    /* Typography / 字体排印 */
    --text-primary: #1f1b17; /* 主要文本颜色 */
    --text-secondary: #3e3832; /* 次要文本颜色 */
    --font-display: "Baskervville", "NasaDisplay", "XinHuoTi", "Noto Serif SC", serif;
    --font-body: "Baskervville", "XinHuoTi", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
    --font-latin: "Baskervville", "NasaDisplay", serif;
    --font-mono: "JetBrains Mono", "DS-Digital", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    /* Accents / 强调色 */
    --accent-color: #ff6a3d; /* 强调色 */
    --accent-rgb: 255, 106, 61; /* 强调色的 RGB 值 */
    --highlight-bg: rgba(255, 255, 255, 0.7); /* 高亮背景 */

    /* Sizing & Radius / 尺寸与圆角 */
    --radius-lg: 20px; /* 大圆角 */
    --radius-md: 12px; /* 中圆角 */

    /* Shadows & Effects / 阴影与效果 */
    --card-shadow: var(--shadow-2); /* 卡片阴影 */
    --card-hover-shadow: var(--shadow-1); /* 卡片悬停阴影 */
    --focus-ring: 0 0 0 4px rgba(var(--accent-rgb), 0.25); /* 聚焦环 */

    /* Panel & Grid / 面板与网格 */
    --panel-grid: rgba(31, 27, 24, 0.08);
    --panel-line: rgba(31, 27, 24, 0.12);
    --panel-glow: rgba(var(--accent-rgb), 0.12);

    /* Animation & Transitions / 动画与过渡 */
    --ease-out: cubic-bezier(0.2, 0.9, 0.2, 1); /* 缓动函数 */
    --breathe: 8.5s; /* 呼吸动画时长 */
    --breathe-slow: 18s; /* 慢速呼吸动画时长 */

    /* Interactive Properties / 交互属性 */
    --spot-x: 52%; /* 鼠标光斑 X 坐标 */
    --spot-y: 22%; /* 鼠标光斑 Y 坐标 */
    --spot-a: 0.12; /* 鼠标光斑透明度 */
}

[data-theme="dark"] {
    color-scheme: dark; /* 深色主题 */
    --bg-image: url('https://s2.loli.net/2025/12/22/uBnZDzxcI7JHCX3.png');
    --bg-color: #0b1119;
    --glass-bg: var(--surface-2);
    --glass-border: var(--surface-border-2);
    --glass-inset: rgba(255, 255, 255, 0.06);
    --glass-glow: rgba(var(--accent-rgb), 0.16);
    --text-primary: #e8f0f6;
    --text-secondary: #b3c1cf;
    --accent-color: #6bdcff;
    --accent-rgb: 107, 220, 255;
    --highlight-bg: rgba(15, 20, 30, 0.72);
    --card-shadow: var(--shadow-2);
    --card-hover-shadow: var(--shadow-1);
    --focus-ring: 0 0 0 4px rgba(var(--accent-rgb), 0.18);
    --panel-grid: rgba(150, 180, 210, 0.08);
    --panel-line: rgba(150, 180, 210, 0.16);
    --panel-glow: rgba(var(--accent-rgb), 0.2);
    --spot-a: 0.09;
}

[data-contrast="high"] {
    --text-primary: #17130f;
    --text-secondary: #2e2822;
    --glass-bg: rgba(255, 255, 255, 0.88);
    --glass-border: rgba(24, 20, 16, 0.22);
    --card-shadow: 0 30px 75px rgba(16, 12, 8, 0.22);
    --bg-opacity: 0.55;
}

[data-theme="dark"][data-contrast="high"] {
    --text-primary: #f5fbff;
    --text-secondary: #c8d5e2;
    --glass-bg: rgba(8, 12, 18, 0.82);
    --glass-border: rgba(200, 220, 240, 0.4);
    --card-shadow: 0 34px 90px rgba(0, 0, 0, 0.75);
    --bg-opacity: 0.65;
}

[data-lite="true"] .starfield-canvas,
[data-lite="true"] #shooting-star-canvas,
[data-lite="true"] #raindrop-canvas {
    display: none !important;
}

[data-lite="true"] .background-gradient,
[data-lite="true"] .background-gradient::before,
[data-lite="true"] .background-gradient::after {
    animation: none !important;
    filter: none !important;
}

[data-lite="true"] body::after {
    opacity: 0.12;
}

[data-lite="true"] .glass {
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}


/* --- 2. BASE & RESET STYLES / 基础与重置样式 --- */
/* ---------------------------------------------- */

* {
    margin: 0; /* 清除外边距 */
    padding: 0; /* 清除内边距 */
    box-sizing: border-box; /* 盒模型设为 border-box */
}

html {
    background-color: var(--bg-color); /* 背景色 */
    /* 过渡效果现在由 View Transitions API 处理 */
}

body {
    display: block;
    min-height: 100vh; /* 最小高度为视口高度 */
    padding: clamp(20px, 4.5vw, 40px); /* 响应式内边距 */
    overflow-x: hidden; /* 隐藏水平溢出 */
    font-family: var(--font-body); /* 默认字体栈 */
    color: var(--text-primary); /* 文本颜色 */
    -webkit-font-smoothing: antialiased; /* 抗锯齿（Chrome, Safari） */
    -moz-osx-font-smoothing: grayscale; /* 抗锯齿（Firefox） */
    text-rendering: optimizeLegibility; /* 优化文本渲染 */
    font-variant-numeric: lining-nums; /* 强制数字等高对齐 */
    letter-spacing: 0.2px;
    line-height: 1.55;
}

.is-latin,
[lang="en"] {
    font-family: var(--font-latin);
    letter-spacing: 0.6px;
}

::selection {
    background: rgba(var(--accent-rgb), 0.22); /* 文本选中背景色 */
}


/* --- 3. BACKGROUND & DECORATIVE ELEMENTS / 背景与装饰元素 --- */
/* ---------------------------------------------------------- */

.background-gradient {
    position: fixed; /* 固定定位 */
    inset: 0; /* 覆盖整个视口 */
    width: 100%;
    height: 100%;
    background-image: var(--bg-image); /* 背景图片 */
    background-size: cover; /* 背景覆盖 */
    background-position: center; /* 背景居中 */
    background-repeat: no-repeat; /* 背景不重复 */
    z-index: -1; /* 置于底层 */
    transition: background-image 0.5s ease-in-out; /* 背景图片过渡 */
    will-change: transform; /* 性能优化提示 */
    opacity: var(--bg-opacity);
}

/* 静态装饰性渐变 */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(900px circle at 50% 10%, rgba(0, 0, 0, 0.10), transparent 60%),
        radial-gradient(900px circle at 50% 100%, rgba(0, 0, 0, 0.16), transparent 60%);
    pointer-events: none; /* 不响应鼠标事件 */
    z-index: -1;
}

/* 细密网格与光晕纹理 */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(90deg, var(--panel-grid) 1px, transparent 1px),
        linear-gradient(180deg, var(--panel-grid) 1px, transparent 1px),
        radial-gradient(420px circle at 75% 10%, var(--panel-glow), transparent 60%);
    background-size: 100px 100px, 100px 100px, 100% 100%;
    opacity: 0.2;
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: -1;
}

[data-theme="dark"] body::before {
    background:
        radial-gradient(900px circle at 50% 10%, rgba(0, 0, 0, 0.35), transparent 60%),
        radial-gradient(900px circle at 50% 100%, rgba(0, 0, 0, 0.55), transparent 60%);
}

/* 动画装饰性渐变 */
.background-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(650px circle at 20% 25%, rgba(255, 255, 255, 0.14), transparent 62%),
        radial-gradient(780px circle at 80% 10%, rgba(var(--accent-rgb), 0.12), transparent 55%),
        radial-gradient(980px circle at 70% 95%, rgba(0, 0, 0, 0.18), transparent 62%);
    opacity: 0.35;
    pointer-events: none;
    will-change: transform, opacity;
    animation: floatBokeh 18s ease-in-out infinite; /* 浮动光斑动画 */
}

[data-theme="dark"] .background-gradient::before {
    background:
        radial-gradient(650px circle at 20% 25%, rgba(255, 255, 255, 0.08), transparent 65%),
        radial-gradient(780px circle at 80% 10%, rgba(var(--accent-rgb), 0.10), transparent 58%),
        radial-gradient(980px circle at 70% 95%, rgba(0, 0, 0, 0.50), transparent 62%);
    opacity: 0.46;
}

/* 鼠标交互式渐变 */
.background-gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px circle at var(--spot-x) var(--spot-y), rgba(var(--accent-rgb), var(--spot-a)), transparent 62%),
        radial-gradient(1000px circle at 50% 15%, rgba(255, 255, 255, 0.10), transparent 60%),
        radial-gradient(1100px circle at 25% 90%, rgba(0, 0, 0, 0.20), transparent 60%);
    opacity: 0.36;
    pointer-events: none;
    will-change: opacity, transform;
    animation: ambientGlow 14s ease-in-out infinite, bgBreathe var(--breathe-slow) ease-in-out infinite; /* 环境光和呼吸动画 */
}

[data-theme="dark"] .background-gradient::after {
    background:
        radial-gradient(900px circle at var(--spot-x) var(--spot-y), rgba(var(--accent-rgb), var(--spot-a)), transparent 65%),
        radial-gradient(1000px circle at 50% 15%, rgba(255, 255, 255, 0.08), transparent 62%),
        radial-gradient(1100px circle at 25% 90%, rgba(0, 0, 0, 0.55), transparent 62%);
    opacity: 0.48;
}

/* 用于 JS 效果的 Canvas */
.starfield-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    opacity: 0; /* 初始透明 */
    transition: opacity 0.8s ease-in-out; /* 透明度过渡 */
}

body.is-ready .starfield-canvas {
    opacity: 1; /* 页面准备好后显示 */
}

#starfield-layer1 { opacity: 0.7; } /* 星空层1透明度 */
#starfield-layer2 { opacity: 0.5; } /* 星空层2透明度 */
#starfield-layer3 { opacity: 0.3; } /* 星空层3透明度 */
#shooting-star-canvas { z-index: -1; opacity: 1; } /* 流星层 */
#raindrop-canvas { z-index: -1; opacity: 0.12; } /* 雨滴层 */


/* --- 4. LAYOUT / 布局 --- */
/* ----------------------- */

.parallax-container {
    perspective: 2000px; /* 3D 视差容器 */
    width: min(1240px, 100%);
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: clamp(18px, 2.8vw, 32px);
    padding: clamp(64px, 8vh, 100px) 0 clamp(36px, 6vh, 80px);
    position: relative;
    z-index: 0;
}

.parallax-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 32px;
    border: 1px solid var(--panel-line);
    opacity: 0.4;
    pointer-events: none;
    mask: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    z-index: 0;
}

.grid-container {
    display: grid; /* 12 列栅格 */
    --grid-gap: clamp(18px, 3vw, 32px);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap); /* 响应式间距 */
    align-items: start;
    width: 100%;
    max-width: 100%;
    padding: 0;
    position: relative;
    z-index: 1;
}

.layout-grid {
    min-height: 100%;
}

.nav-panel {
    grid-column: span 3;
    grid-row: 1 / span 2; /* Span 2 rows to stay sticky alongside bottom content */
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--accent-rgb), 0.32);
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.10), rgba(255, 255, 255, 0.02)),
        var(--surface-1);
    box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    position: sticky;
    top: clamp(16px, 3vw, 28px);
    align-self: start;
    min-height: clamp(420px, 60vh, 680px);
}

.nav-brand {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(var(--accent-rgb), 0.25);
}

.brand-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: 1px;
    color: var(--text-primary);
}

.brand-sub {
    font-size: 0.95rem;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}

.nav-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: 0.2px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

[data-theme="dark"] .nav-item {
    background: rgba(12, 18, 26, 0.7);
}

.nav-item i {
    font-size: 1rem;
    color: rgb(var(--accent-rgb));
}

.nav-item::before {
    content: '';
    width: 4px;
    height: 18px;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.7);
    opacity: 0;
    transition: opacity 0.2s var(--ease-out);
}

.nav-item::after {
    content: '';
    margin-left: auto;
    width: 12px;
    height: 2px;
    background: rgba(var(--accent-rgb), 0.5);
    border-radius: 999px;
    opacity: 0;
    transition: opacity 0.2s var(--ease-out), width 0.2s var(--ease-out);
}

.nav-item:hover {
    transform: translateY(-1px);
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow: 0 12px 26px rgba(var(--accent-rgb), 0.12);
}

.nav-item:hover::after {
    opacity: 1;
    width: 24px;
}

.nav-item.is-active {
    background: rgba(var(--accent-rgb), 0.28);
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 0 16px 32px rgba(var(--accent-rgb), 0.16);
}

.nav-item.is-active::before {
    opacity: 1;
}

.nav-item.is-active i {
    color: var(--accent-color);
}

.nav-item.is-active::after {
    opacity: 1;
    width: 28px;
    background: rgba(var(--accent-rgb), 0.8);
}

.nav-item:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.8);
    outline-offset: 3px;
}

.main-panel {
    grid-column: span 5;
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.8vw, 30px);
    align-self: stretch;
}

.side-panel {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2vw, 18px);
    align-self: stretch;
}

.side-panel .card {
    width: 100%;
}

.hitokoto-panel {
    grid-column: 1 / -1;
    margin-top: clamp(10px, 2vw, 18px);
    transition: padding-left 0.6s cubic-bezier(0.22, 1, 0.36, 1); /* Smooth transition */
}

/* When scrolled, indent the panel to accommodate sticky nav (Desktop only) */
@media (min-width: 961px) {
    body.is-scrolled .hitokoto-panel {
        /* Calculate indentation: 3 columns (25%) + 3 gaps - 2.75 gaps = 25% + 0.25 gap */
        /* Wait, logic check: 
           Width of 3 cols = 3 * ((100% - 11g)/12) + 2g
           Gap between nav and content = 1g
           Total indent = 3 * ((100% - 11g)/12) + 3g
           = (100% - 11g)/4 + 3g
           = 25% - 2.75g + 3g
           = 25% + 0.25g
        */
        padding-left: calc(25% + 0.25 * var(--grid-gap));
    }
}

.hitokoto-panel .card {
    width: 100%;
}

.side-panel .card-title {
    font-size: 0.82rem;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
}

.side-panel .card-meta {
    font-size: 0.78rem;
}

.layout-grid .card {
    --card-padding: var(--space-6);
}

.main-panel .card {
    --card-bg: var(--surface-1);
    --card-border: var(--surface-border-1);
    --card-shadow: var(--shadow-1);
    --card-blur: var(--blur-1);
}

.side-panel .card {
    --card-bg: var(--surface-3);
    --card-border: var(--surface-border-3);
    --card-shadow: var(--shadow-3);
    --card-blur: var(--blur-3);
}

/* .full-height is no longer needed, flex-grow on profile-card handles this. */


/* --- 5. BASE COMPONENT STYLES / 基础组件样式 --- */
/* ---------------------------------------------- */

/* 玻璃拟态基础样式 */
.glass {
    position: relative;
    overflow: clip; /* 防止伪元素溢出 */
    border-radius: var(--card-radius, var(--radius-lg));
    border: 1px solid var(--card-border, var(--glass-border));
    background: var(--card-bg, var(--glass-bg));
    backdrop-filter: blur(var(--card-blur, var(--blur-strength))) saturate(112%); /* 背景模糊和饱和度 */
    -webkit-backdrop-filter: blur(var(--card-blur, var(--blur-strength))) saturate(112%); /* Safari 兼容 */
    box-shadow:
        inset 0 1px 0 var(--glass-inset), /* 内阴影高光 */
        0 0 0 1px rgba(255, 255, 255, 0.04),
        var(--card-shadow, var(--shadow-2)); /* 外阴影 */
}

[data-theme="dark"] .glass {
    box-shadow:
        inset 0 1px 0 var(--glass-inset),
        0 0 0 1px rgba(255, 255, 255, 0.02),
        var(--card-shadow, var(--shadow-2));
}

/* 玻璃内部的“液体”效果 */
.glass::before {
    content: "";
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(180px 140px at 20% 30%, rgba(255, 255, 255, 0.18), transparent 62%),
        radial-gradient(220px 160px at 80% 40%, rgba(255, 255, 255, 0.12), transparent 65%),
        radial-gradient(320px 200px at 40% 85%, rgba(255, 255, 255, 0.08), transparent 72%);
    filter: blur(20px) saturate(130%);
    opacity: 0.6;
    animation: drift 14s ease-in-out infinite alternate; /* 漂移动画 */
    pointer-events: none;
}

[data-theme="dark"] .glass::before {
    background:
        radial-gradient(180px 140px at 20% 30%, rgba(255, 255, 255, 0.04), transparent 62%),
        radial-gradient(220px 160px at 80% 40%, rgba(255, 255, 255, 0.03), transparent 66%),
        radial-gradient(320px 200px at 40% 85%, rgba(255, 255, 255, 0.02), transparent 72%);
    opacity: 0.5;
}

/* 对角线高光效果 */
.glass::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background:
        linear-gradient(110deg,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.04) 38%,
        rgba(255, 255, 255, 0) 52%,
        rgba(255, 255, 255, 0.12) 82%,
        rgba(255, 255, 255, 0) 100%);
    mix-blend-mode: screen; /* 混合模式 */
    opacity: 0.7;
    pointer-events: none;
}

/* 卡片基础样式 */
.card {
    padding: var(--card-padding, var(--space-5));
    color: var(--text-primary);
    transform-style: preserve-3d; /* 保持 3D 变换 */
    will-change: transform;
    --card-radius: var(--radius-lg);
    --card-bg: var(--surface-2);
    --card-border: var(--surface-border-2);
    --card-blur: var(--blur-2);
    --card-shadow: var(--shadow-2);
    
    /* 用于 JS 交互的 CSS 变量 */
    --lift: 0px; /* 悬浮高度 */
    --enter-y: 0px; /* 入场 Y 偏移 */
    --tilt-x: 0deg; /* X 轴倾斜 */
    --tilt-y: 0deg; /* Y 轴倾斜 */
    --mx: 50%; /* 鼠标 X 坐标百分比 */
    --my: 15%; /* 鼠标 Y 坐标百分比 */
    --shine: 0; /* 光泽效果 */
    --magnetic-x: 0px; /* 磁性吸附 X */
    --magnetic-y: 0px; /* 磁性吸附 Y */
    --float-y: 0px; /* 浮动 Y */

    transform: perspective(900px) translate3d(var(--magnetic-x), calc(var(--lift) + var(--enter-y) + var(--magnetic-y) + var(--float-y)), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), filter 0.22s var(--ease-out), border-color 0.22s var(--ease-out);
}

.card:hover {
    --lift: -2px; /* 悬停时抬起 */
    --shine: 1;
    box-shadow: var(--card-hover-shadow), 0 0 0 1px rgba(255, 255, 255, 0.10) inset;
    filter: saturate(1.03) contrast(1.01);
}

.card:active {
    transform: perspective(900px) translate3d(0, calc(var(--lift) + 1px), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); /* 点击时下沉 */
}

.card--primary {
    --card-bg: var(--surface-1);
    --card-border: var(--surface-border-1);
    --card-blur: var(--blur-1);
    --card-shadow: var(--shadow-1);
}

.card--secondary {
    --card-bg: var(--surface-1);
    --card-border: var(--surface-border-2);
    --card-blur: var(--blur-1);
    --card-shadow: var(--shadow-2);
}

.card--tertiary {
    --card-bg: var(--surface-2);
    --card-border: var(--surface-border-2);
    --card-blur: var(--blur-2);
    --card-shadow: var(--shadow-2);
}

.card--tertiary:hover {
    --lift: -1px;
    filter: saturate(1.02);
}

.card--action {
    box-shadow: var(--shadow-2);
}

.card--ghost {
    --card-bg: transparent;
    --card-border: transparent;
    --card-shadow: none;
    --card-blur: 0px;
    padding: var(--space-3) 0;
    transform: none;
    transition: none;
    border-radius: 0;
}

.card--ghost.glass::before,
.card--ghost.glass::after {
    content: none;
}

.card--ghost.glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.card-header {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(var(--accent-rgb), 0.16);
}

.card-title {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    font-family: var(--font-display);
}

.card-meta {
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-secondary);
    letter-spacing: 0.2px;
}

.link-card:focus-visible,
#theme-toggle:focus-visible {
    outline: 2px solid var(--accent-color); /* 键盘聚焦样式 */
    outline-offset: 4px;
    box-shadow: var(--focus-ring), var(--card-hover-shadow);
}

#settings-toggle:focus-visible,
.toggle-switch:focus-visible,
.select-switch:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 4px;
    box-shadow: var(--focus-ring);
}


/* --- 6. SPECIFIC COMPONENT STYLES / 特定组件样式 --- */
/* ------------------------------------------------- */

/* 欢迎屏幕 */
#welcome-screen {
    position: fixed;
    inset: 0;
    z-index: 9999; /* 最高层级 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color); /* 欢迎页背景 */
    background-image: none !important; /* 确保无背景图干扰 */
    opacity: 1 !important; /* 强制不透明 */
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

#welcome-screen.hidden {
    opacity: 0;
    visibility: hidden; /* 隐藏欢迎屏幕 */
}

#welcome-text-container {
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--text-primary);
}

#welcome-text-container .cursor {
    display: inline-block;
    width: clamp(0.8rem, 2vw, 1.2rem);
    height: clamp(1.5rem, 4vw, 2.5rem);
    margin-left: 10px;
    background-color: var(--accent-color);
    animation: blink 1s step-end infinite; /* 光标闪烁动画 */
}

/* 个人资料卡片 (左列) */
.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: var(--card-padding, var(--space-6));
    text-align: center;
    min-height: clamp(420px, 60vh, 680px);
    cursor: default;
    --card-bg: var(--surface-1);
    --card-border: var(--surface-border-1);
}

.profile-card:hover {
    --lift: 0px;
    filter: none;
}

.profile-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 100%;
}

.profile-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.avatar-large {
    position: relative;
    width: 120px;
    height: 120px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    --halo-scale: 1;
    --halo-opacity: 0.65;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.15));
}

.avatar-large img {
    position: relative;
    z-index: 1;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

/* 头像光环效果 */
.avatar-large::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: conic-gradient(from 210deg, rgba(var(--accent-rgb), 0.0), rgba(var(--accent-rgb), 0.7), rgba(255, 255, 255, 0.35), rgba(var(--accent-rgb), 0.0));
    opacity: var(--halo-opacity);
    filter: blur(0.2px);
    transform: scale(var(--halo-scale));
    pointer-events: none;
    transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
}

.profile-name {
    margin: 6px 0 2px;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 2.9vw, 2.4rem);
    font-weight: 600;
    letter-spacing: 0.8px;
    color: var(--text-primary);
}

.profile-greeting {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.greeting-title {
    position: relative;
    overflow: hidden;
    min-height: 1.3em; /* 防止布局抖动 */
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.2px;
    color: var(--text-primary);
}

.greeting-sub {
    font-size: var(--type-caption);
    color: var(--text-secondary);
    opacity: 0.92;
}

.profile-desc-box {
    position: relative;
    overflow: hidden;
    width: min(240px, 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    background: rgba(var(--accent-rgb), 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1);
    font-size: var(--type-caption);
    text-align: center;
    color: var(--text-primary);
    align-self: center;
    line-height: 1.65;
}

[data-theme="dark"] .profile-desc-box {
    background: rgba(12, 18, 26, 0.7);
    border-color: rgba(var(--accent-rgb), 0.25);
}

.profile-desc-text {
    position: relative;
    top: -1px; /* 修正字体垂直对齐 */
}

/* 个人简介的扫光动画 */
.profile-desc-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transform: translateX(-150%);
    pointer-events: none;
    animation: shimmer 7s infinite 2.5s;
}

[data-theme="dark"] .profile-desc-box::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}

/* 链接卡片 (中列) */
.center-links {
    gap: clamp(18px, 2.8vw, 28px);
}

.link-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    padding: 18px 22px;
    min-height: 96px;
    text-decoration: none;
    --link-accent-rgb: var(--accent-rgb); /* 链接特定的强调色 */
    --card-border: rgba(var(--link-accent-rgb), 0.22);
}

.link-card::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(var(--link-accent-rgb), 0.75), transparent);
    opacity: 0.6;
}

.link-card:hover {
    --card-border: rgba(var(--link-accent-rgb), 0.4);
}

.link-card:active {
    transform: translateY(-1px) scale(0.99);
}

/* The link-card hover glow is now handled by the icon's pseudo-element.
   Removing this rule allows the link-card to inherit the default .glass::after highlight,
   which fixes the color inconsistency. */

.icon-circle {
    position: relative;
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--link-accent-rgb), 0.4);
    background: rgba(var(--link-accent-rgb), 0.16);
    box-shadow: 0 16px 30px rgba(var(--link-accent-rgb), 0.12);
    color: rgb(var(--link-accent-rgb));
    font-size: 1.6rem;
    transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out);
}

[data-theme="dark"] .icon-circle {
    background: rgba(var(--link-accent-rgb), 0.10);
}

.icon-circle i {
    transition: transform 0.22s var(--ease-out);
}

.icon-circle::after {
    content: '';
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), transparent 55%);
    opacity: 0.55;
    transform: rotate(-12deg);
    pointer-events: none;
}

.icon-circle::before {
    content: '';
    position: absolute;
    inset: -20px;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(var(--link-accent-rgb), 0.25), transparent 65%);
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.link-text {
    position: relative;
    top: -2px; /* 修正字体垂直对齐 */
    min-width: 80px; /* 防止布局抖动 */
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    font-weight: 600;
    letter-spacing: 0.2px;
    text-align: left;
    color: var(--text-primary);
    transition: transform 0.22s var(--ease-out);
    font-family: var(--font-display);
}

.link-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.link-desc {
    font-size: var(--type-caption);
    color: var(--text-secondary);
    letter-spacing: 0.2px;
    margin-top: 4px;
}

.link-text.is-scrambling {
    display: inline-block;
    width: var(--scramble-width);
    max-width: var(--scramble-width);
    overflow: hidden;
    white-space: nowrap;
}

.link-text .dud {
    display: inline-block;
    width: 1ch;
    text-align: center;
    font-family: "NasaDisplay", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.link-chevron {
    margin-left: auto; /* 推到最右边 */
    font-size: 1rem;
    color: var(--text-secondary);
    opacity: 0.45;
    transition: transform 0.22s var(--ease-out), opacity 0.22s var(--ease-out);
}

.link-card:hover .icon-circle {
    transform: translateY(-1px) scale(1.015);
    box-shadow: 0 18px 45px rgba(var(--link-accent-rgb), 0.14);
}

.link-card:hover .icon-circle::before {
    opacity: 1;
    transform: scale(1.15);
}

.link-card:hover .icon-circle i {
    transform: translateY(-1px) rotate(-8deg);
}

.link-card:hover .link-text {
    transform: translateY(-1px);
}

.link-card:hover .link-chevron {
    transform: translateX(2px);
    opacity: 0.9;
}

/* 时钟小工具 (右列) */
.clock-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 160px;
    padding: 24px 28px;
    gap: 10px;
    --card-border: rgba(var(--accent-rgb), 0.24);
    --card-bg: linear-gradient(130deg, rgba(var(--accent-rgb), 0.14), rgba(255, 255, 255, 0.02) 60%), var(--surface-2);
    --card-shadow: var(--shadow-2);
}

.clock-card .card-meta {
    font-family: var(--font-mono);
}


.clock-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    font-family: "NasaDisplay", var(--font-mono);
    font-variant-numeric: tabular-nums; /* 等宽数字 */
    letter-spacing: 1px;
}

.clock-part {
    font-family: inherit;
    font-size: clamp(3.2rem, 6vw, 4.8rem);
    font-weight: bold;
    line-height: 1;
    color: var(--text-primary);
    text-shadow: 0 18px 45px rgba(0, 0, 0, 0.10);
}

[data-theme="dark"] .clock-part {
    text-shadow: 0 20px 55px rgba(0, 0, 0, 0.55);
}

.clock-sep {
    font-family: inherit;
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    font-weight: bold;
    line-height: 1;
    color: var(--text-secondary);
    opacity: 0.45;
    animation: clockPulse 2.4s ease-in-out infinite; /* 时钟分隔符脉动动画 */
}

[data-theme="dark"] .clock-sep {
    opacity: 0.52;
}

.clock-part--second {
    font-size: clamp(2.2rem, 4vw, 3.3rem);
    opacity: 0.85;
}

/* 日期卡片 */
.date-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: var(--card-padding, var(--space-6));
    min-height: 135px;
    font-family: "Baskervville", "XinHuoTi", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
}

.date-card .card-title,
.date-card .card-meta {
    font-family: inherit;
}

.date-display {
    font-size: 1.2rem;
    letter-spacing: 0.4px;
    color: var(--text-primary);
    line-height: 1.4;
    text-align: center;
    width: 100%;
    font-family: "NasaDisplay", "Baskervville", "XinHuoTi", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
}

/* 天气小工具 */
.weather-card {
    padding: var(--card-padding, var(--space-6));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    min-height: 135px;
    opacity: 0; /* 初始隐藏，由 JS 控制显示 */
    transition: opacity 0.5s ease-in-out;
}

.weather-card:not([hidden]) {
    opacity: 1;
}

.weather-content {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "meta meta"
        "location temp"
        "desc temp";
    gap: 8px 14px;
    align-items: center;
    text-align: left;
}

.weather-meta {
    grid-area: meta;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    font-size: 0.8rem;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
    padding-bottom: 8px;
    margin-bottom: 6px;
    border-bottom: 1px dashed rgba(var(--accent-rgb), 0.16);
}

.weather-tag {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    background: rgba(var(--accent-rgb), 0.14);
    text-transform: uppercase;
    font-family: var(--font-display);
    letter-spacing: 0.6px;
}

.weather-source {
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--text-primary);
    font-weight: 600;
}

.weather-location {
    grid-area: location;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.2px;
    font-family: var(--font-latin), var(--font-body);
}

.weather-main {
    grid-area: temp;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    justify-self: end;
}

.weather-temp {
    font-family: var(--font-latin);
    font-size: 3.5rem;
    font-weight: bold;
    color: var(--text-primary);
    line-height: 1;
    text-align: right;
}

.weather-icon {
    font-size: 2.8rem;
    color: var(--accent-color);
    text-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.22);
}

.weather-description {
    grid-area: desc;
    font-size: 0.95rem;
    color: var(--text-primary);
    opacity: 0.9;
}

.side-panel .weather-main {
    justify-content: flex-end;
    gap: 10px;
}

.side-panel .weather-temp {
    font-size: 3rem;
}

.side-panel .weather-icon {
    font-size: 2.2rem;
}


/* 主题切换按钮 */
.theme-switch-wrapper {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
}

#theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    height: 40px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
    border: 1px solid var(--control-border);
    background: linear-gradient(135deg, var(--control-bg), rgba(255, 255, 255, 0.08));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.10) inset;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: bold;
    font-family: var(--font-body);
    letter-spacing: 0.6px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#theme-toggle[aria-pressed="true"] {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), rgba(255, 255, 255, 0.06));
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 0 18px 40px rgba(var(--accent-rgb), 0.18), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

#theme-toggle[aria-pressed="true"] i {
    color: var(--accent-color);
}

#theme-toggle[aria-pressed="false"] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06));
}

[data-theme="dark"] #theme-toggle {
    background: linear-gradient(135deg, var(--control-bg), rgba(255, 255, 255, 0.04));
    border-color: var(--control-border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

#theme-toggle:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.40);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

#theme-toggle:active {
    transform: translateY(-1px) scale(0.98);
}

#theme-toggle .theme-toggle-text {
    position: relative;
    top: -1.5px; /* 修正字体垂直对齐 */
}

#theme-toggle i {
    transition: transform 0.22s var(--ease-out);
}

#theme-toggle:hover i {
    transform: rotate(-12deg);
}


/* --- 7. ANIMATIONS / 动画 --- */
/* --------------------------- */

@property --enter-y {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

/* 初始卡片入场动画 */
body:not(.is-ready) .card {
    opacity: 0;
    filter: blur(10px) saturate(0.92);
    --enter-y: 14px;
}

body.is-ready .card {
    animation: glitchScanIn 1s var(--ease-out) both;
    animation-delay: calc(var(--stagger, 0) * 90ms); /* 错开动画 */
}

@keyframes glitchScanIn {
    0% {
        opacity: 0;
        transform: perspective(900px) translate3d(var(--magnetic-x), calc(var(--lift) + var(--enter-y) + var(--magnetic-y)), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(0.98);
        clip-path: inset(0 100% 0 0);
        filter: hue-rotate(20deg);
    }
    20% {
        opacity: 0.8;
        transform: perspective(900px) translate3d(var(--magnetic-x), calc(var(--lift) + var(--enter-y) + var(--magnetic-y) - 5px), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.01);
        text-shadow: 2px 0 0 red, -2px 0 0 cyan; /* 故障效果 */
    }
    60% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        filter: hue-rotate(0);
        text-shadow: none;
    }
    80% {
        transform: perspective(900px) translate3d(var(--magnetic-x), calc(var(--lift) + var(--enter-y) + var(--magnetic-y) + 2px), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1);
    }
    100% {
        opacity: 1;
        transform: perspective(900px) translate3d(var(--magnetic-x), calc(var(--lift) + var(--enter-y) + var(--magnetic-y)), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1);
    }
}

/* 问候语文字入场动画 */
.greeting-title span {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    animation: charFadeIn 0.5s forwards;
    animation-delay: calc(var(--char-index) * 0.05s); /* 字符错开动画 */
}

@keyframes charFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 通用环境动画 */
@keyframes blink {
    from, to { background-color: transparent; }
    50% { background-color: var(--accent-color); }
}

@keyframes ambientGlow {
    0% { opacity: 0.40; }
    50% { opacity: 0.62; }
    100% { opacity: 0.40; }
}

@keyframes bgBreathe {
    0%, 100% { transform: scale(1.02); }
    50% { transform: scale(1.04); }
}

@keyframes floatBokeh {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.02); opacity: 0.40; }
    50% { transform: translate3d(-1.2%, 0.8%, 0) scale(1.03); opacity: 0.55; }
}

@keyframes glassBreathe {
    0%, 100% { filter: blur(0px); }
    50% { filter: blur(0.4px); }
}

@keyframes drift {
    0%   { transform: translate(-2%, -3%) scale(1); }
    50%  { transform: translate(3%, 2%)  scale(1.03); }
    100% { transform: translate(-1%, 3%) scale(1.05); }
}

@keyframes clockPulse {
    0%, 100% { opacity: 0.46; }
    50% { opacity: 0.68; }
}

@keyframes shimmer {
    100% {
        transform: translateX(150%);
    }
}

@keyframes dash-flow {
    to {
        stroke-dashoffset: -200;
    }
}


/* --- 8. VIEW TRANSITIONS / 视图过渡 --- */
/* -------------------------------------- */

/* 禁用默认的浏览器淡入淡出动画 */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

/* 深色到浅色过渡时，旧的（深色）视图在顶部 */
[data-theme="light"]::view-transition-old(root) {
    z-index: 1;
}
[data-theme="light"]::view-transition-new(root) {
    z-index: 999;
}

/* 浅色到深色过渡时，新的（深色）视图在顶部 */
[data-theme="dark"]::view-transition-old(root) {
    z-index: 1;
}
[data-theme="dark"]::view-transition-new(root) {
    z-index: 999;
}


/* --- 9. SETTINGS PANEL / 设置面板 --- */
/* ------------------------------------ */

.settings-wrapper {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 100;
}

#settings-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    height: 40px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
    border: 1px solid var(--control-border);
    background: linear-gradient(135deg, var(--control-bg), rgba(255, 255, 255, 0.08));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.10) inset;
    color: var(--text-primary);
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#settings-toggle .icon-text {
    font-size: 0.9rem;
    letter-spacing: 0.4px;
}

[data-theme="dark"] #settings-toggle {
    background: linear-gradient(135deg, var(--control-bg), rgba(255, 255, 255, 0.04));
    border-color: var(--control-border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

#settings-toggle:hover {
    transform: translateY(-2px) rotate(15deg);
    border-color: rgba(255, 255, 255, 0.40);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

#settings-toggle:active {
    transform: translateY(-1px) scale(0.98) rotate(10deg);
}

#settings-panel {
    position: fixed;
    top: 70px;
    left: 20px;
    z-index: 101;
    width: 280px;
    padding: 20px;
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
    will-change: opacity, transform;
}

#settings-panel:not([hidden]) {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.settings-header h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

#settings-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#settings-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.settings-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.setting-item label {
    font-size: 1rem;
    color: var(--text-primary);
}

/* Custom Toggle Switch */
.toggle-switch {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.toggle-switch::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s var(--ease-out);
}

.toggle-switch:checked {
    background-color: var(--accent-color);
}

.toggle-switch:checked::before {
    transform: translateX(18px);
}

/* Custom Select Switch */
.select-switch {
    -webkit-appearance: none;
    appearance: none;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 6px 30px 6px 12px;
    color: #1f1f1f;
    font-size: 0.95rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23a0a0a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 1em;
    transition: all 0.2s ease;
}

[data-theme="dark"] .select-switch {
    background-color: rgba(18, 18, 20, 0.65);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.select-switch option {
    color: #1f1f1f;
    background-color: #f7f7f7;
}

[data-theme="dark"] .select-switch option {
    color: var(--text-primary);
    background-color: #1c1c1f;
}

.select-switch:hover {
    border-color: rgba(255, 255, 255, 0.35);
    background-color: rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .select-switch:hover {
    border-color: rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.85);
}

.select-switch:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2);
}


/* --- 10. FOOTER / 页脚 --- */
/* -------------------------- */

.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10;
    opacity: 0.82;
    transition: opacity 0.3s ease;
}

.site-footer:hover {
    opacity: 1;
}

[data-theme="dark"] .site-footer {
    background: rgba(8, 12, 18, 0.62);
}


/* --- 11. CLI EASTER EGG / CLI 彩蛋 --- */
/* ------------------------------------- */

@font-face {
    font-family: "JetBrains Mono";
    src:
        url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

#cli-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45);
    z-index: 200;
    color: #e0e0e0;
    font-family: "JetBrains Mono", "NasaDisplay", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.9rem;
    padding: 15px;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.4s var(--ease-out);
    --cli-accent: var(--accent-color);
    --cli-muted: var(--text-secondary);
}

#cli-container:not([hidden]) {
    transform: translateY(0);
}

#cli-output {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: anywhere;
    line-height: 1.45;
    font-variant-ligatures: none;
}

#cli-output::-webkit-scrollbar {
    width: 8px;
}

#cli-output::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

#cli-output::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.6);
    border-radius: 4px;
}

#cli-input-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cli-prompt {
    color: var(--cli-accent);
    margin-right: 8px;
    white-space: nowrap;
}

#cli-input {
    flex-grow: 1;
    background: none;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
}

#cli-input:focus {
    outline: none;
    caret-color: var(--accent-color);
}

#cli-output > div {
    padding: 2px 0;
}

#cli-output pre {
    margin: 0;
    font-family: inherit;
}

.cli-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cli-banner {
    white-space: pre;
    line-height: 1;
    letter-spacing: 0;
    font-weight: 700;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "calt" 0;
}

.cli-command {
    color: var(--cli-accent);
    font-weight: 600;
}

.cli-command-input {
    color: #e6edf3;
}

.cli-box {
    white-space: pre;
    font-family: inherit;
    line-height: 1.4;
    color: inherit;
}

@media (min-width: 961px) {
    #cli-container {
        height: 45%;
        background: linear-gradient(180deg, rgba(6, 8, 12, 0.75), rgba(6, 8, 12, 0.7));
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
            linear-gradient(180deg, rgba(6, 8, 12, 0.75), rgba(6, 8, 12, 0.7));
        background-size: 100% 3px, 100% 100%;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-top: 1px solid rgba(124, 255, 178, 0.18);
        box-shadow: 0 -16px 36px rgba(0, 0, 0, 0.5);
        color: #d7e0ea;
        --cli-accent: #7cffb2;
        --cli-muted: #9aa6b2;
    }

    .cli-banner {
        color: #e6edf3;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
    }
}

/* --- 音乐卡片重构样式 --- */
#music-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--card-padding, var(--space-6));
    width: 100%;
    max-width: 100%;
    margin: 0;
    min-height: 135px;
}

#music-card.card--ghost {
    padding: var(--space-3) 0;
}

#hitokoto-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 180px;
}

#music-card .music-card-header {
    margin-bottom: 8px;
}

#music-card .music-player-shell {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

#music-card .aplayer {
    width: 100%;
    margin: 0;
    background: transparent !important; /* 保持透明背景以适应玻璃效果 */
    box-shadow: none !important;
    border-radius: var(--radius-lg); /* 继承卡片圆角 */
    overflow: hidden;
}

#music-card .aplayer .aplayer-body {
    display: flex;
    align-items: center;
    gap: 10px; /* 封面和信息的间距 */
    padding: 10px; /* 统一内边距 */
}

#music-card .aplayer .aplayer-pic {
    flex-shrink: 0;
    width: 62px; /* 调整封面尺寸 */
    height: 62px;
    border-radius: 12px; /* 封面圆角 */
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s var(--ease-out);
}

#music-card .aplayer:hover .aplayer-pic {
    transform: scale(1.05) rotate(-3deg); /* 添加悬停效果 */
}

#music-card .aplayer .aplayer-info {
    flex: 1 1 auto; /* 占据剩余空间 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中内容 */
    min-width: 0; /* 防止 flex 子项溢出 */
    padding: 0 !important;
    margin: 0 !important; /* 彻底移除 APlayer 的默认边距 */
    border: none !important;
    height: auto !important; /* 确保高度自适应 */
}

#music-card .aplayer .aplayer-music {
    margin-bottom: 10px !important; /* 音乐信息和进度条之间的间距 */
    /* 移除固定高度和 flex 布局，让其自然堆叠 */
}

#music-card .aplayer .aplayer-title,
#music-card .aplayer .aplayer-author {
    white-space: normal; /* 允许文本换行 */
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4; /* 调整行高以获得更好的视觉效果 */
    width: 100%; /* 确保文本溢出正常工作 */
    word-break: break-all; /* 允许在任意字符间换行 */
}

#music-card .aplayer .aplayer-title {
    font-size: 0.95rem !important; /* 调整字体大小 */
    font-weight: 600;
    color: var(--text-primary) !important;
    margin-bottom: 4px; /* 标题和作者之间的间距 */
}

#music-card .aplayer .aplayer-author {
    font-size: 0.8rem !important;
    color: var(--text-secondary) !important;
}

#music-card .aplayer .aplayer-lrc {
    display: none; /* 始终隐藏歌词 */
}

#music-card .aplayer .aplayer-controller {
    display: flex;
    align-items: center;
    gap: 10px;
}

#music-card .aplayer .aplayer-bar-wrap {
    flex: 1;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- 通用 APlayer 颜色和细节调整 --- */
#music-card .aplayer .aplayer-controller .aplayer-time {
    color: var(--text-secondary) !important;
    font-size: 0.8rem !important;
    min-width: 56px;
    text-align: right;
}

#music-card .aplayer .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
    background: rgba(var(--accent-rgb), 0.2) !important;
}

#music-card .aplayer .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
    background: var(--accent-color) !important;
}

#music-card .aplayer .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
    background: var(--accent-color) !important;
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
}

#music-card .aplayer .aplayer-controller .aplayer-time .aplayer-icon {
    color: var(--text-secondary) !important;
    opacity: 0.7;
    transition: all 0.2s ease;
}

#music-card .aplayer .aplayer-controller .aplayer-time .aplayer-icon:hover {
    opacity: 1;
    color: var(--accent-color) !important;
}

/* 音乐加载失败时的容器排版 */
#music-card .music-player-container {
    width: 100%;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#music-card .music-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
}

#music-card .music-header i {
    color: var(--accent-color);
}

.card--ghost .music-header {
    font-weight: 500;
    font-size: var(--type-caption);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
}

#music-card .music-content {
    display: flex;
    justify-content: center;
}

/* 一言 (Hitokoto) 回退样式 */
.hitokoto-container {
    text-align: center;
    font-size: var(--type-caption);
    line-height: 1.6;
    width: 100%;
    color: var(--text-primary);
    padding: 10px; /* 为一言添加一些内边距 */
    border-radius: var(--radius-md);
}

.card--ghost .hitokoto-container {
    text-align: left;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    background: var(--surface-3);
    color: var(--text-secondary);
}

.hitokoto-text {
    margin: 0 0 0.5em;
    min-height: 2.2em; /* 预留至少两行的高度，防止切换时跳动 */
    display: inline-block; /* 让光标能紧随其后 */
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
}

.hitokoto-from {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: right;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    margin: 0.5em 0 0;
}

/* 打字机光标 */
.cursor {
    display: inline-block;
    width: 8px;
    height: 1em;
    background-color: var(--text-primary);
    margin-left: 4px;
    animation: blink 1s infinite;
    vertical-align: text-bottom;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}


/* --- 11.5. ERROR PAGE / 404 页面 --- */
/* -------------------------------- */

.error-page {
    position: relative;
    --error-border: rgba(18, 28, 38, 0.45);
    --error-surface: rgba(255, 255, 255, 0.82);
    --error-shadow: 0 20px 45px rgba(12, 18, 28, 0.18);
    --error-glow: rgba(var(--accent-rgb), 0.12);
    font-family: "Baskervville", "XinHuoTi", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
}

[data-theme="dark"] .error-page {
    --error-border: rgba(210, 230, 245, 0.4);
    --error-surface: rgba(10, 14, 20, 0.78);
    --error-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
    --error-glow: rgba(var(--accent-rgb), 0.18);
}

.error-shell {
    width: min(900px, 100%);
    margin: 0 auto;
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 4vw, 28px);
    padding: clamp(80px, 12vh, 140px) 0 90px;
    position: relative;
    z-index: 1;
}

.error-card {
    width: 100%;
    text-align: center;
    padding: clamp(40px, 6vw, 70px);
    --card-radius: 34px;
    --card-bg: var(--error-surface);
    --card-border: var(--error-border);
    --card-shadow: var(--error-shadow);
    border-width: 2px;
    box-shadow: var(--card-shadow), 0 0 0 1px rgba(var(--accent-rgb), 0.08) inset;
}

.error-label {
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.error-code {
    font-family: var(--font-display);
    font-size: clamp(3.6rem, 8vw, 6.2rem);
    letter-spacing: 8px;
    color: var(--text-primary);
    text-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
    margin-bottom: 18px;
}

.error-desc {
    font-size: 1.05rem;
    color: var(--text-secondary);
    letter-spacing: 0.2px;
}

.error-cta {
    width: min(760px, 100%);
    text-align: center;
    padding: 20px 24px;
    --card-radius: 26px;
    --card-bg: color-mix(in srgb, var(--error-surface) 80%, rgba(var(--accent-rgb), 0.12));
    --card-border: var(--error-border);
    --card-shadow: var(--shadow-2);
    border-width: 2px;
    box-shadow: var(--shadow-2), 0 0 0 1px rgba(var(--accent-rgb), 0.08) inset;
}

.error-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: 0.4px;
}

.error-home:hover {
    color: var(--accent-color);
}

.error-home:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 4px;
}


/* --- 11.6 STATUS PAGE / 状态面板 --- */
/* ---------------------------------- */

.status-page {
    position: relative;
    font-family: "Baskervville", "XinHuoTi", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
}

.status-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(900px circle at 15% 10%, rgba(0, 0, 0, 0.35), transparent 55%),
        radial-gradient(900px circle at 80% 90%, rgba(0, 0, 0, 0.45), transparent 60%);
    pointer-events: none;
    z-index: -1;
}

.status-shell {
    width: min(1240px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 4vw, 36px);
    padding: clamp(70px, 10vh, 120px) 0 90px;
    position: relative;
    z-index: 1;
}

.status-header {
    position: relative;
    display: grid;
    gap: 16px;
    padding: clamp(28px, 5vw, 42px);
    --card-radius: 26px;
    --card-bg: color-mix(in srgb, var(--surface-1) 88%, rgba(0, 0, 0, 0.08));
    --card-border: rgba(var(--accent-rgb), 0.3);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.status-header::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.02) 45%, transparent 70%),
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), transparent 55%);
    pointer-events: none;
    opacity: 0.8;
}

.status-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    background: rgba(255, 255, 255, 0.78);
    color: var(--text-primary);
    font-size: 0.85rem;
    text-decoration: none;
    width: fit-content;
    transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

[data-theme="dark"] .status-back {
    background: rgba(10, 16, 24, 0.7);
}

.status-back:hover {
    transform: translateY(-1px);
    background: rgba(var(--accent-rgb), 0.12);
}

.status-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    letter-spacing: 1.6px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.status-kicker-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(var(--accent-rgb), 0.18);
    color: var(--accent-color);
}

.status-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.2rem);
    letter-spacing: 1.2px;
    color: var(--text-primary);
}

.status-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.status-pill.status-ok {
    color: #1a7a4b;
    border-color: rgba(26, 122, 75, 0.35);
    background: rgba(26, 122, 75, 0.12);
}

.status-pill.status-bad {
    color: #c93d3d;
    border-color: rgba(201, 61, 61, 0.35);
    background: rgba(201, 61, 61, 0.12);
}

.status-pill.status-warn {
    color: #a77a1b;
    border-color: rgba(167, 122, 27, 0.35);
    background: rgba(167, 122, 27, 0.12);
}

.status-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.status-age {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(120, 120, 120, 0.3);
    background: rgba(120, 120, 120, 0.12);
    color: var(--text-secondary);
}

.status-age.is-ok {
    border-color: rgba(26, 122, 75, 0.35);
    background: rgba(26, 122, 75, 0.12);
    color: #1a7a4b;
}

.status-age.is-warn {
    border-color: rgba(167, 122, 27, 0.35);
    background: rgba(167, 122, 27, 0.12);
    color: #a77a1b;
}

.status-age.is-bad {
    border-color: rgba(201, 61, 61, 0.35);
    background: rgba(201, 61, 61, 0.12);
    color: #c93d3d;
}

.status-overall {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border: 1px solid transparent;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.status-overall.status-ok {
    color: #1a7a4b;
    border-color: rgba(26, 122, 75, 0.4);
    background: rgba(26, 122, 75, 0.15);
}

.status-overall.status-bad {
    color: #c93d3d;
    border-color: rgba(201, 61, 61, 0.4);
    background: rgba(201, 61, 61, 0.15);
}

.status-overall.status-unknown {
    color: var(--text-secondary);
    border-color: rgba(120, 120, 120, 0.3);
    background: rgba(120, 120, 120, 0.12);
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(14px, 2.6vw, 22px);
}

.status-card {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 210px;
    --card-radius: 20px;
    --card-bg: color-mix(in srgb, var(--surface-2) 90%, rgba(0, 0, 0, 0.08));
    --card-border: rgba(255, 255, 255, 0.08);
    --card-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
}

.status-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.status-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(320px circle at 20% 10%, rgba(var(--accent-rgb), 0.18), transparent 60%);
    opacity: 0.6;
    pointer-events: none;
}

.status-card.is-ok {
    border-color: rgba(26, 122, 75, 0.35);
    box-shadow: 0 16px 36px rgba(26, 122, 75, 0.18), var(--card-shadow);
}

.status-card.is-bad {
    border-color: rgba(201, 61, 61, 0.35);
    box-shadow: 0 16px 36px rgba(201, 61, 61, 0.2), var(--card-shadow);
}

.status-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.status-card-name-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.status-card-name {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.status-card-url {
    font-size: 0.8rem;
    color: var(--text-secondary);
    word-break: break-all;
}

.status-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-state {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    border: 1px solid transparent;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
    flex-shrink: 0;
}

[data-theme="dark"] .status-state {
    background: rgba(10, 16, 24, 0.7);
}

.status-state.is-ok {
    border-color: rgba(26, 122, 75, 0.4);
    color: #1a7a4b;
}

.status-state.is-bad {
    border-color: rgba(201, 61, 61, 0.4);
    color: #c93d3d;
}

.status-state.is-unknown {
    border-color: rgba(120, 120, 120, 0.35);
    color: var(--text-secondary);
}

.status-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    color: var(--text-primary);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.85);
    transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

[data-theme="dark"] .status-card-link {
    background: rgba(10, 16, 24, 0.7);
}

.status-card-link:hover {
    transform: translateY(-1px);
    background: rgba(var(--accent-rgb), 0.12);
}

.status-card-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    font-size: 0.9rem;
}

.status-metric {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.12);
}

.status-metric-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    letter-spacing: 0.4px;
}

.status-metric-value {
    font-size: 1.05rem;
    font-family: var(--font-mono);
}

.status-history {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    align-items: end;
    height: 36px;
}

.status-bar {
    height: 100%;
    border-radius: 3px;
    background: rgba(120, 120, 120, 0.18);
}

.status-bar.is-ok {
    background: rgba(26, 122, 75, 0.65);
}

.status-bar.is-bad {
    background: rgba(201, 61, 61, 0.65);
}

/* --- 12. RESPONSIVE & ACCESSIBILITY / 响应式与可访问性 --- */
/* --------------------------------------------------------- */

@media (max-width: 960px) {
    /* 在移动端隐藏星空背景以提升性能 */
    .starfield-canvas {
        display: none;
    }

    .error-shell {
        min-height: auto;
        padding-top: 90px;
        padding-bottom: 70px;
    }

    .error-card,
    .error-cta {
        width: 100%;
    }

    .status-shell {
        padding-top: 90px;
        padding-bottom: 70px;
    }

    .status-header {
        padding-top: 70px;
    }

    .status-back {
        position: static;
        align-self: flex-start;
    }

    .status-overall {
        position: static;
        justify-self: start;
    }

    body {
        padding: 16px;
    }
    .theme-switch-wrapper {
        top: 14px;
        right: 14px;
    }
    .parallax-container {
        padding-top: 90px;
        padding-bottom: 60px;
    }
    .grid-container {
        grid-template-columns: 1fr; /* 在小屏幕上变为单列布局 */
    }
    .nav-panel {
        position: relative;
        top: auto;
        grid-column: 1 / -1;
        padding: 20px 18px;
    }
    .nav-list {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .nav-item {
        flex: 1 1 48%;
        justify-content: flex-start;
    }
    .main-panel {
        grid-column: 1 / -1;
    }
    .side-panel {
        grid-column: 1 / -1;
    }
    .hitokoto-panel {
        grid-column: 1 / -1;
    }

    /* Mobile optimizations for Article List */
    .article-link {
        padding: 10px 8px;
    }
    .article-title {
        font-size: 0.95rem;
    }
    .article-item:hover {
        transform: none; /* Disable slide on touch devices */
    }

    .profile-card {
        padding: 34px 18px;
        align-items: center;
        text-align: center;
    }
    .profile-content-wrapper {
        align-items: center;
    }
    .profile-text {
        align-items: center;
    }
    .profile-greeting {
        align-items: center;
    }
    .profile-desc-box {
        text-align: center;
    }
}

/* 减少动画的媒体查询 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
    body:not(.is-ready) .card {
        opacity: 1;
        filter: none;
        --enter-y: 0px;
    }
    .card:hover,
    #theme-toggle:hover {
        transform: none;
    }
    .background-gradient {
        transform: none !important;
    }
}

/* Latest Articles Widget */
.article-list {
    list-style: none;
    padding: 0 4px; /* Add side padding */
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px; /* Small gap between items */
}

.article-item {
    border-bottom: 1px solid var(--surface-border-2);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother bezier */
    border-radius: 8px; /* Rounded corners */
}

.article-item:last-child {
    border-bottom: none;
}

.article-item:hover {
    background-color: rgba(var(--accent-rgb), 0.08); /* Subtle accent glow */
    border-color: transparent;
    transform: translateX(4px); /* Smooth slide */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* Soft shadow */
}

.article-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: var(--text-primary);
    padding: 12px 8px; /* Increased padding */
    font-size: var(--type-body);
    width: 100%;
    transition: color 0.3s ease;
}

.article-link:hover {
    color: var(--accent);
}

.article-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: var(--space-2);
    font-weight: 500;
    font-family: var(--font-body); /* Ensure consistent font */
}

.article-action {
    font-size: 0.85em;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s, color 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.article-link:hover .article-action {
    opacity: 1;
    color: var(--accent);
    transform: translateX(2px);
}

#latest-articles-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px dashed var(--surface-border-2);
}

#latest-articles-card .card-title {
    font-size: var(--type-title);
    font-weight: 600;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 12px;
}

#latest-articles-card .card-title::before {
    content: '';
    position: absolute;
    left: 0;
    width: 4px;
    height: 70%;
    background-color: var(--accent);
    border-radius: 2px;
}

#latest-articles-card .card-more-link {
    font-size: var(--type-caption);
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    font-weight: 500;
}

#latest-articles-card .card-more-link:hover {
    color: var(--accent);
    transform: translateX(2px);
}

#latest-articles-card .card-more-link i {
    font-size: 0.8em;
}


/* Adjust spacing for cards in hitokoto-panel */
.hitokoto-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}


.article-date {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-right: var(--space-3);
    white-space: nowrap;
    font-family: var(--font-mono);
    opacity: 0.8;
    flex-shrink: 0;
}