/* ===== Reset ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background: #f0f3f7;
  color: #333;
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color:#1a4d8c; text-decoration:none; }
a:hover { text-decoration:underline; color:#c41230; }
img { max-width:100%; height:auto; }
.content-wrap { flex:1; }

/* ===== 顶部工具栏 ===== */
.toolbar-top { background:#153d73; height:30px; }
.toolbar-inner {
  max-width:1180px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:flex-end; gap:14px;
  font-size:12px; color:rgba(255,255,255,.75); height:30px;
}
.tb-group { display:flex; align-items:center; gap:4px; }
.tb-group a {
  color:rgba(255,255,255,.7); cursor:pointer; padding:1px 6px; border-radius:2px;
  font-size:11px; text-decoration:none;
}
.tb-group a:hover { color:#fff; background:rgba(255,255,255,.1); text-decoration:none; }
.tb-group a.active { color:#fff; background:rgba(255,255,255,.15); font-weight:600; }
.tb-label { font-size:11px; opacity:.6; }

/* ===== 夜间模式 ===== */
.dark-mode body { background:#1a1d23; color:#e0e0e0; }
.dark-mode .header { background:#22272e; border-color:#333; }
.dark-mode .header-text h1 { color:#5a8dc9; }
.dark-mode .header-text p { color:#777; }
.dark-mode .topbar { background:#0d1117; }
.dark-mode .toolbar-top { background:#0d1117; }
.dark-mode .nav { background:#22272e; }
.dark-mode .nav a.active { background:#1a4d8c; }
.dark-mode .sidebar-box { background:#22272e; border-color:#333; }
.dark-mode .sidebar-box-title { background:#2d323a; color:#5a8dc9; border-color:#333; }
.dark-mode .sidebar-list a { color:#aaa; }
.dark-mode .sidebar-list a:hover { background:#2d323a; color:#5a8dc9; }
.dark-mode .content-box { background:#22272e; border-color:#333; }
.dark-mode .content-title { color:#5a8dc9; border-color:#333; }
.dark-mode .stat-card { background:#22272e; border-color:#333; }
.dark-mode .stat-card .num { color:#5a8dc9; }
.dark-mode .article-item { border-color:#333; }
.dark-mode .article-item a { color:#8ab4f8; }
.dark-mode .article-date { color:#666; }
.dark-mode .timeline-item { border-color:#333; }
.dark-mode .timeline-item h4 { color:#ddd; }
.dark-mode .timeline-item p { color:#999; }
.dark-mode .page-nav a { border-color:#333; color:#aaa; background:#22272e; }
.dark-mode .page-nav a:hover { background:#1a4d8c; color:#fff; }
.dark-mode .page-nav a.active { background:#1a4d8c; color:#fff; }
.dark-mode .footer-new { background:#22272e; border-color:#c41230; }
.dark-mode .footer-links { border-color:#333; }
.dark-mode .footer-links a { color:#8ab4f8; }
.dark-mode .footer-copy { color:#888; }
.dark-mode .footer-copy a { color:#8ab4f8; }
.dark-mode .fb-label { color:#aaa; }
.dark-mode .fb-info { color:#888; }
.dark-mode .about-page h2 { color:#5a8dc9; }
.dark-mode .about-page p { color:#bbb; }
.dark-mode .contact-page h2 { color:#5a8dc9; }
.dark-mode .contact-page .info div { border-color:#333; color:#bbb; }
.dark-mode .detail-header h2 { color:#ddd; }
.dark-mode .detail-body { color:#c0c0c0; }
.dark-mode .detail-body code { background:#2d323a; }
.dark-mode .detail-body blockquote { background:#2d323a; color:#aaa; border-color:#5a8dc9; }
.dark-mode .detail-tags .tag { background:#2d323a; color:#5a8dc9; }
.dark-mode .breadcrumb a { color:#8ab4f8; }
.dark-mode .breadcrumb span { color:#999; }
.dark-mode .detail-meta { color:#777; }
.dark-mode .search-bar { border-color:#333; }
.dark-mode .search-bar input { background:#22272e; color:#ddd; }
.dark-mode .search-highlight { background:#5a4a1a; color:#fff; }

/* ===== 高对比度模式 ===== */
.high-contrast a { color:#0000ee !important; text-decoration:underline !important; }
.high-contrast a:hover { color:#cc0000 !important; }
.high-contrast body { background:#fff !important; color:#000 !important; }
.high-contrast .content-box, .high-contrast .sidebar-box,
.high-contrast .stat-card, .high-contrast .footer-new,
.high-contrast .header, .high-contrast .nav,
.high-contrast .toolbar-top { background:#fff !important; border-color:#000 !important; }
.high-contrast .nav a { color:#000 !important; }
.high-contrast .nav a.active { background:#ccc !important; }
.high-contrast .sidebar-box-title { background:#eee !important; color:#000 !important; }
.high-contrast .content-title { color:#000 !important; }
.high-contrast .stat-card .num { color:#000 !important; }
.high-contrast h1, .high-contrast h2, .high-contrast h3, .high-contrast h4 { color:#000 !important; }

/* ===== 搜索模态框 ===== */
.search-modal { display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:99999; background:rgba(0,0,0,.5); align-items:flex-start; justify-content:center; padding-top:100px; }
.search-modal-box { background:#fff; border-radius:8px; width:600px; max-width:90%; max-height:70vh; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.2); display:flex; flex-direction:column; }
.search-modal-header { display:flex; padding:14px 18px; border-bottom:1px solid #e8edf3; align-items:center; gap:10px; }
.search-modal-header input { flex:1; border:none; outline:none; font-size:16px; padding:6px 0; }
.search-close { font-size:18px; color:#999; cursor:pointer; text-decoration:none; }
.search-close:hover { color:#333; }
.search-modal-results { flex:1; overflow-y:auto; padding:8px 0; }
.search-hint { text-align:center; padding:40px 20px; color:#bbb; font-size:14px; }
.search-count { padding:6px 18px; font-size:12px; color:#999; }
.search-result-item { display:flex; justify-content:space-between; align-items:center; padding:10px 18px; border-bottom:1px solid #f0f0f0; text-decoration:none; transition:.1s; }
.search-result-item:hover { background:#f4f6f9; text-decoration:none; }
.search-result-title { font-size:14px; color:#1a4d8c; flex:1; min-width:0; }
.search-result-date { font-size:12px; color:#aaa; flex-shrink:0; margin-left:12px; }
.dark-mode .search-modal-box { background:#22272e; }
.dark-mode .search-modal-header { border-color:#333; }
.dark-mode .search-modal-header input { background:#22272e; color:#ddd; }
.dark-mode .search-result-item { border-color:#2d323a; }
.dark-mode .search-result-item:hover { background:#2d323a; }
.dark-mode .search-result-title { color:#8ab4f8; }

/* ===== Top Bar ===== */
.topbar { background:#1a4d8c; height:4px; }

/* ===== Header ===== */
.header { background:#fff; border-bottom:1px solid #dce1e8; }
.header-inner {
  max-width:1180px; margin:0 auto;
  padding:14px 20px 10px;
  display:flex; align-items:center; gap:14px;
}
.header-icon {
  width:60px; height:60px;
  background:linear-gradient(135deg,#1a4d8c,#2a6cb8);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:28px; font-weight:700;
  flex-shrink:0;
}
.header-text h1 { font-size:20px; color:#1a4d8c; font-weight:700; letter-spacing:2px; line-height:1.3; }
.header-text p { font-size:11px; color:#888; margin-top:1px; letter-spacing:1px; }

/* ===== Nav ===== */
.nav {
  background:#1a4d8c;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  position:sticky; top:0; z-index:100;
}
.nav-inner {
  max-width:1180px; margin:0 auto; display:flex; overflow-x:auto;
}
.nav-inner::-webkit-scrollbar { display:none; }
.nav a {
  display:block; padding:0 22px; line-height:46px;
  color:rgba(255,255,255,.88); font-size:14px;
  transition:.2s; white-space:nowrap;
}
.nav a:hover, .nav a.active { background:rgba(255,255,255,.12); color:#fff; text-decoration:none; }
.nav a.active { background:#153d73; }

/* ===== Banner ===== */
.banner {
  background:linear-gradient(135deg,#1a4d8c 0%,#2a6cb8 50%,#3a7cc8 100%);
  padding:44px 20px; text-align:center; color:#fff;
}
.banner h2 { font-size:28px; font-weight:700; letter-spacing:3px; }
.banner p { margin-top:8px; font-size:15px; opacity:.85; }
.banner-nav { margin-top:16px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.banner-nav a {
  display:inline-block; padding:6px 18px; border:1px solid rgba(255,255,255,.4);
  border-radius:20px; color:rgba(255,255,255,.9); font-size:13px; transition:.2s;
}
.banner-nav a:hover { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.6); text-decoration:none; }

/* ===== Main ===== */
.main {
  max-width:1180px; margin:0 auto; padding:28px 20px;
  display:grid; grid-template-columns:280px 1fr; gap:24px;
  flex:1;
}

/* ===== Sidebar ===== */
.sidebar-box {
  background:#fff; border:1px solid #dce1e8;
  border-radius:4px; overflow:hidden; margin-bottom:16px;
}
.sidebar-box-title {
  background:#f4f6f9; padding:10px 16px;
  font-size:14px; font-weight:700; color:#1a4d8c;
  border-bottom:1px solid #dce1e8; position:relative;
}
.sidebar-box-title::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:#c41230;
}
.sidebar-list { padding:6px 0; }
.sidebar-list a {
  display:block; padding:8px 16px 8px 20px;
  font-size:13px; color:#555;
  border-left:3px solid transparent; transition:.15s;
}
.sidebar-list a:hover {
  background:#f4f6f9; color:#1a4d8c;
  border-left-color:#c41230; text-decoration:none;
}

/* Profile Card */
.profile-card { text-align:center; padding:24px 16px 20px; }
.profile-avatar {
  width:80px; height:80px; border-radius:50%;
  background:linear-gradient(135deg,#1a4d8c,#3a7cc8);
  margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:32px; font-weight:700;
}
.profile-card h3 { font-size:17px; color:#1a4d8c; }
.profile-card p { font-size:13px; color:#888; margin-top:4px; }
.profile-card .meta { font-size:12px; color:#bbb; margin-top:4px; }
.sidebar-stats { display:grid; grid-template-columns:1fr 1fr; padding:12px; gap:8px; text-align:center; }
.sidebar-stats .num { font-size:20px; font-weight:700; color:#1a4d8c; }
.sidebar-stats .label { font-size:11px; color:#999; }

/* ===== Content ===== */
.content-box {
  background:#fff; border:1px solid #dce1e8;
  border-radius:4px; padding:24px; margin-bottom:16px;
}
.content-title {
  font-size:18px; font-weight:700; color:#1a4d8c;
  padding-bottom:12px; margin-bottom:16px;
  border-bottom:2px solid #e8edf3; position:relative;
}
.content-title::after {
  content:''; position:absolute; bottom:-2px; left:0;
  width:60px; height:2px; background:#c41230;
}

/* ===== Stat Row ===== */
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.stat-card {
  background:#fff; border:1px solid #dce1e8;
  border-radius:4px; text-align:center; padding:18px 10px;
}
.stat-card .num { font-size:28px; font-weight:700; color:#1a4d8c; }
.stat-card .label { font-size:12px; color:#999; margin-top:4px; }

/* ===== Article List ===== */
.article-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0; border-bottom:1px dashed #e8edf3;
}
.article-item:last-child { border-bottom:none; }
.article-item a { font-size:14px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.article-date { font-size:12px; color:#aaa; flex-shrink:0; margin-left:16px; }
.article-category {
  display:inline-block; font-size:11px; color:#1a4d8c;
  background:#eef3fa; padding:1px 8px; border-radius:3px; margin-right:8px;
}

/* ===== Timeline ===== */
.timeline-item {
  position:relative; padding-left:24px; padding-bottom:20px;
  border-left:2px solid #dce1e8;
}
.timeline-item:last-child { padding-bottom:0; }
.timeline-item::before {
  content:''; position:absolute; left:-6px; top:4px;
  width:10px; height:10px; border-radius:50%;
  background:#1a4d8c; border:2px solid #fff;
}
.timeline-item .date { font-size:12px; color:#999; }
.timeline-item h4 { font-size:14px; color:#333; margin:2px 0 4px; }
.timeline-item p { font-size:13px; color:#666; }

/* ===== Project Card Grid ===== */
.project-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.project-card {
  border:1px solid #e8edf3; border-radius:6px; padding:18px; transition:.2s;
}
.project-card:hover { border-color:#1a4d8c; box-shadow:0 2px 12px rgba(26,77,140,.1); }
.project-card h4 { font-size:15px; color:#1a4d8c; margin-bottom:6px; }
.project-card p { font-size:13px; color:#666; margin-bottom:8px; }
.project-tags { display:flex; flex-wrap:wrap; gap:4px; }
.project-tags span { font-size:11px; padding:2px 8px; border-radius:3px; background:#eef3fa; color:#1a4d8c; }
.project-card .links { margin-top:10px; display:flex; gap:12px; }
.project-card .links a { font-size:12px; }

/* ===== Resume ===== */
.resume-section { margin-bottom:20px; }
.resume-section h3 { font-size:16px; color:#1a4d8c; margin-bottom:10px; padding-left:10px; border-left:3px solid #c41230; }
.resume-item { padding:8px 0; border-bottom:1px dashed #f0f0f0; display:flex; gap:14px; }
.resume-item:last-child { border-bottom:none; }
.resume-item .time { width:120px; font-size:13px; color:#999; flex-shrink:0; }
.resume-item .desc { flex:1; }
.resume-item .desc h4 { font-size:14px; color:#333; }
.resume-item .desc p { font-size:13px; color:#666; margin-top:2px; }

/* ===== Contact Form ===== */
.contact-form { max-width:500px; }
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:13px; color:#555; margin-bottom:4px; font-weight:600; }
.form-group input, .form-group textarea {
  width:100%; padding:8px 12px; border:1px solid #dce1e8;
  border-radius:4px; font-size:14px; font-family:inherit; outline:none; transition:.2s;
}
.form-group input:focus, .form-group textarea:focus { border-color:#1a4d8c; box-shadow:0 0 0 2px rgba(26,77,140,.08); }
.form-group textarea { min-height:100px; resize:vertical; }
.btn { display:inline-block; padding:9px 28px; background:#1a4d8c; color:#fff; border:none; border-radius:4px; font-size:14px; cursor:pointer; transition:.2s; }
.btn:hover { background:#153d73; }
.btn-red { background:#c41230; }
.btn-red:hover { background:#a00e26; }

/* ===== Search ===== */
.search-bar { display:flex; gap:8px; max-width:400px; margin-bottom:16px; }
.search-bar input {
  flex:1; padding:8px 12px; border:1px solid #dce1e8; border-radius:4px; font-size:14px; outline:none;
}
.search-bar input:focus { border-color:#1a4d8c; }
.search-bar button { padding:8px 18px; background:#1a4d8c; color:#fff; border:none; border-radius:4px; cursor:pointer; font-size:14px; }
.search-highlight { background:#fff3b0; padding:0 2px; }
.search-bar { max-width:400px; margin-bottom:20px; display:flex; border:1px solid #dce1e8; border-radius:4px; overflow:hidden; }
.search-bar input { flex:1; padding:8px 12px; border:none; outline:none; font-size:14px; }
.search-bar button { padding:8px 16px; background:#1a4d8c; color:#fff; border:none; cursor:pointer; font-size:13px; }

/* ===== Pagination ===== */
.pagination { display:flex; justify-content:center; gap:6px; margin-top:20px; }
.pagination a {
  display:inline-block; padding:6px 13px; border:1px solid #dce1e8;
  border-radius:3px; font-size:13px; color:#555; transition:.15s;
}
.pagination a:hover, .pagination a.active { background:#1a4d8c; color:#fff; border-color:#1a4d8c; text-decoration:none; }

/* ===== Breadcrumb ===== */
.breadcrumb { font-size:12px; color:#999; margin-bottom:14px; padding:8px 0; }
.breadcrumb a { color:#666; }
.breadcrumb span { color:#333; }

/* ===== Detail Page ===== */
.detail-header { margin-bottom:20px; }
.detail-header h2 { font-size:20px; color:#333; }
.detail-meta { font-size:12px; color:#999; margin-top:6px; display:flex; gap:16px; flex-wrap:wrap; }
.detail-body { line-height:1.9; font-size:15px; color:#444; }
.detail-body h2, .detail-body h3, .detail-body h4 { color:#1a4d8c; margin:20px 0 10px; }
.detail-body p { margin:8px 0; }
.detail-body ul, .detail-body ol { margin:8px 0; padding-left:24px; }
.detail-body code { background:#f4f6f9; padding:2px 6px; border-radius:3px; font-size:13px; }

/* ===== Admin ===== */
.admin-table { width:100%; border-collapse:collapse; font-size:13px; }
.admin-table th, .admin-table td { padding:10px 12px; text-align:left; border-bottom:1px solid #e8edf3; }
.admin-table th { background:#f4f6f9; color:#1a4d8c; font-weight:700; }
.admin-table tr:hover { background:#fafbfd; }
.status-badge { display:inline-block; padding:2px 10px; border-radius:10px; font-size:11px; }
.status-published { background:#e8f5e9; color:#2e7d32; }
.status-draft { background:#fff3e0; color:#e65100; }
.action-link { color:#1a4d8c; cursor:pointer; margin:0 4px; font-size:12px; }
.action-link:hover { text-decoration:underline; }
.action-link.danger { color:#c41230; }

/* ===== Toast ===== */
.toast {
  position:fixed; top:20px; right:20px; z-index:9999;
  padding:12px 20px; border-radius:4px; color:#fff;
  font-size:14px; max-width:360px;
  transform:translateX(120%); transition:transform .3s;
}
.toast.show { transform:translateX(0); }
.toast-success { background:#2e7d32; }
.toast-error { background:#c41230; }
.toast-info { background:#1a4d8c; }

/* ===== Empty State & Loading ===== */
.empty-state { text-align:center; padding:40px 20px; color:#bbb; font-size:14px; }
.loading { text-align:center; padding:30px; color:#999; }
.spinner { display:inline-block; width:24px; height:24px; border:3px solid #e8edf3; border-top-color:#1a4d8c; border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ===== Footer ===== */
.footer {
  background:#1a4d8c; color:rgba(255,255,255,.75);
  text-align:center; padding:24px 20px; font-size:13px; margin-top:auto;
}
.footer a { color:rgba(255,255,255,.9); }
.footer .icp { margin-top:6px; font-size:12px; opacity:.6; }

/* ===== Responsive ===== */
@media (max-width:768px) {
  .main { grid-template-columns:1fr; }
  .nav-inner { overflow-x:auto; }
  .stat-row { grid-template-columns:repeat(2,1fr); }
  .header-text h1 { font-size:20px; }
  .header-icon { width:48px; height:48px; font-size:22px; }
  .banner h2 { font-size:22px; }
  .nav a { padding:0 14px; }
  .project-grid { grid-template-columns:1fr; }
  .resume-item { flex-direction:column; gap:4px; }
  .resume-item .time { width:auto; }
}
@media (max-width:480px) {
  .stat-row { grid-template-columns:1fr 1fr; }
  .header-text h1 { font-size:17px; }
  .banner h2 { font-size:18px; }
}