/* 基础重置与变量 */
: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;
}
.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; }

/* 内容区 */
.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); }

/* 紧凑九宫格（更贴近参考：更小图标、更紧密格距） */
.menu.compact { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #ead7c1; border-left: 0; border-top: 0; background: var(--tan-2); }
.menu.compact .cell { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height: 88px; padding: 6px 2px; color: #6f4a2c; text-decoration:none; border-left: 1px solid #ead7c1; border-top: 1px solid #ead7c1; }
.menu.compact .ico svg { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.menu.compact .title { font-weight:700; font-size: 13px; }

/* 资讯列表 */
.news-list { display: grid; gap: 12px; }
.news-skel { height: 64px; border-radius: 12px; background: #eee; }
.news-item { background:#fff; border:1px solid #eee; border-radius:12px; padding:12px; box-shadow: var(--shadow); animation: fadeIn .3s ease both; }
.news-link { color:#2d6cdf; text-decoration:none; font-weight:700; }
.news-link:active { opacity:.8; }

/* 公告卡片 */
.notice-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.notice-card { background:#fff; border:1px solid #eee; border-radius: 12px; padding: 12px; box-shadow: var(--shadow); }
.notice-title { font-weight:700; color:#5b4328; }
.notice-meta { font-size:12px; color: var(--muted); margin-top:4px; }

/* 人物 */
.profile-cards { display: grid; gap: 12px; }
.profile-card { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; background: white; border: 1px solid #eee; border-radius: 12px; 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:#f2f6ff; border-radius: 12px; }
.meta .name { font-weight: 700; }
.meta .desc { color: var(--muted); font-size: 14px; }


/* 动画与动效 */
.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: #3fa3ff; color: white; border: none; border-radius: 999px; padding: 12px 14px; font-weight: 700; box-shadow: 0 8px 20px rgba(63,163,255,.35); }
.fab svg { width:20px; height:20px; fill:#fff; }
.fab span { font-size: 14px; }

/* 底部 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-hero { display:flex; align-items:center; gap:12px; }
.avatar.big { width:72px; height:72px; font-size:36px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:#f2f6ff; }
.hero-meta .name { font-weight:800; }
.hero-stats { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; color:#5b4328; }

/* 小屏适配 */
@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); } }