/* ============================================================
   Beer Notes · Week 1 静态页面骨架
   版本：V0.1 静态预览 | 无登录 / 无数据库 / 无 Supabase
   ============================================================ */

:root {
  --primary: #B5712F;        /* 主色：琥珀棕 */
  --primary-dark: #8F5520;
  --accent: #E8A33D;         /* 亮琥珀 */
  --bg: #F7F3EC;             /* 米白底 */
  --card: #FFFFFF;
  --text: #2B2320;
  --muted: #8A7F77;
  --border: #EAE0D3;
  --star: #F5B942;           /* 星标金 */
  --ok: #3E8E5A;             /* 会回购 */
  --no: #C4503B;             /* 不会回购 */
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: #EFE9DF;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  padding-bottom: 84px;      /* 给底部 TabBar 留空间 */
  box-shadow: 0 0 24px rgba(60, 40, 20, .08);
}

/* ---------- 顶部栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: rgba(247, 243, 236, .94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar .brand { font-size: 18px; font-weight: 800; letter-spacing: .3px; color: var(--primary-dark); }
.topbar .brand small { display: block; font-size: 10px; font-weight: 500; color: var(--muted); letter-spacing: 1.5px; margin-top: 1px; }
.topbar h1 { font-size: 17px; font-weight: 700; }
.topbar .side { display: flex; align-items: center; gap: 12px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  color: var(--primary-dark); background: #F1E8DA; border: none; cursor: pointer;
}
.icon-btn:active { opacity: .75; }
.icon-btn svg { width: 18px; height: 18px; }
.back-btn {
  display: inline-flex; align-items: center; gap: 2px;
  border: none; background: none; color: var(--primary-dark);
  font-size: 15px; font-weight: 600; cursor: pointer; padding: 6px 8px 6px 0;
}
.back-btn svg { width: 18px; height: 18px; }

/* ---------- 底部 TabBar（广场 / 记录 / 我的） ---------- */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; display: flex;
  background: #fff; border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom); z-index: 30;
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 0 7px; color: var(--muted); font-size: 11px;
}
.tabbar a svg { width: 22px; height: 22px; }
.tabbar a.active { color: var(--primary); font-weight: 600; }

/* ---------- 分区标题 ---------- */
.sec-title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 10px; font-size: 14px; font-weight: 700; color: var(--text);
}
.sec-title .more { font-size: 12px; font-weight: 500; color: var(--muted); }

/* ---------- 卡片 ---------- */
.card {
  background: var(--card); border-radius: var(--radius);
  padding: 14px; margin: 0 14px 12px;
  box-shadow: 0 1px 3px rgba(60, 40, 20, .06);
}

/* ---------- 动态卡片 ---------- */
.feed-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--primary));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.avatar.sm { width: 30px; height: 30px; font-size: 12px; }
.feed-head .who { font-size: 14px; font-weight: 600; }
.feed-head .when { font-size: 12px; color: var(--muted); margin-top: 1px; }
.beer-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-block; padding: 3px 8px; border-radius: 6px;
  font-size: 12px; background: #F3EBDE; color: var(--primary-dark);
}
.meta-line { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.meta { font-size: 12px; color: var(--muted); background: #F6F1E8; border-radius: 6px; padding: 3px 8px; }
.rep-badge { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; margin-left: auto; white-space: nowrap; }
.rep-yes { background: #E4F0E8; color: var(--ok); }
.rep-maybe { background: #F0ECE4; color: #7A6E5F; }
.rep-no { background: #F7E6E2; color: var(--no); }
.notes {
  font-size: 13.5px; color: #5A4F46; line-height: 1.6; margin-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.photo {
  width: 100%; height: 130px; border-radius: 10px; margin-top: 10px;
  background: linear-gradient(135deg, #F3E7D3, #E9D3AE);
  display: flex; align-items: center; justify-content: center;
  color: #C8A878; overflow: hidden;
}
.photo svg { width: 40px; height: 40px; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.price-line { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 12px; color: var(--muted); }
.price { font-size: 13px; font-weight: 700; color: var(--primary-dark); }

/* ---------- 星级（仅展示，用宽度裁切实现半星） ---------- */
.stars {
  position: relative; display: inline-block;
  font-size: 15px; line-height: 1; color: #E7DDCF; letter-spacing: 2px;
}
.stars-fill { position: absolute; top: 0; left: 0; white-space: nowrap; overflow: hidden; width: var(--v, 0%); color: var(--star); }
.stars.lg { font-size: 24px; }
.rating-big { display: flex; align-items: baseline; gap: 8px; }
.rating-big .num { font-size: 20px; font-weight: 800; color: var(--primary-dark); }

/* ---------- 统计 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 14px 12px; }
.stat { background: var(--card); border-radius: var(--radius); padding: 14px; text-align: center; box-shadow: 0 1px 3px rgba(60, 40, 20, .06); }
.stat .v { font-size: 20px; font-weight: 800; color: var(--primary-dark); }
.stat .k { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ---------- 柱状分布 ---------- */
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.bar-label { width: 60px; font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.bar-track { flex: 1; height: 8px; background: #F0E8DB; border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--primary)); border-radius: 4px; }
.bar-num { width: 26px; font-size: 12px; color: var(--muted); }

/* ---------- 菜单 ---------- */
.menu { background: #fff; border-radius: var(--radius); margin: 0 14px 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(60, 40, 20, .06); }
.menu a { display: flex; align-items: center; gap: 12px; padding: 13px 14px; font-size: 14px; border-bottom: 1px solid var(--border); }
.menu a:last-child { border-bottom: none; }
.menu a:active { background: #FBF7F0; }
.menu .m-ico { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #F3EBDE; color: var(--primary-dark); flex: none; }
.menu .m-ico svg { width: 16px; height: 16px; }
.menu .arrow { margin-left: auto; color: #C9BCA9; }
.menu .desc { font-size: 12px; color: var(--muted); margin-left: auto; margin-right: 2px; }

/* ---------- 表单 ---------- */
.form { padding: 4px 14px 20px; }
.form-card { background: #fff; border-radius: var(--radius); padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(60, 40, 20, .06); }
.form-card .fc-title { font-size: 13px; font-weight: 700; color: var(--primary-dark); margin-bottom: 12px; }
.field { margin-bottom: 13px; }
.field:last-child { margin-bottom: 0; }
.field label { display: flex; align-items: center; font-size: 13px; color: #5A4F46; margin-bottom: 6px; font-weight: 600; }
.field .req { color: var(--no); margin-left: 2px; }
.field .hint { font-size: 11px; color: var(--muted); margin-left: 6px; font-weight: 400; }
.field input[type=text],
.field input[type=email],
.field input[type=password],
.field input[type=number],
.field select,
.field textarea {
  width: 100%; padding: 11px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 16px;   /* ≥16px：iOS/微信 WebView 聚焦时不再触发页面自动放大 */
  background: #fff; color: var(--text);
  outline: none; -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" stroke="%238A7F77" stroke-width="2" fill="none" stroke-linecap="round"/></svg>');
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px;
  padding-right: 32px;
}
.field textarea { resize: none; min-height: 90px; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.input-unit { position: relative; }
.input-unit input { padding-right: 46px; }
.input-unit .unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; pointer-events: none; }
.inline-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- 数字选择器评分（1.0 ~ 5.0，0.5 步进，9 档） ---------- */
.rating-panel { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.rating-panel .stars.lg { flex: none; }
.rating-panel .val { font-size: 24px; font-weight: 800; color: var(--primary-dark); }
.rating-panel .val.empty { color: var(--muted); font-size: 15px; font-weight: 500; }
.rating-opts { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
.rating-opts button {
  padding: 9px 0; border: 1px solid var(--border); background: #fff;
  border-radius: 9px; font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer;
}
.rating-opts button.on { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- 三选一分段（回购意愿） ---------- */
.seg { display: flex; gap: 8px; }
.seg button {
  flex: 1; padding: 10px 0; border-radius: 10px;
  border: 1px solid var(--border); background: #fff;
  font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer;
}
.seg button.on { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- 照片上传 ---------- */
.photo-upload {
  border: 1.5px dashed var(--border); border-radius: 12px; padding: 20px;
  text-align: center; color: var(--muted); background: #FBF8F2;
  font-size: 13px; cursor: pointer; position: relative; overflow: hidden;
}
.photo-upload svg { width: 28px; height: 28px; margin-bottom: 6px; color: #C9BCA9; }
.photo-upload.has-img { border-style: solid; background: #F3E7D3; }
.photo-upload img { width: 100%; max-height: 160px; object-fit: cover; border-radius: 8px; display: block; }

/* ---------- 按钮 ---------- */
.btn { display: block; width: 100%; padding: 14px; border: none; border-radius: 12px; background: var(--primary); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.btn:active { opacity: .85; }
.btn.ghost { background: #fff; color: var(--primary-dark); border: 1px solid var(--primary); }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }
/* 保存栏：sticky 吸底，但悬浮在固定 TabBar（高 56px + safe-area）之上，二者永不重叠；
   底部空间由 TabBar 的 safe-area 承担，本栏不再重复吃 safe-area；z-index 低于 TabBar(30) */
.bottom-bar { position: sticky; bottom: calc(56px + env(safe-area-inset-bottom)); background: var(--bg); padding: 12px 14px 12px; z-index: 10; }

/* record 页专用：底部滚动空间 = 保存栏(约69px) + TabBar(56px) + safe-area，保证照片卡片
   的「更换/移除」按钮与保存记录都能滚动到完全可见、不被任何底部栏遮挡 */
.app-record { padding-bottom: calc(125px + env(safe-area-inset-bottom)); }

/* Week 8 C1：.app-record 作用域轻量密度优化（仅 record 页生效，全局 .form-card 零改动）。
   收敛卡片内边距 / 间距，压缩「正在喝」流程的页面长度；不缩控件尺寸，可点区域不变 */
.app-record .form-card { padding: 12px; margin-bottom: 10px; }
.app-record .form-card .fc-title { margin-bottom: 10px; }
.app-record .rating-panel { margin-bottom: 10px; }

/* beer-create 页专用（无 TabBar 的表单页）：保存栏直接贴视口底部（自吃 safe-area），
   底部滚动空间 = 保存栏(约69px) + safe-area */
.app-form { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.app-form .bottom-bar { bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

/* ---------- 悬浮新增按钮 ---------- */
.fab {
  position: fixed; bottom: 88px; right: max(14px, calc(50% - 226px));  /* 窄屏（<452px）时至少留 14px，不再跑出屏幕 */
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(181, 113, 47, .4); z-index: 25;
}
.fab svg { width: 24px; height: 24px; }
.fab:active { transform: scale(.95); }

/* ---------- 筛选 chips ---------- */
.chips { display: flex; gap: 8px; padding: 2px 14px 12px; overflow-x: auto; }
.chips .chip { border: none; cursor: pointer; padding: 6px 12px; border-radius: 16px; background: #F1E8DA; color: var(--muted); font-size: 13px; white-space: nowrap; }
.chips .chip.on { background: var(--primary); color: #fff; }

/* ---------- 统计条 ---------- */
.summary {
  display: flex; justify-content: space-between;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; border-radius: var(--radius); margin: 4px 14px 14px; padding: 14px 16px;
}
.summary .s-item { text-align: center; flex: 1; }
.summary .s-item .v { font-size: 18px; font-weight: 800; }
.summary .s-item .k { font-size: 11px; opacity: .8; margin-top: 2px; }

/* ---------- 空状态 ---------- */
.empty { text-align: center; padding: 50px 20px; color: var(--muted); }
.empty svg { width: 46px; height: 46px; color: #D8CBB8; margin-bottom: 10px; }
.empty p { font-size: 14px; }

/* ---------- 搜索 ---------- */
.search-bar { display: flex; gap: 10px; padding: 12px 14px 8px; }
.search-bar .box { flex: 1; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 0 12px; }
.search-bar .box svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.search-bar input { border: none; outline: none; flex: 1; padding: 11px 0; font-size: 16px; background: transparent; color: var(--text); }
.filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 14px 12px; }
.filter-grid select { width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; background: #fff; font-size: 16px; color: var(--text); -webkit-appearance: none; appearance: none; }

/* ---------- 啤酒条目 ---------- */
.beer-item { display: flex; gap: 12px; align-items: center; }
.beer-thumb {
  width: 44px; height: 44px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, #F3E7D3, #E9D3AE);
  display: flex; align-items: center; justify-content: center; color: #C8A878;
}
.beer-thumb svg { width: 22px; height: 22px; }
.beer-item .b-name { font-size: 15px; font-weight: 700; }
.beer-item .b-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.beer-item .b-rating { margin-left: auto; text-align: right; flex: none; }
.beer-item .b-rating .v { font-size: 14px; font-weight: 800; color: var(--primary-dark); }

/* ---------- 页脚提示 ---------- */
.note-tip { font-size: 12px; color: var(--muted); text-align: center; padding: 6px 16px 16px; line-height: 1.6; }

/* ============================================================
   Week 1 最终版 · 新增样式（页面职责重构后）
   ============================================================ */

/* ---------- 啤酒选择列表（record 新增品鉴） ---------- */
.pick-list { display: flex; flex-direction: column; gap: 8px; }
.pick-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border: 1.5px solid var(--border); border-radius: 12px;
  background: #fff; cursor: pointer; text-align: left; width: 100%;
  font-family: inherit; font-size: 14px; color: var(--text);
}
.pick-item .pick-info { flex: 1; min-width: 0; }
.pick-item .pick-name { font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pick-item .pick-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.pick-item .pick-check {
  margin-left: auto; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--border); flex: none;
  display: flex; align-items: center; justify-content: center; color: transparent;
}
.pick-item.on { border-color: var(--primary); background: #FDF8F1; }
.pick-item.on .pick-check { background: var(--primary); border-color: var(--primary); color: #fff; }
.pick-item.on .pick-check svg { width: 12px; height: 12px; }
.pick-add {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 8px; padding: 11px; border: 1.5px dashed var(--primary);
  border-radius: 12px; background: #FDF8F1; color: var(--primary-dark);
  font-size: 14px; font-weight: 600; cursor: pointer; width: 100%; font-family: inherit;
}
.pick-add svg { width: 16px; height: 16px; }

/* ---------- Beer 只读信息卡（选中已有 Beer 后展示） ---------- */
.beer-info-banner {
  background: linear-gradient(135deg, #F3E7D3, #EAD9B8);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 4px;
}
.beer-info-banner .bi-name { font-size: 15px; font-weight: 800; color: var(--primary-dark); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.beer-info-banner .bi-note { font-size: 11px; color: var(--muted); margin-top: 4px; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.info-cell { background: rgba(255,255,255,.72); border-radius: 10px; padding: 9px 12px; }
.info-cell .k { font-size: 11px; color: var(--muted); }
.info-cell .v { font-size: 14.5px; font-weight: 700; color: var(--text); margin-top: 2px; }
.info-cell.full { grid-column: 1 / -1; }

/* ---------- 品鉴详情页（tasting.html） ---------- */
.detail-photo {
  width: 100%; height: 190px; border-radius: 12px; margin-top: 12px;
  background: linear-gradient(135deg, #F3E7D3, #E9D3AE);
  display: flex; align-items: center; justify-content: center; color: #C8A878; overflow: hidden;
}
.detail-photo svg { width: 52px; height: 52px; }
.detail-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Week 7 B4：详情页照片展示（tasting.html） ---------- */
/* 沿用 B2 真机验证结论：iOS 微信 WKWebView 下用「显式高度 + width:auto + max-width + object-fit:contain」，
   不依赖 max-height 对超大内在尺寸图的脆弱计算；详情页允许比 record 预览（220px）更大，取 300px；
   容器 overflow:hidden 仅防横向溢出，不裁剪后续内容（容器高度由内容自适应）。 */
.detail-photo-box {
  max-width: 100%; overflow: hidden;
  margin-top: 12px; padding: 10px;
  border: 1px solid var(--border); border-radius: 12px;
  background: #FBF8F2;
}
.detail-photo-box img {
  display: block; margin: 0 auto;
  height: 300px; width: auto; max-width: 100%;
  object-fit: contain;                 /* 保持比例不拉伸，宽图/竖图均完整显示 */
  border-radius: 8px; background: #fff;
}
/* 照片区加载中 / 失败态（失败显示真实错误，不静默伪装成功） */
.dp-status {
  font-size: 13px; color: var(--muted);
  text-align: center; padding: 24px 12px; line-height: 1.7;
}
.dp-err {
  color: var(--no); background: #FBEDE9;
  border-radius: 8px; padding: 10px 12px; word-break: break-all;
}

/* ---------- Week 7 B5：广场卡片照片缩略图（index.html） ---------- */
/* 显式宽高（iOS 微信 WKWebView 约束可靠）+ object-fit:cover 裁切填充；容器限宽防溢出。
   失败/无图时该节点整体不渲染或被移除，不留空框。 */
.feed-photo {
  margin-top: 10px; max-width: 100%; overflow: hidden;
  border-radius: 10px; background: #F1EBE1;
}
.feed-photo img {
  display: block;
  width: 100%; height: 150px;
  object-fit: cover;                   /* 缩略图裁切填充，卡片不随原图尺寸变化 */
}
.notes-full { font-size: 14px; color: #4A4038; line-height: 1.75; margin-top: 10px; }
.price-big { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.price-big .k { font-size: 12px; color: var(--muted); }
.price-big .v { font-size: 18px; font-weight: 800; color: var(--primary-dark); }

/* ---------- 啤酒详情页（beer.html） ---------- */
.hero {
  background: linear-gradient(135deg, #F3E7D3, #EAD9B8);
  border-radius: var(--radius); margin: 14px; padding: 18px 16px;
  box-shadow: 0 1px 3px rgba(60, 40, 20, .06);
}
.hero .h-name { font-size: 20px; font-weight: 800; color: var(--primary-dark); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero .h-brewery { font-size: 13px; color: var(--muted); margin-top: 4px; }
.hero .h-stats { display: flex; gap: 20px; margin-top: 14px; }
.hero .h-stats .v { font-size: 18px; font-weight: 800; color: var(--text); }
.hero .h-stats .k { font-size: 11px; color: var(--muted); margin-top: 2px; }
.hero .info-grid { margin-top: 12px; }
/* Week 8 Phase D：hero 区「再次品鉴」主按钮（h-stats 与 info-grid 之间，最小追加）。
   复用全局 .btn（主按钮视觉）；仅需锚点居中 + 上间距，作用域限定 .hero，不影响其他页面 */
.hero .btn-retaste { margin-top: 12px; text-align: center; }

/* ---------- 记录列表（mine 页，复用动态卡片） ---------- */
.rec-item { cursor: pointer; }
.rec-item:active { background: #FBF7F0; }

/* ---------- Week 2：数据源状态徽标（record 页） ---------- */
.src-badge {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--muted);
  background: #FBF7F0; border: 1px solid var(--border);
  border-radius: 9px; padding: 7px 10px; margin-bottom: 10px;
  line-height: 1.5;
}
.src-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.src-badge.ok .dot { background: var(--ok); }
.src-badge.warn .dot { background: var(--star); }
.src-badge.err .dot { background: var(--no); }

/* ---------- 空酒款列表占位 ---------- */
.pick-empty {
  text-align: center; padding: 22px 16px;
  font-size: 13px; color: var(--muted); line-height: 1.8;
  border: 1px dashed var(--border); border-radius: var(--radius);
}

/* ---------- 登录页（V0.2 / Week 5） ---------- */
.login-brand { text-align: center; padding: 34px 0 18px; }
.login-brand .logo { font-size: 26px; font-weight: 800; color: var(--primary-dark); letter-spacing: 1px; }
.login-brand .sub { font-size: 11px; color: var(--muted); letter-spacing: 2px; margin-top: 4px; }
.field-msg { font-size: 12px; line-height: 1.5; margin-top: 6px; min-height: 0; }
.field-msg.ok { color: #2E7D32; }
.field-msg.err { color: var(--no); }
.form-alert { display: none; font-size: 12.5px; line-height: 1.6; padding: 10px 12px; border-radius: 10px; background: #FDECEC; color: var(--no); margin-bottom: 12px; }
.form-alert.show { display: block; }

/* ---------- 品鉴详情：本人记录操作（Week 5 RLS 验收） ---------- */
.btn.danger { background: #fff; color: var(--no); border: 1px solid var(--no); }
.btn.danger:disabled { opacity: .5; }

/* ---------- 编辑表单触控（移动端点按无 300ms 延迟 / 双击缩放干扰） ---------- */
.rating-opts button, .seg button, .btn, .chips .chip { touch-action: manipulation; }

/* ---------- 照片：拍照/相册双入口 + 预览操作（Week 7 B2） ---------- */
.photo-entry-row { display: flex; gap: 10px; margin-top: 10px; }
.photo-entry-btn {
  flex: 1; padding: 11px 0; border-radius: 10px;
  border: 1px solid var(--primary); background: #fff;
  font-size: 14px; font-weight: 600; color: var(--primary-dark); cursor: pointer;
}
.photo-entry-btn:active { opacity: .85; }
/* 照片预览：图片显式固定高度（约 220px 内容高，视觉与容器固定高方案一致），
   object-fit:contain 保证比例；容器高度由「图片 + 下方操作按钮」自适应，
   不再固定容器高，避免 .photo-actions 被 overflow 裁剪。 */
.photo-preview {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 10px; background: #FBF8F2;
  max-width: 100%; overflow: hidden;   /* 仅防横向溢出；高度由内容自适应，不裁剪按钮 */
}
/* ID selector 提高 specificity，防止未来任何同文件规则覆盖预览约束 */
#photoPrev img, .photo-preview img {
  display: block; margin: 0 auto;
  width: auto; height: 220px; max-width: 100%;
  object-fit: contain;                 /* 完整显示且不拉伸，宽图/竖图均居中 */
  border-radius: 8px; background: #fff;
}
.photo-actions { display: flex; gap: 10px; margin-top: 10px; }
.photo-act-btn {
  flex: 1; padding: 10px 0; border-radius: 10px;
  border: 1px solid var(--primary); background: #fff;
  font-size: 14px; font-weight: 600; color: var(--primary-dark); cursor: pointer;
}
.photo-act-btn.photo-remove { border-color: var(--no); color: var(--no); }
.photo-entry-btn, .photo-act-btn { touch-action: manipulation; }

/* ============================================================
   Week 8 Phase A · 搜索结果卡片（search.html）
   信息层级：名称 → 风格/酒厂 → ABV/OG；缺失字段自然隐藏
   ============================================================ */
.s-card { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; }
.s-card .beer-thumb { width: 40px; height: 40px; border-radius: 9px; }
.s-card .beer-thumb svg { width: 20px; height: 20px; }
.s-body { flex: 1; min-width: 0; }
.s-name { font-size: 16px; font-weight: 800; color: var(--text); line-height: 1.35; }
.s-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.s-meta .s-style { font-size: 11px; font-weight: 600; color: var(--primary-dark); background: #F3EBDE; border-radius: 6px; padding: 2px 7px; }
.s-meta .s-brewery { font-size: 12px; color: var(--muted); }
.s-stats { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.s-stats .s-metric { font-size: 11px; color: var(--muted); background: #F6F1E8; border-radius: 6px; padding: 2px 7px; }