/*
 * 手机优先。所有尺寸先用手机定，只在最后用 min-width 往大屏扩。
 *
 * 两条硬约束：
 *  - 中文一律 font-weight:700。Android 中文只有 normal/bold 两档，写 500 会静默退回 400，
 *    看起来「怎么加粗都无效」。
 *  - 点击区域不小于 44px。这是手指的物理下限，不是审美问题。
 */

:root {
  --bg: #f5f5f7;
  --card: #ffffff;
  --line: #e6e6ea;
  --text: #1a1a1a;
  --muted: #8a8a92;
  --accent: #c8102e;
  --blue: #07c160;           /* 微信绿，主按钮用它 */
  --radius: 14px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Heiti SC", sans-serif;
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
}

body {
  padding-top: calc(52px + var(--safe-t));
  padding-bottom: calc(60px + var(--safe-b));
}

/* ---------------- 顶栏 ---------------- */

#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(52px + var(--safe-t));
  padding: var(--safe-t) 8px 0;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  z-index: 20;
}
#topbar h1 {
  flex: 1;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon {
  width: 44px; height: 44px;
  border: 0; background: none;
  font-size: 22px; line-height: 1;
  color: var(--text);
  cursor: pointer;
}
.icon:active { opacity: 0.5; }

/* ---------------- 底部 tab ---------------- */

#tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(56px + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: flex;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
  z-index: 20;
}
#tabs button {
  flex: 1;
  border: 0; background: none;
  font-size: 13px;
  font-weight: 700;                 /* 中文只能靠 700，不能用 500 */
  color: var(--muted);
  cursor: pointer;
}
#tabs button.on { color: var(--text); }

/* ---------------- 通用 ---------------- */

main { padding: 12px; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}

.btn {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.btn:active { opacity: 0.7; }
.btn.primary { background: var(--blue); color: #fff; }
.btn.danger  { color: var(--accent); }
.btn.ghost   { background: transparent; border: 1px solid var(--line); }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

.row { display: flex; gap: 10px; }
.row > * { flex: 1; }

.hint { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 6px 0; }
.err  { color: var(--accent); font-size: 13px; margin: 8px 0 0; }

label.field { display: block; margin-bottom: 12px; }
label.field span {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 5px;
}
input[type=text], input[type=password], input[type=number], textarea, select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fafafa;
  font-size: 16px;                  /* 小于 16px 时 iOS 会自动放大页面，很烦 */
  font-family: inherit;
  color: var(--text);
}
textarea { min-height: 72px; resize: vertical; line-height: 1.5; }
input:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px; background: #fff; }

/* ---------------- 款式列表 ---------------- */

.item {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--card);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 10px;
}
.item img {
  width: 76px; height: 76px;
  border-radius: 10px;
  object-fit: cover;
  background: #eee;
  flex-shrink: 0;
}
.item .info { flex: 1; min-width: 0; }
.item .name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item .meta { color: var(--muted); font-size: 13px; }
.item .price { color: var(--accent); font-weight: 700; font-size: 16px; }
.item .pick {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--line);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: transparent;
}
.item.picked .pick { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------------- 照片条 ---------------- */

.photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}
.photos .ph {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: #eee;
}
.photos .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photos .ph .del {
  position: absolute;
  top: 2px; right: 2px;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 15px; line-height: 1;
  cursor: pointer;
}
.photos .ph .busy {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.4);
  color: #fff; font-size: 12px;
}
.photos .add {
  aspect-ratio: 3 / 4;
  border: 2px dashed var(--line);
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

/* ---------------- 合成 / 保存 ---------------- */

.form-opt {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.form-opt button {
  flex: 1 1 45%;
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}
.form-opt button.on { border-color: var(--blue); background: #eafaf0; }

.result { margin-bottom: 14px; }
.result img {
  width: 100%;
  display: block;
  border-radius: var(--radius);
  background: #fff;
}
.result .cap { font-size: 13px; color: var(--muted); margin-top: 6px; text-align: center; }
.result .save-tip {
  margin-top: 8px;
  padding: 10px;
  border-radius: 10px;
  background: #fff8e6;
  font-size: 13px;
  line-height: 1.6;
  color: #7a5c00;
}

/* 九宫格逐张保存页 */
.tile-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 10px 12px calc(10px + var(--safe-b));
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  z-index: 20;
}
.tile-nav .btn { flex: 1; }

/* ---------------- 遮罩 / toast ---------------- */

#login.fullscreen {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: 50;
}
#login form { width: 100%; max-width: 340px; }
#login h2 { font-size: 22px; font-weight: 700; margin: 0 0 4px; text-align: center; }
#login .hint { text-align: center; margin-bottom: 20px; }
#login input { margin-bottom: 14px; }

#mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #fff;
  z-index: 60;
  padding: 24px;
  text-align: center;
}
#mask p { margin: 14px 0 0; font-weight: 700; }
#mask .hint { color: rgba(255,255,255,0.75); font-weight: 400; }
.spin {
  width: 34px; height: 34px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sp 0.8s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }

#toast {
  position: fixed;
  left: 50%; bottom: calc(90px + var(--safe-b));
  transform: translateX(-50%);
  max-width: 84vw;
  padding: 11px 18px;
  border-radius: 22px;
  background: rgba(0,0,0,0.82);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  z-index: 70;
}

.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty .big { font-size: 40px; margin-bottom: 12px; }

/* 微信里没有真正的 hover，但大屏调试时有用 */
@media (min-width: 720px) {
  main { max-width: 720px; margin: 0 auto; }
  #topbar { max-width: 720px; left: 50%; transform: translateX(-50%); }
}