/* ============ 奶茶点单 H5 — 基础样式系统 ============ */

:root {
  /* 主题色(由 Tweaks 注入,这里是默认:奶茶棕) */
  --brand: #8a5a3b;
  --brand-deep: #6b4226;
  --brand-soft: #f3e3d3;
  --accent: #e9839e;      /* 蜜桃粉点缀 */
  --accent-soft: #fbe2e8;

  --cream: #fbf6ef;       /* 页面奶油底 */
  --card: #ffffff;
  --ink: #3a2c22;         /* 主文字 暖棕黑 */
  --ink-soft: #9b8b7e;    /* 次要文字 */
  --line: #f0e7dd;        /* 分隔线 */

  --radius: 26px;         /* 大圆角(Tweak 可调) */
  --radius-sm: 16px;
  --radius-pill: 999px;

  --shadow-soft: 0 10px 30px -12px rgba(122, 84, 54, 0.28);
  --shadow-card: 0 6px 18px -10px rgba(122, 84, 54, 0.25);
  --shadow-pop: 0 16px 40px -14px rgba(122, 84, 54, 0.4);

  --font-title: "ZCOOL KuaiLe", "Noto Sans SC", sans-serif;
  --font-body: "Noto Sans SC", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  background:
    radial-gradient(120% 80% at 0% 0%, #f6ede2 0%, transparent 55%),
    radial-gradient(120% 80% at 100% 100%, #f7e6ea 0%, transparent 55%),
    #efe6da;
  color: var(--ink);
}

/* ====== 舞台:把手机居中,周围柔色背景 ====== */
.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

/* ====== 移动端:整页铺满,无手机边框 ====== */
.phone {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--cream);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
}

/* 模拟状态栏(9:41 那条)已移除,按正常 H5 处理 */
.statusbar { display: none !important; }

/* ====== 桌面端:居中窄列,柔和卡片,但不再是厚重手机壳 ====== */
@media (min-width: 540px) {
  .stage { align-items: center; padding: 24px 16px; }
  .phone {
    width: 430px;
    height: calc(100vh - 48px);
    max-height: 920px;
    border-radius: 30px;
    box-shadow: var(--shadow-pop);
    padding-top: 12px;
  }
  /* 模拟状态栏已移除,保持正常 H5 */
  .statusbar { display: none !important; }
}
.statusbar .dots { display: flex; gap: 4px; align-items: center; }
.statusbar .sig { display: flex; gap: 2px; align-items: flex-end; height: 11px; }
.statusbar .sig i { width: 3px; background: var(--ink); border-radius: 2px; display: block; }
.statusbar .battery { width: 22px; height: 11px; border: 1.5px solid var(--ink); border-radius: 3px; position: relative; }
.statusbar .battery::after { content:""; position:absolute; right:-3px; top:3px; width:2px; height:5px; background:var(--ink); border-radius:0 2px 2px 0;}
.statusbar .battery i { position:absolute; inset:1.5px; width:70%; background: var(--ink); border-radius:1px; }

/* 屏幕滚动区 */
.screen {
  flex: 1 1 auto;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.screen::-webkit-scrollbar { width: 0; }

/* 通用入场:只做位移/缩放,基态始终可见(动画被冻结也不会透明) */
@keyframes popIn { from { transform: translateY(8px) scale(.985); } to { transform: none; } }
.pop { animation: popIn .3s cubic-bezier(.2,.9,.3,1.2) both; }
@media (prefers-reduced-motion: reduce) { .pop { animation: none; } }
/* 真正需要淡入的瞬时元素(toast) */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity:1; transform:none; } }

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.floaty { animation: floaty 3.4s ease-in-out infinite; }

@keyframes bobaUp { 0% { transform: translateY(10px); opacity: 0;} 100% { transform: translateY(0); opacity:1;} }

/* 顶部安全留白 */
.safe-bottom { height: 92px; }

/* 通用按钮 */
.btn {
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.btn:active { transform: scale(.95); }

.btn-primary {
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 18px -8px var(--brand);
}
.btn-primary:disabled { background: #d9cdc0; box-shadow: none; color: #fff; }

/* 标签/胶囊 */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  white-space: nowrap;
}

/* 萌系阴影描边 */
.cute-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* toast */
.toast-wrap {
  position: absolute;
  left: 0; right: 0; bottom: 110px;
  display: flex; justify-content: center;
  pointer-events: none;
  z-index: 60;
}
.toast {
  background: rgba(58,44,34,.94);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 16px;
  box-shadow: var(--shadow-pop);
  animation: fadeUp .3s ease both;
  max-width: 80%;
  text-align: center;
  line-height: 1.5;
}

/* 进度/分段 hidden scrollbar utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }