/* ============================================================
   涯边馒头铺 · 水墨云涯主题
   亮色：宣纸米白 + 黛青墨色 + 朱砂红
   暗色：墨蓝夜色 + 月白 + 暖朱砂
   ============================================================ */
:root {
  --paper-1: #FAF7F0;          /* 宣纸 */
  --paper-2: #F2ECDF;
  --ink: #2F4550;              /* 黛青 */
  --ink-2: #3E5C56;
  --accent: #B33A3A;           /* 朱砂 */
  --primary: #2F4550;
  --primary-hover: #43554C;
  --primary-light: rgba(47,69,80,0.06);
  --accent-light: rgba(179,58,58,0.08);
  --bg: #FAF7F0;
  --bg-gradient: linear-gradient(180deg,#FAF7F0 0%,#F6F1E7 60%,#F2ECDF 100%);
  --card-bg: rgba(255,255,255,0.85);
  --card-border: #E5DFD3;
  --text: #2F4550;
  --text-secondary: #6E6A5C;
  --text-muted: #A39B85;
  --border: #E5DFD3;
  --shadow: 0 2px 10px rgba(47,69,80,0.05);
  --shadow-hover: 0 10px 30px rgba(47,69,80,0.10);
  --radius: 3px;
  --radius-lg: 6px;
  --nav-bg: rgba(250,247,240,0.88);
  --admin-bg: #F4F0E6;
  --admin-card: #FFFFFF;
  --danger: #B33A3A;
  --success: #5A7A52;
  --input-bg: #FFFFFF;
  --input-border: #D8D0C0;
  --input-focus: #2F4550;
  --font-serif: "SimSun","NSimSun","Source Han Serif SC",serif;
  --night-el: none;            /* 夜景元素（月亮/星）默认隐藏 */
}

[data-theme="dark"] {
  --paper-1: #1C2833;
  --paper-2: #0F171F;
  --accent: #DE8A72;           /* 暖朱砂（暗底提亮） */
  --primary: #8FB6C4;          /* 月下青 */
  --primary-hover: #A5C8D4;
  --primary-light: rgba(143,182,196,0.10);
  --accent-light: rgba(222,138,114,0.12);
  --bg: #141E28;
  --bg-gradient: linear-gradient(180deg,#1C2833 0%,#16202B 55%,#0F171F 100%);
  --card-bg: rgba(23,34,44,0.75);
  --card-border: rgba(255,255,255,0.07);
  --text: #E8E4D8;             /* 月白 */
  --text-secondary: #8C99A4;
  --text-muted: #5E6E7A;
  --border: rgba(255,255,255,0.07);
  --shadow: 0 2px 12px rgba(0,0,0,0.25);
  --shadow-hover: 0 10px 30px rgba(0,0,0,0.4);
  --nav-bg: rgba(20,29,39,0.85);
  --admin-bg: #101822;
  --admin-card: #17222D;
  --input-bg: rgba(23,34,44,0.8);
  --input-border: rgba(255,255,255,0.12);
  --input-focus: #8FB6C4;
  --night-el: block;
}

/* ===== Reset ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.65; min-height:100vh;
  transition:background .3s, color .3s;
}
a { color:var(--accent); text-decoration:none; transition:color .2s; }
a:hover { color:var(--primary-hover); }
img { max-width:100%; height:auto; }
.serif { font-family:var(--font-serif); }

/* ===== 背景层 ===== */
.bg-layer { position:fixed; inset:0; background:var(--bg-gradient); z-index:-2; transition:background .5s; }
.bg-ink { position:fixed; bottom:0; left:0; width:100%; height:52%; z-index:-1; pointer-events:none; }
.bg-night { position:fixed; bottom:0; left:0; width:100%; height:60%; z-index:-1; pointer-events:none; display:none; }
[data-theme="dark"] .bg-ink { display:none; }
[data-theme="dark"] .bg-night { display:block; }

/* ===== 导航 ===== */
.navbar {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px; height:66px;
  background:var(--nav-bg); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-brand { display:flex; align-items:center; gap:12px; color:var(--text); }
.nav-brand img { width:38px; height:38px; }
.nav-brand b { font-family:var(--font-serif); font-size:20px; font-weight:700; letter-spacing:4px; }
.nav-links { display:flex; gap:34px; }
.nav-links a {
  color:var(--text-secondary); font-size:14px; letter-spacing:2px;
  padding:5px 2px; border-bottom:2px solid transparent; transition:all .2s;
}
.nav-links a:hover, .nav-links a.active { color:var(--accent); border-bottom-color:var(--accent); }
.nav-right { display:flex; align-items:center; gap:16px; }
.nav-admin { font-size:13px; color:var(--text-muted); }
.nav-admin:hover { color:var(--accent); }
.theme-toggle {
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--input-border); background:transparent;
  cursor:pointer; font-size:15px; color:var(--text);
  display:flex; align-items:center; justify-content:center; transition:border-color .2s;
}
.theme-toggle:hover { border-color:var(--accent); }

/* ===== 布局 ===== */
.container { max-width:1100px; margin:0 auto; padding:0 40px; }
.section { padding:38px 0; }
.section-title {
  font-family:var(--font-serif); font-size:23px; font-weight:400;
  letter-spacing:4px; color:var(--text); margin-bottom:24px;
  display:flex; align-items:center; gap:14px;
}
.section-title::before { content:''; width:26px; height:2px; background:var(--accent); }
.section-title .en { font-family:"Microsoft YaHei"; font-size:11px; color:var(--text-muted); letter-spacing:3px; font-weight:400; }

/* ===== Hero ===== */
.hero { padding:74px 0 54px; text-align:center; position:relative; }
.hero .eyebrow {
  font-family:var(--font-serif); font-size:14px; color:var(--text-muted);
  letter-spacing:7px; margin-bottom:20px; display:block;
}
.hero h1 {
  font-family:var(--font-serif); font-size:52px; font-weight:400;
  letter-spacing:13px; color:var(--text); margin-bottom:18px;
}
.hero h1 .accent { color:var(--accent); }
.hero p { font-size:16px; color:var(--text-secondary); letter-spacing:2px; margin-bottom:36px; }
.hero-btns { display:flex; gap:18px; justify-content:center; }
.hero-seal { position:absolute; right:8%; top:80px; width:56px; height:56px; opacity:.9; }
@media (max-width:900px){ .hero-seal{display:none} }

/* ===== 按钮 ===== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 32px; border-radius:var(--radius);
  font-size:14px; letter-spacing:2px; font-weight:500; cursor:pointer;
  border:none; transition:all .2s; text-decoration:none;
}
.btn-primary { background:var(--primary); color:#F5F1E8; }
.btn-primary:hover { background:var(--primary-hover); color:#fff; }
[data-theme="dark"] .btn-primary { color:#10202B; }
.btn-secondary { background:transparent; color:var(--text); border:1px solid var(--primary); }
.btn-secondary:hover { background:var(--primary-light); }
.btn-sm { padding:6px 16px; font-size:13px; letter-spacing:1px; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-ghost { background:transparent; color:var(--text-secondary); border:1px solid var(--border); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }

/* ===== 卡片 ===== */
.card-grid { display:grid; gap:22px; }
.card-grid-3 { grid-template-columns:repeat(3,1fr); }
.card-grid-4 { grid-template-columns:repeat(4,1fr); }
.card {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius); padding:26px 24px;
  box-shadow:var(--shadow); transition:transform .25s, box-shadow .25s, border-color .25s;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); }

/* 博客卡片 */
.blog-tag {
  display:inline-block; padding:2px 10px; border-radius:2px;
  font-family:var(--font-serif); font-size:12px; letter-spacing:2px;
  color:var(--accent); border:1px solid var(--accent);
  opacity:.85; margin-bottom:10px;
}
.blog-tag.private { color:var(--text-muted); border-color:var(--text-muted); }
.blog-card h3 { font-family:var(--font-serif); font-size:18px; font-weight:700; color:var(--text); margin-bottom:8px; line-height:1.5; letter-spacing:1px; }
.blog-card p { font-size:13px; color:var(--text-secondary); line-height:1.7; margin-bottom:12px; }
.blog-card .meta { font-family:var(--font-serif); font-size:12px; color:var(--text-muted); letter-spacing:1px; }
.blog-card a, a.blog-card { color:inherit; }

/* 导航卡片 */
.nav-card {
  display:flex; align-items:center; gap:14px;
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius); padding:20px;
  box-shadow:var(--shadow); transition:transform .25s, box-shadow .25s;
  text-decoration:none; color:var(--text);
}
.nav-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.nav-icon {
  width:44px; height:44px; border-radius:var(--radius);
  background:var(--paper-2); display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
[data-theme="dark"] .nav-icon { background:rgba(255,255,255,0.05); }
.nav-card h4 { font-size:14px; font-weight:600; margin-bottom:3px; }
.nav-card p { font-size:12px; color:var(--text-muted); }
.nav-group-title { font-family:var(--font-serif); font-size:16px; letter-spacing:3px; color:var(--text-secondary); margin:22px 0 12px; }

/* 视图切换 */
.view-toggle { display:flex; gap:8px; }
.view-toggle a {
  padding:5px 14px; font-size:12px; letter-spacing:1px; border-radius:2px;
  border:1px solid var(--border); color:var(--text-secondary);
}
.view-toggle a.on { border-color:var(--accent); color:var(--accent); }

/* ===== 照片墙 ===== */
.photo-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.photo-item { aspect-ratio:4/3; border-radius:2px; overflow:hidden; cursor:pointer; position:relative; }
.photo-item img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.photo-item:hover img { transform:scale(1.04); }
.photo-item .caption {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-size:15px; letter-spacing:4px; color:#F5F1E8;
  background:linear-gradient(transparent 55%, rgba(20,28,24,0.45));
  text-shadow:0 1px 6px rgba(0,0,0,0.4); opacity:1; pointer-events:none;
}

/* Lightbox */
.lightbox { display:none; position:fixed; inset:0; background:rgba(10,14,18,0.92); z-index:1000; align-items:center; justify-content:center; }
.lightbox.active { display:flex; }
.lightbox img { max-width:90%; max-height:90%; border-radius:2px; }
.lightbox-close {
  position:absolute; top:20px; right:20px; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,0.12); border:none; color:#fff; font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

/* ===== 博客详情 ===== */
.article-header { padding:56px 0 28px; text-align:center; }
.article-header h1 { font-family:var(--font-serif); font-size:32px; font-weight:700; letter-spacing:3px; margin-bottom:14px; }
.article-meta { font-size:13px; color:var(--text-muted); display:flex; gap:20px; justify-content:center; font-family:var(--font-serif); letter-spacing:1px; }
.article-body {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius); padding:40px; box-shadow:var(--shadow);
  margin-bottom:28px; line-height:1.9; font-size:15px;
}
.article-body h1,.article-body h2,.article-body h3 { font-family:var(--font-serif); letter-spacing:2px; margin:26px 0 12px; color:var(--text); }
.article-body p { margin-bottom:16px; }
.article-body img { border-radius:2px; margin:12px 0; }
.article-body code { background:var(--paper-2); padding:2px 6px; border-radius:2px; font-size:.88em; }
[data-theme="dark"] .article-body code { background:rgba(255,255,255,0.07); }
.article-body pre { background:var(--paper-2); padding:16px; border-radius:var(--radius); overflow-x:auto; margin:16px 0; }
[data-theme="dark"] .article-body pre { background:#0D141C; }
.article-body pre code { background:transparent; padding:0; }
.article-body blockquote { border-left:3px solid var(--accent); padding-left:16px; color:var(--text-secondary); margin:16px 0; }
.article-body table { width:100%; border-collapse:collapse; margin:16px 0; }
.article-body th,.article-body td { padding:8px 12px; border:1px solid var(--border); text-align:left; }
.article-body th { background:var(--primary-light); }
.article-nav { display:flex; justify-content:space-between; gap:16px; margin-bottom:40px; }
.article-nav a {
  display:block; flex:1; padding:14px 18px; background:var(--card-bg);
  border:1px solid var(--card-border); border-radius:var(--radius);
}
.article-nav a+a { text-align:right; }
.article-nav a span { display:block; font-size:12px; color:var(--text-muted); margin-bottom:4px; }

/* ===== 搜索/分类 ===== */
.search-bar { display:flex; gap:10px; margin-bottom:22px; }
.search-bar input {
  flex:1; padding:10px 16px; border-radius:var(--radius);
  border:1px solid var(--input-border); background:var(--input-bg);
  color:var(--text); font-size:14px; outline:none; transition:border-color .2s;
}
.search-bar input:focus { border-color:var(--input-focus); }
.cat-filter { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.cat-filter a {
  padding:5px 16px; font-size:13px; letter-spacing:1px; border-radius:2px;
  border:1px solid var(--border); color:var(--text-secondary); transition:all .2s;
}
.cat-filter a:hover,.cat-filter a.active { background:var(--accent); border-color:var(--accent); color:#F5F1E8; }

/* ===== 登录 ===== */
.login-wrap { min-height:calc(100vh - 66px); display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.login-box {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--radius-lg); padding:44px 40px; width:390px; box-shadow:var(--shadow-hover);
}
.login-box h2 { font-family:var(--font-serif); text-align:center; letter-spacing:5px; font-size:22px; font-weight:400; margin-bottom:26px; }
.login-box .logo-center { text-align:center; margin-bottom:18px; }
.login-box .logo-center img { width:68px; height:68px; }

/* ===== 表单 ===== */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:14px; font-weight:500; margin-bottom:6px; color:var(--text); }
.form-group input,.form-group select,.form-group textarea {
  width:100%; padding:10px 14px; border-radius:var(--radius);
  border:1px solid var(--input-border); background:var(--input-bg);
  color:var(--text); font-size:14px; outline:none; font-family:inherit; transition:border-color .2s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--input-focus); }
.form-group textarea { min-height:300px; resize:vertical; font-family:"Cascadia Code","Fira Code",monospace; font-size:13px; }
.form-error { color:var(--danger); font-size:13px; margin-top:4px; }
.form-success { color:var(--success); font-size:13px; margin-top:4px; }

/* ===== 后台 ===== */
.admin-layout { display:flex; min-height:100vh; }
.admin-sidebar {
  width:220px; background:var(--admin-card); border-right:1px solid var(--border);
  padding:20px 0; flex-shrink:0; position:sticky; top:0; height:100vh;
}
.admin-sidebar .brand {
  font-family:var(--font-serif); font-size:16px; letter-spacing:2px; color:var(--text);
  padding:0 20px 18px; border-bottom:1px solid var(--border); margin-bottom:10px;
}
.admin-sidebar a { display:block; padding:10px 20px; font-size:14px; color:var(--text-secondary); transition:all .2s; }
.admin-sidebar a:hover,.admin-sidebar a.active { color:var(--accent); background:var(--accent-light); }
.admin-main { flex:1; padding:26px 34px; background:var(--admin-bg); overflow-y:auto; }
.admin-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.admin-header h1 { font-family:var(--font-serif); font-size:22px; letter-spacing:3px; font-weight:400; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:30px; }
.stat-card { background:var(--admin-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; }
.stat-card .num { font-family:var(--font-serif); font-size:30px; font-weight:700; color:var(--accent); }
.stat-card .label { font-size:13px; color:var(--text-muted); margin-top:2px; }
.admin-table { width:100%; border-collapse:collapse; background:var(--admin-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.admin-table th,.admin-table td { padding:12px 16px; text-align:left; font-size:14px; border-bottom:1px solid var(--border); }
.admin-table th { background:var(--paper-2); font-size:13px; color:var(--text-secondary); letter-spacing:1px; }
[data-theme="dark"] .admin-table th { background:rgba(255,255,255,0.04); }
.admin-table tr:last-child td { border-bottom:none; }
.admin-table .actions { display:flex; gap:8px; }

/* ===== 分页 ===== */
.pagination { display:flex; gap:8px; justify-content:center; margin:30px 0; }
.pagination a,.pagination span {
  padding:7px 14px; border-radius:2px; font-size:14px;
  border:1px solid var(--border); color:var(--text-secondary);
}
.pagination a:hover { border-color:var(--accent); color:var(--accent); }
.pagination .current { background:var(--primary); color:#F5F1E8; border-color:var(--primary); }
[data-theme="dark"] .pagination .current { color:#10202B; }

/* ===== Footer ===== */
.footer { text-align:center; padding:32px 0; font-size:13px; color:var(--text-muted); border-top:1px solid var(--border); margin-top:48px; }
.footer a { color:var(--text-muted); }
.footer a:hover { color:var(--accent); }
.footer .sep { margin:0 12px; color:var(--border); }

/* ===== 响应式 ===== */
@media (max-width:768px) {
  .container { padding:0 20px; }
  .navbar { padding:0 20px; }
  .nav-brand b { display:none; }
  .nav-links { gap:14px; }
  .hero h1 { font-size:34px; letter-spacing:7px; }
  .card-grid-3,.card-grid-4 { grid-template-columns:1fr; }
  .photo-grid { grid-template-columns:repeat(2,1fr); }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .admin-sidebar { display:none; }
  .admin-main { padding:16px; }
}

/* ===== Markdown 预览（后台） ===== */
.md-preview {
  background:var(--paper-2); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; min-height:200px; margin-top:8px; line-height:1.8;
}
[data-theme="dark"] .md-preview { background:rgba(255,255,255,0.04); }
.md-preview h1,.md-preview h2,.md-preview h3 { margin:16px 0 8px; }
.md-preview pre { background:var(--card-bg); padding:12px; border-radius:var(--radius); overflow-x:auto; }
.md-preview code { background:var(--accent-light); padding:2px 4px; border-radius:2px; font-size:.9em; }