/* 基础重置与变量 */
:root {
  /* 参考截图的柔和暖色与绿色标题栏 */
  --green: #8CC57E;         /* 顶栏背景 */
  --green-ink: #4B7B44;     /* 选中/强调文字 */
  --tan: #f3dfca;           /* 暖色背景1 */
  --tan-2: #f6e9d9;         /* 暖色背景2 */
  --brown: #7a4f2b;         /* 图标/标题的棕色系 */
  --text: #3d3d3d;
  --muted: #8b8b8b;
  --bg: #f8efe6;            /* 全局底色偏米白 */
  --card-bg: #f3e2cf;       /* 卡片底色 */
  --card-border: #ead7c1;   /* 卡片边框 */
  --tabbar-bg: #ffffff;
  --radius: 14px;
  --shadow: 0 2px 6px rgba(0,0,0,.06);
  --safe-bottom: env(safe-area-inset-bottom);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}

/* 顶部 AppBar */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 92px 1fr 48px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-top)) 12px;
  background: var(--green);
  color: white;
}
.brand-mark { width: 44px; height: 44px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.18); border-radius: 12px; }
.brand-mark img { width: 34px; height: 34px; display:block; }
.icon-btn svg { width:22px; height:22px; stroke:#fff; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.app-title { text-align: center; font-weight: 700; letter-spacing: 1px; }
.pill-btn { background: #e9f6e7; color: var(--green-ink); border: 0; padding: 8px 14px; border-radius: 999px; font-weight: 600; }
.icon-btn { justify-self: end; background: transparent; border: 0; color: white; }
.back-link { color: #fff; text-decoration: none; font-weight: 700; white-space: nowrap; }
.back-link:active { opacity: .8; }

/* 内容区 */
.content { padding: 12px 12px 92px; }
.section-title { display:flex; flex-direction:column; gap:4px; padding: 6px 2px 10px; }
.section-title .title { font-weight: 800; color: #6d5538; }
.section-title .sub { font-size: 12px; color: var(--muted); }
.section-title-box { background: linear-gradient(180deg, #f7eadc, #f4e2cf); border: 1px solid #ead7c1; border-radius: 14px; padding: 12px; box-shadow: var(--shadow); }

/* 紧凑九宫格（更贴近参考：更小图标、更紧密格距） */
.menu.compact { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #ead7c1; border-left: 0; border-top: 0; background: linear-gradient(180deg, #f7eadb, #f2ddc7); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.menu.compact .cell { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height: 92px; padding: 8px 4px; color: #6f4a2c; text-decoration:none; border-left: 1px solid #ead7c1; border-top: 1px solid #ead7c1; }
.menu.compact .cell:active { background: rgba(255,255,255,.28); }
.menu.compact .ico { display:flex; align-items:center; justify-content:center; }
.menu.compact .ico svg { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.menu.compact .title { font-weight:700; font-size: 13px; text-align:center; line-height:1.25; }

/* 资讯列表 */
.news-list { display: grid; gap: 12px; }
.news-skel { height: 64px; border-radius: 12px; background: #eee; }
.news-item { display:grid; grid-template-columns: 72px 1fr; gap: 12px; align-items:center; background: linear-gradient(180deg, #fffaf5, #fff); border:1px solid #efdfcf; border-radius:16px; padding:12px; box-shadow: var(--shadow); animation: fadeIn .3s ease both; }
.news-cover { width:72px; height:72px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; }
.news-cover-orange { background: linear-gradient(135deg, #f1a44b, #e38a2f); }
.news-main { display:grid; gap:6px; }
.news-link { color:#6a4727; text-decoration:none; font-weight:700; }
.news-meta { font-size:12px; color: var(--muted); }
.news-link:active { opacity:.8; }

/* 公告卡片 */
.notice-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.notice-card { background: linear-gradient(180deg, #fffaf5, #fff); border:1px solid #efdfcf; border-radius: 16px; padding: 12px; box-shadow: var(--shadow); }
.notice-tag { display:inline-block; margin-bottom:8px; padding:4px 8px; border-radius:999px; background:#fde7c8; color:#9a6427; font-size:12px; font-weight:700; }
.notice-title { font-weight:700; color:#5b4328; }
.notice-meta { font-size:12px; color: var(--muted); margin-top:4px; }

/* 人物 */
.profile-highlight { display:flex; align-items:center; justify-content:space-between; gap:12px; background: linear-gradient(135deg, #eed7b8, #f7ead8); border: 1px solid #e6cfaf; border-radius: 18px; padding: 14px; box-shadow: var(--shadow); }
.highlight-left { display:grid; gap:6px; }
.highlight-badge { display:inline-block; width:max-content; padding:4px 8px; border-radius:999px; background:#fff7ec; color:#9a6427; font-size:12px; font-weight:700; }
.highlight-name { font-size: 20px; font-weight: 800; color:#5b4328; }
.highlight-desc { font-size: 13px; color:#7a654a; }
.highlight-avatar { width:68px; height:68px; border-radius:18px; background:#fff7ec; display:flex; align-items:center; justify-content:center; font-size:34px; }
.profile-cards { display: grid; gap: 12px; }
.profile-card { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; background: linear-gradient(180deg, #fffaf5, #fff); border: 1px solid #efdfcf; border-radius: 16px; padding: 12px; box-shadow: var(--shadow); cursor: pointer; }
.profile-card:active { transform: translateY(1px); }
.avatar { font-size: 28px; display:flex; align-items:center; justify-content:center; width:56px; height:56px; background:#f7efe4; border-radius: 14px; }
.name-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.meta .name { font-weight: 700; }
.role-pill { display:inline-block; padding:3px 8px; border-radius:999px; background:#eaf4e6; color:#4b7b44; font-size:12px; font-weight:700; }
.meta .desc { color: var(--muted); font-size: 14px; margin-top:4px; }
.profile-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.profile-tags span { display:inline-block; padding:4px 8px; border-radius:999px; background:#f6eee2; color:#8a6845; font-size:12px; }


/* 动画与动效 */
.fade-in { animation: fadeIn .36s ease both; }
.slide-up { animation: slideUp .36s ease both; }
.lift { transition: transform .18s ease, box-shadow .24s ease; }
.lift:active { transform: translateY(1px) scale(.99); }
.ripple { position: relative; overflow: hidden; }
.ripple:after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(255,255,255,.45), rgba(255,255,255,0) 40%); opacity: 0; transition: opacity .6s ease; }
.ripple:active:after { opacity: 1; transition: opacity .15s ease; }
.shimmer { position: relative; overflow: hidden; }
.shimmer:before { content:""; position:absolute; inset:0; background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 45%, rgba(255,255,255,0) 60%); transform: translateX(-100%); animation: shimmer 1.2s infinite; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px);} to { opacity: 1; transform: none; } }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* 悬浮按钮 */
.fab { position: fixed; right: 16px; bottom: calc(72px + var(--safe-bottom)); z-index: 15; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #4ea2ff, #2b79f2); color: white; border: none; border-radius: 16px; padding: 12px 14px; font-weight: 700; box-shadow: 0 10px 24px rgba(43,121,242,.35); }
.fab-link { text-decoration: none; }
.fab svg { width:20px; height:20px; fill:#fff; }
.fab span { font-size: 14px; }
.fab-round { width: 72px; height: 72px; padding: 0; border-radius: 50%; justify-content: center; gap: 0; background: radial-gradient(circle at 30% 30%, #7fc0ff, #2b79f2 68%); box-shadow: 0 12px 28px rgba(43,121,242,.38), inset 0 2px 0 rgba(255,255,255,.28); }
.fab-round svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fab-round span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 底部 tabbar（含资讯共5项） */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-top: 1px solid #eadfd2; padding: 6px 6px calc(6px + var(--safe-bottom)); z-index: 20; box-shadow: 0 -4px 16px rgba(0,0,0,.04); }
.tab { -webkit-tap-highlight-color: transparent; appearance: none; border: 0; background: transparent; padding: 6px 4px; display: grid; place-items: center; gap: 2px; color: #8c7756; }
.tab .ico { height: 22px; }
.tab .ico svg { display:block; width:22px; height:22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab .lbl { font-size: 12px; }
.tab.active { color: var(--green-ink); font-weight: 700; }

/* Tab/页面显隐 */
.tab-page { display: none; }
.tab-page.active { display: block; }

/* 详情页样式 */
.detail-head { display:flex; align-items:center; gap:8px; }
.back-btn { appearance:none; border:0; background:#fff; border:1px solid #eee; border-radius:10px; padding:6px 8px; box-shadow: var(--shadow); }
.detail-title { font-weight:800; color:#6d5538; }
.detail-body { background:#fff; border:1px solid #eee; border-radius:12px; padding:12px; box-shadow: var(--shadow); margin-top:10px; }
.profile-detail-body { display:grid; gap:12px; background: transparent; border: 0; box-shadow: none; padding: 0; }
.profile-hero-card, .detail-section { background: linear-gradient(180deg, #fffaf5, #fff); border:1px solid #efdfcf; border-radius:16px; padding:12px; box-shadow: var(--shadow); }
.profile-hero { display:flex; align-items:center; gap:12px; }
.avatar.big { width:72px; height:72px; font-size:36px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:#f7efe4; }
.hero-meta .name { font-weight:800; font-size: 20px; color:#5b4328; }
.hero-meta .desc { color:#7b6850; margin-top:4px; }
.detail-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.detail-pills span { display:inline-block; padding:4px 8px; border-radius:999px; background:#f6eee2; color:#8a6845; font-size:12px; }
.hero-stats { list-style:none; margin:0; padding:0; display:grid; gap:6px; color:#5b4328; }
.hero-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); background: linear-gradient(180deg, #fffaf5, #fff); border:1px solid #efdfcf; border-radius:16px; padding:12px; box-shadow: var(--shadow); }
.hero-stats-grid li { background:#fff7ec; border-radius:12px; padding:10px; font-size:14px; }
.detail-section-title { font-weight:800; color:#6d5538; margin-bottom:8px; }
.detail-section p { margin:0; color:#6d6d6d; line-height:1.7; }
.record-list { display:grid; gap:8px; }
.record-item { background:#fff7ec; border-radius:12px; padding:10px; color:#6f4a2c; }

/* 小屏适配 */
.subpage-content { padding-top: 16px; }
.subpage-panel { display: grid; gap: 12px; }
.photo-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 10px; box-shadow: var(--shadow); }
.photo-placeholder { position: relative; min-height: 180px; border-radius: 10px; background: linear-gradient(135deg, #efe3d2, #e6d2bc); display: flex; align-items: center; justify-content: center; }
.photo-badge { position: absolute; right: 12px; bottom: 12px; background: rgba(61,61,61,.75); color: #fff; font-size: 12px; padding: 6px 10px; border-radius: 999px; }
.archive-search-box { display:grid; gap:8px; }
.archive-search { display:flex; align-items:center; gap:10px; background:#fffaf5; border:1px solid #efdfcf; border-radius:16px; padding:12px 14px; box-shadow: var(--shadow); }
.archive-search-icon { font-size:18px; }
.archive-search input { width:100%; border:0; outline:0; background:transparent; color:#5b4328; font-size:14px; }
.archive-search input::placeholder { color:#af9a83; }
.archive-search-tip { font-size:12px; color:#8b7a68; padding:0 4px; }
.archive-search-results { display:grid; gap:8px; background:#fffaf5; border:1px solid #efdfcf; border-radius:16px; padding:12px 14px; box-shadow: var(--shadow); }
.archive-search-results-title { font-size:13px; font-weight:800; color:#5b4328; }
.archive-search-results-list { display:flex; flex-wrap:wrap; gap:8px; }
.archive-search-results-list span { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#fff7ec; color:#8a6845; font-size:12px; }
.archive-search-result-btn { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#fff7ec; color:#8a6845; font-size:12px; border:0; cursor:pointer; }
.archive-search-result-btn:active { transform: translateY(1px); }
.archive-block { display:grid; gap:12px; }
.archive-block-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.archive-block-head h2 { margin:0; font-size:18px; color:#5b4328; }
.archive-block-head p { margin:4px 0 0; color:#8b7a68; font-size:12px; }
.archive-count { display:inline-flex; align-items:center; justify-content:center; min-width:52px; padding:6px 10px; border-radius:999px; background:#f2e2ce; color:#8a6845; font-size:12px; font-weight:700; }
.archive-list, .archive-locked-list { display:grid; gap:12px; }
.archive-entry { display:block; text-decoration:none; background: linear-gradient(180deg, #fffaf5, #fff); border:1px solid #efdfcf; border-radius:16px; overflow:hidden; box-shadow: var(--shadow); color: inherit; }
.archive-entry-row { display:grid; grid-template-columns: 120px 1fr; align-items:stretch; }
.archive-entry-cover { position:relative; aspect-ratio: 15 / 7; overflow:hidden; border-bottom: 1px solid #f0e2d4; background:#e8d7c3; max-height: 150px; }
.archive-entry-cover-row { aspect-ratio: auto; max-height: none; min-height: 100%; border-bottom: 0; border-right: 1px solid #f0e2d4; }
.archive-entry-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.archive-topline { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.archive-date { position:absolute; left:10px; top:10px; display:inline-block; padding:4px 8px; border-radius:999px; background: rgba(0,0,0,.62); color:#fff; font-size:11px; }
.archive-date-inline { position: static; width: max-content; background: #f2e2ce; color: #8a6845; }
.archive-chip { display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; font-size:11px; font-weight:700; }
.archive-chip-download { background:#e5f3e1; color:#4b7b44; }
.archive-chip-locked { background:#fbe7d0; color:#a66a2c; }
.archive-entry-body { padding: 10px 12px 12px; display:grid; gap:5px; }
.archive-entry-body-row { padding: 10px 12px; align-content: center; }
.archive-entry-title { font-size:16px; font-weight:800; color:#5b4328; }
.archive-entry-sub { font-size:12px; color:#8b7a68; }
.archive-entry-meta { font-size:12px; color:#9b8a78; }
.archive-locked-card { background: linear-gradient(180deg, #fffaf5, #fff); border:1px solid #efdfcf; border-radius:16px; padding:14px; box-shadow: var(--shadow); display:grid; gap:8px; overflow:hidden; scroll-margin-top: 92px; }
.archive-search-hit { outline: 3px solid #8CC57E; box-shadow: 0 0 0 6px rgba(140,197,126,.18), var(--shadow); }
.archive-locked-thumb { display:block; width:100%; aspect-ratio: 16 / 9; object-fit:cover; border-radius:12px; background:#e8d7c3; border:1px solid #f0e2d4; }
.archive-locked-card h3 { margin:0; color:#5b4328; }
.archive-locked-card p { margin:0; color:#6d6d6d; line-height:1.7; }
.archive-file-tags { display:flex; flex-wrap:wrap; gap:8px; }
.archive-file-tags span { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#fff7ec; color:#8a6845; font-size:12px; }
.archive-empty { background:#fff; border:1px dashed #e8d1b8; border-radius:16px; padding:16px; text-align:center; color:#8b7a68; }
.archive-cover { display:block; width:100%; aspect-ratio: 15 / 7; height:auto; max-height: 180px; object-fit:cover; border-radius:10px; background:#e8d7c3; }
.download-box { display:grid; gap:8px; background:#fff7ec; border-radius:12px; padding:12px; color:#6f4a2c; line-height:1.7; word-break:break-all; }
.download-box a { color:#2b79f2; text-decoration:none; }
.placeholder-grid { display: grid; gap: 12px; }
.placeholder-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 14px; box-shadow: var(--shadow); }
.placeholder-card h3 { margin: 0 0 8px; color: #5b4328; }
.placeholder-card p { margin: 0; color: #6d6d6d; line-height: 1.7; }

@media (max-width: 420px) {
  .hero-stats-grid { grid-template-columns: 1fr; }
  .archive-entry-row { grid-template-columns: 104px 1fr; }
}

@media (min-width: 560px) { .content { margin: 0 auto; max-width: 560px; } .tabbar { left: 50%; transform: translateX(-50%); max-width: 560px; } .fab { right: calc(50% - 560px / 2 + 16px); } }