/* =========================================================
   乐龄生活 · 样式
   设计要点：
   - 字号用 rem，整站跟随「字号」设置缩放（标准 18、长者模式 22，可调到 30）
   - 点击区域不小于 48×48 逻辑像素
   - 状态不只靠颜色：每个状态都带文字和图标
   - 手机：底部导航；≥ 960px 电脑：顶部导航 + 多列网格
   ========================================================= */

:root {
  --fs: 18px;
  --bg: #F3F5F1;
  --surface: #FFFFFF;
  --surface-2: #F8FAF7;
  --ink: #17201B;
  --ink-2: #434E47;
  --ink-3: #5E6862;
  --line: #D5DCD4;
  --brand: #12614F;
  --brand-dark: #0B4739;
  --brand-soft: #E1F0EA;
  --accent: #A9430F;
  --accent-soft: #FBE9DD;
  --warn-ink: #634400;
  --warn-bg: #FFF2CF;
  --info-ink: #1F3D68;
  --info-bg: #E6EEF9;
  --danger: #A8261A;
  --danger-bg: #FCE8E5;
  --focus: #1F5FD1;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow: 0 1px 2px rgba(23, 32, 27, .06), 0 4px 14px rgba(23, 32, 27, .05);
  --tabbar-h: 4.1rem;
  --font: "PingFang TC", "PingFang HK", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans HK", "Source Han Sans TC", system-ui, sans-serif;
}

body[data-lang="zh-Hans"] { --font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif; }
body[data-lang="en"], body[data-lang="pt"] { --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif; }

body.hc {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --ink: #000000;
  --ink-2: #111111;
  --ink-3: #222222;
  --line: #2B2B2B;
  --brand: #004536;
  --brand-dark: #002E24;
  --brand-soft: #D7EDE4;
  --accent: #7A2A00;
  --shadow: none;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--fs); -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 1rem);
}

img { max-width: 100%; display: block; }
a { color: var(--brand); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; font-weight: 700; }
p { margin: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: .6rem 1rem;
}
.skip:focus { left: .5rem; top: .5rem; }

.svg-i { width: 1.25em; height: 1.25em; flex: none; }
.i { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 1rem; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.small { font-size: .85rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------- 顶部栏 ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .75rem; min-height: 3.6rem;
}
.brand {
  display: flex; align-items: center; gap: .5rem;
  text-decoration: none; color: var(--ink); font-weight: 800;
  min-height: 48px;
}
.brand-mark {
  width: 2.2rem; height: 2.2rem; border-radius: 12px;
  background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: 1.15rem;
}
.brand-name { display: none; font-size: 1.1rem; letter-spacing: .04em; }

.city-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: 48px; padding: 0 .6rem;
  border: 0; background: transparent; border-radius: var(--r-sm);
  font-weight: 600; cursor: pointer; color: var(--ink);
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.city-btn #cityLabel { overflow: hidden; text-overflow: ellipsis; }
.city-btn:hover { background: var(--surface-2); }
.city-btn .svg-i { color: var(--brand); }

.desk-nav { display: none; }

.top-actions { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.icon-btn {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink);
  border: 0; background: transparent; cursor: pointer; text-decoration: none;
}
.icon-btn:hover { background: var(--surface-2); }
.lang-btn {
  display: inline-flex; align-items: center; gap: .25rem;
  min-height: 48px; min-width: 48px; padding: 0 .6rem; border-radius: 999px;
  border: 2px solid var(--line); background: var(--surface); color: var(--ink);
  font-weight: 800; cursor: pointer; font-size: .9rem;
}
.lang-btn:hover { border-color: var(--brand); }
.lang-btn .svg-i { color: var(--brand); }
.lang-badge {
  width: 2.8rem; height: 2.8rem; border-radius: 12px; flex: none;
  display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-dark); font-weight: 800;
}
.mode-btn {
  min-height: 48px; padding: 0 .85rem; border-radius: 999px;
  border: 2px solid var(--brand); background: var(--surface); color: var(--brand);
  font-weight: 700; cursor: pointer; white-space: nowrap; font-size: .9rem;
}
.mode-btn[aria-pressed="true"] { background: var(--brand); color: #fff; }

.city-banner {
  background: var(--warn-bg); color: var(--warn-ink);
  padding: .7rem 1rem; text-align: center; font-weight: 600;
}

/* ---------------- 底部导航（手机） ---------------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  min-height: var(--tabbar-h); text-decoration: none; color: var(--ink-3);
  font-size: .82rem; font-weight: 600; position: relative;
}
.tab .svg-i { width: 1.6rem; height: 1.6rem; }
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 .15rem; }
body[data-lang="en"] .tab, body[data-lang="pt"] .tab { font-size: .74rem; }
.tab[aria-current="page"] { color: var(--brand); }
.tab[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 4px;
  background: var(--brand); border-radius: 0 0 4px 4px;
}
.tab .dot {
  position: absolute; top: .45rem; left: calc(50% + .45rem);
  min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: .7rem; line-height: 1.2rem; text-align: center;
}

.help-fab {
  position: fixed; right: 1rem; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + .8rem); z-index: 25;
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 52px; padding: 0 1.1rem; border-radius: 999px;
  background: var(--accent); color: #fff; text-decoration: none; font-weight: 700;
  box-shadow: 0 6px 18px rgba(169, 67, 15, .35);
}
.help-fab .svg-i { width: 1.3rem; height: 1.3rem; }

/* ---------------- 通用元素 ---------------- */
main { display: block; padding-top: 1rem; outline: none; }
main:focus, main:focus-visible { outline: none; }
.page { display: flex; flex-direction: column; gap: 1.25rem; }

.section { display: flex; flex-direction: column; gap: .75rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.section-head h2 { font-size: 1.25rem; }
.section-head a { font-weight: 600; text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1rem;
}
.card + .card { margin-top: 0; }
.card-title { font-size: 1.1rem; margin-bottom: .5rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 52px; padding: 0 1.3rem; border-radius: var(--r-md);
  border: 2px solid transparent; font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer; text-align: center; line-height: 1.25;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-secondary { background: var(--surface); color: var(--brand); border-color: var(--brand); }
.btn-secondary:hover { background: var(--brand-soft); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.btn-block { width: 100%; }
.btn-lg { min-height: 60px; font-size: 1.1rem; }
.btn[disabled], .btn[aria-disabled="true"] { background: #DCE0DB; color: #5B635E; border-color: #DCE0DB; cursor: not-allowed; }
.btn-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.btn-row > .btn { flex: 1 1 10rem; }

.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .6rem; border-radius: 999px; font-size: .82rem; font-weight: 700;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
  white-space: nowrap; max-width: 100%;
}
.prod .meta .chip, .state-line .chip, .person .chip, .event-card .chip { white-space: normal; }
.chip .svg-i { width: 1em; height: 1em; }
.chip-ok { background: var(--brand-soft); color: var(--brand-dark); border-color: transparent; }
.chip-warn { background: var(--warn-bg); color: var(--warn-ink); border-color: transparent; }
.chip-info { background: var(--info-bg); color: var(--info-ink); border-color: transparent; }
.chip-danger { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.chip-accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

.price { color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.price small { font-size: .7em; font-weight: 700; }

.note {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .8rem 1rem; border-radius: var(--r-md);
  background: var(--info-bg); color: var(--info-ink);
}
.note .svg-i { margin-top: .2rem; }
.note-warn { background: var(--warn-bg); color: var(--warn-ink); }
.note-ok { background: var(--brand-soft); color: var(--brand-dark); }

.back-link {
  display: inline-flex; align-items: center; gap: .2rem;
  min-height: 48px; font-weight: 600; text-decoration: none; color: var(--ink-2);
  background: none; border: 0; padding: 0 .3rem 0 0; cursor: pointer;
}
.page-title { font-size: 1.5rem; }

/* 图片失败兜底 */
.ph {
  background: linear-gradient(135deg, var(--brand-soft), #EEF3EF);
  color: var(--brand); display: grid; place-items: center;
}
.ph .svg-i { width: 2.4rem; height: 2.4rem; opacity: .8; }
.media { position: relative; overflow: hidden; background: var(--brand-soft); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media .ph { position: absolute; inset: 0; }
.big-tile .ph .svg-i, .hero .ph .svg-i { display: none; }

/* ---------------- 首页 · 标准模式 ---------------- */
.hero {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  min-height: 15rem; color: #fff; display: flex; align-items: flex-end;
  background: var(--brand-dark);
}
.hero .media { position: absolute; inset: 0; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 30, 24, .05) 20%, rgba(8, 30, 24, .78) 100%);
}
.hero-body { position: relative; z-index: 1; padding: 1.25rem; display: flex; flex-direction: column; gap: .7rem; width: 100%; }
.hero h1 { font-size: 1.6rem; }
.hero p { opacity: .95; }

.for-whom {
  display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
  min-height: 48px; padding: 0 1rem; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .95); color: var(--ink); font-weight: 700;
}
.for-whom .svg-i { color: var(--brand); }

.search-box {
  display: flex; align-items: center; gap: .5rem;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-md);
  padding: 0 .4rem 0 .9rem; min-height: 56px;
}
.search-box:focus-within { border-color: var(--brand); }
.search-box input { flex: 1; border: 0; outline: none; background: transparent; min-height: 52px; min-width: 0; }
.search-box .svg-i { color: var(--ink-3); }

.cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.cat {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .7rem .2rem; border-radius: var(--r-md); text-decoration: none; color: var(--ink);
  font-weight: 600; font-size: .9rem; text-align: center; min-height: 5.4rem;
  min-width: 0; overflow-wrap: anywhere; hyphens: auto;
}
.cat:hover { background: var(--surface); }
.cat-ic {
  width: 3.1rem; height: 3.1rem; border-radius: 16px;
  display: grid; place-items: center; background: var(--brand-soft); color: var(--brand);
}
.cat-ic .svg-i { width: 1.6rem; height: 1.6rem; }
.cat.off .cat-ic { background: #ECEEEA; color: var(--ink-3); }
.cat-state { font-size: .72rem; color: var(--ink-3); font-weight: 600; }

.order-strip {
  display: flex; align-items: center; gap: .9rem; text-decoration: none; color: inherit;
}
.order-strip .ico {
  width: 3rem; height: 3rem; border-radius: 14px; flex: none;
  background: var(--brand-soft); color: var(--brand); display: grid; place-items: center;
}
.order-strip .grow { flex: 1; min-width: 0; }
.order-strip h3 { font-size: 1.05rem; }

/* 商品卡 */
.prod-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; }
.prod {
  display: grid; grid-template-columns: 7.2rem 1fr; gap: .9rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: .7rem; text-decoration: none; color: inherit;
}
.prod:hover { border-color: var(--brand); }
.prod .media { border-radius: var(--r-md); aspect-ratio: 1 / 1; }
.prod-body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.prod h3 { font-size: 1.05rem; }
.prod .provider { font-size: .85rem; color: var(--ink-3); }
.prod .meta { display: flex; flex-wrap: wrap; gap: .35rem; }
.prod .foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }

/* 活动横滑 */
.hscroll { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; }
.hscroll > * { scroll-snap-align: start; }
.event-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
}
.event-card .media { aspect-ratio: 16 / 10; }
.event-card .body { padding: .8rem 1rem 1rem; display: flex; flex-direction: column; gap: .35rem; }
.event-card h3 { font-size: 1.05rem; }

/* ---------------- 首页 · 长者模式 ---------------- */
.greet { display: flex; flex-direction: column; gap: .4rem; }
.greet h1 { font-size: 1.7rem; }
.greet .who {
  display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
  min-height: 52px; padding: 0 1.1rem; border-radius: 999px;
  border: 2px solid var(--brand); background: var(--surface); color: var(--brand); font-weight: 800; cursor: pointer;
}

.big-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.big-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 9.5rem; border-radius: var(--r-lg); overflow: hidden;
  text-decoration: none; color: #fff; background: var(--brand-dark);
  border: 3px solid transparent;
}
.big-tile:hover { border-color: var(--brand); }
.big-tile .media { position: absolute; inset: 0; }
.big-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(5, 25, 19, .82) 100%); }
.big-tile .label { position: relative; z-index: 1; padding: .8rem 1rem; display: flex; flex-direction: column; }
.big-tile strong { font-size: 1.3rem; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; }
.big-tile span { overflow-wrap: anywhere; }
.big-tile span { font-size: .9rem; opacity: .95; }
.big-tile.call {
  grid-column: 1 / -1; min-height: 6.5rem; background: var(--accent);
  flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; padding: 1rem 1.2rem;
}
.big-tile.call::after { display: none; }
.big-tile.call .ring {
  width: 4rem; height: 4rem; border-radius: 50%; background: rgba(255,255,255,.18);
  display: grid; place-items: center; flex: none;
}
.big-tile.call .ring .svg-i { width: 2rem; height: 2rem; }
.big-tile.call .label { padding: 0; }

.all-link {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; padding: 0 1.2rem; border-radius: var(--r-lg);
  background: var(--surface); border: 2px solid var(--line); text-decoration: none; color: var(--ink);
  font-weight: 800; font-size: 1.15rem;
}

/* ---------------- 列表 · 分类页 ---------------- */
.cat-head {
  display: grid; grid-template-columns: 1fr; gap: .8rem;
}
.cat-banner { border-radius: var(--r-lg); aspect-ratio: 21 / 8; }
.filters { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .2rem; }
.filter {
  min-height: 48px; padding: 0 1rem; border-radius: 999px; white-space: nowrap;
  border: 2px solid var(--line); background: var(--surface); font-weight: 600; cursor: pointer;
}
.filter[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }

.empty {
  text-align: center; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .8rem;
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-lg);
}
.empty .svg-i { width: 3rem; height: 3rem; color: var(--ink-3); }

/* 全部服务 */
.svc-list { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.svc {
  display: flex; align-items: center; gap: .9rem; padding: .7rem .9rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  text-decoration: none; color: inherit; min-height: 64px;
}
.svc .cat-ic { width: 2.8rem; height: 2.8rem; }
.svc .grow { flex: 1; min-width: 0; }
.svc h3 { font-size: 1.05rem; }

/* ---------------- 详情页 ---------------- */
.detail { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.detail-media { border-radius: var(--r-lg); aspect-ratio: 4 / 3; }
.detail-main { display: flex; flex-direction: column; gap: 1rem; }
.detail h1 { font-size: 1.45rem; }
.kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; font-weight: 600; }
.ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.ticks li { display: flex; gap: .5rem; align-items: flex-start; }
.ticks li .svg-i { margin-top: .2rem; color: var(--brand); }
.ticks.no li .svg-i { color: var(--ink-3); }
.sticky-cta {
  position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); z-index: 20;
  background: var(--surface); border-top: 1px solid var(--line);
  padding: .7rem 1rem; margin: 0 -1rem;
  display: flex; align-items: center; gap: 1rem;
}
.sticky-cta .total { flex: 1; min-width: 0; }
.sticky-cta { flex-wrap: wrap; }
.sticky-cta .btn { flex: 1 0 auto; min-width: 9rem; max-width: 100%; }

.provider-card { display: flex; align-items: center; gap: .8rem; }
.provider-card .ico { width: 2.8rem; height: 2.8rem; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: none; }

/* ---------------- 预约流程 ---------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; list-style: none; padding: 0; margin: 0; counter-reset: s; }
.steps li {
  counter-increment: s; display: flex; flex-direction: column; align-items: center; gap: .25rem;
  font-size: .85rem; font-weight: 700; color: var(--ink-3); text-align: center;
}
.steps li::before {
  content: counter(s); width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--line); background: var(--surface);
}
.steps li.done::before { content: "✓"; background: var(--brand); border-color: var(--brand); color: #fff; }
.steps li.now { color: var(--brand-dark); }
.steps li.now::before { border-color: var(--brand); color: var(--brand); border-width: 3px; }

.choice-list { display: flex; flex-direction: column; gap: .6rem; }
.choice {
  display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; min-height: 64px;
  border: 2px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer;
  text-align: left; width: 100%;
}
.choice input { width: 1.4rem; height: 1.4rem; accent-color: var(--brand); flex: none; }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.choice.disabled { opacity: .7; cursor: not-allowed; background: var(--surface-2); }
.choice .grow { flex: 1; min-width: 0; }
.avatar {
  width: 2.8rem; height: 2.8rem; border-radius: 50%; flex: none;
  background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800;
}
.avatar.alt { background: #6B5B95; }
.avatar.gray { background: #8A938D; }

.date-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: .5rem; }
.slot-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .5rem; }
.pick {
  min-height: 60px; border-radius: var(--r-md); border: 2px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem;
  cursor: pointer; font-weight: 700; padding: .3rem;
}
.pick small { font-weight: 600; font-size: .75rem; color: var(--ink-3); }
.pick[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: #fff; }
.pick[aria-pressed="true"] small { color: #fff; }
.pick:disabled { background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; text-decoration: line-through; }
.pick:disabled small { text-decoration: none; }

.fee { display: flex; flex-direction: column; gap: .4rem; }
.fee-row { display: flex; justify-content: space-between; gap: 1rem; }
.fee-row.total { border-top: 1px dashed var(--line); padding-top: .6rem; font-weight: 800; font-size: 1.15rem; }

.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-weight: 700; }
.field input, .field textarea, .field select {
  min-height: 52px; padding: .6rem .8rem; border-radius: var(--r-sm);
  border: 2px solid var(--line); background: var(--surface);
}
.field input:focus, .field textarea:focus { border-color: var(--brand); outline: none; }
.field textarea { min-height: 6rem; resize: vertical; }
.check { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; padding: .3rem 0; }
.check input { width: 1.5rem; height: 1.5rem; accent-color: var(--brand); margin-top: .1rem; flex: none; }

/* 收银台 */
.countdown { font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); }
.pay-amount { font-size: 2.4rem; }
.processing { display: inline-block; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.result { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: 1.5rem 1rem; }
.result .big-ic { width: 5rem; height: 5rem; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.result .big-ic .svg-i { width: 2.6rem; height: 2.6rem; }

/* ---------------- 订单 ---------------- */
.seg { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; }
.order-card { display: flex; flex-direction: column; gap: .6rem; text-decoration: none; color: inherit; }
.order-card:hover { border-color: var(--brand); }
.order-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.order-mid { display: grid; grid-template-columns: 4.5rem 1fr; gap: .8rem; align-items: center; }
.order-mid .media { aspect-ratio: 1 / 1; border-radius: var(--r-sm); }
.state-line { display: flex; flex-wrap: wrap; gap: .4rem; }

.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline li { position: relative; padding: 0 0 1rem 2rem; }
.timeline li::before {
  content: ""; position: absolute; left: .4rem; top: .45rem; width: .8rem; height: .8rem; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--line);
}
.timeline li::after { content: ""; position: absolute; left: .73rem; top: 1.35rem; bottom: 0; width: 2px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline li.done::before { background: var(--brand); border-color: var(--brand); }
.timeline li.now::before { border-color: var(--accent); background: var(--accent); }
.timeline .when { font-size: .85rem; color: var(--ink-3); }

/* ---------------- 消息 ---------------- */
.msg {
  display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  text-decoration: none; color: inherit;
}
.msg .ico { width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.msg.unread { border-left: 6px solid var(--accent); }
.msg .grow { flex: 1; min-width: 0; }
.msg h3 { font-size: 1.02rem; }

/* ---------------- 我的 / 设置 ---------------- */
.profile { display: flex; align-items: center; gap: 1rem; }
.profile .avatar { width: 4rem; height: 4rem; font-size: 1.5rem; }
.menu { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.menu-item {
  display: flex; align-items: center; gap: .9rem; min-height: 64px; padding: .6rem 1rem;
  text-decoration: none; color: inherit; border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer;
}
.menu-item + .menu-item { border-top: 1px solid var(--line); }
.menu-item .grow { flex: 1; min-width: 0; }
.menu-item .lead { width: 2.4rem; height: 2.4rem; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.menu-item .chev { color: var(--ink-3); }
.menu-item:hover { background: var(--surface-2); }

.switch { position: relative; width: 3.6rem; height: 2.1rem; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch .track { position: absolute; inset: 0; border-radius: 999px; background: #B9C1BB; transition: background .15s; }
.switch .track::after {
  content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s;
}
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::after { transform: translateX(1.5rem); }
.switch input:focus-visible + .track { outline: 3px solid var(--focus); outline-offset: 2px; }
.sw-state { font-size: .8rem; font-weight: 700; color: var(--ink-3); min-width: 2em; text-align: right; }

.range-wrap { display: flex; align-items: center; gap: .8rem; }
.range-wrap input[type=range] { flex: 1; accent-color: var(--brand); height: 48px; }
.step-btn { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--brand); background: var(--surface); color: var(--brand); font-weight: 800; font-size: 1.1rem; cursor: pointer; }
.preview-text { padding: .8rem 1rem; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }

/* 家庭中心 */
.person { display: flex; align-items: center; gap: .9rem; }
.person .grow { flex: 1; min-width: 0; }
.perm-list { display: flex; flex-direction: column; gap: .2rem; margin-top: .6rem; }
.perm { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; border-top: 1px dashed var(--line); }
.perm .grow { flex: 1; min-width: 0; }

/* 乐龄圈 */
.works { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.work { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.work .media { aspect-ratio: 1 / 1; }
.work .body { padding: .6rem .8rem .8rem; display: flex; flex-direction: column; gap: .3rem; }
.work h3 { font-size: .98rem; }
.like-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: 0 .7rem; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); font-weight: 700; cursor: pointer; }
.like-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.like-btn[aria-pressed="true"] .svg-i { fill: currentColor; }

/* 帮我办理 */
.assist-hero { background: var(--accent); color: #fff; border-radius: var(--r-lg); padding: 1.4rem 1.2rem; display: flex; flex-direction: column; gap: .8rem; }
.assist-hero h1 { font-size: 1.6rem; }
.assist-phone { font-size: 2rem; font-weight: 800; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.assist-hero .btn { background: #fff; color: var(--accent); }

.credits { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; }
.credits a { word-break: break-all; }

/* ---------------- 弹层 ---------------- */
.sheet-root { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.sheet-mask { position: absolute; inset: 0; background: rgba(10, 20, 16, .5); }
.sheet {
  position: relative; width: 100%; max-height: 88vh; overflow: auto;
  background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 1.1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 1rem;
  animation: up .2s ease-out;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sheet-head h2 { font-size: 1.25rem; }
@keyframes up { from { transform: translateY(30px); opacity: .4; } to { transform: none; opacity: 1; } }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 5.5rem); transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: .85rem 1.3rem; border-radius: var(--r-md);
  font-weight: 700; max-width: min(92vw, 30rem); text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 70;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

footer.site-foot { margin-top: 2rem; padding: 1.5rem 0 1rem; color: var(--ink-3); font-size: .85rem; border-top: 1px solid var(--line); }
footer.site-foot a { color: var(--ink-2); }

/* ---------------- 长者模式差异 ---------------- */
body.elder .std-only { display: none !important; }
body:not(.elder) .elder-only { display: none !important; }
body.elder .prod { grid-template-columns: 6.5rem 1fr; }
body.elder .prod .meta .chip:nth-child(n+3) { display: none; }

@media (max-width: 639px) {
  .city-area { display: none; }
}

@media (max-width: 479px) {
  .order-strip .ico { display: none; }
  .top-actions .search-btn { display: none; }
  .mode-btn { padding: 0 .6rem; font-size: .78rem; }
  .brand-mark { width: 2rem; height: 2rem; font-size: 1rem; }
  body.elder .city-btn #cityLabel { font-size: .85rem; }
  body.elder .brand { display: none; }
  body.elder .top-actions .search-btn { display: none; }
  body[data-lang="en"] .big-tile strong, body[data-lang="pt"] .big-tile strong { font-size: 1.05rem; }
  .lang-btn { padding: 0 .45rem; }
  .lang-btn .svg-i { display: none; }
  .big-tile strong { font-size: 1.2rem; }
  .big-tile .label { padding: .7rem .75rem; }
}

/* ---------------- 平板 ---------------- */
@media (min-width: 640px) {
  .cat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .prod-grid { grid-template-columns: 1fr 1fr; }
  .hscroll { grid-auto-columns: 46%; }
  .big-tiles { grid-template-columns: repeat(2, 1fr); }
  .works { grid-template-columns: repeat(3, 1fr); }
  .svc-list { grid-template-columns: 1fr 1fr; }
  .sheet-root { align-items: center; padding: 1rem; }
  .sheet { max-width: 34rem; border-radius: var(--r-lg); }
}

/* ---------------- 电脑 ---------------- */
@media (min-width: 960px) {
  body { padding-bottom: 0; }
  .tabbar { display: none; }
  .brand-name { display: inline; }
  .topbar-inner { padding: .5rem 1.25rem; gap: 1rem; }
  .desk-nav { display: flex; gap: .15rem; margin-left: .25rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .desk-nav::-webkit-scrollbar { display: none; }
  .brand-name, .city-btn { white-space: nowrap; }
  .city-btn { flex: 0 0 auto; }
  .desk-nav a {
    white-space: nowrap; flex: none;
    display: inline-flex; align-items: center; gap: .4rem; min-height: 48px; padding: 0 .9rem;
    border-radius: var(--r-sm); text-decoration: none; color: var(--ink-2); font-weight: 700;
  }
  .desk-nav a:hover { background: var(--surface-2); }
  .desk-nav a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }
  .help-fab { bottom: 1.5rem; right: 1.5rem; }
  .toast { bottom: 2rem; }
  main { padding-top: 1.5rem; }
  .wrap { padding: 0 1.25rem; }

  .home-std { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.25rem; align-items: start; }
  .home-std .span-2 { grid-column: 1 / -1; }
  .hero { min-height: 22rem; }
  .hero h1 { font-size: 2rem; }
  .cat-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
  .prod-grid.two { grid-template-columns: 1fr 1fr; }
  .prod { grid-template-columns: 1fr; }
  .prod .media { aspect-ratio: 16 / 10; }
  body.elder .prod { grid-template-columns: 1fr; }
  .hscroll { grid-auto-columns: calc((100% - 1.6rem) / 3); }
  .svc-list { grid-template-columns: repeat(3, 1fr); }

  .big-tiles { grid-template-columns: repeat(4, 1fr); }
  .big-tile { min-height: 13rem; }
  .big-tile.call { grid-column: 1 / -1; }

  .detail { grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: start; }
  .detail-media { position: sticky; top: 5.5rem; }
  .sticky-cta { position: static; margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); }

  .two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.25rem; align-items: start; }
  .two-col > aside { position: sticky; top: 5.5rem; }
  .works { grid-template-columns: repeat(4, 1fr); }
  .narrow { max-width: 760px; margin: 0 auto; width: 100%; }
}

/* 葡文、英文和長者模式字較長：電腦版導航改為第二行，確保全部可見 */
@media (min-width: 960px) {
  body[data-lang="en"] .topbar-inner, body[data-lang="pt"] .topbar-inner, body.elder .topbar-inner { flex-wrap: wrap; row-gap: 0; }
  body[data-lang="en"] .desk-nav, body[data-lang="pt"] .desk-nav, body.elder .desk-nav {
    order: 3; flex-basis: 100%; flex-wrap: wrap; overflow: visible; margin: 0 0 .35rem -.5rem;
  }
}

@media (min-width: 960px) and (max-width: 1199px) {
  .topbar-inner { flex-wrap: wrap; row-gap: 0; }
  .desk-nav { order: 3; flex-basis: 100%; flex-wrap: wrap; overflow: visible; margin: 0 0 .35rem -.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* =========================================================
   擴充：鈴鐺、天氣、推薦、會員、管家、歡迎頁、子女首頁
   ========================================================= */
.bell-btn { position: relative; }
.bell-btn[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
.bell-dot {
  position: absolute; top: 4px; right: 2px; min-width: 1.15rem; height: 1.15rem; padding: 0 .28rem;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: .68rem; font-weight: 800; line-height: 1.15rem; text-align: center;
}
body.no-nav .tabbar, body.no-nav .desk-nav, body.no-nav .help-fab, body.no-nav .bell-btn, body.no-nav .search-btn, body.no-nav .mode-btn { display: none !important; }
body.no-nav { padding-bottom: 1rem; }

.chip-promo { background: #EDE7F6; color: #4A2F7C; border-color: transparent; }
.chip-gold { background: #FFF3D1; color: #6A4A00; border-color: transparent; text-decoration: none; }
a.chip-gold { min-height: 40px; align-self: flex-start; }
.center { text-align: center; }
.lead { font-size: 1.1rem; color: var(--ink-2); }

/* 天氣 */
.wx { background: linear-gradient(135deg, #E6F2FB, #F2F7EE); border: 1px solid #CFE0EA; border-radius: var(--r-lg); padding: .3rem; }
body.hc .wx { background: var(--surface); border-color: var(--line); }
.wx-btn {
  width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; color: var(--ink);
  display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; align-items: center; padding: .7rem .8rem; border-radius: var(--r-md);
}
.wx-btn:hover { background: rgba(255,255,255,.5); }
.wx-ic { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: #fff; color: #1F6FA8; display: grid; place-items: center; grid-row: span 2; }
.wx-ic .svg-i { width: 1.9rem; height: 1.9rem; }
.wx-ic.sm { width: 2.2rem; height: 2.2rem; } .wx-ic.sm .svg-i { width: 1.3rem; height: 1.3rem; }
.wx-ic.lg { width: 4.2rem; height: 4.2rem; } .wx-ic.lg .svg-i { width: 2.4rem; height: 2.4rem; }
.wx-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
.wx-temp { font-size: 2rem; font-weight: 800; line-height: 1; }
.wx-cond { font-weight: 700; }
.wx-sub { flex-basis: 100%; font-size: .85rem; color: var(--ink-3); }
.wx-tip { display: flex; gap: .35rem; align-items: flex-start; font-size: .9rem; color: var(--info-ink); font-weight: 600; }
.wx-tip .svg-i { width: 1.05rem; height: 1.05rem; margin-top: .15rem; }
.wx-compact .wx-temp { font-size: 1.7rem; }
.wx-src { font-size: .78rem; color: var(--ink-3); padding: 0 .9rem .4rem; }
.wx-loading { display: flex; align-items: center; gap: .6rem; padding: 1rem; color: var(--ink-3); }
.wx-now { display: flex; gap: 1rem; align-items: center; }
.wx-now .wx-temp { font-size: 2.4rem; }
.wx-days { display: flex; flex-direction: column; gap: .4rem; }
.wx-day { display: grid; grid-template-columns: 4.5em auto 1fr auto; gap: .2rem .7rem; align-items: center; padding: .55rem .2rem; border-bottom: 1px dashed var(--line); }
.wx-day .muted { grid-column: 3 / -1; }

/* 推薦卡 */
.rec-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; }
.rec-card { display: grid; grid-template-columns: 7rem 1fr; gap: .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .7rem; text-decoration: none; color: inherit; }
.rec-card:hover { border-color: var(--brand); }
.rec-card .media { border-radius: var(--r-md); aspect-ratio: 1 / 1; }
.rec-card .body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.rec-card h3 { font-size: 1.05rem; }
.rec-card .foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .6rem; }
.int-bar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.int-bar .grow { flex: 1; min-width: 14rem; display: flex; flex-direction: column; gap: .35rem; }
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; }
.int-chip { display: flex; align-items: center; gap: .45rem; min-height: 56px; padding: .4rem .8rem; border-radius: var(--r-md); border: 2px solid var(--line); background: var(--surface); font-weight: 700; cursor: pointer; text-align: left; }
.int-chip[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }

/* 文章 */
.article .art-hero { border-radius: var(--r-lg); aspect-ratio: 16 / 9; }
.art-body { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: .8rem; font-size: 1.08rem; line-height: 1.75; }
.art-body li::marker { color: var(--brand); font-weight: 800; }

/* 會員 */
.member-banner {
  display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: var(--r-lg);
  background: #FFF6DC; border: 1px solid #F0DCA0; color: #4D3700; text-decoration: none;
}
.member-banner.on { background: #FFF0C2; }
.member-banner .grow { flex: 1; min-width: 0; }
.mb-ic { width: 2.8rem; height: 2.8rem; border-radius: 50%; background: #E2B33C; color: #fff; display: grid; place-items: center; flex: none; }
.member-card { border-radius: var(--r-lg); padding: 1.2rem; color: #fff; background: linear-gradient(135deg, #3B5249, #12614F); display: flex; flex-direction: column; gap: .6rem; }
.member-card.on { background: linear-gradient(135deg, #7A5A12, #C5962B); }
.mc-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.mc-badge { display: inline-flex; align-items: center; gap: .35rem; background: rgba(255,255,255,.18); padding: .2rem .75rem; border-radius: 999px; font-weight: 800; }
.mc-name { font-size: 1.3rem; font-weight: 800; }
.mc-points .num { font-size: 1.8rem; font-weight: 800; }
.mc-points .small { display: block; opacity: .9; }
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { padding: .6rem .4rem; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare td:first-child .svg-i { color: var(--brand); margin-right: .45rem; vertical-align: -.2em; }
.compare td .svg-i { color: var(--brand); }
.gift-list { display: flex; flex-direction: column; gap: .5rem; }
.gift { display: flex; align-items: center; gap: .8rem; padding: .5rem 0; border-bottom: 1px dashed var(--line); }
.gift .grow { flex: 1; }

/* 每日提醒 */
.rem-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.rem { display: flex; align-items: center; gap: .8rem; padding: .5rem .2rem; border-bottom: 1px dashed var(--line); }
.rem .grow { flex: 1; min-width: 0; }
.rem.done .grow { color: var(--ink-3); text-decoration: line-through; }
.rem-ic { width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: none; }
.rem-btn { min-height: 48px; padding: 0 .9rem; }

/* AI 管家 */
.ai-ava { width: 3rem; height: 3rem; border-radius: 50%; background: linear-gradient(135deg, #12614F, #2E8C74); color: #fff; display: grid; place-items: center; flex: none; }
.ai-ava.sm { width: 2.4rem; height: 2.4rem; } .ai-ava.lg { width: 4rem; height: 4rem; }
.ai-ava .svg-i { width: 55%; height: 55%; }
.ai-head { display: flex; gap: 1rem; align-items: center; }
.ai-promo { display: flex; gap: .9rem; align-items: flex-start; }
.ai-promo .btn { margin-top: .6rem; }
.chat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.msg-me { display: flex; justify-content: flex-end; }
.msg-me .bub { background: var(--brand); color: #fff; border-radius: 18px 18px 4px 18px; padding: .7rem 1rem; max-width: 85%; font-size: 1.05rem; }
.msg-ai { display: flex; gap: .6rem; align-items: flex-start; }
.msg-ai .bub { background: var(--surface); border: 1px solid var(--line); border-radius: 4px 18px 18px 18px; padding: .8rem 1rem; max-width: 92%; display: flex; flex-direction: column; gap: .6rem; font-size: 1.05rem; }
.ai-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.ai-list a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 48px; padding: .4rem .7rem; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; }
.ai-note { color: var(--warn-ink); background: var(--warn-bg); border-radius: var(--r-sm); padding: .4rem .6rem; }
.ai-acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.ai-acts .btn { min-height: 48px; padding: 0 1rem; flex: 0 1 auto; }
.typing { color: var(--ink-3); font-style: italic; }
.ai-chips { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .2rem; }
.composer {
  position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + .4rem); z-index: 15;
  display: flex; gap: .5rem; align-items: center; background: var(--surface); border: 2px solid var(--line); border-radius: 999px; padding: .35rem;
  box-shadow: 0 6px 18px rgba(23,32,27,.08);
}
.composer:focus-within { border-color: var(--brand); }
.composer input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; min-height: 48px; padding: 0 .4rem; }
.composer .btn { min-height: 48px; border-radius: 999px; padding: 0 1rem; }
.mic { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.mic .svg-i { width: 1.5rem; height: 1.5rem; }
.mic.on { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(169,67,15,.18); } }
.ai-tools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
.big-tile.ai-tile { grid-column: auto; min-height: 6.5rem; background: linear-gradient(135deg, #12614F, #2E8C74); flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; padding: 1rem 1.2rem; }
.big-tile.ai-tile::after { display: none; }
.big-tile.ai-tile .ring { width: 4rem; height: 4rem; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; flex: none; }
.big-tile.ai-tile .ring .svg-i { width: 2rem; height: 2rem; }
.big-tile.ai-tile .label { padding: 0; }

/* 歡迎頁 */
.welcome { gap: 1.1rem; }
.lang-row { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.welcome-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.welcome-head h1 { font-size: 1.8rem; }
.brand-mark.lg { width: 4rem; height: 4rem; font-size: 2rem; border-radius: 20px; }
.welcome-q { font-size: 1.25rem; text-align: center; }
.role-cards { display: grid; grid-template-columns: 1fr; gap: .9rem; }
.role-card { position: relative; display: flex; align-items: flex-end; min-height: 11rem; border-radius: var(--r-lg); overflow: hidden; border: 3px solid transparent; padding: 0; cursor: pointer; text-align: left; color: #fff; background: var(--brand-dark); }
.role-card:hover, .role-card:focus-visible { border-color: var(--accent); }
.role-card .media { position: absolute; inset: 0; }
.role-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(5,25,19,.85)); }
.rc-body { position: relative; z-index: 1; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .2rem; }
.rc-body strong { font-size: 1.5rem; }

/* 子女首頁 */
.parent-card { display: flex; flex-direction: column; gap: .8rem; }
.perm-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.perm-chips .chip { white-space: normal; }
.lock-note { display: flex; gap: .45rem; align-items: flex-start; color: var(--ink-3); font-size: .92rem; }
.lock-note .svg-i { margin-top: .2rem; flex: none; }
.quick-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.quick { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: 72px; padding: .4rem; border-radius: var(--r-md); border: 2px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; font-size: .88rem; cursor: pointer; text-decoration: none; text-align: center; overflow-wrap: anywhere; }
.quick .svg-i { color: var(--brand); width: 1.5rem; height: 1.5rem; }
.quick:hover { border-color: var(--brand); }
.quick:disabled { opacity: .5; cursor: not-allowed; }
.todo-card { border-color: #F0C9A9; background: #FFF8F2; }
.todo { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.todo .grow { flex: 1; min-width: 10rem; }
.todo-ic { width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
ul.perm-list { list-style: none; margin: .4rem 0 0; padding: 0; }

@media (min-width: 640px) {
  .rec-grid { grid-template-columns: 1fr 1fr; }
  .role-cards { grid-template-columns: 1fr 1fr; }
  .role-card { min-height: 15rem; }
}
@media (min-width: 960px) {
  .rec-grid { grid-template-columns: repeat(3, 1fr); }
  .rec-card { grid-template-columns: 1fr; }
  .rec-card .media { aspect-ratio: 16 / 10; }
  .assistant .composer { bottom: 1rem; }
  body.elder .big-tile.ai-tile { grid-column: 1 / -1; }
}

/* 推薦卡在長者模式改為上圖下文，晶片可換行 */
.rec-card .chip { white-space: normal; }
body.elder .rec-card { grid-template-columns: 1fr; }
body.elder .rec-card .media { aspect-ratio: 16 / 9; }
.rem .grow strong { display: block; }

.compare th { white-space: nowrap; }
.compare th + th, .compare td + td { width: 4.2em; }

/* 長字詞（葡文、英文、長者大字）不撐破版面 */
.svc-list { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .svc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc { min-width: 0; flex-wrap: wrap; }
.svc h3, .svc .small { overflow-wrap: anywhere; }
.svc > .chip { white-space: normal; }
.section-head { flex-wrap: wrap; gap: .5rem; }
.filters { max-width: 100%; }
.compare { table-layout: fixed; }
.compare th:first-child, .compare td:first-child { overflow-wrap: anywhere; }
.compare th + th, .compare td + td { width: 3.6em; padding-left: .2rem; padding-right: .2rem; }
body.elder .compare th + th, body.elder .compare td + td { width: 3.4em; }
.compare th { white-space: normal; overflow-wrap: anywhere; }
.gift { flex-wrap: wrap; }
.gift .grow { min-width: 0; flex: 1 1 10rem; }
.gift .btn { max-width: 100%; }