/* base.css — 变量、重置、布局、底部导航、安全区 */
:root{
  --bg:#f4f4f6;
  --card:#ffffff;
  --text:#191919;
  --muted:#8e8e93;
  --primary:#e63b3b;
  --primary-dark:#c92f2f;
  --line:#ececee;
  --radius:12px;
  --shadow:0 2px 10px rgba(0,0,0,.06);
  --tabbar-h:58px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);
  font-size:14px;line-height:1.5;
  max-width:430px;min-width:320px;margin:0 auto;min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit}

/* 顶部栏 */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:8px;
  height:48px;padding:0 12px;background:var(--card);
  border-bottom:1px solid var(--line);
}
.topbar .back{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:20px;border:0;background:none;cursor:pointer}
.topbar .title{flex:1;text-align:center;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .action{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:18px}

/* 主内容区：为底部导航留白 */
.page{padding:12px 12px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px)}
.page.no-tabbar{padding-bottom:calc(env(safe-area-inset-bottom) + 16px)}

/* 演示模式横幅 */
.demo-banner{
  background:#fff8e1;color:#8a6d00;font-size:12px;text-align:center;
  padding:8px 12px;border-bottom:1px solid #f0e2b0;
}

/* 底部 Tab 导航 */
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:60;
  width:100%;max-width:430px;min-width:320px;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--card);border-top:1px solid var(--line);
  display:flex;
}
.tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;font-size:11px;color:var(--muted);position:relative;min-height:44px;
}
.tabbar a .ico{font-size:20px;line-height:1}
.tabbar a.active{color:var(--primary)}
.tabbar .badge{
  position:absolute;top:6px;left:calc(50% + 2px);
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--primary);color:#fff;font-size:11px;line-height:18px;text-align:center;
}

/* 底部操作栏（商品详情/结算等），位于 Tab 导航之上时用 .above-tabbar */
.actionbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:60;
  width:100%;max-width:430px;min-width:320px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--card);border-top:1px solid var(--line);
  display:flex;gap:10px;align-items:center;
}
.actionbar.above-tabbar{bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}

/* 通用 */
.muted{color:var(--muted)}
.small{font-size:12px}
.mt8{margin-top:8px}.mt12{margin-top:12px}
.price{color:var(--primary);font-weight:700}
.hide{display:none!important}