/* 车厘子相册 · 全局样式与设计 token（与 design-baseline.md 一致；M0 冻结的公共文件，后续里程碑只读） */
:root {
  /* 配色（design-baseline §2） */
  --bg-gradient: linear-gradient(180deg, #EAF4FB 0%, #FFF9F2 60%, #EAF4FB 100%);
  --blue-primary: #4FA3D1;
  --blue-deep: #3B8BB8;
  --cherry: #C1272D;
  --cherry-bright: #DC2626;
  --card: rgba(255, 255, 255, .6);
  --text: #3B3A36;
  --text-muted: #6B7280;
  --green-leaf: #3E7C3F;
  --stroke: rgba(255, 255, 255, .6);
  /* 圆角（design-baseline §7） */
  --radius-card: 18px;
  --radius-thumb: 12px;
  --radius-pill: 999px;
  /* 动效（design-baseline §8） */
  --dur-glass: .35s;
  --dur-pop: .55s;
  --dur-press: .15s;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --silk: cubic-bezier(.22, 1, .36, 1);
  --slow: cubic-bezier(.22, .61, .21, 1);
}

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

html, body { height: 100%; }

body {
  font-family: 'Ma Shan Zheng', 'MaShanZheng', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg-gradient);
  background-attachment: fixed;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ============ 顶栏（毛玻璃，下滑隐退） ============ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .5); /* 顶栏档位 .45~.5（design-baseline §5） */
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--stroke);
  transition: transform var(--dur-glass) ease;
}
.topbar.hidden { transform: translateY(-100%); }

.brand { display: flex; align-items: center; gap: 8px; }
.brand svg { width: 28px; height: 28px; flex-shrink: 0; }
.brand-name { font-size: 17px; letter-spacing: 2px; color: var(--text); }

.icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-deep);
  transition: transform var(--dur-press) ease, background .2s ease;
}
.icon-btn:active { transform: scale(.95); }
.icon-btn svg { width: 22px; height: 22px; }

/* ============ 页面与空态 ============ */
main {
  min-height: 100%;
  padding: 62px 14px 96px;
  display: flex; flex-direction: column;
}

.view { display: none; flex: 1; flex-direction: column; animation: viewIn var(--dur-glass) var(--silk); }
.view.on { display: flex; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 24px; gap: 14px;
}
.empty .ic-w {
  width: 74px; height: 74px; border-radius: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card);
  border: 1px solid var(--stroke);
  color: var(--cherry);
  box-shadow: 0 8px 24px rgba(59, 90, 120, .08);
  animation: popIn var(--dur-pop) var(--spring);
}
.empty .ic-w svg { width: 34px; height: 34px; }
@keyframes popIn { from { opacity: 0; transform: scale(.4) translateY(24px) rotate(-4deg); } to { opacity: 1; transform: none; } }
.empty h3 { font-size: 19px; letter-spacing: 2px; font-weight: 400; }
.empty p { font-size: 13.5px; color: var(--text-muted); letter-spacing: 1px; line-height: 1.7; }

/* ============ 底部五 tab ============ */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: stretch;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-top: 1px solid var(--stroke);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 0 8px; color: var(--blue-deep);
  transition: transform var(--dur-press) ease;
}
.tab:active { transform: scale(.9); }
.tab svg { width: 24px; height: 24px; }
.tab span { font-size: 11px; letter-spacing: 1px; }
.tab.on { color: var(--cherry); }

/* ============ 三点菜单 ============ */
.dotmenu {
  position: fixed; top: 52px; right: 12px; z-index: 70; min-width: 196px;
  background: rgba(255, 255, 255, .86); /* 菜单浮层需要更实底 */
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--stroke); border-radius: var(--radius-card); padding: 7px;
  box-shadow: 0 18px 46px rgba(40, 60, 80, .28);
  display: none;
  animation: popIn .28s var(--spring);
}
.dotmenu.on { display: block; }
.dotmenu button {
  width: 100%; display: flex; align-items: center; gap: 11px;
  font-size: 14.5px; letter-spacing: 1px; color: var(--text);
  padding: 11px 12px; border-radius: 12px;
  transition: background .2s ease;
}
.dotmenu button:hover { background: rgba(79, 163, 209, .12); }
.dotmenu button svg { width: 20px; height: 20px; color: var(--blue-deep); }
.dotmenu button .soon { margin-left: auto; font-size: 10px; color: var(--text-muted); }

/* ============ 遮罩（点空白关闭菜单） ============ */
.overlay-scrim { position: fixed; inset: 0; z-index: 60; display: none; }
.overlay-scrim.on { display: block; }

/* ============ Toast ============ */
.toast {
  position: fixed; left: 50%; bottom: 108px; z-index: 90;
  transform: translateX(-50%) translateY(8px);
  background: rgba(59, 58, 54, .92); color: #fff;
  font-size: 13.5px; letter-spacing: 1px;
  padding: 10px 20px; border-radius: var(--radius-pill);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s var(--spring);
  max-width: 80vw; text-align: center;
}
.toast.on { opacity: 1; transform: translateX(-50%); }

/* ============ 动效开关 ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}