:root {
    --bg-page: #f5f3ef;
    --bg-card: rgba(255,255,255,0.96);
    --text-primary: #2c2b28;
    --text-secondary: #6b665c;
    --border-light: rgba(0,0,0,0.06);
    --accent-gold: #b87b3a;
    --accent-gold-light: #d99e58;
    --accent-green: #3a6b3a;
    --shadow-sm: 0 6px 14px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.03);
    --shadow-hover: 0 20px 30px -12px rgba(0,0,0,0.08);
    --code-bg: #2e3a2b;
    --code-text: #f3e7c2;
    --table-header-bg: #faf8f3;
    --table-row-hover: #fefaf2;
    --radius-card: 1.8rem;
    --radius-sm: 1rem;
    /* 阅读优化变量 */
    --font-size-base: 1.05rem;
    --font-size-sm: 0.92rem;
    --font-size-xs: 0.82rem;
    --line-height-base: 1.8;
    --line-height-heading: 1.4;
    --max-width-read: 780px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    background: var(--bg-page);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    font-weight: 400;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* 标题字体 */
h1, h2, h3, .card-title, .nav-logo {
    font-family: 'Georgia', 'Times New Roman', '宋体', 'Songti SC', 'Noto Serif SC', serif;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: var(--line-height-heading);
}
h1 { font-size: 2.6rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.4rem; }

/* 导航 */
nav {
    position:sticky; top:0; z-index:100;
    background:rgba(248,246,242,0.85);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border-light);
    padding:0.8rem 2rem;
}
.nav-container { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.nav-logo { font-size:1.5rem; font-weight:600; color:var(--accent-green); text-decoration:none; }
.nav-menu { list-style:none; display:flex; gap:2rem; align-items:center; flex-wrap:wrap; }
.nav-menu a { color:var(--text-primary); text-decoration:none; font-weight:500; font-size:0.95rem; transition:color 0.2s; }
.nav-menu a:hover { color:var(--accent-gold); }

/* 容器 */
.container { max-width:1200px; margin:2rem auto; padding:0 1.5rem; }

/* 卡片 - 阅读优化 */
.card {
    background:var(--bg-card);
    backdrop-filter:blur(2px);
    border-radius:var(--radius-card);
    padding:2.2rem 2.5rem;
    margin-bottom:2rem;
    border:1px solid var(--border-light);
    box-shadow:var(--shadow-sm);
    transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.card-title {
    font-size:1.8rem;
    font-weight:600;
    margin-bottom:1.5rem;
    border-left:5px solid var(--accent-gold);
    padding-left:1rem;
    color:var(--text-primary);
    line-height: 1.3;
}
/* 卡片内的段落间距 */
.card p {
    margin-bottom: 1rem;
}
.card p:last-child {
    margin-bottom: 0;
}
.card ul, .card ol {
    margin: 0.8rem 0 1.2rem 1.8rem;
}
.card ul li, .card ol li {
    margin-bottom: 0.4rem;
}

/* Hero区域 */
.hero {
    text-align:center;
    padding:3rem 2rem;
    background:linear-gradient(135deg, rgba(184,123,58,0.05), rgba(58,107,58,0.05));
    border-radius:2rem;
    margin-bottom:2rem;
}
.hero h1 { font-size:3rem; margin-bottom:0.5rem; }
.hero p { font-size:1.25rem; color:var(--text-secondary); }

/* 网格 */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }

/* 按钮 */
.btn, button:not(.part-btn):not(.menu-toggle) {
    background:var(--accent-gold);
    color:white;
    border:none;
    padding:0.6rem 1.6rem;
    border-radius:2rem;
    font-size:0.95rem;
    font-weight:500;
    cursor:pointer;
    transition:all 0.2s ease;
}
.btn:hover, button:not(.part-btn):not(.menu-toggle):hover {
    background:var(--accent-gold-light);
    transform:scale(0.98);
}

/* 表格 - 优化字体和间距 */
table {
    width:100%;
    border-collapse:collapse;
    margin:1.5rem 0;
    font-size:var(--font-size-sm);
    line-height: 1.6;
}
th, td {
    padding:0.8rem 0.8rem;
    border-bottom:1px solid var(--border-light);
    text-align:left;
    vertical-align:top;
}
th {
    font-weight:600;
    color:var(--accent-gold);
    background:var(--table-header-bg);
}
tr:hover td { background:var(--table-row-hover); }

/* 代码块 */
.code-block {
    background:var(--code-bg);
    color:var(--code-text);
    padding:1rem 1.2rem;
    border-radius:var(--radius-sm);
    font-family:'SF Mono','Fira Code','Cascadia Code',monospace;
    font-size:0.85rem;
    line-height:1.8;
    overflow-x:auto;
    margin:1rem 0;
    border-left:3px solid var(--accent-gold);
}

/* 趣味卡片 */
.fun-fact {
    background:var(--bg-card);
    border-left:4px solid var(--accent-gold-light);
    padding:0.8rem 1.2rem;
    border-radius:var(--radius-sm);
    margin:0.8rem 0;
    font-size:0.95rem;
    line-height:1.7;
    box-shadow:var(--shadow-sm);
}
.story-card {
    background:var(--bg-card);
    border-left:4px solid var(--accent-gold);
    padding:1rem 1.4rem;
    border-radius:var(--radius-sm);
    margin:1rem 0;
    line-height:1.8;
}

/* details 折叠面板 */
details {
    background:var(--bg-card);
    border-radius:var(--radius-sm);
    padding:0.6rem 1.2rem;
    margin-bottom:0.8rem;
    border:1px solid var(--border-light);
    transition:background 0.2s;
}
details[open] { background:var(--table-row-hover); }
summary {
    font-weight:600;
    color:var(--accent-gold);
    cursor:pointer;
    font-size:0.98rem;
    padding:0.2rem 0;
}
summary:hover { color:var(--accent-gold-light); }
details p {
    margin-top: 0.8rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-light);
    font-size:0.95rem;
    line-height:1.8;
}

/* 页脚 */
footer {
    text-align:center;
    padding:2rem;
    background:var(--bg-card);
    margin-top:3rem;
    font-size:0.78rem;
    color:var(--text-secondary);
    border-top:1px solid var(--border-light);
    line-height:1.6;
    padding-bottom:calc(2rem + env(safe-area-inset-bottom));
}

/* 部件按钮 */
.part-btn {
    background:#d9c8b0;
    border:none;
    padding:0.3rem 1.2rem;
    border-radius:1.5rem;
    cursor:pointer;
    font-size:0.9rem;
    transition:background 0.2s, color 0.2s;
}
.part-btn:hover { background:var(--accent-gold); color:white; }
#idsDisplay { transition:background 0.1s; }

/* 响应式 */
@media (max-width:700px) {
    .grid-2 { grid-template-columns:1fr; gap:1rem; }
    .container { padding:0 1rem; }
    .card { padding:1.2rem 1.2rem; }
    .nav-menu { gap:1rem; margin-top:0.5rem; }
    .hero h1 { font-size:2rem; }
    .hero p { font-size:1rem; }
    h1 { font-size:2rem; }
    h2 { font-size:1.6rem; }
    h3 { font-size:1.2rem; }
    .card-title { font-size:1.4rem; }
    body { font-size:1rem; }
    table { font-size:0.8rem; }
    th, td { padding:0.5rem 0.4rem; }
    .code-block { font-size:0.75rem; padding:0.8rem; }
}

/* 滚动条 */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:#e2dcd0; }
::-webkit-scrollbar-thumb { background:var(--accent-gold); border-radius:3px; }
::selection { background:var(--accent-gold-light); color:#fff; }

/* ---------- 新增：阅读体验增强 ---------- */
/* 限制正文最大宽度，避免超长行（针对大屏） */
.card p, .card ul, .card ol, .card .story-card, .card .fun-fact {
    max-width: var(--max-width-read);
}
/* 但表格和代码块可以更宽 */
.card table, .card .code-block {
    max-width: 100%;
}
/* 小字号辅助 */
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
/* 引用块美化 */
blockquote {
    margin: 1.2rem 0;
    padding: 0.8rem 1.5rem;
    border-left: 4px solid var(--accent-gold);
    background: #faf6ef;
    border-radius: 0 0.8rem 0.8rem 0;
    font-style: italic;
    color: var(--text-secondary);
}
/* 链接优化 */
a {
    color: var(--accent-gold);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover {
    color: var(--accent-gold-light);
    text-decoration: underline;
}
/* 外部链接标识 */
a[target="_blank"]::after {
    content: " ↗";
    font-size: 0.7rem;
    opacity: 0.6;
}
/* 复制按钮悬停 */
#copyBtn { transition: opacity 0.2s; }
#copyBtn:hover { background: rgba(255,255,255,0.25) !important; }

/* 表格在移动端可横向滚动 */
.table-wrapper {
    overflow-x: auto;
    margin: 1rem 0;
}