/* ============================================================
   Spark 模拟系统 · 深夜桌面主题样式表
   设计语言：模拟 OS 桌面 —— 窗口标题栏 / 启动画面 / 任务栏
   ============================================================ */

/* ===== 设计令牌（亮色 · 日间桌面） ===== */
:root {
    --accent: #0B7A84;            /* 系统光 · 青色 */
    --accent-strong: #085E66;
    --accent-soft: rgba(11, 122, 132, 0.12);
    --accent-glow: rgba(11, 122, 132, 0.28);
    --accent-2: #B5660A;          /* 状态灯 · 琥珀 */
    --accent-2-soft: rgba(181, 102, 10, 0.12);
    --accent-3: #1F8A4C;          /* 状态灯 · 绿 */
    --accent-3-soft: rgba(31, 138, 76, 0.12);
    --danger: #D64545;

    --ink: #16203B;
    --ink-soft: #4E5B78;
    --ink-faint: #7C88A3;
    --line: rgba(22, 32, 59, 0.12);
    --line-strong: rgba(22, 32, 59, 0.2);

    --panel: rgba(255, 255, 255, 0.72);
    --panel-strong: rgba(255, 255, 255, 0.88);
    --panel-solid: #F7FAFD;
    --card-bg: rgba(255, 255, 255, 0.5);
    --card-bg-hover: rgba(255, 255, 255, 0.7);
    --bar-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.32));
    --field-bg: #FFFFFF;
    --track: rgba(22, 32, 59, 0.1);
    --boot-bg: #E9EEF7;
    --bg-body: #E9EEF7;

    --shadow-sm: 0 1px 2px rgba(5, 8, 20, 0.05), 0 4px 14px rgba(5, 8, 20, 0.07);
    --shadow-md: 0 10px 34px rgba(5, 8, 20, 0.14);
    --shadow-lg: 0 24px 70px rgba(5, 8, 20, 0.22);
    --shadow-glow: 0 10px 40px -10px var(--accent-glow);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 26px;

    --font-display: 'Chakra Petch', 'Noto Sans SC', sans-serif;
    --font-body: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== 设计令牌（暗色 · 深夜桌面） ===== */
body.dark-theme {
    --accent: #4FD8EB;
    --accent-strong: #7FE6F2;
    --accent-soft: rgba(79, 216, 235, 0.14);
    --accent-glow: rgba(79, 216, 235, 0.3);
    --accent-2: #FFB454;
    --accent-2-soft: rgba(255, 180, 84, 0.14);
    --accent-3: #7CE38B;
    --accent-3-soft: rgba(124, 227, 139, 0.14);
    --danger: #FF7B7B;

    --ink: #E9EFFF;
    --ink-soft: #96A3C4;
    --ink-faint: #66739A;
    --line: rgba(233, 239, 255, 0.12);
    --line-strong: rgba(233, 239, 255, 0.22);

    --panel: rgba(15, 22, 40, 0.62);
    --panel-strong: rgba(15, 22, 40, 0.9);
    --panel-solid: #10182E;
    --card-bg: rgba(255, 255, 255, 0.035);
    --card-bg-hover: rgba(255, 255, 255, 0.07);
    --bar-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
    --field-bg: #0C1226;
    --track: rgba(233, 239, 255, 0.1);
    --boot-bg: #070B16;
    --bg-body: #0A0F1E;

    --shadow-sm: 0 1px 2px rgba(2, 4, 12, 0.3), 0 4px 14px rgba(2, 4, 12, 0.3);
    --shadow-md: 0 10px 34px rgba(2, 4, 12, 0.45);
    --shadow-lg: 0 24px 70px rgba(2, 4, 12, 0.55);
}

/* ===== 基础样式 ===== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

html.dialog-open body {
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--bg-body);
    scroll-behavior: smooth;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    scrollbar-gutter: stable;
    transition: background-color 0.3s ease, color 0.3s ease, scrollbar-color 0.3s ease;
    -webkit-font-smoothing: antialiased;
}

body:hover {
    scrollbar-color: var(--accent-soft) transparent;
}

body::-webkit-scrollbar {
    width: 6px;
}

body::-webkit-scrollbar-track {
    background: transparent;
}

body::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
    transition: background 0.3s ease;
}

body:hover::-webkit-scrollbar-thumb {
    background: var(--accent-soft);
}

body:hover::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ===== 桌面画布 ===== */
.background-container {
    background-image: url('https://bing.biturl.top/?resolution=1920&format=image');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 桌面滤镜：叠加渐变以保证文字可读性 */
.background-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(233, 238, 247, 0.88) 0%, rgba(233, 238, 247, 0.8) 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 0;
}

body.dark-theme .background-container::before {
    background: linear-gradient(180deg, rgba(7, 11, 22, 0.88) 0%, rgba(7, 11, 22, 0.82) 100%);
}

/* ===== 粒子背景 ===== */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.25;
    }
    25% {
        transform: translateY(-30px) translateX(15px) scale(1.15);
        opacity: 0.55;
    }
    50% {
        transform: translateY(-10px) translateX(-10px) scale(0.9);
        opacity: 0.4;
    }
    75% {
        transform: translateY(-40px) translateX(20px) scale(1.05);
        opacity: 0.6;
    }
}

/* ============================================================
   启动画面（加载动画）
   ============================================================ */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 50% 40%, var(--accent-soft) 0%, transparent 55%),
        var(--boot-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.45s ease;
}

/* 兼容 download.html 的简单转圈加载 */
.loader {
    width: 44px;
    height: 44px;
    border: 3px solid var(--track);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    box-shadow: 0 0 24px var(--accent-glow);
}

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

/* 启动画面内容（index.html 使用） */
.boot-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    user-select: none;
}

.boot-logo {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    object-fit: cover;
    border: 1px solid var(--line-strong);
    box-shadow: 0 0 0 5px var(--accent-soft), 0 14px 44px var(--accent-glow);
    animation: bootPulse 1.6s ease-in-out infinite;
}

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

.boot-name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 8px;
    color: var(--ink);
    text-indent: 8px;
}

.boot-name .boot-dot {
    color: var(--accent);
    animation: blink 1s steps(1) infinite;
}

.boot-bar {
    width: 230px;
    height: 3px;
    background: var(--track);
    border-radius: 2px;
    overflow: hidden;
}

.boot-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    animation: bootFill 1.1s var(--ease-out) forwards;
}

@keyframes bootFill {
    to { width: 100%; }
}

.boot-status {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--ink-soft);
}

.boot-cursor {
    color: var(--accent);
    animation: blink 1s steps(1) infinite;
}

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

/* ============================================================
   Header（桌面顶栏窗口）
   ============================================================ */
header {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    margin: 18px 26px 0;
    background: var(--panel);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

header:hover {
    box-shadow: var(--shadow-lg);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.logo-wrapper {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    position: relative;
    z-index: 1;
    border: 1px solid var(--line);
    box-shadow: 0 4px 14px var(--accent-glow);
}

.logo-glow {
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    background: radial-gradient(circle, var(--accent-glow), transparent 70%);
    filter: blur(10px);
    animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.05); }
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.brand-text h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--ink);
    white-space: nowrap;
}

.brand-text .highlight {
    background: linear-gradient(100deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subtitle {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-faint);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ===== 导航 ===== */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 4px;
}

nav ul li a {
    text-decoration: none;
    color: var(--ink-soft);
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

nav ul li a i {
    font-size: 13px;
    opacity: 0.8;
}

nav ul li a:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

nav ul li a.active {
    color: var(--accent);
}

nav ul li a.active::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    box-shadow: 0 0 8px var(--accent-glow);
}

/* 移动端菜单按钮 */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 22px;
    color: var(--ink);
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 10px;
    transition: var(--transition);
}

.mobile-menu-btn:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

/* ===== Main ===== */
main {
    position: relative;
    z-index: 5;
    flex-grow: 1;
    padding: 26px;
    max-width: 1060px;
    width: 100%;
    margin: 0 auto;
}

main > section {
    opacity: 0;
    animation: fadeInUp 0.7s var(--ease-out) forwards;
}

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

/* ============================================================
   窗口（内容区块的统一外框）
   ============================================================ */
.window {
    position: relative;
    background: var(--panel);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.window:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--line-strong);
}

/* 窗口标题栏 */
.window-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    background: var(--bar-grad);
    border-bottom: 1px solid var(--line);
    transition: background var(--transition);
}

.window-bar:hover {
    background: linear-gradient(180deg, var(--accent-soft), rgba(255, 255, 255, 0.02));
}

/* 交通灯圆点 */
.window-dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.window-dots i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: block;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.dot-r { background: #FF5F57; }
.dot-y { background: #FEBC2E; }
.dot-g { background: #28C840; }

.window-bar:hover .dot-r { box-shadow: 0 0 8px #FF5F57; transform: scale(1.15); }
.window-bar:hover .dot-y { box-shadow: 0 0 8px #FEBC2E; transform: scale(1.15); }
.window-bar:hover .dot-g { box-shadow: 0 0 8px #28C840; transform: scale(1.15); }

.window-title {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.window-status {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--ink-faint);
    flex-shrink: 0;
    white-space: nowrap;
}

.window-body {
    padding: 24px 26px;
}

/* ===== 区块图标（标题栏内） ===== */
.section-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 8px;
    font-size: 13px;
    flex-shrink: 0;
}

/* ===== Hero（启动窗口） ===== */
.hero-section {
    text-align: center;
    margin-bottom: 26px;
    animation-delay: 0.05s;
}

.hero-section .window-body {
    padding: 46px 40px 42px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.hero-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-3);
    box-shadow: 0 0 8px var(--accent-3);
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(30px, 5vw, 50px);
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0 0 10px;
    color: var(--ink);
    line-height: 1.15;
}

.gradient-text {
    background: linear-gradient(100deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-desc {
    font-size: 16px;
    color: var(--ink-soft);
    margin: 0 0 30px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    border: 1px solid transparent;
    font-family: var(--font-body);
}

.hero-btn.primary {
    background: linear-gradient(120deg, var(--accent), var(--accent-strong));
    color: #FFFFFF;
    box-shadow: 0 6px 22px var(--accent-glow);
}

.hero-btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 34px var(--accent-glow);
}

.hero-btn.secondary {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    color: var(--ink);
    border-color: var(--line-strong);
}

.hero-btn.secondary:hover {
    background: var(--card-bg-hover);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-3px);
}

/* Hero 装饰形状 */
.hero-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.floating-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.35;
    filter: blur(1px);
}

.shape-1 {
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, var(--accent-glow), transparent 70%);
    top: -60px;
    right: -40px;
    animation: float 9s ease-in-out infinite;
}

.shape-2 {
    width: 110px;
    height: 110px;
    background: radial-gradient(circle, var(--accent-2-soft), transparent 70%);
    bottom: -30px;
    left: -20px;
    animation: float 7s ease-in-out infinite reverse;
}

.shape-3 {
    width: 70px;
    height: 70px;
    background: radial-gradient(circle, var(--accent-3-soft), transparent 70%);
    top: 46%;
    left: 12%;
    animation: float 10s ease-in-out infinite 2s;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-18px) rotate(8deg); }
}

/* ===== 内容区块 ===== */
.content-section {
    margin-bottom: 26px;
    animation-delay: 0.1s;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.section-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
}

.section-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--line-strong), transparent);
    margin-left: 8px;
}

.section-body {
    color: var(--ink-soft);
    line-height: 1.85;
    font-size: 15px;
}

/* ===== 文字卡片 ===== */
.text-card {
    position: relative;
    padding: 22px 24px;
    background: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    transition: var(--transition);
}

.text-card:hover {
    background: var(--card-bg-hover);
    border-color: var(--line-strong);
}

.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 16px;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 10px;
    margin-bottom: 12px;
}

.text-card p {
    margin: 0;
    line-height: 1.95;
}

/* ===== 时间轴（历史脉络） ===== */
.timeline {
    position: relative;
    padding-left: 52px;
    margin: 10px 0 4px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(180deg, var(--accent), var(--accent-2), var(--track));
    border-radius: 2px;
}

.timeline-row {
    position: relative;
    padding-bottom: 24px;
}

.timeline-row:last-child {
    padding-bottom: 2px;
}

.timeline-dot {
    position: absolute;
    left: -42px;
    top: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--panel-solid);
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
    z-index: 1;
}

.timeline-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 2px 10px;
    border-radius: 999px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.timeline-row:nth-child(3) .timeline-tag { color: var(--accent-2); background: var(--accent-2-soft); }
.timeline-row:nth-child(4) .timeline-tag { color: var(--accent-3); background: var(--accent-3-soft); }
.timeline-row:nth-child(5) .timeline-tag { color: var(--accent-2); background: var(--accent-2-soft); }

.timeline-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 3px;
}

.timeline-body {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.75;
}

/* ===== 部署网格 ===== */
.deploy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 18px;
}

.deploy-card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: var(--transition);
}

.deploy-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    background: var(--card-bg-hover);
    border-color: var(--line-strong);
}

.deploy-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--bar-grad);
}

.deploy-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-3), #1F8A4C);
    border-radius: 10px;
    color: white;
    font-size: 17px;
    box-shadow: 0 4px 14px var(--accent-3-soft);
}

.deploy-icon.windows {
    background: linear-gradient(135deg, #2E86C1, #1B6CA8);
    box-shadow: 0 4px 14px rgba(46, 134, 193, 0.3);
}

.deploy-card-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
}

.deploy-card-body {
    padding: 18px 20px;
}

.deploy-card-body p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.7;
}

.deploy-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.deploy-link:hover {
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.deploy-image-wrapper {
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-top: 8px;
    border: 1px solid var(--line);
}

.deploy-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
    transition: transform 0.4s var(--ease-out);
}

.deploy-image:hover {
    transform: scale(1.02);
}

/* ===== 命令块 ===== */
.command-block {
    margin-top: 16px;
}

.command-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--ink-faint);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.command-box {
    display: flex;
    align-items: center;
    background: var(--field-bg);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    transition: var(--transition);
}

.command-box:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.command-box code {
    flex: 1;
    font-size: 12px;
    color: var(--ink);
    font-family: var(--font-mono);
    word-break: break-all;
}

.copy-btn {
    background: none;
    border: none;
    color: var(--ink-faint);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 7px;
    transition: var(--transition);
    font-size: 14px;
    flex-shrink: 0;
}

.copy-btn:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

/* ===== 部署提示 ===== */
.deploy-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--ink-soft);
    border: 1px dashed var(--line-strong);
}

.deploy-note i {
    color: var(--accent-2);
    font-size: 15px;
}

/* ===== 下载模拟窗口（部署指引内嵌的“下载管理器”小窗口） ===== */
.download-sim {
    margin-top: 10px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--panel-solid);
    box-shadow: var(--shadow-sm);
}

.dl-win-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bar-grad);
    border-bottom: 1px solid var(--line);
}

.dl-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dl-dot-r { background: #FF5F57; }
.dl-dot-y { background: #FEBC2E; }
.dl-dot-g { background: #28C840; }

.dl-win-title {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--ink);
    font-family: var(--font-mono);
}

.dl-win-body {
    padding: 14px;
}

.dl-file {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dl-file-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-3), #1F8A4C);
    box-shadow: 0 3px 10px var(--accent-3-soft);
    flex-shrink: 0;
}

.dl-file-icon.windows {
    background: linear-gradient(135deg, #2E86C1, #1B6CA8);
    box-shadow: 0 3px 10px rgba(46, 134, 193, 0.3);
}

.dl-file-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dl-file-name {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    word-break: break-all;
}

.dl-file-meta {
    font-size: 11px;
    color: var(--ink-faint);
}

.dl-file-status {
    color: var(--accent-3);
    font-size: 15px;
    flex-shrink: 0;
}

.dl-progress {
    margin-top: 12px;
    height: 6px;
    border-radius: 999px;
    background: var(--field-bg);
    border: 1px solid var(--line);
    overflow: hidden;
}

.dl-progress-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-3));
    animation: dlPulse 2.4s ease-in-out infinite;
}

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

.dl-tip {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--ink-soft);
    font-family: var(--font-mono);
}

.dl-tip i {
    color: var(--accent-3);
    font-size: 12px;
}

/* ============================================================
   Footer（任务栏）
   ============================================================ */
footer {
    position: relative;
    z-index: 10;
    margin: 10px 26px 26px;
    padding: 14px 20px;
    background: var(--panel-strong);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}

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

.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-logo {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--line);
}

.footer-brand span {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--ink);
}

.footer-actions {
    display: flex;
    gap: 10px;
}

.footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    color: var(--ink-soft);
    background: var(--card-bg);
    font-family: var(--font-body);
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}

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

.footer-btn::before {
    content: '';
    position: absolute;
    top: var(--mouse-y, 50%);
    left: var(--mouse-x, 50%);
    width: 0;
    height: 0;
    background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: width 0.4s ease-out, height 0.4s ease-out, opacity 0.3s ease;
    pointer-events: none;
}

.footer-btn:hover::before {
    width: 180px;
    height: 180px;
    opacity: 1;
}

.footer-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

.feedback-btn i { color: var(--accent-3); }
.theme-btn i { color: var(--accent-2); }

.footer-copyright {
    font-size: 12px;
    color: var(--ink-faint);
    width: 100%;
    text-align: center;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid var(--line);
}

.footer-copyright .sep {
    margin: 0 10px;
    opacity: 0.4;
}

.footer-copyright .uptime {
    color: var(--accent);
    font-weight: 500;
    font-family: var(--font-mono);
    font-size: 11px;
}

/* ============================================================
   对话框（弹窗 · 弹出展示框）
   ============================================================ */
dialog {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 0;
    max-width: 600px;
    width: 90%;
    background: var(--panel-solid);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
    animation: dialogFadeIn 0.3s ease-out;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    display: none;
    max-height: 86vh;
    overflow: hidden;
}

dialog[open] {
    display: block;
}

dialog::backdrop {
    background: rgba(4, 8, 18, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

@keyframes dialogFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.dialog-header {
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bar-grad);
}

.dialog-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
}

.close-button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--ink-faint);
    padding: 0 10px;
    line-height: 1;
    transition: all 0.2s ease;
}

.close-button:hover {
    color: var(--danger);
    transform: rotate(90deg);
}

.dialog-content {
    padding: 18px 20px;
}

.dialog-footer {
    text-align: center;
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    background: var(--bar-grad);
}

.dialog-footer button {
    background: linear-gradient(120deg, var(--accent), var(--accent-strong));
    color: #fff;
    border: none;
    padding: 10px 32px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 16px var(--accent-glow);
    font-family: var(--font-body);
}

.dialog-footer button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--accent-glow);
}

/* ===== 公告对话框 ===== */
#announcementDialog .dialog-content {
    padding: 18px 20px;
    max-height: 400px;
    overflow-y: auto;
}

#announcementDialog .dialog-content::-webkit-scrollbar {
    width: 4px;
}

#announcementDialog .dialog-content::-webkit-scrollbar-track {
    background: transparent;
}

#announcementDialog .dialog-content::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 2px;
}

.announcement-section {
    margin-bottom: 20px;
}

.announcement-section h3 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.announcement-section h3 .icon {
    font-size: 18px;
}

.announcement-section h3.is-new { color: var(--accent-3); }
.announcement-section h3.is-site { color: var(--accent); }

.announcement-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.announcement-list li {
    padding: 9px 12px;
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
}

.announcement-list li.version-item {
    background: var(--accent-3-soft);
}

.announcement-list li.site-item {
    background: var(--accent-soft);
}

/* ===== 反馈对话框 ===== */
#feedbackDialog .dialog-content {
    padding: 18px 20px;
}

#feedbackDialog input,
#feedbackDialog textarea {
    width: 100%;
    padding: 11px 13px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 14px;
    background: var(--field-bg);
    color: var(--ink);
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
    font-family: var(--font-body);
}

#feedbackDialog input:focus,
#feedbackDialog textarea:focus {
    border-color: var(--accent) !important;
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

#feedbackDialog input::placeholder,
#feedbackDialog textarea::placeholder {
    color: var(--ink-faint);
}

#feedbackDialog .dialog-actions {
    text-align: center;
    padding-top: 4px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

#feedbackDialog .dialog-actions button {
    color: #fff;
    border: none;
    padding: 10px 30px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 16px rgba(4, 8, 18, 0.15);
    font-family: var(--font-body);
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}

#feedbackDialog .dialog-actions button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(4, 8, 18, 0.2);
}

#feedbackDialog .dialog-actions button:active {
    transform: translateY(1px);
}

#submitFeedback {
    background: linear-gradient(120deg, var(--accent-3), #1F8A4C);
    box-shadow: 0 4px 16px var(--accent-3-soft) !important;
}

#cancelFeedback {
    background: linear-gradient(120deg, #8A93A8, #6E7690);
}

/* ===== 工具导航弹窗（tools-dialog.js 生成） ===== */
#toolsDialog {
    max-width: 600px;
}

#toolsDialog .dialog-header {
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bar-grad);
}

#toolsDialog .dialog-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
}

#toolsDialog .close-button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--ink-faint);
    padding: 0 10px;
    line-height: 1;
    transition: all 0.2s ease;
}

#toolsDialog .close-button:hover {
    color: var(--danger);
    transform: rotate(90deg);
}

.tools-pages-container {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    padding: 24px 46px;
}

.tools-page {
    position: absolute;
    width: calc(100% - 92px);
    top: 24px;
    left: 46px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.35s var(--ease-out);
    text-align: center;
}

.tools-page.active {
    opacity: 1;
    transform: translateX(0);
    position: relative;
}

.tools-page.prev {
    transform: translateX(-100%);
}

.tools-page-icon {
    font-size: 44px;
    margin-bottom: 14px;
    display: inline-block;
    filter: drop-shadow(0 6px 16px var(--accent-glow));
}

.tools-page-title {
    font-size: 21px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 14px;
}

.tools-page-description {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.7;
    margin-bottom: 22px;
    padding: 14px 16px;
    background: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px dashed var(--line-strong);
}

.tools-page-button {
    display: inline-block;
    color: white !important;
    padding: 11px 28px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(4, 8, 18, 0.25);
    font-family: var(--font-body);
}

.tools-page-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(4, 8, 18, 0.3);
}

.tools-page-button:active {
    transform: translateY(1px);
}

/* 工具导航按钮 */
.tools-prev-button,
.tools-next-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--card-bg);
    border: 1px solid var(--line);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    z-index: 10;
    color: var(--ink-soft);
}

.tools-prev-button:hover,
.tools-next-button:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

.tools-prev-button { left: 8px; }
.tools-next-button { right: 8px; }

/* 工具页面指示器 */
.tools-indicator {
    display: flex;
    justify-content: center;
    margin-top: 14px;
    padding-bottom: 18px;
}

.tools-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--track);
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tools-indicator-dot.active {
    background: var(--accent);
    transform: scale(1.3);
    box-shadow: 0 0 8px var(--accent-glow);
}

/* ===== 通用导航按钮（下载对话框等） ===== */
.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--card-bg);
    border: 1px solid var(--line);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    z-index: 10;
    color: var(--ink-soft);
}

.nav-button:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

.prev-button { left: 10px; }
.next-button { right: 10px; }

.page-indicator {
    display: flex;
    justify-content: center;
    margin-top: 14px;
    padding-bottom: 16px;
}

.indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--track);
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator-dot.active {
    background: var(--accent);
    transform: scale(1.3);
}

/* ===== 下载相关（download.html 共享） ===== */
.download-pages {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    padding: 20px;
}

.download-page {
    position: absolute;
    width: calc(100% - 40px);
    top: 20px;
    left: 20px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.download-page.active {
    opacity: 1;
    transform: translateX(0);
    position: relative;
}

.download-page.prev {
    transform: translateX(-100%);
}

.download-preview-image {
    width: 100%;
    max-height: 150px;
    object-fit: contain;
    margin-bottom: 15px;
    border-radius: 8px;
    background: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-faint);
    font-style: italic;
}

.download-description {
    margin-bottom: 20px;
    padding: 12px 14px;
    background: var(--card-bg);
    border-radius: 8px;
    font-size: 14px;
    color: var(--ink-soft);
}

.download-button-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.download-all-btn {
    background-color: #E74C3C !important;
}

.dl-option-btn {
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--card-bg);
    color: var(--ink);
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-body);
}

.dl-option-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ===== 通用按钮（下载页） ===== */
.action-button,
.download-button,
.run-button,
.github-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white !important;
    padding: 14px 26px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    margin: 10px 5px;
    box-shadow: 0 4px 18px rgba(4, 8, 18, 0.2);
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    font-family: var(--font-body);
}

.download-button {
    background: linear-gradient(120deg, #2E9E5B, #1F8A4C);
}

.run-button {
    background: linear-gradient(120deg, #2E86C1, #1B6CA8);
}

.github-link {
    background: linear-gradient(120deg, #4A5268, #333A4E);
}

.action-button::before,
.download-button::before,
.run-button::before,
.github-link::before {
    content: '';
    position: absolute;
    top: var(--mouse-y, 50%);
    left: var(--mouse-x, 50%);
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: width 0.4s ease-out, height 0.4s ease-out, opacity 0.3s ease;
    pointer-events: none;
}

.action-button:hover::before,
.download-button:hover::before,
.run-button:hover::before,
.github-link:hover::before {
    width: 200px;
    height: 200px;
    opacity: 1;
}

.action-button:hover,
.download-button:hover,
.run-button:hover,
.github-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(4, 8, 18, 0.28);
    color: white !important;
}

.action-button:active,
.download-button:active,
.run-button:active,
.github-link:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(4, 8, 18, 0.2);
    color: white !important;
}

.download-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
}

/* ===== 产品展示 ===== */
.product-showcase {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 22px;
    margin: 20px 0;
    text-align: center;
    transition: var(--transition);
    transform: translateY(10px);
    opacity: 0;
    animation: fadeInUp 0.6s forwards;
    animation-delay: 0.3s;
    backdrop-filter: blur(10px);
    border: 1px solid var(--line);
}

.product-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 20px;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
    max-height: 300px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.product-image:hover {
    transform: scale(1.01);
    box-shadow: var(--shadow-lg);
}

.product-description {
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 20px;
    color: var(--ink);
}

/* ===== 版本卡片 ===== */
.version-card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 26px;
    border: 1px solid var(--line);
    transition: var(--transition);
}

.version-card:hover {
    background: var(--card-bg-hover);
    border-color: var(--accent);
    box-shadow: 0 8px 30px var(--accent-glow);
}

/* ===== 表单通用 ===== */
form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

textarea {
    width: 100%;
    height: 100px;
    resize: vertical;
}

#feedbackText {
    width: 100%;
    height: 150px;
    margin-bottom: 10px;
}

.copy-button {
    margin-left: 10px;
    border: none;
    border-radius: 8px;
    background-color: var(--accent-soft);
    color: var(--accent);
    padding: 6px 12px;
    cursor: pointer;
    font-family: var(--font-body);
    transition: var(--transition);
}

.copy-button:hover {
    background: var(--accent);
    color: #fff;
}

.deploy-text {
    font-size: 15px;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 768px) {
    html { overflow-y: auto; }
    body { overflow-y: auto; }

    /* 移动端：删除必应壁纸，改用渐变桌面 */
    .background-container {
        background-image: none !important;
        background: linear-gradient(150deg, #B9CFE8 0%, #DCE4F2 55%, #E9E6F4 100%) !important;
    }

    body.dark-theme .background-container {
        background: linear-gradient(150deg, #0A0F1E 0%, #101A33 55%, #0D1428 100%) !important;
    }

    .background-container::before {
        background: rgba(233, 238, 247, 0.35);
        backdrop-filter: blur(2px);
    }

    body.dark-theme .background-container::before {
        background: rgba(7, 11, 22, 0.4);
    }

    .background-container > * {
        position: relative;
        z-index: 1;
    }

    /* Header */
    header {
        padding: 11px 14px;
        margin: 10px 12px 0;
        flex-wrap: wrap;
        gap: 8px;
    }

    .header-left {
        gap: 10px;
    }

    .logo-wrapper,
    .logo {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .brand-text h1 {
        font-size: 16px;
    }

    .subtitle {
        font-size: 9px;
    }

    /* 移动端菜单 */
    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        padding: 7px 10px;
    }

    nav {
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.25s ease;
        opacity: 0;
        padding: 0;
    }

    nav.open {
        max-height: 320px;
        opacity: 1;
        padding-top: 8px;
    }

    nav ul {
        flex-direction: column;
        gap: 2px;
    }

    nav ul li a {
        padding: 11px 14px;
        font-size: 14px;
        border-radius: 10px;
        justify-content: flex-start;
    }

    nav ul li a.active::after {
        display: none;
    }

    nav ul li a.active {
        background: var(--accent-soft);
    }

    /* Main */
    main {
        padding: 12px;
    }

    /* Hero */
    .hero-section .window-body {
        padding: 30px 20px 28px;
    }

    .hero-badge {
        font-size: 11px;
        padding: 4px 12px;
    }

    .hero-title {
        font-size: 28px;
    }

    .hero-desc {
        font-size: 14px;
        margin-bottom: 22px;
    }

    .hero-actions {
        flex-direction: column;
        gap: 10px;
    }

    .hero-btn {
        width: 100%;
        justify-content: center;
        padding: 13px 24px;
        font-size: 14px;
    }

    .shape-1 { width: 110px; height: 110px; top: -30px; right: -20px; }
    .shape-2 { width: 70px; height: 70px; bottom: -20px; left: -10px; }
    .shape-3 { width: 45px; height: 45px; }

    /* 内容区块 */
    .content-section {
        margin-bottom: 16px;
    }

    .window-body {
        padding: 18px 16px;
    }

    .window-bar {
        padding: 9px 14px;
        gap: 9px;
    }

    .window-status {
        display: none;
    }

    .section-title {
        font-size: 16px;
    }

    .section-line {
        display: none;
    }

    .section-body {
        font-size: 14px;
    }

    .text-card {
        padding: 16px;
    }

    /* 时间轴 */
    .timeline {
        padding-left: 44px;
    }

    .timeline::before {
        left: 15px;
    }

    .timeline-dot {
        left: -36px;
        width: 12px;
        height: 12px;
    }

    /* 部署网格 */
    .deploy-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .deploy-card-header {
        padding: 13px 16px;
    }

    .deploy-card-body {
        padding: 14px 16px;
    }

    .deploy-icon {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .command-box {
        padding: 8px 12px;
    }

    .command-box code {
        font-size: 11px;
    }

    .deploy-note {
        padding: 10px 14px;
        font-size: 12px;
    }

    /* Footer */
    footer {
        margin: 8px 12px 74px;
        padding: 14px 16px;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .footer-brand {
        justify-content: center;
    }

    .footer-actions {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }

    .footer-btn {
        width: 100%;
        justify-content: center;
        padding: 11px 20px;
    }

    .footer-copyright {
        font-size: 11px;
        padding-top: 10px;
    }

    /* 对话框 */
    dialog {
        max-width: 94% !important;
        width: 94% !important;
        border-radius: var(--radius-md) !important;
    }

    #toolsDialog {
        max-width: 94% !important;
        width: 94% !important;
    }

    .tools-pages-container {
        min-height: 280px;
        padding: 18px 40px;
    }

    .tools-page {
        width: calc(100% - 80px);
        top: 18px;
        left: 40px;
    }

    .tools-page-icon {
        font-size: 34px;
        margin-bottom: 10px;
    }

    .tools-page-title {
        font-size: 18px;
    }

    .tools-page-description {
        font-size: 13px;
        padding: 11px 12px;
        margin-bottom: 16px;
    }

    .tools-page-button {
        padding: 10px 24px;
        font-size: 14px;
    }

    .tools-prev-button,
    .tools-next-button {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .dialog-title {
        font-size: 16px;
    }

    .dialog-header {
        padding: 11px 14px;
    }

    #announcementDialog .dialog-content {
        padding: 14px;
        max-height: 300px;
    }

    #feedbackDialog .dialog-content {
        padding: 14px;
    }

    /* 下载页 */
    .version-card {
        padding: 18px;
    }

    .version-actions {
        flex-direction: column;
    }

    .action-btn {
        justify-content: center;
        width: 100%;
        padding: 12px 20px;
        font-size: 13px;
    }

    .dl-option-btn {
        min-width: calc(50% - 6px);
        flex: 1;
        padding: 10px 16px;
        font-size: 13px;
    }

    .download-description {
        padding: 10px 14px;
        font-size: 13px;
    }

    .download-item {
        padding: 6px 10px;
    }

    .product-image {
        max-height: 180px;
    }

    .product-description {
        font-size: 15px;
    }

    .action-button {
        width: 100%;
        margin: 5px 0;
    }

    .download-section {
        flex-direction: column;
        align-items: center;
    }

    .download-button, .run-button, .github-link {
        width: 100%;
        margin: 5px 0;
    }

    /* 粒子在移动端关闭 */
    .particles {
        display: none;
    }

    /* 移动端：桌面图标栏收到底部横向排列 */
    .desktop-dock {
        position: fixed;
        left: 50%;
        top: auto;
        bottom: 12px;
        transform: translateX(-50%);
        flex-direction: row;
        gap: 4px;
        padding: 8px 10px;
        border-radius: 16px;
        z-index: 60;
    }

    .dock-icon {
        width: 44px;
        padding: 6px 3px;
    }

    .dock-icon-symbol {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .dock-icon-label {
        font-size: 9px;
    }

    .dock-icon::after {
        display: none;
    }

    /* 移动端：隐藏鼠标光晕与窗口折叠暗示 */
    .cursor-glow {
        display: none;
    }
}

/* 平板 (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    main {
        padding: 18px;
        max-width: 100%;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-section .window-body {
        padding: 36px 28px 32px;
    }

    .deploy-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    header {
        padding: 12px 18px;
        margin: 14px 18px 0;
    }
}

/* 横屏手机 */
@media (max-height: 500px) and (orientation: landscape) {
    header {
        padding: 8px 14px;
        margin: 6px 10px 0;
    }

    .logo-wrapper, .logo {
        width: 28px;
        height: 28px;
    }

    .brand-text h1 {
        font-size: 15px;
    }

    .subtitle {
        display: none;
    }

    .hero-section .window-body {
        padding: 18px 16px;
    }

    .hero-title {
        font-size: 22px;
    }

    .hero-desc {
        font-size: 13px;
        margin-bottom: 12px;
    }

    .hero-btn {
        padding: 9px 16px;
        font-size: 13px;
    }

    .content-section {
        margin-bottom: 10px;
    }

    .window-body {
        padding: 14px 14px;
    }

    .section-title {
        font-size: 15px;
    }

    footer {
        padding: 10px 14px;
        margin: 6px 10px 10px;
    }

    .footer-btn {
        padding: 7px 12px;
        font-size: 12px;
    }

    .particles {
        display: none;
    }

    main {
        padding: 8px;
    }

    nav ul li a {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* ============================================================
   创意交互系统（桌面图标 / 鼠标光晕 / 窗口聚焦 / 折叠 / 开机序列 / reveal）
   ============================================================ */

/* ---- 全局鼠标光晕 ---- */
.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-soft) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.45;
    transition: opacity 0.6s ease;
    will-change: transform;
}

/* ---- 桌面图标栏（Dock） ---- */
.desktop-dock {
    position: fixed;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 7px;
    background: var(--panel-strong);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
}

.dock-icon {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 52px;
    padding: 8px 4px;
    border: none;
    background: none;
    border-radius: 12px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px) scale(0.85);
    transition: transform 0.35s var(--ease-out), opacity 0.35s ease, background 0.3s ease;
    color: var(--ink-soft);
}

.dock-icon.dock-show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.dock-icon:hover,
.dock-icon.dock-active {
    background: var(--accent-soft);
    color: var(--accent);
    transform: scale(1.12);
}

.dock-icon-symbol {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    font-size: 15px;
    color: var(--accent);
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.dock-icon:hover .dock-icon-symbol,
.dock-icon.dock-active .dock-icon-symbol {
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    box-shadow: 0 6px 18px var(--accent-glow);
}

.dock-icon-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-family: var(--font-body);
}

/* Dock 工具提示 */
.dock-icon::after {
    content: attr(title);
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--panel-solid);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    box-shadow: var(--shadow-md);
    z-index: 50;
}

.dock-icon:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ---- 窗口聚焦系统 ---- */
main section {
    position: relative;
    z-index: 1;
    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;
}

main section.window-focused {
    z-index: 6;
}

main section:not(.window-focused) .window {
    transition: box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

/* 无聚焦时，所有窗口保持原样；聚焦当前窗口后，其他窗口柔和降级 */
main.has-focus section:not(.window-focused) {
    opacity: 0.72;
    filter: saturate(0.75);
}

main.has-focus section.window-focused .window {
    box-shadow: 0 24px 70px var(--shadow-glow, rgba(4, 8, 18, 0.45));
    border-color: var(--accent);
}

main.has-focus section.window-focused .window-bar {
    background: linear-gradient(180deg, var(--accent-soft), rgba(255, 255, 255, 0.02));
}

main.has-focus section.window-focused .window-bar .dot-r,
main.has-focus section.window-focused .window-bar .dot-y,
main.has-focus section.window-focused .window-bar .dot-g {
    box-shadow: 0 0 8px currentColor;
}

/* ---- 窗口折叠/展开 ---- */
.window {
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition), max-height 0.45s var(--ease-out), padding 0.3s ease;
}

.window-collapsed .window-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
}

.window .window-body {
    max-height: 4000px;
    transition: max-height 0.45s var(--ease-out), padding 0.3s ease, opacity 0.35s ease;
}

.window-collapsed {
    box-shadow: var(--shadow-sm) !important;
    opacity: 0.85;
}

.window-collapsed .window-bar .dot-r {
    box-shadow: 0 0 0 2px #FF5F57 inset;
}

/* ---- 滚动 reveal 动画 ---- */
main section.reveal {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
    animation: none;
}

main section.reveal.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

/* ---- 开机百分比 ---- */
.boot-percent {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--accent);
    margin-top: 12px;
    text-shadow: 0 0 10px var(--accent-glow);
}

/* 开机后 Dock 的过渡入口动画（避免与 reveal 冲突） */
.dock-icon.dock-show {
    animation: dockPop 0.5s var(--ease-out);
}

@keyframes dockPop {
    0% { transform: scale(0.85) translateY(12px); }
    60% { transform: scale(1.06) translateY(-2px); }
    100% { transform: scale(1) translateY(0); }
}

/* ---- 创意系统移动端覆盖（置底，确保优先级高于桌面样式） ---- */
@media (max-width: 768px) {
    .desktop-dock {
        left: 50% !important;
        top: auto !important;
        bottom: 12px !important;
        transform: translateX(-50%) !important;
        flex-direction: row !important;
        gap: 4px;
        padding: 8px 10px;
        border-radius: 16px;
        z-index: 60;
    }

    .dock-icon {
        width: 44px;
        padding: 6px 3px;
    }

    .dock-icon-symbol {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .dock-icon-label {
        font-size: 9px;
    }

    .dock-icon::after {
        display: none;
    }

    .cursor-glow {
        display: none;
    }

    footer {
        margin-bottom: 74px;
    }

    /* 移动端：窗口折叠 max-height 用较大值以适配内容 */
    .window .window-body {
        max-height: none;
    }

    .window-collapsed .window-body {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
        opacity: 0;
    }
}

/* ============================================================
   无障碍：尊重"减少动态效果"偏好
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}