/* ============================================================
 * RobinGo · app.css —— 公共骨架（顶栏 / 滚动区 / 底栏 / 分页 / 空态）
 * 视觉全部来自 theme.css（SLIPPY：深蓝底 + 米黄纸卡 + 粗描边）
 * ============================================================ */
@import url('./theme.css');

html, body { margin:0; height:100%; }
body {
  display:flex;
  flex-direction:column;
  max-width:560px;
  margin:0 auto;
  min-height:100vh;
  background:var(--ink);
  color:var(--paper);
}

/* ---------------- 顶部标题 ---------------- */
.appbar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px 12px;
  background:var(--ink2);
  border-bottom:3px solid var(--carbon);
  position:sticky;
  top:0;
  z-index:30;
}
.appbar h1{
  font-family:var(--font-title);
  font-size:24px;
  margin:0;
  color:var(--paper);
  letter-spacing:1px;
}
.appbar h1 span{color:var(--orange);}
.appbar .sub{
  display:block;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  color:rgba(244,233,212,.55);
  margin-top:3px;
  letter-spacing:0;
}

/* ---------------- 卡片间距（卡片本体在 theme） ---------------- */
.card + .card{ margin-top:14px; }

/* ---------------- 区块标题 ---------------- */
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:22px 2px 10px;
}
.section-head h2{
  font-family:var(--font-title);
  font-size:18px;
  margin:0;
  color:var(--paper);
  display:flex;
  align-items:center;
  gap:9px;
}
.section-head h2::before{
  content:'';
  width:11px;height:11px;
  background:var(--orange);
  border:2px solid var(--carbon);
  border-radius:3px;
}

/* ---------------- 底部导航 ---------------- */
.tabbar{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:100%;
  max-width:560px;
  height:66px;
  padding-bottom:env(safe-area-inset-bottom);
  display:flex;
  background:var(--ink2);
  border-top:3px solid var(--carbon);
  z-index:40;
}
.tabbar a{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  text-decoration:none;
  color:rgba(244,233,212,.5);
  font-family:var(--font-title);
  font-size:11px;
  letter-spacing:.5px;
  transition:.15s;
}
.tabbar a.active{ color:var(--orange); }
.tabbar a.active svg{ stroke:var(--orange); }
.tabbar svg{ width:22px; height:22px; }

/* ---------------- 列表分页 ---------------- */
.pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:18px 0 6px;
}
.pager button{
  height:34px;
  min-width:34px;
  border:2px solid var(--carbon);
  border-radius:8px;
  background:var(--paper);
  box-shadow:var(--hard-sm);
  color:var(--carbon);
  font-family:var(--font-title);
  font-size:13px;
  cursor:pointer;
}
.pager button.on{ background:var(--orange); }
.pager button:disabled{ opacity:.35; cursor:not-allowed; }
.pager .info{
  font-size:12px;
  font-weight:700;
  color:rgba(244,233,212,.55);
}

/* ---------------- 滚动区 ---------------- */
.screen{
  flex:1 1 auto;
  overflow-y:auto;
  padding:16px 18px 88px;
  -webkit-overflow-scrolling:touch;
}
.screen::-webkit-scrollbar{ display:none; }

/* ---------------- 空态 ---------------- */
.empty{
  text-align:center;
  color:rgba(244,233,212,.45);
  font-size:13.5px;
  font-weight:600;
  padding:48px 0;
}

/* ---------------- 翻页加载态（不清空列表，只淡出） ---------------- */
#feed, #claimList {
  transition: opacity .16s ease;
}
#feed.is-loading, #claimList.is-loading {
  opacity: .45;
  pointer-events: none;
}

/* ============================================================
 * SPA 视图切换 —— 只显隐，不跳页
 * ============================================================ */
#app{ flex:1 1 auto; min-height:0; display:flex; }
.view{
  display:none;
  position:relative;
  /* 不能有 transform/filter，否则 fixed 弹窗会以它为参照被裁剪 */
  transform:none;
  flex:1 1 auto;
  flex-direction:column;
  min-height:0;
  width:100%;
  max-width:560px;
  margin:0 auto;
}
.view.is-active{ display:flex; }

/* 每个视图自己的滚动由 .screen / 地图页负责，body 不滚 */
body{ overflow:hidden; }
body[data-view="live"],
body[data-view="mine"]{ overflow:hidden; }