:root {
    --primary: #64748b;
    --accent: #94a3b8;
    --bg: #f1f5f9;
    --text: #1e293b;
    --surface: #ffffff;
    --border: #e2e8f0;
    --shadow: 0 2px 8px rgba(30, 41, 59, 0.06);
    --radius: 8px;
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'SFMono-Regular', 'JetBrains Mono', Consolas, 'Courier New', monospace;
  }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.65;
    letter-spacing: 0.01em;
    padding-top: 56px; /* for fixed nav */
  }

  /* 导航栏——吸顶+滚动动态 */
  .navbar-custom {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    transition: background 0.2s ease, box-shadow 0.2s;
    padding: 12px 0;
    font-weight: 500;
  }
  .navbar-custom.scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  }
  .navbar-brand {
    font-weight: 800;
    color: var(--text) !important;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
  }
  .navbar-brand i {
    color: var(--primary);
    margin-right: 6px;
  }
  .nav-link-custom {
    color: var(--text) !important;
    font-weight: 500;
    padding: 0 12px !important;
    opacity: 0.8;
    transition: opacity 0.2s;
  }
  .nav-link-custom:hover { opacity: 1; color: var(--primary) !important; }
  .navbar-toggler { border: none; }

  /* 顶部阅读进度条 */
  .progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    z-index: 1200;
  }
  .progress-bar-custom {
    display: block;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 0.1s ease;
  }

  /* Hero 打字机标题 */
  .hero-section {
    padding: 4rem 0 2.5rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .typewriter h1 {
    font-weight: 800;
    font-size: 2.8rem;
    letter-spacing: -0.02em;
    display: inline-block;
    color: var(--text);
    border-right: 3px solid var(--primary);
    white-space: nowrap;
    overflow: hidden;
    animation: blinkCursor 0.8s step-end infinite;
  }
  @keyframes blinkCursor {
    0%, 100% { border-color: var(--primary); }
    50% { border-color: transparent; }
  }
  .hero-sub {
    color: var(--primary);
    font-weight: 400;
    max-width: 520px;
    font-size: 1.05rem;
    border-left: 4px solid var(--accent);
    padding-left: 1rem;
  }

  /* 双色块左右分屏示例——在时间线/说明区体现 */
  .two-tone-split {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: stretch;
  }
  .tone-block-left, .tone-block-right {
    flex: 1 1 300px;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem 1.8rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .tone-block-left { border-top: 4px solid var(--primary); }
  .tone-block-right { border-top: 4px solid var(--accent); }

  /* 区块通用 */
  .section-title {
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 2rem 0 1.2rem;
    font-size: 1.6rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .section-title i { color: var(--primary); font-size: 1.3rem; }

  /* 卡片/表格 */
  .table-custom {
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    overflow: hidden;
    font-size: 0.9rem;
  }
  .table-custom th, .table-custom td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
  }
  .table-custom thead th {
    background: var(--bg);
    font-weight: 600;
    color: var(--primary);
  }

  /* 时间线样式 */
  .timeline {
    list-style: none;
    padding-left: 1.2rem;
    border-left: 2px solid var(--accent);
  }
  .timeline-item {
    position: relative;
    margin-bottom: 1.8rem;
    padding-left: 1.2rem;
  }
  .timeline-item::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 6px;
    width: 12px;
    height: 12px;
    background: var(--primary);
    border-radius: 50%;
    border: 2px solid var(--bg);
  }
  .timeline-date {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--primary);
    letter-spacing: 0.02em;
  }

  /* 标签页(特色用) */
  .nav-tabs-custom {
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .nav-tabs-custom .nav-link {
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    padding: 0.5rem 1.2rem;
    font-weight: 500;
    color: var(--text);
    opacity: 0.7;
    background: transparent;
  }
  .nav-tabs-custom .nav-link.active {
    opacity: 1;
    background: var(--surface);
    border-color: var(--border) var(--border) var(--surface);
    font-weight: 600;
    color: var(--primary);
  }
  .tab-content-custom {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 1.5rem 1.8rem;
    box-shadow: var(--shadow);
  }

  /* 海报 hover 效果 (占位) */
  .poster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.2rem;
  }
  .poster-item {
    position: relative;
    background: var(--bg);
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 2/3;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: var(--accent);
    background-blend-mode: multiply;
  }
  .poster-item .placeholder-text {
    padding: 0.8rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    background: rgba(0,0,0,0.2);
    width: 100%;
    text-align: center;
  }
  .play-btn {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.4rem;
    transition: transform 0.2s ease;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  .poster-item:hover .play-btn {
    transform: translate(-50%, -50%) scale(1);
  }
  .poster-item:hover .placeholder-text { background: rgba(0,0,0,0.35); }

  /* CTA */
  .cta-section {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 2rem 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  /* 友情链接 */
  .friend-links {
    background: var(--bg);
    padding: 1.5rem 0;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--primary);
  }

  footer {
    background: #e9eef3;
    color: var(--text);
    border-top: 1px solid var(--border);
    padding: 1.2rem 0;
    font-size: 0.85rem;
  }

  /* 数据等宽字体 */
  .mono-num {
    font-family: var(--font-mono);
    letter-spacing: -0.02em;
    background: var(--bg);
    padding: 0 4px;
    border-radius: 4px;
  }

  /* 双色块演示 */
  .brand-stat {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary);
  }

  /* 紧凑高密度 */
  .compact p {
    margin-bottom: 0.6rem;
  }
  a { text-decoration: none; }

  @media (max-width: 576px) {
    .typewriter h1 { font-size: 2rem; }
  }

/* --- 子页面追加 --- */
.about-hero {
            background: linear-gradient(135deg, var(--bg) 0%, #e2e8f0 100%);
            padding: 4rem 0 3rem;
            border-bottom: 1px solid var(--border);
        }
.about-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 2rem;
            height: 100%;
            box-shadow: var(--shadow);
            transition: transform 0.2s ease;
        }
.about-card:hover {
            transform: translateY(-4px);
        }
.about-icon {
            font-size: 2rem;
            color: var(--primary);
            margin-bottom: 1rem;
        }
.timeline-custom {
            position: relative;
            padding-left: 2rem;
            border-left: 2px solid var(--border);
        }
.timeline-custom-item {
            position: relative;
            padding-bottom: 2rem;
            padding-left: 1rem;
        }
.timeline-custom-item::before {
            content: '';
            position: absolute;
            left: -2.35rem;
            top: 0.3rem;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--primary);
            border: 2px solid var(--surface);
        }
.stat-box {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 1.5rem;
            text-align: center;
            box-shadow: var(--shadow);
        }
.stat-num {
            font-family: var(--font-mono);
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--primary);
            display: block;
        }
.stat-label {
            font-size: 0.9rem;
            color: var(--accent);
            margin-top: 0.3rem;
        }
.quote-block {
            background: var(--surface);
            border-left: 4px solid var(--primary);
            border-radius: 0 var(--radius) var(--radius) 0;
            padding: 1.5rem 2rem;
            margin: 2rem 0;
            box-shadow: var(--shadow);
        }
.quote-block p {
            margin-bottom: 0.5rem;
            font-style: italic;
            color: var(--text);
        }
.quote-author {
            font-size: 0.9rem;
            color: var(--accent);
            font-style: normal;
        }
.about-hero {
                padding: 2.5rem 0 2rem;
            }
.stat-num {
                font-size: 1.6rem;
            }

/* --- 子页面追加 --- */
.legal-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; margin-bottom: 1.5rem; box-shadow: var(--shadow); }
.legal-card h2 { color: var(--primary); font-size: 1.35rem; font-weight: 700; margin-bottom: 1rem; }
.legal-card p, .legal-card li { color: var(--text); font-size: .95rem; line-height: 1.8; }
.legal-card ul { padding-left: 1.2rem; }
.legal-card li { margin-bottom: .4rem; }
.legal-meta { font-size: .85rem; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.last-updated { font-family: var(--font-mono); font-size: .8rem; color: var(--accent); }

/* --- Bootstrap 组件配色适配(程序自动补,避免白底黑字) --- */
.table { color:#1e293b !important; border-color:rgba(0,0,0,.12) !important; --bs-table-bg:transparent !important; --bs-table-color:#1e293b !important; }