:root{
  --bg:#f6f7fb; --card:#fff; --text:#111827; --muted:#6b7280;
  --brand:#22c55e; --brand2:#2dd4bf;     /* 标题栏渐变 */
  --shadow:0 8px 28px rgba(0,0,0,.08);
  --nav-safe:116px;                      /* 底部安全距离（悬浮导航高度） */
  --topbar-h:52px;                       /* 顶部标题栏高度 */
}

/* 基础 */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:inherit;text-decoration:none}

/* ===== 顶部标题栏（固定、全宽贴边、仅底部圆角） ===== */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:800;
  height:calc(var(--topbar-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:800; letter-spacing:.5px;
  border-radius:0 0 18px 18px;
  box-shadow:0 8px 22px rgba(34,197,94,.25);
  overflow:hidden;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.topbar .shine{
  position:absolute; right:16px; bottom:8px; width:220px; height:220px; border-radius:32px;
  background: radial-gradient(closest-side, rgba(255,255,255,.26), rgba(255,255,255,0) 70%);
  filter:blur(12px); pointer-events:none;
}

/* 页面主体为固定标题让路 */
.page{
  padding-top: calc(var(--topbar-h) + 12px + env(safe-area-inset-top));
}

/* 容器与两列网格 */
.container{
  max-width:600px; margin:0 auto;
  padding:0 5px calc(var(--nav-safe));
}
.grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px; padding-top:12px;
}

/* 卡片 */
.card{display:block;background:var(--card);border-radius:10px;overflow:hidden;
  box-shadow:var(--shadow);transition:transform .18s, box-shadow .18s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.12)}
.thumb{position:relative;aspect-ratio:1/1;width:100%;overflow:hidden;background:linear-gradient(180deg,#fafafa,#f0f0f0)}
.thumb img{position:absolute;inset:0;margin:auto;min-width:100%;min-height:100%;object-fit:cover;width:100%;height:100%;display:block;cursor:zoom-in}
.meta{padding:5px;border-top:1px solid #eef2f7}
.title{font-size:15px;font-weight:700;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.caption{margin-top:6px;font-size:12px;color:#6b7280;text-align:center}

/* 空态/错误 */
.empty,.error{padding:40px 20px;text-align:center;color:#6b7280}

/* 分页 */
.pager{display:flex;gap:12px;justify-content:center;align-items:center;margin:26px 0 42px;}
.pager-info{font-size:13px;color:#6b7280}
.btn{display:inline-block;border:1px solid #e5e7eb;background:#fff;padding:10px 18px;border-radius:12px;font-weight:700}
.btn.brand{background:#2563eb;border-color:#2563eb;color:#fff}
.btn.disabled{opacity:.45;pointer-events:none;cursor:not-allowed}

/* 极窄屏微调 */
@media (max-width:360px){ .container{ padding-left:8px; padding-right:8px; } }

/* Skeleton */
.skeleton{position:absolute;inset:0;background:linear-gradient(100deg,#f1f5f9 20%,#eef2f7 40%,#f1f5f9 60%);background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9aa3af;font-size:12px}

/* Lightbox */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:16px;z-index:999;opacity:0;pointer-events:none;transition:opacity .18s}
.lb.open{opacity:1;pointer-events:auto}
.lb img{max-width:100%;max-height:100%;display:block;user-select:none;touch-action:pan-x pan-y;transition: transform .2s ease;will-change: transform;cursor: zoom-in}
.lb.zoomed img{ cursor: grab; }
.lb .close{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:8px 12px;border-radius:10px;color:#fff;font-weight:700;cursor:pointer}

/* 放大时隐藏底部悬浮导航 */
.nav-hidden .floating-nav{ display:none !important; }